:root{
    --teal:#22A1A9; --orange:#F5832F; --pink:#EA2E61; --green:#8EC349;
    --orange-dark:#d96c1c; --ink:#33323a; --muted:#7d7c86; --bg:#FFFDF9;
    --display:"Fredoka","Baloo 2","Quicksand",system-ui,sans-serif;
    --body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:28px 20px; position:relative; overflow-x:hidden;
    background-color:var(--bg);
    background-image:radial-gradient(rgba(34,161,169,0.05) 1.6px, transparent 1.6px);
    background-size:30px 30px;
    font-family:var(--body); color:var(--ink); -webkit-font-smoothing:antialiased;
}
.balls{position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none;}
.ball{position:absolute; border-radius:50%; opacity:.55; transform-origin:center bottom;
    animation-name:bounce; animation-iteration-count:infinite; animation-timing-function:linear;}
@keyframes bounce{
    0%{transform:translateY(var(--up)) scaleX(1) scaleY(1); animation-timing-function:cubic-bezier(.6,.04,.98,.34);}
    47%{transform:translateY(0) scaleX(1) scaleY(1);}
    50%{transform:translateY(0) scaleX(1.12) scaleY(.82);}
    53%{transform:translateY(0) scaleX(1) scaleY(1); animation-timing-function:cubic-bezier(.07,.46,.34,.96);}
    100%{transform:translateY(var(--up)) scaleX(1) scaleY(1);}
}
.wrap{position:relative; z-index:2; width:100%; max-width:600px; text-align:center;}
.stage{animation:rise .7s ease-out both;}
@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.eyebrow{display:inline-flex; align-items:center; gap:7px; background:rgba(245,131,47,.13);
    color:var(--orange-dark); font-weight:800; font-size:.78rem; letter-spacing:.06em;
    text-transform:uppercase; padding:7px 15px; border-radius:999px; margin-bottom:18px;}
    .eyebrow svg{width:15px; height:15px;}
    .logo{width:clamp(220px,62%,318px); height:auto; display:block; margin:0 auto 4px;
        animation:logoIn .9s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes logoIn{
    0%{opacity:0; transform:translateY(-38px) scale(.6);}
    60%{opacity:1; transform:translateY(7px) scale(1.04);}
    80%{transform:translateY(-3px) scale(.99);}
    100%{opacity:1; transform:translateY(0) scale(1);}
}
.headline{font-family:var(--display); font-weight:600; line-height:1.04;
    font-size:clamp(1.95rem,6vw,3rem); color:var(--teal); margin:16px 0 10px;}
.headline .pop{color:var(--orange);}
.sub{font-size:clamp(1rem,2.6vw,1.12rem); line-height:1.55; color:var(--muted);
    max-width:31rem; margin:0 auto 28px;}
.countdown{display:flex; flex-wrap:wrap; gap:clamp(8px,2.4vw,16px); justify-content:center;}
.unit{flex:0 0 auto; width:clamp(66px,19vw,102px); border-radius:20px;
    padding:clamp(12px,3vw,18px) 6px; color:#fff; box-shadow:0 6px 0 rgba(0,0,0,.12);}
.unit:nth-child(1){background:var(--teal);}
.unit:nth-child(2){background:var(--orange);}
.unit:nth-child(3){background:var(--pink);}
.unit:nth-child(4){background:var(--green);}
.num{font-family:var(--display); font-weight:600; line-height:1;
    font-size:clamp(2rem,7vw,3.1rem); text-shadow:0 2px 4px rgba(0,0,0,.18);
    display:block; transition:transform .15s ease;}
.num.tick{transform:scale(1.16);}
.lbl{display:block; margin-top:6px; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; font-size:clamp(.58rem,2vw,.7rem); color:rgba(255,255,255,.95);}
.dateline{margin-top:16px; font-weight:700; color:var(--muted); font-size:.92rem;}
.dateline strong{color:var(--pink);}
.signup{margin-top:34px; background:#fff; border:2px solid #f0ebe2; border-radius:24px;
    padding:clamp(20px,5vw,30px); box-shadow:0 14px 34px rgba(34,161,169,.09); text-align:left;}
.signup h2{font-family:var(--display); font-weight:600; text-align:center; color:var(--ink);
    font-size:clamp(1.25rem,4vw,1.5rem); margin:0 0 4px;}
.signup .note{text-align:center; color:var(--muted); font-size:.9rem; margin:0 0 22px;}
.field{margin-bottom:15px;}
.field label{display:block; font-weight:800; font-size:.8rem; color:#6b6a73; margin-bottom:6px;}
.field input{width:100%; padding:14px 16px; border:2px solid #ece7df; border-radius:14px;
    font-family:var(--body); font-size:1rem; color:var(--ink); background:#fff; transition:border-color .15s;}
.field input::placeholder{color:#bdbbc4;}
.field input:focus-visible{outline:3px solid rgba(34,161,169,.4); outline-offset:2px; border-color:var(--teal);}
.field.error input{border-color:var(--pink);}
.error-msg{color:var(--pink); font-size:.83rem; font-weight:700; margin-top:6px; min-height:1px;}
.cta{width:100%; margin-top:6px; background:var(--orange); color:#fff; border:none; cursor:pointer;
    border-radius:16px; padding:16px 22px; font-family:var(--display); font-weight:600; font-size:1.12rem;
    box-shadow:0 5px 0 var(--orange-dark);
    transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;}
.cta:hover{transform:translateY(-2px); box-shadow:0 7px 0 var(--orange-dark);}
.cta:active{transform:translateY(3px); box-shadow:0 2px 0 var(--orange-dark);}
.cta:focus-visible{outline:3px solid rgba(245,131,47,.5); outline-offset:3px;}
.success{text-align:center; padding:8px 0; animation:rise .4s ease-out both;}
.success img{width:66px; height:66px; margin:0 auto 14px; display:block; animation:logoIn .7s cubic-bezier(.34,1.56,.64,1) both;}
.success h2{font-family:var(--display); font-weight:600; color:var(--green); font-size:1.5rem; margin:0 0 8px;}
.success p{color:var(--muted); margin:0; line-height:1.5;}
.hidden{display:none;}
.footer{margin-top:30px; display:flex; align-items:center; justify-content:center; gap:8px;
    color:#a7a5af; font-size:.85rem; font-weight:600;}
.footer img{width:22px; height:22px;}
.ball--sm{display:block;}
@media (max-width:560px){ .ball--sm{display:none;} .unit{box-shadow:0 5px 0 rgba(0,0,0,.12);} }
@media (prefers-reduced-motion:reduce){
    .ball,.logo,.stage,.success,.success img{animation:none !important;}
    .cta,.num{transition:none !important;}
}