:root{
  --bg:#090a0c;--ink:#e9ece9;--muted:#80897f;--accent:#8fc2b4;--line:rgba(255,255,255,.1);
  /* display font: swap the value to compare — 'Space Grotesk' (current), 'Bricolage Grotesque', 'Unbounded', 'Syne' */
  --display-font:'Orbitron';
  /* rail fill color: swap to compare — var(--accent) teal, #e8b86d amber, #b9a0ff violet, #e9ece9 white */
  --rail-color:var(--accent);
  /* heading color: swap to compare — var(--ink) off-white (default), #f1e6d2 warm cream, #d8ecff cool icy blue */
  --heading-color:#d8ecff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'Inter',Arial,sans-serif}
a{color:inherit}
.stage{position:fixed;inset:0;cursor:pointer;z-index:0}
canvas,.shade{position:absolute;inset:0;width:100%;height:100%}
.shade{background:linear-gradient(0deg,#05070794,transparent 46%),linear-gradient(100deg,#05070755,transparent 60%);pointer-events:none}
.sweep{position:absolute;left:0;right:0;top:-40%;height:35%;background:linear-gradient(180deg,transparent,rgba(143,194,180,.1),transparent);pointer-events:none;animation:sweep 8s linear infinite;mix-blend-mode:screen}
@keyframes sweep{to{top:110%}}
.brand-wrap{position:fixed;top:clamp(24px,4vh,40px);left:clamp(24px,5vw,64px);z-index:2}
.brand{position:relative;display:inline-block;font-family:'Space Grotesk',Arial,sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-decoration:none;
  background:linear-gradient(100deg,var(--ink) 30%,var(--accent) 50%,var(--ink) 70%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:background-position;
  animation:shimmer 9s ease-in-out infinite alternate;transition:transform .2s ease-out}
@keyframes shimmer{from{background-position:140% 0}to{background-position:-140% 0}}
.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 16px rgba(143,194,180,.55);opacity:.5;pointer-events:none;animation:drift ease-in-out infinite}
.p1{top:-14px;left:6%;animation-duration:7s}
.p2{top:50%;left:-20px;animation-duration:9s;animation-delay:1s}
.p3{top:130%;left:22%;animation-duration:6s;animation-delay:2s}
.p4{top:8%;left:86%;animation-duration:8s;animation-delay:.5s}
.p5{top:100%;left:102%;animation-duration:10s;animation-delay:1.5s}
.p6{top:60%;left:50%;animation-duration:7.5s;animation-delay:2.5s}
.p7{top:-20%;left:60%;animation-duration:9.5s;animation-delay:.8s}
@keyframes drift{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(10px,-14px);opacity:.85}}
.copy{position:fixed;left:clamp(24px,5vw,64px);right:clamp(24px,5vw,64px);bottom:clamp(90px,15vh,150px);max-width:1000px;z-index:1;pointer-events:none;transition:opacity .35s,transform .45s}
.copy.changing{opacity:0;transform:translateY(16px)}
h1{position:relative;font-family:var(--display-font),'Space Grotesk',Arial,sans-serif;font-weight:600;font-size:clamp(44px,7.8vw,124px);letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance;color:var(--heading-color);text-shadow:0 0 50px rgba(143,194,180,.3),0 2px 0 rgba(0,0,0,.4)}
h1::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:var(--accent);opacity:.4;pointer-events:none;filter:blur(var(--ghost-blur,10px));transition:filter .35s ease-out}
.heading-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 16px rgba(143,194,180,.5);opacity:var(--hp-opacity,0);pointer-events:none;animation:headingDrift ease-in-out infinite;transition:opacity .6s ease-out}
.hp1{top:-8%;left:4%;animation-duration:7s}
.hp2{top:50%;left:-3%;animation-duration:9s;animation-delay:1s}
.hp3{top:108%;left:26%;animation-duration:6s;animation-delay:2s}
.hp4{top:-10%;left:68%;animation-duration:8s;animation-delay:.5s}
.hp5{top:55%;left:101%;animation-duration:10s;animation-delay:1.5s}
.hp6{top:112%;left:82%;animation-duration:7.5s;animation-delay:2.5s}
@keyframes headingDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-16px)}}
.rail{position:fixed;left:50%;bottom:clamp(28px,5vh,44px);transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.rail .seg{all:unset;cursor:pointer;width:34px;height:14px;position:relative;display:flex;align-items:center}
.rail .seg:before{content:"";display:block;width:100%;height:3px;border-radius:999px;background:#ffffff28;transition:background .2s}
.rail .seg .fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:3px;width:0;border-radius:999px;background:var(--rail-color);box-shadow:0 0 8px var(--rail-color)}
.rail .seg[aria-current=true]:before{background:#ffffff40}
.rail .seg:hover:before{background:#ffffff48}
#notice{position:fixed;top:clamp(24px,4vh,40px);right:clamp(24px,5vw,64px);padding:10px 14px;background:#0b0f0fcc;border:1px solid var(--line);font-family:'Space Grotesk',Arial,sans-serif;font-size:12px;z-index:3}
.foot{position:fixed;left:clamp(24px,5vw,64px);right:clamp(24px,5vw,64px);bottom:10px;display:flex;justify-content:space-between;font-family:'Space Grotesk',Arial,sans-serif;font-size:11px;letter-spacing:.03em;color:var(--muted);z-index:2}
.foot-mail{text-decoration:none;color:var(--muted);transition:color .2s}
.foot-mail:hover{color:var(--ink)}
@media(max-width:700px){
  h1{font-size:clamp(36px,11vw,64px)}
  .copy{bottom:70px}
}
@media(prefers-reduced-motion:reduce){
  .copy{transition:none}
  .sweep{animation:none;opacity:0}
  .brand{animation:none}
  .particle{animation:none;opacity:.25}
}