:root{
  --black:#071426;
  --deep:#050b16;
  --blue:#0b8dff;
  --sky:#62c4ff;
  --violet:#7b61ff;
  --text:#071426;
  --muted:#607086;
  --line:#dce8f5;
  --soft:#f7fbff;
  --white:#ffffff;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--soft);
  color:var(--text);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.cursor-glow{
  position:fixed;
  width:420px;height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(98,196,255,.18),transparent 68%);
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  opacity:.85;
}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:20;
  height:86px;
  padding:0 7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(5,11,22,.38);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:white;
  letter-spacing:7px;
  font-weight:900;
  font-family:"Space Grotesk",Inter,sans-serif;
}
.brand img{width:34px;height:34px}
.nav{
  display:flex;
  align-items:center;
  gap:32px;
}
.nav a{
  color:#dcecff;
  font-size:14px;
  font-weight:600;
  position:relative;
}
.nav a:after{
  content:"";
  position:absolute;
  left:0;bottom:-9px;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  transition:.25s ease;
}
.nav a:hover:after{width:100%}

.menu-button{
  display:none;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.06);
}
.menu-button span{
  display:block;
  width:18px;height:2px;
  background:white;
  margin:6px auto;
}

.hero{
  min-height:100vh;
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:40px;
  padding:130px 7% 80px;
  color:white;
  background:
    radial-gradient(circle at 78% 20%,rgba(98,196,255,.22),transparent 28%),
    radial-gradient(circle at 40% 90%,rgba(123,97,255,.14),transparent 35%),
    linear-gradient(180deg,#061225 0%,#08172d 62%,#f7fbff 100%);
  overflow:hidden;
}
.grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.036) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.036) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:linear-gradient(180deg,black,rgba(0,0,0,.6),transparent 92%);
}
.orb{
  position:absolute;
  border-radius:999px;
  filter:blur(4px);
}
.orb-one{
  width:440px;height:440px;
  right:12%;top:16%;
  background:radial-gradient(circle,rgba(98,196,255,.12),transparent 68%);
  animation:float 7s ease-in-out infinite;
}
.orb-two{
  width:380px;height:380px;
  left:10%;bottom:10%;
  background:radial-gradient(circle,rgba(123,97,255,.12),transparent 68%);
  animation:float 9s ease-in-out infinite reverse;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-22px)}
}
.hero-content,.hero-mark{position:relative;z-index:3}
.eyebrow{
  letter-spacing:5px;
  color:var(--sky);
  font-size:13px;
  font-weight:800;
  margin-bottom:22px;
}
.eyebrow.blue{color:var(--blue)}
h1{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(56px,9vw,130px);
  line-height:.92;
  letter-spacing:10px;
  background:linear-gradient(90deg,#fff,#9edcff,#8b78ff);
  -webkit-background-clip:text;
  color:transparent;
  margin-bottom:26px;
}
.tagline{
  font-size:clamp(30px,4vw,54px);
  font-weight:500;
  margin-bottom:24px;
}
.tagline span{color:var(--sky)}
.hero-text{
  max-width:650px;
  color:#d8e8fa;
  font-size:20px;
  line-height:1.85;
  margin-bottom:38px;
}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 30px;
  border-radius:999px;
  font-weight:800;
  transition:.25s ease;
}
.btn-primary{
  color:white;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  box-shadow:0 22px 60px rgba(11,141,255,.28);
}
.btn-secondary{
  color:white;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px);
}
.btn:hover{transform:translateY(-4px)}
.hero-mark{
  justify-self:center;
  width:min(420px,80vw);
  opacity:.98;
  filter:drop-shadow(0 0 45px rgba(98,196,255,.42));
}
.scroll-hint{
  position:absolute;
  bottom:36px;left:50%;
  transform:translateX(-50%);
  width:30px;height:54px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;
  z-index:3;
}
.scroll-hint span{
  position:absolute;
  left:50%;top:12px;
  width:5px;height:10px;
  background:var(--sky);
  border-radius:99px;
  transform:translateX(-50%);
  animation:scroll 1.7s infinite;
}
@keyframes scroll{
  0%{opacity:0;transform:translate(-50%,0)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(-50%,20px)}
}

.section{padding:100px 7%}
.light-section{
  background:linear-gradient(180deg,#f7fbff,#ffffff);
}
.section-head{
  text-align:center;
  max-width:850px;
  margin:0 auto 52px;
}
.section-head h2,.split-content h2{
  font-size:clamp(34px,5vw,64px);
  line-height:1.08;
  margin-bottom:18px;
  font-family:"Space Grotesk",Inter,sans-serif;
}
.section-head p,.split-content p{
  color:var(--muted);
  font-size:18px;
  line-height:1.85;
}
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.card{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:30px;
  padding:32px;
  box-shadow:0 24px 75px rgba(17,70,120,.08);
  transition:.25s ease;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 90px rgba(17,110,190,.14);
  border-color:#bcdcff;
}
.icon{
  width:62px;height:62px;
  display:flex;align-items:center;justify-content:center;
  border-radius:20px;
  color:var(--blue);
  font-size:14px;
  font-weight:900;
  background:linear-gradient(135deg,#e9f6ff,#f2f0ff);
  margin-bottom:24px;
}
.card h3{
  font-size:21px;
  margin-bottom:14px;
}
.card p{
  color:#5d6d7e;
  line-height:1.75;
}

.split-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  background:#fff;
}
.metrics{
  display:grid;
  gap:18px;
}
.metrics div{
  border:1px solid var(--line);
  border-radius:26px;
  padding:28px;
  background:linear-gradient(135deg,#fff,#f4f9ff);
}
.metrics strong{
  display:block;
  font-size:34px;
  color:var(--blue);
  margin-bottom:8px;
}
.metrics span{color:#5d6d7e}

.vision{
  padding:130px 7%;
  background:
    radial-gradient(circle at 50% 0%,rgba(98,196,255,.18),transparent 40%),
    linear-gradient(180deg,#08172d,#050b16);
  color:white;
  text-align:center;
}
.quote{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(36px,7vw,90px);
  line-height:1.08;
  margin-bottom:24px;
}
.quote span{color:var(--sky)}
.vision-text{
  color:#c8d8ea;
  font-size:20px;
}

.footer{
  background:#050b16;
  color:#9fb2c8;
  border-top:1px solid rgba(255,255,255,.08);
  padding:40px 7%;
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
}
.footer div{
  display:flex;
  align-items:center;
  gap:12px;
  color:white;
  letter-spacing:3px;
}
.footer img{width:30px}
.footer a{color:#9edcff}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:.75s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr;text-align:left}
  .hero-mark{opacity:.24;position:absolute;right:-10%;bottom:12%;width:360px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .split-section{grid-template-columns:1fr}
}
@media(max-width:720px){
  .site-header{height:74px}
  .brand span{font-size:14px;letter-spacing:4px}
  .nav{
    position:absolute;
    top:74px;left:7%;right:7%;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    padding:20px;
    border-radius:22px;
    background:rgba(5,11,22,.92);
    border:1px solid rgba(255,255,255,.12);
  }
  .nav.open{display:flex}
  .menu-button{display:block}
  .hero{padding-top:110px}
  h1{letter-spacing:5px}
  .cards{grid-template-columns:1fr}
  .cursor-glow{display:none}
  .footer{align-items:flex-start;flex-direction:column}
}