:root{
  --bg:#050b16;--bg2:#07111f;--panel:#0b1628;--panel2:#101d33;
  --text:#f8fafc;--muted:#94a3b8;--line:#1e293b;--blue:#1e88ff;--cyan:#22d3c5;
  --shadow:0 30px 90px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 20% 20%,rgba(30,136,255,.25),transparent 35%),
    radial-gradient(circle at 80% 20%,rgba(34,211,197,.16),transparent 32%),
    linear-gradient(180deg,#07111f,#050b16);
  background-attachment:fixed;
}

.noise{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(30,136,255,.17),transparent 65%);pointer-events:none;z-index:1;transform:translate(-50%,-50%)}

.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 7%;background:rgba(5,11,22,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{display:block;font-family:"Space Grotesk";font-size:18px;color:#f8fafc}
.brand small{display:block;color:var(--muted);font-size:12px}
.logo{height:45px;width:auto;margin-top:10px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(30,136,255,.15))}

.nav{display:flex;gap:28px}
.nav a{color:#cbd5e1;text-decoration:none;font-weight:700;font-size:14px}
.nav a:hover{color:var(--cyan)}
.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;text-decoration:none;font-weight:800;transition:.25s}
.header-cta{background:rgba(30,136,255,.13);border:1px solid rgba(30,136,255,.45);padding:12px 18px;color:white}
.menu-btn{display:none}

#networkCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  opacity:.42;
  z-index:0;
  pointer-events:none;
}

.hero-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
}

.hero{
  position:relative;
  min-height:100vh;
  padding:145px 7% 90px;
  display:grid;
  grid-template-columns:1.1fr .75fr;
  gap:54px;
  align-items:center;
  background:transparent;
}

