/* ============================================
   LOCAL HOURS — LANDING PAGE STYLES
   ============================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --green-900: #0D3B0F;
    --green-800: #15803d;
    --green-700: #16a34a;
    --green-600: #22c55e;
    --green-500: #22c55e;
    --green-400: #4ade80;
    --green-300: #86efac;
    --green-200: #bbf7d0;
    --green-100: #dcfce7;
    --green-50: #f0fdf4;

    --bg: #ffffff;
    --surface: #FFFFFF;
    --text: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --divider: rgba(0,0,0,0.07);

    --bg-glass: rgba(255,255,255,0.7);
    --bg-card: rgba(0,0,0,0.02);
    --bg-card-hover: rgba(0,0,0,0.04);
    --border-subtle: rgba(0,0,0,0.07);
    --border-hover: rgba(0,0,0,0.14);
    --green-glow: #22c55e;
    --green-muted: rgba(34,197,94,0.1);

    --status-open: #16a34a;
    --status-closed: #dc2626;
    --status-offline: #9ca3af;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.14);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

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

/* ---------- BRAND GLOW ---------- */
.brand {
    font-weight: 800;
    color: var(--green-800);
    text-shadow:
        0 0 8px rgba(46, 125, 50, 0.25),
        0 0 20px rgba(76, 175, 80, 0.12);
    letter-spacing: -0.01em;
}
.footer .brand,
.cta-content .brand {
    color: #fff;
    text-shadow:
        0 0 10px rgba(165, 214, 167, 0.4),
        0 0 24px rgba(129, 199, 132, 0.2);
}

/* ---------- TEXT GRADIENT ---------- */
.text-gradient {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px;
    padding: 14px 28px;
    transition: all 0.3s var(--ease-out);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 4px 20px rgba(34,197,94,0.3);
}
.btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(34,197,94,0.4);
}
.btn-primary:hover::before { opacity: 1; }

.btn-outline {
    border: 1px solid var(--border-subtle);
    color: var(--text);
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
}
.btn-outline:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 16px 36px;
    font-size: 16px;
}

.btn-nav {
    padding: 8px 20px; font-size: 14px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 100px;
    box-shadow: 0 0 20px rgba(34,197,94,0.2);
}
.btn-nav:hover {
    box-shadow: 0 0 30px rgba(34,197,94,0.4);
    transform: translateY(-1px);
}

/* ---------- SECTION COMMON ---------- */
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 60px;
}
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-muted);
    color: var(--green-700);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(34,197,94,0.2);
    margin-bottom: 16px;
}
.section-tag::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--green-glow);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--green-glow);
}

/* Amber variant — peach pill + bold spaced orange text (no dot). Used on
   Our Mission + The Journey to match the reference style. */
.section-tag.section-tag-amber {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    color: #E65100;
    border: 1px solid rgba(230, 81, 0, 0.22);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 8px 18px;
    box-shadow: 0 2px 10px rgba(230, 81, 0, 0.08);
}
.section-tag.section-tag-amber::before { display: none; }
.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.section-header p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ---------- ANIMATIONS ---------- */
[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
    will-change: opacity, transform, filter;
}
[data-animate="fade-left"] { transform: translateX(-40px) translateY(0); }
[data-animate="fade-right"] { transform: translateX(40px) translateY(0); }
[data-animate="scale"] { transform: scale(0.92); }
[data-animate].visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.4s var(--ease-out);
}
.navbar.scrolled {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 0;
    box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    color: var(--green-800);
}
.logo-icon {
    width: 38px;
    height: 38px;
    background: var(--green-800);
    color: #fff;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-links {
    display: flex;
    gap: 36px;
}
.nav-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition);
    position: relative;
}
.nav-links a:hover { color: var(--green-800); }
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--green-700);
    border-radius: 2px;
    transition: width var(--transition);
}
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.coming-soon-btn {
    position: relative;
    opacity: 0.85;
}
.badge-soon {
    background: var(--green-400);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}
.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all var(--transition);
}

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    padding: 140px 0 80px;
    background: #ffffff;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 100%);
    pointer-events: none;
}

.hero-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.shape-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(34,197,94,0.08) 0%, transparent 70%);
    top: -200px; right: -100px;
}
.shape-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
    bottom: -100px; left: -100px;
}
.shape-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(168,85,247,0.05) 0%, transparent 70%);
    top: 40%; left: 30%;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -20px) scale(1.05); }
    66% { transform: translate(-10px, 15px) scale(0.95); }
}

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.18);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--green-700);
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}
.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--green-500);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 520px;
    margin-bottom: 32px;
}
.hero-subtitle em {
    color: var(--green-700);
    font-style: italic;
    font-weight: 600;
}

