:root{--bg:#0f0f11;--ink:#f4f1ea;--sub:rgba(244,241,234,.62);--accent:#FFC814;--btn:#ffffff;--btn-ink:#111;--wait:3600ms}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
.stage{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4svh,34px);padding:calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 84px);text-align:center;isolation:isolate}
.visual{position:relative;width:min(88vw,420px);height:min(40svh,340px);display:flex;align-items:center;justify-content:center}
.copy{max-width:560px;display:flex;flex-direction:column;align-items:center}
.kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:600;opacity:0;animation:rise .7s cubic-bezier(.2,.8,.2,1) .15s forwards}
h1{font-size:clamp(38px,9vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:10px 0 12px;opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) .28s forwards}
.sub{color:var(--sub);font-size:clamp(16px,4.2vw,19px);max-width:30ch;opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) .42s forwards}
.go{margin-top:26px;display:inline-flex;align-items:center;gap:14px;padding:10px 10px 10px 24px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-weight:700;font-size:16px;box-shadow:0 14px 40px rgba(0,0,0,.35);opacity:0;animation:rise .8s cubic-bezier(.2,.8,.2,1) .56s forwards;transition:transform .2s}
.go:active{transform:scale(.97)}
.dial{position:relative;width:40px;height:40px;display:grid;place-items:center}
.dial i{font-style:normal;font-size:18px;line-height:1}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:125.7;stroke-dashoffset:125.7;opacity:.9}
html.ready .ring circle{animation:ring var(--wait) linear forwards}
.ring .track{stroke-dasharray:none;stroke-dashoffset:0;opacity:.15;animation:none!important}
.hint{margin-top:14px;font-size:13px;color:var(--sub);opacity:0;animation:rise .8s ease .9s forwards}
.sig{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 18px);display:flex;justify-content:center;z-index:5}
.sig a{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.3em;font-weight:700;color:var(--sub)}
.sig svg{width:22px;height:13.6px}
html.leaving body{animation:leave .24s ease forwards}
html.preview .ring circle{animation:none;stroke-dashoffset:0}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ring{to{stroke-dashoffset:0}}
@keyframes leave{to{opacity:0;transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}