:root { --paper:#f5f2ed; --ink:#18211f; --forest:#24443c; --lime:#d7f54a; --muted:#64716d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
.hero { min-height:calc(100vh - 3.1rem); padding:1.5rem; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(130deg,#f5f2ed 0 63%,#d8e6c8 63%); }
.hero::before { content:""; position:absolute; width:min(72vw,52rem); aspect-ratio:1; right:-19rem; bottom:-28rem; border:2.5rem solid var(--lime); border-radius:50%; opacity:.85; }
.brand { position:absolute; top:1.7rem; left:1.8rem; margin:0; color:var(--forest); font-weight:800; font-size:.85rem; letter-spacing:.09em; text-transform:uppercase; }
.age-badge { position:absolute; top:1.35rem; right:1.5rem; display:flex; align-items:center; gap:.45rem; padding:.38rem .6rem; border:1px solid var(--forest); border-radius:999px; color:var(--forest); background:var(--paper); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.age-badge strong { display:grid; place-content:center; width:1.45rem; aspect-ratio:1; border-radius:50%; background:var(--forest); color:white; font-size:.68rem; }
.wait-card { width:min(100%,35rem); position:relative; z-index:1; padding:clamp(2rem,6vw,4.8rem); border-radius:1.2rem; background:#fff; box-shadow:0 1.25rem 3.5rem rgba(24,33,31,.12); text-align:left; }
.eyebrow { margin:0 0 1rem; color:var(--forest); font-size:.72rem; letter-spacing:.1em; font-weight:800; text-transform:uppercase; }
.live-dot { display:inline-block; width:.55rem; height:.55rem; margin-right:.4rem; border-radius:50%; background:var(--lime); box-shadow:0 0 0 .18rem #eaf7ac; }
h1 { max-width:10ch; margin:0; font-family:Georgia,serif; font-size:clamp(3.25rem,8vw,5.6rem); font-weight:400; line-height:.92; letter-spacing:-.06em; }
h1 em { color:var(--forest); }
.intro { max-width:29rem; margin:1.5rem 0 2rem; color:var(--muted); line-height:1.55; }
.timer-ring { width:7.2rem; aspect-ratio:1; display:grid; place-content:center; margin:0 0 1rem; border-radius:1.3rem; background:var(--forest); color:white; text-align:center; transform:rotate(-5deg); }
.timer-ring strong { font-size:3rem; line-height:.9; transform:rotate(5deg); }
.timer-ring span { margin-top:.25rem; font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transform:rotate(5deg); }
.status { margin:0 0 1.5rem; color:var(--muted); font-size:.82rem; }
.button { display:inline-block; padding:1rem 1.25rem; border-radius:.55rem; background:var(--lime); color:var(--ink); font-weight:800; text-decoration:none; transition:transform .15s ease; }
.button:hover { transform:translateY(-2px); }
.note { margin:1rem 0 0; color:var(--muted); font-size:.73rem; }
footer { padding:.95rem; background:var(--forest); color:#d9e7de; text-align:center; font-size:.72rem; }
@media(max-width:40rem) { .hero { padding:1rem; } .brand { top:1.1rem; left:1.1rem; } .age-badge { top:1rem; right:1rem; } .wait-card { padding:2.2rem 1.6rem; } }