/* ==========================================================================
   The Mood Drama — Coming Soon
   Static stylesheet. Tokens mirror the mood-drama-web brand palette
   (resources/css/app.css), with --primary (#6B2A7A) driving the page.
   ========================================================================== */

:root {
    /* ---- Primary (brand) ---- */
    --primary: #6b2a7a;
    --primary-700: #571f64;
    --primary-800: #3f1349;
    --primary-900: #2b0c33;
    --primary-050: #f8f3ff;
    --primary-100: #efe4f5;

    /* ---- Accents ---- */
    --pink: #ff6ea8;
    --pink-ink: #d4537e;
    --gold: #f6a623;
    --gold-hero: #fac775;
    --green: #21c77a;

    /* ---- Surfaces ---- */
    --cream: #fdf9f6;
    --cream-warm: #f9f0ea;
    --blush: #fbeef2;
    --border: #efe8f7;
    --white: #ffffff;

    /* ---- Ink ---- */
    --ink: #2b0c33;
    --ink-soft: #6b5f72;
    --ink-mute: #8d8296;

    /* ---- Type ---- */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', ui-serif, Georgia, serif;

    /* ---- Layout ---- */
    --wrap: 1200px;
    --radius: 20px;
    --radius-lg: 28px;

    --shadow-sm: 0 2px 10px -4px rgba(43, 12, 51, 0.14);
    --shadow-md: 0 18px 45px -24px rgba(43, 12, 51, 0.32);
    --shadow-lg: 0 40px 90px -45px rgba(43, 12, 51, 0.45);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

input {
    font: inherit;
}

/* ---------- Helpers ---------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 24px;
}

.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;
}

.icon {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Section heading — Playfair display serif, centred */
.section-head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    line-height: 1.2;
    color: var(--primary-900);
    letter-spacing: -0.01em;
}

.section-sub {
    margin-top: 14px;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.75;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease,
        color 0.25s ease, border-color 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-800) 58%, var(--primary-900) 100%);
    color: #fff;
    box-shadow: 0 18px 38px -18px rgba(107, 42, 122, 0.85);
}

.btn-primary:hover {
    background: linear-gradient(120deg, #8a3a9e 0%, var(--primary) 58%, var(--primary-800) 100%);
    box-shadow: 0 24px 48px -18px rgba(107, 42, 122, 0.95);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--primary-900);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--primary-800);
    border-color: #fff;
}

.btn-sm {
    padding: 11px 22px;
    font-size: 0.72rem;
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce {
    background: var(--primary-900);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.announce .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding-block: 9px;
    flex-wrap: wrap;
}

.announce-list {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.announce-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.announce-item .icon {
    width: 14px;
    height: 14px;
    color: var(--pink);
}

.announce-note {
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
    .announce-note {
        display: none;
    }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(253, 249, 246, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

.site-header.is-stuck {
    background: rgba(253, 249, 246, 0.96);
    border-bottom-color: var(--border);
    box-shadow: 0 14px 40px -28px rgba(43, 12, 51, 0.45);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-block: 14px;
}

/* ---------- Wordmark ----------
   Single-line lockup set live in Playfair Display Black — "The Mood" in near-
   black ink, "Drama" in brand pink. Live text rather than a PNG, so it stays
   crisp at any size and always sits on one line. */
.wordmark {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.95rem;
    line-height: 1;
    letter-spacing: -0.015em;
    color: #14041d;
    white-space: nowrap;
    user-select: none;
}

.wordmark-drama {
    color: #d4537e;
}

/* Trademark mark, pinned above the top-right corner of the wordmark rather
   than inline — inline <sup> would push "Drama" off centre in the lockup. */
/* Trademark badge: a small rounded chip rather than the plain ™ glyph, which
   renders inconsistently (and tiny) across fonts. Sized in em so it scales
   with the wordmark itself wherever it's used (header vs. larger footer). */
.wordmark-tm {
    position: relative;
    top: -3.4em;
    left: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 0.2em;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    background: linear-gradient(150deg, var(--pink) 0%, var(--primary) 100%);
    box-shadow: 0 3px 9px -3px rgba(107, 42, 122, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* On the dark footer panel the badge needs its own outline to stay
   distinct from the plum background behind it */
.wordmark--light .wordmark-tm {
    box-shadow: 0 3px 9px -3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* On the dark footer panel */
.wordmark--light {
    color: #fff;
}

.brand {
    transition: transform 0.3s ease;
}

.brand:hover {
    transform: scale(1.02);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-inline: auto;
}

.main-nav a {
    position: relative;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-soft);
    padding-block: 6px;
    transition: color 0.25s ease;
}

.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.main-nav a:hover {
    color: var(--primary);
}

.main-nav a:hover::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--primary-900);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.icon-btn:hover {
    background: var(--primary-050);
    color: var(--primary);
}

.nav-toggle {
    display: none;
}

@media (max-width: 1024px) {
    .main-nav {
        display: none;
    }

    .nav-toggle {
        display: grid;
    }

    .header-actions .btn {
        display: none;
    }
}

/* Mobile drawer */
/* Fixed full-screen overlay, NOT part of the sticky header's own flow — a
   panel inside a sticky element grows the sticky box itself, so opening it
   used to balloon the header and drag half the viewport around while
   scrolling, leaving whatever content lay far down the page pinned under it. */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 69;
    background: rgba(43, 12, 51, 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    width: min(340px, 84vw);
    overflow-y: auto;
    background: var(--cream);
    box-shadow: -24px 0 60px -20px rgba(43, 12, 51, 0.4);
    padding: 22px 22px 32px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.mobile-nav-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--primary-900);
}

.mobile-nav-close:hover {
    background: var(--primary-050);
}

.mobile-nav-close .icon {
    width: 20px;
    height: 20px;
}

.mobile-nav a:not(.btn) {
    display: block;
    padding: 14px 4px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-900);
    border-bottom: 1px solid var(--border);
}

.mobile-nav .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 14px 26px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    border-bottom: none;
    color: #ffffff;
}

.mobile-nav .btn-primary,
.mobile-nav .btn-primary:hover,
.mobile-nav .btn-primary:focus {
    color: #ffffff;
}

/* Body scroll is locked while the overlay is open, so the page can never be
   scrolled to a state where this panel is fighting the sticky header. */
body.nav-open {
    overflow: hidden;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    background: linear-gradient(135deg, #fdf9f6 0%, #fbf1ec 45%, #f7e8e4 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -140px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(255, 110, 168, 0.13), transparent 68%);
    pointer-events: none;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    align-items: center;
    gap: 48px;
    padding-block: 30px 56px;
    position: relative;
    z-index: 2;
}

/* Eyebrow badge above the headline */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(107, 42, 122, 0.14);
    box-shadow: var(--shadow-sm);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.hero-eyebrow .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    animation: pulse 2.4s ease-out infinite;
}

/* Headline lockup: gold rule, heavy uppercase sans over an italic serif line */
.hero-title {
    border-left: 3px solid var(--gold-hero);
    padding-left: 26px;
}

.ht-caps {
    display: block;
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    line-height: 1.12;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pink);
    filter: drop-shadow(0 2px 16px rgba(255, 110, 168, 0.25));
}

/* Second half of the caps line in the wordmark's black ink */
.ht-caps-alt {
    color: #14041d;
}

@media (min-width: 720px) {
    .ht-caps {
        white-space: nowrap;
    }
}

.ht-serif {
    display: block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2rem, 4.4vw, 3.35rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--primary-900);
}

