:root{
  /* Blue palette aligned to the video */
  --bg:#050811;
  --panel:#0A0F1A;
  --txt:#F2F7FF;
  --muted:#BED2EE;

  --p1:#0EA5FF;          /* electric blue */
  --p2:#2563EB;          /* deep royal blue */
  --pGlow:rgba(14,165,255,.22);

  --glass:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);              /* ← all sections after HERO use this */
  color:var(--txt);
}
a{color:inherit; text-decoration:none}

/* Remove purple accents from shared nav/footer on this page only */
header.navbar.scrolled{box-shadow:0 0 20px rgba(14,165,255,.25) !important}
header.navbar nav a::after{background:linear-gradient(90deg,var(--p1),var(--p2)) !important}
header.navbar .cta{background:linear-gradient(90deg,var(--p1),var(--p2)) !important}
footer h3{color:var(--p1) !important}

/* ------------------------ HERO (video only here) ------------------------ */
.hero{
  position:relative;
  min-height:100vh;                  /* full viewport */
  display:grid;
  place-items:center;
  text-align:center;
  padding:0;                         /* no extra spacing */
  overflow:hidden;                   /* contain the video */
  background:transparent;            /* let the video show */
}

/* The video lives ONLY inside .hero and cannot bleed outside */
.hero .bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;                        /* behind the text only in hero */
  filter:none;                       /* no dark filter */
}

.hero-center{position:relative; width:min(1200px,92%); margin:auto}
.superkicker{
  display:block;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  font-size:clamp(1.1rem, 2.6vw, 2rem);
  color:#E8F6FF;
  text-shadow:0 2px 18px rgba(5,15,28,.45), 0 0 18px rgba(14,165,255,.35);
  margin-bottom:10px;
}
.display{
  font-size:clamp(2.6rem, 6vw, 4.2rem);
  line-height:1.05;
  background:linear-gradient(90deg, var(--txt), #D9F1FF 60%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 2px 22px rgba(0,0,0,.45), 0 0 28px var(--pGlow);
  margin:0 0 .4rem 0;
}
.lede{
  max-width:68ch; margin:0 auto;
  color:#e7f4ff;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.cta-row{display:flex; gap:12px; margin:18px 0 8px; justify-content:center}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:600; padding:.85rem 1.25rem; transition:transform .2s, box-shadow .2s}
.btn-primary{background:linear-gradient(90deg,var(--p1),var(--p2)); color:white; box-shadow:0 12px 28px rgba(14,165,255,.25)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 18px 34px rgba(14,165,255,.35)}
.btn-ghost{border:1px solid var(--glass); background:rgba(8,14,22,.35); color:#E8F4FF}
.btn-ghost:hover{border-color:rgba(255,255,255,.18)}
.scroll-indicator{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:.8rem; letter-spacing:.15em; color:#d4ecff; text-shadow:0 0 10px rgba(14,165,255,.6)}

/* ------------------------ SECTIONS AFTER HERO ------------------------ */
.section{position:relative; padding:96px 0}     /* normal spacing again */
.container{width:min(1200px,92%); margin:auto}

/* CLIENTS (color) */
.clients{padding:40px 0 28px; background:var(--bg)}
.marquee{overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.track{display:flex; gap:44px; align-items:center; animation:slide 24s linear infinite}
.marquee img{height:40px; opacity:.95; filter:none}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (max-width: 768px){ .track{animation-duration:32s} }

/* Section headings */
.section-hd{margin-bottom:28px}
.section-hd h2{font-size:2rem; margin:0 0 .25rem}
.section-hd p{color:#cfe0ff; margin:0}

/* SOLUTION LIST (new design) */
.solution-list{display:grid; gap:16px}
.solution-row{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass); border-radius:16px; padding:18px 18px 14px;
  position:relative; transition:transform .25s, box-shadow .25s, border-color .25s;
}
.solution-row::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px;
  background:linear-gradient(180deg,var(--p1),var(--p2)); border-radius:16px 0 0 16px;
}
.solution-row:hover{transform:translateY(-4px); border-color:rgba(14,165,255,.35); box-shadow:0 20px 60px rgba(14,165,255,.16)}
.solution-row .ico{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(180deg, rgba(14,165,255,.15), rgba(255,255,255,.02));
  color:#cfeaff;
}
.solution-row h3{margin:.15rem 0 .35rem}
.solution-row p{margin:0 0 .35rem; color:#d7e7ff}
.solution-row ul{display:flex; flex-wrap:wrap; gap:10px 14px; margin:0; padding:0; list-style:none; color:#c8dcff}
.solution-row li::before{content:"• "; opacity:.6}

/* METRICS */
.metrics{padding:52px 0; background:var(--bg)}
.metrics-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.metric{background:#0B1020; border:1px solid var(--glass); border-radius:16px; padding:22px; text-align:center}
.metric .num{font-size:2.2rem; font-weight:700; background:linear-gradient(90deg,var(--p1),var(--p2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.metric .unit{margin-left:4px; color:#BFD8FF}

/* WHY US */
.why-us{background:var(--bg)}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.why-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--glass); border-radius:16px; padding:18px}
.why-card h4{margin:0 0 .35rem}
.why-card p{margin:0; color:#d7e7ff}

/* FAQ */
.faq{background:var(--bg)}
.faq-list{display:grid; gap:10px}
.faq-list details{background:#0B1020; border:1px solid var(--glass); border-radius:12px; padding:12px 14px}
.faq-list summary{cursor:pointer; font-weight:600}
.faq-list p{margin:.4rem 0 0; color:#d7e7ff}

/* CTA */
.cta-big{padding:80px 0; background:var(--bg)}
.cta-panel{
  border:1px solid var(--glass); border-radius:18px; padding:32px;
  background:linear-gradient(180deg, rgba(14,165,255,.10), rgba(255,255,255,.02));
  text-align:center; box-shadow:0 30px 90px rgba(14,165,255,.16);
}

/* Reveal + micro animations (lag-free) */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease}
.reveal{opacity:1; transform:none}
[data-anim]{opacity:0; transform:translateY(10px)}
.anim-fade-up{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}
.anim-rise{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

/* Responsive */
@media (max-width:1100px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .cta-row{justify-content:center; flex-wrap:wrap}
  .metrics-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
}