.hero-cta-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.hero-store-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.hero-store-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    color: var(--text);
    transition: all 0.3s var(--ease-out);
}
.hero-store-btn small {
    font-size: 10px;
    opacity: 0.6;
    display: block;
    line-height: 1.2;
}
.hero-store-btn strong {
    font-size: 14px;
    display: block;
    line-height: 1.2;
}
.hero-store-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hero-store-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.coming-soon-wrap {
    position: relative;
}
.coming-soon-wrap .badge-soon {
    font-size: 10px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero-stats {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 14px 20px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    transition: all 0.35s var(--ease-out);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent 60%);
    pointer-events: none;
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34,197,94,0.2);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 0 20px rgba(34,197,94,0.06);
}
.stat-icon-3d {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 3px 8px rgba(27, 94, 32, 0.15),
        0 1px 2px rgba(27, 94, 32, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
}
/* Subtle inner highlight for 3D effect */
.stat-icon-3d::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
    border-radius: 12px 12px 50% 50%;
    pointer-events: none;
}
.stat-icon-pin {
    background: linear-gradient(145deg, #e8f5e9, #a5d6a7);
}
.stat-icon-bolt {
    background: linear-gradient(145deg, #f1f8e9, #c5e1a5);
}
.stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}
.stat-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.stat-text span {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* -- Hero Phone Mockup -- */
.hero-visual {
    display: flex;
    justify-content: center;
    position: relative;
    min-height: 600px;
}

.phone-mockup { position: relative; z-index: 2; }

.phone-frame {
    width: 280px;
    height: 580px;
    background: #1a1a1a;
    border-radius: 48px;
    padding: 8px;
    position: relative;
    box-shadow:
        var(--shadow-xl),
        0 0 0 1.5px #333 inset,
        0 0 0 3px #1a1a1a;
}
/* iPhone side buttons */
.phone-frame::before {
    content: '';
    position: absolute;
    right: -3px;
    top: 120px;
    width: 3px;
    height: 48px;
    background: #2a2a2a;
    border-radius: 0 2px 2px 0;
}
.phone-frame::after {
    content: '';
    position: absolute;
    left: -3px;
    top: 100px;
    width: 3px;
    height: 28px;
    background: #2a2a2a;
    border-radius: 2px 0 0 2px;
    box-shadow: 0 40px 0 #2a2a2a, 0 70px 0 #2a2a2a;
}
/* Dynamic Island - pill shaped */
.phone-notch {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: #000;
    border-radius: 20px;
    z-index: 5;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
/* Tiny camera dot inside Dynamic Island */
.phone-notch::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #0a0a0a;
    border-radius: 50%;
    border: 1px solid #222;
}
.phone-screen {
    width: 100%;
    height: 100%;
    background: var(--bg);
    border-radius: 42px;
    overflow-y: auto;
    padding: 50px 14px 14px;
}
.phone-screen::-webkit-scrollbar { display: none; }

.screen-header { margin-bottom: 14px; }
.screen-greeting {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.screen-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.screen-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow: hidden;
}
.chip {
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--divider);
    color: var(--text-secondary);
    white-space: nowrap;
}
.chip.active {
    background: var(--green-800);
    color: #fff;
    border-color: var(--green-800);
}

.screen-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.card-banner {
    height: 70px;
    background: linear-gradient(135deg, var(--green-200), var(--green-400));
}
.card-banner-2 {
    background: linear-gradient(135deg, #FFE0B2, #FF9800);
}
.card-banner-3 {
    background: linear-gradient(135deg, #C8E6C9, #66BB6A);
}
.card-body { padding: 10px 12px; }
.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.card-name { font-size: 13px; font-weight: 700; }
.status-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.status-badge.open {
    background: #E8F5E9;
    color: var(--status-open);
}
.status-badge.closed {
    background: #FFEBEE;
    color: var(--status-closed);
}
.card-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.card-tags { display: flex; gap: 4px; }
.tag {
    font-size: 10px;
    color: var(--green-700);
    background: var(--green-50);
    padding: 2px 8px;
    border-radius: 4px;
}

.phone-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.2), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* -- Secondary Faded Phone (Vendor Detail) -- */
.phone-secondary {
    position: absolute;
    left: -80px;
    top: 60px;
    z-index: -1;
    opacity: 0.55;
    transform: rotate(-6deg) scale(0.78);
    transition: opacity 0.5s ease, transform 0.5s ease;
    filter: blur(0.5px);
}
.phone-secondary:hover {
    opacity: 0.75;
    transform: rotate(-4deg) scale(0.8);
    filter: blur(0px);
}
.phone-frame-sm {
    width: 240px;
    height: 500px;
    border-radius: 42px;
    padding: 7px;
    box-shadow: var(--shadow-lg);
}
/* Dynamic Island for small phones */
.phone-notch-sm {
    width: 72px;
    height: 22px;
    background: #000;
    border-radius: 16px;
    top: 14px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
.phone-notch-sm::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #0a0a0a;
    border-radius: 50%;
    border: 1px solid #222;
}
.phone-screen-sm {
    border-radius: 36px;
    padding: 0;
    overflow: hidden;
}

/* Vendor detail mockup content */
.detail-banner-mock {
    height: 110px;
    background: linear-gradient(135deg, var(--green-400), var(--green-800));
    position: relative;
}
.detail-body-mock {
    padding: 14px 14px 10px;
    position: relative;
}
.detail-avatar-mock {
    position: absolute;
    top: -28px;
    left: 14px;
}
.avatar-circle {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border: 3px solid #fff;
}
.detail-name-mock {
    font-size: 15px;
    font-weight: 800;
    margin-top: 28px;
    margin-bottom: 3px;
    color: var(--text);
}
.detail-cat-mock {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.detail-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.detail-dist {
    font-size: 10px;
    color: var(--text-muted);
}
.detail-section-mock {
    margin-bottom: 12px;
}
.detail-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.detail-hour-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-secondary);
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f0;
}
.detail-tags-mock {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.detail-stats-mock {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.detail-stat-item {
    flex: 1;
    text-align: center;
    background: var(--green-50);
    padding: 8px 4px;
    border-radius: 8px;
}
.detail-stat-item strong {
    font-size: 14px;
    color: var(--green-800);
    display: block;
}
.detail-stat-item small {
    font-size: 8px;
    color: var(--text-muted);
}

/* -- Tertiary Faded Phone (Map View) -- */
.phone-tertiary {
    position: absolute;
    right: -70px;
    bottom: -30px;
    z-index: 1;
    opacity: 0.5;
    transform: rotate(5deg) scale(0.75);
    transition: opacity 0.5s ease, transform 0.5s ease;
    filter: blur(0.5px);
}
.phone-tertiary:hover {
    opacity: 0.72;
    transform: rotate(3deg) scale(0.77);
    filter: blur(0px);
}

/* Map screen mockup content */
.map-screen-mock {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 27px;
}
.map-bg-mock {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #dcedc8 0%, #c8e6c9 30%, #e8f5e9 50%, #f1f8e9 70%, #dcedc8 100%);
    position: relative;
}
.map-road {
    position: absolute;
    background: rgba(255,255,255,0.7);
    border-radius: 1px;
}
.map-road-h {
    width: 100%;
    height: 3px;
    top: 45%;
}
.map-road-v {
    width: 3px;
    height: 100%;
    left: 48%;
}
.map-road-d {
    width: 120%;
    height: 3px;
    top: 65%;
    left: -10%;
    transform: rotate(-20deg);
}
.map-pin-mock {
    position: absolute;
    font-size: 18px;
    z-index: 2;
    animation: bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
.map-pin-mock:nth-child(5) { animation-delay: 0.2s; }
.map-pin-mock:nth-child(6) { animation-delay: 0.5s; }
.map-pin-mock:nth-child(7) { animation-delay: 0.8s; }
.map-pin-active {
    font-size: 24px;
    z-index: 3;
    animation: bounce 1.5s ease-in-out infinite;
}
.map-sheet-mock {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 27px 27px;
    padding: 10px 12px 14px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    z-index: 4;
}
.map-sheet-handle {
    width: 32px;
    height: 3px;
    background: var(--divider);
    border-radius: 2px;
    margin: 0 auto 8px;
}
.map-sheet-card {
    display: flex;
    gap: 10px;
    align-items: center;
}
.map-sheet-img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #C8E6C9, #66BB6A);
    flex-shrink: 0;
}
.map-sheet-info { flex: 1; }
.map-sheet-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.map-sheet-cat {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* -- Floating Accent Cards -- */
.floating-card {
    position: absolute;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 12px 18px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    z-index: 3;
    white-space: nowrap;
}
.floating-card strong { display: block; font-size: 16px; line-height: 1; }
.floating-card small { display: block; font-size: 10px; color: var(--text-muted); font-weight: 400; }
.fc-icon { font-size: 20px; }

.fc-rating {
    bottom: 100px;
    left: -40px;
    animation-delay: 0s;
}
.fc-open {
    top: 80px;
    right: -30px;
    font-size: 12px;
    padding: 10px 16px;
    animation-delay: 1.5s;
}
.fc-dot {
    width: 8px;
    height: 8px;
    background: var(--green-500);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
}
.hero-wave svg {
    width: 100%;
    height: 80px;
}

/* ============================================
   MARQUEE SOCIAL PROOF STRIP
   ============================================ */
.marquee-section {
    padding: 48px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
    background: #f8faf8;
}
.marquee-track {
    display: flex; gap: 48px;
    animation: marquee-scroll 30s linear infinite;
    width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s var(--ease-out);
}
.marquee-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}
.marquee-icon {
    width: 40px; height: 40px;
    background: var(--green-muted);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.marquee-text { display: flex; flex-direction: column; }
.marquee-value { font-size: 18px; font-weight: 700; color: var(--text); }
.marquee-label { font-size: 12px; color: var(--text-muted); }

/* ============================================
   FEATURES — INTERACTIVE
   ============================================ */
.features {
    padding: 100px 0;
    background: var(--bg);
}

/* 3-column layout: features | phone | features */
.feat-interactive {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: center;
}

/* Feature side columns */
.feat-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.feat-left { align-items: flex-end; text-align: right; }
.feat-right { align-items: flex-start; text-align: left; }
.feat-left .feat-item { flex-direction: row-reverse; }

/* Feature item button */
.feat-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.35s var(--ease-out);
    max-width: 300px;
    text-align: inherit;
    font-family: inherit;
}
.feat-item:hover {
    border-color: var(--border-hover);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.feat-item.active {
    border-color: rgba(34,197,94,0.4);
    background: #fff;
    box-shadow: 0 4px 20px rgba(34,197,94,0.12), 0 0 0 1px rgba(34,197,94,0.3);
}
.feat-item.active .feat-icon {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(27, 94, 32, 0.15);
}

.feat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.feat-text h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.feat-text p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Center phone wrapper */
.feat-phone-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.feat-phone { position: relative; }

/* Progress dots */
.feat-progress {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.fp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--divider);
    cursor: pointer;
    transition: all 0.3s ease;
}
.fp-dot.active {
    background: var(--green-700);
    width: 24px;
    border-radius: 4px;
}

/* Phone screens — only active one visible */
.feat-screen {
    display: none;
    animation: fadeScreen 0.4s ease;
}
.feat-screen.active { display: block; }
@keyframes fadeScreen {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Feature screen content styles ---- */
.fs-header { margin-bottom: 12px; }
.fs-greeting {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.fs-searchbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Vendor rows */
.fs-vendor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f0;
}
.fs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fs-dot.green { background: var(--status-open); }
.fs-dot.red { background: var(--status-closed); }
.fs-dot.grey { background: var(--status-offline); }
.fs-dot.purple { background: #5E35B1; }
.fs-info { flex: 1; min-width: 0; }
.fs-info strong { font-size: 12px; display: block; line-height: 1.3; }
.fs-info small { font-size: 10px; color: var(--text-muted); }

.status-badge.offline {
    background: #F5F5F5;
    color: var(--status-offline);
}

/* Map screen */
.fs-map { position: relative; height: 100%; min-height: 420px; border-radius: 0; }
.fs-map-bg {
    position: absolute;
    inset: 0;
    bottom: 90px;
    background: linear-gradient(160deg, #dcedc8, #c8e6c9, #e8f5e9, #dcedc8);
}
.fs-map-road { position: absolute; background: rgba(255,255,255,0.65); border-radius: 1px; }
.fsr-h { width: 100%; height: 2px; top: 40%; }
.fsr-v { width: 2px; height: 100%; left: 45%; }
.fsr-d { width: 120%; height: 2px; top: 60%; left: -10%; transform: rotate(-18deg); }
.fs-pin { position: absolute; font-size: 16px; z-index: 2; }
.fs-pin.active-pin { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.fs-map-sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #fff; border-radius: 14px 14px 0 0;
    padding: 10px 12px 14px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.fs-sheet-handle { width: 30px; height: 3px; background: var(--divider); border-radius: 2px; margin: 0 auto 8px; }
.fs-sheet-row { display: flex; align-items: center; gap: 10px; }
.fs-sheet-row strong { font-size: 12px; }
.fs-sheet-row small { font-size: 10px; color: var(--text-muted); }
.fs-sheet-img {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--green-100), var(--green-300));
}

/* Chips */
.fs-chips-wrap { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.fs-chip {
    font-size: 10px; padding: 4px 10px; border-radius: 16px;
    background: #fff; border: 1px solid var(--divider); color: var(--text-secondary); white-space: nowrap;
}
.fs-chip.active { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.fs-chip.selected { background: var(--green-50); border-color: var(--green-700); color: var(--green-800); font-weight: 600; }

/* Late night */
.fs-night-banner {
    background: linear-gradient(135deg, #311B92, #5E35B1);
    color: #fff; font-size: 11px; font-weight: 600; padding: 8px 12px;
    border-radius: 8px; margin-bottom: 10px; text-align: center;
}
.fs-pill {
    font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.fs-pill.night { background: #EDE7F6; color: #5E35B1; }
.fs-night { background: rgba(94, 53, 177, 0.03); border-radius: 8px; padding: 8px 10px; border-bottom: none; margin-bottom: 6px; }

/* Business hours */
.fs-shop-name-bar {
    font-size: 13px; font-weight: 700; padding: 8px 12px;
    background: var(--green-50); border-radius: 8px; margin-bottom: 10px; color: var(--green-800);
}
.fs-hours-list { display: flex; flex-direction: column; gap: 0; }
.fs-hour-row {
    display: flex; align-items: center; font-size: 11px; padding: 7px 0;
    border-bottom: 1px solid #f5f5f0; gap: 8px;
}
.fs-hour-row span:first-child { flex: 1; color: var(--text-secondary); }
.fs-time { font-weight: 600; color: var(--text); }
.fs-day-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fs-day-dot.green { background: var(--status-open); }
.fs-day-dot.red { background: var(--status-closed); }
.fs-auto-toggle {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding: 10px 12px; background: var(--green-50); border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--green-800);
}
.fs-tog { width: 28px; height: 14px; border-radius: 7px; background: var(--divider); }
.fs-tog.on { background: var(--green-500); }

/* Verification flow */
.fs-verify-flow {
    display: flex; align-items: center; justify-content: center; gap: 0; margin: 20px 0;
}
.fs-verify-step {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fs-vstep-icon {
    width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    background: var(--divider); color: var(--text-muted);
}
.fs-verify-step.done .fs-vstep-icon { background: var(--green-500); color: #fff; }
.fs-verify-step.active .fs-vstep-icon { background: var(--green-800); color: #fff; animation: pulse 2s infinite; }
.fs-verify-step span { font-size: 9px; color: var(--text-muted); }
.fs-verify-line { width: 24px; height: 2px; background: var(--green-300); margin: 0 4px; margin-bottom: 20px; }
.fs-otp-row { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.fs-otp-box {
    width: 40px; height: 48px; border-radius: 10px; border: 2px solid var(--green-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; color: var(--green-800); background: #fff;
}
.fs-otp-box.blink { animation: blink 1s step-end infinite; color: var(--green-400); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.fs-verify-badge {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--green-800);
    background: var(--green-50); padding: 10px; border-radius: 8px; margin-top: 12px;
}

/* ---- Screen 6: Perks & Coins (Wallet) ---- */
.fs-wallet-banner {
    background: linear-gradient(145deg, #1B5E20, #2E7D32, #388E3C);
    border-radius: 14px;
    padding: 18px 16px 14px;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.fs-wallet-banner::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    border-radius: 50%;
}
.fs-wb-coin {
    font-size: 24px;
    font-weight: 900;
    color: #FFD54F;
    text-shadow: 0 2px 6px rgba(0,0,0,0.2);
    margin-bottom: 4px;
}
.fs-wb-bal small {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-bottom: 1px;
}
.fs-wb-bal strong {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}
.fs-wb-stats {
    display: flex;
    justify-content: center;
    gap: 14px;
    align-items: center;
}
.fs-wb-stat { text-align: center; }
.fs-wb-stat span {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: block;
}
.fs-wb-stat small {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
}
.fs-wb-div {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.2);
}
.fs-wallet-badges {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}
.fs-wbadge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--green-50);
    color: var(--green-800);
}
.fs-wbadge-gold {
    background: #FFF8E1;
    color: #F57F17;
}
.fs-wallet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--green-800);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(27, 94, 32, 0.25);
}
.fs-wallet-txn-head {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.fs-wallet-txn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--divider);
}
.fs-wt-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(145deg, #E8F5E9, #C8E6C9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: var(--green-800);
    flex-shrink: 0;
}
.fs-wt-info { flex: 1; }
.fs-wt-info strong { font-size: 11px; display: block; line-height: 1.3; }
.fs-wt-info small { font-size: 9px; color: var(--text-muted); }
.fs-wt-amt {
    font-size: 13px;
    font-weight: 800;
    color: var(--green-700);
    flex-shrink: 0;
}

/* ============================================
   HOW IT WORKS — INTERACTIVE
   ============================================ */
.how-it-works {
    padding: 100px 0;
    background: #fff;
}
.hiw-container { max-width: 1000px; margin: 0 auto; }

.tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 64px;
}
.tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    background: transparent;
    transition: all 0.3s var(--ease-out);
    cursor: pointer;
}
.tab.active {
    background: var(--green-muted);
    border-color: rgba(34,197,94,0.3);
    color: var(--green-700);
}
.tab:not(.active):hover {
    background: var(--bg-card);
    color: var(--text-secondary);
}

/* Panel layout: steps left, phone right */
.hiw-panel { display: none; }
.hiw-panel.active {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
}
.hiw-steps-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hiw-phone-col {
    display: flex;
    justify-content: center;
}

/* Step buttons */
.hiw-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.35s var(--ease-out);
    text-align: left;
    font-family: inherit;
    width: 100%;
}
.hiw-step:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.hiw-step.active {
    border-color: rgba(34,197,94,0.4);
    background: #fff;
    box-shadow: 0 4px 20px rgba(34,197,94,0.12), 0 0 0 1px rgba(34,197,94,0.3);
}
.hiw-num {
    width: 40px;
    height: 40px;
    background: var(--divider);
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.hiw-step.active .hiw-num {
    background: var(--green-800);
    color: #fff;
    box-shadow: 0 3px 10px rgba(27, 94, 32, 0.25);
}
.hiw-body h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.hiw-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}
.hiw-step.active .hiw-body p { color: var(--text-secondary); }

/* Phone screens */
.hiw-screen { display: none; animation: fadeScreen 0.4s ease; }
.hiw-screen.active { display: block; }

/* ---- HIW Screen content styles ---- */
.hs-badge-row { margin-bottom: 8px; }
.hs-badge {
    font-size: 9px; font-weight: 800; color: var(--green-800);
    background: var(--green-50); padding: 3px 10px; border-radius: 4px;
}
.hs-hero-text {
    font-size: 15px; font-weight: 800; line-height: 1.3; margin-bottom: 14px;
}
.hs-hero-text em { color: var(--green-700); font-style: italic; }
.hs-info-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.hs-info-card {
    display: flex; gap: 10px; align-items: center;
    background: #fff; border: 1px solid var(--divider); border-radius: 10px; padding: 10px 12px;
}
.hs-ic-icon { font-size: 18px; flex-shrink: 0; }
.hs-ic-text strong { font-size: 11px; display: block; }
.hs-ic-text small { font-size: 9px; color: var(--text-muted); }
.hs-form { display: flex; flex-direction: column; gap: 8px; }
.hs-input {
    height: 36px; background: #fff; border: 1px solid var(--divider); border-radius: 8px;
    display: flex; align-items: center; padding: 0 12px;
}
.hs-input span { font-size: 11px; color: var(--text-muted); }
.hs-btn-green {
    background: var(--green-800); color: #fff; text-align: center;
    padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 700;
    margin-top: 4px;
}

/* Discover screen */
.hs-greeting { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.hs-search-bar {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--divider); border-radius: 10px;
    padding: 9px 12px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
}
.hs-chips { display: flex; gap: 5px; margin-bottom: 12px; }
.hs-chip {
    font-size: 10px; padding: 4px 10px; border-radius: 14px;
    background: #fff; border: 1px solid var(--divider); color: var(--text-secondary);
}
.hs-chip.active { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.hs-vendor-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.hs-vc-banner { height: 60px; background: linear-gradient(135deg, var(--green-200), var(--green-400)); }
.hs-vc-b2 { background: linear-gradient(135deg, #C8E6C9, #66BB6A); }
.hs-vc-body { padding: 8px 10px; }
.hs-vc-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.hs-vc-row strong { font-size: 12px; }
.hs-vc-body small { font-size: 10px; color: var(--text-muted); }

/* Detail screen */
.hs-detail-banner { height: 100px; background: linear-gradient(135deg, var(--green-400), var(--green-800)); border-radius: 0 0 14px 14px; }
.hs-detail-body { padding: 12px 2px 0; }
.hs-detail-name { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.hs-detail-cat { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
.hs-detail-status { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hs-detail-status small { font-size: 10px; color: var(--text-muted); }
.hs-detail-section { margin-bottom: 12px; }
.hs-ds-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 6px; }
.hs-ds-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); padding: 4px 0; border-bottom: 1px solid #f5f5f0; }
.hs-directions-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--green-800); color: #fff; padding: 8px 16px; border-radius: 8px;
    font-size: 11px; font-weight: 600;
}

/* Vendor: Registration wizard */
.hs-progress { height: 4px; background: var(--green-100); border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
.hs-progress-fill { height: 100%; background: var(--green-700); border-radius: 2px; transition: width 0.3s; }
.hs-step-label { font-size: 10px; color: var(--text-muted); margin-bottom: 10px; }
.hs-wizard-q { font-size: 16px; font-weight: 800; margin-bottom: 14px; line-height: 1.3; }
.hs-suggestions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.hs-sug {
    font-size: 10px; padding: 5px 12px; border-radius: 16px;
    background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-200);
}

/* Vendor: Hours */
.hs-hours-list { display: flex; flex-direction: column; }
.hs-hr {
    display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 7px 0;
    border-bottom: 1px solid #f5f5f0;
}
.hs-hr span:first-child { flex: 1; color: var(--text-secondary); }
.hs-time { font-weight: 600; color: var(--text); }
.hs-tog { width: 26px; height: 13px; border-radius: 7px; background: var(--divider); flex-shrink: 0; }
.hs-tog.on { background: var(--green-500); }
.hs-auto-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding: 8px 12px; background: var(--green-50); border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--green-800);
}

/* Vendor: Dashboard */
.hs-dash-status {
    display: flex; align-items: center; gap: 10px;
    background: var(--green-50); padding: 12px; border-radius: 10px; margin-bottom: 12px;
    font-size: 14px; font-weight: 700; color: var(--green-800);
}
.hs-dash-dot {
    width: 12px; height: 12px; border-radius: 50%; background: var(--green-500);
    animation: pulse 2s ease-in-out infinite;
}
.hs-dash-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.hs-dash-s {
    flex: 1; text-align: center; background: var(--bg); padding: 10px 4px; border-radius: 10px;
}
.hs-dash-s strong { font-size: 18px; color: var(--text); display: block; }
.hs-dash-s small { font-size: 10px; color: var(--text-muted); }
.hs-dash-toggles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hs-dt-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; padding: 8px 12px; background: var(--bg); border-radius: 8px;
}

/* ============================================
   DUAL SECTION (FOR LOCALITES / VENDORS)
   ============================================ */
.dual-section {
    padding: 100px 0 120px;
    background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
    position: relative;
    overflow: hidden;
}

/* Floating background shapes */
.dual-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.dual-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
}
.ds-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--green-300), transparent 70%);
    top: -80px; left: -100px;
}
.ds-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, #FFAB91, transparent 70%);
    bottom: -60px; right: -80px;
}

.dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    position: relative;
    z-index: 2;
}

/* Card base */
.dual-card {
    position: relative;
    border-radius: 24px;
    padding: 48px 36px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    overflow: hidden;
    transition: all 0.5s var(--ease-out);
}
.dual-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-hover);
}

/* Glow orb inside card — follows mouse */
.dual-card-glow {
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out);
    top: -100px; left: -100px;
}
.dual-card:hover .dual-card-glow { opacity: 1; }
.dual-localite .dual-card-glow { background: rgba(34,197,94,0.25); }
.dual-vendor .dual-card-glow { background: rgba(249,115,22,0.25); }

/* Legacy wrapper — flatten if still used */
.dual-glow { display: none; }
.dual-card-inner {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    position: relative;
    z-index: 1;
}

/* Header row */
.dual-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.dual-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.dual-icon-wrap::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
    border-radius: 14px 14px 50% 50%;
    pointer-events: none;
}
.dual-icon-green {
    background: linear-gradient(145deg, #E8F5E9, #A5D6A7);
}
.dual-icon-amber {
    background: linear-gradient(145deg, #FFF3E0, #FFAB91);
}

.dual-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    background: var(--green-muted);
    color: var(--green-700);
    border: 1px solid rgba(34,197,94,0.2);
}
.vendor-tag {
    background: rgba(249,115,22,0.12);
    color: #fb923c;
    border-color: rgba(249,115,22,0.2);
}

.dual-card h3 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.dual-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Feature list */
.dual-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}
.dual-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--text-secondary);
    opacity: 0;
    animation: slideCheckIn 0.4s ease forwards;
    animation-delay: calc(var(--i) * 0.08s);
}
@keyframes slideCheckIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Check marks */
.dl-check {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--green-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.dl-check svg { stroke: var(--green-700); }
.dl-check-amber {
    background: rgba(249,115,22,0.12);
}
.dl-check-amber svg { stroke: #fb923c; }
.dual-list li:hover .dl-check {
    transform: scale(1.1);
}

/* CTA */
.dual-cta {
    padding-top: 4px;
}
.dual-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    transition: all 0.3s var(--ease-out);
}
.dual-localite .dual-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 20px rgba(34,197,94,0.2);
}
.dual-vendor .dual-btn {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 4px 20px rgba(249,115,22,0.2);
}
.dual-btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   SHOWCASE
   ============================================ */
.showcase {
    padding: 100px 0;
    background: var(--bg);
    overflow: hidden;
}

.showcase-scroll {
    overflow-x: auto;
    padding-top: 16px;
    padding-bottom: 20px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.showcase-scroll::-webkit-scrollbar { display: none; }

.showcase-track {
    display: flex;
    gap: 32px;
    width: max-content;
}
.showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.showcase-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Samsung S26 Ultra mockup */
.showcase-phone {
    width: 220px;
    height: 460px;
    background: #1a1a1a;
    border-radius: 22px;
    padding: 5px;
    contain: layout style paint;
    box-shadow:
        var(--shadow-lg),
        0 0 0 1.5px #444 inset,
        0 0 0 2.5px #1a1a1a;
    transition: transform var(--transition);
    position: relative;
}
/* Centered punch-hole camera */
.showcase-phone::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #0a0a0a;
    border-radius: 50%;
    z-index: 5;
    border: 1.5px solid #333;
}
/* Side button (power) */
.showcase-phone::after {
    content: '';
    position: absolute;
    right: -2.5px;
    top: 100px;
    width: 2.5px;
    height: 36px;
    background: #333;
    border-radius: 0 1px 1px 0;
}
.showcase-phone:hover { transform: translateY(-8px); }

/* Real screenshot image inside phone */
.sp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 18px;
    display: block;
}

