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

html {
    overflow-x: clip;
}

:root {
    --primary-purple: #8B5CF6;
    --primary-violet: #7C3AED;
    --secondary-purple: #A78BFA;
    --dark-bg: #1F2937;
    --light-bg: #F9FAFB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --border-color: #E5E7EB;
    --white: #FFFFFF;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: all 0.3s ease;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-purple);
}

.logo-icon {
    font-size: 2rem;
}

.logo-image {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

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

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    overflow-x: clip;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-badge {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-purple);
    background: rgba(139, 92, 246, 0.12);
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.download-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.store-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--text-primary);
    color: var(--white);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.store-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.store-icon {
    width: 28px;
    height: 28px;
}

.store-text-large {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.trust-indicators {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.trust-icon {
    width: 20px;
    height: 20px;
    background: var(--primary-purple);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

/* ── Phone Mockup ──────────────────────────────────────────── */
.hero-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Glow underneath — scales & fades in sync with the float */
.phone-glow {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.5) 0%, transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    animation: glowFloat 5s ease-in-out infinite;
    z-index: 0;
}

/* Float wrapper: drives vertical oscillation via CSS */
.phone-float-wrapper {
    position: relative;
    z-index: 1;
    animation: floatPhone 5s ease-in-out infinite;
}

/* Phone outer shell — dark titanium-style frame */
.phone-mockup {
    position: relative;
    width: 288px;
    height: 576px;
    border-radius: 52px;
    background: linear-gradient(160deg, #3a3a3c 0%, #1c1c1e 45%, #111111 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.10),
        inset 0 2px 3px rgba(255, 255, 255, 0.05),
        0 0 0 1.5px rgba(0, 0, 0, 0.85),
        0 40px 80px -20px rgba(0, 0, 0, 0.65),
        0 20px 40px -10px rgba(0, 0, 0, 0.40);
    /* JS sets: transform: perspective(1200px) rotateX(Xdeg) rotateY(Ydeg) */
    will-change: transform;
}

/* Frame surface highlight — simulates top-lit glass/metal */
.phone-mockup::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 52px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, transparent 45%);
    pointer-events: none;
}

/* Side buttons */
.phone-btn {
    position: absolute;
    border-radius: 2px;
    background: linear-gradient(to right, #2a2a2c, #3a3a3c);
}
.phone-btn--silent   { left: -3.5px; top: 90px;  width: 3.5px; height: 26px; border-radius: 2px 0 0 2px; }
.phone-btn--vol-up   { left: -3.5px; top: 132px; width: 3.5px; height: 44px; border-radius: 2px 0 0 2px; }
.phone-btn--vol-down { left: -3.5px; top: 188px; width: 3.5px; height: 44px; border-radius: 2px 0 0 2px; }
.phone-btn--power    { right: -3.5px; top: 148px; width: 3.5px; height: 60px; border-radius: 0 2px 2px 0;
                       background: linear-gradient(to left, #2a2a2c, #3a3a3c); }

/* Screen inset */
.phone-screen {
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border-radius: 46px;
    background: #000;
    overflow: hidden;
}


/* App screenshot */
.app-screenshot {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
}

/* Gloss / reflection overlay */
.phone-gloss {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 30%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 30;
    border-radius: 46px;
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes floatPhone {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-20px); }
}

/* Glow shrinks/fades as phone rises (50%), expands as it descends */
@keyframes glowFloat {
    0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 0.55; }
    50%       { transform: translateX(-50%) scaleX(0.80) translateY(20px); opacity: 0.30; }
}

/* ── Three-phone fan (overlapping, tilted) ─────────────────── */
.phone-stack {
    position: relative;
    width: 480px;
    height: 600px;
    margin: 0 auto;
}

.phone-card {
    position: absolute;
    top: 0;
}

/* Back phone — sits up/left, smaller, tilts left, flies in from the left */
.phone-card--back {
    left: 0;
    top: 0;
    z-index: 1;
    animation: phoneFlyInLeft 0.95s cubic-bezier(0.34, 1.28, 0.5, 1) 0.35s both;
}

/* Right phone — sits up/right, smaller, tilts right, flies in from the right */
.phone-card--right {
    right: 0;
    top: 0;
    z-index: 2;
    animation: phoneFlyInRight 0.95s cubic-bezier(0.34, 1.28, 0.5, 1) 0.45s both;
}

/* Front phone — centered, on top, rises up into place (lands last) */
.phone-card--front {
    left: 96px;
    bottom: 0;
    top: auto;
    z-index: 3;
    animation: phoneFlyInUp 0.95s cubic-bezier(0.34, 1.28, 0.5, 1) 0.6s both;
}

/* Static resting tilt — kept on its own layer so the float (translateY) and
   the JS parallax (rotateX/Y on .phone-mockup) compose cleanly with it */
.phone-tilt {
    will-change: transform;
}
.phone-card--back  .phone-tilt { transform: rotate(-10deg) scale(0.86); }
.phone-card--right .phone-tilt { transform: rotate(10deg)  scale(0.86); }
.phone-card--front .phone-tilt { transform: rotate(-2deg); }

/* Desync the floats so the phones bob independently */
.phone-card--back .phone-float-wrapper {
    animation-duration: 6.2s;
    animation-delay: -2s;
}
.phone-card--right .phone-float-wrapper {
    animation-duration: 5.6s;
    animation-delay: -3.4s;
}

/* Entrance: glide + un-rotate into resting position with a soft overshoot.
   Ends at a neutral transform so the inner float/tilt layers take over. */
@keyframes phoneFlyInLeft {
    from { opacity: 0; transform: translate(-150px, 70px) rotate(-20deg) scale(0.82); }
    to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes phoneFlyInRight {
    from { opacity: 0; transform: translate(150px, 70px) rotate(18deg) scale(0.82); }
    to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes phoneFlyInUp {
    from { opacity: 0; transform: translate(0, 100px) scale(0.78); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

.app-preview {
    padding: 20px;
}

.preview-header {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.preview-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--secondary-purple), var(--primary-purple));
    border-radius: 50%;
}

.preview-info {
    flex: 1;
}

.preview-name {
    width: 120px;
    height: 16px;
    background: var(--border-color);
    border-radius: 4px;
    margin-bottom: 8px;
}

.preview-rating {
    width: 80px;
    height: 12px;
    background: var(--border-color);
    border-radius: 4px;
}

.preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #E0E7FF, #DDD6FE);
    border-radius: 16px;
    margin-bottom: 20px;
}

.preview-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-line {
    width: 100%;
    height: 12px;
    background: var(--border-color);
    border-radius: 4px;
}

.preview-line.short {
    width: 60%;
}

/* Local SEO - Cyprus */
.local-seo {
    padding: 1.5rem 0;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-top: 1px solid var(--border-color);
}

.local-seo-text {
    text-align: center;
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

.local-seo-text strong {
    color: var(--primary-purple);
}

/* Features Section */
.features {
    padding: 80px 0;
    background: var(--white);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: var(--text-primary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.features-suggest-note {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary, #666);
}

.features-suggest-note a {
    color: var(--primary-purple);
    font-weight: 600;
    text-decoration: none;
}

.features-suggest-note a:hover {
    text-decoration: underline;
}

.feature-card {
    padding: 2rem;
    background: var(--light-bg);
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-purple);
}


.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-description {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* How It Works Section */
.how-it-works {
    padding: 80px 0;
    background: var(--light-bg);
}

.role-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.tab-button {
    padding: 0.875rem 2rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-button.active {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    color: var(--white);
}

.tab-button:hover:not(.active) {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
}

.step {
    text-align: center;
    padding: 2rem;
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.step-description {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ============================================================
   AUDIENCE SECTIONS — For Pet Owners / Sitters / Businesses
   Replaces legacy Features + How-It-Works content blocks
   ============================================================ */
.audience-section {
    padding: 80px 0;
}

.audience-section--alt {
    background: var(--light-bg);
}

.audience-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.audience-header .hero-badge {
    margin-bottom: 1rem;
}

.audience-header .section-title {
    margin-bottom: 1rem;
}

.audience-subtitle {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 0;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* For Businesses uses a 4-column grouped layout with bullet lists */
.audience-grid--businesses {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.audience-pillar {
    padding: 2rem;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    border-top: 3px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.audience-section--alt .audience-pillar {
    background: var(--white);
}

.audience-pillar:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-purple);
    border-top-color: var(--primary-purple);
}

.audience-pillar .feature-icon {
    margin-bottom: 0;
}

.audience-pillar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.audience-pillar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audience-pillar-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.audience-pillar-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary-purple);
}

.audience-cta {
    margin-top: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.audience-cta-text {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin: 0;
}

.audience-cta-button {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--primary-purple);
    color: var(--white);
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.audience-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.35);
}

/* ============================================================
   TEASER SECTION — landing-page cards linking to dedicated pages
   ============================================================ */
.teaser-section {
    background: linear-gradient(180deg, var(--white) 0%, var(--light-bg) 100%);
}

a.teaser-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.teaser-card .feature-title {
    color: var(--text-primary);
}

a.teaser-card:hover .feature-title {
    color: var(--primary-purple);
}

.teaser-cta {
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--primary-purple);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    transition: transform 0.2s ease;
}

a.teaser-card:hover .teaser-cta {
    transform: translateX(4px);
}

/* ============================================================
   AUDIENCE HERO — used on dedicated /for-pet-* pages
   Slightly tighter than main hero — no countdown, no funnel bar
   ============================================================ */
.audience-hero {
    padding-top: 120px;
    padding-bottom: 60px;
}

.audience-hero .hero-title {
    margin-top: 1rem;
}

/* Businesses page hero has three buttons in the row (Talk to us + both
   store badges), which makes them oversized/crowded. Scope a more compact
   size to this page only — other audience pages keep the default badges. */
.page-businesses .audience-hero .download-buttons {
    gap: 0.75rem;
    flex-wrap: wrap;
}

.page-businesses .audience-hero .store-button {
    padding: 0.6rem 1.1rem;
    gap: 0.55rem;
    border-radius: 10px;
}

.page-businesses .audience-hero .store-icon {
    width: 22px;
    height: 22px;
}

.page-businesses .audience-hero .store-text-small {
    font-size: 0.7rem;
}

.page-businesses .audience-hero .store-text-large {
    font-size: 0.95rem;
}

.page-businesses .audience-hero .audience-cta-button {
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ============================================================
   INLINE PHONE SHOTS — "See It In Action" strip on dedicated pages
   ============================================================ */
.inline-shots {
    padding-top: 60px;
    padding-bottom: 60px;
}

.shot-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    align-items: start;
    justify-items: center;
}

.shot-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 280px;
}

.shot-phone {
    width: 220px;
    aspect-ratio: 220 / 460;
    border-radius: 32px;
    background: #1a1a1a;
    padding: 10px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.18);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.shot-card:hover .shot-phone {
    transform: translateY(-6px);
    box-shadow: 0 32px 56px rgba(15, 23, 42, 0.25), 0 8px 16px rgba(139, 92, 246, 0.25);
}

.shot-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

.shot-caption {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 240px;
}

/* ============================================================
   FINAL VALUE PANEL — replaces loud purple download-cta at
   the bottom of dedicated audience pages. Calm light bg,
   audience-specific content + soft white CTA card.
   ============================================================ */
.final-section {
    padding: 80px 0;
    background: var(--light-bg);
}

.final-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.final-item {
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.final-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    border-color: var(--primary-purple);
}

.final-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(124, 58, 237, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.18);
    color: var(--primary-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.final-item-icon svg {
    width: 24px;
    height: 24px;
}

.final-step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.final-item-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.final-item-desc {
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 0.95rem;
    margin: 0;
}

.final-cta-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    max-width: 720px;
    margin: 0 auto;
}

.final-cta-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.final-cta-subtitle {
    color: var(--text-secondary);
    margin: 0 0 1.75rem;
    font-size: 1rem;
}

.final-cta-card .download-buttons {
    justify-content: center;
}

/* Download CTA Section */
.download-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: var(--white);
}

.cta-content {
    text-align: center;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.cta-description {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
}

.download-app-copy {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.download-cta .download-buttons {
    justify-content: center;
}

.download-cta .store-button {
    background: var(--white);
    color: var(--text-primary);
}

.download-cta .store-button:hover {
    background: var(--light-bg);
}

/* Waitlist Modal */
.waitlist-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.waitlist-modal-overlay.is-visible {
    opacity: 1;
}

.waitlist-modal-overlay[hidden] {
    display: none;
}

.waitlist-modal {
    background: var(--white);
    border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    width: 100%;
    max-width: 480px;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(16px);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.waitlist-modal-overlay.is-visible .waitlist-modal {
    transform: translateY(0);
}

.waitlist-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--light-bg);
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.waitlist-modal-close:hover {
    background: var(--border-color);
}

.waitlist-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.625rem;
    color: var(--text-primary);
}

.waitlist-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    align-items: center;
}

.waitlist-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.waitlist-input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--white);
    transition: border-color 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.waitlist-input:focus {
    border-color: var(--primary-purple);
}

.waitlist-device-group {
    display: flex;
    gap: 0.75rem;
}

.waitlist-device-option {
    flex: 1;
    cursor: pointer;
}

.waitlist-device-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.waitlist-device-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--white);
    transition: all 0.2s ease;
    user-select: none;
    cursor: pointer;
}

.waitlist-device-option input[type="radio"]:checked + .waitlist-device-label {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
    background: rgba(108, 92, 231, 0.08);
}

.waitlist-device-label:hover {
    border-color: var(--secondary-purple);
}

.waitlist-device-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.waitlist-submit-btn {
    width: 100%;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(108, 92, 231, 0.3);
}

.waitlist-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(108, 92, 231, 0.4);
}

