/* v4 – fixes: progress width lock + rising agents */
:root{--gold:#d7b46a;--text:#f3f5f7;--muted:#a9b0bd}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom,0)}
.bg{position:fixed;inset:0;z-index:-3;background:url('gs-sky-golden.jpg') center/cover no-repeat;filter:saturate(115%) contrast(105%) brightness(92%);animation:bg-drift 36s ease-in-out infinite;transform:translateZ(0)}
@keyframes bg-drift{0%,100%{transform:scale(1.04) translateY(0)}50%{transform:scale(1.1) translateY(-1.5%)}}
.twinkle{position:fixed;inset:0;z-index:-2;pointer-events:none}
/* Rising gold agents */
.agents{position:fixed;inset:0;pointer-events:none;z-index:-1}
.agent{position:absolute;bottom:-3vh;width:8px;height:8px;border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #fff, #ffffff00 60%), radial-gradient(circle at 60% 60%, var(--gold), #ffffff00 70%);
  box-shadow: 0 0 16px rgba(215,180,106,.65), 0 0 50px rgba(215,180,106,.25); opacity:.0; animation: rise var(--dur) ease-in infinite var(--delay)}
.a1{left:9% ;--dur:9s; --delay:0s}.a2{left:18%;--dur:6s; --delay:1s}.a3{left:27%;--dur:3s; --delay:2s}
.a4{left:36%;--dur:6s; --delay:1.5s}.a5{left:50%;--dur:9s; --delay:.5s}.a6{left:64%;--dur:3s; --delay:2.5s}
.a7{left:73%;--dur:6s; --delay:.8s}.a8{left:82%;--dur:9s; --delay:1.8s}.a9{left:91%;--dur:3s; --delay:.2s}
@keyframes rise{0%{transform:translateY(0) scale(.9);opacity:0}12%{opacity:.95}70%{transform:translateY(-60vh) scale(1.05)}100%{transform:translateY(-80vh) scale(1.12);opacity:0}}

header{position:sticky;top:0;z-index:5;display:flex;justify-content:center;align-items:center;padding:clamp(12px,2.2vw,20px) clamp(12px,3vw,24px);text-shadow:0 2px 10px rgba(0,0,0,.45)}
.gs-logo{height:clamp(67px,6vw,64px);width:auto;filter:drop-shadow(0 8px 24px rgba(215,180,106,.28))}

main{min-height:100svh;display:grid;place-items:center;padding:clamp(16px,3vw,28px)}
.card{width:min(960px,92vw);background:rgba(0,0,0,.42);backdrop-filter:blur(4px) saturate(120%);border-radius:clamp(14px,2.2vw,24px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04)}
.inner{padding:clamp(20px,4.2vw,44px) clamp(16px,4vw,36px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(12px,2.4vw,22px)}
.brand-logo-wrap{display:grid;place-items:center;width:clamp(314px,18vw,190px);height:clamp(86px,18vw,190px);border-radius:clamp(16px,3vw,28px);border:1px solid rgba(215,180,106,.28);background:radial-gradient(190px 190px at 50% 40%, rgba(215,180,106,.14), rgba(255,255,255,.02))}
.brand-logo{max-width:95%;max-height:66%}

.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:clamp(10px,1.4vw,12px);color:var(--muted)}.kicker.compact{opacity:.85}
h1{margin:4px 0 0;line-height:1.15;font-size:clamp(24px,5vw,44px);background:linear-gradient(90deg,var(--gold),#f3e6c2 40%,var(--gold) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 14px rgba(215,180,106,.12)}
.lead{max-width:70ch;margin:2px auto 0;font-size:clamp(15px,2.6vw,19px);color:#e6e9ef}
.divider{width:clamp(140px,28vw,220px);height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.85}

/* Metrics block: countdown + progress share same width; centered */
#metrics{display:grid;justify-items:center;gap:clamp(8px,2vw,12px)}
.countdown{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,2vw,16px)}
.tile{min-width:clamp(72px,18vw,110px);padding:clamp(10px,2.6vw,14px) clamp(12px,3vw,16px);border-radius:clamp(10px,2vw,18px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tile strong{display:block;font-size:clamp(20px,5.4vw,34px);background:linear-gradient(90deg,var(--gold),#ffeebd);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.tile span{display:block;font-size:clamp(10px,2.4vw,12px);color:var(--muted);letter-spacing:.12em;text-transform:uppercase}

/* Progress matches countdown width via JS; prevent overflow */
.progress{width:auto}
.bar{width:100%;max-width:100%;height:clamp(10px,2.6vw,12px);border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);overflow:hidden;box-sizing:border-box}
.bar>span{display:block;height:100%;width:42%;background:linear-gradient(90deg,rgba(215,180,106,.18),rgba(215,180,106,.65));box-shadow:inset 0 0 12px rgba(215,180,106,.35);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}

footer{position:relative;padding:clamp(12px,2.2vw,20px);text-align:center;color:var(--muted);font-size:clamp(12px,2.6vw,13px);text-shadow:0 2px 10px rgba(0,0,0,.45)}
footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}