/* Locked placeholder phones — plain bg + lock icon */
.sp-locked {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-lock-placeholder {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 18px;
    background: linear-gradient(165deg, #f5f5f0, #e8e8e3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}
.showcase-label-muted {
    color: var(--text-muted) !important;
    font-style: italic;
}

/* End-of-carousel CTA card */
.showcase-cta-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-cta-card {
    width: 220px;
    height: 460px;
    border-radius: 22px;
    background: linear-gradient(165deg, var(--green-50), #fff, var(--green-50));
    border: 2px dashed var(--green-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.4s ease;
}
.sp-cta-card:hover {
    border-color: var(--green-400);
    box-shadow: 0 8px 32px rgba(27, 94, 32, 0.1);
    transform: translateY(-4px);
}
.sp-cta-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    box-shadow: 0 3px 12px rgba(27, 94, 32, 0.12);
}
.sp-cta-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.sp-cta-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.sp-cta-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--green-800);
    background: var(--green-100);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Showcase: Onboarding */
.sp-hero-badge {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.sp-hero-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--green-800);
    margin-bottom: 4px;
}
.sp-hero-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}
.sp-hero-cards {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.sp-card-mini {
    flex: 1;
    height: 80px;
    background: linear-gradient(135deg, var(--green-100), var(--green-200));
    border-radius: 10px;
}
.sp-btn-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-btn-green {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--green-800);
    padding: 10px;
    border-radius: 10px;
}
.sp-btn-outline {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--green-800);
    border: 1.5px solid var(--green-800);
    padding: 10px;
    border-radius: 10px;
}

/* Showcase: Search */
.sp-search-bar {
    height: 28px;
    background: #fff;
    border: 1px solid var(--divider);
    border-radius: 10px;
    margin-bottom: 10px;
}
.sp-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.spc {
    height: 18px;
    width: 42px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--divider);
}
.spc.active {
    background: var(--green-800);
    border-color: var(--green-800);
}
.sp-vendor-card {
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sp-vc-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--green-100), var(--green-300));
    flex-shrink: 0;
}
.sp-vc-info { flex: 1; }
.sp-vc-name {
    height: 8px;
    width: 70%;
    background: var(--text);
    border-radius: 3px;
    margin-bottom: 6px;
}
.sp-vc-cat {
    height: 6px;
    width: 50%;
    background: var(--divider);
    border-radius: 3px;
    margin-bottom: 6px;
}
.sp-vc-status {
    height: 12px;
    width: 40px;
    border-radius: 4px;
}
.sp-vc-status.open { background: var(--green-50); }
.sp-vc-status.closed { background: #FFEBEE; }

/* Showcase: Map */
.sp-map { padding: 0; position: relative; }
.sp-map-bg {
    width: 100%;
    height: 70%;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9, #dcedc8);
    position: relative;
}
.sp-pin {
    position: absolute;
    font-size: 20px;
    animation: bounce 2s ease-in-out infinite;
}
.sp-pin:nth-child(2) { animation-delay: 0.3s; }
.sp-pin:nth-child(3) { animation-delay: 0.6s; }
.sp-pin:nth-child(4) { animation-delay: 0.9s; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.sp-map-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 24px 24px;
    padding: 14px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.sp-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--divider);
    border-radius: 2px;
    margin: 0 auto 10px;
}

/* Showcase: Dashboard */
.sp-dash-header {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
}
.sp-dash-status-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--green-50);
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-800);
    margin-bottom: 14px;
}
.sp-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.sp-status-dot.green { background: var(--green-500); animation: pulse 2s ease-in-out infinite; }

.sp-dash-stats-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.sp-dash-stat {
    flex: 1;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    padding: 10px 4px;
    font-size: 10px;
    color: var(--text-secondary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sp-dash-stat strong {
    font-size: 18px;
    color: var(--text);
    display: block;
    margin-bottom: 2px;
}
.sp-dash-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
}
.sp-tog {
    width: 28px;
    height: 14px;
    border-radius: 7px;
    background: var(--divider);
}
.sp-tog.on { background: var(--green-500); }

/* Showcase: Detail */
.sp-detail { padding: 0; }
.sp-detail-banner {
    height: 140px;
    background: linear-gradient(135deg, var(--green-400), var(--green-700));
    border-radius: 0 0 16px 16px;
}
.sp-detail-info { padding: 14px; }
.sp-detail-name {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
}
.sp-detail-cat {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.sp-detail-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--green-800);
    background: var(--green-50);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.sp-detail-hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sp-dh-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
}

/* ============================================
   COMMUNITY
   ============================================ */
.community {
    padding: 100px 0;
    background: #fff;
}
.community .section-header h2 em {
    font-family: var(--font-display);
    color: var(--green-700);
}
.community-inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: center;
}