.waitlist-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.waitlist-message {
    min-height: 1.4em;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.waitlist-message.success {
    color: #059669;
}

.waitlist-message.error {
    color: #DC2626;
}

@media (max-width: 480px) {
    .waitlist-modal {
        padding: 2rem 1.25rem 1.5rem;
        border-radius: 16px;
    }
    .waitlist-title {
        font-size: 1.5rem;
    }
}

/* Privacy Policy Section */
.privacy-policy {
    padding: 80px 0;
    background: var(--white);
}

.privacy-content {
    max-width: 900px;
    margin: 0 auto;
}

.privacy-intro {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 3rem;
    text-align: center;
}

.privacy-section {
    margin-bottom: 2.5rem;
}

.privacy-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.privacy-section p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.privacy-list {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.privacy-list li {
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}

.privacy-list li::before {
    content: "•";
    color: var(--primary-purple);
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.25rem;
}

.privacy-contact {
    background: var(--light-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--primary-purple);
    margin-top: 1rem;
}

.privacy-last-updated {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* FAQ Section */
.faq-section {
    padding: 60px 0;
    background: var(--light-bg);
}

.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.faq-item {
    background: var(--white);
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item[data-open="true"] .faq-chevron {
    transform: rotate(180deg);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    padding: 1rem 1.25rem;
}

.faq-question:hover {
    background: rgba(0,0,0,0.02);
}

.faq-chevron {
    font-size: 1rem;
    color: var(--primary-purple);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    line-height: 1;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    opacity: 0;
}

.faq-answer.is-open {
    max-height: 500px;
    opacity: 1;
}

.faq-answer-inner {
    padding: 0 1.25rem 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.9rem;
}

.faq-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

/* Footer */
.footer {
    padding: 60px 0 30px;
    background: var(--dark-bg);
    color: var(--white);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.footer-logo .logo-image {
    height: 32px;
    width: auto;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 4px;
}

.footer-description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.footer-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-links a:hover {
    color: var(--white);
    transform: scale(1.2);
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Pitch Deck Section */
.pitch-deck-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
}

.pitch-deck-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 3rem;
}

.pitch-deck-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.pitch-deck-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Pitch Deck Cards */
.pitch-deck-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 860px;
    margin: 0 auto;
}

.pitch-deck-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2.25rem;
    border: 2px solid transparent;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.3s ease;
    position: relative;
}

.pitch-deck-card:not(.locked):hover {
    border-color: var(--primary-purple);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.18);
}

.pitch-deck-card.locked {
    background: #F9FAFB;
    opacity: 0.72;
    cursor: not-allowed;
}

.pitch-deck-card-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #92400E;
    background: #FEF3C7;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid #FCD34D;
}

.pitch-deck-card-icon {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}

.pitch-deck-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pitch-deck-card-desc {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.75;
    flex: 1;
    margin-bottom: 0.5rem;
}

