:root{
    --void:#040711; --ground:#060910; --panel:#0E1524; --panel2:#111A2C; --line:#1E2F4B;
    --text:#EAF2FF; --body:#9BB0CC; --dim:#63789A;
    --cyan:#00BFFF; --mint:#00E5CC; --gold:#6FD6FF;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--ground);color:var(--body);
    font-family:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{font-family:"Syne",system-ui,sans-serif;color:var(--text);margin:0 0 .5em;
    line-height:1.05;letter-spacing:-.02em;text-wrap:balance;font-weight:700}
  h1{font-size:clamp(1.45rem,3.0vw,2.55rem);font-weight:800;line-height:1.08}
  h2{font-size:clamp(1.95rem,4.1vw,3.2rem)}
  h3{font-size:1.14rem;line-height:1.3}
  p{margin:0 0 1em}
  a{color:inherit}
  canvas{display:block}
  .lit{background:linear-gradient(96deg,var(--cyan) 0%,var(--mint) 55%,#7BE8FF 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}

  #bg{position:fixed;inset:0;z-index:0;background:
    radial-gradient(1200px 760px at 50% 38%,#0B1836 0%,transparent 64%),
    linear-gradient(180deg,#040711 0%,#060910 52%,#04070F 100%)}
  #bg canvas{width:100%;height:100%}
  main,footer{position:relative;z-index:2}
  .wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:24px}

  .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
    color:var(--cyan);margin:0 0 16px;display:flex;align-items:center;gap:11px}
  .eyebrow::before{content:"";width:24px;height:1px;background:var(--cyan);flex:none}
  .eyebrow.mid{justify-content:center}
  .lede{font-size:clamp(1rem,1.4vw,1.16rem);color:var(--body);max-width:60ch}
  .mid{text-align:center}
  .mid .lede{margin-inline:auto}

  header{position:fixed;top:0;left:0;right:0;z-index:40;
    padding:calc(13px + env(safe-area-inset-top,0px)) 0 13px;
    border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
  header.stuck{background:rgba(5,8,15,.86);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
  .nav{display:flex;align-items:center;gap:22px}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;flex:none}
  .brand img{width:93px;height:93px;border-radius:21px;display:block;
    box-shadow:0 0 0 1px rgba(0,191,255,.34), 0 12px 38px -10px rgba(0,191,255,.85)}
  .brand b{font-family:"Syne",sans-serif;font-size:1.3rem;color:var(--text);font-weight:700;
    letter-spacing:-.015em;line-height:1.08;white-space:nowrap}
  .brand small{display:block;font-family:"Sora",sans-serif;font-size:.66rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--cyan);font-weight:600;margin-top:3px;white-space:nowrap}
  @media(max-width:1340px){.brand img{width:74px;height:74px;border-radius:17px}
    .brand b{font-size:1.14rem}.brand small{font-size:.6rem;letter-spacing:.19em}}
  @media(max-width:760px){.brand img{width:64px;height:64px;border-radius:15px}
    .brand b{font-size:1.02rem}}
  @media(max-width:430px){.brand b{display:none}
    .brand img{width:58px;height:58px;border-radius:14px}}
  .nav{min-width:0;flex-wrap:nowrap}
  .brand{min-width:0}
  .menu{display:none;gap:18px;min-width:0;flex:0 1 auto}
  .menu a{text-decoration:none;font-size:.84rem;color:var(--body);transition:color .2s;white-space:nowrap}
  .menu a:hover{color:var(--text)}
  @media(min-width:1340px){.menu{display:flex}}

  /* phone menu: nothing here was reachable below 1280px before */
  /* the FAQ styles every <details> on the page, including this one: its
     overflow:hidden was clipping the dropdown to the height of the button */
  .mnav{position:relative;margin-left:auto;flex:none;
    overflow:visible;border:0;background:none;margin-bottom:0;border-radius:0}
  .mnav>summary::after{display:none}
  @media(max-width:430px){.mnav>summary{padding:0 14px}
    header .btn-gold{padding:0 17px;font-size:.87rem}}
  @media(min-width:1340px){.mnav{display:none}}
  .mnav>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    min-height:46px;padding:0 17px;border-radius:999px;border:1px solid var(--line);
    background:rgba(14,21,36,.62);color:var(--text);font-size:.88rem;font-weight:600;
    backdrop-filter:blur(8px)}
  .mnav>summary::-webkit-details-marker{display:none}
  .mnav>summary i{display:block;width:15px;height:9px;border-top:2px solid var(--cyan);
    border-bottom:2px solid var(--cyan);position:relative}
  .mnav[open]>summary{border-color:var(--cyan)}
  .mnav .sheet{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;z-index:60;
    background:rgba(8,13,24,.97);border:1px solid var(--line);border-radius:14px;padding:9px;
    box-shadow:0 26px 60px -20px rgba(0,0,0,.9);backdrop-filter:blur(16px)}
  .mnav .sheet a{display:block;text-decoration:none;color:var(--body);font-size:.92rem;
    padding:11px 14px;border-radius:9px}
  .mnav .sheet a:hover{background:rgba(0,191,255,.1);color:var(--text)}
  .mnav .sheet hr{border:0;border-top:1px solid var(--line);margin:7px 12px}
  .btn.navphone{display:none}
  @media(min-width:900px){.btn.navphone{display:inline-flex}}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
    padding:0 24px;flex:none;border-radius:999px;border:1px solid transparent;font:inherit;font-weight:600;
    font-size:.94rem;text-decoration:none;cursor:pointer;white-space:nowrap;
    transition:background-color .2s,color .2s,border-color .2s,transform .2s}
  .btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
  .btn-gold{background:linear-gradient(180deg,#8BE2FF,#4FC7FF);color:#03151F;
    box-shadow:0 14px 40px -14px rgba(79,199,255,.95), inset 0 1px 0 rgba(255,255,255,.45)}
  .btn-gold:hover{background:linear-gradient(180deg,#A8ECFF,#6FD6FF);transform:translateY(-1px);
    box-shadow:0 18px 46px -14px rgba(111,214,255,1), inset 0 1px 0 rgba(255,255,255,.55)}
  .btn-wire{border-color:var(--line);color:var(--text);background:rgba(14,21,36,.55);
    backdrop-filter:blur(8px)}
  .btn-wire:hover{border-color:var(--cyan);color:#fff}

  /* ACT 1: the brain, alone */
  .act1[hidden]{display:none}
  .act1{height:100svh;display:flex;align-items:flex-end;justify-content:center;
    padding-bottom:clamp(36px,8vh,80px);text-align:center}
  .act1 .inner{position:relative;padding:22px 34px 0}
  .act1 .biglogo{width:clamp(66px,9vw,92px);height:auto;display:block;margin:0 auto 16px;
    border-radius:16px;box-shadow:0 0 0 1px rgba(0,191,255,.28), 0 14px 40px -14px rgba(0,191,255,.75)}
  .act1 .mark{font-family:"Syne",sans-serif;font-size:clamp(1.19rem,2.5vw,1.65rem);
    letter-spacing:.34em;text-transform:uppercase;color:#DCEBFF;font-weight:700;margin:0;
    padding-right:.34em;
    text-shadow:0 0 14px rgba(0,191,255,.75), 0 0 34px rgba(0,191,255,.45),
                0 0 68px rgba(0,140,255,.30)}
  .act1 .cue{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:7px;
    font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
  .act1 .cue i{display:block;width:1px;height:36px;
    background:linear-gradient(180deg,transparent,var(--cyan));animation:cue 2.4s infinite}
  @keyframes cue{0%{opacity:0;transform:scaleY(.3)}45%{opacity:1}100%{opacity:0;transform:scaleY(1)}}
  @media (prefers-reduced-motion:reduce){.act1 .cue i{animation:none;opacity:.7}}

  /* ACT 2: hero */
  .hero{min-height:100svh;display:flex;align-items:center;padding-block:70px}
  .hero h1 span{display:block}
  .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
  .habla{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
    font-size:.76rem;letter-spacing:.05em;color:var(--mint);font-weight:500;
    border:1px solid rgba(0,229,204,.34);background:rgba(0,229,204,.07);
    border-radius:999px;padding:6px 15px}
  .habla svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}

  .stats{display:grid;gap:12px;margin-top:48px;
    grid-template-columns:repeat(auto-fit,minmax(142px,1fr));max-width:760px}
  .stat{background:rgba(14,21,36,.62);border:1px solid var(--line);border-radius:12px;
    padding:15px 18px;backdrop-filter:blur(10px)}
  .stat b{display:block;font-family:"Syne",sans-serif;font-size:clamp(1.15rem,1.5vw,1.6rem);
    color:var(--text);line-height:1.08;font-weight:800;overflow-wrap:anywhere}
  .stat span{font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}

  section{position:relative;padding-block:clamp(78px,11vh,132px)}
  .sec-solid{background:linear-gradient(180deg,rgba(4,7,15,.40),rgba(4,7,15,.62));
    backdrop-filter:blur(2px)}

  .grid{display:grid;gap:16px;margin-top:46px}
  .g4{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
  .card{background:linear-gradient(168deg,rgba(17,26,44,.74),rgba(9,14,26,.66));
    border:1px solid var(--line);border-radius:15px;padding:28px 26px;position:relative;
    overflow:hidden;transition:border-color .26s,transform .26s}
  .card::after{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;
    background:radial-gradient(420px 190px at 50% -14%,rgba(0,191,255,.15),transparent 70%);
    opacity:0;transition:opacity .26s}
  .card:hover{border-color:#2B5480;transform:translateY(-3px)}
  .card:hover::after{opacity:1}
  .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
    background:linear-gradient(150deg,rgba(0,191,255,.18),rgba(0,229,204,.08));
    border:1px solid rgba(0,191,255,.3)}
  .ic svg{width:23px;height:23px;stroke:var(--cyan);fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .card p{font-size:.94rem;margin:0}
  .price{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.84rem;
    font-weight:600;color:var(--mint)}
  .price svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

  /* numbers */
  .num{text-align:center;padding:34px 24px}
  .num .big{font-family:"Syne",sans-serif;font-size:clamp(2.0rem,3.1vw,2.7rem);font-weight:800;
    line-height:1.04;margin-bottom:10px;max-width:100%;overflow-wrap:anywhere;
    text-wrap:balance;hyphens:none}
  .num .big.long{font-size:clamp(1.5rem,2.3vw,2.0rem)}
  .num h3{font-size:1rem;margin-bottom:10px}
  .num p{font-size:.88rem;color:var(--dim)}

  /* reviews */
  .rev{display:flex;flex-direction:column;gap:16px}
  .rev .q{font-family:"Syne",sans-serif;font-size:2rem;color:var(--cyan);line-height:1;opacity:.55}
  .rev p{font-style:italic;font-size:.97rem;color:var(--text);margin:0}
  .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
  .av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:linear-gradient(140deg,var(--cyan),var(--mint));color:#04101A;font-weight:700;
    font-size:.88rem}
  .who b{display:block;color:var(--text);font-size:.94rem;line-height:1.3}
  .who small{font-size:.8rem;color:var(--dim)}
  .slot{border-style:dashed;border-color:#26405F;background:rgba(9,14,26,.55)}
  .slot .note{font-size:.88rem;color:var(--dim);margin:0}

  /* the founder pledge that sits where testimonials will go */
  .pledge{max-width:780px;margin:44px auto 10px;text-align:left;position:relative;
    background:linear-gradient(160deg,rgba(0,191,255,.09),rgba(14,21,36,.80));
    border:1px solid #23446B;border-radius:18px;padding:clamp(26px,3.6vw,40px)}
  .pledge .q{font-family:"Syne",sans-serif;font-size:3.2rem;line-height:.7;color:var(--cyan);
    opacity:.45;margin-bottom:10px}
  .pledge p{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--text);line-height:1.65;margin:0}
  .pledge .who{margin-top:24px;padding-top:0}
  .pledge .who small{display:block}

  /* steps */
  .step{text-align:center;padding:10px 18px}
  .step .dot{width:62px;height:62px;border-radius:50%;margin:0 auto 20px;display:grid;
    place-items:center;font-family:"Syne",sans-serif;font-weight:800;font-size:1.05rem;
    color:#04101A;background:linear-gradient(145deg,var(--cyan),var(--mint));
    box-shadow:0 0 34px -6px rgba(0,191,255,.6)}
  .step p{font-size:.93rem;color:var(--dim);margin:0}

  /* why */
  .why .card{padding:24px 22px}
  .why h3{font-size:1.04rem}
  .why p{font-size:.9rem;color:var(--dim)}

  /* faq */
  .faq{max-width:840px;margin:44px auto 0}
  details{border:1px solid var(--line);border-radius:12px;margin-bottom:11px;
    background:rgba(14,21,36,.55);overflow:hidden}
  details[open]{border-color:#2B5480}
  summary{cursor:pointer;list-style:none;padding:19px 54px 19px 22px;position:relative;
    font-family:"Syne",sans-serif;font-weight:700;color:var(--text);font-size:1rem}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
    border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
    transform:translateY(-70%) rotate(45deg);transition:transform .22s}
  details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  details .ans{padding:0 22px 20px;font-size:.94rem;color:var(--body)}

  /* closing */
  .final{background:linear-gradient(160deg,rgba(0,191,255,.1),rgba(9,14,26,.85));
    border:1px solid #23446B;border-radius:22px;padding:clamp(40px,7vw,72px) 26px;text-align:center}
  .final h2{max-width:17ch;margin-inline:auto}
  .final p{margin-inline:auto;max-width:56ch}

  footer{border-top:1px solid var(--line);padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));
    font-size:.88rem;color:var(--dim);background:rgba(4,7,15,.72)}
  .fgrid{display:grid;gap:30px 26px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .fgrid h4{font-family:"Syne",sans-serif;color:var(--text);font-size:.88rem;margin:0 0 12px;
    letter-spacing:.06em}
  .fgrid a{display:block;text-decoration:none;margin-bottom:7px;transition:color .2s}
  .fgrid a:hover{color:var(--cyan)}
  .fbar{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem}
  /* the header lockup must not shrink, but in a narrow footer column it has to.
     Same markup, different rules. */
  footer .brand{flex:0 1 auto;flex-wrap:wrap;gap:12px;max-width:100%}
  footer .brand span{min-width:0}
  footer .brand img{width:71px;height:71px;border-radius:17px}
  footer .brand b{white-space:normal;font-size:1.1rem}
  footer .brand small{white-space:normal;font-size:.58rem;letter-spacing:.15em}
  .fbar a{text-decoration:none;color:var(--dim);transition:color .2s}
  .fbar a:hover{color:var(--cyan)}
  /* the last thing on the page, centred, on its own */
  .slogan{font-family:"Great Vibes",cursive;
    font-size:clamp(1.22rem,2.2vw,1.72rem);line-height:1.25;text-align:center;
    margin:34px 0 0;padding-top:30px;border-top:1px solid var(--line);
    background:linear-gradient(96deg,var(--cyan) 0%,var(--mint) 58%,#8BE2FF 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 18px rgba(0,191,255,.35))}
  .where{font-size:.84rem;color:var(--dim);margin:0;max-width:30ch}

  .flag{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;
    background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.5);color:var(--gold);
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    padding:6px 12px;border-radius:999px;backdrop-filter:blur(8px)}

  .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* ── inner pages ─────────────────────────────────────────────────────── */
  .phero{padding-block:clamp(120px,17vh,190px) clamp(54px,8vh,86px)}
  .phero h1{font-size:clamp(1.9rem,3.8vw,3.1rem)}
  .crumb{font-size:.78rem;color:var(--dim);margin:0 0 18px}
  .crumb a{text-decoration:none;color:var(--dim)}
  .crumb a:hover{color:var(--cyan)}
  .crumb span{margin:0 7px;opacity:.5}
  .prose{max-width:74ch}
  .prose h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-top:2em}
  .prose h3{font-size:1.1rem;margin-top:1.8em}
  .prose ul{padding-left:20px;margin:0 0 1.2em}
  .prose li{margin-bottom:.5em}
  .prose strong{color:var(--text);font-weight:600}
  .prose a{color:var(--cyan)}
  .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
  .chip{border:1px solid var(--line);background:rgba(14,21,36,.6);border-radius:999px;
    padding:7px 15px;font-size:.83rem;color:var(--body)}
  .rel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:34px}
  .rel a{text-decoration:none;display:block;border:1px solid var(--line);border-radius:13px;
    padding:16px 18px;background:rgba(14,21,36,.55);transition:border-color .22s,transform .22s}
  .rel a:hover b{color:var(--cyan)}
  .rel a:hover{border-color:var(--cyan);transform:translateY(-2px)}
  .rel b{display:block;font-family:"Syne",sans-serif;color:var(--text);font-size:.95rem;
    margin-bottom:5px;font-weight:700}
  .rel span{display:block;font-size:.83rem;color:var(--dim);line-height:1.55}
  .postmeta{font-size:.8rem;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
  .diagram{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin:28px 0 0}
  .dstep{border:1px solid var(--line);border-radius:12px;padding:16px 18px;
    background:linear-gradient(168deg,rgba(17,26,44,.7),rgba(9,14,26,.62))}
  .dstep b{display:block;font-family:"Syne",sans-serif;color:var(--cyan);font-size:.72rem;
    letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px}
  .dstep span{font-size:.9rem;color:var(--body)}