/* ---- Stacked Value Cards ---- */
.value-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.value-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--divider);
    margin-bottom: -8px;
    position: relative;
    z-index: calc(4 - var(--i));
    transform: translateX(calc(var(--i) * 6px)) scale(calc(1 - var(--i) * 0.02));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.value-card:hover {
    z-index: 10;
    transform: translateX(0) scale(1.03);
    box-shadow: 0 12px 40px rgba(27, 94, 32, 0.15), 0 4px 12px rgba(0,0,0,0.06);
    border-color: var(--green-200);
    margin-bottom: 8px;
    background: linear-gradient(135deg, #fff 0%, var(--green-50) 100%);
}
.value-card:hover + .value-card {
    margin-top: 8px;
}
.value-card:hover .vc-content p {
    max-height: 60px;
    opacity: 1;
    margin-top: 6px;
}

.vc-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.vc-icon-gold { background: linear-gradient(145deg, #FFF8E1, #FFE082); }
.vc-icon-blue { background: linear-gradient(145deg, #E3F2FD, #90CAF9); }
.vc-icon-green { background: linear-gradient(145deg, #E8F5E9, #A5D6A7); }
.vc-icon-heart { background: linear-gradient(145deg, #E8F5E9, #81C784); }

.vc-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0;
}
.vc-content p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    margin: 0;
}

/* ---- Map Visual with floating popups ---- */
.map-visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 500px;
    min-height: 100%;
}
.map-canvas {
    width: 100%;
    height: 100%;
    background: linear-gradient(155deg, #e8f5e9 0%, #dcedc8 25%, #f1f8e9 50%, #c8e6c9 75%, #e8f5e9 100%);
    position: relative;
    background-size: 200% 200%;
    animation: mapShimmer 12s ease-in-out infinite;
}
@keyframes mapShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Roads */
.mv-road {
    position: absolute;
    background: rgba(255,255,255,0.6);
}
.mv-road-h1 { width: 100%; height: 3px; top: 35%; }
.mv-road-h2 { width: 100%; height: 3px; top: 65%; }
.mv-road-v1 { width: 3px; height: 100%; left: 30%; }
.mv-road-v2 { width: 3px; height: 100%; left: 68%; }
.mv-road-d1 { width: 140%; height: 3px; top: 50%; left: -20%; transform: rotate(-25deg); }

/* Building blocks */
.mv-block {
    position: absolute;
    background: rgba(200, 230, 201, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(165, 214, 167, 0.4);
}

/* You are here dot */
.mv-you {
    position: absolute;
    z-index: 3;
}
.mv-you-dot {
    width: 14px;
    height: 14px;
    background: #1565C0;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.4);
    position: relative;
    z-index: 2;
}
.mv-you-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(21, 101, 192, 0.08);
    border: 1px solid rgba(21, 101, 192, 0.15);
}

/* Edge fade overlay */
.map-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        linear-gradient(to right, #fff 0%, transparent 15%, transparent 85%, #fff 100%),
        linear-gradient(to bottom, #fff 0%, transparent 15%, transparent 85%, #fff 100%);
}

/* Floating popup cards on the map */
.mv-popup {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
}
.mv-popup::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.05);
}
.mv-popup:hover {
    box-shadow:
        0 8px 28px rgba(27, 94, 32, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.08);
}
.mv-pop-icon {
    font-size: 20px;
}
.mv-popup strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    display: block;
    line-height: 1.3;
}
.mv-popup small {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
}

/* Popup positions scattered on the map */
.mv-p1 { top: 10%; left: 8%; }
.mv-p2 { top: 18%; right: 8%; }
.mv-p3 { bottom: 22%; left: 12%; }
.mv-p4 { bottom: 12%; right: 15%; }

/* ============================================
   COIN WALLET & REWARDS
   ============================================ */
.coin-wallet {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}
.coin-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.coin-shape { position: absolute; border-radius: 50%; opacity: 0.12; }
.cs-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #FFE082, transparent 70%);
    top: -80px; right: -100px;
}
.cs-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--green-300), transparent 70%);
    bottom: -60px; left: -80px;
}

.coin-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.coin-phone-col {
    display: flex;
    justify-content: center;
}

/* ---- Wallet Screen Mockup ---- */
.cw-screen { padding: 0 2px; }
.cw-banner {
    background: linear-gradient(145deg, #1B5E20, #2E7D32, #388E3C);
    border-radius: 16px;
    padding: 24px 20px 18px;
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.cw-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.04) 45%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 55%,
        transparent 60%
    );
    animation: walletShimmer 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes walletShimmer {
    0% { transform: translateX(-80%) translateY(-80%) rotate(25deg); }
    100% { transform: translateX(80%) translateY(80%) rotate(25deg); }
}
.cw-banner::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    border-radius: 50%;
}
.cw-coin-icon {
    width: 56px; height: 56px;
    margin: 0 auto 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cw-rupee {
    font-size: 28px;
    font-weight: 900;
    color: #FFD54F;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
}
.cw-coin-ring {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(255,213,79,0.4);
    border-radius: 50%;
    animation: spin 12s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.cw-balance small {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    display: block;
    margin-bottom: 2px;
}
.cw-balance strong {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    display: block;
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cw-stats-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}
.cw-stat { text-align: center; }
.cw-stat span {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    display: block;
}
.cw-stat small {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
}
.cw-stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.2);
}
.cw-badge-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.cw-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--green-50);
    color: var(--green-800);
}
.cw-badge-alt {
    background: #FFF8E1;
    color: #F57F17;
}
.cw-redeem-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--green-800);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(27, 94, 32, 0.25);
}
.cw-txn-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.cw-txn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--divider);
}
.cw-txn-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    flex-shrink: 0;
}
.cw-txn-earn {
    background: linear-gradient(145deg, #E8F5E9, #C8E6C9);
    color: var(--green-800);
}
.cw-txn-info { flex: 1; }
.cw-txn-info strong { font-size: 12px; display: block; line-height: 1.3; }
.cw-txn-info small { font-size: 10px; color: var(--text-muted); }
.cw-txn-amount {
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}
.cw-txn-plus { color: var(--green-700); }

/* ---- Coin Flow Steps ---- */
.coin-flow-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.coin-flow-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--divider);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.coin-flow-card:hover {
    transform: translateX(6px);
    border-color: var(--green-200);
    box-shadow: 0 8px 28px rgba(27, 94, 32, 0.1);
}
.cf-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--green-500), var(--green-800));
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(27, 94, 32, 0.25);
}
.cf-body { flex: 1; }
.cf-icon-wrap {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.cf-icon-green { background: linear-gradient(145deg, #E8F5E9, #A5D6A7); }
.cf-icon-gold { background: linear-gradient(145deg, #FFF3E0, #FFAB91); }
.cf-icon-teal { background: linear-gradient(145deg, #E0F2F1, #80CBC4); }

.cf-body h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.cf-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.coin-flow-connector {
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, var(--green-400), var(--green-100));
    margin: 0 0 0 44px;
    border-radius: 1px;
    position: relative;
}
.coin-flow-connector::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, rgba(34,197,94,0.12), transparent);
    border-radius: 4px;
}

.coin-flow-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--green-50);
    border-radius: 12px;
    font-size: 12px;
    color: var(--green-800);
    font-weight: 600;
    border: 1px solid var(--green-100);
}
.coin-flow-note svg { flex-shrink: 0; }

/* ============================================
   WAYS TO EARN COINS
   ============================================ */
.earn-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, #F1F8E9 50%, #fff 100%);
}
.earn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.earn-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 16px;
    border: 1px solid var(--divider);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.earn-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 40px rgba(27, 94, 32, 0.12), 0 4px 12px rgba(0,0,0,0.06);
    border-color: var(--green-200);
}
.earn-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(34,197,94,0.03), rgba(34,197,94,0) 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.earn-card:hover::before {
    opacity: 1;
}
.ec-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ec-icon-green { background: linear-gradient(145deg, #E8F5E9, #C8E6C9); }
.ec-icon-orange { background: linear-gradient(145deg, #FFF3E0, #FFCC80); }
.ec-icon-blue { background: linear-gradient(145deg, #E3F2FD, #90CAF9); }
.ec-icon-amber { background: linear-gradient(145deg, #FFF8E1, #FFE082); }
.ec-icon-pink { background: linear-gradient(145deg, #FCE4EC, #F48FB1); }
.ec-icon-teal { background: linear-gradient(145deg, #E0F2F1, #80CBC4); }

.ec-content { flex: 1; min-width: 0; }
.ec-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}
.ec-title-row h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.ec-coins {
    font-size: 12px;
    font-weight: 800;
    color: var(--green-700);
    background: var(--green-50);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ec-content p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 8px;
}
.ec-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--green-800);
    background: var(--green-50);
    padding: 3px 8px;
    border-radius: 6px;
}

/* Streak dots mini-visual */
.ec-streak-dots {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
}
.ec-sd {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #f5f5f5;
    color: var(--text-muted);
    border: 2px solid var(--divider);
}
.ec-sd-done {
    background: linear-gradient(145deg, #FFE082, #FFD54F);
    color: #5D4037;
    border-color: #FFD54F;
}
.ec-sd-reward {
    background: linear-gradient(145deg, #FFF3E0, #FFE0B2);
    border-color: #FFB74D;
    font-size: 14px;
}
.ec-sd-line {
    width: 20px; height: 3px;
    background: var(--divider);
    border-radius: 2px;
}
.ec-sd-line-done {
    background: linear-gradient(90deg, #FFD54F, #FFC107);
}

/* Earn summary banner */
.earn-summary {
    margin-top: 8px;
}
.es-inner {
    background: linear-gradient(145deg, #E8F5E9, #C8E6C9);
    border-radius: 16px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--green-200);
    position: relative;
    overflow: hidden;
}
.es-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(34,197,94,0.12), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.es-left h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--green-900);
    margin: 0 0 4px;
}
.es-left p {
    font-size: 13px;
    color: var(--green-800);
    margin: 0;
    opacity: 0.8;
}
.es-right {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.es-pill {
    background: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--green-800);
    border: 1px solid var(--green-200);
    white-space: nowrap;
}
.es-pill span {
    font-weight: 800;
    color: var(--green-700);
}

/* ============================================
   TRI-PANEL ACCORDION
   ============================================ */
.tri-section {
    padding: 100px 0;
    background: var(--bg);
}
.tri-panels {
    display: flex;
    gap: 0;
    height: 520px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(135deg, rgba(34,197,94,0.04), rgba(59,130,246,0.03), rgba(249,115,22,0.04));
}
.tri-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: 0;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.tri-panel:first-child { border-radius: 23px 0 0 23px; }
.tri-panel:last-child { border-radius: 0 23px 23px 0; border-right: none; }
.tri-panel:hover {
    background: rgba(255,255,255,0.7);
}
.tri-panel.tri-active {
    flex: 5;
    cursor: default;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 0 40px rgba(0,0,0,0.04);
}

/* Collapsed state */
.tri-collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.25s;
    padding: 24px;
}
.tri-collapsed svg {
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.3s;
}
.tri-panel:hover .tri-collapsed svg {
    opacity: 0.8;
    transform: scale(1.1);
}
.tri-collapsed span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}
.tri-panel.tri-active .tri-collapsed {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* Expanded state */
.tri-expanded {
    position: absolute;
    inset: 0;
    padding: 36px 36px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tri-panel.tri-active .tri-expanded {
    opacity: 1;
    pointer-events: auto;
}
.tri-eyebrow {
    margin-bottom: 16px;
}
.tri-eyebrow svg {
    color: var(--green-700);
}
.tri-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--green-700);
}
.tri-expanded h3 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    line-height: 1.2;
}
.tri-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 500px;
}
.tri-body {
    flex: 1;
}

/* --- Panel 1: Redeem content --- */
.tri-redeem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.tri-redeem-card {
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 16px;
}
.tri-rc-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
}
.tri-rc-green {
    background: var(--green-muted);
    color: var(--green-700);
}
.tri-rc-gold {
    background: rgba(249,115,22,0.1);
    color: #ea580c;
}
.tri-redeem-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}
.tri-rc-highlight {
    font-size: 13px;
    font-weight: 600;
    color: var(--green-700);
    background: var(--green-muted);
    padding: 8px 14px;
    border-radius: 10px;
}
.tri-merch-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tri-merch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.tri-merch-row:last-child { border-bottom: none; }
.tri-merch-coins {
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
}
.tri-merch-premium {
    color: #ea580c;
    font-weight: 600;
}
.tri-merch-premium .tri-merch-coins {
    color: #ea580c;
}

/* --- Panel 2: Live Feed content --- */
.tri-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tri-feed-card {
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 14px;
}
.tri-fc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tri-fc-avatar {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.tri-fc-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tri-fc-meta strong { font-size: 14px; }
.tri-fc-meta small { font-size: 11px; color: var(--text-muted); }
.tri-fc-type {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tri-type-stall { background: #E8F5E9; color: #2E7D32; }
.tri-type-deal { background: #FFF3E0; color: #E65100; }
.tri-fc-msg {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}
.tri-fc-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.tri-fc-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tri-fc-open { background: #E8F5E9; color: #2E7D32; }
.tri-fc-deal { background: #FFF3E0; color: #E65100; }

/* --- Panel 3: For Everyone content --- */
.tri-features-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tri-feat-card {
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.tri-feat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.tri-feat-card strong {
    font-size: 14px;
    display: block;
    margin-bottom: 2px;
}
.tri-feat-card small {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* --- Tri-panel responsive --- */
@media (max-width: 768px) {
    .tri-panels {
        flex-direction: column;
        height: auto;
    }
    .tri-panel {
        min-height: 56px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        border-radius: 0;
    }
    .tri-panel:first-child { border-radius: 23px 23px 0 0; }
    .tri-panel:last-child { border-radius: 0 0 23px 23px; border-bottom: none; }
    .tri-panel.tri-active {
        min-height: 400px;
    }
    .tri-collapsed {
        flex-direction: row;
        writing-mode: horizontal-tb;
        padding: 16px 24px;
        height: auto;
    }
    .tri-collapsed svg { width: 24px; height: 24px; }
    .tri-collapsed span {
        writing-mode: horizontal-tb;
        text-orientation: initial;
    }
    .tri-expanded {
        padding: 24px 20px;
    }
    .tri-redeem-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   REDEEM YOUR COINS (legacy)
   ============================================ */
.redeem-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, #FFF8E1 50%, #fff 100%);
    position: relative;
    overflow: hidden;
}
.redeem-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.redeem-shape { position: absolute; border-radius: 50%; opacity: 0.1; }
.rs-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #FFE082, transparent 70%);
    top: -100px; right: -100px;
}
.rs-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, #C8E6C9, transparent 70%);
    bottom: -80px; left: -80px;
}
.redeem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    position: relative;
    z-index: 2;
    margin-bottom: 32px;
}

/* Redeem path cards */
.redeem-path {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--divider);
    transition: all 0.3s ease;
}
.redeem-path:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}
.rp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.rp-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rp-icon-green { background: linear-gradient(145deg, #E8F5E9, #A5D6A7); }
.rp-icon-gold { background: linear-gradient(145deg, #FFF3E0, #FFAB91); }
.rp-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    flex: 1;
}
.rp-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}
.rp-badge-green { background: var(--green-50); color: var(--green-800); }
.rp-badge-gold { background: #FFF3E0; color: #BF360C; }
.rp-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 18px;
}

/* Steps in store redemption */
.rp-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.rp-step {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rps-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--green-500), var(--green-800));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.rp-step span {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}
.rp-highlight {
    background: linear-gradient(145deg, #E8F5E9, #C8E6C9);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--green-900);
    border: 1px solid var(--green-200);
    line-height: 1.5;
}
.rp-highlight strong { font-weight: 800; }

/* Merchandise tiers */
.merch-tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.merch-tier {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FAFAFA;
    border: 1px solid var(--divider);
    transition: all 0.2s ease;
}
.merch-tier:hover {
    background: #fff;
    border-color: #FFE082;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.mt-premium {
    background: linear-gradient(145deg, #FFF8E1, #FFF3E0);
    border-color: #FFE082;
}
.mt-emoji {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.mt-info { flex: 1; min-width: 0; }
.mt-info strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: block;
    line-height: 1.3;
}
.mt-info small {
    font-size: 11px;
    color: var(--text-muted);
}
.mt-cost {
    font-size: 16px;
    font-weight: 800;
    color: var(--green-800);
    flex-shrink: 0;
    white-space: nowrap;
}
.mt-cost small {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}
.mt-cost-premium {
    color: #BF360C;
}

/* Vendor QR banner */
.vendor-qr-banner {
    position: relative;
    z-index: 2;
}
.vqb-inner {
    background: linear-gradient(145deg, #E8F5E9, #C8E6C9);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--green-200);
}
.vqb-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.12);
}
.vqb-text { flex: 1; }
.vqb-text h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--green-900);
    margin: 0 0 4px;
}
.vqb-text p {
    font-size: 13px;
    color: var(--green-800);
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}
.vqb-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.vqb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.vqb-sn {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--green-800);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.vqb-step small {
    font-size: 10px;
    color: var(--green-800);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.vqb-arrow {
    font-size: 16px;
    color: var(--green-600);
    font-weight: 700;
    margin-top: -14px;
}

/* ============================================
   COMMUNITY UPDATES (LIVE FEED)
   ============================================ */
.updates-section {
    padding: 100px 0;
    background: #fff;
}

.updates-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: flex-start;
}

/* ---- Live Feed Column ---- */
.updates-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.uf-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(27, 94, 32, 0.06);
    border: 1px solid rgba(27, 94, 32, 0.12);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    color: var(--green-800);
    width: fit-content;
    margin-bottom: 4px;
}
.uf-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--divider);
    padding: 18px 20px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.uf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
    border-color: var(--green-200);
}
.uf-card-faded { opacity: 0.6; }
.uf-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.uf-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.uf-av-green { background: linear-gradient(145deg, var(--green-500), var(--green-800)); }
.uf-av-orange { background: linear-gradient(145deg, #FF9800, #E65100); }
.uf-av-purple { background: linear-gradient(145deg, #7E57C2, #4A148C); }
.uf-meta { flex: 1; min-width: 0; }
.uf-meta strong { font-size: 13px; display: block; line-height: 1.3; color: var(--text); }
.uf-meta small { font-size: 10px; color: var(--text-muted); }
.uf-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}
.uf-type-stall { background: #E8F5E9; color: #2E7D32; }
.uf-type-deal { background: #FFF3E0; color: #E65100; }
.uf-type-announce { background: #EDE7F6; color: #5E35B1; }
.uf-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}
.uf-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.uf-status-pill {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.uf-status-open { background: #E8F5E9; color: #2E7D32; }
.uf-status-new { background: #E3F2FD; color: #1565C0; }
.uf-location, .uf-expiry {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- Highlight Cards ---- */
.updates-highlights {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.uh-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: var(--bg);
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all 0.35s ease;
    cursor: default;
}
.uh-card:hover {
    background: #fff;
    border-color: var(--green-100);
    box-shadow: 0 4px 16px rgba(27, 94, 32, 0.08);
    transform: translateX(4px);
}
.uh-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.uh-icon-green { background: linear-gradient(145deg, #E8F5E9, #A5D6A7); }
.uh-icon-orange { background: linear-gradient(145deg, #FFF3E0, #FFAB91); }
.uh-icon-blue { background: linear-gradient(145deg, #E3F2FD, #90CAF9); }
.uh-icon-teal { background: linear-gradient(145deg, #E0F2F1, #80CBC4); }
.uh-content h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}
.uh-content p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   MULTI-LANGUAGE & SUPPORT
   ============================================ */
.support-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fff, var(--bg));
    position: relative;
    overflow: hidden;
}
.support-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.support-shape { position: absolute; border-radius: 50%; opacity: 0.1; }
.ss-1 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, #90CAF9, transparent 70%);
    top: -60px; left: -80px;
}
.ss-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #FFAB91, transparent 70%);
    bottom: -80px; right: -60px;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
    align-items: stretch;
}

/* ---- Support Card ---- */
.support-card {
    position: relative;
    border-radius: 24px;
    padding: 32px 28px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    overflow: hidden;
    transition: all 0.5s var(--ease-out);
    display: flex;
    flex-direction: column;
}
.support-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-hover);
}

/* Glow orb */
.sc-glow {
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-out);
    top: -80px; right: -80px;
    z-index: 0;
}
.sc-glow-green { background: rgba(34,197,94,0.25); }
.sc-glow-blue { background: rgba(59,130,246,0.25); }
.sc-glow-amber { background: rgba(249,115,22,0.25); }
.support-card:hover .sc-glow { opacity: 1; }

.sc-inner {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sc-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.sc-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    position: relative;
}
.sc-icon-wrap::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
    border-radius: 12px 12px 50% 50%;
    pointer-events: none;
}
.sc-icon-green { background: linear-gradient(145deg, #E8F5E9, #A5D6A7); }
.sc-icon-blue { background: linear-gradient(145deg, #E3F2FD, #90CAF9); }
.sc-icon-amber { background: linear-gradient(145deg, #FFF3E0, #FFAB91); }

.sc-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--green-50);
    color: var(--green-800);
}
.sc-tag-blue { background: #E3F2FD; color: #1565C0; }
.sc-tag-amber { background: #FFF3E0; color: #E65100; }

.sc-inner h3 {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    color: var(--text);
}
.sc-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Language pills */
.sc-lang-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.sc-lang-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--divider);
    transition: all 0.3s ease;
}
.sc-lang-pill:hover {
    border-color: var(--green-200);
    background: #fff;
}
.sc-lang-active {
    border-color: var(--green-700) !important;
    background: var(--green-50) !important;
}
.sc-lang-native {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.sc-lang-en {
    font-size: 11px;
    color: var(--text-muted);
}
.sc-lang-check {
    font-size: 14px;
    font-weight: 800;
    color: var(--green-700);
}
.sc-lang-note {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: auto;
}

/* Guide steps */
.sc-guide-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.sc-guide-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sc-guide-step span {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}
.sc-gs-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
.sc-gs-done {
    background: linear-gradient(145deg, var(--green-500), var(--green-700));
    color: #fff;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
}
.sc-gs-active {
    background: linear-gradient(145deg, #FFA726, #F57C00);
    color: #fff;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(245, 124, 0, 0.25);
}
.sc-guide-line {
    width: 20px;
    height: 2px;
    background: var(--green-200);
    margin: 0 6px;
    margin-bottom: 18px;
}
.sc-pricing-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--green-50);
    border-radius: 12px;
    border: 1px solid var(--green-100);
    margin-top: auto;
}
.sc-pricing-pill strong {
    font-size: 18px;
    font-weight: 900;
    color: var(--green-800);
}
.sc-pricing-pill span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Payment modes */
.sc-pay-modes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.sc-pay-mode {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--divider);
    transition: all 0.3s ease;
}
.sc-pay-mode:hover {
    border-color: var(--green-200);
    background: #fff;
}
.sc-pm-active {
    border-color: var(--green-200) !important;
    background: #fff !important;
}
.sc-pm-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.sc-pay-mode span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.sc-pm-check {
    font-size: 14px;
    font-weight: 800;
    color: var(--green-700);
    background: var(--green-50);
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   SECURITY — INTERACTIVE (Stack + Detail)
   ============================================ */
.security {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--bg), #fff);
}

/* 2-column: stacked cards left, detail right */
.sec-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
}

/* Left: Stacked cards */
.sec-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sec-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #fff;
    border-radius: 18px;
    border: 2px solid transparent;
    margin-bottom: 4px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sec-card:nth-child(1) { z-index: 4; }
.sec-card:nth-child(2) { z-index: 3; transform: translateX(6px); }
.sec-card:nth-child(3) { z-index: 2; transform: translateX(12px); }
.sec-card:nth-child(4) { z-index: 1; transform: translateX(18px); }

.sec-card.active {
    z-index: 10 !important;
    transform: translateX(0) !important;
    border-color: var(--green-700);
    box-shadow:
        0 8px 28px rgba(27, 94, 32, 0.12),
        0 0 20px rgba(76, 175, 80, 0.08);
}

/* 3D icon */
.sec-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(145deg, #e8f5e9, #a5d6a7);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow:
        0 4px 12px rgba(27, 94, 32, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.4s ease;
}
.sec-icon::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
    border-radius: 14px 14px 50% 50%;
    pointer-events: none;
}
.sec-card.active .sec-icon {
    transform: scale(1.08) rotateY(6deg);
}
/* Unique gradients per card */
.sec-card:nth-child(1) .sec-icon { background: linear-gradient(145deg, #e8f5e9, #81c784); }
.sec-card:nth-child(2) .sec-icon { background: linear-gradient(145deg, #e8f5e9, #a5d6a7); }
.sec-card:nth-child(3) .sec-icon { background: linear-gradient(145deg, #e3f2fd, #90caf9); }
.sec-card:nth-child(4) .sec-icon { background: linear-gradient(145deg, #f3e5f5, #ce93d8); }

.sec-card-text h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--text);
}
.sec-card-text p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}
.sec-card.active .sec-card-text p { color: var(--text-secondary); }

/* Right: Detail panel */
.sec-detail {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-detail-panel {
    display: none;
    animation: fadeScreen 0.4s ease;
    text-align: center;
    width: 100%;
}
.sec-detail-panel.active { display: block; }

/* Detail content styles */
.sec-pop-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    text-align: center;
}
.sec-pop-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--green-800);
    text-align: center;
    margin-top: 16px;
}

/* ---- Shared scene styles ---- */
.sdp-scene {
    width: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ---- OTP Scene ---- */
.sdp-otp-scene {
    background: linear-gradient(165deg, var(--green-50), #fff, var(--green-50));
    border-radius: 24px;
    padding: 40px 32px;
    box-shadow:
        0 16px 48px rgba(27, 94, 32, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.8);
}
.sdp-otp-header {
    text-align: center;
    margin-bottom: 24px;
}
.sdp-lock-big { font-size: 48px; margin-bottom: 12px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }
.sdp-otp-header h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.sdp-otp-header p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.sec-otp-digits {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}
.sec-digit {
    width: 44px; height: 56px;
    border-radius: 14px;
    border: 2px solid var(--divider);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 900;
    color: var(--text); background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}
.sec-digit.filled {
    border-color: var(--green-500);
    background: var(--green-50);
    color: var(--green-800);
}
.sec-digit.typing {
    border-color: var(--green-700);
    background: var(--green-50);
    color: var(--green-800);
    animation: blink 1s step-end infinite;
}
.sdp-otp-timer { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 20px; }
.sdp-otp-btn {
    background: var(--green-800); color: #fff;
    text-align: center; padding: 14px; border-radius: 14px;
    font-size: 15px; font-weight: 700;
    box-shadow: 0 4px 16px rgba(27, 94, 32, 0.25);
}

/* ---- Verified Shield Scene ---- */
.sdp-verified-scene {
    position: relative;
    width: 100%; height: 360px;
}
.sdp-shield-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed var(--green-200);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.sdp-sr-1 { width: 280px; height: 280px; }
.sdp-sr-2 { width: 180px; height: 180px; border-color: var(--green-300); }
.sdp-shield-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    filter: drop-shadow(0 6px 16px rgba(27, 94, 32, 0.2));
}
.sdp-float-badge {
    position: absolute;
    background: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px; font-weight: 600;
    color: var(--text);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: flex; align-items: center; gap: 8px;
    z-index: 2;
    transition: transform 0.3s ease;
    white-space: nowrap;
}
.sdp-float-badge:hover { transform: scale(1.08); }
.sdp-float-badge span { font-size: 16px; }
.sdp-fb-1 { top: 4%; right: 10%; }
.sdp-fb-2 { top: 35%; right: 2%; }
.sdp-fb-3 { bottom: 12%; right: 15%; }
.sdp-fb-4 { top: 20%; left: 2%; }

/* ---- Privacy Scene ---- */
.sdp-privacy-scene { align-items: stretch; }
.sdp-priv-shield { font-size: 40px; text-align: center; margin-bottom: 16px; }
.sdp-priv-cards { display: flex; flex-direction: column; gap: 8px; }
.sdp-priv-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--divider);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sdp-priv-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.sdp-pc-left {
    font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
}
.sdp-pc-left span { font-size: 18px; }
.sdp-pc-status {
    font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 6px;
}
.sdp-pc-status.visible { background: var(--green-50); color: var(--green-800); }
.sdp-pc-status.hidden { background: #FBE9E7; color: #BF360C; }
.sdp-pc-glow {
    position: absolute;
    right: -4px; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 60%;
    border-radius: 3px;
}
.sdp-pc-glow.green { background: var(--green-400); }
.sdp-pc-glow.red { background: #EF5350; }
.sdp-pc-off { opacity: 0.6; }
.sdp-pc-off .sdp-pc-left { text-decoration: line-through; color: var(--text-muted); }

/* ---- Cloud Scene ---- */
.sdp-cloud-scene { position: relative; }
.sdp-cloud-big {
    font-size: 64px;
    text-align: center;
    margin-bottom: 8px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.08));
}
.sdp-cloud-rays {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 245, 233, 0.5), transparent 70%);
    position: absolute;
    top: 20%; left: 50%;
    transform: translateX(-50%);
}
.sdp-cloud-nodes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}
.sdp-cn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--divider);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sdp-cn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.sdp-cn-icon { font-size: 24px; flex-shrink: 0; }
.sdp-cn-text strong { font-size: 13px; display: block; color: var(--text); }
.sdp-cn-text small { font-size: 10px; color: var(--text-muted); }

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--green-500), var(--green-300), var(--green-500));
    transform-origin: left;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
    transition: none;
}

/* ============================================
   STAGGERED REVEAL SYSTEM
   ============================================ */
[data-stagger-child] {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    filter: blur(3px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger-child].stagger-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
/* When stagger parent also has data-animate, ensure parent animate doesn't hide children */
[data-animate][data-stagger].visible [data-stagger-child] {
    /* Children control their own visibility via stagger */
}

/* ============================================
   CTA FLOATING PARTICLES
   ============================================ */
.cta-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
    animation: ctaFloat linear infinite;
}
@keyframes ctaFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}

/* ============================================
   ENHANCED SECTION TRANSITIONS (gradient overlaps)
   ============================================ */
.coin-wallet::before,
.earn-section::before,
.community::before,
.future::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 160px;
    pointer-events: none;
    z-index: 0;
}
.earn-section { position: relative; }
.earn-section::before {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #F1F8E9 100%);
    top: -80px;
}
.community { position: relative; }
.community::before {
    background: linear-gradient(180deg, #F1F8E9, #fff);
    top: -80px;
}

/* ============================================
   FUTURE / ROADMAP
   ============================================ */
.future {
    padding: 60px 0 100px;
    background: #fff;
    position: relative;
    z-index: 2;
}
/* Curvy road timeline */
.road-timeline {
    position: relative;
    min-height: 900px;
}
.road-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.15));
}
.road-path {
    transition: stroke-dashoffset 0.05s linear;
    stroke: #43A047;
    stroke-width: 7;
}
.road-milestones {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 900px;
}

/* Milestone node */
.rm-node {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 400px;
    opacity: 0;
    transform: translateY(24px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-node.rm-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Marker dot (shared) */
.rm-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

/* DONE marker — 3D glowing green check */
.rm-marker-done {
    background: linear-gradient(145deg, var(--green-500), var(--green-800));
    box-shadow:
        0 4px 14px rgba(46, 125, 50, 0.35),
        0 0 20px rgba(76, 175, 80, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.3);
}
.rm-revealed .rm-marker-done {
    animation: markerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes markerPop {
    0% { transform: scale(0.6); }
    100% { transform: scale(1); }
}

/* DEVELOPING marker — pulsing amber dot */
.rm-marker-dev {
    background: linear-gradient(145deg, #FFA726, #F57C00);
    box-shadow:
        0 4px 14px rgba(245, 124, 0, 0.3),
        0 0 16px rgba(255, 167, 38, 0.15);
}
.rm-pulse-ring {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
}

/* UPCOMING marker — grey outline */
.rm-marker-upcoming {
    background: #fff;
    border: 2px dashed var(--divider);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* PREMIUM marker — gold crown */
.rm-marker-premium {
    background: linear-gradient(145deg, #FFD54F, #FFB300);
    font-size: 18px;
    box-shadow:
        0 4px 14px rgba(255, 179, 0, 0.35),
        0 0 20px rgba(255, 213, 79, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Card */
.rm-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid var(--divider);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    flex: 1;
}
.rm-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 36px rgba(27, 94, 32, 0.12), 0 4px 12px rgba(0,0,0,0.06);
    border-color: var(--green-200);
}
.rm-emoji { font-size: 28px; flex-shrink: 0; }
.rm-info { flex: 1; min-width: 0; }
.rm-info h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.rm-info p { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin: 0; }

/* Status badges */
.rm-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.rm-badge-done {
    background: var(--green-50);
    color: var(--green-800);
}
.rm-badge-dev {
    background: #FFF3E0;
    color: #E65100;
}
.rm-badge-upcoming {
    background: #F5F5F5;
    color: var(--text-muted);
}
.rm-badge-premium {
    background: linear-gradient(135deg, #FFF8E1, #FFE082);
    color: #F57F17;
    border: 1px solid #FFD54F;
}

/* Premium card distinct style */
.rm-card-premium {
    background: linear-gradient(165deg, #FFFDE7, #fff, #FFFDE7);
    border-color: #FFD54F;
}
.rm-card-premium:hover {
    border-color: #FFB300;
    box-shadow: 0 8px 28px rgba(255, 179, 0, 0.15);
}

/* Done nodes — subtle glow on the card too */
.rm-done .rm-card {
    border-color: var(--green-100);
}
.rm-done .rm-card:hover {
    border-color: var(--green-300);
}

/* ============================================
   CTA / DOWNLOAD
   ============================================ */
.cta-section {
    padding: 100px 0 120px;
    background: var(--bg);
}
.cta-card {
    background: linear-gradient(135deg, #052e16, #15803d, #16a34a);
    border-radius: var(--radius-xl);
    padding: 80px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(5, 46, 22, 0.3), 0 8px 20px rgba(0,0,0,0.15);
}
.cta-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 50%);
}
.cta-content {
    position: relative;
    z-index: 2;
}
.cta-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.cta-content > p {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.store-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    position: relative;
    transition: all var(--transition);
}
.store-btn small {
    font-size: 11px;
    opacity: 0.7;
    display: block;
}
.store-btn strong {
    font-size: 16px;
    display: block;
}
.store-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}
.coming-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    border-radius: var(--radius-md);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.notify-form { max-width: 520px; margin: 0 auto; }
.notify-text {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 16px;
    line-height: 1.5;
}
.notify-fields { display: flex; flex-direction: column; gap: 12px; }
.notify-row { display: flex; gap: 10px; }
.notify-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: 15px;
    font-family: var(--font);
    outline: none;
    transition: all var(--transition);
}
.notify-input-wrap:focus-within {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.15);
}
.notify-input-icon { font-size: 16px; flex-shrink: 0; }
.notify-input-wrap input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    font-family: var(--font);
    outline: none;
}
.notify-input-wrap input::placeholder { color: rgba(255,255,255,0.4); }
.notify-btn {
    width: 100%;
    justify-content: center;
    background: #fff !important;
    color: var(--green-800) !important;
    font-weight: 700;
    padding: 14px !important;
    font-size: 15px !important;
}
.notify-btn:hover {
    background: var(--green-50) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.notify-or {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    align-self: center;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.shake { animation: shake 0.4s ease; }
.notify-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 4px;
}

/* ============================================
   CTA v2 — sleek, vibrant email-only subscribe
   ============================================ */
.cta-card-v2 {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 96px 64px 108px;
    text-align: center;
    isolation: isolate;
    background:
        radial-gradient(120% 80% at 85% 15%, rgba(255, 193, 7, 0.55) 0%, rgba(255, 193, 7, 0) 55%),
        radial-gradient(110% 90% at 8% 95%, rgba(229, 57, 53, 0.55) 0%, rgba(229, 57, 53, 0) 60%),
        radial-gradient(140% 100% at 50% 110%, rgba(27, 94, 32, 0.85) 0%, rgba(27, 94, 32, 0) 60%),
        linear-gradient(135deg, #0b2e16 0%, #1b5e20 38%, #d84315 110%);
    box-shadow:
        0 40px 90px -20px rgba(216, 67, 21, 0.35),
        0 24px 60px -15px rgba(11, 46, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Ambient orbs drifting in the background for energy + depth */
.cta-orbs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}
.cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(42px);
    opacity: 0.7;
    will-change: transform;
}
.cta-orb-1 {
    width: 360px; height: 360px;
    top: -80px; right: -60px;
    background: radial-gradient(circle, #ffb300 0%, rgba(255, 179, 0, 0) 70%);
    animation: ctaOrbDrift1 14s ease-in-out infinite;
}
.cta-orb-2 {
    width: 300px; height: 300px;
    bottom: -70px; left: -50px;
    background: radial-gradient(circle, #e53935 0%, rgba(229, 57, 53, 0) 70%);
    animation: ctaOrbDrift2 17s ease-in-out infinite;
}
.cta-orb-3 {
    width: 240px; height: 240px;
    top: 30%; left: 42%;
    background: radial-gradient(circle, #66bb6a 0%, rgba(102, 187, 106, 0) 70%);
    opacity: 0.45;
    animation: ctaOrbDrift3 19s ease-in-out infinite;
}
@keyframes ctaOrbDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-22px, 20px) scale(1.06); }
}
@keyframes ctaOrbDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(26px, -18px) scale(1.08); }
}
@keyframes ctaOrbDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
    50%      { transform: translate(-14px, -20px) scale(1.1); opacity: 0.6; }
}

/* Subtle film grain on top — adds tactile realism */
.cta-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.14;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
    border-radius: inherit;
}

/* Floating sparkles for a touch of magic */
.cta-sparkle {
    position: absolute;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(255, 224, 130, 0.55));
    animation: ctaSparkleTwinkle 3.6s ease-in-out infinite;
}
.cta-sparkle-1 { top: 14%; left: 12%; }
.cta-sparkle-2 { top: 68%; right: 14%; animation-delay: 1.4s; }
@keyframes ctaSparkleTwinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0deg); }
    50%      { opacity: 1;    transform: scale(1.15) rotate(20deg); }
}

/* Content layer sits above effects */
.cta-content-v2 {
    position: relative;
    z-index: 3;
    max-width: 680px;
    margin: 0 auto;
}

/* Eyebrow tag — amber pill with pulsing dot */
.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 224, 130, 0.55);
    color: #FFE082;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 28px;
}
.cta-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFC107;
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    animation: ctaEyebrowPulse 2s ease-in-out infinite;
}
@keyframes ctaEyebrowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0); }
}