.pitch-deck-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    background: var(--primary-purple);
    color: var(--white);
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
    align-self: flex-start;
}

.pitch-deck-btn:hover {
    background: var(--primary-violet);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.pitch-deck-locked-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    background: #E5E7EB;
    color: #9CA3AF;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: not-allowed;
    align-self: flex-start;
}

/* Press Section */
.press-section {
    padding: 80px 0;
    background: var(--light-bg);
}

.press-featured {
    text-align: center;
    margin-bottom: 4rem;
}

.press-featured-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.press-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.press-logo-placeholder {
    padding: 0.75rem 1.75rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #9CA3AF;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}

.press-logo-placeholder:hover {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
}

/* Press Releases */
.press-releases {
    margin-bottom: 4rem;
}

.press-releases-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.press-releases-grid {
    display: grid;
    gap: 1.5rem;
}

.press-release-card {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-purple);
    transition: box-shadow 0.3s ease;
}

.press-release-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.press-date {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-purple);
    background: rgba(139, 92, 246, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.press-release-headline {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.press-release-body {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.press-read-more {
    color: var(--primary-purple);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.press-read-more:hover {
    color: var(--primary-violet);
}

/* Press Kit Row */
.press-kit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.press-kit-card,
.media-contact-card {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
}

.press-kit-card h3,
.media-contact-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.press-kit-card p,
.media-contact-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.press-kit-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.press-kit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--light-bg);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.press-kit-btn:hover {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
    background: rgba(139, 92, 246, 0.05);
}

.press-kit-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.media-contact-name {
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem !important;
}

.media-contact-email {
    color: var(--primary-purple);
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.media-contact-email:hover {
    color: var(--primary-violet);
    text-decoration: underline;
}

/* ── App Showcase Section ───────────────────────────────────── */
.app-showcase {
    background: linear-gradient(180deg, #0D0720 0%, #1A0F3C 35%, #120828 70%, #0D0720 100%);
    padding: 80px 0 0;
    /* NOTE: do NOT add overflow:hidden here — it breaks position:sticky on the phone column */
}

.showcase-header {
    text-align: center;
    margin-bottom: 64px;
}

.showcase-badge {
    display: inline-block;
    background: rgba(167, 139, 250, 0.18);
    color: #C4B5FD;
    border: 1px solid rgba(167, 139, 250, 0.25);
}

.showcase-title {
    color: #fff;
    margin-bottom: 0.75rem;
}

.showcase-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
}

/* Two-column sticky layout */
.showcase-sticky-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    align-items: start;
}

/* ── Left: sticky phone ── */
.showcase-phone-col {
    position: sticky;
    top: calc(50vh - 320px);
    display: flex;
    justify-content: center;
    padding: 20px 0 80px;
}

.showcase-phone-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

/* Reuse phone glow but tinted for dark bg */
.showcase-phone-glow {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.7) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    animation: none;
    z-index: 0;
}

/* ── Showcase screens inside phone ── */
.showcase-screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s ease;
    overflow: hidden;
    background: #f9fafb;
    z-index: 1;
}

.showcase-screen.active {
    opacity: 1;
    z-index: 2;
}

/* ── Progress dots ── */
.showcase-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.showcase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.35s ease;
    cursor: pointer;
}

.showcase-dot.active {
    background: var(--primary-purple);
    width: 28px;
    border-radius: 4px;
}

/* ── Right: scrollable slides ── */
.showcase-slides-col {
    padding-left: 60px;
    padding-bottom: 80px;
}

.showcase-slide {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.showcase-slide-content {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
    max-width: 440px;
}

.showcase-slide-content.visible {
    opacity: 1;
    transform: translateX(0);
}

.showcase-slide-icon {
    font-size: 3rem;
    margin-bottom: 1.25rem;
    display: block;
}

.showcase-slide-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.15;
}

.showcase-slide-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.85;
    margin-bottom: 1.75rem;
}

.showcase-slide-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.showcase-slide-list li {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sc-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.3);
    color: #C4B5FD;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   Mock App Screen UI Components
   ═══════════════════════════════════════════════ */

/* App bar */
.sc-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: #fff;
    flex-shrink: 0;
}

.sc-appbar-title {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
    text-align: center;
}

.sc-appbar-icon { font-size: 17px; }

.sc-back {
    font-size: 16px;
    opacity: 0.85;
    min-width: 20px;
}

