:root {
    --floor: #0b1016;
    --bay: #141a24;
    --lift: #1c2433;
    --paper: #f1f4f8;
    --ticket: #ffffff;
    --ink: #111827;
    --sale: #e11d48;
    --sale-ink: #fff7f8;
    --sale-deep: #be123c;
    --cobalt: #3b82f6;
    --profit: #0d9488;
    --hush: #8b95a7;
    --line: rgba(225, 29, 72, 0.16);
    --board: var(--floor);
    --flap: var(--bay);
    --flap-2: var(--lift);
    --signal: var(--sale);
    --signal-ink: #fff7f8;
    --amazon: #ff9900;
    --ebay: #0064d2;
    --shopify: #5e8e3e;
    --muted: rgba(241, 244, 248, 0.62);
    --theme-chip: #1c2433;
    --theme-menu: #1c2433;
    --theme-ink: #eef1f6;
    --theme-line: rgba(255, 255, 255, 0.12);
    --theme-on: rgba(225, 29, 72, 0.2);
}

html { scroll-behavior: smooth; }

body.si-landing {
    margin: 0;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    background: var(--floor);
    color: #eef1f6;
    -webkit-font-smoothing: antialiased;
}

.font-display {
    font-family: 'Syne', 'Source Sans 3', sans-serif;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.font-data {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum' 1;
}

.si-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    border-bottom: 1px solid rgba(225, 29, 72, 0.14);
    background: rgba(11, 16, 22, 0.88);
    backdrop-filter: blur(18px);
}

.si-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--sale), #ff6b4a 42%, var(--cobalt));
}

.si-header .flex.items-center.space-x-2 {
    color: rgba(238, 241, 246, 0.78) !important;
}

.si-header .hover\:bg-gray-100:hover,
.si-header .hover\:bg-purple-50:hover {
    background: rgba(225, 29, 72, 0.1) !important;
}

.si-header .hover\:text-purple-600:hover,
.si-header .text-purple-600,
.si-header .text-purple-700 {
    color: var(--sale) !important;
}

.si-header .bg-purple-100 {
    background: rgba(225, 29, 72, 0.12) !important;
}

.si-announce-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(90deg, #9f1239, #e11d48 48%, #f59e0b);
    color: #fff;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.si-announce-bar:hover { filter: brightness(1.05); }

.si-announce-bar__live {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: si-pulse 1.8s ease-out infinite;
}

.si-announce-bar__stamp {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.si-announce-bar__date {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.si-launch {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.1rem 1.4rem;
    align-items: center;
    padding: 1.2rem 1.35rem;
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(225, 29, 72, 0.38);
    background:
        linear-gradient(135deg, rgba(225, 29, 72, 0.24), rgba(245, 158, 11, 0.12) 52%, rgba(59, 130, 246, 0.08)),
        #151b26;
    box-shadow: 0 22px 56px rgba(225, 29, 72, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.si-launch::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -45%;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    animation: si-shimmer 4.8s ease-in-out infinite;
    pointer-events: none;
}

.si-launch__stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: var(--sale);
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    box-shadow: 0 10px 22px rgba(225, 29, 72, 0.38);
}

.si-launch__kicker {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fbbf24;
}

.si-launch__title {
    margin-top: 0.2rem;
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.25rem, 2.6vw, 1.85rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #fff;
}

.si-launch__body {
    margin: 0.35rem 0 0;
    color: rgba(238, 241, 246, 0.68);
    font-size: 0.95rem;
}

.si-launch__date {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: clamp(1.45rem, 3.4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #fbbf24;
    text-shadow: 0 0 24px rgba(245, 158, 11, 0.35);
}

.si-announce-bar__clock {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.12rem 0.5rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
}

.si-clock {
    min-width: 16.5rem;
}

.si-clock__until {
    margin-bottom: 0.45rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fbbf24;
}

.si-clock__row {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
}

.si-clock__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
}

.si-clock__flaps {
    display: flex;
    gap: 0.18rem;
}

.si-clock__label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(238, 241, 246, 0.48);
}

.si-flap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 2.15rem;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(180deg, #2a3344 0%, #121821 52%, #0d1218 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.28);
}

.si-flap::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.si-flap__digit {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: #fff7ed;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.si-flap.is-flip .si-flap__digit {
    animation: si-flap-tick 0.28s ease;
}

@keyframes si-flap-tick {
    0% { transform: translateY(-40%); opacity: 0.35; }
    100% { transform: none; opacity: 1; }
}

@keyframes si-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes si-shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(380%); }
}