/* Big quote — serif-leaning vibrant headline */
.cta-quote {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 auto 20px;
    max-width: 16ch;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(216, 67, 21, 0.28);
}
.cta-quote em {
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(100deg, #FFE082 0%, #FFAB40 50%, #FF8A65 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cta-quote-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35em;
    line-height: 0;
    color: rgba(255, 224, 130, 0.7);
    padding: 0 0.08em;
    vertical-align: -0.18em;
}
.cta-quote-mark-end { vertical-align: -0.35em; }

.cta-sub {
    font-size: clamp(15px, 1.6vw, 17px);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    max-width: 44ch;
    margin: 0 auto 36px;
}
.cta-sub .brand {
    color: #FFE082;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(255, 224, 130, 0.35);
}

/* Floating pill input with inline Subscribe button */
.cta-subscribe {
    max-width: 520px;
    margin: 0 auto;
}
.cta-sub-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 6px 18px;
    background: rgba(12, 20, 14, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 24px 50px -18px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.cta-sub-wrap:focus-within {
    border-color: rgba(255, 224, 130, 0.55);
    box-shadow:
        0 24px 60px -18px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(255, 193, 7, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}
.cta-sub-icon {
    color: rgba(255, 224, 130, 0.85);
    flex-shrink: 0;
}
.cta-sub-wrap input[type="email"] {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-family: var(--font);
    font-size: 15px;
    padding: 14px 12px;
    letter-spacing: 0.01em;
}
.cta-sub-wrap input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* Override legacy .notify-btn white full-width style inside v2 */
.cta-card-v2 .notify-btn.cta-sub-btn {
    width: auto !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    color: #3E1700 !important;
    background: linear-gradient(135deg, #FFD54F 0%, #FFB300 55%, #FF8A65 100%) !important;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow:
        0 10px 22px -6px rgba(255, 138, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, filter 0.25s ease;
}
.cta-card-v2 .notify-btn.cta-sub-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 14px 30px -8px rgba(255, 138, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.cta-card-v2 .notify-btn.cta-sub-btn:active {
    transform: translateY(0);
}
.cta-card-v2 .notify-btn.cta-sub-btn svg {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-card-v2 .notify-btn.cta-sub-btn:hover svg {
    transform: translateX(3px);
}

/* Inline error pill — shown when /api/subscribe returns a failure */
.cta-error {
    margin: 14px auto 0;
    padding: 10px 16px;
    max-width: 520px;
    font-size: 13px;
    line-height: 1.5;
    color: #FFCDD2;
    background: rgba(244, 67, 54, 0.14);
    border: 1px solid rgba(244, 67, 54, 0.45);
    border-radius: 14px;
    text-align: center;
    animation: ctaErrorIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ctaErrorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Micro trust line under input */
.cta-micro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px auto 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
}
.cta-micro svg {
    color: #A5D6A7;
    flex-shrink: 0;
}

/* Responsive — stack button under input on narrow screens */
@media (max-width: 560px) {
    .cta-card-v2 {
        padding: 72px 22px 84px;
        border-radius: 26px;
    }
    .cta-sub-wrap {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        border-radius: 22px;
        gap: 10px;
    }
    .cta-sub-icon { display: none; }
    .cta-sub-wrap input[type="email"] {
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        text-align: center;
    }
    .cta-card-v2 .notify-btn.cta-sub-btn {
        width: 100% !important;
        justify-content: center;
        padding: 14px 22px !important;
    }
    .cta-sparkle-1 { top: 8%; left: 6%; }
    .cta-sparkle-2 { top: 72%; right: 6%; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-orb,
    .cta-sparkle,
    .cta-eyebrow-dot { animation: none; }
}

/* Success state */
.notify-success {
    text-align: center;
    padding: 20px 0;
    animation: fadeScreen 0.5s ease;
}
.ns-icon { font-size: 48px; margin-bottom: 12px; }
.notify-success h3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}
.notify-success p {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin-bottom: 16px;
}
.ns-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--green-800);
    background: var(--green-50);
    padding: 6px 16px;
    border-radius: var(--radius-full);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--green-900);
    color: rgba(255,255,255,0.8);
    padding: 60px 0 32px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}
.footer-brand .logo {
    color: #fff;
    margin-bottom: 12px;
}
.footer-brand .logo-icon {
    background: rgba(255,255,255,0.15);
}
.footer-brand p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.7;
    max-width: 280px;
}
.footer-links h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.footer-links a {
    display: block;
    font-size: 14px;
    opacity: 0.6;
    padding: 4px 0;
    transition: opacity var(--transition);
}
.footer-links a:hover { opacity: 1; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom p {
    font-size: 13px;
    opacity: 0.5;
}
.footer-creators {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}
.fc-text { white-space: nowrap; margin-right: 4px; }
.fc-collab { color: rgba(255,255,255,0.55); }
.fc-dev-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    perspective: 600px;
}
.fc-dev-name {
    display: inline-block;
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #66BB6A, #A5D6A7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform 0.4s cubic-bezier(.25,.8,.25,1), text-shadow 0.4s;
    cursor: pointer;
    text-shadow: 0 0 0 transparent;
}
.fc-dev-wrap:hover .fc-dev-name {
    transform: rotateX(-8deg) rotateY(6deg) translateY(-2px) scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(76,175,80,0.4));
}
.fc-socials {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateX(-8px) scale(0.8);
    transition: all 0.35s cubic-bezier(.25,.8,.25,1);
    pointer-events: none;
}
.fc-dev-wrap:hover .fc-socials {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}
.fc-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    transition: all 0.25s ease;
    transform: perspective(200px) rotateY(0deg);
}
.fc-social-icon:hover {
    background: rgba(76,175,80,0.2);
    color: #81C784;
    transform: perspective(200px) rotateY(12deg) scale(1.15);
    box-shadow: 0 4px 14px rgba(76,175,80,0.3);
}
.creator-role {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(76,175,80,0.15);
    color: #66BB6A;
    padding: 2px 7px;
    border-radius: 20px;
    vertical-align: middle;
}
.footer-tagline { opacity: 0.6 !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-content { order: 1; }
    .hero-visual { order: 0; margin-bottom: 20px; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-cta-group { justify-content: center; }
    .hero-store-badges { justify-content: center; }
    .hero-stats { justify-content: center; }

    .phone-secondary { display: none; }
    .phone-tertiary { display: none; }
    .floating-card { display: none; }

    .feat-interactive { grid-template-columns: 1fr; gap: 24px; }
    .feat-side { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .feat-left, .feat-right { align-items: stretch; text-align: left; }
    .feat-left .feat-item { flex-direction: row; }
    .feat-item { max-width: none; }
    .security-grid { grid-template-columns: repeat(2, 1fr); }
    .sec-layout { grid-template-columns: 1fr 1fr; gap: 24px; }
    .rm-node { max-width: 340px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .community-inner { grid-template-columns: 1fr; }
    .map-visual { order: -1; height: 320px; }

    .coin-layout { grid-template-columns: 1fr; gap: 40px; }
    .coin-phone-col { order: -1; }
    .earn-grid { grid-template-columns: repeat(2, 1fr); }
    .redeem-grid { grid-template-columns: 1fr 1fr; }
    .vqb-inner { flex-direction: column; text-align: center; }
    .vqb-flow { flex-wrap: wrap; justify-content: center; }
    .updates-layout { grid-template-columns: 1fr; gap: 32px; }
    .support-grid { grid-template-columns: 1fr 1fr; }
    .support-card { min-height: auto; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 24px;
        gap: 16px;
        box-shadow: var(--shadow-md);
        border-bottom: 1px solid var(--divider);
    }
    .mobile-menu-btn { display: flex; }
    .mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .hero { padding: 120px 0 60px; min-height: auto; }
    .phone-frame { width: 240px; height: 500px; border-radius: 42px; }
    .phone-notch { width: 76px; height: 22px; border-radius: 16px; }
    .phone-screen { border-radius: 36px; }

    .marquee-section { padding: 32px 0; }
    .dual-grid { grid-template-columns: 1fr; }
    .dual-card { padding: 32px 24px; }
    .feat-item { padding: 12px 14px; }
    .feat-text p { display: none; }
    .security-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Security section — stack vertically */
    .sec-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .sec-stack {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .sec-card {
        flex: 1;
        min-width: 140px;
        padding: 12px 14px;
    }
    .sec-card:nth-child(2),
    .sec-card:nth-child(3),
    .sec-card:nth-child(4) {
        transform: none;
    }
    .sec-card .sec-card-text p { display: none; }
    .sec-detail { min-height: 220px; }

    /* Roadmap — vertical list instead of absolute positioned */
    .road-timeline { min-height: auto; }
    .road-svg { display: none; }
    .road-milestones {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0 8px;
    }
    .rm-node {
        position: static !important;
        max-width: 100%;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 1;
        transform: none;
    }
    .rm-card { width: 100%; }
    .rm-node { max-width: 100%; }
    .rm-info p { display: none; }

    .hiw-panel.active { grid-template-columns: 1fr; gap: 32px; }
    .hiw-phone-col { order: -1; }
    .hiw-steps-col { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .hiw-step { flex: 1; min-width: 200px; }
    .hiw-body p { display: none; }

    .hero-stats {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .stat-card { justify-content: center; }

    .cta-card { padding: 48px 24px; }
    .notify-row { flex-direction: column; }
    .store-btn { width: 100%; justify-content: center; }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .footer-creators {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 6px;
    }
    .fc-socials {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .section-header { margin-bottom: 40px; }
    .features, .how-it-works, .dual-section, .showcase,
    .community, .security, .future, .cta-section,
    .coin-wallet, .updates-section, .support-section,
    .earn-section, .redeem-section, .tri-section {
        padding: 60px 0;
    }

    .earn-grid { grid-template-columns: 1fr; }
    .earn-card { padding: 18px; }
    .ec-content p { font-size: 12px; }
    .es-inner { flex-direction: column; text-align: center; }
    .es-right { flex-wrap: wrap; justify-content: center; }
    .redeem-grid { grid-template-columns: 1fr; }
    .redeem-path { padding: 24px 20px; }
    .vqb-inner { flex-direction: column; text-align: center; padding: 20px; }
    .vqb-flow { flex-wrap: wrap; justify-content: center; gap: 6px; }

    .coin-layout { grid-template-columns: 1fr; gap: 32px; }
    .coin-phone-col { order: -1; }
    .coin-flow-card { padding: 18px 20px; }
    .cf-body p { display: none; }
    .coin-flow-connector { margin-left: 34px; height: 14px; }

    .updates-layout { grid-template-columns: 1fr; gap: 24px; }
    .uf-message { font-size: 13px; }

    .support-grid { grid-template-columns: 1fr; }
    .support-card { min-height: auto; padding: 24px 20px; }

    .community-illustration { width: 260px; height: 260px; }
    .ci-1 { width: 260px; height: 260px; }
    .ci-2 { width: 180px; height: 180px; top: 40px; left: 40px; }
    .ci-3 { width: 100px; height: 100px; top: 80px; left: 80px; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero h1 { font-size: 2rem; }
    .phone-frame { width: 220px; height: 460px; border-radius: 38px; }
    .phone-notch { width: 68px; height: 20px; border-radius: 14px; }
    .phone-screen { border-radius: 32px; }
    .marquee-item { padding: 10px 18px; }
    .marquee-value { font-size: 15px; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .btn-nav { display: none; }

    .hero-store-btn { padding: 8px 14px; }
    .hero-store-btn strong { font-size: 12px; }
    .hero-store-btn small { font-size: 9px; }
    .hero-store-btn svg { width: 16px; height: 16px; }

    .section-header h2 { font-size: 1.6rem; }
    .section-header p { font-size: 14px; }

    .sec-layout { grid-template-columns: 1fr; gap: 16px; }
    .sec-stack { flex-direction: column; gap: 6px; }
    .sec-card {
        min-width: auto;
        padding: 10px 12px;
        gap: 10px;
    }
    .sec-icon-wrap { width: 36px; height: 36px; }
    .sec-card-text h4 { font-size: 13px; }
    .sec-detail { min-height: 180px; }
    .sdp-otp-scene { padding: 24px 16px; }
    .sec-otp-digits { gap: 6px; }
    .sec-digit { width: 36px; height: 46px; font-size: 20px; }

    .road-milestones { gap: 12px; padding: 0; }
    .rm-card { padding: 14px; }
    .rm-emoji { font-size: 24px; }
    .rm-info h4 { font-size: 14px; }

    .footer-creators { font-size: 11px; }
    .fc-dev-name { font-size: 11px; }
    .creator-role { font-size: 8px; padding: 1px 5px; }
    .fc-social-icon { width: 22px; height: 22px; }
    .fc-social-icon svg { width: 12px; height: 12px; }

    .map-visual { height: 240px; }
    .community-illustration { width: 200px; height: 200px; }

    .coin-flow-card { padding: 14px 16px; gap: 12px; }
    .cf-num { width: 30px; height: 30px; font-size: 14px; }
    .cf-icon-wrap { width: 34px; height: 34px; }
    .coin-flow-connector { margin-left: 30px; }
    .cw-balance strong { font-size: 26px; }

    .earn-card { flex-direction: column; gap: 12px; }
    .ec-icon-wrap { width: 44px; height: 44px; }
    .ec-streak-dots { justify-content: center; }
    .merch-tier { padding: 10px 12px; }
    .mt-cost { font-size: 14px; }
    .rp-header h3 { font-size: 17px; }
    .vqb-icon { width: 48px; height: 48px; }
    .vqb-icon svg { width: 28px; height: 28px; }

    .uf-card { padding: 14px 16px; }
    .uh-card { padding: 14px 16px; gap: 12px; }
    .uh-content p { display: none; }

    .sc-lang-pill { padding: 10px 14px; }
    .sc-pay-mode { padding: 10px 14px; }
    .sc-guide-line { width: 14px; margin: 0 4px; margin-bottom: 18px; }
}

/* ============================================================
   ============  PRELOADER  ============
   ============================================================ */
.lh-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.8s linear;
}
.lh-loader.lh-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* prevent body scroll while loading */
body.lh-loading { overflow: hidden; }

.lh-loader-stage {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lh-loader-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: lhRingSpin 18s linear infinite;
}
.lh-loader-text {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    fill: rgba(27, 94, 32, 0.55);
    text-transform: uppercase;
}
.lh-loader-coin {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2E7D32 0%, #1B5E20 55%, #0d3b11 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 12px 32px rgba(27, 94, 32, 0.35),
        0 0 0 2px rgba(255,255,255,0.08) inset,
        0 -6px 12px rgba(255,255,255,0.12) inset,
        0 6px 12px rgba(0,0,0,0.25) inset;
    animation: lhCoinFlip 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.lh-loader-coin::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.18);
}
.lh-coin-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lhCoinFaceCounter 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes lhRingSpin {
    to { transform: rotate(360deg); }
}
@keyframes lhCoinFlip {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(360deg); }
}
@keyframes lhCoinFaceCounter {
    0%, 100% { transform: rotateY(0deg); opacity: 1; }
    45%, 55% { opacity: 0.15; }
    50%      { transform: rotateY(-360deg); }
}
@media (max-width: 640px) {
    .lh-loader-stage { width: 180px; height: 180px; }
    .lh-loader-coin { width: 68px; height: 68px; }
    .lh-loader-text { font-size: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .lh-loader-ring, .lh-loader-coin, .lh-coin-face { animation-duration: 0s; }
}

/* ============================================================
   ============  HERO FLOATING ELEMENTS (extras)  ============
   ============================================================ */
.hero-visual { will-change: transform; }

.floating-card {
    animation: floatCard 6s ease-in-out infinite;
    will-change: transform;
    transition: box-shadow 0.3s ease;
}
.floating-card:hover {
    box-shadow: 0 16px 40px rgba(27,94,32,0.18);
}
.fc-coin {
    top: 22%;
    left: -60px;
    padding: 10px 16px 10px 12px;
    animation-delay: 0.8s;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(232,245,233,0.92));
}
.fc-coin-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(145deg, #C8E6C9, #A5D6A7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(27,94,32,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
    flex-shrink: 0;
}
.fc-pin {
    bottom: 40px;
    right: -50px;
    animation-delay: 2.4s;
}
.fc-pin-ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFE0B2, #FFCC80);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.fc-verified {
    top: 48%;
    right: -20px;
    font-size: 12px;
    padding: 9px 14px 9px 10px;
    color: #1B5E20;
    animation-delay: 3.2s;
}
.fc-verify-ico {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--green-500), var(--green-800));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(46,125,50,0.3);
    flex-shrink: 0;
}
.fc-live {
    top: 10%;
    right: 10%;
    font-size: 11px;
    padding: 7px 12px;
    animation-delay: 4s;
    background: rgba(255,255,255,0.95);
    color: #C62828;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.fc-live-dot {
    width: 7px;
    height: 7px;
    background: #E53935;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(229,57,53,0.6);
    animation: fcLivePulse 1.8s ease-out infinite;
    flex-shrink: 0;
}
@keyframes fcLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(229,57,53,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(229,57,53,0); }
    100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

/* ============================================================
   ============  EVERY CORNER COUNTS — Overlapping Hover Tiles
   ============================================================ */
.corners-section {
    position: relative;
    padding: 120px 24px 140px;
    background: linear-gradient(180deg, #ffffff 0%, #F6F3EB 60%, #ffffff 100%);
    z-index: 1;
    text-align: center;
}
.corners-copy {
    max-width: 720px;
    margin: 0 auto 72px;
}
.corners-copy .section-tag {
    display: inline-block;
    padding: 6px 14px;
    background: var(--green-50);
    color: var(--green-800);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.corners-copy h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 18px;
}
.corners-copy p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* The row: flex container with negative gap (overlap) so tiles stack like cards */
.corners-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
    perspective: 1400px;
    min-height: 380px;
}

/* Tile — slight baseline tilt via the inline --t-rot var.
   Overlap horizontally with negative margin; neighbours shift away on hover. */
.corner-tile {
    --t-rot: 0deg;
    --t-hover-rot: 0deg;
    position: relative;
    flex: 0 0 auto;
    width: 220px;
    height: 300px;
    margin: 0 -24px;               /* overlap */
    border-radius: 18px;
    overflow: hidden;
    transform: rotate(var(--t-rot)) translateY(0) scale(1);
    transform-origin: center 85%;
    /* No resting shadow — avoids a translucent dark column bleeding onto
       the adjacent overlapping tile. Shadow only appears on hover below. */
    box-shadow: none;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease,
        margin 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        z-index 0s;
    cursor: pointer;
    z-index: 1;
    will-change: transform, margin;
}

/* Base z-index stair so the center tile reads as closer in resting state */
.corner-tile:nth-child(1) { z-index: 1; }
.corner-tile:nth-child(2) { z-index: 2; }
.corner-tile:nth-child(3) { z-index: 3; }
.corner-tile:nth-child(4) { z-index: 2; }
.corner-tile:nth-child(5) { z-index: 1; }

/* Hover — lifts the tile forward with a slightly stronger tilt and shadow */
.corner-tile:hover {
    transform: rotate(var(--t-hover-rot)) translateY(-28px) scale(1.08);
    box-shadow:
        0 44px 80px rgba(27, 94, 32, 0.28),
        0 14px 24px rgba(0, 0, 0, 0.16);
    z-index: 10;
    margin: 0 40px;                /* significant gap on both sides */
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease,
        margin 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Neighbour behaviour — tiles before the hovered one shift LEFT, tiles after
   shift RIGHT, creating a visible gap around the lifted tile. */
.corners-row:has(.corner-tile:hover) .corner-tile:not(:hover) {
    transform: rotate(calc(var(--t-rot) * 1.4)) translateY(6px) scale(0.96);
    opacity: 0.88;
}
/* Tiles that come AFTER the hovered one — push further right */
.corner-tile:hover ~ .corner-tile {
    transform: rotate(calc(var(--t-rot) * 1.4)) translate(26px, 6px) scale(0.96);
}
/* Tiles that come BEFORE the hovered one — push further left */
.corners-row:has(.corner-tile:nth-child(2):hover) .corner-tile:nth-child(1),
.corners-row:has(.corner-tile:nth-child(3):hover) .corner-tile:nth-child(1),
.corners-row:has(.corner-tile:nth-child(3):hover) .corner-tile:nth-child(2),
.corners-row:has(.corner-tile:nth-child(4):hover) .corner-tile:nth-child(1),
.corners-row:has(.corner-tile:nth-child(4):hover) .corner-tile:nth-child(2),
.corners-row:has(.corner-tile:nth-child(4):hover) .corner-tile:nth-child(3),
.corners-row:has(.corner-tile:nth-child(5):hover) .corner-tile:nth-child(1),
.corners-row:has(.corner-tile:nth-child(5):hover) .corner-tile:nth-child(2),
.corners-row:has(.corner-tile:nth-child(5):hover) .corner-tile:nth-child(3),
.corners-row:has(.corner-tile:nth-child(5):hover) .corner-tile:nth-child(4) {
    transform: rotate(calc(var(--t-rot) * 1.4)) translate(-26px, 6px) scale(0.96);
}
/* Fallback for browsers without :has — siblings quietly remain at base */

/* Tile image */
.ct-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.corner-tile:hover .ct-img { transform: scale(1.08); }

/* Dark gradient under the label for legibility */
.ct-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.78) 100%);
}

/* Category gradient + emoji centrepiece (same palette as before) */
.ct-img-1 { background: linear-gradient(145deg, #A1887F 0%, #5D4037 100%); }
.ct-img-2 { background: linear-gradient(145deg, #66BB6A 0%, #2E7D32 100%); }
.ct-img-3 { background: linear-gradient(145deg, #FFB74D 0%, #E65100 100%); }
.ct-img-4 { background: linear-gradient(145deg, #EF5350 0%, #B71C1C 100%); }
.ct-img-5 { background: linear-gradient(145deg, #7986CB 0%, #283593 100%); }
.ct-img::before {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 84px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.corner-tile:hover .ct-img::before {
    transform: translate(-50%, -58%) scale(1.08);
}
.ct-img-1::before { content: '🍵'; }
.ct-img-2::before { content: '🥬'; }
.ct-img-3::before { content: '🛒'; }
.ct-img-4::before { content: '🍛'; }
.ct-img-5::before { content: '✂️'; }

/* Label — bold uppercase white text at the bottom */
.ct-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 2;
    text-align: center;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 16px;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.corners-footnote {
    margin: 48px 0 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.65;
}

/* Responsive — mobile falls back to a centred overlapping strip that scrolls horizontally */
@media (max-width: 900px) {
    .corners-section { padding: 90px 16px 100px; }
    .corners-row {
        overflow-x: auto;
        justify-content: flex-start;
        padding: 32px 24px 40px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        min-height: 340px;
    }
    .corner-tile {
        width: 180px;
        height: 250px;
        margin: 0 -18px;
        scroll-snap-align: center;
        flex-shrink: 0;
    }
    .corner-tile:hover { margin: 0 8px; }
    .ct-label { font-size: 15px; bottom: 16px; }
    .ct-img::before { font-size: 64px; }
}
@media (max-width: 600px) {
    .corner-tile { width: 160px; height: 220px; margin: 0 -14px; }
    .ct-label { font-size: 14px; }
}

/* ============================================================
   ============  FOUNDER'S NOTE  ============
   ============================================================ */
.founders-note {
    position: relative;
    padding: 140px 24px 160px;
    background: #FAFAF7;
    color: #1a1a1a;
    overflow: hidden;
}
.founders-note::before,
.founders-note::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.founders-note::before {
    width: 560px; height: 560px;
    top: -180px; left: -160px;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.08), transparent 65%);
}
.founders-note::after {
    width: 520px; height: 520px;
    bottom: -200px; right: -120px;
    background: radial-gradient(circle, rgba(46, 125, 50, 0.07), transparent 65%);
}

/* Static green gradient coin (matches preloader coin, but does not animate) */
.fn-badge {
    margin: 0 auto 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.fn-coin {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2E7D32 0%, #1B5E20 55%, #0d3b11 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 16px 36px rgba(27, 94, 32, 0.28),
        0 0 0 2px rgba(255,255,255,0.08) inset,
        0 -6px 12px rgba(255,255,255,0.12) inset,
        0 6px 12px rgba(0,0,0,0.25) inset;
}
.fn-coin::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.22);
}
.fn-coin-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fn-container {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Grotesk display headline — clean, architectural, letter-spaced tight */
.fn-headline {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(32px, 4.6vw, 58px);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.025em;
    margin: 0 0 80px;
    color: #1a1a1a;
}
.fn-headline .brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--green-800);
    text-shadow: none;
}
.fn-word {
    display: inline-block;
    opacity: 0.22;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 0.14em;
    will-change: opacity;
}
.fn-word.fn-lit { opacity: 1; }

/* Orange accent — emphasizes the key promise words when they light up */
.fn-word.fn-accent {
    color: #C2410C;
    font-weight: 600;
}
.fn-word.fn-accent.fn-lit {
    color: #E65100;
}

.fn-body {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(26, 26, 26, 0.62);
    max-width: 720px;
    margin: 0 auto 72px;
    letter-spacing: 0.01em;
}

.fn-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 2;
}
.fn-sig-wrap {
    width: auto;
    min-width: 240px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
}

/* Inlined SVG signature host — paths are prepped by JS (stroke-dasharray =
   pathLength, stroke-dashoffset = pathLength) so the ink appears to be
   drawn on stroke in sequence when .fn-sig-drawn is applied. */
.fn-sig-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    max-width: 86vw;
    height: auto;
    color: #0a0a0a;
}
.fn-sig-host svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.fn-sig-host svg path {
    stroke: #0a0a0a !important;
    fill: none !important;
    /* dashoffset is set inline by JS; transition-delay/duration are set
       per-path by JS so strokes reveal sequentially. */
    transition-property: stroke-dashoffset;
    transition-timing-function: cubic-bezier(0.52, 0.01, 0.3, 1);
    will-change: stroke-dashoffset;
}

.fn-sig-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-top: 12px;
    letter-spacing: 0.005em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s;
}
.fn-sig-role {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #E65100;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.6s ease 1.1s, transform 0.6s ease 1.1s;
}
.fn-signature.fn-sig-drawn .fn-sig-name,
.fn-signature.fn-sig-drawn .fn-sig-role {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 700px) {
    .founders-note { padding: 88px 20px 108px; }
    .fn-headline { font-size: 26px; margin-bottom: 56px; line-height: 1.28; }
    .fn-body { font-size: 13px; margin-bottom: 52px; }
    .fn-sig-wrap { min-width: 200px; }
    .fn-sig-text { font-size: 42px; }
    .fn-sig-underline { width: 200px; }
    .fn-badge { margin-bottom: 40px; }
    .fn-coin { width: 76px; height: 76px; }
    .fn-coin-face svg { width: 34px; height: 34px; }
}

/* ============================================================
   ============  OUR MISSION — Manifesto + Parallax Streetscape
   ============================================================ */
.mission {
    position: relative;
    padding: 140px 0 160px;
    background: #FBFAF6;
    overflow: hidden;
    isolation: isolate;
}
.mission-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.mbg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}
.mbg-glow-a {
    width: 620px; height: 620px;
    top: -160px; left: -200px;
    background: radial-gradient(circle, #A5D6A7, transparent 70%);
}
.mbg-glow-b {
    width: 560px; height: 560px;
    bottom: -200px; right: -160px;
    background: radial-gradient(circle, #FFCC80, transparent 70%);
    opacity: 0.35;
}
.mbg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(27, 94, 32, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 94, 32, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.mission-stage {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: start;
}

/* ---------- Left column: editorial manifesto ---------- */
.mission-left {
    padding-top: 8px;
    max-width: 560px;
}
.mission-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--green-800);
    margin-bottom: 28px;
}
.me-bar {
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #E65100, var(--green-600));
    border-radius: 2px;
}
.mission-head {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(36px, 4.8vw, 60px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 56px;
}
.mission-emph {
    position: relative;
    display: inline-block;
    color: #E65100;
    font-style: italic;
    font-weight: 500;
    white-space: nowrap;
}
.me-underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    width: 100%;
    height: 14px;
    color: #E65100;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mission.mission-in-view .me-underline { stroke-dashoffset: 0; }

/* Numbered manifesto list */
.mission-list {
    list-style: none;
    padding: 0;
    margin: 0 0 56px;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: mpr;
    border-top: 1px solid rgba(27, 94, 32, 0.12);
}
.mpr {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    padding: 28px 0 28px 4px;
    border-bottom: 1px solid rgba(27, 94, 32, 0.12);
    align-items: baseline;
    position: relative;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.38;
    transform: translateX(-8px);
}
.mpr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, #E65100, transparent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mpr.mpr-lit {
    opacity: 1;
    transform: translateX(0);
}
.mpr.mpr-lit::before { transform: scaleY(1); }
.mpr-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #E65100;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-block;
    padding-top: 4px;
}
.mpr-body h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 6px;
}
.mpr-body p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    max-width: 440px;
}
.mission-signoff {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0;
}
.mission-signoff span {
    font-weight: 600;
    color: var(--green-800);
}

/* ---------- Right column: parallax streetscape ---------- */
.mission-right {
    position: sticky;
    top: 110px;
    height: 620px;
    min-height: 620px;
}
.ss-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #FFF8E1 0%, #F1F8E9 45%, #E8F5E9 100%);
    box-shadow:
        0 40px 90px rgba(27, 94, 32, 0.16),
        0 12px 32px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.ss-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 18%, rgba(255, 183, 77, 0.55), transparent 55%),
        radial-gradient(ellipse at 20% 25%, rgba(255, 204, 128, 0.35), transparent 60%),
        linear-gradient(180deg, #FFE0B2 0%, #FFF3E0 40%, #F1F8E9 75%);
    z-index: 0;
}
/* Rich sun — SVG with radiating glow, positioned like a low golden-hour sun */
.ss-sun {
    position: absolute;
    top: 4%;
    right: 6%;
    width: 170px;
    height: 170px;
    filter: drop-shadow(0 0 50px rgba(255, 183, 77, 0.55));
    animation: ssSunPulse 8s ease-in-out infinite;
}
.ss-sun svg { width: 100%; height: 100%; display: block; }
@keyframes ssSunPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 50px rgba(255,183,77,0.55)); }
    50%      { transform: scale(1.04); filter: drop-shadow(0 0 70px rgba(255,183,77,0.75)); }
}