/* Search bar */
.sc-search-bar {
    margin: 10px 12px 6px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 10px;
    font-size: 11.5px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Section label */
.sc-section-label {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ca3af;
    flex-shrink: 0;
}

/* Sitter cards (Screen 0) */
.sc-sitter-card {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 5px 12px;
    padding: 9px 11px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.sc-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

.sc-avatar--purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.sc-avatar--blue   { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.sc-avatar--green  { background: linear-gradient(135deg, #10B981, #059669); }

.sc-avatar-xs {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
}

.sc-sitter-info {
    flex: 1;
    min-width: 0;
}

.sc-sitter-name {
    font-weight: 700;
    font-size: 12.5px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-stars {
    font-size: 10px;
    color: #f59e0b;
    margin-top: 1px;
}

.sc-stars span {
    color: #9ca3af;
    margin-left: 2px;
}

.sc-sitter-tags {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.sc-sitter-tags span {
    font-size: 9px;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.1);
    color: #7C3AED;
    padding: 2px 6px;
    border-radius: 4px;
}

.sc-price {
    font-weight: 800;
    font-size: 13px;
    color: #7C3AED;
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-price small {
    font-size: 9.5px;
    font-weight: 500;
    color: #9ca3af;
}

/* Calendar (Screen 1) */
.sc-calendar {
    margin: 8px 12px 0;
    background: #fff;
    border-radius: 12px;
    padding: 10px 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

.sc-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 8px;
    font-size: 11px;
    color: #374151;
}

.sc-cal-month { font-weight: 700; font-size: 12px; }

.sc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
}

.sc-cal-day {
    padding: 4px 1px;
    font-size: 10px;
    border-radius: 5px;
    color: #374151;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-cal-day--label {
    color: #9ca3af;
    font-weight: 700;
    font-size: 9px;
}

.sc-cal-day--selected {
    background: #8B5CF6;
    color: #fff;
    font-weight: 700;
}

.sc-cal-day--avail {
    background: rgba(139, 92, 246, 0.14);
    color: #7C3AED;
    font-weight: 600;
}

/* Chips (Screen 1) */
.sc-chips {
    display: flex;
    gap: 5px;
    padding: 5px 12px 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sc-chip {
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    border: 1.5px solid transparent;
}

.sc-chip--active {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
    border-color: rgba(139, 92, 246, 0.35);
}

.sc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 11px;
    color: #6b7280;
    flex-shrink: 0;
}

.sc-summary-price {
    font-weight: 800;
    color: #7C3AED;
    font-size: 13px;
}

.sc-book-btn {
    margin: 6px 12px 0;
    padding: 11px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12.5px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Chat (Screen 2) */
.sc-chat {
    flex: 1;
    padding: 10px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

.sc-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-msg--in  { align-items: flex-start; }
.sc-msg--out { align-items: flex-end; }

.sc-msg-bubble {
    max-width: 80%;
    padding: 7px 10px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.4;
}

.sc-msg--in  .sc-msg-bubble {
    background: #f3f4f6;
    color: #111827;
    border-bottom-left-radius: 4px;
}

.sc-msg--out .sc-msg-bubble {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.sc-msg-time {
    font-size: 9px;
    color: #9ca3af;
    padding: 0 4px;
}

.sc-msg-time--right { text-align: right; padding-right: 8px; }

.sc-photo-preview {
    background: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.sc-photo-box {
    height: 56px;
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #7C3AED;
    font-weight: 600;
    gap: 6px;
}

.sc-chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 10px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

.sc-chat-field {
    flex: 1;
    background: #f3f4f6;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    color: #9ca3af;
}

.sc-chat-send {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

/* Dashboard (Screen 3) */
.sc-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 12px 0;
    flex-shrink: 0;
}

.sc-stat-card {
    padding: 12px 10px;
    border-radius: 12px;
    text-align: center;
}

.sc-stat-card--purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.sc-stat-card--blue   { background: linear-gradient(135deg, #3B82F6, #2563EB); }

.sc-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.sc-stat-label {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    font-weight: 500;
}

.sc-booking-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin: 5px 12px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

.sc-booking-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sc-booking-dot--green  { background: #10B981; }
.sc-booking-dot--yellow { background: #F59E0B; }

.sc-booking-info { flex: 1; min-width: 0; }

.sc-booking-name {
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-booking-time {
    font-size: 9.5px;
    color: #9ca3af;
    margin-top: 1px;
}

.sc-badge {
    font-size: 8.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-badge--green  { background: #D1FAE5; color: #065F46; }
.sc-badge--yellow { background: #FEF3C7; color: #92400E; }

.sc-payout-btn {
    margin: 10px 12px 0;
    padding: 10px;
    border: 1.5px solid #8B5CF6;
    color: #8B5CF6;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Audience section labels ── */
.showcase-audience-label {
    padding: 24px 0 4px;
    display: flex;
    align-items: center;
}

.showcase-audience-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(167, 139, 250, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.30);
    color: #C4B5FD;
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.showcase-audience-pill--sitter {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
    color: #93C5FD;
}

/* ── Availability screen ── */
.sc-day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0 12px 10px;
}

.sc-day-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sc-day-name {
    font-size: 8px;
    color: #6B7280;
    font-weight: 600;
}

.sc-day-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #9CA3AF;
}

.sc-day-circle--on {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #fff;
}

.sc-hours-row {
    display: flex;
    align-items: center;
    margin: 0 12px 8px;
    background: #F3F4F6;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #1F2937;
    gap: 8px;
}

.sc-hours-row span { flex: 1; }

.sc-hours-edit {
    color: #8B5CF6;
    font-weight: 700;
    font-size: 11px;
}

/* ── Earnings screen ── */
.sc-earnings-card {
    margin: 0 12px 4px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border-radius: 14px;
    padding: 16px;
    color: #fff;
}

.sc-earnings-amount {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 4px;
}

.sc-earnings-period {
    font-size: 11px;
    opacity: 0.75;
    margin-bottom: 12px;
}

.sc-earnings-stats {
    display: flex;
    gap: 16px;
}

.sc-earnings-stat {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
}

.sc-transaction {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #F3F4F6;
    gap: 8px;
}

.sc-transaction-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
}

.sc-transaction-info {
    flex: 1;
    min-width: 0;
}

.sc-transaction-name {
    font-size: 11px;
    font-weight: 700;
    color: #1F2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-transaction-client {
    font-size: 10px;
    color: #9CA3AF;
}

.sc-transaction-amount {
    font-size: 12px;
    font-weight: 800;
    color: #10B981;
    flex-shrink: 0;
}

/* Laptop range: shrink the three-phone fan so it fits the two-column hero */
@media (min-width: 969px) and (max-width: 1160px) {
    .phone-stack {
        transform: scale(0.8);
        transform-origin: center center;
        margin: -55px auto;
    }
}

/* ── Responsive: showcase ── */
@media (max-width: 968px) {
    .showcase-sticky-wrapper {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .showcase-phone-col {
        position: relative;
        top: auto;
        padding: 0 0 40px;
    }

    .showcase-slides-col {
        padding-left: 0;
    }

    .showcase-slide {
        min-height: auto;
        padding: 48px 0;
    }

    .showcase-slide-title {
        font-size: 1.85rem;
    }

    .showcase-slide-content {
        transform: translateY(20px);
    }

    .showcase-slide-content.visible {
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 968px) {
    .hero-content {
        /* minmax(0, 1fr) lets the column shrink below the phone fan's intrinsic
           width — a plain 1fr column inherits min-width:auto and gets blown out
           by the fixed-width .phone-stack, dragging the hero text off-screen. */
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .hero-text,
    .hero-image {
        min-width: 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .download-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-image {
        order: -1;
    }

    .phone-mockup {
        width: 240px;
        height: 480px;
        border-radius: 44px;
    }
    .phone-mockup::after    { border-radius: 44px; }
    .phone-screen           { border-radius: 38px; }
    .phone-gloss            { border-radius: 38px; }
    .phone-btn--silent      { top: 75px; }
    .phone-btn--vol-up      { top: 110px; }
    .phone-btn--vol-down    { top: 158px; }
    .phone-btn--power       { top: 124px; height: 50px; }

    /* Three-phone fan shrinks to match the 240px phones */
    .phone-stack {
        width: 400px;
        height: 500px;
    }
    .phone-card--front { left: 80px; }
    .phone-card--back  .phone-tilt { transform: rotate(-10deg) scale(0.84); }
    .phone-card--right .phone-tilt { transform: rotate(10deg)  scale(0.84); }
    .phone-card--front .phone-tilt { transform: rotate(-2deg); }
    .nav-links {
        display: none;
    }

    .pitch-deck-cards {
        grid-template-columns: 1fr;
    }

    .press-kit-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    /* Resize the phones + the fan's layout box so the whole group fits a
       narrow viewport and stays centered (a fixed 400px box overflows here,
       which clips the back/right phones at the screen edges). */
    .phone-mockup {
        width: 200px;
        height: 400px;
        border-radius: 38px;
    }
    .phone-mockup::after    { border-radius: 38px; }
    .phone-screen           { border-radius: 32px; }
    .phone-gloss            { border-radius: 32px; }
    .phone-btn--silent      { top: 62px; }
    .phone-btn--vol-up      { top: 92px; }
    .phone-btn--vol-down    { top: 132px; }
    .phone-btn--power       { top: 104px; height: 44px; }

    .phone-stack {
        width: 300px;
        height: 440px;
        transform: scale(0.92);
        transform-origin: center center;
        margin: -40px auto -60px;
    }
    .phone-card--front { left: 50px; }

    .section-title {
        font-size: 2rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .store-button {
        padding: 0.75rem 1.25rem;
    }

    .store-text-large {
        font-size: 1rem;
    }

    .trust-indicators {
        justify-content: center;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-links {
        align-items: center;
    }

    .pitch-deck-title {
        font-size: 1.75rem;
    }

    .privacy-content {
        padding: 0 1rem;
    }

    .privacy-heading {
        font-size: 1.25rem;
    }

    .privacy-intro {
        font-size: 1rem;
    }
}

/* ── Verified Sitters Section ───────────────────────────────── */
.verified-sitters-section {
    padding: 5rem 0;
    background: linear-gradient(160deg, #faf8ff 0%, #f0f4ff 100%);
    position: relative;
    overflow: hidden;
}

.verified-sitters-section::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(108, 92, 231, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.verified-sitters-header {
    text-align: center;
    margin-bottom: 3rem;
}

.verified-sitters-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}

/* Marquee container */
.verified-sitters-grid {
    overflow: hidden;
    padding: 1rem 0 1.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Scrolling track */
.sitter-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: sitter-marquee 50s linear infinite;
    will-change: transform;
}

.sitter-track:hover {
    animation-play-state: paused;
}

@keyframes sitter-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Sitter card */
.sitter-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem 1.5rem 1.75rem;
    width: 260px;
    flex-shrink: 0;
    box-shadow: 0 2px 16px rgba(108, 92, 231, 0.07), 0 1px 4px rgba(0,0,0,0.04);
    border: 1.5px solid rgba(108, 92, 231, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

a.sitter-card {
    cursor: pointer;
}

.sitter-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 12px 36px rgba(108, 92, 231, 0.15), 0 2px 8px rgba(0,0,0,0.05);
}

/* Avatar */
.sitter-avatar-wrap {
    position: relative;
    margin-bottom: 1.1rem;
}

.sitter-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.sitter-avatar-fallback {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C5CE7 0%, #a78bfa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.sitter-verified-badge {
    position: absolute;
    bottom: 0;
    right: -2px;
    width: 22px;
    height: 22px;
    background: #16A34A;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
}

/* Text */
.sitter-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
}

.sitter-city {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 0.6rem;
}

/* Stars */
.sitter-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.5rem;
    justify-content: center;
}

.sitter-star {
    font-size: 0.85rem;
    color: #F59E0B;
}

.sitter-star-empty {
    font-size: 0.85rem;
    color: #D1D5DB;
}

.sitter-rating-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-left: 5px;
}

/* Bio */
.sitter-bio {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-top: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 640px) {
    .verified-sitters-section {
        padding: 3.5rem 0;
    }

    .sitter-card {
        width: 220px;
    }

    .sitter-bio {
        display: none;
    }
}

/* ── Platform Reviews Section ──────────────────────────────────────────── */
.platform-reviews-section {
    padding: 5rem 0;
    background: linear-gradient(160deg, #fffbf0 0%, #fff7ed 100%);
    position: relative;
    overflow: hidden;
}

.platform-reviews-section::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.platform-reviews-header {
    text-align: center;
    margin-bottom: 3rem;
}

.platform-reviews-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}

/* Marquee container */
.platform-reviews-grid {
    overflow: hidden;
    padding: 1rem 0 1.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Scrolling track */
.review-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: review-marquee 45s linear infinite;
    will-change: transform;
}

.review-track:hover {
    animation-play-state: paused;
}

@keyframes review-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Review card */
.review-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem 1.75rem 1.5rem;
    width: 300px;
    flex-shrink: 0;
    box-shadow: 0 2px 16px rgba(245, 158, 11, 0.08), 0 1px 4px rgba(0,0,0,0.04);
    border: 1.5px solid rgba(245, 158, 11, 0.18);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 12px 36px rgba(245, 158, 11, 0.2), 0 2px 8px rgba(0,0,0,0.05);
}

/* Decorative opening quote — removed (was 0.18 opacity, added visual clutter) */
.review-quote-mark {
    display: none;
}

/* Stars */
.review-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 0.9rem;
    margin-top: 0.5rem;
}

.review-star {
    font-size: 1rem;
    color: #F59E0B;
}

.review-star-empty {
    font-size: 1rem;
    color: #D1D5DB;
}

/* Review text */
.review-comment {
    font-size: 0.925rem;
    color: var(--text-primary);
    line-height: 1.65;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
    margin-bottom: 1.25rem;
}

.review-ratee {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: normal;
    margin-bottom: 0.75rem;
    opacity: 0.8;
}

/* Author row */
.review-author {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-top: 1px solid #FEF3C7;
    padding-top: 0.9rem;
}

.review-author-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.review-author-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .platform-reviews-section {
        padding: 3.5rem 0;
    }

    .review-card {
        width: 260px;
    }
}

/* =========================================================
   Language switcher (nav)
   ========================================================= */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
    padding: 2px;
    background: rgba(108, 92, 231, 0.08);
    border-radius: 999px;
    border: 1px solid rgba(108, 92, 231, 0.18);
}

.lang-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6c6c80);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.lang-btn:hover {
    color: var(--primary, #6c5ce7);
}

.lang-btn.active {
    background: #6c5ce7;
    color: #fff;
    box-shadow: 0 1px 3px rgba(108, 92, 231, 0.3);
}

@media (max-width: 768px) {
    .lang-switch {
        margin-left: 8px;
    }
    .lang-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}

/* ============================================================
   DESIGN ENHANCEMENTS
   ============================================================ */

/* --- Feature card icon backgrounds --- */

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(124, 58, 237, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--primary-purple);
    flex-shrink: 0;
}

.feature-icon svg {
    width: 30px;
    height: 30px;
}

.feature-card {
    border-top: 3px solid transparent;
    background-clip: padding-box;
}

.feature-card:hover {
    border-top-color: var(--primary-purple);
}

/* --- Showcase slide SVG icon --- */

.showcase-slide-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}

.showcase-slide-icon svg {
    width: 26px;
    height: 26px;
}

/* --- Showcase audience pills (remove emoji, add left accent) --- */

.showcase-audience-pill::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 8px;
    vertical-align: middle;
}

/* --- Showcase CTA button --- */

.showcase-slide-cta {
    margin-top: 2rem;
}

.showcase-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.showcase-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(139, 92, 246, 0.55);
}

/* --- Trust indicators: SVG icon styling --- */

.trust-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: var(--primary-purple);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-icon svg {
    width: 14px;
    height: 14px;
}

.trust-item {
    font-weight: 500;
    color: var(--text-primary);
}

/* --- How It Works: step visual flow --- */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}

.step {
    text-align: center;
    padding: 2rem 2rem 2rem;
    position: relative;
}

.step-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.25rem;
}

.step-connector {
    position: absolute;
    top: 50%;
    left: calc(50% + 36px);
    width: calc(100% - 8px);
    height: 2px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.5), rgba(139, 92, 246, 0.15));
    transform: translateY(-50%);
}

.step-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-purple);
    margin: 0 auto 1rem;
}

.step-icon-wrap svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .step-connector {
        display: none;
    }
}

/* --- Footer social links: icon + text layout --- */

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.social-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.social-link:hover svg {
    opacity: 1;
}

/* ============================================================
   ANIMATION ENHANCEMENTS
   ============================================================ */

/* --- Keyframes --- */

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px) translateY(10px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes stepPulse {
    0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

@keyframes shimmerSlide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

/* --- Hero entrance sequence --- */

.navbar {
    animation: fadeDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.hero .hero-badge {
    animation: fadeUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.hero-title {
    animation: fadeUp 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.hero-description {
    animation: fadeUp 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.32s both;
}

.hero .download-buttons {
    animation: fadeUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.44s both;
}

.trust-indicators {
    animation: fadeUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.56s both;
}

/* The phone cards now fly in individually (see .phone-card--back / --front),
   so the .hero-image container no longer slides as one block. */

/* --- Navbar link sliding underline --- */

.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: var(--primary-purple);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* --- Feature card icon hover --- */

.feature-icon {
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.2) rotate(10deg);
}

/* --- Step number pulse ring --- */

.step-number:hover {
    animation: stepPulse 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Section title scroll-fade (transition driven by JS) --- */

.section-title {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* --- Store button shimmer --- */

.store-button {
    position: relative;
    overflow: hidden;
}

.store-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    pointer-events: none;
}

.store-button:hover::before {
    animation: shimmerSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- Store button icon tilt --- */

.store-icon {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.store-button:hover .store-icon {
    transform: scale(1.15) rotate(-5deg);
}

/* --- Waitlist submit button shimmer --- */

.waitlist-submit-btn {
    position: relative;
    overflow: hidden;
}

.waitlist-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    pointer-events: none;
}

.waitlist-submit-btn:hover:not(:disabled)::before {
    animation: shimmerSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- Sitter card shimmer --- */

.sitter-card {
    position: relative;
    overflow: hidden;
}

.sitter-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 1;
}

.sitter-card:hover::before {
    animation: shimmerSlide 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- Review card shimmer --- */

.review-card {
    position: relative;
    overflow: hidden;
}

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 1;
}

.review-card:hover::before {
    animation: shimmerSlide 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- FAQ item hover highlight --- */

.faq-item {
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-left-color 0.2s ease;
}

.faq-item:hover {
    background: rgba(139, 92, 246, 0.03);
    border-left-color: rgba(139, 92, 246, 0.35);
}

/* --- Footer social link spring bounce --- */

.social-link {
    transition: color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-link:hover {
    transform: scale(1.2);
}

/* --- Reduced motion safety net --- */

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .hero .hero-badge,
    .hero-title,
    .hero-description,
    .hero .download-buttons,
    .trust-indicators,
    .hero-image,
    .phone-card--back,
    .phone-card--right,
    .phone-card--front {
        animation: none;
    }

    .section-title {
        transition: none;
    }

    .step-number:hover {
        animation: none;
    }

    .store-button::before,
    .waitlist-submit-btn::before,
    .sitter-card::before,
    .review-card::before {
        display: none;
    }

    .social-link:hover {
        transform: none;
    }

    .footer-links a:hover {
        transform: none;
    }

    .feature-icon,
    .store-icon {
        transition: none;
    }

    .nav-links a::after {
        transition: none;
    }
}

/* Cities Section */
.cities-section {
    padding: 60px 0;
    background: var(--white);
    border-top: 1px solid var(--border-color);
}

.cities-intro {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
    margin-top: -1.5rem;
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
}

.city-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    background: var(--light-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.city-card:hover {
    border-color: var(--primary-purple);
    box-shadow: 0 4px 16px rgba(108,92,231,0.12);
    transform: translateY(-2px);
}

.city-card[aria-current="page"] {
    border-color: var(--primary-purple);
    background: #f0eeff;
    pointer-events: none;
    cursor: default;
}

.city-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.city-card[aria-current="page"] .city-name {
    color: var(--primary-purple);
}

.city-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
}

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

/* Local SEO section expanded */
.local-seo .container {
    max-width: 720px;
}

.local-seo-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.local-seo h3 {
    text-align: left;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem;
}

.local-seo p {
    text-align: left;
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 0.85rem;
    line-height: 1.65;
}

.local-seo p strong {
    color: var(--primary-purple);
}

/* Services Section */
.services-section {
    padding: 60px 0;
    background: var(--light-bg);
    border-top: 1px solid var(--border-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.service-card {
    background: var(--white);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.service-card:hover {
    border-color: var(--primary-purple);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.10);
}

.service-icon {
    font-size: 1.6rem;
}

.service-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.service-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

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

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


/* ── Launch Countdown ──────────────────────────────────────────────────────── */
.launch-countdown {
    position: relative;
    background: #fff;
    border: 2px solid #e8e4ff;
    border-radius: 16px;
    margin-bottom: 36px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 32px rgba(108, 92, 231, 0.15);
}
.countdown-inner {
    position: relative;
    z-index: 2;
}
.countdown-label {
    color: #6C5CE7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin-top: 0;
}
.countdown-units {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
}
.countdown-number {
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 800;
    color: #6C5CE7;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}
.countdown-text {
    font-size: 11px;
    color: #a29bfe;
    font-weight: 700;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.countdown-sep {
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 800;
    color: #c4bffa;
    line-height: 1;
    padding-bottom: 22px;
    user-select: none;
}

/* celebration / live state */
.launch-countdown.is-launched {
    background: linear-gradient(135deg, #6C5CE7 0%, #a29bfe 100%);
    border-color: transparent;
}
.launch-countdown.is-launched .countdown-live-title,
.launch-countdown.is-launched .countdown-live-sub {
    color: #fff;
}
.countdown-live-title {
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 800;
    color: #6C5CE7;
    margin-bottom: 8px;
    margin-top: 0;
}
.countdown-live-sub {
    font-size: 15px;
    color: #a29bfe;
    margin-bottom: 18px;
}

@media (max-width: 600px) {
    .countdown-unit { min-width: 54px; }
    .launch-countdown { padding: 20px 12px; margin-bottom: 24px; }
}

/* =======================================================================
   Booking Funnel — landing-page mini booking flow.
   Reuses the site design tokens: 20px card radius, soft layered shadows,
   purple gradient accents, cubic-bezier(0.25,0.46,0.45,0.94) easing.
   ======================================================================= */

@keyframes funnelPanelIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes funnelPop {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Hero search bar (launcher) ──────────────────────────────────────── */
.funnel-herobar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    max-width: 580px;
    margin: 28px 0 22px;
    padding: 8px;
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.20);
}
.funnel-herobar-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}
.funnel-herobar-field:hover { background: var(--light-bg); }
.funnel-herobar-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.funnel-herobar-value {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.funnel-herobar-value:not(.is-placeholder) { color: var(--primary-violet); font-weight: 600; }
.funnel-herobar-sep { width: 1px; align-self: center; height: 30px; background: var(--border-color); }
.funnel-herobar-search {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.funnel-herobar-search:hover { transform: scale(1.08); box-shadow: 0 8px 22px rgba(139, 92, 246, 0.5); }
.funnel-herobar-search:active { transform: scale(0.96); }
.funnel-herobar-search svg { width: 22px; height: 22px; }

/* ── Hero bar dropdown panel ─────────────────────────────────────────── */
.herobar-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(17, 24, 39, 0.20);
    z-index: 300;
    overflow-y: auto;
    max-height: 80vh;
    animation: heroBarPanelIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes heroBarPanelIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.herobar-panel .funnel-panel { margin-top: 0; box-shadow: none; border-radius: 20px; }
.herobar-loading { display: flex; align-items: center; justify-content: center; min-height: 80px; }

/* ── Section ─────────────────────────────────────────────────────────── */
.booking-funnel {
    padding: 84px 0;
    scroll-margin-top: 88px;
    background:
        radial-gradient(circle, rgba(139, 92, 246, 0.10) 1px, transparent 1.5px) 0 0 / 26px 26px,
        var(--light-bg);
}
.funnel-shell { max-width: 760px; margin: 0 auto; }

/* Scroll-reveal — mirrors the feature-card / section-title entrances. */
.booking-funnel .funnel-intro,
.booking-funnel .funnel-timeline {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.booking-funnel.funnel-revealed .funnel-intro { opacity: 1; transform: none; }
.booking-funnel.funnel-revealed .funnel-timeline { opacity: 1; transform: none; transition-delay: 0.12s; }

/* ── Intro card ──────────────────────────────────────────────────────── */
.funnel-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--white);
    border-radius: 20px;
    padding: 26px 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.funnel-intro-title {
    font-size: 25px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}
.funnel-intro-title::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-purple), var(--primary-violet));
}
.funnel-intro-subtitle { font-size: 14px; color: var(--text-secondary); margin: 14px 0 0; }
.funnel-startover {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--white);
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.funnel-startover:hover {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
    transform: translateY(-1px);
}

/* ── Timeline / steps ────────────────────────────────────────────────── */
.funnel-timeline { position: relative; }
.funnel-step {
    position: relative;
    display: flex;
    gap: 18px;
    padding-bottom: 16px;
    scroll-margin-top: 100px;
}
.funnel-step:last-child { padding-bottom: 0; }
.funnel-step::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 40px;
    bottom: -4px;
    width: 2px;
    background: var(--border-color);
}
.funnel-step:last-child::before { display: none; }
.funnel-step.is-done::before {
    background: linear-gradient(180deg, var(--primary-purple), var(--secondary-purple));
}

.funnel-step-circle {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    background: #EBEDF3;
    color: var(--text-secondary);
    z-index: 1;
    transition: background 0.3s ease, color 0.3s ease;
}
.funnel-step.is-active .funnel-step-circle,
.funnel-step.is-done .funnel-step-circle {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: var(--white);
}
.funnel-step.is-active .funnel-step-circle {
    animation: stepPulse 2.6s ease-out infinite;
}
.funnel-step-circle svg { width: 19px; height: 19px; }

.funnel-step-body { flex: 1; min-width: 0; padding-top: 3px; }
.funnel-step-headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
}
.funnel-step-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.funnel-step.is-todo .funnel-step-title { color: #A6AAB7; }
.funnel-step-summary { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.funnel-edit {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    background: var(--white);
    color: var(--primary-purple);
    cursor: pointer;
    transition: all 0.25s ease;
}
.funnel-edit:hover {
    border-color: var(--primary-purple);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2);
}
.funnel-edit svg { width: 15px; height: 15px; }

/* ── Active step panel ───────────────────────────────────────────────── */
.funnel-panel {
    margin-top: 14px;
    background: var(--white);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.08);
}
.funnel-panel--enter { animation: funnelPanelIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

.funnel-panel-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: rgba(139, 92, 246, 0.07);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-violet);
}
.funnel-panel-note svg { width: 17px; height: 17px; flex: 0 0 auto; }

.funnel-next {
    width: 100%;
    margin-top: 18px;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.funnel-next:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.45);
}
.funnel-next:active:not(:disabled) { transform: translateY(0); }
.funnel-next:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ── Service picker ──────────────────────────────────────────────────── */
.funnel-service-list { display: flex; flex-direction: column; gap: 10px; }
.funnel-service-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 2px solid #EEF0F5;
    border-radius: 16px;
    background: var(--white);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.funnel-service-option:hover {
    border-color: var(--secondary-purple);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(139, 92, 246, 0.16);
}
.funnel-service-option.is-selected {
    border-color: var(--primary-purple);
    background: rgba(139, 92, 246, 0.05);
}
.funnel-service-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary-violet);
    transition: background 0.22s ease;
}
.funnel-service-option:hover .funnel-service-icon { background: rgba(139, 92, 246, 0.17); }
.funnel-service-icon svg { width: 24px; height: 24px; }
.funnel-service-name { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--text-primary); }
.funnel-service-go {
    flex: 0 0 auto;
    color: #C2C6D2;
    display: flex;
    transition: color 0.22s ease, transform 0.22s ease;
}
.funnel-service-option:hover .funnel-service-go { color: var(--primary-purple); transform: translateX(3px); }
.funnel-service-option.is-selected .funnel-service-go { color: var(--primary-purple); }
.funnel-service-go svg { width: 20px; height: 20px; }
/* Staggered entrance for the service rows when the panel opens. */
.funnel-panel--enter .funnel-service-option {
    animation: fadeUp 0.44s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.funnel-panel--enter .funnel-service-option:nth-child(1) { animation-delay: 0.05s; }
.funnel-panel--enter .funnel-service-option:nth-child(2) { animation-delay: 0.10s; }
.funnel-panel--enter .funnel-service-option:nth-child(3) { animation-delay: 0.15s; }
.funnel-panel--enter .funnel-service-option:nth-child(4) { animation-delay: 0.20s; }
.funnel-panel--enter .funnel-service-option:nth-child(5) { animation-delay: 0.25s; }
.funnel-panel--enter .funnel-service-option:nth-child(6) { animation-delay: 0.30s; }
.funnel-panel--enter .funnel-service-option:nth-child(7) { animation-delay: 0.35s; }
.funnel-panel--enter .funnel-service-option:nth-child(8) { animation-delay: 0.40s; }

/* ── Inline calendar ─────────────────────────────────────────────────── */
.funnel-cal { max-width: 372px; margin: 0 auto; user-select: none; }
.funnel-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.funnel-cal-month { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.funnel-cal-nav {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.22s ease;
}
.funnel-cal-nav:hover:not(:disabled) {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
    transform: translateY(-1px);
}
.funnel-cal-nav:disabled { opacity: 0.32; cursor: not-allowed; }
.funnel-cal-nav svg { width: 16px; height: 16px; }
.funnel-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.funnel-cal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #A6AAB7;
    padding: 6px 0 10px;
}
.funnel-cal-day {
    position: relative;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.funnel-cal-day:hover:not(:disabled):not(.is-empty):not(.is-selected) {
    background: rgba(139, 92, 246, 0.12);
    transform: scale(1.04);
}
.funnel-cal-day.is-empty { cursor: default; }
.funnel-cal-day:disabled { color: #CFD2DA; cursor: not-allowed; }
.funnel-cal-day.is-in-range { background: rgba(139, 92, 246, 0.13); border-radius: 0; }
.funnel-cal-day.is-selected {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    color: var(--white);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.funnel-cal-day.is-range-start { border-radius: 11px 0 0 11px; }
.funnel-cal-day.is-range-end { border-radius: 0 11px 11px 0; }
.funnel-cal-day.is-range-start.is-range-end { border-radius: 11px; }

/* ── Time card + stepper picker ──────────────────────────────────────── */
.fnl-tcards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.fnl-tcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--white);
    border: 2px solid #EEF0F5;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
    text-align: left;
    font-family: inherit;
}
.fnl-tcard:hover { border-color: #C4B5FD; }
.fnl-tcard.is-active {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}
.fnl-tcard-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.fnl-tcard-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
.fnl-tcard-val.is-placeholder { color: #C4C9D4; font-weight: 500; font-size: 16px; }

.fnl-tstepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 24px;
    background: #F8F7FF;
    border-radius: 18px;
    margin-bottom: 16px;
}
.fnl-tscol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.fnl-tsarrow {
    width: 38px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    color: #9CA3AF;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.fnl-tsarrow:hover { border-color: var(--primary-purple); color: var(--primary-purple); background: #F5F3FF; }
.fnl-tsval {
    font-size: 38px;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 52px;
    text-align: center;
    line-height: 1;
    letter-spacing: -1px;
}
.fnl-tssep {
    font-size: 32px;
    font-weight: 800;
    color: #D1D5DB;
    padding-bottom: 2px;
    margin: 0 2px;
}
.fnl-tscol--period {
    gap: 6px;
    margin-left: 10px;
}
.fnl-tsperiod {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 9px;
    border: 2px solid #E5E7EB;
    background: var(--white);
    color: #9CA3AF;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 52px;
    text-align: center;
}
.fnl-tsperiod:hover { border-color: var(--primary-purple); color: var(--primary-purple); }
.fnl-tsperiod.is-sel {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    color: var(--white);
}

/* ── Pet counters ────────────────────────────────────────────────────── */
.funnel-counter-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 2px solid #EEF0F5;
    border-radius: 16px;
    margin-bottom: 10px;
}
.funnel-counter-row:last-of-type { margin-bottom: 0; }
.funnel-counter-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary-violet);
}
.funnel-counter-icon svg { width: 22px; height: 22px; }
.funnel-counter-label { flex: 1; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.funnel-counter-ctrls { display: flex; align-items: center; gap: 14px; }
.funnel-counter-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    background: var(--white);
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.18s ease;
}
.funnel-counter-btn:hover:not(:disabled) {
    border-color: var(--primary-purple);
    color: var(--primary-purple);
    transform: scale(1.08);
}
.funnel-counter-btn:active:not(:disabled) { transform: scale(0.92); }
.funnel-counter-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.funnel-counter-val {
    min-width: 24px;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

/* ── Result step ─────────────────────────────────────────────────────── */
.funnel-result { text-align: center; }
.funnel-result-icon {
    width: 64px;
    height: 64px;
    margin: 2px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.15));
    color: var(--primary-violet);
    animation: funnelPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.funnel-result-icon svg { width: 32px; height: 32px; }
.funnel-result-title { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.funnel-result-text {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0 auto 20px;
    line-height: 1.65;
    max-width: 420px;
}
.funnel-store-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.funnel-store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--text-primary);
    color: var(--white);
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.funnel-store-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); }
.funnel-store-btn svg { width: 26px; height: 26px; }
.funnel-store-btn .store-text-large { font-size: 16px; font-weight: 700; line-height: 1.15; }

.funnel-email-capture { border-top: 1.5px solid var(--border-color); padding-top: 20px; }
.funnel-email-prompt { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 0 12px; }
.funnel-device-toggle {
    display: inline-flex;
    padding: 4px;
    margin-bottom: 14px;
    background: var(--light-bg);
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
}
.funnel-device-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.22s ease;
}
.funnel-device-opt svg { width: 15px; height: 15px; }
.funnel-device-opt.is-active {
    background: var(--white);
    color: var(--primary-violet);
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.12);
}
.funnel-email-row { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.funnel-email-input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    font-size: 14px;
    border: 2px solid #EEF0F5;
    border-radius: 12px;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}
.funnel-email-input:focus { outline: none; border-color: var(--primary-purple); }
.funnel-email-btn {
    flex: 0 0 auto;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-violet));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.funnel-email-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.45); }