@media (max-width: 720px) {
    .si-launch {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .si-launch__stamp { width: fit-content; }
    .si-clock { min-width: 0; }
    .si-clock__row { justify-content: flex-start; flex-wrap: wrap; }
}

.btn-signal {
    background: var(--sale);
    color: #fff;
    box-shadow: 0 12px 28px rgba(225, 29, 72, 0.28);
    transition: transform .2s ease, filter .2s ease;
}

.btn-signal:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.btn-ghost {
    border: 1px solid rgba(238, 241, 246, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}

.btn-ghost:hover {
    border-color: rgba(225, 29, 72, 0.45);
    background: rgba(225, 29, 72, 0.1);
}

.hero-wash {
    background:
        radial-gradient(ellipse 48% 38% at 86% 6%, rgba(225, 29, 72, 0.18), transparent 58%),
        radial-gradient(ellipse 34% 30% at 8% 82%, rgba(59, 130, 246, 0.14), transparent 52%),
        linear-gradient(180deg, #121821 0%, var(--floor) 58%);
}

.flap-board,
.tape-board {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%),
        var(--bay);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.flap-board::before,
.tape-board::before,
.flap-board::after,
.tape-board::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    height: 10px;
    background-image: radial-gradient(circle, #0b1016 3px, transparent 3.5px);
    background-size: 14px 10px;
    background-repeat: repeat-x;
    opacity: 0.55;
    pointer-events: none;
}

.flap-board::before,
.tape-board::before { top: 6px; }

.flap-board::after,
.tape-board::after { bottom: 6px; }

.flap {
    background: linear-gradient(180deg, #222b3a 0%, #151c28 100%);
    border: 1px solid rgba(238, 241, 246, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.flap-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--sale);
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.7);
}

.section-paper {
    background: var(--paper);
    color: var(--ink);
}

.ticket {
    background: var(--ticket);
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.05);
}

.channel-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stamp-amazon { background: rgba(255, 153, 0, 0.16); color: #ffb84d; }
.stamp-ebay { background: rgba(0, 100, 210, 0.16); color: #7eb6ff; }
.stamp-shopify { background: rgba(94, 142, 62, 0.18); color: #b7d89a; }
.stamp-soon { background: rgba(13, 148, 136, 0.12); color: #0f766e; }

.soon-btn {
    width: 100%;
    border: 0;
    background: #111827;
    color: #fff;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.soon-btn:hover { background: #e11d48; }

.soon-btn--dark {
    border: 0;
    background: rgba(225, 29, 72, 0.92);
    color: #fff;
}

.soon-btn--dark:hover { background: #e11d48; }

.data-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(17, 24, 39, 0.1);
    font-size: 0.9rem;
}

.data-row:last-child { border-bottom: 0; }

.data-yes { color: var(--profit); font-weight: 650; }
.data-limited { color: #b45309; font-weight: 650; }

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-in { opacity: 1; transform: none; }

.sales-brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    text-decoration: none;
    color: inherit;
}

.sales-brand-text__title {
    font-family: 'Syne', 'Source Sans 3', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sales-brand-text__subtitle {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.72;
}

.si-legal .si-header {
    position: sticky;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .btn-signal { transition: none; }
    .reveal { opacity: 1; transform: none; }
    .btn-signal:hover { transform: none; }
    .si-announce-bar__live, .si-launch::after, .si-flap.is-flip .si-flap__digit { animation: none; }
}

[data-theme="light"] {
    --floor: #eef1f6;
    --bay: #ffffff;
    --lift: #f7f8fb;
    --paper: #ffffff;
    --ticket: #ffffff;
    --ink: #121826;
    --muted: rgba(18, 24, 38, 0.68);
    --hush: #4b5568;
    --line: rgba(18, 24, 38, 0.1);
    --theme-chip: #ffffff;
    --theme-menu: #ffffff;
    --theme-ink: #121826;
    --theme-line: rgba(18, 24, 38, 0.12);
    --theme-on: rgba(225, 29, 72, 0.1);
}
[data-theme="light"] body.si-landing {
    background: var(--floor);
    color: #111827;
}
[data-theme="light"] .si-header {
    background: rgba(244, 246, 250, 0.9);
}
[data-theme="light"] .si-header a,
[data-theme="light"] .si-header .text-white,
[data-theme="light"] .si-header .text-white\/50,
[data-theme="light"] .si-header .text-white\/65,
[data-theme="light"] .si-header .text-white\/75,
[data-theme="light"] .si-landing .font-display {
    color: #121826 !important;
}
[data-theme="light"] .si-header nav a,
[data-theme="light"] .si-header a.text-white\/65,
[data-theme="light"] .si-header a.text-white\/75 {
    color: rgba(18, 24, 38, 0.68) !important;
}
[data-theme="light"] .si-header nav a:hover,
[data-theme="light"] .si-header a:hover {
    color: #121826 !important;
}

.seo-blog {
    width: min(820px, calc(100% - 32px));
    margin: 0 auto;
    padding: 7.5rem 0 80px;
}
.seo-kicker {
    margin: 0 0 10px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal, #e11d48);
}
.seo-kicker a { color: inherit; }
.seo-blog h1 {
    margin: 0 0 14px;
    font-size: clamp(32px, 5vw, 48px);
    letter-spacing: -0.04em;
    line-height: 1.1;
}
.seo-lead, .seo-body p, .seo-body li {
    color: var(--muted, #9aa4bd);
    line-height: 1.65;
}
.seo-cards { display: grid; gap: 14px; margin-top: 28px; }
.seo-card {
    display: grid;
    gap: 8px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,0.03);
}
.seo-card strong { font-size: 1.15rem; }
.seo-card em { color: var(--signal, #e11d48); font-style: normal; font-size: 0.88rem; }
.seo-body { display: grid; gap: 14px; margin-top: 22px; }
.seo-body h2 { margin: 12px 0 0; font-size: 1.35rem; }
.seo-body ul { margin: 0; padding-left: 1.2rem; }
.seo-cta { margin: 32px 0 0; }
.seo-more { display: grid; gap: 8px; margin-top: 40px; }
.seo-more a { color: inherit; }
[data-theme="light"] .seo-card {
    border-color: rgba(17, 24, 39, 0.1);
    background: #fff;
}
[data-theme="light"] .seo-lead,
[data-theme="light"] .seo-body p,
[data-theme="light"] .seo-body li,
[data-theme="light"] .sales-brand-text__subtitle {
    color: #4b5568;
}
[data-theme="light"] .btn-ghost {
    border-color: rgba(18, 24, 38, 0.14);
    background: #fff;
    color: #121826;
}
[data-theme="light"] .hero-wash {
    background:
        radial-gradient(ellipse 48% 38% at 86% 6%, rgba(225, 29, 72, 0.1), transparent 58%),
        radial-gradient(ellipse 34% 30% at 8% 82%, rgba(59, 130, 246, 0.08), transparent 52%),
        linear-gradient(180deg, #f7f8fb 0%, var(--floor) 58%);
}
[data-theme="light"] .flap-board,
[data-theme="light"] .tape-board {
    border-color: rgba(18, 24, 38, 0.1);
    box-shadow: 0 18px 40px rgba(18, 24, 38, 0.08);
}
[data-theme="light"] .stamp-amazon { color: #b45309; }
[data-theme="light"] .stamp-ebay { color: #1d4ed8; }
[data-theme="light"] .stamp-shopify { color: #3f6212; }