/* Thin wispy clouds in the sky */
.ss-cloud {
    position: absolute;
    background: #FFFFFF;
    border-radius: 100px;
    opacity: 0.55;
    filter: blur(6px);
}
.ss-cloud-1 { top: 14%; left: 8%;  width: 140px; height: 16px; animation: ssCloudDrift 32s linear infinite; }
.ss-cloud-2 { top: 22%; left: 38%; width: 90px;  height: 12px; opacity: 0.4; animation: ssCloudDrift 38s linear infinite -10s; }
@keyframes ssCloudDrift {
    0%   { transform: translateX(-30px); }
    100% { transform: translateX(60px); }
}

/* Distant birds */
.ss-birds {
    position: absolute;
    top: 28%;
    left: 18%;
    width: 180px;
    height: 50px;
    opacity: 0.55;
    animation: ssBirdsDrift 24s linear infinite;
}
@keyframes ssBirdsDrift {
    0%   { transform: translate(-10px, 0); opacity: 0; }
    10%  { opacity: 0.55; }
    90%  { opacity: 0.55; }
    100% { transform: translate(120px, -18px); opacity: 0; }
}

.ss-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}
.ss-layer svg {
    position: absolute;
    bottom: -2px;
    left: -10%;
    width: 120%;
    height: 78%;
    display: block;
}
.ss-far {
    z-index: 1;
    opacity: 0.9;
    filter: drop-shadow(0 12px 20px rgba(27, 94, 32, 0.06));
}
.ss-mid {
    z-index: 2;
    filter: drop-shadow(0 16px 30px rgba(27, 94, 32, 0.12));
}

