@property --acc{syntax:'<color>';inherits:true;initial-value:#0DD4B0}
  :root{--acc:#0DD4B0}

  [data-theme="midnight"]{--paper:#0A0D12;--card:#0F172A;--ink:#F6F7F5;--muted:#9AA6BC;--muted2:#8794AE;
    --blue:#1756FF;--cyan:#00E1FF;--teal:#2FE0BE;
    --line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.07)}
  section{position:relative}.act{padding:clamp(64px,10vh,110px) 0}
  .eyebrow{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:color .5s}
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--acc);transition:background .5s}
  .num{font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted)}
  .achead{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(20px,4vh,36px)}
  .muted{color:var(--muted)}
  #progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acc);z-index:70;transition:background .5s}

  /* HERO */
  .ihero{text-align:center;padding:clamp(130px,20vh,200px) clamp(24px,5vw,64px) clamp(24px,4vh,44px);
    background:radial-gradient(60% 55% at 50% 26%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%),var(--paper);transition:background .6s}
  .ihero .eyebrow{margin-bottom:22px}
  .ihero h1{font-family:var(--display);font-size:clamp(32px,5.4vw,72px);max-width:15ch;margin:0 auto;letter-spacing:-.03em}
  .vtitle,.vpos,.vtag,.proof,.vpill{font-family:var(--display)}
  .ihero h1 .k{color:var(--acc);transition:color .5s}
  .ihero .sub{margin:24px auto 0;max-width:56ch;color:var(--muted);font-size:clamp(15px,1.3vw,18px)}

  /* selector */
  .vsel{position:sticky;top:60px;z-index:40;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:18px 16px;margin-top:26px;
    background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(10px)}
  .vpill{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:100px;padding:10px 18px;font-family:var(--display);font-weight:500;font-size:14px;color:var(--muted);cursor:pointer;background:transparent;transition:border-color .35s,color .35s,background .35s}
  .vpill .d{width:8px;height:8px;border-radius:50%;background:var(--dot);opacity:.5;transition:opacity .35s,transform .35s}
  .vpill:hover{color:var(--ink)}
  .vpill.active{color:var(--ink);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
  .vpill.active .d{opacity:1;transform:scale(1.25)}

  /* stage */
  .stage{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,6vh,64px) clamp(24px,5vw,64px)}
  .vpanel{display:none}
  .vpanel.active{display:block;animation:vin .55s ease}
  @keyframes vin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .vgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,64px);align-items:center}
  @media(max-width:860px){.vgrid{grid-template-columns:1fr;gap:30px}}
  .vtag{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);transition:color .5s}
  .vtitle{font-size:clamp(28px,3.6vw,46px);margin-top:12px;max-width:16ch}
  .vpos{margin-top:16px;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.7vw,22px);color:var(--ink);max-width:26ch}
  .press{margin-top:22px;display:flex;flex-direction:column;gap:0}
  .press div{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line2);font-size:15.5px;color:var(--ink)}
  .press div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);margin-top:8px;flex:0 0 auto;transition:background .5s}
  .maps{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}
  .chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:13px;text-decoration:none;color:var(--ink);transition:border-color .3s}
  .chip:hover{border-color:var(--acc)}
  .chip b{color:var(--acc);font-weight:600;transition:color .5s}
  .proof{margin-top:26px;border-left:3px solid var(--acc);padding:4px 0 4px 18px;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.8vw,23px);color:var(--ink);max-width:34ch;transition:border-color .5s}

  /* environment visual */
  .vvis{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line2);
    background:radial-gradient(60% 70% at 28% 24%,color-mix(in srgb,var(--acc) 60%,transparent),transparent 62%),radial-gradient(56% 64% at 82% 82%,color-mix(in srgb,var(--acc) 34%,transparent),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--acc) 8%,var(--card)),var(--card));transition:background .6s}
  .vvis .vimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
  .vvis::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(6,10,18,.66),rgba(6,10,18,.06) 46%,transparent 66%)}
  .vvis .mesh{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 50% 50%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%);animation:meshdrift 16s ease-in-out infinite alternate;mix-blend-mode:screen}
  [data-theme="midnight"] .vvis .mesh{mix-blend-mode:lighten}
  @keyframes meshdrift{0%{transform:translate(-6%,-4%) scale(1)}100%{transform:translate(6%,5%) scale(1.12)}}
  .vvis .ghost{position:absolute;left:26px;bottom:22px;right:26px;z-index:2}
  .vvis .ghost .g1{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,40px);color:#fff;letter-spacing:-.02em;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.4)}
  .vvis .ghost .g2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.74);margin-top:10px}
  .vvis .spk{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px 2px color-mix(in srgb,var(--acc) 60%,transparent);opacity:.8;animation:twk 3.6s ease-in-out infinite;z-index:2}
  .vvis .spk:nth-child(2){left:38%;top:30%;animation-delay:.2s}.vvis .spk:nth-child(3){left:64%;top:22%;animation-delay:.9s}.vvis .spk:nth-child(4){left:72%;top:52%;animation-delay:1.5s}.vvis .spk:nth-child(5){left:30%;top:58%;animation-delay:2.1s}
  @keyframes twk{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.95;transform:scale(1.25)}}

  h2.big{font-size:clamp(28px,4.4vw,56px);max-width:20ch}h2.big .g{color:var(--acc);transition:color .5s}
  .lead p{margin-top:18px;max-width:56ch;color:var(--muted);font-size:clamp(15px,1.2vw,18px)}
  .verbs{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 12px}
  .verbs span{font-family:var(--display);font-weight:500;font-size:clamp(16px,1.6vw,21px)}
  .verbs span+span::before{content:"·";color:var(--acc);margin-right:12px;transition:color .5s}

  /* which vertical table */
  .picker{margin-top:38px;border-top:1px solid var(--line2)}
  .prow{display:grid;grid-template-columns:1.3fr .7fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line2);align-items:center}
  .prow .pl{color:var(--ink);font-size:16px}
  .prow .pr{font-family:var(--display);font-weight:600;color:var(--blue);font-size:15px;text-align:right}
  @media(max-width:560px){.prow{grid-template-columns:1fr;gap:4px}.prow .pr{text-align:left}}

  .final{text-align:center;padding:clamp(90px,14vh,150px) 0;background:radial-gradient(46% 60% at 50% 50%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 70%),var(--paper);transition:background .6s}
  .final h2{font-size:clamp(32px,5vw,66px);max-width:16ch;margin:0 auto}.final h2 .k{color:var(--acc);transition:color .5s}
  .final .cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  [data-theme="midnight"] .vvis{border-color:transparent;background:#0B1220}