/* ==========================================================================
   BabyLife Landing Page — Premium Redesign, 3rd attempt
   Direction: real brand — exact tokens from src/lib/theme/palettes.ts and
   tailwind.config.js (the app's single, actual design system), not an
   invented palette. Warm cream background, ink-navy text, vivid coral-red
   primary, plus the app's own 5-way stat/category color coding used as
   accent language throughout (blue=Boy, green=Kilo, amber=growth/Baş Çev.,
   purple=AI/sleep, rose=memory). Fonts: Plus Jakarta Sans (display) + Be
   Vietnam Pro (body) — identical to the live app and the current site,
   not a new typographic direction.

   Structure carried over from the (structurally well-received) 2nd attempt:
   alternating flagship feature rows, card-based comparison, two-column FAQ
   grid, full-bleed CTA, floating pill nav, interactive phone showcase.
   Only the color system, hero layout, and animation depth are new.
   ========================================================================== */

:root {
    /* Core surfaces */
    --bg: #FFF8F7;
    --bg-elevated: #FFFFFF;
    --bg-card: #FFFFFF;
    --card-tint: #F9F5FC;
    --card-tint-high: #F3EEFC;

    /* Text */
    --ink: #1A1030;
    --ink-soft: #4A4361;
    --ink-faint: #8C716D;

    /* Borders */
    --outline: #E5DEE8;
    --border: rgba(26, 16, 48, 0.08);
    --border-strong: rgba(26, 16, 48, 0.16);

    /* Primary (vivid coral-red — active tab / CTA / brand accent) */
    --primary: #FC1F1A;
    --primary-bright: #FF6A5D;
    --primary-container: #FFE9E6;
    --on-primary: #FFFFFF;

    /* Category accents — the app's real 5-way stat/domain color coding */
    --secondary: #1B8A3C;           /* Kilo / weight, green */
    --secondary-container: #E5F4DF;
    --tertiary: #0B57C4;            /* Boy / height, blue */
    --tertiary-container: #E4EFFB;
    --growth: #F0A020;              /* growth/milestone/leap-week category, amber */
    --growth-container: #FEF1DE;
    --sleep: #8B5CF6;               /* AI / sleep category, purple */
    --sleep-container: #F3EEFC;
    --memory: #E23F72;              /* memory/diary category, rose */
    --memory-container: #FFE3EC;

    /* Direct-sampled app tokens (used inside the faithful phone mock UI) */
    --ai-purple-dark: #3302C6;
    --ai-purple-icon: #7B3FE4;
    --ai-purple-bg: #F7F0FA;
    --status-success: #52BF6B;
    --stat-boy-accent: #0B57C4;
    --stat-kilo-accent: #1B8A3C;
    --stat-bascevresi-accent: #FE4300;
    --reminder-vaccine-bg: #F0F8FF;
    --reminder-vaccine-icon-bg: #E0FBFC;
    --reminder-vaccine-accent: #0077B6;
    --reminder-doctor-bg: #FFF0F3;
    --reminder-doctor-icon-bg: #FFE5E5;
    --reminder-doctor-accent: #D00000;
    --chart-p97: #FE6B6F;
    --chart-p85: #FE963E;
    --chart-p50: #FDB33B;
    --chart-p15: #6FBF8C;
    --chart-p3: #61C9D6;
    --chart-child: #29A73C;

    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Be Vietnam Pro', sans-serif;

    --container-width: 1200px;
    --container-padding: 24px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    overflow-wrap: break-word;
}

p { color: var(--ink-soft); overflow-wrap: break-word; }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); }

img, svg { max-width: 100%; }

.eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    display: block;
    margin-bottom: 18px;
}

