/* ============================================================
   TRADERATE — coming-soon.css
   Page-specific styles for index.html (coming soon page)
   Requires: shared.css, marketing.css
   ============================================================ */


/* ── MAIN — centred flex column ─────────────────────────────── */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}


/* ── HERO HEADLINE ──────────────────────────────────────────── */
h1 {
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--text-1);
    margin-bottom: 20px;
    max-width: 720px;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.25s forwards;
}
h1 em { font-style: normal; color: var(--accent); }


/* ── SUBHEADING ─────────────────────────────────────────────── */
.sub {
    font-size: 1.05rem;
    color: var(--text-2);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 48px;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.4s forwards;
}


/* ── PILLS — animated on this page ─────────────────────────── */
.pills {
    opacity: 0;
    animation: fadeUp 0.5s ease 0.55s forwards;
}


/* ── NOTIFY WRAP — animated ─────────────────────────────────── */
.notify-wrap {
    opacity: 0;
    animation: fadeUp 0.5s ease 0.7s forwards;
}


/* ── COUNTDOWN WRAP — animated ──────────────────────────────── */
.countdown-wrap {
    opacity: 0;
    animation: fadeUp 0.5s ease 0.85s forwards;
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    main { padding: 48px 16px 60px; }
}