:root{
--bg-primary:#0b0f14;
--bg-secondary:#111821;
--bg-panel:#151e29;
--gunmetal:#26313d;
--text-primary:#f4f7fa;
--text-muted:#aab4c0;
--accent-primary:#12b8e6;
--accent-deep:#0477c9;
--status-green:#29c77f;
--status-orange:#f2a93b;
--status-red:#e95757;
--border-soft:rgba(255,255,255,.09);
--shadow:0 24px 70px rgba(0,0,0,.28);
--radius:18px;
--container:1180px
}
*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
background:var(--bg-primary);
color:var(--text-primary);
font:16px/1.6 Arial,Helvetica,sans-serif;
margin:0;
overflow-x:hidden
}
body:before{
background:radial-gradient(circle at 70% 2%,rgba(18,184,230,.13),transparent 25rem),radial-gradient(circle at 7% 31%,rgba(242,169,59,.08),transparent 22rem);
content:"";
inset:0;
pointer-events:none;
position:fixed;
z-index:-1
}
a{
color:inherit;
text-decoration:none
}
img{
height:auto;
max-width:100%
}
.container{
margin:auto;
max-width:var(--container);
padding-inline:24px
}
.sr-only{
height:1px;
margin:-1px;
overflow:hidden;
position:absolute;
width:1px;
clip:rect(0,0,0,0)
}
.skip-link{
background:#fff;
color:#000;
left:12px;
padding:8px 12px;
position:fixed;
top:-50px;
z-index:100
}
.skip-link:focus{
top:12px
}
.site-header{
background:rgba(11,15,20,.82);
border-bottom:1px solid transparent;
backdrop-filter:blur(16px);
position:sticky;
top:0;
transition:.25s;
z-index:30
}
.site-header.is-scrolled{
border-color:var(--border-soft)
}
.nav-wrap{
align-items:center;
display:flex;
justify-content:space-between;
min-height:76px
}
.brand{
align-items:center;
display:inline-flex;
gap:10px;
line-height:1
}
.brand-mark{
align-items:center;
background:linear-gradient(135deg,var(--accent-primary),var(--accent-deep));
border-radius:10px;
box-shadow:0 0 22px rgba(18,184,230,.3);
display:inline-flex;
font-size:18px;
font-weight:800;
height:38px;
justify-content:center;
letter-spacing:-2px;
width:42px
}
.brand strong{
display:block;
font-size:17px;
letter-spacing:.02em
}
.brand small{
color:var(--text-muted);
display:block;
font-size:9px;
letter-spacing:.13em;
margin-top:5px;
text-transform:uppercase
}
.site-nav{
align-items:center;
display:flex;
gap:23px
}
.site-nav>a:not(.button){
color:var(--text-muted);
font-size:14px;
font-weight:700;
padding:28px 0;
position:relative
}
.site-nav>a:not(.button):after{
background:var(--accent-primary);
bottom:18px;
content:"";
height:2px;
left:0;
position:absolute;
transform:scaleX(0);
transition:.2s;
width:100%
}
.site-nav>a:hover,.site-nav>a.is-active{
color:#fff
}
.site-nav>a:hover:after,.site-nav>a.is-active:after{
transform:scaleX(1)
}
.button{
align-items:center;
background:linear-gradient(135deg,var(--accent-primary),var(--accent-deep));
border:1px solid transparent;
border-radius:9px;
color:#fff;
cursor:pointer;
display:inline-flex;
font-weight:700;
gap:9px;
justify-content:center;
padding:13px 20px;
transition:transform .2s,box-shadow .2s
}
.button:hover{
box-shadow:0 12px 24px rgba(18,184,230,.2);
transform:translateY(-2px)
}
.button-outline{
background:transparent;
border-color:var(--border-soft)
}
.button-small{
font-size:14px;
padding:10px 14px
}
.menu-toggle{
background:none;
border:0;
color:#fff;
display:none;
padding:8px
}
.menu-toggle span:not(.sr-only){
background:#fff;
display:block;
height:2px;
margin:5px;
width:24px
}
.prototype-notice{
background:#162432;
border-bottom:1px solid rgba(18,184,230,.2);
color:#c3eefa;
font-size:12px;
padding:7px 20px;
text-align:center
}
.hero{
isolation:isolate;
overflow:hidden;
padding:74px 0 88px;
position:relative
}
.hero:after{
background-image:linear-gradient(rgba(18,184,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(18,184,230,.07) 1px,transparent 1px);
background-size:38px 38px;
content:"";
inset:0;
mask-image:linear-gradient(to bottom,#000,transparent);
pointer-events:none;
position:absolute;
z-index:-1
}
.hero-grid{
align-items:center;
display:grid;
gap:42px;
grid-template-columns:1fr 1.08fr
}
.eyebrow{
color:#71dffa;
font-size:12px;
font-weight:800;
letter-spacing:.16em;
margin:0 0 12px;
text-transform:uppercase
}
.hero h1,.page-intro h1{
font-size:clamp(42px,5vw,72px);
letter-spacing:-.055em;
line-height:1.01;
margin:0
}
.gradient-text{
background:linear-gradient(90deg,#fff,#79e7ff);
background-clip:text;
color:transparent
}
.lead{
color:var(--text-muted);
font-size:18px;
max-width:660px
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:28px 0
}
.trust-line{
border-left:2px solid var(--status-green);
color:#cbd3db;
font-size:14px;
margin-top:24px;
padding-left:14px
}
.hero-visual{
min-height:470px;
position:relative
}
.interface{
background:linear-gradient(145deg,#1a2836,#0e151f);
border:1px solid rgba(142,220,255,.22);
box-shadow:var(--shadow);
overflow:hidden
}
.browser-frame{
border-radius:15px;
position:absolute;
right:0;
top:40px;
width:78%
}
.browser-bar{
align-items:center;
background:#101720;
display:flex;
gap:6px;
padding:10px 13px
}
.browser-bar i{
background:#354252;
border-radius:50%;
display:block;
height:7px;
width:7px
}
.browser-bar i:first-child{
background:var(--status-red)
}
.browser-bar i:nth-child(2){
background:var(--status-orange)
}
.browser-bar i:nth-child(3){
background:var(--status-green)
}
.dashboard{
display:grid;
gap:10px;
grid-template-columns:27% 1fr;
padding:12px
}
.dash-nav{
background:#101821;
border-radius:8px;
min-height:245px;
padding:13px
}
.dash-nav b,.dash-nav span{
background:#243343;
border-radius:4px;
display:block;
height:8px;
margin:10px 0
}
.dash-nav b{
background:var(--accent-primary);
width:75%
}
.dash-main{
display:grid;
gap:9px;
grid-template-columns:repeat(3,1fr)
}
.metric{
background:#1b2836;
border:1px solid var(--border-soft);
border-radius:7px;
min-height:68px;
padding:9px
}
.metric small{
color:#91a1ae;
display:block;
font-size:8px
}
.metric strong{
font-size:18px
}
.metric.green strong{
color:var(--status-green)
}
.metric.orange strong{
color:var(--status-orange)
}
.metric.red strong{
color:var(--status-red)
}
.chart{
background:linear-gradient(165deg,#1a2e3b,#14212c);
border-radius:7px;
grid-column:span 3;
min-height:128px;
overflow:hidden;
position:relative
}
.chart:after{
border-bottom:2px solid var(--accent-primary);
border-radius:50%;
content:"";
height:78px;
left:14px;
position:absolute;
top:32px;
transform:rotate(-6deg);
width:88%
}
.phone-frame{
background:#06090d;
border:7px solid #384654;
border-radius:29px;
box-shadow:var(--shadow);
height:390px;
overflow:hidden;
position:absolute;
width:185px
}
.phone-frame:before{
background:#384654;
border-radius:0 0 8px 8px;
content:"";
height:15px;
left:50%;
position:absolute;
top:0;
transform:translateX(-50%);
width:75px;
z-index:2
}
.phone-one{
bottom:0;
left:0;
transform:rotate(-8deg)
}
.phone-two{
bottom:15px;
left:162px;
transform:rotate(7deg);
z-index:2
}
.phone-content{
background:#101923;
height:100%;
padding:32px 12px 12px
}
.phone-content p{
color:#8da1b3;
font-size:7px;
margin:0
}
.phone-title{
font-size:13px;
font-weight:bold;
margin:8px 0 14px
}
.phone-card{
background:#1d2b38;
border:1px solid var(--border-soft);
border-radius:8px;
margin:8px 0;
padding:9px
}
.phone-card strong{
font-size:10px
}
.phone-card span{
border-radius:5px;
color:#08130d;
display:inline-block;
font-size:7px;
font-weight:bold;
margin-top:6px;
padding:3px 5px
}
.ok{
background:var(--status-green)
}
.warn{
background:var(--status-orange)
}
.danger{
background:var(--status-red)
}
.section{
padding:90px 0
}
.section-alt{
background:linear-gradient(180deg,rgba(21,30,41,.72),rgba(17,24,33,.4));
border-block:1px solid var(--border-soft)
}
.section-heading{
margin-bottom:38px;
max-width:720px
}
.section-heading h2{
font-size:clamp(30px,4vw,48px);
letter-spacing:-.045em;
line-height:1.08;
margin:0 0 14px
}
.section-heading p{
color:var(--text-muted);
font-size:17px;
margin:0
}
.card-grid{
display:grid;
gap:16px;
grid-template-columns:repeat(3,1fr)
}
.feature-card,.panel-card{
background:linear-gradient(145deg,rgba(28,40,54,.88),rgba(18,26,36,.9));
border:1px solid var(--border-soft);
border-radius:var(--radius);
padding:24px;
transition:.22s
}
.feature-card:hover,.panel-card:hover{
border-color:rgba(18,184,230,.48);
transform:translateY(-4px)
}
.feature-icon{
align-items:center;
background:rgba(18,184,230,.13);
border:1px solid rgba(18,184,230,.25);
border-radius:10px;
color:#6de0ff;
display:flex;
font-size:22px;
height:44px;
justify-content:center;
margin-bottom:18px;
width:44px
}
.feature-card h3,.panel-card h3{
font-size:18px;
margin:0 0 8px
}
.feature-card p,.panel-card p{
color:var(--text-muted);
font-size:14px;
margin:0
}
.card-link{
color:#7adff7;
display:inline-block;
font-size:13px;
font-weight:bold;
margin-top:14px
}
.lifecycle{
align-items:stretch;
display:flex;
gap:0;
justify-content:center
}
.lifecycle-step{
background:#15212d;
border:1px solid var(--border-soft);
font-size:14px;
font-weight:bold;
padding:15px 21px;
position:relative
}
.lifecycle-step:not(:last-child):after{
color:var(--accent-primary);
content:'→';
font-size:22px;
position:absolute;
right:-16px;
top:9px;
z-index:2
}
.showcase{
display:grid;
gap:42px
}
.showcase-row{
align-items:center;
display:grid;
gap:45px;
grid-template-columns:1fr 1fr
}
.showcase-row:nth-child(even) .showcase-copy{
order:2
}
.showcase-row:nth-child(even) .showcase-visual{
order:1
}
.showcase-visual{
min-height:295px;
position:relative
}
.showcase-visual .browser-frame{
left:4%;
right:auto;
top:0;
width:94%
}
.showcase-visual .phone-frame{
bottom:-18px;
height:310px;
left:16%;
width:146px
}
.showcase-copy h3{
font-size:28px;
margin:0 0 12px
}
.showcase-copy p{
color:var(--text-muted)
}
.status-list{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:15px
}
.status-label{
border:1px solid var(--border-soft);
border-radius:20px;
font-size:12px;
padding:5px 9px
}
.status-label:before{
border-radius:50%;
content:"";
display:inline-block;
height:8px;
margin-right:6px;
width:8px
}
.status-label.green:before{
background:var(--status-green)
}
.status-label.orange:before{
background:var(--status-orange)
}
.status-label.red:before{
background:var(--status-red)
}
.cta{
background:radial-gradient(circle at 80% 20%,rgba(18,184,230,.22),transparent 32rem),#101923;
border:1px solid var(--border-soft);
border-radius:24px;
margin:40px auto 90px;
max-width:1132px;
padding:52px;
text-align:center
}
.cta h2{
font-size:clamp(30px,4vw,48px);
letter-spacing:-.04em;
margin:0 0 12px
}
.cta p{
color:var(--text-muted);
margin:0 auto 24px;
max-width:650px
}
.page-intro{
background:linear-gradient(160deg,rgba(18,184,230,.1),transparent 50%);
border-bottom:1px solid var(--border-soft);
padding:80px 0 54px
}
.page-intro .lead{
margin-bottom:0
}
.module-section{
border-top:1px solid var(--border-soft);
display:grid;
gap:36px;
grid-template-columns:210px 1fr;
padding:42px 0
}
.module-section h2{
font-size:28px;
letter-spacing:-.03em;
margin:0
}
.module-section p{
color:var(--text-muted);
margin-top:0
}
.check-list{
columns:2;
list-style:none;
padding:0
}
.check-list li{
break-inside:avoid;
margin:0 0 10px
}
.check-list li:before{
color:var(--status-green);
content:'✓';
font-weight:bold;
margin-right:9px
}
.capabilities{
display:grid;
gap:10px;
grid-template-columns:repeat(3,1fr)
}
.capability{
background:#121c26;
border:1px solid var(--border-soft);
border-radius:9px;
color:#dbe4ec;
font-size:14px;
padding:12px
}
.service-grid,.package-grid{
display:grid;
gap:18px;
grid-template-columns:repeat(3,1fr)
}
.journey{
counter-reset:journey;
display:grid;
gap:14px;
grid-template-columns:repeat(4,1fr)
}
.journey article{
background:#151e29;
border-top:2px solid var(--accent-primary);
padding:19px
}
.journey article:before{
color:#63defc;
content:counter(journey,decimal-leading-zero);
counter-increment:journey;
font-size:12px;
font-weight:bold
}
.journey h3{
font-size:16px;
margin:10px 0 5px
}
.journey p{
color:var(--text-muted);
font-size:13px;
margin:0
}
.package-card{
background:linear-gradient(150deg,#172330,#121a24);
border:1px solid var(--border-soft);
border-radius:var(--radius);
display:flex;
flex-direction:column;
padding:28px
}
.package-card.featured{
border-color:rgba(18,184,230,.65);
box-shadow:0 14px 50px rgba(18,184,230,.08)
}
.package-card h2{
font-size:25px;
margin:0 0 8px
}
.package-card .price-note{
color:#71dffa;
font-size:13px;
font-weight:bold;
margin:0 0 18px
}
.package-card ul{
color:var(--text-muted);
flex:1;
list-style:none;
padding:0
}
.package-card li{
margin-bottom:8px
}
.package-card li:before{
color:var(--status-green);
content:'✓';
margin-right:8px
}
.comparison-wrap{
overflow:auto
}
.comparison{
border-collapse:collapse;
min-width:760px;
width:100%
}
.comparison th,.comparison td{
border-bottom:1px solid var(--border-soft);
padding:13px;
text-align:left
}
.comparison th{
background:#172431
}
.included{
color:#7de9a8;
font-weight:bold
}
.optional{
color:#f6c96f
}
.custom{
color:#79dff5
}
.director-grid{
display:grid;
gap:22px;
grid-template-columns:repeat(2,1fr)
}
.director-card{
background:#151e29;
border:1px solid var(--border-soft);
border-radius:var(--radius);
overflow:hidden
}
.director-card img{
aspect-ratio:4/3;
display:block;
object-fit:cover;
width:100%
}
.director-copy{
padding:25px
}
.director-copy h2{
font-size:27px;
margin:0
}
.director-copy .title{
color:#6edffb;
font-size:14px;
font-weight:bold;
margin:4px 0 16px
}
.director-copy p{
color:var(--text-muted)
}
.tag-list{
display:flex;
flex-wrap:wrap;
gap:7px;
list-style:none;
padding:0
}
.tag-list li{
background:#202d39;
border-radius:20px;
color:#d6e0e8;
font-size:12px;
padding:5px 9px
}
.editable-note{
border-left:2px solid var(--status-orange);
color:#d6bd8b;
font-size:12px;
margin-top:16px;
padding-left:10px
}
.contact-layout{
align-items:start;
display:grid;
gap:38px;
grid-template-columns:.75fr 1.25fr
}
.contact-aside{
position:sticky;
top:100px
}
.contact-aside h2{
font-size:28px;
line-height:1.15
}
.contact-aside p{
color:var(--text-muted)
}
.contact-form{
background:#151e29;
border:1px solid var(--border-soft);
border-radius:var(--radius);
padding:28px
}
.form-grid{
display:grid;
gap:17px;
grid-template-columns:repeat(2,1fr)
}
.form-field{
display:flex;
flex-direction:column;
gap:6px
}
.form-field.full{
grid-column:1/-1
}
.form-field label,.legend{
color:#e6edf3;
font-size:14px;
font-weight:bold
}
.form-field input,.form-field select,.form-field textarea{
background:#0e151e;
border:1px solid #324150;
border-radius:8px;
color:#f4f7fa;
font:inherit;
padding:11px 12px;
width:100%
}
.form-field textarea{
min-height:130px;
resize:vertical
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
border-color:var(--accent-primary);
box-shadow:0 0 0 3px rgba(18,184,230,.15);
outline:0
}
.choice-group{
border:0;
margin:0;
padding:0
}
.choice-options{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:8px
}
.choice-options label{
background:#101821;
border:1px solid var(--border-soft);
border-radius:7px;
color:var(--text-muted);
cursor:pointer;
font-size:13px;
padding:8px
}
.choice-options input{
accent-color:var(--accent-primary);
margin-right:5px
}
.consent{
align-items:flex-start;
color:var(--text-muted);
display:flex;
font-size:13px;
gap:9px;
margin:22px 0
}
.consent input{
accent-color:var(--accent-primary);
margin-top:4px
}
.honeypot{
height:0!important;
opacity:0;
overflow:hidden;
position:absolute!important;
width:0!important
}
.form-errors,.form-success{
border-radius:8px;
margin-bottom:18px;
padding:13px
}
.form-errors{
background:rgba(233,87,87,.12);
border:1px solid rgba(233,87,87,.32);
color:#ffc4c4
}
.form-success{
background:rgba(41,199,127,.12);
border:1px solid rgba(41,199,127,.35);
color:#c2f4d5
}
.legal-copy{
color:var(--text-muted);
max-width:850px
}
.legal-copy h2{
color:var(--text-primary);
margin-top:38px
}
.legal-copy p{
margin-bottom:18px
}
.reveal{
opacity:0;
transform:translateY(18px);
transition:opacity .6s ease,transform .6s ease
}
.reveal.is-visible{
opacity:1;
transform:none
}
.muted{
color:var(--text-muted)
}
.site-footer{
background:#080c11;
border-top:1px solid var(--border-soft);
padding-top:54px
}
.footer-grid{
display:grid;
gap:30px;
grid-template-columns:2fr 1fr 1fr 1.3fr
}
.footer-grid h2{
font-size:13px;
letter-spacing:.1em;
margin:0 0 14px;
text-transform:uppercase
}
.footer-grid p{
color:var(--text-muted);
font-size:13px
}
.footer-grid a:not(.brand){
color:var(--text-muted);
display:block;
font-size:13px;
margin:8px 0
}
.footer-grid a:hover{
color:#fff
}
.footer-bottom{
border-top:1px solid var(--border-soft);
color:#7f8a96;
font-size:12px;
margin-top:32px;
padding-block:19px
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation-duration:.01ms!important;
scroll-behavior:auto!important;
transition-duration:.01ms!important
}
.reveal{
opacity:1;
transform:none
}

}