.funnel-email-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.funnel-msg { font-size: 13px; margin-top: 12px; min-height: 18px; font-weight: 600; }
.funnel-msg.is-error { color: #D14343; }
.funnel-msg.is-success { color: #16A34A; }

/* ───────────────────────────────────────────────────────────────
   Laptop mockup — used on /for-web for the "Coming Soon" hero
   ─────────────────────────────────────────────────────────────── */

.laptop-stage {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 20px 0 60px;
    perspective: 1400px;
}

.laptop-float-wrapper {
    position: relative;
    z-index: 2;
    animation: laptopFloat 6s ease-in-out infinite;
    transform-style: preserve-3d;
    animation-delay: -1.5s;
}

.laptop-mockup {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    transform-style: preserve-3d;
}

/* Screen lid — aluminium frame with thin even bezels */
.laptop-lid {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    background: linear-gradient(155deg, #34343a 0%, #1d1d22 48%, #0f0f12 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 0 1px rgba(0, 0, 0, 0.7),
        0 26px 55px -16px rgba(20, 14, 50, 0.45);
    padding: 11px 11px 14px;
}

/* Top camera dot, centred in the bezel */
.laptop-lid::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #5a5a60, #161618 70%);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    z-index: 2;
}

/* Screen area */
.laptop-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #000;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.laptop-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Gloss / reflection overlay */
.laptop-gloss {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        130deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.03) 25%,
        transparent 55%
    );
    pointer-events: none;
    z-index: 3;
    border-radius: 8px;
}