.section-header { max-width: 640px; margin: 0 auto 56px auto; text-align: center; }
.section-title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem); letter-spacing: -0.5px; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 28px; border-radius: 100px;
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: all 0.35s var(--ease); border: 1px solid transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary { background-color: var(--primary); color: var(--on-primary); box-shadow: 0 10px 28px rgba(252, 31, 26, 0.28); }
.btn-primary:hover { background-color: #E01813; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(252, 31, 26, 0.38); }

.btn-ghost { background-color: transparent; border-color: var(--outline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background-color: rgba(26, 16, 48, 0.04); transform: translateY(-2px); }

/* --- Floating pill nav --- */
.nav-wrap { position: fixed; top: 18px; left: 0; width: 100%; z-index: 1000; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }

.header {
    width: 100%; max-width: 980px;
    display: flex; align-items: center; justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--outline);
    border-radius: 100px;
    box-shadow: 0 4px 24px rgba(26, 16, 48, 0.06);
    padding: 10px 12px 10px 20px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled { background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 32px rgba(26, 16, 48, 0.12); }

.logo-container { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.nav-logo { height: 30px; width: auto; border-radius: 50%; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); white-space: nowrap; }

.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-link { font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: color 0.25s ease; }
.nav-link:hover { color: var(--primary); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-nav { padding: 9px 20px; font-size: 0.85rem; }

.menu-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 6px; flex-shrink: 0; }
.menu-toggle svg { width: 22px; height: 22px; }

.mobile-menu {
    display: none; flex-direction: column; gap: 6px;
    width: 100%; max-width: 980px; margin-top: 10px;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--outline); border-radius: 24px; padding: 14px;
    box-shadow: 0 12px 32px rgba(26, 16, 48, 0.14);
}
.mobile-link { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 12px; display: block; }
.mobile-link:active { background-color: var(--card-tint); }
.mobile-btn { width: 100%; margin-top: 6px; }

/* --- Hero --- */
.hero-section { position: relative; padding: 158px 0 110px 0; overflow: hidden; }

.hero-blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
.blob-1 { top: -220px; right: -120px; width: 620px; height: 620px; background: var(--primary-container); opacity: 0.9; }
.blob-2 { top: 260px; left: -180px; width: 480px; height: 480px; background: var(--sleep-container); opacity: 0.85; }
.blob-3 { bottom: -160px; right: 10%; width: 420px; height: 420px; background: var(--growth-container); opacity: 0.8; }

.hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
}

.hero-content { max-width: 560px; }

.tagline-badge {
    display: inline-flex; align-items: center; gap: 9px;
    background-color: var(--bg-card); border: 1px solid var(--outline);
    padding: 8px 18px; border-radius: 100px;
    font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
    margin-bottom: 28px; box-shadow: 0 4px 16px rgba(26, 16, 48, 0.05);
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--secondary); box-shadow: 0 0 0 0 rgba(27, 138, 60, 0.6); animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(27, 138, 60, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(27, 138, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(27, 138, 60, 0); }
}

.hero-title { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.7rem); letter-spacing: -1.5px; margin-bottom: 24px; }
.hero-accent { color: var(--primary); }

.hero-subtitle { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); margin-bottom: 36px; }

.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-proof { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.proof-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.proof-item svg { width: 16px; height: 16px; color: var(--growth); flex-shrink: 0; }

/* --- Hero visual --- */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }

.phone-frame-container { width: 272px; height: 542px; position: relative; z-index: 2; }

.phone-frame-hero {
    width: 100%; height: 100%;
    background-color: var(--ink);
    border: 10px solid var(--ink);
    border-radius: 42px;
    box-shadow: 0 40px 90px -20px rgba(26, 16, 48, 0.35), 0 0 0 1px rgba(26,16,48,0.04), 0 0 90px rgba(252, 31, 26, 0.14);
    overflow: hidden; position: relative;
}

.phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 132px; height: 22px; background-color: var(--ink); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; z-index: 5; }
.phone-screenshot { width: 100%; height: 100%; object-fit: cover; }

