*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#06090D;overflow:hidden;overscroll-behavior:none}
:root{--ink:#E9E4D8;--void:#06090D;--cyan:#4FD8E0;--heat:#EAFEFF;--mid:#8FE9EF;--deep:#23B4C6;--metal:#121a1f;--dim:#7c8791}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--dim);font-weight:400}

.loader{position:fixed;inset:0;display:grid;place-items:center;background:#06090D;z-index:30;transition:opacity .7s ease}
.loader .mono{font-size:13px;color:var(--ink);letter-spacing:.24em}
.loader-core{position:relative;width:220px;height:220px;display:grid;place-items:center}
#loader-ring{position:absolute;inset:0}
#loader-ring span{position:absolute;left:50%;top:50%;font-family:"JetBrains Mono",monospace;font-size:13px;color:rgba(79,216,224,.13);transform:rotate(var(--a)) translateY(-96px);transform-origin:0 0;transition:color .3s,text-shadow .3s}
#loader-ring span.lit{color:var(--cyan);text-shadow:0 0 12px rgba(79,216,224,.58)}

.ui{position:fixed;inset:0;z-index:10;pointer-events:none;padding:26px 34px}
.ui a{pointer-events:auto;cursor:none}
.topbar{position:absolute;top:26px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center}
.topbar nav{display:flex;gap:22px}
.topbar a{color:var(--dim);text-decoration:none;transition:color .25s,text-shadow .25s}
.topbar a:hover{color:var(--cyan);text-shadow:0 0 16px rgba(79,216,224,.45)}
.botbar{position:absolute;bottom:26px;left:34px;right:34px;display:flex;justify-content:space-between}

.station{position:absolute;opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .7s;pointer-events:none}
.station.is-on{opacity:1;transform:translateY(0)}
.station.is-on a{pointer-events:auto}
/* left-anchored narrative stations share the same vertical band; only one is-on at a time */
.st-hero,.st-services,.st-pricing,.st-proof{left:34px;top:50%;transform:translateY(calc(-50% + 26px));max-width:44vw}
.st-hero.is-on,.st-services.is-on,.st-pricing.is-on,.st-proof.is-on{transform:translateY(-50%)}
.st-proof{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:min(430px,46vw)}

.kicker{margin-bottom:18px;color:var(--cyan)}
.headline,.h2{font-family:"Fraunces",Georgia,serif;font-weight:340;color:var(--ink);letter-spacing:0;line-height:.98;text-shadow:0 2px 60px rgba(6,9,13,.92),0 1px 14px rgba(6,9,13,.85)}
.headline{font-size:clamp(52px,7.5vw,120px)}
.h2{font-size:clamp(32px,4.2vw,66px)}
.headline .ch{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.station.is-on .headline .ch{opacity:1;transform:translateY(0)}
.sub{margin-top:20px;letter-spacing:.12em;color:#9aa4ac;line-height:1.8;text-shadow:0 1px 16px rgba(6,9,13,.9)}
.st-proof .sub{margin-top:0}

.q{font-family:"Fraunces",Georgia,serif;font-weight:340;font-style:italic;font-size:clamp(15px,1.5vw,19px);line-height:1.5;color:var(--ink);max-width:400px;text-shadow:0 1px 20px rgba(6,9,13,.9)}
.q .qa{display:block;margin-top:7px;font-style:normal;color:var(--mid);font-size:10px}
.finale-micro{color:var(--dim);text-transform:none;letter-spacing:.05em;font-size:11px;margin-top:2px}

.dim{position:absolute;min-width:112px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;will-change:left,top,opacity}
.dim.is-on{opacity:1;transform:translateY(0)}
.dim i{display:block;position:relative;height:1px;background:rgba(79,216,224,.55);box-shadow:0 0 10px rgba(79,216,224,.2)}
.dim i:before,.dim i:after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:rgba(79,216,224,.65)}
.dim i:before{left:0}.dim i:after{right:0}
.dim span{display:block;margin-top:8px;color:rgba(79,216,224,.78);font-size:10px;letter-spacing:.14em;text-shadow:0 0 12px rgba(79,216,224,.28)}

/* in-world card labels — projected onto docked 3D panels (positioned + faded by JS) */
.card-label{position:absolute;left:0;top:0;opacity:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;max-width:240px;pointer-events:none;will-change:transform,opacity}
.card-label .cl-nm{font-family:"Fraunces",Georgia,serif;font-weight:360;font-size:20px;line-height:1.05;color:var(--ink);text-shadow:0 1px 18px rgba(6,9,13,.95),0 0 30px rgba(6,9,13,.7)}
.card-label .cl-ds{margin-top:5px;font-size:9.5px;letter-spacing:.14em;color:var(--mid);text-shadow:0 1px 12px rgba(6,9,13,.95)}
.card-label.price .cl-pr{font-size:14px;letter-spacing:.1em;color:var(--heat);text-shadow:0 0 20px rgba(143,233,239,.45),0 1px 12px rgba(6,9,13,.95)}
.card-label.price .cl-pr b{color:var(--ink);font-weight:500}
.card-label.proof{align-items:center;text-align:center;max-width:280px}
.card-label.proof .cl-nm{font-size:23px}
.card-label.proof .cl-ds{color:var(--cyan);margin-top:6px}

.pill{display:inline-block;color:#04121a;background:linear-gradient(135deg,var(--heat),var(--mid));padding:15px 20px;text-decoration:none;letter-spacing:.13em;font-weight:500;border-radius:999px;box-shadow:0 0 40px rgba(143,233,239,.28);transition:transform .2s,box-shadow .3s;will-change:transform;white-space:normal;line-height:1.35}
.pill:hover{box-shadow:0 0 70px rgba(143,233,239,.5)}

#cursor-dot,#cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:40;border-radius:50%}
#cursor-dot{width:6px;height:6px;background:var(--heat);transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(143,233,239,.6)}
#cursor-ring{width:28px;height:28px;border:1px solid rgba(233,228,216,.35);transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s}
body.cursor-hot #cursor-ring{width:44px;height:44px;border-color:var(--mid)}
.static-fallback{min-height:100%;padding:42px;color:var(--ink);background:#06090D}
.static-fallback h1{font-family:"Fraunces",Georgia,serif;font-size:48px;font-weight:340;margin:18px 0}
.static-fallback a{color:var(--mid)}

@media (pointer:coarse){#cursor-dot,#cursor-ring{display:none}.ui a{cursor:auto}}
@media (max-width:860px){
  .ui{padding:20px}
  .topbar{left:20px;right:20px;top:20px}
  .topbar nav{gap:12px}
  .st-hero,.st-services,.st-pricing,.st-proof{left:20px;max-width:88vw}
  .headline{font-size:clamp(46px,13vw,82px)}
  .card-label{max-width:180px}
  .card-label .cl-nm{font-size:16px}
  .dim{display:none}
  .botbar{left:20px;right:20px;bottom:20px}
}