.ht-serif .accent {
    color: var(--pink);
}

.hero-copy {
    margin-top: 24px;
    max-width: 400px;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--ink-soft);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}


/* Hero trust icons */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    margin-top: 46px;
}

.trust-item {
    text-align: center;
    width: 78px;
}

.trust-item .icon {
    width: 26px;
    height: 26px;
    margin-inline: auto;
    color: var(--primary);
    stroke-width: 1.3;
}

.trust-item span {
    display: block;
    margin-top: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--ink-soft);
    font-weight: 500;
}

@media (max-width: 980px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-block: 30px 56px;
    }

    .hero-copy {
        max-width: 520px;
    }

    .hero-trust {
        gap: 26px;
    }
}

/* ---------- Hero art: animated halo + full-bleed illustration ----------
   No frame, no plinth, nothing layered over the artwork — the figure is the
   hero. Depth comes from a rotating conic-gradient ring, a soft aura and
   frosted-glass chips that orbit her. */
.hero-art {
    position: relative;
}

.stage {
    position: relative;
    height: 516px;
}

/* Aura + rotating gradient ring behind the figure */
.halo {
    position: absolute;
    left: 50%;
    bottom: 66px;
    transform: translateX(-50%);
    width: min(348px, 80%);
    aspect-ratio: 1;
    z-index: 1;
}

.halo-glow {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95) 0%,
        rgba(252, 232, 238, 0.9) 34%, rgba(240, 214, 236, 0.55) 58%, rgba(240, 214, 236, 0) 76%);
    animation: breathe 7s ease-in-out infinite;
}

/* Expanding pulse that breathes outward from behind the figure */
.halo-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 110, 168, 0.35);
    animation: ripple 5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* Blurred copy of the ring sitting behind it — turns the hard 2px edge into a
   soft glow, so the artwork melts into the halo instead of being framed by it. */
.halo-bloom {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(107, 42, 122, 0) 0deg,
        rgba(246, 166, 35, 0.85) 70deg,
        rgba(255, 110, 168, 0.95) 140deg,
        rgba(107, 42, 122, 0.85) 205deg,
        rgba(255, 110, 168, 0) 300deg,
        rgba(107, 42, 122, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px));
    filter: blur(15px);
    opacity: 0.6;
    animation: spin 22s linear infinite;
}

/* Primary conic ring */
.halo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(107, 42, 122, 0) 0deg,
        rgba(246, 166, 35, 0.85) 70deg,
        rgba(255, 110, 168, 0.95) 140deg,
        rgba(107, 42, 122, 0.85) 205deg,
        rgba(255, 110, 168, 0) 300deg,
        rgba(107, 42, 122, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px),
        #000 calc(100% - 2.4px), #000 calc(100% - 0.6px), transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px),
        #000 calc(100% - 2.4px), #000 calc(100% - 0.6px), transparent 100%);
    animation: spin 22s linear infinite;
}