.float-badge {
    position: absolute; z-index: 10;
    display: flex; align-items: center; gap: 11px;
    background-color: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--outline);
    backdrop-filter: blur(10px);
    padding: 12px 16px; border-radius: 18px;
    box-shadow: 0 20px 44px rgba(26, 16, 48, 0.14);
    max-width: 220px;
}

.badge-curve { top: 2%; left: -8%; padding: 14px 16px; }
.badge-ai { bottom: 20%; right: -10%; }
.badge-vaccine { bottom: 2%; left: -4%; }

.badge-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.badge-icon svg { width: 16px; height: 16px; }
.icon-ai { background-color: var(--sleep); }
.icon-vaccine { background-color: var(--tertiary); }

.badge-text { display: flex; flex-direction: column; min-width: 0; }
.badge-title { font-size: 0.66rem; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.badge-val { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Signature element: the living growth curve card */
.curve-card { display: flex; flex-direction: column; gap: 8px; width: 178px; }
.curve-card-head { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.curve-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--chart-child); flex-shrink: 0; }
.curve-svg { width: 100%; height: auto; display: block; }
.curve-band { stroke: var(--chart-p85); }
.curve-line { stroke: var(--chart-child); stroke-dasharray: 300; stroke-dashoffset: 300; }
.curve-marker { fill: var(--chart-child); opacity: 0; }
.curve-stat { display: flex; align-items: baseline; gap: 2px; }
.curve-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.curve-unit { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--primary); }

/* --- Flagship features (alternating) --- */
.flagship-section { padding: 40px 0 0 0; position: relative; }

.flagship-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    padding: 56px 0; border-bottom: 1px solid var(--border);
}
.flagship-row:first-of-type { padding-top: 0; }
.flagship-row.reverse .flagship-visual { order: 2; }
.flagship-row.reverse .flagship-text { order: 1; }

.flagship-tag {
    display: inline-block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.4px; padding: 6px 14px; border-radius: 100px; margin-bottom: 18px;
}
.tag-blue { background-color: var(--tertiary-container); color: var(--tertiary); }
.tag-purple { background-color: var(--sleep-container); color: var(--sleep); }
.tag-rose { background-color: var(--memory-container); color: var(--memory); }

.flagship-text h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 14px; }
.flagship-text p { font-size: 1rem; max-width: 460px; }

.flagship-card {
    background-color: var(--bg-card); border: 1px solid var(--outline);
    border-radius: 24px; padding: 28px;
    box-shadow: 0 20px 50px rgba(26, 16, 48, 0.06);
}
.stat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.stat-pill { font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; padding: 6px 13px; border-radius: 100px; }
.pill-blue { background-color: var(--tertiary-container); color: var(--tertiary); }
.pill-green { background-color: var(--secondary-container); color: var(--secondary); }
.pill-amber { background-color: var(--growth-container); color: var(--stat-bascevresi-accent); }

.flagship-chart { width: 100%; height: auto; display: block; }
.flagship-stat { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); }
.flagship-stat strong { font-family: var(--font-display); color: var(--primary); font-size: 1.2rem; margin-right: 4px; }

