:root{
  --bg:#070b14; --bg2:#0d1526; --card:#111a2e; --line:#1e293f;
  --blue:#3b7cf6; --blue-lt:#7db2ff; --white:#f4f7fc; --gray:#93a1c0; --gray-dim:#5c6b8a;
  --radius:10px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--white);font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-0.02em;margin:0}
p{color:var(--gray);line-height:1.6;margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}

/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(7,11,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px}
.brand span{color:var(--blue-lt)}
nav.links{display:flex;gap:28px}
nav.links a{background:none;border:none;color:var(--gray);font-size:14.5px;cursor:pointer;padding:6px 2px;border-bottom:2px solid transparent}
nav.links a.active,nav.links a:hover{color:var(--white);border-color:var(--blue)}
.cta-btn{background:var(--blue);color:#fff;border:none;padding:11px 20px;border-radius:7px;font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cta-btn:hover{background:#2f68d6}
.cta-outline{background:transparent;border:1px solid var(--line);color:var(--white);padding:10px 19px;border-radius:7px;font-size:14.5px;cursor:pointer}
.cta-outline:hover{border-color:var(--gray-dim)}
.navmobile{display:none}
@media(max-width:800px){.navrow{flex-wrap:wrap;gap:14px}nav.links{display:flex;order:3;width:100%;justify-content:center;gap:20px}}

/* hero */
.hero{position:relative;overflow:hidden;padding:88px 0 70px;background:
  radial-gradient(ellipse 900px 500px at 78% 15%, rgba(59,124,246,.28), transparent 60%),
  linear-gradient(180deg,#070b14,#0a0f1e)}
.hero .wrap{position:relative;z-index:2}
.eyebrow{color:var(--blue-lt);font-size:13.5px;font-weight:600;margin-bottom:18px}
.hero h1{font-size:54px;line-height:1.06;max-width:620px}
.hero h1 .glow{color:var(--blue-lt)}
.hero p.lead{max-width:480px;margin-top:20px;font-size:16.5px}
.hero .btns{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.netcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-stats{position:relative;z-index:2;display:flex;gap:40px;margin-top:48px;flex-wrap:wrap}
.hero-stats .n{font-size:26px;font-weight:800;color:var(--white)}
.hero-stats .l{font-size:12.5px;color:var(--gray);margin-top:2px}
@media(max-width:900px){.hero h1{font-size:38px}}

/* why us */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:800px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}
.why-item .ic{width:38px;height:38px;border-radius:8px;background:rgba(59,124,246,.14);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.why-item h3{font-size:15px;margin-bottom:6px}
.why-item p{font-size:13.5px}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
@media(max-width:800px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--blue);padding-top:14px}
.step .num{font-size:12px;color:var(--blue-lt);font-weight:700;margin-bottom:10px}
.step h3{font-size:15.5px;margin-bottom:6px}
.step p{font-size:13.5px}

/* stat/feature strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip .item{display:flex;align-items:center;gap:12px;padding:22px 18px;border-right:1px solid var(--line)}
.strip .item:last-child{border-right:none}
.strip .item svg{flex:none}
.strip .item span{font-size:14px;color:var(--gray)}
@media(max-width:800px){.strip .wrap{grid-template-columns:repeat(2,1fr)}.strip .item:nth-child(2n){border-right:none}}

/* section headers */
.section{padding:76px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;flex-wrap:wrap}
.section-head h2{font-size:26px}
.section-head a.view{color:var(--blue-lt);font-size:14px}

/* grid cards */
.grid6{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(min-width:1101px){.grid6 .card{padding:16px}}
@media(max-width:1100px){.grid6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.grid6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid6{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.solution-card-link{display:block;color:inherit}
.solution-card-link .card{height:100%}
.card .ic{width:38px;height:38px;border-radius:8px;background:rgba(59,124,246,.14);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card h3{font-size:15.5px;margin-bottom:6px}
.card p{font-size:13.5px}

/* dark feature panel */
.panel{position:relative;overflow:hidden;background:#0a1220;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:74px 0}
.panel .orb{position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(59,124,246,.35),rgba(59,124,246,0) 70%);filter:blur(10px);animation:drift 8s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(-52%) scale(1)}50%{transform:translateY(-48%) scale(1.08)}}
.panel .row{position:relative;z-index:2;display:flex;gap:60px;align-items:center;justify-content:space-between}
.panel h2{font-size:28px;max-width:420px}
.panel p{margin-top:16px;max-width:420px}
.panel a{color:var(--blue-lt);font-size:14.5px;display:inline-block;margin-top:18px}
.panel .stat-col{display:flex;flex-direction:column;gap:22px;flex:none}
.panel .stat-col .n{font-size:30px;font-weight:800}
.panel .stat-col .l{font-size:12.5px;color:var(--gray)}
@media(max-width:800px){.panel .row{flex-direction:column;align-items:flex-start}.panel .orb{opacity:.5}}

/* cta band */
.band{background:var(--blue);padding:34px 0}
.band .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.band h3{font-size:21px;color:#fff}
.band .cta-btn{background:#fff;color:var(--blue)}
.band .cta-btn:hover{background:#e9f0ff}

/* footer */
footer{padding:40px 0;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .flinks{display:flex;gap:14px 22px;flex-wrap:wrap;font-size:13.5px;color:var(--gray)}
footer .flinks a:hover{color:var(--white)}
footer .fine{font-size:12.5px;color:var(--gray-dim);margin-top:6px}

/* pages */
.page{display:none}
.page.active{display:block}

/* legal pages */
.legal .wrap{max-width:850px}
.legal .wrap>*{max-width:70ch}
.legal h1{font-size:32px;margin-bottom:12px}
.legal h2{font-size:21px;margin:30px 0 10px}
.legal h3{font-size:17px;margin:22px 0 8px}
.legal p,.legal li{font-size:15px;line-height:1.75;color:var(--gray)}
.legal p{margin:0 0 14px}
.legal ul{padding-left:24px;margin:0 0 18px}
.legal li{padding-left:3px;margin-bottom:8px}
.legal strong{color:var(--white)}
.legal a{color:var(--blue-lt);text-decoration:underline;text-underline-offset:3px}
.legal .last-updated{font-size:13px;color:var(--gray-dim);margin-bottom:24px}
.placeholder{color:#ffd166;outline:1px dashed #ffd166;outline-offset:2px;padding:0 2px}

/* solutions page */
.solu-list{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.solu-list .card{display:flex;gap:20px;align-items:flex-start}
.solu-list .ic{margin-bottom:0;flex:none}
.solu-list .body h3{font-size:17px;margin-bottom:6px}
.solu-list .body p{font-size:14px}
.solution-detail .lead{font-size:17px;margin:14px 0 26px;max-width:70ch}
.solution-detail .steps{margin:16px 0 28px}
.solution-detail h3{font-size:17px;margin:22px 0 8px}
.solution-detail .installation-placeholder{margin:26px 0}
.solution-detail .related-solutions{margin:26px 0 18px}
.solution-detail .related-solutions a{color:var(--blue-lt);text-decoration:underline;text-underline-offset:3px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}}
.infoline{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.infoline .ic{background:rgba(59,124,246,.14);border-radius:8px;padding:9px;flex:none}
.infoline h4{font-size:14.5px;margin-bottom:3px}
.infoline p{font-size:13.5px}
form.contactform{display:flex;flex-direction:column;gap:12px}
form.contactform input,form.contactform textarea{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:12px 14px;color:var(--white);font-size:14px;font-family:inherit}
form.contactform select{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:12px 14px;color:var(--white);font-size:14px;font-family:inherit}
form.contactform textarea{min-height:100px;resize:vertical}
form.contactform input:focus,form.contactform textarea:focus,form.contactform select:focus{outline:2px solid var(--blue);outline-offset:1px}
.consent-note{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--gray);line-height:1.55}
.consent-note input[type=checkbox]{appearance:auto;width:16px;height:16px;padding:0;margin:2px 0 0;flex:none;accent-color:var(--blue);background:none;border:0}
.consent-note a{color:var(--blue-lt);text-decoration:underline;text-underline-offset:3px}
.formmsg{font-size:13.5px;color:var(--blue-lt);min-height:18px}

/* reviews */
.rev-summary{display:flex;align-items:center;gap:22px;margin-bottom:30px;flex-wrap:wrap}
.rev-score{font-size:44px;font-weight:800}
.rev-stars{color:var(--blue-lt);font-size:20px;letter-spacing:2px}
.rev-count{font-size:13.5px;color:var(--gray)}
.rev-item{border-bottom:1px solid var(--line);padding:18px 0}
.rev-item:last-child{border-bottom:none}
.rev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rev-name{font-weight:600;font-size:14.5px}
.rev-date{font-size:12.5px;color:var(--gray-dim)}
.rev-stars-sm{color:var(--blue-lt);font-size:14px;letter-spacing:1px;margin-bottom:6px}
.rev-text{font-size:14px}
.star-pick{display:flex;gap:6px;font-size:24px}
.star-pick button{background:none;border:none;cursor:pointer;color:var(--gray-dim);padding:0}
.star-pick button.on{color:var(--blue-lt)}
.addrev{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:34px}
.addrev h3{font-size:16px;margin-bottom:14px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

.infoline a{color:inherit;text-decoration:none}
.infoline a:hover{color:var(--blue)}
