:root{
    --bg: #0a0c0f;
    --panel: #12151a;
    --panel-2: #171b21;
    --line: #262b33;
    --text: #e9e7e2;
    --text-dim: #9aa0aa;
    --text-mid: #c7cbd1;
    --text-faint: #5b6169;
    --brass: #c79a56;
    --brass-dim: #8a6f45;
    --steel: #7c8894;
    --steel-dim: #454c55;
    --intel: #6fd3c7;
    --intel-dim: #35544f;
  }

  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  .noise{
    position:fixed; inset:0; pointer-events:none; z-index:5;
    opacity:.035; mix-blend-mode:overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .vignette{
    position:fixed; inset:0; pointer-events:none; z-index:4;
    background: radial-gradient(ellipse at 68% 50%, transparent 40%, rgba(0,0,0,.35) 100%);
  }

  /* ---------- Header / brand ---------- */
  .brandbar{
    position:fixed; top:0; left:0; right:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding: 28px 44px;
    padding-top: calc(28px + env(safe-area-inset-top));
    pointer-events:none;
  }
  .brand{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600; font-size:16px; letter-spacing:.04em;
    color: var(--text);
    pointer-events:auto;
    text-decoration:none;
    flex-shrink:0;
  }
  .brand span{ color: var(--brass); }
  .headerlinks{ display:flex; align-items:center; gap:22px; pointer-events:auto; }
  .philosophy{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px; color: var(--text-faint);
    letter-spacing:.02em;
  }
  @media (max-width: 760px){ .philosophy{ display:none; } }

  .backlink{
    font-family:'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--text-dim);
    text-decoration:none;
    display:inline-flex; align-items:center; gap:7px;
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: 999px;
    transition: border-color .25s ease, color .25s ease;
    white-space:nowrap;
  }
  .backlink:hover{ border-color: var(--intel); color: var(--intel); }
  .backlink .arrow{ font-size:12px; }

  @media (max-width: 640px){
    .brandbar{ padding: 18px 18px; padding-top: calc(18px + env(safe-area-inset-top)); }
    .backlink{ font-size: 10.5px; padding: 6px 10px; }
  }
  @media (max-width: 380px){
    .backlink .bl-prefix{ display:none; }
  }

  /* ---------- Slides ---------- */
  .stage{
    position:relative; width:100vw;
    height:100vh;
    height:100dvh; /* fixes mobile browsers where 100vh includes the address bar */
  }
  .slide{
    position:absolute; inset:0;
    display:flex; align-items:center;
    padding: 0 6vw;
    opacity:0; transform: translateY(26px);
    pointer-events:none;
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .slide.active{
    opacity:1; transform: translateY(0);
    pointer-events:auto;
  }

  .slide-inner{
    width:100%;
    max-width: 1400px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: minmax(320px, 620px) 1fr;
    align-items:center;
    gap: 4vw;
  }
  .slide[data-stage="6"] .slide-inner{ grid-template-columns: 1fr; text-align:center; justify-items:center; }
  .slide[data-stage="6"] .copy{ max-width: 720px; }

  .copy{ position:relative; text-shadow: 0 2px 22px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); }

  .stagelabel{
    font-family:'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--intel);
    display:flex; align-items:center; gap: 10px;
    margin-bottom: 24px;
  }
  .stagelabel .num{ color: var(--text-faint); }
  .stagelabel .rule{ width:26px; height:1px; background: var(--line); }
  .slide[data-stage="6"] .stagelabel{ justify-content:center; }

  h1{
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(38px, 4.8vw, 66px);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 22px 0;
    max-width: 14ch;
  }
  .slide[data-stage="6"] h1{ max-width: 20ch; margin-left:auto; margin-right:auto; }
  .tagline-heading{ font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 8px; }

  .lede{
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-mid);
    max-width: 44ch;
    margin: 0 0 32px 0;
  }
  .slide[data-stage="6"] .lede{ margin-left:auto; margin-right:auto; }

  .features{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 30px;
  }
  .features.single{ grid-template-columns: 1fr; }
  .features.triple{ grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width: 900px){ .features, .features.triple{ grid-template-columns: 1fr; } }

  .feature{
    background: var(--panel);
    padding: 18px 20px;
  }
  .feature .flabel{
    font-size: clamp(14.5px, 1.15vw, 16.5px);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 7px 0;
    display:flex; align-items:center; gap:8px;
  }
  .feature .flabel::before{
    content:"";
    width:6px; height:6px;
    background: var(--brass);
    display:inline-block;
    border-radius:1px;
  }
  .feature .fbody{
    font-size: clamp(13.5px, 1vw, 15px);
    line-height:1.55;
    color: var(--text-mid);
    margin:0;
  }

  .closing{
    display:flex; align-items:flex-start; gap:14px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    max-width: 46ch;
  }
  .slide[data-stage="6"] .closing{ margin: 0 auto; }
  .closing .bar{ width:2px; align-self:stretch; background: var(--intel); flex-shrink:0; margin-top:3px; }
  .closing p{
    font-family:'Space Grotesk', sans-serif;
    font-size: clamp(17px, 1.3vw, 19px);
    line-height:1.5;
    color: var(--text);
    margin:0;
    font-weight:600;
  }

  .aihint{
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--text-dim);
    font-family:'IBM Plex Mono', monospace;
    line-height:1.6;
    max-width: 46ch;
  }
  .aihint b{ color: var(--intel); font-weight:500; }

  /* final slide */
  .final-caps{
    font-family:'IBM Plex Mono', monospace;
    font-size:14.5px; letter-spacing:.08em; color: var(--text-mid);
    margin: 26px 0 34px 0;
  }
  .final-caps b{ color: var(--brass); font-weight:500; }
  .rrre{
    display:flex; gap: 0; margin: 6px 0 40px 0;
    border: 1px solid var(--line);
  }
  .rrre div{
    flex:1; padding: 20px 14px; border-left:1px solid var(--line);
    text-align:left;
  }
  .rrre div:first-child{ border-left:none; }
  .rrre .k{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(16px,1.3vw,18px); margin-bottom:7px; }
  .rrre .v{ font-size:clamp(13px,1vw,14.5px); color: var(--text-mid); line-height:1.5; }
  @media (max-width: 900px){ .rrre{ flex-direction:column; } .rrre div{ border-left:none; border-top:1px solid var(--line); } .rrre div:first-child{ border-top:none; } }

  .cta{
    display:inline-flex; align-items:center; gap:12px;
    padding: 15px 30px;
    border: 1px solid var(--brass-dim);
    color: var(--text);
    text-decoration:none;
    font-family:'Space Grotesk', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing:.01em;
    background: linear-gradient(180deg, rgba(199,154,86,.08), transparent);
    transition: border-color .3s ease, background .3s ease;
  }
  .cta:hover{ border-color: var(--brass); background: rgba(199,154,86,.12); }
  .cta .dot{ width:6px; height:6px; background: var(--intel); border-radius:50%; }

  .sitelinks{
    margin-top: 18px;
    font-family:'IBM Plex Mono', monospace;
    font-size: 12.5px;
    color: var(--text-faint);
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .sitelinks a{ color: var(--text-dim); text-decoration:none; border-bottom:1px solid var(--line); transition: color .25s ease, border-color .25s ease; }
  .sitelinks a:hover{ color: var(--intel); border-color: var(--intel); }

  /* ---------- Wheel visual ---------- */
  .wheelstage{
    position:relative;
    height: 100%;
    display:flex; align-items:center; justify-content:center;
  }
  .slide[data-stage="6"] .wheelstage{ position:absolute; inset:0; z-index:0; opacity:.9; }
  .slide[data-stage="6"] .slide-inner{ position:relative; z-index:1; }

  #wheelSvg{
    width: min(46vw, 560px);
    height: auto;
    overflow: visible;
  }
  @media (max-width: 900px){
    .slide-inner{ grid-template-columns: 1fr; }
    .wheelstage{ height: 30vh; order:-1; flex-shrink:0; }
    #wheelSvg{ width: min(60vw, 300px); }
    h1{ max-width: none; }

    .slide{
      align-items: flex-start;
      display: block;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      padding: calc(96px + env(safe-area-inset-top)) 6vw calc(120px + env(safe-area-inset-bottom));
    }
    .slide-inner{
      min-height: 100%;
      align-content: start;
    }
    .slide[data-stage="6"] .wheelstage{ position:fixed; }
  }

  @media (max-width: 480px){
    .slide{ padding: calc(84px + env(safe-area-inset-top)) 6vw calc(128px + env(safe-area-inset-bottom)); }
    .wheelstage{ height: 24vh; }
  }

  .wheel-rotate{
    transform-origin: 300px 300px;
    animation: spin 90s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .wheel-rotate{ animation: none; }
  }

  #wheelSvg[data-stage="1"] .wheel-rotate{ animation-duration: 90s; }
  #wheelSvg[data-stage="2"] .wheel-rotate{ animation-duration: 80s; }
  #wheelSvg[data-stage="3"] .wheel-rotate{ animation-duration: 70s; }
  #wheelSvg[data-stage="4"] .wheel-rotate{ animation-duration: 55s; }
  #wheelSvg[data-stage="5"] .wheel-rotate{ animation-duration: 34s; }
  #wheelSvg[data-stage="6"] .wheel-rotate{ animation-duration: 20s; }

  .g-teeth, .g-ringintel, .g-nodes, .g-pulse, .g-arcs, .g-glowends{
    opacity: 0;
    transition: opacity 1.1s ease, transform 1.1s ease;
  }
  .g-teeth{ transform-origin: 300px 300px; }

  #wheelSvg[data-stage="1"] .g-teeth{ opacity: 1; }
  #wheelSvg[data-stage="2"] .g-teeth{ opacity: 1; }
  #wheelSvg[data-stage="3"] .g-teeth{ opacity: 1; }
  #wheelSvg[data-stage="4"] .g-teeth,
  #wheelSvg[data-stage="5"] .g-teeth,
  #wheelSvg[data-stage="6"] .g-teeth{ opacity: 0; transform: scale(1.22); }

  #wheelSvg[data-stage="2"] .g-ringintel,
  #wheelSvg[data-stage="3"] .g-ringintel,
  #wheelSvg[data-stage="4"] .g-ringintel,
  #wheelSvg[data-stage="5"] .g-ringintel,
  #wheelSvg[data-stage="6"] .g-ringintel{ opacity: 1; }

  #wheelSvg[data-stage="3"] .g-nodes,
  #wheelSvg[data-stage="4"] .g-nodes,
  #wheelSvg[data-stage="5"] .g-nodes,
  #wheelSvg[data-stage="6"] .g-nodes{ opacity: 1; }

  #wheelSvg[data-stage="3"] .g-pulse,
  #wheelSvg[data-stage="4"] .g-pulse,
  #wheelSvg[data-stage="5"] .g-pulse,
  #wheelSvg[data-stage="6"] .g-pulse{ opacity: 1; }

  #wheelSvg[data-stage="5"] .g-arcs,
  #wheelSvg[data-stage="6"] .g-arcs{ opacity: 1; }

  #wheelSvg[data-stage="6"] .g-glowends{ opacity: 1; }

  #wheelSvg .rim, #wheelSvg .spoke{ transition: stroke .9s ease, stroke-width .9s ease; }
  #wheelSvg[data-stage="6"] .rim{ stroke: var(--intel); stroke-width: 1.6; }
  #wheelSvg[data-stage="6"] .spoke{ stroke: var(--steel); stroke-width: 1.4; }
  #wheelSvg[data-stage="4"] .spoke, #wheelSvg[data-stage="5"] .spoke{ stroke-width: 2; }

  .arc-line{ animation: dashmove 5.5s linear infinite; }
  .arc-line.slow{ animation-duration: 9s; animation-direction: reverse; }
  @keyframes dashmove{ to{ stroke-dashoffset: -400; } }
  @media (prefers-reduced-motion: reduce){ .arc-line{ animation:none; } }

  .pulse-core{ animation: pulse 3.2s ease-in-out infinite; transform-origin: 300px 300px; }
  @keyframes pulse{ 0%,100%{ opacity:.18; transform:scale(1);} 50%{ opacity:.42; transform:scale(1.12);} }
  @media (prefers-reduced-motion: reduce){ .pulse-core{ animation:none; } }

  /* ---------- Nav ---------- */
  .navdots{
    position:fixed; right: 40px; top:50%; transform:translateY(-50%);
    z-index:20; display:flex; flex-direction:column; gap:16px;
  }
  .navdots button{
    width:9px; height:9px; border-radius:50%;
    border:1px solid var(--steel-dim);
    background:transparent; cursor:pointer; padding:0;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
    position:relative;
  }
  .navdots button::before{
    content:"";
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:34px; height:34px; /* larger invisible touch target, same visual dot */
  }
  .navdots button.active{ background: var(--intel); border-color: var(--intel); transform:scale(1.3); }

  .navarrows{
    position:fixed; left:0; right:0; bottom: 30px;
    z-index:20;
    display:flex; align-items:center; justify-content:center; gap:22px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .navarrows button{
    background:none; border:1px solid var(--line); color: var(--text-dim);
    width:38px; height:38px; border-radius:50%;
    cursor:pointer; font-size:15px;
    display:flex; align-items:center; justify-content:center;
    transition: border-color .3s ease, color .3s ease;
  }
  .navarrows button:hover:not(:disabled){ border-color: var(--brass); color: var(--text); }
  .navarrows button:disabled{ opacity:.25; cursor:default; }
  .navarrows .counter{
    font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-faint);
    min-width:52px; text-align:center;
  }

  @media (max-width: 760px){
    /* Dots move to a horizontal row above the arrows so they don't sit over
       the wheel graphic or text, and stay reachable with a thumb. */
    .navdots{
      right:auto; top:auto; transform:none;
      left:0; bottom: calc(78px + env(safe-area-inset-bottom));
      width:100%;
      flex-direction:row; justify-content:center; gap:14px;
    }
    .navarrows{ bottom: calc(20px + env(safe-area-inset-bottom)); }
  }

  .progressline{
    position:fixed; left:0; top:0; height:2px; background: var(--intel);
    z-index:21; transition: width .7s cubic-bezier(.22,.61,.36,1);
    width: 16.6667%;
  }
  body[data-stage="1"] .progressline{ width: 16.6667%; }
  body[data-stage="2"] .progressline{ width: 33.3333%; }
  body[data-stage="3"] .progressline{ width: 50%; }
  body[data-stage="4"] .progressline{ width: 66.6667%; }
  body[data-stage="5"] .progressline{ width: 83.3333%; }
  body[data-stage="6"] .progressline{ width: 100%; }

  .skiplink{ position:absolute; left:-999px; }
  .skiplink:focus{ left: 12px; top:12px; background:#fff; color:#000; padding:6px 10px; z-index:100; }