:root{
    --bg:#0b0f14; --panel:#111823; --panel2:#0e141d; --ink:#eef3f8; --muted:#9fb0c3;
    --line:#1e2a38; --accent:#22d3ee; --accent2:#3b82f6; --accent-ink:#04121a;
    --glow:rgba(34,211,238,.18); --ok:#34d399; --warn:#fbbf24; --alarm:#f87171; --maxw:1160px;
    --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  ::selection{background:rgba(34,211,238,.28);color:#fff}
  a{color:var(--accent);text-decoration:none}
  a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  @media(max-width:520px){.wrap{padding:0 16px}}

  /* header — glass at the top, solid once you scroll */
  header{position:sticky;top:0;z-index:20;background:rgba(11,15,20,.84);
    backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
    border-bottom:1px solid var(--line);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
  .js header:not(.scrolled){background:rgba(11,15,20,.5);border-bottom-color:transparent}
  header.scrolled{background:rgba(9,13,18,.92);box-shadow:0 12px 32px -20px rgba(0,0,0,.9)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
  .logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;letter-spacing:.2px;font-size:20px;color:var(--ink)}
  .logo .mark{width:30px;height:30px;flex:0 0 auto}
  .nav .links{display:flex;align-items:center}
  .nav .links a{position:relative;color:var(--muted);margin-left:26px;font-size:14.5px;font-weight:600;white-space:nowrap;transition:color .2s ease}
  .nav .links a:not(.pill)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
  .nav .links a:hover{color:var(--ink)}
  .nav .links a:not(.pill):hover::after{transform:scaleX(1)}
  .nav .links a.pill{color:var(--accent-ink);background:linear-gradient(90deg,var(--accent),var(--accent2));
    padding:8px 16px;border-radius:9px;box-shadow:0 6px 22px -8px var(--glow);transition:transform .15s ease,box-shadow .15s ease}
  .nav .links a.pill:hover{transform:translateY(-1px);box-shadow:0 10px 28px -8px rgba(34,211,238,.45)}
  @media(max-width:820px){.nav .links a:not(.pill){display:none}}

  /* hero */
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .hero::before{content:"";position:absolute;inset:0;
    background:
      radial-gradient(55% 85% at 80% 18%,var(--glow),transparent 60%),
      radial-gradient(40% 60% at 8% 92%,rgba(59,130,246,.10),transparent 70%),
      linear-gradient(180deg,#0d1420,transparent 40%),
      linear-gradient(0deg,var(--bg),transparent 70%);
    z-index:0}
  .grid-bg{position:absolute;inset:0;z-index:0;opacity:.35;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(70% 60% at 70% 20%,#000,transparent 75%);
            mask-image:radial-gradient(70% 60% at 70% 20%,#000,transparent 75%)}

  /* telemetry trace along the floor of the hero: a steady signal, one alarm spike, a pulse riding the wire */
  .trace{position:absolute;left:0;right:0;bottom:8px;width:100%;height:clamp(80px,9vw,170px);z-index:0;pointer-events:none;opacity:.6}
  .trace path{fill:none;stroke:url(#tfade);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
  .trace .base{opacity:.3}
  .trace .pulse{stroke-width:2.4;stroke-dasharray:80 920;filter:drop-shadow(0 0 6px rgba(34,211,238,.75))}
  @media (prefers-reduced-motion:no-preference){.trace .pulse{animation:travel 7s linear infinite}}
  @media (prefers-reduced-motion:reduce){.trace .pulse{display:none}}
  @keyframes travel{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
  @media(max-width:940px){.trace{opacity:.42}}

  .hero .wrap{position:relative;z-index:1;padding:96px 24px 124px;
    display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
  @media(max-width:940px){.hero .wrap{grid-template-columns:1fr;padding:64px 20px 104px;gap:40px}}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;font-weight:500;
    letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);
    border:1px solid var(--line);background:rgba(17,24,35,.7);border-radius:999px;padding:6px 14px}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
  h1{font-family:var(--display);font-size:clamp(38px,5.4vw,62px);line-height:1.02;margin:24px 0 20px;
    letter-spacing:-.035em;font-weight:700;max-width:17ch;text-wrap:balance}
  .hl{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent}
  @media (prefers-reduced-motion:no-preference){.hl{animation:sheen 9s ease-in-out infinite alternate}}
  @keyframes sheen{from{background-position:0% 50%}to{background-position:100% 50%}}
  .sub{font-size:clamp(17px,2.1vw,20px);color:var(--muted);max-width:54ch;margin:0 0 34px}
  .sub strong{color:var(--ink);font-weight:650}
  .btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;
    padding:14px 26px;border-radius:10px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
  .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:var(--accent-ink);
    box-shadow:0 10px 34px -10px rgba(34,211,238,.55)}
  .btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(34,211,238,.6)}
  .btn.ghost{color:var(--ink);border:1px solid var(--line);background:rgba(17,24,35,.7)}
  .btn.ghost:hover{border-color:var(--accent);transform:translateY(-1px)}

  /* hero load-in */
  @media (prefers-reduced-motion:no-preference){
    .js .hero .eyebrow,.js .hero h1,.js .hero .sub,.js .hero .btns,.js .hero .callout{
      opacity:0;transform:translateY(14px);animation:rise .8s var(--ease) forwards}
    .js .hero h1{animation-delay:.08s}
    .js .hero .sub{animation-delay:.18s}
    .js .hero .callout{animation-delay:.22s}
    .js .hero .btns{animation-delay:.28s}
  }
  @keyframes rise{to{opacity:1;transform:none}}

  /* hero callout timeline */
  .callout{position:relative;background:linear-gradient(180deg,rgba(17,24,35,.94),rgba(14,20,29,.94));border:1px solid var(--line);
    border-radius:18px;padding:22px 22px 18px;
    box-shadow:0 30px 80px -40px rgba(34,211,238,.42),inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .callout::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(140deg,rgba(34,211,238,.6),transparent 35%,transparent 65%,rgba(59,130,246,.5));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
  .callout .top{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .callout .alarm{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
  .callout .alarm .blip{position:relative;width:10px;height:10px;border-radius:50%;background:var(--alarm);
    box-shadow:0 0 12px var(--alarm);flex:0 0 auto}
  .callout .alarm .blip::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--alarm);opacity:0}
  @media (prefers-reduced-motion:no-preference){.callout .alarm .blip::after{animation:ping 1.9s cubic-bezier(0,0,.2,1) infinite}}
  @keyframes ping{0%{transform:scale(.55);opacity:.85}80%,100%{transform:scale(2);opacity:0}}
  .callout .tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
  .tl{position:relative;list-style:none;margin:10px 0 0;padding:0}
  .tl::before{content:"";position:absolute;left:74px;top:20px;bottom:20px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--line),rgba(52,211,153,.35))}
  .tl li{display:grid;grid-template-columns:62px 18px 1fr;gap:8px;align-items:start;padding:9px 0;
    font-size:14px;color:var(--muted)}
  .tl .t{font-family:var(--mono);font-size:12px;color:#6f8399;padding-top:2px}
  .tl .d{position:relative;z-index:1;width:10px;height:10px;border-radius:50%;margin-top:6px;border:2px solid var(--line);background:var(--panel2)}
  .tl li b{color:var(--ink);font-weight:650}
  .tl .ch{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.6px;border-radius:6px;
    padding:1px 7px;margin-left:6px;border:1px solid var(--line);color:var(--accent)}
  .tl li.miss .d{border-color:var(--warn)}
  .tl li.miss .note{color:var(--warn)}
  .tl li.ack .d{border-color:var(--ok);background:var(--ok);box-shadow:0 0 10px rgba(52,211,153,.6)}
  .tl li.ack b.ok{color:var(--ok)}
  .tl li.end{color:#6f8399;font-size:13px}
  @media (prefers-reduced-motion:no-preference){
    .js .tl li{opacity:0;transform:translateY(6px)}
    .js .callout.play .tl li{animation:rise .5s var(--ease) forwards}
    .js .callout.play .tl li:nth-child(1){animation-delay:.7s}
    .js .callout.play .tl li:nth-child(2){animation-delay:1.2s}
    .js .callout.play .tl li:nth-child(3){animation-delay:1.7s}
    .js .callout.play .tl li:nth-child(4){animation-delay:2.2s}
    .js .callout.play .tl li:nth-child(5){animation-delay:2.7s}
  }

  /* proof strip */
  .band{background:linear-gradient(180deg,var(--panel2),var(--bg));border-bottom:1px solid var(--line)}
  .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:38px;padding-bottom:38px}
  @media(max-width:820px){.proof{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:420px){.proof{grid-template-columns:1fr}}
  .proof .p{padding-left:16px;border-left:2px solid rgba(34,211,238,.45)}
  .proof .p .n{font-family:var(--display);font-size:clamp(18px,1.9vw,21px);font-weight:600;letter-spacing:-.01em}
  .proof .p .l{color:var(--muted);font-size:14px;margin-top:3px}

  /* section shells */
  section{padding:96px 0}
  @media(max-width:620px){section{padding:64px 0}}
  .kicker{font-family:var(--mono);color:var(--accent);font-weight:500;letter-spacing:1.6px;text-transform:uppercase;
    font-size:12px;margin:0 0 12px}
  h2{font-family:var(--display);font-size:clamp(28px,4.2vw,44px);letter-spacing:-.025em;line-height:1.1;margin:0 0 16px;font-weight:700;text-wrap:balance}
  .lead{color:var(--muted);font-size:18px;max-width:64ch;margin:0}

  /* how it works */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;counter-reset:step}
  @media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.steps{grid-template-columns:1fr}}
  .step{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
    border-radius:16px;padding:26px 22px 24px;transition:border-color .2s ease,transform .2s ease}
  .step:hover{border-color:rgba(34,211,238,.4);transform:translateY(-3px)}
  .step::before{counter-increment:step;content:"0" counter(step);display:flex;align-items:center;justify-content:center;
    width:38px;height:34px;border-radius:10px;font-family:var(--mono);font-weight:600;font-size:13.5px;color:var(--accent-ink);
    background:linear-gradient(135deg,var(--accent),var(--accent2));margin-bottom:16px}
  .step h3{font-family:var(--display);font-size:18.5px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
  .step p{color:var(--muted);font-size:15px;margin:0}

  /* features */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
  @media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.cards{grid-template-columns:1fr}}
  .card{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
    border-radius:16px;padding:26px;transition:border-color .2s ease,transform .2s ease}
  .card:hover{border-color:rgba(34,211,238,.5);transform:translateY(-3px)}
  .card .ico{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    background:rgba(34,211,238,.10);border:1px solid var(--line);margin-bottom:16px;transition:box-shadow .2s ease,border-color .2s ease}
  .card:hover .ico{border-color:rgba(34,211,238,.45);box-shadow:0 0 22px -6px rgba(34,211,238,.6)}
  .card h3{font-family:var(--display);font-size:19px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
  .card p{color:var(--muted);font-size:15px;margin:0}
  .card ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
  .card li{margin:5px 0}

  /* personnel */
  .alt{background:linear-gradient(180deg,var(--panel2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
  @media(max-width:860px){.duo{grid-template-columns:1fr}}
  .panelbox{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
    border-radius:18px;padding:30px;transition:border-color .2s ease}
  .panelbox:hover{border-color:rgba(34,211,238,.35)}
  .panelbox.hot{border-color:rgba(34,211,238,.45);
    background:radial-gradient(90% 120% at 100% 0%,var(--glow),transparent 55%),linear-gradient(180deg,var(--panel),var(--panel2))}
  .panelbox h3{font-family:var(--display);margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.01em}
  .panelbox p{color:var(--muted);margin:0 0 6px;font-size:15.5px}
  .checks{list-style:none;margin:16px 0 0;padding:0}
  .checks li{display:flex;gap:12px;margin:12px 0;color:var(--muted);font-size:15.5px}
  .checks li b{color:var(--ink);font-weight:650}
  .chk{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:rgba(34,211,238,.12);
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-top:2px}

  /* why */
  .why{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
  @media(max-width:900px){.why{grid-template-columns:1fr;gap:26px}}
  @media(min-width:901px){.why > div:first-child{position:sticky;top:100px}}
  .reasons{display:grid;gap:16px}
  .reason{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--panel2);
    transition:border-color .2s ease,transform .2s ease}
  .reason:hover{border-color:rgba(34,211,238,.4);transform:translateX(3px)}
  .reason h3{font-family:var(--display);margin:0 0 6px;font-size:17.5px;font-weight:600;letter-spacing:-.01em}
  .reason p{margin:0;color:var(--muted);font-size:15px}

  /* services */
  .cards.two{grid-template-columns:repeat(2,1fr)}
  @media(max-width:760px){.cards.two{grid-template-columns:1fr}}

  /* contact */
  .cta-band{text-align:center}
  .cta-band .box{position:relative;background:
      radial-gradient(80% 140% at 50% 0%,var(--glow),transparent 60%),
      linear-gradient(180deg,var(--panel),var(--panel2));
    border:1px solid var(--line);border-radius:22px;padding:56px 28px}
  @media (prefers-reduced-motion:no-preference){
    .cta-band .box{background-size:180% 100%,100% 100%;animation:drift 16s ease-in-out infinite alternate}
  }
  @keyframes drift{from{background-position:20% 0,0 0}to{background-position:80% 0,0 0}}
  @media(max-width:520px){.cta-band .box{padding:40px 18px}}
  .cta-band h2{margin-bottom:12px}
  .cta-band p{color:var(--muted);max-width:56ch;margin:0 auto 24px;font-size:17px}
  .cta-band p.kicker{color:var(--accent);font-size:12px;margin:0 auto 12px}
  form.scope{display:grid;gap:15px;margin:24px auto 0;text-align:left;max-width:560px}
  form.scope label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--ink)}
  form.scope input,form.scope textarea,form.scope select{width:100%;font:inherit;color:var(--ink);
    background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:12px 13px;
    transition:border-color .2s ease,box-shadow .2s ease}
  form.scope input::placeholder,form.scope textarea::placeholder{color:#5f7187}
  form.scope select{appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
  form.scope input:focus,form.scope textarea:focus,form.scope select:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--glow)}
  form.scope textarea{min-height:130px;resize:vertical}
  form.scope .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* footer — findable, not splashed */
  footer{border-top:1px solid var(--line);padding:42px 0 36px;color:var(--muted);font-size:14px;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.28))}
  .foot{display:flex;justify-content:space-between;gap:24px 32px;flex-wrap:wrap;align-items:center}
  .foot-co .logo{font-size:16.5px;gap:9px}
  .foot-co .logo .mark{width:22px;height:22px}
  .foot address{font-style:normal;margin-top:10px;line-height:1.6;color:var(--muted)}
  .foot address a{color:var(--muted);transition:color .2s ease}
  .foot address a:hover{color:var(--accent)}
  .foot-tag{font-family:var(--mono);font-size:12px;letter-spacing:.3px}

  /* cursor spotlight (added by script for mouse and trackpad) */
  .spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.11),transparent 45%);
    opacity:0;transition:opacity .3s ease}
  .spot:hover::after{opacity:1}

  /* scroll reveals (added by script; removed again once the element has arrived) */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
  .reveal.in{opacity:1;transform:none}

  /* inner pages: one-column hero, the nav marks where you are */
  .hero.page .wrap{grid-template-columns:1fr;padding:84px 24px 118px}
  @media(max-width:940px){.hero.page .wrap{padding:56px 20px 96px}}
  .hero.page h1{max-width:20ch}
  .hero.page .sub{max-width:66ch}
  .nav .links a[aria-current="page"]{color:var(--ink)}
  .nav .links a[aria-current="page"]::after{transform:scaleX(1)}

  /* source notes: small, findable, never in the way */
  .src{font-size:12.5px;color:#6f8399;margin-left:4px;white-space:nowrap}
  .src:hover{color:var(--accent)}
  .pagenote{color:var(--muted);font-size:15px;margin:28px 0 0;max-width:72ch}

  /* questions and answers */
  .faq{display:grid;gap:12px;margin-top:40px;max-width:860px}
  .faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:0 22px;
    transition:border-color .2s ease}
  .faq details[open]{border-color:rgba(34,211,238,.4)}
  .faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:17.5px;
    padding:18px 28px 18px 0;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:0;top:15px;font-family:var(--mono);font-size:20px;color:var(--accent)}
  .faq details[open] summary::after{content:"\2212"}
  .faq details p{color:var(--muted);margin:0 0 18px;font-size:15.5px}