/* Counter-rotating inner ring */
.halo-ring2 {
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    background: conic-gradient(from 210deg,
        rgba(246, 166, 35, 0) 0deg,
        rgba(107, 42, 122, 0.7) 90deg,
        rgba(246, 166, 35, 0.85) 165deg,
        rgba(246, 166, 35, 0) 250deg,
        rgba(246, 166, 35, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    animation: spin-reverse 34s linear infinite;
}

/* Outer dashed orbit, drifting slowly */
.halo-dash {
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    border: 1px dashed rgba(107, 42, 122, 0.14);
    animation: spin 90s linear infinite;
}

/* Travelling dots — each orbit is a circle that spins, carrying its dot with it */
.orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orbit i {
    position: absolute;
    left: 50%;
    border-radius: 50%;
}

.orbit-1 {
    inset: 0;
    animation: spin 16s linear infinite;
}

.orbit-1 i {
    top: -5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--pink);
    box-shadow: 0 0 14px 3px rgba(255, 110, 168, 0.65);
}

.orbit-2 {
    inset: 26px;
    animation: spin-reverse 21s linear infinite;
}

.orbit-2 i {
    top: -3.5px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    background: var(--gold);
    box-shadow: 0 0 12px 3px rgba(246, 166, 35, 0.6);
}

.orbit-3 {
    inset: -34px;
    animation: spin 30s linear infinite;
}

.orbit-3 i {
    top: -4px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: var(--primary);
    box-shadow: 0 0 14px 3px rgba(107, 42, 122, 0.5);
}

/* ---------- Medallion ----------
   The artwork's own glow trails off into an irregular cloud, which reads as a
   mistake when it just floats on the page. Seating it in a circular disc turns
   that edge into a deliberate rim, and the orbiting rings frame the disc. */
.figure-disc {
    position: absolute;
    left: 50%;
    bottom: 66px;
    transform: translateX(-50%);
    width: min(318px, 74%);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    background: radial-gradient(circle at 50% 34%, #ffffff 0%, #fdf4f5 48%, #f6e3ea 100%);
    box-shadow: 0 34px 64px -30px rgba(43, 12, 51, 0.5);
}

.hero-figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    filter: saturate(1.08) contrast(1.04);
}

/* Inner shading so the artwork settles into the disc instead of sitting on it */
.disc-vignette {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0) 58%,
        rgba(214, 176, 206, 0.12) 84%, rgba(107, 42, 122, 0.15) 100%);
}

/* Crisp light rim, drawn inside the disc so it never clips */
.disc-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
        inset 0 0 0 3px rgba(107, 42, 122, 0.07);
}

/* Frosted-glass chips orbiting the figure */
.chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 20px 40px -22px rgba(43, 12, 51, 0.42);
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--primary-900);
    line-height: 1.35;
    white-space: nowrap;
    animation: float 7s ease-in-out infinite;
}

.chip-a {
    top: 6%;
    right: 0;
}

.chip-b {
    top: 35%;
    right: -4%;
    animation-delay: -2.4s;
}

.chip-c {
    top: 64%;
    left: -2%;
    animation-delay: -4.8s;
}

/* The wrapper generates no box, so each chip positions against .hero-art on
   desktop — yet still collapses into a plain flex row on small screens. */
.hero-chips {
    display: contents;
}

.chip-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    flex: none;
}

.chip-ico .icon {
    width: 17px;
    height: 17px;
}

.ico-mint {
    background: #e0f5ea;
    color: #2c9c66;
}

.ico-lilac {
    background: #ece1fa;
    color: var(--primary);
}

.ico-blush {
    background: #fde2ec;
    color: var(--pink-ink);
}

/* Glass caption bar — sits BELOW the figure, overlapping nothing */
.hero-caption {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 430px;
    margin: -14px auto 0;
    padding: 16px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 26px 50px -28px rgba(43, 12, 51, 0.45);
}

.hero-caption .heart {
    width: 30px;
    height: 30px;
    flex: none;
    padding: 7px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--pink), var(--primary));
    color: #fff;
    fill: currentColor;
    stroke: none;
    box-sizing: border-box;
}

.hero-caption p {
    font-size: 0.79rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.hero-caption strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--primary-900);
    margin-bottom: 3px;
}

/* Decorative sparkles */
.spark {
    position: absolute;
    z-index: 3;
    color: var(--pink);
    opacity: 0.5;
    font-size: 1rem;
    animation: twinkle 4s ease-in-out infinite;
}

.spark-1 {
    top: 10%;
    left: 6%;
    font-size: 1.5rem;
}

.spark-2 {
    top: 46%;
    left: 0;
    animation-delay: -1.2s;
}

.spark-3 {
    bottom: 26%;
    right: 8%;
    animation-delay: -2.4s;
    font-size: 1.3rem;
    color: var(--gold);
}

.spark-4 {
    top: 4%;
    right: 30%;
    animation-delay: -3s;
}

@media (max-width: 980px) {
    .stage {
        height: 500px;
    }

    .hero-figure {
        height: 460px;
    }

    .halo {
        bottom: 72px;
        width: min(350px, 76%);
    }

    .chip-b {
        right: 0;
    }

    .chip-c {
        left: 0;
    }
}