/* Near layer — vendor cards + neon sign */
.ss-near {
    z-index: 3;
}
/* Ground — asphalt road with center lane markings and zebra crossing hint */
.ss-ground {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 78px;
    background:
        linear-gradient(180deg, #455A64 0%, #37474F 60%, #263238 100%);
    border-top: 2px solid #1C2A30;
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.05);
}
/* Dashed center lane line */
.ss-road-line {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 3px;
    background: repeating-linear-gradient(90deg, #FFEE58 0 24px, transparent 24px 44px);
    opacity: 0.85;
    transform: translateY(-50%);
}
/* Zebra crossing — diagonal stripe block on the left */
.ss-zebra {
    position: absolute;
    left: 4%;
    bottom: 6px;
    width: 90px;
    height: 56px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.82) 0 8px, transparent 8px 16px);
    transform: perspective(220px) rotateX(55deg);
    transform-origin: bottom center;
    opacity: 0.72;
    border-radius: 2px;
}
/* Warm lamp light pool on the road */
.ss-lamp-pool {
    position: absolute;
    left: 38%;
    bottom: -20px;
    width: 160px;
    height: 90px;
    background: radial-gradient(ellipse, rgba(255, 224, 130, 0.55), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
    animation: ssLampFlicker 5s ease-in-out infinite;
}
@keyframes ssLampFlicker {
    0%, 100% { opacity: 0.85; }
    48%, 52% { opacity: 0.6; }
    50%      { opacity: 0.95; }
}

/* Storefront SVG illustrations — anchored to the road */
.ss-shop {
    position: absolute;
    bottom: 52px;           /* sits on road */
    filter: drop-shadow(0 18px 24px rgba(27, 94, 32, 0.22)) drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}
.ss-shop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ss-shop-chai {
    left: 3%;
    width: 180px;
    height: 160px;
}
.ss-shop-kirana {
    right: 3%;
    width: 210px;
    height: 180px;
}
/* Animated kettle steam */
.ss-kettle-steam {
    animation: ssKettleSteam 3s ease-in-out infinite;
    transform-origin: 56px 72px;
}
@keyframes ssKettleSteam {
    0%   { opacity: 0.9; transform: translateY(0) scale(1); }
    50%  { opacity: 0.5; transform: translateY(-6px) scale(1.05); }
    100% { opacity: 0.9; transform: translateY(-12px) scale(1.1); }
}

/* Auto-rickshaw — parked mid-ground, slightly bobbing */
.ss-auto {
    position: absolute;
    bottom: 38px;
    left: 38%;
    width: 128px;
    height: 88px;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.2));
    animation: ssAutoBob 5.5s ease-in-out infinite;
}
.ss-auto svg { width: 100%; height: 100%; display: block; }
@keyframes ssAutoBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Street dogs — a sleepy little pair loafing BETWEEN the chai stall and the
   kirana. Kept smaller than the walking man for correct scale. */
.ss-dogs {
    position: absolute;
    bottom: 78px;              /* sidewalk level, beside the yellow arch */
    left: 30%;                 /* tucked to the left of the arch */
    display: flex;
    align-items: flex-end;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
}
/* Override the generic .ss-layer svg rule — positioning + sizing below.
   Selectors below use .ss-dogs svg.ss-dog-* to beat .ss-layer svg specificity. */
.ss-dogs svg.ss-dog {
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.22));
    overflow: visible;
    transform-origin: center bottom;
}
.ss-dogs svg.ss-dog-sleep {
    width: 30px; height: 16px;     /* smaller than the 40x66 walker */
    animation: ssDogSleepBreathe 4.5s ease-in-out infinite;
}
.ss-dogs svg.ss-dog-sit {
    width: 22px; height: 30px;     /* clearly smaller than the walker */
    animation: ssDogSitBob 5s ease-in-out infinite;
}
@keyframes ssDogSleepBreathe {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50%      { transform: scaleY(1.04) scaleX(1.01); }
}
@keyframes ssDogSitBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-0.4px) rotate(-1.2deg); }
    60%      { transform: translateY(0) rotate(1deg); }
}
@media (max-width: 720px) {
    .ss-dogs { left: 40%; bottom: 40px; gap: 3px; }
    .ss-dogs svg.ss-dog-sleep { width: 24px; height: 14px; }
    .ss-dogs svg.ss-dog-sit   { width: 18px; height: 26px; }
}

/* Cow lying on the pavement near the chai stall */
.ss-cow {
    position: absolute;
    bottom: 50px;
    left: 18%;
    width: 90px;
    height: 50px;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
    animation: ssCowBreathe 6s ease-in-out infinite;
}
.ss-cow svg { width: 100%; height: 100%; display: block; }
@keyframes ssCowBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}

/* Info signboard cards — tethered to storefronts via a thin stem */
.ss-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 14px;
    padding: 11px 14px 10px;
    box-shadow:
        0 20px 45px rgba(27, 94, 32, 0.22),
        0 6px 14px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.7);
    min-width: 140px;
    text-align: left;
    animation: ssCardFloat 6s ease-in-out infinite;
    z-index: 4;
}
/* Thin wire tether from card down to storefront */
.ssc-tether {
    position: absolute;
    bottom: -22px;
    width: 1.5px;
    height: 22px;
    background: linear-gradient(180deg, rgba(27,94,32,0.55), rgba(27,94,32,0.15));
}
.ssc-tether::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #43A047;
    box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.2);
}
.ssc-tether-left  { left: 28px; }
.ssc-tether-right { right: 28px; }

.ss-chai {
    bottom: 210px;
    left: 4%;
    transform: rotate(-3deg);
    animation-delay: 0s;
}
.ss-kirana {
    bottom: 240px;
    right: 4%;
    transform: rotate(2.5deg);
    animation-delay: 2s;
}
@keyframes ssCardFloat {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50%      { transform: translateY(-6px) rotate(var(--rot, 0deg)); }
}
.ss-chai    { --rot: -3deg; }
.ss-kirana  { --rot: 2.5deg; }
.ssc-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ssc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ssc-dot-green {
    background: #43A047;
    box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.5);
    animation: ssDotPulse 2s ease-out infinite;
}
.ssc-dot-amber {
    background: #FB8C00;
}
@keyframes ssDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(67, 160, 71, 0); }
    100% { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0); }
}
.ssc-emoji {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
}
.ssc-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
    margin-bottom: 2px;
}
.ssc-meta {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Faded corner wordmark — replaces the old neon sign with a subtle watermark */
.ss-wordmark {
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    opacity: 0.45;
    mix-blend-mode: multiply;
}
.ss-wordmark-main {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #1B5E20;
    text-transform: uppercase;
    line-height: 1;
}
.ss-wordmark-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: rgba(27, 94, 32, 0.7);
    text-transform: uppercase;
    line-height: 1;
}

/* Walking man — slow stroll on the far (upper) side of the road.
   Walks right-to-left, stops at Sharma Ji Ki Chai to pick up his package,
   then continues off the left edge. */
.ss-walker {
    position: absolute;
    bottom: 62px;             /* FAR strip — closer to the stalls */
    left: 100%;
    width: 40px;              /* slightly bigger than before */
    height: 66px;
    z-index: 3;
    transform-origin: center bottom;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    animation: ssWalkerStroll 34s linear infinite;
}
.ss-walker svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Stroll path — travels further left now so he reaches the chai stall:
   0–48%   walk from right edge across the road toward the chai stall
   48–60%  pause at Sharma Ji Ki Chai — takes the package
   60–100% walk off toward the left edge carrying the package */
@keyframes ssWalkerStroll {
    0%   { transform: translateX(0)      translateY(0); }
    16%  { transform: translateX(-170px) translateY(-0.5px); }
    32%  { transform: translateX(-330px) translateY(0); }
    48%  { transform: translateX(-500px) translateY(0); }        /* at chai stall */
    60%  { transform: translateX(-500px) translateY(0); }        /* still paused */
    78%  { transform: translateX(-700px) translateY(-0.5px); }
    100% { transform: translateX(-960px) translateY(0); }
}

/* Package — tucked into the front hand, hidden until the chai-stall pause */
.ss-walker .ssw-pkg {
    opacity: 0;
    transform-origin: 29px 37px;
    transform: translateY(8px) scale(0.6);
    animation: ssWalkerPkg 34s linear infinite;
}
@keyframes ssWalkerPkg {
    0%, 48%  { opacity: 0; transform: translateY(8px) scale(0.6); }
    52%      { opacity: 1; transform: translateY(-2px) scale(1.08); }   /* handed over */
    60%      { opacity: 1; transform: translateY(0) scale(1); }         /* settles in hand */
    100%     { opacity: 1; transform: translateY(0) scale(1); }         /* carries on */
}

/* ---------- Road traffic: car + scooter cruising right → left ---------- */
.ss-car {
    position: absolute;
    bottom: 12px;             /* NEAR (front) lane — farther from stalls */
    left: 100%;
    width: 170px;             /* bigger than the scooter */
    height: 96px;
    z-index: 4;               /* in front of walker (near-camera perspective) */
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.28));
    animation: ssCarDrive 14s linear infinite;
}
.ss-car img, .ss-car svg { width: 100%; height: 100%; display: block; object-fit: contain; }
@keyframes ssCarDrive {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-1100px); }
}