.hero-content,.hero-panel,.section,.contact,footer{position:relative;z-index:2}
.eyebrow,.tag{display:inline-block;color:var(--cyan);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:2px}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;margin:0}
h1{font-size:clamp(25px,6vw,50px);line-height:.98;letter-spacing:-2.5px;max-width:980px}
.hero p,.section-head p,.contact p{font-size:18px;line-height:1.8;color:#cbd5e1;max-width:800px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin:34px 0}
.btn{padding:15px 24px;border:1px solid rgba(255,255,255,.12);color:white}
.btn.primary{background:linear-gradient(135deg,var(--blue),#4aa3ff);box-shadow:0 0 35px rgba(30,136,255,.35)}
.btn.secondary{background:rgba(255,255,255,.06)}
.btn:hover,.card:hover,.step:hover{transform:translateY(-7px)}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px}
.hero-pills span{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(15,29,51,.78);color:#dbeafe;font-size:13px;font-weight:700}

.hero-panel{background:linear-gradient(180deg,rgba(16,29,51,.86),rgba(8,17,31,.92));border:1px solid rgba(34,211,197,.18);border-radius:28px;padding:26px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.panel-top{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:24px}
.panel-top span{width:10px;height:10px;border-radius:50%;background:var(--cyan)}
.panel-top span:nth-child(2){background:var(--blue)}
.panel-top span:nth-child(3){background:#f59e0b}
.panel-top strong{margin-left:auto;color:#cbd5e1;font-size:13px}
.security-score{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.security-score small{display:block;color:var(--muted);margin-bottom:6px}
.security-score strong{font-size:52px;color:white}
.ring{width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--cyan) 0 92%,rgba(255,255,255,.08) 92%);position:relative}
.ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--panel)}
.metric-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:15px 0;color:#cbd5e1}
.metric-row b{color:var(--cyan)}
.mini-chart{height:92px;display:flex;align-items:end;gap:9px;margin-top:20px}
.mini-chart i{flex:1;border-radius:10px 10px 0 0;background:linear-gradient(var(--blue),var(--cyan));opacity:.9}
.mini-chart i:nth-child(1){height:34%}
.mini-chart i:nth-child(2){height:56%}
.mini-chart i:nth-child(3){height:44%}
.mini-chart i:nth-child(4){height:78%}
.mini-chart i:nth-child(5){height:92%}

.trust-strip{position:relative;z-index:3;padding:24px 7%;display:flex;justify-content:space-between;gap:20px;background:rgba(8,19,34,.72);border-block:1px solid var(--line);color:#cbd5e1;flex-wrap:wrap;backdrop-filter:blur(10px)}
.trust-strip div{display:flex;gap:22px;flex-wrap:wrap}
.trust-strip span{color:white;font-weight:800}

.section{padding:100px 7%;background:transparent}
.section.alt{background:rgba(7,17,31,.35);backdrop-filter:blur(4px)}
.clients{background:transparent} 

.client-logos{display:flex;justify-content:center;align-items:center;gap:70px;margin-top:70px;width:100%;}

.client-logos img{object-fit:contain;display:block;opacity:.85;transition:.3s;}
.clients{
    padding:100px 7%;
    text-align:center;
}

.client-logos{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:70px;
    flex-wrap:wrap;
    margin-top:60px;
}

.section-head{text-align:center;max-width:900px;margin:0 auto 56px}
h2{font-size:clamp(32px,4vw,56px);line-height:1.05;letter-spacing:-1.5px;margin:14px 0}
.cards{display:grid;gap:22px;max-width:1220px;margin:0 auto}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.services{grid-template-columns:repeat(3,1fr)}
.card,.step{background:linear-gradient(180deg,rgba(16,29,51,.92),rgba(11,22,40,.92));border:1px solid var(--line);border-radius:24px;padding:30px;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.12);backdrop-filter:blur(10px)}
.card:hover,.step:hover{border-color:rgba(34,211,197,.55);box-shadow:0 30px 70px rgba(30,136,255,.14)}
.icon{font-size:34px;margin-bottom:18px}
.card h3,.step h3{font-size:24px;margin-bottom:12px}
.card p,.step p,footer p,footer small{color:var(--muted);line-height:1.7}

.framework-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.framework-grid div{padding:26px;text-align:center;border-radius:18px;background:rgba(30,136,255,.08);border:1px solid rgba(30,136,255,.22);font-weight:900;color:#e0f2fe;backdrop-filter:blur(8px)}
.timeline{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step b{font-size:42px;color:var(--blue);display:block;margin-bottom:12px}

.contact{
  padding:100px 7%;
  background:transparent;
  display:flex;
  justify-content:center;
  align-items:center;
}
.contact-card{
  width:100%;
  max-width:960px;
  margin:0 auto;
  text-align:center;
  border:1px solid rgba(34,211,197,.22);
  background:linear-gradient(180deg,rgba(16,29,51,.9),rgba(7,17,31,.95));
  border-radius:32px;
  padding:60px 35px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.contact .hero-actions{justify-content:center}

footer{padding:45px 7%;text-align:center;background:rgba(3,7,18,.8);border-top:1px solid var(--line);backdrop-filter:blur(10px)}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .nav,.header-cta{display:none}
  .menu-btn{display:block;background:none;border:0;color:white;font-size:28px}
  .hero{grid-template-columns:1fr;padding-top:125px}
  .cards.three,.cards.services,.framework-grid,.timeline{grid-template-columns:1fr}
  .trust-strip{display:block}
  .hero-panel{margin-top:10px}
  .site-header{padding:14px 5%}
}

/* Fix service page hero being hidden under fixed header */
.service-hero,
.page-hero{
  padding-top:170px !important;
  padding-bottom:70px !important;
}

.service-hero h1,
.page-hero h1{
  font-size:clamp(34px,4vw,56px) !important;
  line-height:1.12 !important;
  max-width:900px !important;
  margin:0 auto 22px !important;
}

.service-hero p,
.page-hero p{
  font-size:17px !important;
  line-height:1.7 !important;
  max-width:850px !important;
  margin:0 auto !important;
}

.service-content h2,
.service-page h2{
    font-size:42px !important;
    line-height:1.15 !important;
}

.service-content h3,
.service-page h3{
    font-size:34px !important;
    line-height:1.2 !important;
}

.about-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:24px;
  align-items:stretch;
}

.about-card{
  background:linear-gradient(180deg,rgba(16,29,51,.92),rgba(11,22,40,.92));
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
}

.about-card h3{
  font-size:28px;
  margin-bottom:16px;
}

.about-card p{
  color:#cbd5e1;
  font-size:16px;
  line-height:1.75;
}

.about-card.highlight{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  border-color:rgba(34,211,197,.35);
}

.about-number{
  font-size:72px;
  font-weight:900;
  color:var(--cyan);
  font-family:"Space Grotesk",Inter,sans-serif;
  line-height:1;
  margin-bottom:18px;
}

.cert-section{
  max-width:1000px;
  margin:70px auto 0;
  text-align:center;
}

.cert-section h3{
  font-size:34px;
  margin:14px 0 28px;
}

.cert-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.cert-card{
  background:rgba(30,136,255,.08);
  border:1px solid rgba(30,136,255,.22);
  border-radius:18px;
  padding:26px;
  font-weight:900;
  color:#e0f2fe;
  backdrop-filter:blur(8px);
}

@media(max-width:900px){
  .about-grid,
  .cert-grid{
    grid-template-columns:1fr;
  }
}

.service-detail{
  padding-top:90px;
}

.service-grid{
  max-width:1200px;
  margin:0 auto 28px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.service-block,
.service-card,
.service-final{
  background:linear-gradient(180deg,rgba(16,29,51,.92),rgba(11,22,40,.92));
  border:1px solid rgba(34,211,197,.18);
  border-radius:24px;
  padding:34px;
  backdrop-filter:blur(12px);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.service-block h2,
.service-card h2,
.service-final h2{
  font-size:32px !important;
  line-height:1.15;
  margin:12px 0 16px;
}

.service-block p,
.service-card p,
.service-final p,
.service-card li{
  font-size:16px;
  line-height:1.7;
  color:#cbd5e1;
}

.service-card.wide{
  max-width:1200px;
  margin:0 auto 28px;
}

.feature-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:24px;
}

.feature-list div{
  background:rgba(30,136,255,.06);
  border:1px solid rgba(30,136,255,.18);
  border-radius:18px;
  padding:20px;
}

.feature-list strong{
  color:#f8fafc;
  display:block;
  margin-bottom:8px;
}

.service-final{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

.service-final p{
  max-width:850px;
  margin:0 auto 26px;
}

@media(max-width:900px){
  .service-grid,
  .feature-list{
    grid-template-columns:1fr;
  }
}