@media (max-width: 620px) {
    .stage {
        height: 470px;
    }

    .hero-figure {
        height: 420px;
        bottom: 18px;
    }

    .halo {
        bottom: 56px;
        width: 270px;
    }

    /* Chips drop below the art so they never crowd the figure */
    .chip {
        position: static;
        animation: none;
        white-space: normal;
    }

    .hero-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 18px;
    }

    .hero-caption {
        margin-top: 18px;
    }

    /* Four even columns rather than a 3 + 1 orphan row */
    .hero-trust {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .trust-item {
        width: auto;
    }
}

/* ==========================================================================
   Pillars — "A New Kind of Indulgence"
   ========================================================================== */
.section {
    padding-block: 82px;
}

.section-tight {
    padding-block: 64px;
}

/* ==========================================================================
   "Something Beautiful Is On The Way" band
   ========================================================================== */
.coming {
    /* Sits clear of the hero so it reads as its own banded strip */
    margin-top: 64px;
    background: linear-gradient(180deg, #fdf6f3 0%, #fdf3f1 100%);
    border-block: 1px solid #f4e7e6;
    padding-block: 40px;
}

@media (max-width: 640px) {
    .coming {
        margin-top: 40px;
    }
}

.coming-band {
    display: grid;
    grid-template-columns: minmax(230px, 0.92fr) 1.95fr minmax(168px, 0.62fr);
    align-items: center;
    gap: 44px;
}

.coming-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.72rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--primary-900);
}

.coming-spark {
    color: var(--gold-hero);
    font-size: 0.72em;
    animation: twinkle 3.2s ease-in-out infinite;
}

.coming-intro p {
    margin-top: 12px;
    max-width: 380px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: #6b5f72;
}

/* ---------- Steps ---------- */
.coming-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dashed rail behind the badges, drifting slowly */
.coming-track {
    position: absolute;
    top: 31px;
    left: 12%;
    right: 12%;
    height: 1px;
    background-image: linear-gradient(90deg, rgba(212, 83, 126, 0.34) 55%, transparent 0);
    background-size: 9px 1px;
    background-repeat: repeat-x;
    animation: march 14s linear infinite;
}

/* Dot that travels the rail, tying the four steps together */
.coming-dot {
    position: absolute;
    top: 28px;
    left: 12%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 10px 2px rgba(255, 110, 168, 0.5);
    animation: travel 7s ease-in-out infinite;
}

.step {
    text-align: center;
}

.step-ico {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-inline: auto;
    border-radius: 50%;
    background: #fdf1f1;
    border: 1px solid #f6e3e6;
    animation: float 6s ease-in-out infinite;
}

.step:nth-child(3) .step-ico { animation-delay: -1.5s; }
.step:nth-child(4) .step-ico { animation-delay: -3s; }
.step:nth-child(5) .step-ico { animation-delay: -4.5s; }

.step-ico .icon {
    width: 25px;
    height: 25px;
    color: #a2879c;
    stroke-width: 1.4;
}

.step-label {
    display: block;
    margin-top: 14px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
    color: #6b5f72;
}

/* ---------- Reveal card ---------- */
.reveal-card {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 20px;
    border-radius: 14px;
    text-align: center;
    background: #fffdfc;
    border: 1px solid #efe4e8;
}

/* Slow sheen sweeping across, hinting at the reveal */
.reveal-sheen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    transform: skewX(-14deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    pointer-events: none;
    animation: sweep 5.5s ease-in-out infinite;
}

/* ---------- Unveil loop ----------
   The cloth lifts on a 7s cycle to reveal a glow beneath, then settles back.
   All four layers share the same duration and easing so they stay in step. */
.unveil {
    position: relative;
    width: 128px;
    height: 104px;
    margin-inline: auto;
}

/* Light spilling out while the cloth is up */
.unveil-halo {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 110, 168, 0.4) 0%,
        rgba(250, 199, 117, 0.2) 42%, transparent 68%);
    opacity: 0;
    animation: unveil-glow 7s ease-in-out infinite;
}

.unveil-shadow {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 92px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(107, 42, 122, 0.2), transparent 70%);
}