/* "Coming Soon" badge floating on the screen */
.laptop-coming-soon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-4deg);
    z-index: 4;
    background: rgba(108, 92, 231, 0.92);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.5px;
    padding: 12px 26px;
    border-radius: 14px;
    box-shadow:
        0 16px 40px -8px rgba(108, 92, 231, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
        0 0 0 6px rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
    animation: comingSoonPulse 3.4s ease-in-out infinite;
}
.laptop-coming-soon small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    opacity: 0.85;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* Aluminium base deck — clearly wider than the screen, foreshortened (widest
   at the front edge) with a rounded front lip and a centred opening notch */
.laptop-base {
    position: relative;
    width: 126%;
    max-width: none;
    height: 24px;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #e6e6ec 0%, #cdcdd5 24%, #a8a8b2 60%, #7a7a84 100%);
    border-radius: 3px 3px 12px 12px;
    box-shadow:
        0 32px 40px -14px rgba(20, 14, 50, 0.40),
        0 12px 18px -4px rgba(0, 0, 0, 0.22),
        inset 0 2px 0 rgba(255, 255, 255, 0.70),
        inset 0 -2px 3px rgba(0, 0, 0, 0.20);
    /* foreshortened wedge: a touch narrower where it meets the screen, widest at the front */
    clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}