.ss-bike {
    position: absolute;
    bottom: 16px;             /* NEAR lane, slightly offset for depth */
    left: 100%;
    width: 96px;              /* smaller than the car */
    height: 72px;
    z-index: 4;               /* front lane — in front of walker */
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.26));
    animation: ssBikeRide 9s linear infinite;
    animation-delay: -4.5s;   /* offset so car + bike don't enter together */
}
/* Flip the scooter horizontally — asset faces right, travel is right→left */
.ss-bike img, .ss-bike svg {
    width: 100%; height: 100%; display: block; object-fit: contain;
    transform: scaleX(-1);
}
@keyframes ssBikeRide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-1050px); }
}

/* Shopkeeper inside the chai stall — gentle breathe + arm nudge when he
   hands over the package (subtle loop synced loosely with the walker). */
.ss-shopkeeper {
    /* scale down so he reads smaller than the walker at the counter */
    transform-origin: 93px 104px;
    transform: scale(0.82);
    animation: ssShopkeeperBreathe 5s ease-in-out infinite;
}
@keyframes ssShopkeeperBreathe {
    0%, 100% { transform: scale(0.82) translateY(0); }
    50%      { transform: scale(0.825) translateY(-0.3px); }
}
.ss-shopkeeper-arm {
    transform-origin: 82px 82px;
    animation: ssShopkeeperHandOff 34s ease-in-out infinite;
}
@keyframes ssShopkeeperHandOff {
    0%, 44%  { transform: rotate(0deg) translateX(0); }
    50%      { transform: rotate(-18deg) translateX(-4px); }   /* reaches out */
    58%      { transform: rotate(-10deg) translateX(-2px); }
    64%, 100%{ transform: rotate(0deg) translateX(0); }         /* back to rest */
}

/* Leg + arm swing — pivot at hip/shoulder; slower cadence to match walk */
.ss-walker .ssw-leg-front { transform-origin: 23px 34px; animation: ssWalkLegFront 0.95s ease-in-out infinite; }
.ss-walker .ssw-leg-back  { transform-origin: 17px 34px; animation: ssWalkLegBack  0.95s ease-in-out infinite; }
.ss-walker .ssw-arm-front { transform-origin: 28.5px 17px; animation: ssWalkArmFront 0.95s ease-in-out infinite; }
.ss-walker .ssw-arm-back  { transform-origin: 11.5px 17px; animation: ssWalkArmBack  0.95s ease-in-out infinite; }
@keyframes ssWalkLegFront {
    0%, 100% { transform: rotate(22deg); }
    50%      { transform: rotate(-22deg); }
}
@keyframes ssWalkLegBack {
    0%, 100% { transform: rotate(-22deg); }
    50%      { transform: rotate(22deg); }
}
@keyframes ssWalkArmFront {
    0%, 100% { transform: rotate(-18deg); }
    50%      { transform: rotate(18deg); }
}
@keyframes ssWalkArmBack {
    0%, 100% { transform: rotate(18deg); }
    50%      { transform: rotate(-18deg); }
}

/* Front layer — drifting wisps, leaves, coin spark */
.ss-front { z-index: 4; }
.ss-wisp {
    position: absolute;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    border-radius: 2px;
    filter: blur(2px);
    animation: ssWispDrift 9s linear infinite;
}
.ss-wisp-1 { top: 22%; left: 10%; animation-delay: 0s; }
.ss-wisp-2 { top: 45%; left: 34%; animation-delay: 3s; width: 60px; }
.ss-wisp-3 { top: 30%; right: 18%; animation-delay: 5s; width: 100px; }
@keyframes ssWispDrift {
    0%   { transform: translateX(-20px); opacity: 0; }
    20%  { opacity: 0.8; }
    80%  { opacity: 0.8; }
    100% { transform: translateX(80px); opacity: 0; }
}
.ss-leaf {
    position: absolute;
    font-size: 18px;
    opacity: 0.7;
    animation: ssLeafFloat 14s ease-in-out infinite;
}
.ss-leaf-1 { top: 18%; left: 48%; animation-delay: 0s; }
.ss-leaf-2 { top: 52%; right: 30%; animation-delay: 6s; font-size: 14px; }
@keyframes ssLeafFloat {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    33%      { transform: translate(-18px, 18px) rotate(-18deg); }
    66%      { transform: translate(14px, 32px) rotate(22deg); }
}
.ss-coin-spark {
    position: absolute;
    top: 55%;
    left: 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
    animation: ssCoinSparkle 4s ease-in-out infinite;
}
@keyframes ssCoinSparkle {
    0%, 100% { transform: rotate(-6deg) scale(1); opacity: 0.9; }
    50%      { transform: rotate(8deg) scale(1.1); opacity: 1; }
}

/* "You are here" corner marker */
.ss-here {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 12px 8px 10px;
    border-radius: 100px;
    box-shadow: 0 6px 18px rgba(27, 94, 32, 0.12);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-800);
}
.ss-here-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #43A047;
    position: relative;
}
.ss-here-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #43A047;
    animation: ssHerePulse 2s ease-out infinite;
}
@keyframes ssHerePulse {
    0%   { transform: scale(0.7); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Mission responsive */
@media (max-width: 1100px) {
    .mission-stage { grid-template-columns: 1fr; gap: 60px; }
    .mission-right { position: relative; top: 0; height: 480px; min-height: 480px; }
    .mission-left { max-width: 100%; }
}
@media (max-width: 640px) {
    .mission { padding: 96px 0 120px; }
    .mission-stage { padding: 0 20px; gap: 48px; }
    .mission-head { font-size: 32px; margin-bottom: 40px; }
    .mpr { grid-template-columns: 56px 1fr; padding: 22px 0; }
    .mpr-num { font-size: 18px; }
    .mpr-body h3 { font-size: 17px; }
    .mpr-body p { font-size: 13px; }
    .mission-right { height: 380px; min-height: 380px; }
    .ss-card { min-width: 130px; padding: 11px 13px 10px; }
    .ssc-emoji { font-size: 22px; }
    .ssc-name { font-size: 12px; }
    .ss-neon span { font-size: 14px; letter-spacing: 0.18em; }
    .ss-neon em { font-size: 9px; }
}


/* ============================================================
   ============  ROADMAP — Pinned Horizontal Scroll
   ============================================================ */
.journey {
    position: relative;
    background: #E8E4DA; /* warm paper-beige like the reference */
    padding: 120px 0 0;
    /* NOTE: do NOT set overflow:hidden here — it breaks position:sticky on
       the inner .journey-pin. Clipping is applied to .journey-pin itself. */
    isolation: isolate;
    color: #1E1432;
}

/* Intro block — scrolls normally before the pin kicks in */
.journey-intro {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto 80px;
    text-align: center;
    padding: 0 24px;
}
.journey-intro .section-tag {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5E35B1;
    background: rgba(124, 93, 199, 0.14);
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.journey-intro h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(40px, 5.4vw, 64px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0 0 20px;
    color: #1E1432;
    text-transform: uppercase;
}
.journey-intro h2 .text-gradient {
    background: linear-gradient(135deg, #7C5DC7, #5E35B1 55%, #4527A0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.journey-intro p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(30, 20, 50, 0.7);
    margin: 0;
}

/* ---------- Pin wrapper: outer tall container, inner sticky 100vh ---------- */
.journey-pin-wrap {
    position: relative;
    height: 420vh;   /* total vertical scroll distance → horizontal travel */
}
.journey-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 85% 18%, rgba(124, 93, 199, 0.18), transparent 55%),
        radial-gradient(ellipse at 12% 82%, rgba(255, 193, 7, 0.10), transparent 55%),
        #E8E4DA;
}

/* ---------- Parallax backdrop ---------- */
.jt-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.jt-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}
.jt-blob-1 {
    top: -10%;
    left: -5%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(124, 93, 199, 0.55), transparent 70%);
}
.jt-blob-2 {
    bottom: -15%;
    right: 5%;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(255, 143, 0, 0.35), transparent 70%);
}
.jt-blob-3 {
    top: 30%;
    right: -10%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(94, 53, 177, 0.28), transparent 70%);
}
.jt-grid {
    position: absolute;
    inset: 0;
    width: 120%;
    height: 100%;
    opacity: 0.65;
    will-change: transform;
}

/* ---------- Horizontal track ---------- */
.jt-track {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 12vw;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform 0.1s linear; /* JS drives transform; keep ultra-short easing for snap-less feel */
}

/* Opener arrow at start of track */
.jt-opener {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    color: #5E35B1;
    padding-right: 20px;
}
.jt-opener-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(30, 20, 50, 0.55);
}
.jt-opener-arrow {
    color: #5E35B1;
    animation: jtOpenerPulse 1.8s ease-in-out infinite;
}
@keyframes jtOpenerPulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50%      { transform: translateX(8px); opacity: 1; }
}

/* ---------- Chapter divider ---------- */
.jt-chapter {
    flex: 0 0 auto;
    width: 360px;
    padding: 20px 0 20px 40px;
    position: relative;
    border-left: 2px dashed rgba(30, 20, 50, 0.2);
}
.jt-ch-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(30, 20, 50, 0.12);
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.jt-ch-eyebrow {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.jt-ch-title h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0 0 14px;
    text-transform: uppercase;
    color: #1E1432;
}
.jt-ch-title p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(30, 20, 50, 0.7);
    margin: 0;
    max-width: 300px;
}
/* Per-chapter eyebrow accent */
.jt-chapter-done .jt-ch-eyebrow { background: #E8F5E9; color: #2E7D32; }
.jt-chapter-dev  .jt-ch-eyebrow { background: #FFF3E0; color: #E65100; }
.jt-chapter-soon .jt-ch-eyebrow { background: #EDE7F6; color: #4527A0; }

/* ---------- The flat tilted purple tiles ---------- */
.jt-card {
    flex: 0 0 auto;
    width: 320px;
    height: 380px;
    position: relative;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Alternating tilts give the playful stacked-paper feel from the reference */
.jt-card:nth-of-type(odd)  { transform: rotate(-2deg) translateY(6px); }
.jt-card:nth-of-type(even) { transform: rotate(2deg)  translateY(-4px); }
.jt-card:nth-of-type(3n)   { transform: rotate(-3deg) translateY(10px); }
.jt-card:nth-of-type(4n)   { transform: rotate(1.5deg) translateY(-8px); }

.jt-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 28px 28px 24px;
    border-radius: 18px;
    background: linear-gradient(160deg, #7C5DC7 0%, #6B4FB8 55%, #5E40AB 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 2px 0 #3A2570,              /* thin edge */
        0 14px 0 #2A1A52,             /* lifted-paper dark base */
        0 28px 40px rgba(42, 26, 82, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Slight paper grain */
.jt-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.08), transparent 60%),
        radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.15), transparent 55%);
    pointer-events: none;
}
.jt-tag {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    align-self: flex-start;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.jt-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 auto;
    color: #fff;
    max-width: 22ch;
}
.jt-card p {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 22px 0 16px;
    max-width: 28ch;
}
.jt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.jt-emoji {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.jt-status {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

/* Status-differentiated card colour shifts (subtle) */
.jt-card-done  .jt-card-inner { background: linear-gradient(160deg, #7C5DC7 0%, #6B4FB8 55%, #5E40AB 100%); }
.jt-card-dev   .jt-card-inner { background: linear-gradient(160deg, #8B5FD6 0%, #7449C7 55%, #5E35B1 100%); }
.jt-card-soon  .jt-card-inner {
    background: linear-gradient(160deg, #5B3FAA 0%, #4A2F95 55%, #3D2680 100%);
    border: 1px dashed rgba(255,255,255,0.2);
}
.jt-card-ai .jt-tag-ai {
    background: linear-gradient(135deg, rgba(255, 213, 79, 0.3), rgba(255, 171, 64, 0.3));
    border-color: rgba(255, 213, 79, 0.45);
    color: #FFE082;
}
.jt-card-premium .jt-card-inner {
    background: linear-gradient(160deg, #B8860B 0%, #8D6E00 55%, #6B5200 100%);
    box-shadow:
        0 2px 0 #4A3800,
        0 14px 0 #2E2300,
        0 28px 40px rgba(72, 54, 0, 0.5);
}
.jt-card-premium .jt-tag-premium {
    background: linear-gradient(135deg, #FFE082, #FFB300);
    color: #3E2723;
    border-color: rgba(255, 193, 7, 0.6);
}

/* Closing card at track end */
.jt-ender {
    flex: 0 0 auto;
    width: 420px;
    padding: 40px;
    border-radius: 22px;
    background: linear-gradient(145deg, #1E1432 0%, #1B5E20 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    box-shadow: 0 28px 50px rgba(30, 20, 50, 0.35);
}
.jt-ender-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 16px;
}
.jt-ender h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.jt-ender p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* ---------- Progress bar (pinned at bottom while section is locked) ---------- */
.jt-progress {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    width: min(540px, 82vw);
    z-index: 5;
}
.jt-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-family: 'Space Grotesk', sans-serif;
}
.jt-progress-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1E1432;
    transition: color 0.4s ease;
}
.jt-progress-count {
    font-size: 12px;
    font-weight: 700;
    color: rgba(30, 20, 50, 0.5);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}
.jt-progress-track {
    height: 4px;
    background: rgba(30, 20, 50, 0.12);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.jt-progress-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FF9933 0%, #FF9933 18%, #F3EEDC 50%, #138808 82%, #138808 100%);
    border-radius: 100px;
    transition: width 0.12s linear;
    box-shadow: 0 0 12px rgba(124, 93, 199, 0.3);
}
.jt-progress-marks {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(30, 20, 50, 0.4);
}
.jt-progress-mark {
    flex: 1;
    text-align: center;
    transition: color 0.35s ease, transform 0.35s ease;
}
.jt-progress-mark[data-jtm="0"] { text-align: left; }
.jt-progress-mark[data-jtm="2"] { text-align: right; }
.jt-progress-mark.jt-pm-active {
    color: #1E1432;
    transform: translateY(-1px);
}

/* Scroll hint — disappears once user starts scrolling */
.jt-hint {
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #1E1432;
    opacity: 0;
    transform: translateY(-4px);
    animation: jtHintIn 0.6s 0.5s ease forwards, jtHintSway 2s 1.2s ease-in-out infinite;
}
@keyframes jtHintIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes jtHintSway {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
.journey-pin.jt-scrolled .jt-hint {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ---------- Mobile: fall back to a simple horizontal swipe strip ---------- */
@media (max-width: 900px) {
    .journey { padding: 80px 0 0; }
    .journey-intro { margin-bottom: 48px; }
    .journey-intro h2 { font-size: 38px; }
    .journey-pin-wrap {
        height: auto;       /* no pin — native horizontal swipe */
    }
    .journey-pin {
        position: relative;
        top: auto;
        height: auto;
        padding: 40px 0 120px;
        display: block;
        overflow: visible;
    }
    .jt-track {
        transform: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 20px 20px 40px;
        gap: 20px;
        -webkit-overflow-scrolling: touch;
    }
    .jt-track > * { scroll-snap-align: start; }
    .jt-chapter { width: 260px; padding-left: 24px; }
    .jt-ch-num { font-size: 72px; }
    .jt-ch-title h3 { font-size: 26px; }
    .jt-card { width: 260px; height: 320px; }
    .jt-card h4 { font-size: 20px; }
    .jt-ender { width: 300px; min-height: auto; padding: 28px; }
    .jt-ender h3 { font-size: 24px; }
    .jt-hint { display: none; }
    .jt-progress {
        position: relative;
        bottom: auto;
        left: 20px;
        right: 20px;
        transform: none;
        margin: 24px 20px 0;
        width: auto;
    }
}

/* ============ FAQ Section ============ */
.faq-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #F5F9F4 100%);
}
.faq-list {
    max-width: 820px;
    margin: 48px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-item {
    background: #ffffff;
    border: 1px solid rgba(27, 94, 32, 0.12);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.faq-item[open] {
    border-color: rgba(27, 94, 32, 0.35);
    box-shadow: 0 6px 24px rgba(27, 94, 32, 0.08);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}
.faq-chevron {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E8F5E9;
    color: #1B5E20;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.2s ease;
}
.faq-item[open] .faq-chevron {
    transform: rotate(45deg);
    background: #1B5E20;
    color: #ffffff;
}
.faq-item p {
    margin: 0;
    padding: 0 26px 24px;
    color: #4a4a4a;
    line-height: 1.65;
    font-size: 15px;
}
@media (max-width: 768px) {
    .faq-section { padding: 72px 0; }
    .faq-item summary { padding: 18px 20px; }
    .faq-item summary h3 { font-size: 15px; }
    .faq-item p { padding: 0 20px 20px; font-size: 14px; }
}