.unveil-orb {
    position: absolute;
    left: 50%;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(155deg, #7c3690 0%, var(--primary) 32%, var(--primary-800) 70%,
        var(--primary-900) 100%);
    box-shadow: 0 14px 26px -10px rgba(43, 12, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    opacity: 0;
    transform: translateX(-50%);
    animation: unveil-show 7s ease-in-out infinite;
}

.unveil-orb i {
    font-style: normal;
    font-size: 0.8rem;
    color: var(--gold-hero);
}

.unveil-cloth {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 118px;
    height: auto;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    animation: unveil-lift 7s ease-in-out infinite;
}

.unveil-cloth .cloth {
    fill: #e9e1f3;
}

.unveil-cloth .cloth-top {
    fill: #f4eefb;
}

.unveil-cloth .fold {
    fill: none;
    stroke: #dcd1ec;
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Sparks that pop at the moment of reveal */
.uspark {
    position: absolute;
    font-size: 0.7rem;
    color: var(--pink);
    opacity: 0;
    animation: unveil-spark 7s ease-in-out infinite;
}

.u1 {
    top: 8px;
    left: 10px;
}

.u2 {
    top: 2px;
    right: 16px;
    color: var(--gold-hero);
    animation-delay: 0.14s;
}

.u3 {
    bottom: 30px;
    right: 4px;
    animation-delay: 0.28s;
}

.reveal-card p {
    margin-top: 12px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #6b5f72;
}

@media (max-width: 1080px) {
    .coming-band {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .coming-steps {
        order: 3;
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .coming-band {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 28px;
    }

    .coming-intro p {
        margin-inline: auto;
    }

    .coming-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 12px;
    }

    /* The rail only makes sense as one continuous row */
    .coming-track,
    .coming-dot {
        display: none;
    }
}

/* ==========================================================================
   Our Philosophy
   ========================================================================== */
.phil {
    background: #faf7f4;
}

.phil-head {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.phil-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #d4537e;
}

/* Gold hairlines flanking a small lotus */
.phil-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.phil-rule {
    width: 118px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c8a24b);
}

.phil-rule:last-child {
    background: linear-gradient(90deg, #c8a24b, transparent);
}

.phil-lotus {
    width: 24px;
    height: 24px;
    flex: none;
    color: #e0819f;
    fill: currentColor;
    stroke: none;
}

.phil-title {
    margin-top: 20px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 4.2vw, 3.3rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--primary-900);
}

.phil-sub {
    margin-top: 18px;
    font-size: 1.04rem;
    line-height: 1.72;
    color: #6b6270;
}

/* The brand mention inline here uses the .wordmark class itself, same as the
   header/footer/signature — sized down so it sits in the sentence rather
   than dwarfing it, but otherwise identical: same font, weight, colours,
   TM badge. */
/* Same font, weight and black/pink colouring as the header wordmark (only
   font-size is overridden, to 1em — inheriting .phil-sub's own size so it
   reads as part of the sentence). No TM badge here: that belongs on the
   primary logo usage, not every casual mention of the name. */
.phil-wordmark {
    font-size: 1em;
}

/* ---------- Pull quote ---------- */
.quote {
    position: relative;
    max-width: 848px;
    margin: 52px auto 0;
    padding: 42px 96px 38px;
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(100deg, #ece3f6 0%, #f2ecf6 38%, #f8eff1 68%, #fcf0e9 100%);
}

/* Mirrored botanical sprigs flanking the quote */
.quote-sprig {
    position: absolute;
    top: 50%;
    width: 88px;
    height: 146px;
    transform: translateY(-50%);
    color: #c9b2de;
    opacity: 0.66;
    pointer-events: none;
}

.quote-sprig-l {
    left: 26px;
}

.quote-sprig-r {
    right: 26px;
    transform: translateY(-50%) scaleX(-1);
}

.quote-mark {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.4rem;
    line-height: 0.5;
    color: #c2417a;
}

.quote blockquote {
    position: relative;
    margin: 26px 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
    line-height: 1.62;
    color: var(--primary-900);
    max-width: 640px;
    margin-inline: auto;
}

/* "TheMoodDrama" signature — the .wordmark class itself (same font, weight,
   colours and TM badge as the header/footer logo), not a re-styled label. */
.quote-wordmark {
    margin-top: 22px;
}

@media (max-width: 560px) {
    /* .wordmark is nowrap by design (the header never wants it to break) —
       inside the narrower quote card on small phones it can outgrow the
       card, so it's allowed to wrap here only. */
    .quote-wordmark {
        white-space: normal;
    }
}

/* ---------- Belief cards ---------- */
.belief-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1024px;
    margin: 48px auto 0;
}

.belief {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 30px 28px;
    border-radius: 16px;
    text-align: center;
    background: #fdfcfb;
    box-shadow: 0 18px 40px -26px rgba(43, 12, 51, 0.3);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.belief:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px -26px rgba(43, 12, 51, 0.38);
}

.belief-ico {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--tint);
}

.belief-ico .icon {
    width: 28px;
    height: 28px;
    color: var(--accent);
    stroke-width: 1.5;
}

.belief h3 {
    margin-top: 22px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.18rem;
    color: var(--primary-900);
}

.belief p {
    margin-top: 14px;
    font-size: 0.9rem;
    line-height: 1.62;
    color: #6b6270;
}

/* Accent rule pinned to the foot of every card, so they align across the row */
.belief-rule {
    width: 72px;
    height: 3px;
    margin-top: auto;
    padding-top: 0;
    border-radius: 999px;
    background: var(--accent);
    margin-block-start: 26px;
}

@media (max-width: 900px) {
    .belief-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 22px;
    }

    .quote {
        padding: 38px 26px 32px;
    }

    .quote-sprig {
        display: none;
    }
}

/* ==========================================================================
   Cycle-sync banner (dark, primary gradient)
   ========================================================================== */
.cycle-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 44px 48px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    background: linear-gradient(115deg, var(--primary-900) 0%, var(--primary-800) 45%, var(--primary) 100%);
    box-shadow: var(--shadow-lg);
}

.cycle-banner::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -80px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 110, 168, 0.22), transparent 65%);
    pointer-events: none;
}

.cycle-face {
    width: 128px;
    flex: none;
    opacity: 0.85;
}

.cycle-text {
    flex: 1;
    min-width: 0;
}

.cycle-text h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    line-height: 1.3;
}

.cycle-text p {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 420px;
}

.cycle-banner .btn {
    position: relative;
    z-index: 2;
    flex: none;
}

@media (max-width: 860px) {
    .cycle-banner {
        flex-direction: column;
        text-align: center;
        padding: 38px 26px;
    }

    .cycle-text p {
        margin-inline: auto;
    }
}