/* Subtle hinge shadow where the screen meets the deck */
.laptop-base::after {
    content: '';
    position: absolute;
    top: 0;
    left: 7%;
    right: 7%;
    height: 2.5px;
    background: linear-gradient(180deg, #5a5a64, #8a8a94);
    border-radius: 0 0 3px 3px;
}

/* Front opening notch, centred on the front lip */
.laptop-base::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 13%;
    height: 7px;
    background: linear-gradient(180deg, #9a9aa4 0%, #74747e 100%);
    border-radius: 0 0 7px 7px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.30);
}

/* Soft contact shadow under the laptop */
.laptop-glow {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 76%;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(60, 50, 110, 0.30), transparent 72%);
    filter: blur(22px);
    z-index: 0;
    animation: laptopGlowFloat 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes laptopFloat {
    0%, 100% { transform: translateY(0) rotateX(2deg); }
    50%      { transform: translateY(-14px) rotateX(2deg); }
}

@keyframes laptopGlowFloat {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.55; }
    50%      { transform: translateX(-50%) scale(0.85); opacity: 0.35; }
}

@keyframes comingSoonPulse {
    0%, 100% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
    50%      { transform: translate(-50%, -50%) rotate(-4deg) scale(1.05); }
}

/* For-Web hero layout — center the laptop below the text */
.web-hero .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 50px;
}
.web-hero .hero-text {
    max-width: 720px;
}
.web-hero .hero-image {
    width: 100%;
    max-width: 720px;
}