.flagship-card-ai { display: flex; flex-direction: column; gap: 12px; }
.ai-chat-row { padding: 12px 16px; border-radius: 16px; font-size: 0.88rem; line-height: 1.45; max-width: 92%; }
.ai-chat-row.user { align-self: flex-end; background-color: var(--sleep); color: #fff; border-bottom-right-radius: 4px; }
.ai-chat-row.assistant { align-self: flex-start; background-color: var(--card-tint); border: 1px solid var(--outline); color: var(--ink); border-bottom-left-radius: 4px; }
.ai-typing { display: flex; gap: 5px; padding-left: 6px; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background-color: var(--ink-faint); animation: typingDot 1.2s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.vaccine-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.vaccine-row + .vaccine-row { border-top: 1px solid var(--border); }
.vaccine-icon { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-container); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vaccine-icon svg { width: 18px; height: 18px; }
.vaccine-icon.icon-doc { background-color: var(--tertiary-container); color: var(--tertiary); }
.vaccine-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vaccine-label { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; color: var(--ink-faint); }
.vaccine-val { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.vaccine-days { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--primary); flex-shrink: 0; }

.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 56px 0 120px 0; }
.support-card { background-color: var(--bg-card); border: 1px solid var(--outline); border-radius: 20px; padding: 26px; transition: border-color 0.3s ease, transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.support-card:hover { border-color: var(--outline); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(26, 16, 48, 0.1); }
.support-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.support-icon svg { width: 20px; height: 20px; }
.icon-amber { background-color: var(--growth-container); color: var(--growth); }
.icon-rose { background-color: var(--memory-container); color: var(--memory); }
.icon-blue { background-color: var(--tertiary-container); color: var(--tertiary); }
.support-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
.support-card p { font-size: 0.88rem; }

/* --- Showcase --- */
.showcase-section { padding: 120px 0; background-color: var(--card-tint); position: relative; }
.showcase-container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; position: relative; z-index: 1; }
.showcase-content { padding-top: 12px; }
.sticky-header { margin-bottom: 48px; }

.showcase-timeline { position: relative; padding-left: 32px; }
.showcase-timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background-color: var(--outline); }

.showcase-step { position: relative; padding: 18px 20px 18px 24px; margin-left: -24px; border-radius: 16px; cursor: pointer; transition: background-color 0.3s var(--ease); }
.step-dot { position: absolute; left: -32px; top: 24px; width: 11px; height: 11px; border-radius: 50%; background-color: var(--bg-card); border: 2px solid var(--outline); transition: all 0.3s var(--ease); }
.showcase-step.active { background-color: var(--bg-card); box-shadow: 0 10px 30px rgba(26, 16, 48, 0.07); }
.showcase-step.active .step-dot { background-color: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(252, 31, 26, 0.16); }

.step-info h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step-info p { font-size: 0.88rem; }

.showcase-visual { display: flex; justify-content: center; position: sticky; top: 120px; }
.sticky-phone-wrapper { position: relative; width: 290px; height: 578px; }

.phone-frame {
    width: 100%; height: 100%; background-color: var(--ink); border: 9px solid var(--ink);
    border-radius: 40px; box-shadow: 0 40px 90px -20px rgba(26, 16, 48, 0.3), 0 0 60px rgba(139, 92, 246, 0.14);
    overflow: hidden; position: relative;
}
.phone-screen { width: 100%; height: 100%; background-color: var(--bg); position: relative; overflow: hidden; }
.phone-home-button { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 108px; height: 4px; background-color: var(--ink); border-radius: 2px; z-index: 100; }