/* ==========================================================================
   Science & Nature — six pillars
   Direct port of the mood-drama-web section: same Playfair-black headings,
   same accent colours, same icon tiles, same hover (lift + ring + corner
   bloom + diagonal sheen sweep).
   ========================================================================== */
.pillars-head {
    max-width: 768px;
    margin-inline: auto;
    text-align: center;
}

.pillars-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #efe8f7;
    box-shadow: var(--shadow-sm);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7c3aed;
}

.pillars-badge .icon {
    width: 14px;
    height: 14px;
}

.pillars-badge .star {
    color: var(--pink);
}

.pillars-title {
    margin-top: 20px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #14041d;
}

.pillars-title .accent {
    color: var(--pink);
}

.pillars-sub {
    margin-top: 16px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #64748b;
}

.br-sm {
    display: none;
}

@media (min-width: 640px) {
    .br-sm {
        display: inline;
    }
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1024px;
    margin: 48px auto 0;
}

/* ---------- Card ---------- */
.pcard {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 0 0 1px #efe8f7;
    transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.5s ease;
}

.pcard:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 0 1px var(--accent);
}

/* Accent glow behind the card on hover */
.pcard-glow {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 20px 42px -20px var(--accent);
    transition: opacity 0.5s ease;
}

.pcard:hover .pcard-glow {
    opacity: 1;
}

/* Corner bloom, top-right */
.pcard-bloom {
    position: absolute;
    top: -32px;
    right: -32px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.25;
    filter: blur(28px);
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.pcard:hover .pcard-bloom {
    transform: scale(1.5);
    opacity: 0.6;
}

/* Diagonal sheen that sweeps across on hover */
.pcard-sheen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 50%;
    transform: skewX(12deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    pointer-events: none;
    transition: left 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.pcard:hover .pcard-sheen {
    left: 150%;
}

.pcard-body {
    position: relative;
}

/* Circular icon tile — pops and tilts on hover */
.pcard-ico {
    width: 64px;
    height: 64px;
    padding: 2px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #efe8f7;
    box-shadow: 0 8px 18px -10px var(--accent);
    transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.pcard:hover .pcard-ico {
    transform: rotate(-6deg) scale(1.1);
}

.pcard-ico img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pcard h3 {
    margin-top: 16px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: #14041d;
    transition: color 0.3s ease;
}

.pcard:hover h3 {
    color: var(--accent);
}

/* Underline grows on hover */
.pcard-rule {
    display: block;
    width: 24px;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.pcard:hover .pcard-rule {
    width: 48px;
}

.pcard p {
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.65;
    color: #64748b;
}

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

@media (max-width: 560px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Launch countdown + journey
   ========================================================================== */
.countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 52px;
}

.cd-unit {
    text-align: center;
}

/* Each tile is a conic-gradient arc that fills as its unit counts down —
   --p (0-100) is written by the countdown script every second. */
.cd-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: conic-gradient(from -90deg,
        var(--gold) 0deg,
        var(--pink) calc(var(--p, 0) * 1.8deg),
        var(--primary) calc(var(--p, 0) * 3.6deg),
        rgba(107, 42, 122, 0.1) calc(var(--p, 0) * 3.6deg));
    box-shadow: 0 22px 44px -26px rgba(43, 12, 51, 0.5);
    transition: background 0.4s linear;
}

.cd-ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 2px 6px rgba(43, 12, 51, 0.06);
}

.cd-num {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--primary-900);
    font-variant-numeric: tabular-nums;
}

.cd-label {
    display: block;
    margin-top: 16px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ---------- Journey timeline ---------- */
.journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 72px;
}

/* Connecting rail behind the dots */
.journey::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 16%;
    right: 16%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--pink), var(--primary));
    opacity: 0.35;
}

.journey-step {
    position: relative;
    padding-top: 42px;
    text-align: center;
}

.journey-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--primary);
}

.journey-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

/* The step still ahead of us keeps a live pulse */
.journey-step.is-now .journey-dot {
    border-color: var(--pink);
}

.journey-step.is-now .journey-dot::after {
    background: var(--pink);
    animation: pulse 2.4s ease-out infinite;
}

.journey-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    background: linear-gradient(140deg, var(--pink) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.journey-step h4 {
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-900);
}

.journey-step p {
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--ink-soft);
    max-width: 280px;
    margin-inline: auto;
}

@media (max-width: 760px) {
    .countdown {
        gap: 18px;
    }

    .cd-ring {
        width: 92px;
        height: 92px;
    }

    .cd-num {
        font-size: 1.6rem;
    }

    .journey {
        grid-template-columns: 1fr;
        gap: 34px;
        margin-top: 56px;
    }

    .journey::before {
        display: none;
    }
}

/* Four tiles across won't fit a phone — 2 x 2 beats a 3 + 1 orphan row */
@media (max-width: 620px) {
    .countdown {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 14px;
        max-width: 290px;
        margin-inline: auto;
        justify-items: center;
    }
}

/* ==========================================================================
   Waitlist / notify
   ========================================================================== */
.waitlist {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 40px;
    padding: 54px 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(115deg, #fdf6f1 0%, #fbeee9 55%, #f7e3e2 100%);
    overflow: hidden;
}

/* Let the tracks shrink below their content's intrinsic width */
.waitlist > * {
    min-width: 0;
}

.waitlist h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    color: var(--primary-900);
}

