:root{
    --space-black:#050609;
    --deep-navy:#0a1330;
    --navy-soft:#0d1838;
    --electric-blue:#3d7cff;
    --electric-blue-soft:rgba(61,124,255,0.35);
    --soft-purple:#8b7fff;
    --cyan:#4fe8d3;
    --white:#f4f7fc;
    --muted:#8b93a8;
    --muted-dim:#5b6378;
    --line:rgba(244,247,252,0.08);
    --line-strong:rgba(244,247,252,0.14);
    --glass-bg:rgba(13,24,56,0.35);
    --glass-border:rgba(244,247,252,0.09);
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --ease:cubic-bezier(0.16,1,0.3,1);
    --ease-soft:cubic-bezier(0.22,0.61,0.36,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:auto;background:var(--space-black);}
  html,body{overflow-x:hidden;}
  body{
    background:var(--space-black);
    color:var(--white);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    cursor:default;
  }
  ::selection{background:var(--electric-blue); color:#fff;}

  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  img,canvas{display:block; max-width:100%;}

  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-track{background:var(--space-black);}
  ::-webkit-scrollbar-thumb{background:var(--navy-soft); border-radius:4px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--electric-blue);}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  :focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}

  .section-label{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .section-label::before{
    content:'';
    width:22px; height:1px;
    background:var(--cyan);
    display:inline-block;
  }
  .eyebrow-coord{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:0.08em;}

  .wrap{max-width:1280px; margin:0 auto; padding:0 6vw;}
  @media (max-width:768px){ .wrap{padding:0 24px;} }

  h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em;}

  .h-display{font-size:clamp(42px,7vw,96px); line-height:1.02; font-weight:600; letter-spacing:-0.02em;}
  .h-section{font-size:clamp(30px,4.2vw,54px); font-weight:600; line-height:1.08; letter-spacing:-0.015em;}
  .h-sub{font-size:clamp(15px,1.6vw,19px); color:var(--muted); font-weight:400; line-height:1.6; max-width:560px;}

  .btn{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono);
    font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    padding:15px 28px;
    border-radius:100px;
    border:1px solid var(--line-strong);
    background:transparent;
    color:var(--white);
    overflow:hidden;
    transition:border-color .4s var(--ease-soft), color .4s var(--ease-soft);
  }
  .btn span{position:relative; z-index:2;}
  .btn::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(120deg, var(--electric-blue), var(--soft-purple));
    transform:translateY(102%);
    transition:transform .45s var(--ease-soft);
    z-index:1;
  }
  .btn:hover::before{transform:translateY(0);}
  .btn:hover{border-color:transparent;}
  .btn.primary{
    background:linear-gradient(120deg, var(--electric-blue), var(--soft-purple));
    border-color:transparent;
  }
  .btn.primary::before{display:none;}
  .btn.primary:hover{box-shadow:0 0 40px var(--electric-blue-soft); transform:translateY(-1px);}
  .btn.ghost:hover{color:var(--white);}
  .btn-arrow{transition:transform .4s var(--ease-soft);}
  .btn:hover .btn-arrow{transform:translateX(4px);}

  /* ===== reveal utility ===== */
  .reveal{opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-delay-1{transition-delay:.08s;}
  .reveal-delay-2{transition-delay:.16s;}
  .reveal-delay-3{transition-delay:.24s;}
  .reveal-delay-4{transition-delay:.32s;}

  /* ===== background field (stars + grid) shared across sections ===== */
  .bg-field{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
  .bg-grid{
    position:absolute; inset:-2px;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 75%);
    opacity:.5;
  }
  .bg-glow{
    position:absolute; border-radius:50%; filter:blur(120px); opacity:.28; pointer-events:none;
  }

  /* ===== NAV ===== */
  #nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 6vw;
    transition:background .5s var(--ease-soft), border-color .5s var(--ease-soft), padding .4s var(--ease-soft);
    border-bottom:1px solid transparent;
  }
  #nav.scrolled{
    background:rgba(5,6,9,0.72);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid var(--line);
    padding:14px 6vw;
  }
  .logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:0.01em;}
  .logo-mark{width:34px; height:34px; position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .logo-mark svg{width:100%; height:100%;}
  .logo-mark img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 6px rgba(61,124,255,0.35));}
  .logo small{display:block; font-family:var(--font-mono); font-size:9px; color:var(--muted-dim); letter-spacing:0.18em; font-weight:400; margin-top:1px;}

  .nav-links{display:flex; gap:38px; align-items:center;}
  .nav-links a{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--muted); position:relative; padding:4px 0;
    transition:color .3s;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--cyan);
    transition:width .35s var(--ease-soft);
  }
  .nav-links a:hover{color:var(--white);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{display:flex; align-items:center; gap:22px;}
  .nav-cta .btn{padding:11px 22px; font-size:11.5px;}
  .nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index:200;}
  .nav-toggle span{width:22px; height:1.5px; background:var(--white); transition:transform .3s, opacity .3s;}
  @media (max-width:900px){
    .nav-links{display:none;}
    .nav-cta .btn.ghost{display:none;}
    .nav-toggle{display:flex;}
  }

  .scroll-progress{position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg, var(--cyan), var(--electric-blue), var(--soft-purple)); z-index:101; width:0%;}

  /* ===== HERO ===== */
  #hero{
    position:relative; height:100svh; min-height:640px; width:100%;
    display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden;
    background:radial-gradient(ellipse 120% 80% at 50% 20%, #0a1330 0%, #050609 60%);
  }
  #hero-canvas{position:absolute; inset:0; z-index:1; opacity:0;}
  .hero-content{
    position:relative; z-index:3;
    padding:0 6vw 96px;
    display:flex; flex-direction:column; gap:26px;
  }
  .hero-eyebrow{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cyan);
    opacity:0; transform:translateY(14px);
  }
  .hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulseDot 2.4s ease-in-out infinite;}
  @keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.35;}}

  .hero-title{max-width:940px; overflow:hidden;}
  .hero-title-line{overflow:hidden;}
  .hero-title-line span{
    display:block; font-size:clamp(38px,6.4vw,88px); line-height:1.04; font-weight:600; font-family:var(--font-display);
    letter-spacing:-0.02em;
    transform:translateY(110%);
    background:linear-gradient(180deg, #ffffff 0%, #c9d4ee 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--white);
  }
  .hero-sub{max-width:560px; font-size:clamp(15px,1.6vw,18px); color:var(--muted); opacity:0; transform:translateY(16px);}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(16px);}

  .hero-meta{
    position:absolute; top:120px; right:6vw; z-index:3;
    text-align:right; font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:0.05em;
    opacity:0; display:flex; flex-direction:column; gap:6px;
  }
  .hero-meta .val{color:var(--cyan);}
  @media (max-width:768px){ .hero-meta{display:none;} }

  .scroll-cue{
    position:absolute; left:6vw; bottom:36px; z-index:3;
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
    opacity:0;
  }
  .scroll-cue .line{width:1px; height:36px; background:linear-gradient(var(--muted), transparent); position:relative; overflow:hidden;}
  .scroll-cue .line::after{
    content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--cyan);
    animation:scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine{0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}}

  @media (max-width:768px){
    #hero{min-height:560px;}
    .hero-content{padding:0 24px 64px; gap:20px;}
  }

  /* ===== generic section spacing ===== */
  section{position:relative; z-index:1;}
  section[id]{scroll-margin-top:100px;}
  .pad{padding:min(14vw,160px) 0;}
  .pad-sm{padding:min(9vw,100px) 0;}

  /* ===== divider beam motif ===== */
  .beam-divider{
    position:relative; height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .beam-divider .track{position:relative; width:min(70%,720px); height:1px; background:var(--line-strong);}
  .beam-divider .node{position:absolute; top:50%; width:9px; height:9px; border-radius:50%; background:var(--cyan); transform:translate(-50%,-50%); box-shadow:0 0 14px var(--cyan);}
  .beam-divider .node.left{left:0;}
  .beam-divider .node.right{left:100%;}
  .beam-divider .pulse{
    position:absolute; top:50%; left:0; width:26px; height:2px; transform:translateY(-50%);
    background:linear-gradient(90deg, transparent, var(--cyan), transparent);
    filter:blur(0.3px);
    animation:travel 3.2s linear infinite;
  }
  @keyframes travel{0%{left:0%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:calc(100% - 26px); opacity:0;}}

  /* ===== ABOUT ===== */
  #about .about-grid{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start;
  }
  @media (max-width:900px){ #about .about-grid{grid-template-columns:1fr; gap:44px;} }
  .about-figure{
    position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden;
    border:1px solid var(--glass-border);
    background:
      radial-gradient(circle at 30% 20%, rgba(139,127,255,0.25), transparent 55%),
      radial-gradient(circle at 70% 80%, rgba(79,232,211,0.18), transparent 55%),
      linear-gradient(160deg, #0a1330, #050609 80%);
  }
  .about-figure .ring{
    position:absolute; border-radius:50%; border:1px solid rgba(79,232,211,0.35);
    top:50%; left:50%; transform:translate(-50%,-50%);
  }
  .about-figure .ring.r1{width:56%; aspect-ratio:1;}
  .about-figure .ring.r2{width:80%; aspect-ratio:1; border-color:rgba(61,124,255,0.22);}
  .about-figure .core{
    position:absolute; top:50%; left:50%; width:14px; height:14px; border-radius:50%;
    transform:translate(-50%,-50%); background:var(--white); box-shadow:0 0 30px 8px var(--electric-blue-soft);
  }
  .about-figure .orbit-dot{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan);}
  .about-stats{position:absolute; bottom:24px; left:24px; right:24px; display:flex; gap:24px; font-family:var(--font-mono);}
  .about-stats div{font-size:11px; color:var(--muted-dim);}
  .about-stats strong{display:block; font-size:22px; color:var(--white); font-family:var(--font-display); font-weight:600;}

  .about-copy p{color:var(--muted); font-size:16px; line-height:1.75; margin-top:22px; max-width:560px;}
  .about-copy p strong{color:var(--white); font-weight:500;}
  .mission-line{
    margin-top:36px; padding-top:28px; border-top:1px solid var(--line);
    display:flex; gap:16px; align-items:flex-start;
  }
  .mission-line .tag{font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:0.1em; white-space:nowrap; padding-top:3px;}
  .mission-line p{margin:0; font-size:20px; font-family:var(--font-display); font-weight:500; color:var(--white); line-height:1.4; max-width:520px;}

  /* ===== WHAT WE BUILD — cards ===== */
  .build-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:56px;}
  @media (max-width:900px){ .build-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .build-grid{grid-template-columns:1fr;} }
  .build-card{
    background:#070a12; padding:36px 30px 32px; min-height:250px;
    display:flex; flex-direction:column; justify-content:space-between; gap:28px;
    position:relative; overflow:hidden;
    transition:background .5s var(--ease-soft);
  }
  .build-card::before{
    content:''; position:absolute; inset:0; opacity:0;
    background:radial-gradient(circle at 30% 0%, rgba(61,124,255,0.16), transparent 60%);
    transition:opacity .5s var(--ease-soft);
  }
  .build-card:hover::before{opacity:1;}
  .build-card:hover{background:#0a0f1c;}
  .build-card .idx{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:0.1em;}
  .build-card .icon{width:40px; height:40px; color:var(--cyan); position:relative; z-index:1; transition:transform .5s var(--ease-soft);}
  .build-card:hover .icon{transform:translateY(-4px);}
  .build-card .icon svg{width:100%; height:100%;}
  .build-card h3{font-size:19px; font-weight:500; margin-bottom:10px; position:relative; z-index:1;}
  .build-card p{font-size:14px; color:var(--muted); line-height:1.65; position:relative; z-index:1;}
  .build-card .top{display:flex; justify-content:space-between; align-items:flex-start;}

  /* ===== HOW OISL WORKS ===== */
  .oisl-stage{
    margin-top:56px; border:1px solid var(--glass-border); border-radius:22px; padding:clamp(28px,5vw,64px);
    background:linear-gradient(180deg, rgba(13,24,56,0.5), rgba(5,6,9,0.2));
    position:relative; overflow:hidden;
  }
  .oisl-visual{position:relative; height:220px; display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .sat-node{
    position:relative; width:74px; height:74px; border-radius:16px;
    border:1px solid var(--line-strong);
    background:linear-gradient(160deg, #101b3d, #070a12);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 20px 40px -20px rgba(0,0,0,0.6);
  }
  .sat-node svg{width:34px; height:34px; color:var(--cyan);}
  .sat-node .label{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px; color:var(--muted); white-space:nowrap; letter-spacing:0.06em;}
  .link-line{position:relative; flex:1; height:2px; margin:0 20px; background:linear-gradient(90deg, rgba(79,232,211,0.15), rgba(79,232,211,0.55), rgba(79,232,211,0.15));}
  .link-line .packet{
    position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
    background:radial-gradient(circle, #fff, var(--cyan) 60%, transparent 75%);
    box-shadow:0 0 18px 4px var(--cyan);
    animation:packetTravel 2.6s ease-in-out infinite;
  }
  @keyframes packetTravel{0%{left:0%; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{left:100%; opacity:0;}}
  @media (max-width:640px){
    .oisl-visual{flex-direction:column; height:auto; gap:44px;}
    .link-line{flex:none; width:2px; height:70px; margin:0; background:linear-gradient(180deg, rgba(79,232,211,0.15), rgba(79,232,211,0.55), rgba(79,232,211,0.15));}
    .link-line .packet{animation:packetTravelV 2.6s ease-in-out infinite; left:50%;}
    @keyframes packetTravelV{0%{top:0%; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:100%; opacity:0;}}
  }

  .oisl-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:60px;}
  @media (max-width:900px){ .oisl-steps{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .oisl-steps{grid-template-columns:1fr;} }
  .oisl-step{
    padding:20px 0 0; border-top:1px solid var(--line); cursor:default;
    transition:border-color .4s;
  }
  .oisl-step:hover{border-color:var(--cyan);}
  .oisl-step .n{font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:0.1em;}
  .oisl-step h4{font-size:15.5px; font-weight:500; margin:10px 0 8px;}
  .oisl-step p{font-size:13.5px; color:var(--muted); line-height:1.6;}

  /* ===== HYPERSONIC TRACKING VISUAL ===== */
  .tracking-visual{position:relative; height:260px; margin-bottom:8px;}
  .sensor-node{
    position:absolute; transform:translate(-50%,-50%);
    width:60px; height:60px; border-radius:14px;
    border:1px solid var(--line-strong);
    background:linear-gradient(160deg, #101b3d, #070a12);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .4s, box-shadow .4s;
    z-index:2;
  }
  .sensor-node svg{width:26px; height:26px; color:var(--cyan); transition:color .4s;}
  .sensor-node.locked{border-color:var(--cyan); box-shadow:0 0 22px rgba(79,232,211,0.35);}
  .sensor-node .label{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10.5px; color:var(--muted); white-space:nowrap; letter-spacing:0.06em;}

  .tracking-svg{position:absolute; inset:0; width:100%; height:100%; z-index:1;}
  .tline{stroke:var(--cyan); stroke-width:0.35; stroke-dasharray:1.6 1.4; opacity:.35; transition:opacity .3s, stroke-width .3s;}
  .tline.locked{opacity:.85; stroke-width:0.5;}

  .threat-marker{position:absolute; width:22px; height:22px; transform:translate(-50%,-50%); z-index:3; will-change:left, top;}
  .threat-marker svg{width:100%; height:100%; color:#ff6a52; filter:drop-shadow(0 0 6px rgba(255,106,82,0.7));}
  .threat-marker .ring{position:absolute; inset:-10px; border-radius:50%; border:1px solid #ff6a52; opacity:0; animation:threatPulse 1.7s ease-out infinite;}
  @keyframes threatPulse{0%{opacity:.7; transform:scale(0.55);} 100%{opacity:0; transform:scale(1.9);}}

  .tracking-legend{display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:0.04em;}
  .tracking-legend span{display:inline-flex; align-items:center; gap:8px;}
  .tracking-legend .sw{width:9px; height:9px; border-radius:50%; display:inline-block;}
  .tracking-legend .sw.threat{background:#ff6a52; box-shadow:0 0 8px #ff6a52;}
  .tracking-legend .sw.sensor{background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
  @media (max-width:640px){ .tracking-visual{height:300px;} }

  /* ===== TECH STACK timeline ===== */
  .stack-rail{margin-top:64px; position:relative;}
  .stack-track{position:relative; padding-left:6px;}
  .stack-track::before{content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line-strong);}
  .stack-item{
    position:relative; padding:26px 0 26px 40px; border-bottom:1px solid var(--line);
    display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
  }
  .stack-item:last-child{border-bottom:none;}
  .stack-item::before{
    content:''; position:absolute; left:-4px; top:50%; transform:translateY(-50%);
    width:9px; height:9px; border-radius:50%; background:var(--space-black); border:2px solid var(--muted-dim);
    transition:border-color .4s, background .4s, box-shadow .4s;
  }
  .stack-item:hover::before{border-color:var(--cyan); background:var(--cyan); box-shadow:0 0 12px var(--cyan);}
  .stack-item .stk-name{font-family:var(--font-display); font-size:19px; font-weight:500;}
  .stack-item .stk-desc{color:var(--muted); font-size:13.5px; max-width:440px;}
  .stack-item .stk-tag{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); letter-spacing:0.08em; text-align:right; white-space:nowrap;}
  @media (max-width:720px){
    .stack-item{grid-template-columns:1fr; gap:6px;}
    .stack-item .stk-tag{text-align:left;}
  }

  /* ===== WHY OPTICAL comparison ===== */
  .compare-wrap{margin-top:60px; display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  @media (max-width:840px){ .compare-wrap{grid-template-columns:1fr; gap:40px;} }
  .compare-col{}
  .compare-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
  .compare-head h4{font-size:16px; font-weight:500; font-family:var(--font-display);}
  .compare-head .chip{font-family:var(--font-mono); font-size:10.5px; padding:4px 10px; border-radius:100px; border:1px solid var(--line-strong); color:var(--muted-dim);}
  .compare-col.optical .compare-head .chip{color:var(--cyan); border-color:rgba(79,232,211,0.35);}
  .bar-row{margin-bottom:20px;}
  .bar-row .bar-meta{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-bottom:8px;}
  .bar-track{height:8px; border-radius:6px; background:rgba(244,247,252,0.06); overflow:hidden;}
  .bar-fill{height:100%; width:0%; border-radius:6px; transition:width 1.4s var(--ease);}
  .compare-col.rf .bar-fill{background:linear-gradient(90deg, #4a5578, #6b7699);}
  .compare-col.optical .bar-fill{background:linear-gradient(90deg, var(--electric-blue), var(--cyan));}

  /* ===== ROADMAP ===== */
  .roadmap{margin-top:70px; position:relative; padding-left:2px;}
  .roadmap-line{position:absolute; left:19px; top:6px; bottom:6px; width:2px; background:var(--line-strong); overflow:hidden;}
  .roadmap-line-fill{position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(180deg, var(--cyan), var(--electric-blue)); transition:height 0.1s linear;}
  .road-item{position:relative; padding:0 0 56px 60px;}
  .road-item:last-child{padding-bottom:0;}
  .road-dot{position:absolute; left:11px; top:2px; width:18px; height:18px; border-radius:50%; background:var(--space-black); border:2px solid var(--muted-dim); z-index:2; transition:border-color .5s, box-shadow .5s;}
  .road-item.active .road-dot{border-color:var(--cyan); box-shadow:0 0 16px var(--cyan);}
  .road-year{font-family:var(--font-mono); font-size:11px; color:var(--cyan); letter-spacing:0.1em; margin-bottom:6px; display:block;}
  .road-item h4{font-size:21px; font-weight:500; margin-bottom:8px;}
  .road-item p{color:var(--muted); font-size:14px; max-width:480px; line-height:1.6;}

  /* ===== VISION cinematic ===== */
  #vision{
    position:relative; min-height:88vh; display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:
      radial-gradient(ellipse 60% 70% at 50% 100%, rgba(61,124,255,0.22), transparent 65%),
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(139,127,255,0.14), transparent 60%),
      #050609;
  }
  .vision-earth{
    position:absolute; bottom:-45%; left:50%; transform:translateX(-50%);
    width:min(1100px,150vw); aspect-ratio:1;
    border-radius:50%;
    background:
      radial-gradient(circle at 38% 32%, rgba(140,180,255,0.55), transparent 45%),
      conic-gradient(from 180deg at 50% 50%, #0a1330, #142556, #0a1330, #0d1838, #0a1330);
    box-shadow:0 0 160px 40px rgba(61,124,255,0.25), inset -40px -30px 90px rgba(0,0,0,0.6);
    opacity:.9;
  }
  .vision-earth::after{
    content:''; position:absolute; inset:-2%; border-radius:50%;
    background:radial-gradient(circle at 40% 30%, transparent 55%, rgba(79,232,211,0.18) 70%, transparent 78%);
  }
  .vision-content{position:relative; z-index:2; text-align:center; padding:0 24px;}
  .vision-content .section-label{justify-content:center; margin-bottom:26px;}
  .vision-content .section-label::before{display:none;}
  .vision-content h2{font-size:clamp(34px,6.4vw,84px); font-weight:600; line-height:1.06; letter-spacing:-0.02em;}
  .vision-content p{margin:26px auto 0; max-width:520px; color:var(--muted); font-size:16px;}

  /* ===== PEOPLE CARDS (Team + Expert Guidance) =====
     Circular photo up top; on hover, a bio reveals BELOW the name/role
     (space is reserved so nothing jumps or overlaps the photo), with a
     single LinkedIn icon beneath the bio. Desktop: static centered row,
     no scrolling. Mobile: gentle auto-scroll that pauses on touch/hover. */
  .people-marquee-wrap{ margin-top:50px; overflow:hidden; }
  .people-marquee-track{
    display:flex; gap:24px; width:max-content;
    transform:translateX(0);
  }
  .people-marquee-track.auto-scroll-active{
    animation-name:peoplePingPong; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate;
  }
  @keyframes peoplePingPong{ from{transform:translateX(0);} to{transform:translateX(var(--scroll-dist, -120px));} }

  @media (min-width:901px){
    .people-marquee-wrap{ overflow:visible; }
    .people-marquee-track{ width:100%; justify-content:center; flex-wrap:wrap; gap:34px; transform:none !important; animation:none !important; }
  }

  .people-card{
    position:relative; flex:0 0 auto; width:250px; text-align:center;
    padding:30px 22px 26px; border-radius:18px;
    border:1px solid var(--glass-border);
    background:linear-gradient(180deg, rgba(13,24,56,0.4), rgba(5,6,9,0.32));
    overflow:hidden;
    transition:transform .5s var(--ease-soft), border-color .5s, box-shadow .5s;
  }
  .people-card:hover{transform:translateY(-6px); border-color:rgba(79,232,211,0.4); box-shadow:0 18px 44px -20px rgba(0,0,0,0.6);}

  .people-index{position:absolute; right:16px; bottom:10px; font-family:var(--font-display); font-size:52px; font-weight:600; color:rgba(244,247,252,0.045); line-height:1; pointer-events:none; z-index:0;}

  .people-photo-wrap{position:relative; width:120px; height:120px; margin:0 auto 20px; z-index:1;}
  .people-photo{
    width:100%; height:100%; border-radius:50%; overflow:hidden;
    background:radial-gradient(circle at 50% 30%, #1a2856, #070a12 75%);
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--glass-border);
    transition:border-color .4s, box-shadow .4s;
  }
  .people-card:hover .people-photo{border-color:var(--cyan); box-shadow:0 0 22px rgba(79,232,211,0.25);}
  .people-photo img{width:100%; height:100%; object-fit:cover;}
  .people-photo svg{width:42%; height:42%; color:rgba(244,247,252,0.14);}

  .people-status-dot{
    position:absolute; top:6px; right:-2px; width:11px; height:11px; border-radius:50%;
    background:var(--cyan); box-shadow:0 0 0 4px rgba(79,232,211,0.16), 0 0 10px var(--cyan);
    opacity:0; transform:scale(0.4); transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
  }
  .people-card:hover .people-status-dot{opacity:1; transform:scale(1); animation:pulseDot 2.2s ease-in-out infinite;}

  .people-info{position:relative; z-index:1;}
  .people-info h4{font-size:15.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; font-family:var(--font-display);}
  .people-info span{display:block; margin-top:5px; font-family:var(--font-mono); font-size:10.5px; color:var(--cyan); letter-spacing:0.05em; line-height:1.4; text-transform:uppercase;}

  .people-bio-wrap{
    position:relative; z-index:1; max-height:0; opacity:0;
    transition:max-height .5s var(--ease-soft), opacity .4s var(--ease-soft), margin-top .5s var(--ease-soft);
    overflow:hidden;
  }
  .people-card:hover .people-bio-wrap{ max-height:260px; opacity:1; margin-top:16px; }
  .people-bio-wrap p{font-size:12px; line-height:1.65; color:var(--muted); margin:0; text-align:left;}

  .people-li-row{ display:flex; justify-content:center; gap:10px; margin-top:14px; }
  .people-li{
    width:30px; height:30px; border-radius:8px;
    background:rgba(244,247,252,0.06); border:1px solid var(--glass-border);
    display:flex; align-items:center; justify-content:center;
    transition:background .3s, border-color .3s;
  }
  .people-li:hover{background:rgba(79,232,211,0.14); border-color:rgba(79,232,211,0.4);}
  .people-li svg{width:14px; height:14px; color:var(--white); transition:color .3s;}
  .people-li:hover svg{color:var(--cyan);}

  @media (max-width:600px){
    .people-card{width:220px; padding:26px 18px 22px;}
    .people-photo-wrap{width:100px; height:100px;}
  }

  /* Bigger cards on desktop only — matches the reference site's proportions.
     Placed after the base rules above so it correctly wins the cascade. */
  @media (min-width:901px){
    .people-card{ width:340px; padding:42px 34px 36px; }
    .people-photo-wrap{ width:158px; height:158px; margin-bottom:26px; }
    .people-status-dot{ width:13px; height:13px; top:8px; right:0; }
    .people-info h4{ font-size:21px; }
    .people-info span{ font-size:12px; margin-top:7px; }
    .people-card:hover .people-bio-wrap{ max-height:340px; margin-top:18px; }
    .people-bio-wrap p{ font-size:13.5px; line-height:1.75; }
    .people-li-row{ margin-top:18px; }
    .people-li{ width:34px; height:34px; border-radius:9px; }
    .people-li svg{ width:16px; height:16px; }
    .people-index{ font-size:76px; right:20px; bottom:14px; }
  }

  /* ===== PARTNERS marquee ===== */
  .marquee-wrap{margin-top:50px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:36px 0;
    mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .marquee-track{display:flex; gap:80px; width:max-content; animation:marquee 32s linear infinite;}
  .marquee-track:hover{animation-play-state:paused;}
  @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .marquee-item{font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--muted-dim); white-space:nowrap; letter-spacing:0.02em; opacity:.55; transition:opacity .4s, color .4s;}
  .marquee-item:hover{opacity:1; color:var(--white);}
  a.marquee-item{cursor:pointer;}

  /* ===== CONTACT ===== */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-top:56px;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:44px;} }
  .field{margin-bottom:22px;}
  .field label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:9px;}
  .field input, .field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
    color:var(--white); font-family:var(--font-body); font-size:15px; padding:10px 2px;
    transition:border-color .35s;
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--cyan);}
  .field textarea{resize:vertical; min-height:90px;}
  .field input::placeholder, .field textarea::placeholder{color:var(--muted-dim);}

  /* ===== CONTACT SHOWCASE (replaces the old static contact-info panel) =====
     An animated, on-brand "why reach out" panel that sits beside the form —
     built to make the form itself feel like the interesting next step. */
  .contact-showcase{
    position:relative; overflow:hidden; border-radius:18px;
    border:1px solid var(--glass-border);
    background:
      radial-gradient(ellipse 120% 90% at 78% 15%, rgba(61,124,255,0.18), transparent 60%),
      radial-gradient(ellipse 80% 60% at 90% 85%, rgba(139,127,255,0.12), transparent 60%),
      linear-gradient(180deg, rgba(13,24,56,0.5), rgba(5,6,9,0.35));
    padding:44px 38px; min-height:440px; display:flex; align-items:center;
  }
  .showcase-orbits{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .showcase-ring{position:absolute; top:52%; right:-8%; border-radius:50%; border:1px solid rgba(79,232,211,0.16); transform:translateY(-50%);}
  .showcase-ring.r1{width:230px; height:230px; animation:showcaseSpin 34s linear infinite;}
  .showcase-ring.r2{width:330px; height:330px; border-color:rgba(61,124,255,0.14); animation:showcaseSpin 52s linear infinite reverse;}
  .showcase-ring.r3{width:150px; height:150px; border-color:rgba(139,127,255,0.2); animation:showcaseSpin 22s linear infinite;}
  @keyframes showcaseSpin{ from{transform:translateY(-50%) rotate(0deg);} to{transform:translateY(-50%) rotate(360deg);} }
  .showcase-dot{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); opacity:.85; animation:showcaseFloat 5s ease-in-out infinite;}
  @keyframes showcaseFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

  .showcase-content{position:relative; z-index:1; max-width:420px;}
  .showcase-title{font-size:clamp(26px,3vw,32px); font-weight:600; line-height:1.16; letter-spacing:-0.01em; margin-bottom:18px;}
  .showcase-copy{color:var(--muted); font-size:14.5px; line-height:1.7; margin-bottom:26px; max-width:380px;}
  .showcase-tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;}
  .showcase-tags span{font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; padding:8px 14px; border-radius:100px; border:1px solid var(--line-strong); color:var(--muted); text-transform:uppercase;}

  @media (max-width:900px){
    .contact-showcase{min-height:auto; padding:36px 28px;}
    .showcase-ring.r2{display:none;}
  }

  /* ===== FOOTER ===== */
  footer{position:relative; border-top:1px solid var(--line); padding:80px 0 34px; overflow:hidden;}
  .footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:50px;}
  @media (max-width:820px){ .footer-top{grid-template-columns:1fr 1fr; gap:36px;} }
  @media (max-width:520px){ .footer-top{grid-template-columns:1fr;} }
  .footer-brand p{color:var(--muted); font-size:14px; max-width:280px; margin-top:16px; line-height:1.65;}
  .footer-col h5{font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:18px;}
  .footer-col a{display:block; font-size:14px; color:var(--muted); padding:6px 0; transition:color .3s;}
  .footer-col a:hover{color:var(--white);}
  .stay-updated-line{display:flex; align-items:center; gap:10px; margin-top:14px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:0.02em;}
  .pulse-mini{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex-shrink:0; animation:pulseDot 2.4s ease-in-out infinite;}

  .cf-thankyou{
    margin-top:16px; font-family:var(--font-mono); font-size:13px; color:var(--cyan);
    opacity:0; transform:translateY(-6px); max-height:0; overflow:hidden;
    transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft), max-height .5s var(--ease-soft);
  }
  .cf-thankyou.show{opacity:1; transform:translateY(0); max-height:60px;}
  .footer-bottom{margin-top:70px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-bottom .fb-left{font-family:var(--font-mono); font-size:11.5px; color:var(--muted-dim);}
  .socials{display:flex; gap:14px;}
  .socials a{width:34px; height:34px; border-radius:50%; border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; transition:border-color .3s, transform .3s;}
  .socials a:hover{border-color:var(--cyan); transform:translateY(-2px);}
  .socials svg{width:15px; height:15px; color:var(--muted);}
  .socials a:hover svg{color:var(--cyan);}
  .footer-stars{position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;}

  /* countup helper */
  .cu{font-family:var(--font-mono);}