/* Mock screens — faithful reproduction of the real app's UI, exact tokens */
.mock-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; display: flex; flex-direction: column; }
.mock-screen.active { opacity: 1; visibility: visible; }
.mock-header { height: 66px; padding: 22px 14px 10px 14px; display: flex; justify-content: space-between; align-items: center; background-color: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mock-user-info { display: flex; align-items: center; gap: 8px; }
.mock-avatar { width: 30px; height: 30px; border-radius: 50%; background-color: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.78rem; }
.mock-greeting { font-size: 0.63rem; color: var(--ink-soft); }
.mock-child { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.mock-header-actions { display: flex; align-items: center; gap: 12px; }
.mock-icon-search, .mock-icon-bell { width: 17px; height: 17px; color: var(--ink-soft); }
.mock-bell-container { position: relative; display: inline-flex; }
.mock-notification-dot { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; background-color: var(--primary); border-radius: 50%; }
.mock-body { flex: 1; padding: 10px 12px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; scrollbar-width: none; }
.mock-body::-webkit-scrollbar { display: none; }
.mock-hero-card { background-color: var(--card-tint); border-radius: 22px; padding: 13px; }
.mock-hero-info { display: flex; align-items: center; gap: 11px; }
.mock-hero-avatar { font-size: 1.7rem; background-color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mock-hero-details { display: flex; flex-direction: column; gap: 2px; }
.mock-hero-title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.mock-hero-week { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; color: var(--primary); }
.mock-hero-date { font-size: 0.62rem; color: var(--ink-soft); line-height: 1.3; }
.mock-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mock-stats-row.three-cols { grid-template-columns: repeat(3, 1fr); }
.mock-stat-card { background-color: #fff; border-radius: 13px; border: 1px solid var(--outline); padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; }
.border-boy { border-left: 3px solid var(--stat-boy-accent); }
.border-kilo { border-left: 3px solid var(--stat-kilo-accent); }
.border-bas { border-left: 3px solid var(--stat-bascevresi-accent); }
.m-label { font-size: 0.58rem; font-weight: 700; }
.boy-txt { color: var(--stat-boy-accent); }
.kilo-txt { color: var(--stat-kilo-accent); }
.bas-txt { color: var(--stat-bascevresi-accent); }
.m-val { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; margin-bottom: 2px; color: var(--ink); }
.m-percentile { font-size: 0.54rem; font-weight: 700; padding: 1px 4px; border-radius: 6px; align-self: flex-start; }
.boy-pill { background-color: rgba(11, 87, 196, 0.1); color: var(--stat-boy-accent); }
.kilo-pill { background-color: rgba(27, 138, 60, 0.1); color: var(--stat-kilo-accent); }
.bas-pill { background-color: rgba(254, 67, 0, 0.1); color: var(--stat-bascevresi-accent); }
.mock-tasks-card { background-color: #fff; border-radius: 13px; border: 1px solid var(--outline); padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.mock-tasks-title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.mock-task-item { display: flex; align-items: flex-start; gap: 8px; }
.m-task-emoji { font-size: 0.92rem; line-height: 1.2; }
.m-task-text { font-size: 0.63rem; color: var(--ink); line-height: 1.3; }
.mock-reminders-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mock-reminder-split-card { border-radius: 13px; padding: 8px; display: flex; align-items: flex-start; gap: 6px; }
.vaccine-card { background-color: var(--reminder-vaccine-bg); }
.doctor-card { background-color: var(--reminder-doctor-bg); }
.m-rem-split-icon { width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vaccine-icon-bg { background-color: var(--reminder-vaccine-icon-bg); color: var(--reminder-vaccine-accent); }
.doctor-icon-bg { background-color: var(--reminder-doctor-icon-bg); color: var(--reminder-doctor-accent); }
.m-rem-split-icon svg { width: 13px; height: 13px; }
.m-rem-split-info { display: flex; flex-direction: column; min-width: 0; }
.m-rem-split-label { font-family: var(--font-display); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.4px; margin-bottom: 2px; }
.vaccine-color { color: var(--reminder-vaccine-accent); }
.doctor-color { color: var(--reminder-doctor-accent); }
.m-rem-split-val { font-family: var(--font-display); font-size: 0.73rem; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.m-rem-split-desc { font-size: 0.56rem; color: var(--ink-soft); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 98px; }
.mock-ai-suggestion-card { background-color: var(--ai-purple-bg); border-radius: 13px; padding: 9px; display: flex; flex-direction: column; gap: 5px; }
.mock-ai-suggestion-header { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.73rem; font-weight: 700; color: var(--ai-purple-dark); }
.mock-ai-suggestion-icon { width: 18px; height: 18px; border-radius: 50%; background-color: var(--ai-purple-icon); color: #fff; display: flex; align-items: center; justify-content: center; }
.mock-ai-suggestion-icon svg { width: 10px; height: 10px; }
.mock-ai-suggestion-text { font-size: 0.66rem; color: var(--ink); line-height: 1.35; }
.mock-dashboard-disclaimer { font-size: 0.5rem; text-align: center; color: var(--ink-soft); opacity: 0.75; margin-top: 4px; }
.mock-header-simple { height: 78px; padding: 28px 16px 12px 16px; display: flex; justify-content: space-between; align-items: center; background-color: #fff; border-bottom: 1px solid var(--outline); }
.mock-icon-back, .mock-icon-action { width: 17px; height: 17px; color: var(--ink); }
.mock-screen-title { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.mock-tabs { display: flex; background-color: var(--card-tint); padding: 4px; border-radius: 20px; margin-bottom: 15px; }
.mock-tab { flex: 1; text-align: center; font-size: 0.68rem; font-weight: 700; padding: 6px 0; border-radius: 16px; color: var(--ink-soft); }
.mock-tab.active { background-color: var(--primary); color: #fff; }
.mock-chart-container { background-color: #fff; border-radius: 15px; border: 1px solid var(--outline); padding: 11px; margin-bottom: 15px; }
.mock-svg-chart { width: 100%; height: auto; }
.mock-chart-legend { display: flex; justify-content: center; gap: 15px; margin-top: 8px; }
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.58rem; font-weight: 600; color: var(--ink); }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.child-dot { background-color: var(--chart-child); }
.who-dot { background-color: var(--chart-p50); }
.mock-growth-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.m-grow-stat { background-color: #fff; border: 1px solid var(--outline); border-radius: 12px; padding: 9px; text-align: center; }
.m-g-lbl { font-size: 0.58rem; color: var(--ink-soft); display: block; margin-bottom: 2px; }
.m-g-val { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.percent-highlight { color: var(--primary); }
.mock-header-ai { height: 78px; padding: 28px 16px 12px 16px; display: flex; align-items: center; background-color: var(--ai-purple-dark); color: #fff; }
.mock-ai-title { display: flex; align-items: center; gap: 8px; }
.mock-ai-avatar { width: 30px; height: 30px; border-radius: 50%; background-color: var(--sleep); display: flex; align-items: center; justify-content: center; }
.mock-ai-avatar svg { width: 13px; height: 13px; color: #fff; }
.mock-ai-name { font-size: 0.78rem; font-weight: 700; }
.mock-ai-status { font-size: 0.58rem; opacity: 0.8; }
.mock-body-chat { flex: 1; display: flex; flex-direction: column; background-color: #fff; }
.mock-chat-scroll { flex: 1; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; }
.mock-chat-disclaimer { background-color: var(--reminder-doctor-icon-bg); color: var(--reminder-doctor-accent); padding: 6px 10px; border-radius: 10px; font-size: 0.53rem; line-height: 1.3; font-weight: 700; }
.chat-bubble { padding: 10px 12px; border-radius: 16px; font-size: 0.68rem; line-height: 1.4; max-width: 85%; }
.chat-bubble.user { background-color: var(--sleep); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }
.chat-bubble.assistant { background-color: var(--bg); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 2px; }
.mock-chat-input-area { padding: 8px 12px; border-top: 1px solid var(--outline); display: flex; align-items: center; gap: 8px; }
.mock-chat-input { flex: 1; font-size: 0.68rem; color: var(--ink-soft); background-color: var(--bg); padding: 6px 12px; border-radius: 20px; }
.mock-chat-send { width: 24px; height: 24px; border-radius: 50%; background-color: var(--sleep); display: flex; align-items: center; justify-content: center; }
.mock-chat-send svg { width: 12px; height: 12px; color: #fff; }
.mock-search-box { display: flex; align-items: center; gap: 8px; background-color: #fff; border: 1px solid var(--outline); padding: 8px 12px; border-radius: 12px; margin-bottom: 11px; color: var(--ink-soft); }
.mock-search-box svg { width: 13px; height: 13px; }
.mock-search-box span { font-size: 0.63rem; }
.mock-pills-row { display: flex; gap: 8px; margin-bottom: 11px; }
.mock-pill { padding: 4px 10px; background-color: var(--card-tint); color: var(--ink-soft); font-size: 0.63rem; font-weight: 700; border-radius: 12px; }
.mock-pill.active { background-color: var(--primary); color: #fff; }
.mock-recipes-list { display: flex; flex-direction: column; gap: 9px; }
.mock-recipe-card { background-color: #fff; border: 1px solid var(--outline); border-radius: 15px; padding: 11px; }
.recipe-meta { font-size: 0.73rem; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.recipe-desc { font-size: 0.58rem; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.4; }
.recipe-tags { display: flex; gap: 8px; }
.recipe-tags span { font-size: 0.53rem; font-weight: 700; background-color: var(--bg); padding: 2px 6px; border-radius: 8px; color: var(--ink); }
.recipe-tags span.tag-match { background-color: rgba(27, 138, 60, 0.1); color: var(--stat-kilo-accent); }

/* --- Comparison (cards, not table) --- */
.comparison-section { padding: 120px 0; }
.compare-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 20px; align-items: stretch; }
.compare-card { background-color: var(--bg-card); border: 1px solid var(--outline); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; }
.compare-featured { background-color: var(--bg-card); border-color: var(--primary); box-shadow: 0 24px 60px rgba(252, 31, 26, 0.14); position: relative; }
.compare-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background-color: var(--primary); color: #fff; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; padding: 5px 16px; border-radius: 100px; white-space: nowrap; }
.compare-head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.compare-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.compare-name-featured { color: var(--primary); font-size: 1.15rem; }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: 15px; flex: 1; }
.compare-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; line-height: 1.4; }
.compare-list li svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.compare-list li.yes { color: var(--ink); }
.compare-list li.yes svg { color: var(--status-success); }
.compare-list li.no { color: var(--ink-faint); }
.compare-list li.no svg { color: var(--ink-faint); opacity: 0.6; }
.compare-cta { margin-top: 24px; width: 100%; }

/* --- FAQ grid --- */
.faq-section { padding: 120px 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq-item-wide { grid-column: span 2; }
.faq-item { background-color: var(--bg-card); border: 1px solid var(--outline); border-radius: 18px; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.faq-item:hover { border-color: var(--primary-container); box-shadow: 0 10px 30px rgba(26, 16, 48, 0.06); }
.faq-question { width: 100%; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; text-align: left; cursor: pointer; }
.faq-q-text { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.faq-toggle { width: 30px; height: 30px; border-radius: 50%; background-color: var(--card-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s var(--ease), background-color 0.3s ease; }
.faq-toggle svg { width: 15px; height: 15px; color: var(--ink-soft); }
.faq-item.active .faq-toggle { transform: rotate(45deg); background-color: var(--primary); }
.faq-item.active .faq-toggle svg { color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-answer p { padding: 0 22px 22px 22px; font-size: 0.92rem; line-height: 1.6; }

/* --- CTA (full-bleed primary card) --- */
.cta-section { padding: 100px 0 120px 0; }
.cta-card {
    position: relative; overflow: hidden; text-align: center;
    background-color: var(--primary); border-radius: 40px;
    padding: 90px 40px; max-width: var(--container-width);
    box-shadow: 0 40px 90px -20px rgba(252, 31, 26, 0.35);
}
.cta-blob {
    position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
    width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
    pointer-events: none;
}
.cta-title { position: relative; z-index: 1; font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); margin-bottom: 22px; letter-spacing: -1px; color: #fff; }
.cta-subtitle { position: relative; z-index: 1; font-size: 1.05rem; margin-bottom: 40px; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 620px; margin-left: auto; margin-right: auto; }

.store-badge {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 10px;
    background-color: #fff; color: var(--ink);
    border-radius: 14px; padding: 12px 24px 12px 16px; text-decoration: none;
    transition: all 0.35s var(--ease);
}
.store-badge:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.22); }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-badge-text small { font-size: 0.64rem; color: var(--ink-soft); }
.store-badge-text strong { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; }
.cta-note { position: relative; z-index: 1; margin-top: 24px; font-size: 0.8rem; color: rgba(255,255,255,0.7); line-height: 1.5; max-width: 520px; margin-left: auto; margin-right: auto; }

/* --- Footer --- */
.footer { padding: 80px 0 32px 0; border-top: 1px solid var(--border); }
.footer-top { padding-bottom: 40px; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.footer-logo { height: 32px; width: auto; border-radius: 50%; }
.footer-desc { font-size: 0.92rem; margin-top: 16px; max-width: 440px; }
.footer-links-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; max-width: 620px; }
.footer-col h4 { font-family: var(--font-display); font-size: 0.9rem; color: var(--ink); margin-bottom: 18px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.88rem; transition: color 0.25s ease; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--ink-faint); }
.footer-tagline-bottom { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); opacity: 0.7; }

/* --- Reveal (GSAP-driven; CSS sets the resting "hidden" state only) --- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.no-js-fallback { opacity: 1; transform: none; transition: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-content { max-width: 620px; margin: 0 auto; }
    .hero-proof { justify-content: center; }
    .hero-visual { margin-top: 56px; min-height: 500px; }

    .flagship-row { grid-template-columns: 1fr; gap: 32px; }
    .flagship-row.reverse .flagship-visual, .flagship-row.reverse .flagship-text { order: unset; }
    .support-grid { grid-template-columns: 1fr 1fr; }
    .showcase-container { grid-template-columns: 1fr; gap: 40px; }
    .showcase-visual { position: relative; top: 0; order: -1; }
    .compare-grid { grid-template-columns: 1fr; }
    .compare-featured { order: -1; }
}

@media (max-width: 768px) {
    .nav-menu, .btn-nav { display: none; }
    .menu-toggle { display: block; }
    .mobile-menu.active { display: flex; }

    .hero-section { padding: 118px 0 70px 0; }
    .blob-1, .blob-2, .blob-3 { width: 300px; height: 300px; filter: blur(80px); }

    .hero-buttons { justify-content: center; margin-bottom: 32px; }

    .phone-frame-container { width: 220px; height: 438px; }
    .float-badge { max-width: 160px; padding: 9px 12px; gap: 8px; }
    .curve-card { width: 148px; }
    .badge-icon { width: 26px; height: 26px; }
    .badge-title { font-size: 0.6rem; }
    .badge-val { font-size: 0.7rem; }
    .badge-curve { top: -2%; left: -2%; }
    .badge-ai { bottom: 24%; right: -6%; }
    .badge-vaccine { bottom: -2%; left: 0; }
    .hero-visual { min-height: 460px; }

    .flagship-section { padding-top: 8px; }
    .support-grid { grid-template-columns: 1fr; padding: 40px 0 80px 0; }

    .showcase-section { padding: 80px 0; }
    .showcase-timeline { padding-left: 26px; }
    .sticky-phone-wrapper { width: 240px; height: 478px; margin: 0 auto; }

    .comparison-section, .faq-section { padding: 80px 0; }
    .compare-ribbon { font-size: 0.62rem; padding: 4px 12px; }

    .faq-grid { grid-template-columns: 1fr; }
    .faq-item-wide { grid-column: span 1; }
    .faq-q-text { font-size: 0.92rem; }

    .cta-section { padding: 70px 0 90px 0; }
    .cta-card { padding: 56px 24px; border-radius: 28px; }

    .footer { padding: 60px 0 28px 0; }
    .footer-links-row { grid-template-columns: 1fr 1fr; gap: 24px 32px; max-width: 100%; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
    .support-grid { padding-bottom: 64px; }
    .compare-list li { font-size: 0.84rem; }
    .store-badge { padding: 11px 18px 11px 14px; }
    .hero-buttons .btn { width: 100%; }
}