.waitlist > div > p {
    margin-top: 14px;
    max-width: 440px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--ink-soft);
}

/* ---------- Lead capture form ----------
   Name + mobile number, appended to a Google Sheet via an Apps Script Web
   App (see assets/js/main.js — SHEET_WEBHOOK_URL). A glass card with a
   rotating gradient rim (the same trick used on the hero art and the
   countdown teaser), icon-prefixed fields, and real per-field inline
   validation rather than one shared error line. */
.lead-form {
    position: relative;
    max-width: 460px;
    margin-top: 28px;
    padding: 26px 24px 22px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(160deg, #ffffff 0%, #fdf9fb 55%, #fbf2f6 100%);
    box-shadow: 0 26px 52px -28px rgba(107, 42, 122, 0.35), var(--shadow-sm);
}

/* Rotating gradient rim, same mask-cutout technique as the WhatsApp CTA's
   border used to use — plum/gold/pink instead of green, to match this card
   living in the brand section rather than a WhatsApp-branded one. */
.lead-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from 0deg, var(--primary), var(--gold), var(--pink), var(--primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.4;
    animation: spin 9s linear infinite;
    pointer-events: none;
}

/* Soft ambient glow drifting behind the card */
.lead-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 110, 168, 0.16), transparent 70%);
    pointer-events: none;
    animation: breathe 7s ease-in-out infinite;
}

.lead-row {
    position: relative;
    display: flex;
    gap: 14px;
}

.lead-field {
    flex: 1;
    min-width: 0;
}

.lead-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.lead-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.lead-input > .icon:first-child {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--ink-mute);
    transition: color 0.25s ease;
}

.lead-input input {
    flex: 1;
    min-width: 0;
    padding-block: 13px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.88rem;
    color: var(--ink);
}

.lead-input input::placeholder {
    color: #c3b8c8;
}

.lead-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(107, 42, 122, 0.14);
}

.lead-input:focus-within > .icon:first-child {
    color: var(--primary);
}

/* Valid state: green border + a checkmark fades in on the right */
.lead-valid-ico {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--green);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lead-field.is-valid .lead-input {
    border-color: var(--green);
}

.lead-field.is-valid .lead-valid-ico {
    opacity: 1;
    transform: scale(1);
}

/* Invalid state: red border + inline message beneath the field */
.lead-field.is-invalid .lead-input {
    border-color: #e0396a;
}

.lead-field.is-invalid .lead-input:focus-within {
    box-shadow: 0 0 0 3px rgba(224, 57, 106, 0.14);
}

.lead-error {
    margin-top: 6px;
    min-height: 15px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #e0396a;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lead-field.is-invalid .lead-error {
    opacity: 1;
    transform: none;
}

/* Bots that auto-fill every field trip this; real visitors never see it and
   it's removed from the tab order and the accessibility tree. */
.lead-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Pure submission target — its content is cross-origin and never shown */
.lead-submit-frame {
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
    visibility: hidden;
}

.lead-submit {
    position: relative;
    width: 100%;
    margin-top: 8px;
}

.lead-submit .icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.lead-submit:hover .icon {
    transform: translateX(3px);
}

.lead-submit[disabled] {
    opacity: 0.65;
    cursor: default;
}

.lead-submit[disabled] .icon {
    transform: none;
}

.form-note {
    position: relative;
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    min-height: 20px;
    color: var(--green);
}

.form-note.is-error {
    color: #e0396a;
}

@media (max-width: 480px) {
    .lead-form {
        padding: 22px 18px 18px;
    }

    .lead-row {
        flex-direction: column;
        gap: 16px;
    }
}

.perks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
    margin-top: 30px;
}

.perk {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.perk .icon {
    width: 17px;
    height: 17px;
    color: var(--primary);
}

/* Product pack shot */
.packshot {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
}

.packshot::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 68%);
}

/* Ring teaser — same orbital language as the hero, nothing revealed */
.teaser-ring {
    position: relative;
    width: min(268px, 82%);
    aspect-ratio: 1;
}

.teaser-glow {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(252, 232, 238, 0.75) 42%,
        rgba(240, 214, 236, 0) 72%);
    animation: breathe 7s ease-in-out infinite;
}

.teaser-arc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(107, 42, 122, 0) 0deg,
        rgba(246, 166, 35, 0.9) 60deg,
        rgba(255, 110, 168, 0.95) 130deg,
        rgba(107, 42, 122, 0.9) 200deg,
        rgba(255, 110, 168, 0) 290deg,
        rgba(107, 42, 122, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: spin 20s linear infinite;
}

.teaser-dash {
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    border: 1px dashed rgba(107, 42, 122, 0.22);
    animation: spin-reverse 70s linear infinite;
}

.teaser-orbit {
    inset: 0;
    animation: spin 14s linear infinite;
}

.teaser-orbit i {
    top: -5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--pink);
    box-shadow: 0 0 14px 3px rgba(255, 110, 168, 0.65);
}

