* { box-sizing: border-box; }

:root {
    --yellow: #ffd54f;
    --yellow-accent: #ffc400;
    --bg: #fffdf7;
    --ink: #1a1400;
    --ink-light: #4b4538;
    --radius: 18px;
    --focus: 0 0 0 3px #1a1400, 0 0 0 5px var(--yellow-accent);
        font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}
.skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; padding: 8px 14px; background: var(--ink); color: #fff; border-radius: 6px; z-index: 1000; }

.site-header {
    text-align: center;
    padding: clamp(1.75rem,5vw,3rem) 1.25rem 1.25rem;
    background: linear-gradient(180deg,var(--yellow) 0%, var(--yellow-accent) 90%);
    color: #1a1400;
    position: relative;
    overflow: hidden;
}

.logo-wrap { display: flex; gap: .6rem; align-items: center; justify-content: center; }
.logo-icon { font-size: clamp(2.2rem,7vw,3.2rem); filter: drop-shadow(0 3px 3px rgba(0,0,0,.15)); }
.brand { font-size: clamp(2.1rem,8vw,3.4rem); margin: 0; font-weight: 700; letter-spacing: -.5px; }

.tagline { margin: .35rem 0 0; font-weight: 500; font-size: clamp(.95rem,3.5vw,1.1rem); }

.hero { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem 1.25rem 2.5rem; }
.hero-inner { width: 100%; max-width: 820px; margin-inline: auto; text-align: center; }

.coming { font-size: clamp(1.9rem,7.5vw,3.15rem); margin: 0 0 .75rem; line-height: 1.15; letter-spacing: -.5px; }
.lead { font-size: clamp(1.02rem,4.2vw,1.25rem); margin: 0 0 1.9rem; color: var(--ink-light); font-weight: 500; }

.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; max-width: 560px; margin: 0 auto 2rem; }
.countdown .time { background: #fff; padding: .85rem .5rem .95rem; border-radius: var(--radius); box-shadow: 0 4px 10px -2px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.06); position: relative; }
.countdown span { display: block; font-size: clamp(1.45rem,6vw,2.2rem); font-weight: 600; line-height: 1; }
.countdown small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; font-weight: 600; }

@media (max-width: 460px){
    .countdown { grid-template-columns: repeat(2,1fr); }
}

.notify-form { background: #fff; padding: 1.25rem 1.1rem 1.75rem; border-radius: calc(var(--radius) + 2px); box-shadow: 0 6px 18px -4px rgba(0,0,0,.12), 0 3px 8px -2px rgba(0,0,0,.08); max-width: 640px; margin: 0 auto 2.2rem; }
.notify-form .form-title { margin: 0 0 .85rem; font-size: 1.15rem; }
.form-row { display: flex; gap: .6rem; }
.form-row input { flex: 1; padding: .85rem .95rem; font: inherit; border: 2px solid #e2d4b2; border-radius: 14px; background: #fffaf0; transition: border-color .2s, background .2s, box-shadow .2s; }
.form-row input:focus-visible { outline: none; border-color: var(--yellow-accent); box-shadow: var(--focus); background: #fff; }
.btn { cursor: pointer; border: none; background: var(--ink); color: #fff; padding: .85rem 1.15rem; font: inherit; font-weight: 600; border-radius: 14px; display: inline-flex; align-items: center; gap: .35rem; box-shadow: 0 4px 10px -2px rgba(0,0,0,.3); transition: transform .18s, background .25s; }
.btn:hover { background: #2a210c; }
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }

@media (max-width: 560px){
    .form-row { flex-direction: column; }
    .btn { width: 100%; justify-content: center; }
}

.privacy { margin: .75rem 0 0; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; opacity: .65; font-weight: 600; }
.form-msg { margin: .65rem 0 0; font-size: .9rem; font-weight: 500; }
.form-msg.success { color: #0a7a22; }
.form-msg.error { color: #a30d0d; }

.social { display: flex; flex-wrap: wrap; gap: .75rem 1.1rem; justify-content: center; }
.social-link { text-decoration: none; color: var(--ink); font-weight: 600; position: relative; padding: .2rem 0; }
.social-link:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.social-link:hover:after, .social-link:focus-visible:after { transform: scaleX(1); }
.social-link:focus-visible { outline: none; box-shadow: 0 2px 0 0 var(--ink); }

.site-footer { text-align: center; padding: 2.2rem 1rem 2.5rem; font-size: .85rem; color: var(--ink-light); }

/* Utility */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Motion preference */
@media (prefers-reduced-motion: reduce){
    * { animation: none !important; transition: none !important; }
}