:root{
  --bg:#10242d; --bg2:#173540; --text:#eaf2f1; --muted:#9db4b6;
  --med:#ff7a8a; --eng:#f5b23e; --agr:#9ad55c;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{width:100vw;height:100vh;height:100dvh;overflow:hidden}
body{width:100vw;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,var(--bg2),var(--bg) 60%);color:var(--text);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0}
main{position:relative;z-index:1;width:100vw;height:100vh;height:100dvh;padding:clamp(14px,3vh,36px) max(clamp(20px,4vw,40px),calc((100vw - 1080px)/2));display:flex;flex-direction:column;justify-content:space-between;gap:clamp(8px,2vh,40px);overflow:hidden}

.brand{display:flex;justify-content:center;align-items:center;gap:12px;font-weight:500;color:var(--muted)}
.mark{display:flex;gap:4px;align-items:flex-end;height:22px}
.mark i{width:6px;border-radius:3px;animation:grow 2.4s ease-in-out infinite}
.mark i:nth-child(1){background:var(--med);height:100%}
.mark i:nth-child(2){background:var(--eng);height:60%;animation-delay:.3s}
.mark i:nth-child(3){background:var(--agr);height:80%;animation-delay:.6s}
@keyframes grow{50%{transform:scaleY(.55);transform-origin:bottom}}

.status{display:inline-flex;justify-content:center;align-items:center;gap:10px;font-size:.95rem;font-weight:600;color:var(--eng);margin-bottom:clamp(8px,2vh,20px)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--eng);box-shadow:0 0 0 0 rgba(245,178,62,.6);animation:ping 1.8s infinite}
@keyframes ping{to{box-shadow:0 0 0 14px rgba(245,178,62,0)}}

h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,min(7.6vw,10.5vh),5.6rem);line-height:1.02;letter-spacing:-.02em}
h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
h1 .line>*,h1 .line{will-change:transform}
h1 em{font-style:italic;font-weight:600}
.med{color:var(--med)} .eng{color:var(--eng)} .agr{color:var(--agr)}
.js h1 .line{transform:translateY(105%);opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.js h1 .line:nth-child(2){animation-delay:.15s}
.js h1 .line:nth-child(3){animation-delay:.3s}
.js h1 .line:nth-child(4){animation-delay:.45s}
@keyframes rise{to{transform:none;opacity:1}}

.lead{max-width:56ch;margin-left:auto;margin-right:auto;margin-top:clamp(10px,2.2vh,24px);color:var(--muted);font-size:1.1rem}

.progress{display:flex;align-items:center;gap:16px;max-width:520px;margin:clamp(14px,3.4vh,36px) auto 0}
.bar{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.bar span{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--med),var(--eng),var(--agr));transition:width 2.2s cubic-bezier(.2,.8,.2,1)}
output{font-variant-numeric:tabular-nums;font-weight:600;min-width:3.5ch}

.countdown{display:flex;justify-content:center;gap:clamp(16px,4vw,36px);margin-top:clamp(12px,3vh,32px)}
.countdown div{text-align:center}
.countdown b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,min(5vw,6vh),3rem);line-height:1;font-variant-numeric:tabular-nums}
.countdown small{color:var(--muted);font-size:.85rem}
.countdown b.tick{animation:tick .4s ease}
@keyframes tick{from{transform:translateY(-35%);opacity:0}}


footer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px 24px;color:var(--muted);font-size:.9rem}
.fields{list-style:none;padding:0;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.fields li{display:flex;align-items:center;gap:8px}
.fields li::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js h1 .line{transform:none;opacity:1}
}

/* Fit exactly one screen: tighten on short viewports */
.hero{min-height:0;text-align:center;margin:auto 0}
@media (max-height:700px){.lead{display:none}}
@media (max-height:520px){.progress{display:none}footer p{display:none}}