/* Plum core with the wordmark sparkle */
.teaser-core {
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(155deg, var(--primary) 0%, var(--primary-800) 55%, var(--primary-900) 100%);
    box-shadow: 0 30px 60px -28px rgba(43, 12, 51, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.teaser-spark {
    font-size: 1.25rem;
    color: var(--gold);
}

.teaser-label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: #fff;
}


@media (max-width: 900px) {
    .waitlist {
        grid-template-columns: 1fr;
        padding: 42px 26px;
    }

    .packshot {
        order: -1;
        min-height: 260px;
    }
}

/* ==========================================================================
   Footer — no navigation links; a closing brand panel instead
   ========================================================================== */
.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--primary-800) 0%, var(--primary-900) 55%, #1f0725 100%);
    color: rgba(255, 255, 255, 0.72);
    padding-top: 76px;
}

/* Soft primary halo behind the wordmark */
.footer-aura {
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 42, 122, 0.85), rgba(255, 110, 168, 0.14) 45%,
        transparent 70%);
    pointer-events: none;
}

.footer-top {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 56px;
}

/* "Launching Soon" pill with a live pulse */
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.footer-badge .pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 0 rgba(255, 110, 168, 0.7);
    animation: pulse 2.4s ease-out infinite;
}

.footer-logo {
    margin-top: 26px;
}

.footer-logo {
    font-size: 2.4rem;
}

.footer-tagline {
    margin-top: 20px;
    max-width: 520px;
    font-size: 0.9rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.62);
}

/* Hairline divider with the brand sparkle seated in the middle */
.footer-rule {
    position: relative;
    width: min(420px, 100%);
    margin: 38px 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Two flex rules rather than a centred badge, so nothing has to fake the
   gradient backdrop behind the glyph. */
.footer-rule::before,
.footer-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24));
}

.footer-rule::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent);
}

.footer-rule span {
    color: var(--gold);
    font-size: 0.8rem;
}

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 30px;
}

.footer-trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
}

.footer-trust .icon {
    width: 17px;
    height: 17px;
    color: var(--pink);
}

/* Social handles — plain text, no empty links */
.footer-handles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 34px;
    margin-top: 40px;
}

.footer-handle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.25s ease;
}

.footer-handle:hover {
    color: #fff;
}

.footer-handle .icon {
    width: 17px;
    height: 17px;
    color: var(--pink);
}

.footer-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 20px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 560px) {
    .footer-logo {
        font-size: 1.85rem;
    }

    .footer-trust {
        gap: 12px 20px;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Conic-gradient rings and travelling dots orbiting behind the hero figure */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

/* Ring expanding outward and fading, like a soft sonar ping */
@keyframes ripple {
    0% {
        transform: scale(0.86);
        opacity: 0;
    }
    12% {
        opacity: 0.55;
    }
    100% {
        transform: scale(1.34);
        opacity: 0;
    }
}

/* Aura breathing behind the figure */
@keyframes breathe {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

/* Float that preserves the horizontal centring transform */
@keyframes float-x {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-12px);
    }
}

/* Live "launching soon" dot in the footer badge */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 110, 168, 0.65);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(255, 110, 168, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 110, 168, 0);
    }
}

/* Same ripple, WhatsApp-green — used by the CTA's "online now" dot */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.65);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Idle side nudge on the CTA arrow, inviting the click */
@keyframes nudge {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

/* Dashed rail drifting, and the dot that runs along it */
@keyframes march {
    to {
        background-position: 180px 0;
    }
}

@keyframes travel {
    0%,
    100% {
        left: 12%;
    }
    50% {
        left: 88%;
    }
}

/* Unveil: cloth lifts and fades, glow and orb rise to meet it */
@keyframes unveil-lift {
    0%,
    44% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
    62%,
    76% {
        transform: translateX(-50%) translateY(-32px) scale(1.06);
        opacity: 0.08;
    }
    92%,
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes unveil-show {
    0%,
    44% {
        transform: translateX(-50%) translateY(7px) scale(0.88);
        opacity: 0;
    }
    62%,
    76% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
    92%,
    100% {
        transform: translateX(-50%) translateY(7px) scale(0.88);
        opacity: 0;
    }
}

@keyframes unveil-glow {
    0%,
    46% {
        opacity: 0;
    }
    62%,
    76% {
        opacity: 1;
    }
    92%,
    100% {
        opacity: 0;
    }
}

@keyframes unveil-spark {
    0%,
    50% {
        opacity: 0;
        transform: scale(0.4);
    }
    64%,
    74% {
        opacity: 1;
        transform: scale(1);
    }
    88%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }
}

/* Sheen sweeping across the reveal card */
@keyframes sweep {
    0%,
    62% {
        left: -60%;
    }
    100% {
        left: 130%;
    }
}

@keyframes twinkle {
    0%,
    100% {
        opacity: 0.25;
        transform: scale(0.85);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.1);
    }
}

/* Scroll reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
        transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   WhatsApp floating button — fixed corner, reachable at any scroll position
   ========================================================================== */
.whatsapp-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 55;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 20px 38px -10px rgba(37, 211, 102, 0.7);
}

.whatsapp-fab .icon {
    width: 28px;
    height: 28px;
    color: #fff;
    fill: #fff;
    stroke: none;
}

/* Soft pulse ring, so the button reads as live rather than static chrome */
.whatsapp-fab::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.55);
    animation: ripple 2.6s ease-out infinite;
}

@media (max-width: 620px) {
    .whatsapp-fab {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }

    .whatsapp-fab .icon {
        width: 25px;
        height: 25px;
    }
}