/* "Notify me" pill button in the web hero */
.web-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #8475F0, #6C5CE7);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 14px 30px -8px rgba(108, 92, 231, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
}
#web-notify-btn {
    margin-bottom: 2rem;
}
.web-notify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -8px rgba(108, 92, 231, 0.65);
}

/* Notify CTA sits on the purple download-cta background — give the badge and
   button enough contrast (the shared hero/button styles are tuned for light bg) */
#notify .hero-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    margin-bottom: 1rem;
}
#notify .web-notify-btn {
    background: #fff;
    color: var(--primary-purple);
    box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.28);
}
#notify .web-notify-btn:hover {
    box-shadow: 0 18px 36px -8px rgba(0, 0, 0, 0.36);
}

@media (max-width: 768px) {
    .laptop-stage { max-width: 100%; padding: 10px 0 40px; }
    .laptop-coming-soon { font-size: 15px; padding: 9px 18px; }
    .laptop-coming-soon small { font-size: 9px; letter-spacing: 1px; }
}
@media (max-width: 480px) {
    .laptop-coming-soon { font-size: 13px; padding: 7px 14px; }
}

.funnel-loading { text-align: center; padding: 36px; font-size: 14px; color: var(--text-secondary); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .funnel-herobar {
        flex-direction: column;
        border-radius: 22px;
        gap: 0;
        max-width: 100%;
        padding: 10px;
    }
    .funnel-herobar-field { border-radius: 16px; padding: 12px 16px; }
    .funnel-herobar-sep { width: auto; height: 1px; align-self: stretch; margin: 2px 14px; }
    .funnel-herobar-search { width: 100%; height: 48px; border-radius: 16px; margin-top: 8px; }
    .booking-funnel { padding: 56px 0; }
    .funnel-intro { flex-direction: column; padding: 22px; }
    .funnel-intro-title { font-size: 22px; }
    .funnel-step { gap: 14px; }
    .funnel-panel { padding: 18px; }
    .fnl-tsval { font-size: 30px; min-width: 44px; }
    .fnl-tssep { font-size: 26px; }
    .funnel-email-row { flex-direction: column; }
    .funnel-email-btn { padding: 13px; }
}

/* ── Sitter Map Section (dark Cyprus map with avatar pins) ───────── */
.sitter-map-section {
    background: linear-gradient(180deg, #0D0720 0%, #1A0F3C 40%, #120828 100%);
    padding: 80px 0 100px;
}
.sitter-map-section .showcase-header { text-align: center; margin-bottom: 48px; }
.sitter-map-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}
.sitter-map {
    width: 100%;
    height: 520px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    background: #0D0720;
}
@media (max-width: 640px) {
    .sitter-map { height: 420px; border-radius: 18px; }
    .sitter-map-section { padding: 56px 0 72px; }
}

/* Leaflet dark theme tweaks */
.sitter-map .leaflet-container { background: #0D0720; font-family: inherit; }
.sitter-map .leaflet-control-attribution {
    background: rgba(13, 7, 32, 0.7);
    color: rgba(255, 255, 255, 0.5);
}
.sitter-map .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.7); }

/* Avatar pins */
.sitter-pin { background: transparent; border: none; }
.sitter-pin-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.5), 0 0 0 1.5px rgba(108, 92, 231, 0.4);
    background-color: #6C5CE7;
    background-size: cover;
    background-position: center;
}
.sitter-pin-fallback {
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
.sitter-pin-popup { text-align: center; padding: 2px 4px; }
.sitter-pin-popup strong { color: #1A0F3C; font-size: 14px; }
.sitter-pin-popup span { color: #6C5CE7; font-size: 12px; }

/* Cluster bubbles (count of merged sitters) */
.sitter-cluster {
    background: transparent;
    border: none;
}
.sitter-cluster span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #8475F0, #6C5CE7);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 14px;
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.6), 0 0 0 2px rgba(108, 92, 231, 0.35);
}

/* ─── Services Section ─────────────────────────────────── */
.services-section {
    padding: 64px 0 56px;
    background: #F7F8FC;
}
.services-header {
    text-align: center;
    margin-bottom: 36px;
}
.services-header .section-title {
    margin-bottom: 12px;
}
.services-subtitle {
    color: #6b7280;
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 840px;
}
.service-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #fff;
    border: 1.5px solid #E5E8F5;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    color: #2d1b69;
    transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
    box-shadow: 0 1px 4px rgba(108, 92, 231, 0.06);
}
.service-pill:hover {
    background: #EEEAFF;
    border-color: #6C5CE7;
    color: #6C5CE7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
}
@media (max-width: 600px) {
    .services-section { padding: 48px 0 40px; }
    .service-pill { font-size: 14px; padding: 9px 18px; }
}

/* ===== Why Petsly — comparison ===== */
.why-petsly-section { padding: 80px 0; background: #F7F8FC; }
.why-petsly-header { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.why-petsly-subtitle { font-size: 18px; line-height: 1.6; color: #5A5E73; margin-top: 12px; }
.why-petsly-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
    align-items: stretch;
}
.why-petsly-card { border-radius: 20px; padding: 32px; border: 1px solid #E5E8F5; background: #fff; }
.why-petsly-card--cons { background: #fff; border-color: #ECECF2; }
.why-petsly-card--pros {
    background: linear-gradient(160deg, #6C5CE7 0%, #5A4BD4 100%);
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(108, 92, 231, 0.28);
}
.why-petsly-card-title { font-size: 20px; font-weight: 800; margin: 0 0 20px; }
.why-petsly-card--cons .why-petsly-card-title { color: #8F92A1; }
.why-petsly-card--pros .why-petsly-card-title { color: #fff; }
.why-petsly-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.why-petsly-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
.why-petsly-card--cons .why-petsly-list li { color: #6A6E82; }
.why-petsly-card--pros .why-petsly-list li { color: #F4F2FF; }
.why-petsly-x, .why-petsly-check {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    margin-top: 1px;
}
.why-petsly-x { background: #F1E0E0; color: #C0584F; }
.why-petsly-check { background: rgba(255, 255, 255, 0.22); color: #fff; }
@media (max-width: 720px) {
    .why-petsly-section { padding: 56px 0; }
    .why-petsly-grid { grid-template-columns: 1fr; gap: 16px; }
    .why-petsly-card { padding: 24px; }
}