/* ================================================================
           FOWNZ LANDING — DESIGN SYSTEM
           Palette: warm near-black + amber/orange
           Typography: Outfit
           ================================================================ */

        :root {
            --font: 'Outfit', system-ui, -apple-system, sans-serif;

            /* Spacing scale (aligned with app tokens) */
            --sp-0_5: 2px;
            --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
            --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
            --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
            --sp-32: 128px;

            /* Radii (aligned with app tokens) */
            --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-xxl: 22px; --r-full: 9999px;

            /* Motion (aligned with app tokens) */
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-snappy: cubic-bezier(0.12, 1, 0.2, 1);
            --t-fast: 180ms var(--ease-out);
            --t-med: 280ms var(--ease-out);
            --t-slow: 450ms var(--ease-out);
        }

        /* ---- DARK THEME (signature/default) ---- */
        [data-theme="dark"] {
            --bg: #000000;
            --bg-gradient-start: #000000;
            --bg-gradient-mid: #000000;
            --bg-gradient-end: #000000;
            --bg-gradient-mid-stop: 30%;
            --bg-raised: #1c1917;
            --bg-subtle: #292524;
            --bg-muted: #44403c;
            --text: #f5f5f4;
            --text-secondary: #a8a29e;
            --text-muted: #78716c;
            --primary: #dc2626;
            --primary-light: #f97316;
            --on-primary: #fafaf9;
            --accent-text: #f97316;
            --primary-dim: rgba(124, 45, 18, 0.55);
            --secondary: rgba(245, 158, 11, 0.88);
            --border: #44403c;
            --border-light: #57534e;
            --nav-bg: rgba(12, 10, 9, 0.9);
            --nav-border: rgba(68, 64, 60, 0.55);
            --card-shadow: 0 4px 18px rgba(0,0,0,0.28);
            --glow: rgba(234, 88, 12, 0.06);
            --section-tint: rgba(28, 25, 23, 0.52);
        }

        /* ---- LIGHT THEME ---- */
        [data-theme="light"] {
            --bg: #e6e6e6;
            --bg-gradient-start: #e6e6e6;
            --bg-gradient-mid: #e6e6e6;
            --bg-gradient-end: #e6e6e6;
            --bg-gradient-mid-stop: 48.9%;
            --bg-raised: #f5f5f4;
            --bg-subtle: #e7e5e4;
            --bg-muted: #d6d3d1;
            --text: #0c0a09;
            --text-secondary: #57534e;
            --text-muted: #78716c;
            --primary: #dc2626;
            --primary-light: #f97316;
            --on-primary: #0c0a09;
            --accent-text: #9a3412;
            --primary-dim: #ffedd5;
            --secondary: #FB2C36;
            --border: #d6d3d1;
            --border-light: #e7e5e4;
            --nav-bg: rgba(250, 250, 249, 0.92);
            --nav-border: rgba(214, 211, 209, 0.9);
            --card-shadow: 0 3px 16px rgba(12, 10, 9, 0.08);
            --glow: rgba(234, 88, 12, 0.04);
            --section-tint: rgba(245, 245, 244, 0.64);
        }

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

        /* ================================================================
           RESET & BASE
           ================================================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: var(--font);
            background: linear-gradient(
                135deg,
                var(--bg-gradient-start) 0%,
                var(--bg-gradient-mid) var(--bg-gradient-mid-stop),
                var(--bg-gradient-end) 100%
            );
            color: var(--text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background var(--t-slow), color var(--t-slow);
            overflow-x: hidden;
            position: relative;
        }
        img { max-width: 100%; height: auto; display: block; }
        a { color: inherit; text-decoration: none; }
        a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
        button { font-family: var(--font); }
        ::selection { background: var(--primary); color: var(--on-primary); }
        [hidden] { display: none !important; }

        .skip-link {
            position: fixed; left: var(--sp-4); top: var(--sp-4); z-index: 200;
            background: var(--bg-raised); color: var(--text);
            border: 1px solid var(--border-light); border-radius: var(--r-full);
            padding: var(--sp-3) var(--sp-5);
            transform: translateY(-150%);
            transition: transform var(--t-fast);
        }
        .skip-link:focus-visible { transform: translateY(0); }

        /* ================================================================
           GLOBAL BACKGROUND
           ================================================================ */
        .site-bg {
            position: fixed; inset: 0; z-index: 0; pointer-events: none;
            overflow: hidden;
        }
        .site-bg__canvas,
        .site-bg__veil {
            position: absolute;
        }
        .site-bg__canvas,
        .site-bg__veil {
            inset: 0;
        }
        .site-bg__canvas {
            width: 100%; height: 100%;
            opacity: 1;
        }
        .site-bg__veil {
            background:
                radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.04), transparent 26%),
                radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.025), transparent 24%),
                linear-gradient(180deg, rgba(17, 15, 13, 0.03) 0%, transparent 28%, transparent 72%, rgba(17, 15, 13, 0.02) 100%);
        }
        [data-theme="light"] .site-bg__veil {
            background:
                radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.22), transparent 24%),
                radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.14), transparent 22%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 30%, transparent 74%, rgba(28, 25, 23, 0.03) 100%);
        }

        main { position: relative; z-index: 1; }

        /* ================================================================
           LAYOUT
           ================================================================ */
        .wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-6); }
        @media (min-width: 768px) { .wrap { padding: 0 var(--sp-10); } }

        /* ================================================================
           NAVIGATION
           ================================================================ */
        .nav {
            position: fixed; inset: 0 0 auto 0; z-index: 100;
            background: var(--nav-bg);
            backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
            border-bottom: 1px solid var(--nav-border);
            transition: background var(--t-med), box-shadow var(--t-med);
        }
        .nav.scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.12); }
        .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
        .nav__logo {
            display: flex; align-items: center; gap: var(--sp-2);
            font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; color: var(--text);
        }
        .nav__logo img { width: 30px; height: 30px; border-radius: var(--r-sm); }
        .nav__links { display: none; gap: var(--sp-1); list-style: none; }
        @media (min-width: 900px) { .nav__links { display: flex; } }
        .nav__links a {
            display: block; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
            font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
            transition: color var(--t-fast), background var(--t-fast);
        }
        .nav__links a:hover { color: var(--text); background: var(--bg-subtle); }
        .nav__right { display: flex; align-items: center; gap: var(--sp-2); }

        .theme-btn {
            width: 48px; height: 48px; border: 1px solid var(--border);
            border-radius: var(--r-full); background: var(--bg-raised);
            color: var(--text); cursor: pointer;
            display: grid; place-items: center;
            transition: all var(--t-fast);
        }
        .theme-btn:hover { border-color: var(--primary); color: var(--accent-text); }
        .theme-btn svg { width: 16px; height: 16px; }
        .theme-btn .sun { display: none; }
        .theme-btn .moon { display: block; }
        [data-theme="dark"] .theme-btn .sun { display: block; }
        [data-theme="dark"] .theme-btn .moon { display: none; }

        .hamburger {
            display: grid; place-items: center;
            width: 48px; height: 48px; border: none; background: none;
            color: var(--text); cursor: pointer;
        }
        .hamburger svg { width: 22px; height: 22px; }
        @media (min-width: 900px) { .hamburger { display: none; } }

        .mobile-nav {
            display: none; position: fixed; inset: 64px 0 0 0;
            background: var(--bg); z-index: 99;
            padding: var(--sp-8) var(--sp-6);
            flex-direction: column; gap: var(--sp-2);
            overflow-y: auto;
            box-shadow: 0 16px 40px rgba(0,0,0,0.14);
        }
        .mobile-nav.open { display: flex; }
        .mobile-nav a {
            display: block; padding: var(--sp-4) var(--sp-5);
            font-size: 1.0625rem; font-weight: 600; color: var(--text);
            border-radius: var(--r-md); transition: background var(--t-fast);
            min-height: 48px;
        }
        .mobile-nav a:hover { background: var(--bg-subtle); }

        /* ================================================================
           BUTTONS
           ================================================================ */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
            padding: var(--sp-3) var(--sp-6); font-family: var(--font);
            font-size: 0.9375rem; font-weight: 700; line-height: 1.4;
            border: none; border-radius: var(--r-lg); cursor: pointer;
            transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
            text-decoration: none; white-space: nowrap;
            min-height: 48px;
        }
        .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
        .btn--primary {
            background: var(--primary); color: var(--on-primary);
            box-shadow: 0 1px 0 rgba(0,0,0,0.08);
        }
        .btn--primary:hover {
            background: var(--primary-light);
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(234, 88, 12, 0.22);
        }
        .btn--ghost {
            background: transparent; color: var(--text);
            border: 1px solid var(--border);
        }
        .btn--ghost:hover { border-color: var(--primary); background: var(--bg-subtle); }
        .btn--lg { padding: var(--sp-4) var(--sp-8); font-size: 1rem; }

        /* ================================================================
           HERO
           ================================================================ */
        .hero {
            min-height: 100vh; display: flex; align-items: center;
            padding: clamp(120px, 15vh, 160px) 0 var(--sp-24);
            position: relative; overflow: hidden;
        }
        .hero__grid {
            display: grid; grid-template-columns: 1fr;
            gap: var(--sp-16); align-items: center;
        }
        @media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.1fr 0.9fr; } }

        .hero__eyebrow {
            display: inline-flex; align-items: center; gap: var(--sp-3);
            font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--accent-text);
            margin-bottom: var(--sp-6);
        }
        .hero__pulse {
            width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
            position: relative;
        }
        .hero__pulse::after {
            content: ''; position: absolute; inset: -4px;
            border-radius: 50%; border: 1.5px solid var(--primary);
            animation: ping 2s ease-out infinite;
        }
        @keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } }

        .hero__title {
            font-size: clamp(2.6rem, 6.4vw, 3.6rem);
            font-weight: 900; line-height: 1.0;
            letter-spacing: -0.04em;
            margin-bottom: var(--sp-6);
        }
        .hero__title em {
            font-style: normal; color: var(--primary);
        }
        .hero__sub {
            font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
            color: var(--text-secondary); line-height: 1.7;
            max-width: 540px; margin-bottom: var(--sp-10);
        }
        .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-12); }

        .hero__signals {
            list-style: none;
            display: flex; flex-wrap: wrap; gap: var(--sp-3);
            padding-top: var(--sp-8);
            border-top: 1px solid var(--border);
        }
        .hero__signals li {
            display: inline-flex; align-items: center; gap: var(--sp-2);
            padding: var(--sp-2) var(--sp-4);
            border-radius: var(--r-full);
            background: var(--bg-raised);
            border: 1px solid var(--border);
            font-size: 0.875rem; font-weight: 600;
        }
        .hero__signals li::before {
            content: '';
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--accent-text);
        }

        /* Phone */
        .hero__phone { display: flex; justify-content: center; align-items: center; }
        @media (max-width: 1023px) {
            .hero__phone { margin-top: var(--sp-4); }
        }
        .phone {
            position: relative; width: 280px; background: #0A0908;
            border-radius: 28px; padding: 8px;
            box-shadow:
                0 40px 80px -20px rgba(0,0,0,0.5),
                0 0 0 1px rgba(255,255,255,0.06);
            transform: perspective(900px) rotateY(-6deg) rotateX(3deg);
            transition: transform 0.5s var(--ease-out);
        }
        @media (max-width: 1023px) {
            .phone {
                width: 240px;
                transform: perspective(900px) rotateY(0deg) rotateX(0deg);
            }
        }
        @media (min-width: 1280px) { .phone { width: 320px; } }
        .phone:hover { transform: perspective(900px) rotateY(0deg) rotateX(0deg); }
        .phone__screen {
            position: relative; width: 100%; aspect-ratio: 9/19.5;
            border-radius: 20px; overflow: hidden; background: #0A0908;
        }
        .phone__iframe {
            width: 100%; height: 100%; border: none; border-radius: 20px;
            opacity: 0; pointer-events: none; transition: opacity var(--t-med);
        }
        .phone__iframe.loaded { opacity: 1; pointer-events: auto; }
        .phone__camera {
            position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
            width: 10px; height: 10px; background: #111; border-radius: 50%;
            z-index: 4; box-shadow: inset 0 0 2px rgba(255,255,255,0.08);
        }
        .phone__poster {
            position: absolute; inset: 0; z-index: 1;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: var(--sp-4); padding: var(--sp-8);
            background:
                radial-gradient(circle at top, rgba(217,119,6,0.18), transparent 50%),
                linear-gradient(180deg, #151210 0%, #0A0908 100%);
            color: #f5f5f4;
            text-align: center;
            transition: opacity var(--t-med);
        }
        .phone__poster.hidden { opacity: 0; pointer-events: none; }
        .phone__poster img {
            width: 72px; height: 72px; border-radius: 22px;
            box-shadow: 0 16px 32px rgba(0,0,0,0.3);
        }
        .phone__poster strong { font-size: 1rem; letter-spacing: -0.02em; }
        .phone__poster span { font-size: 0.8125rem; color: rgba(245, 245, 244, 0.8); }
        .phone__overlay {
            position: absolute; inset: auto var(--sp-5) var(--sp-5) var(--sp-5); z-index: 3;
            background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
            display: grid; place-items: center;
            border-radius: 999px; cursor: pointer;
            transition: opacity var(--t-med), transform var(--t-fast);
            border: 1px solid rgba(255,255,255,0.1);
            min-height: 48px; padding: 0 var(--sp-4);
            width: calc(100% - var(--sp-10));
            color: #f5f5f4;
        }
        .phone__overlay:hover { transform: translateY(-1px); }
        .phone__overlay.hidden { opacity: 0; pointer-events: none; }
        .phone__overlay-inner {
            display: inline-flex; align-items: center; gap: var(--sp-2);
        }
        .phone__overlay-inner span { font-size: 0.8125rem; font-weight: 600; opacity: 0.9; }

        /* Ambient glow behind phone */
        .hero__glow {
            position: absolute; top: 50%; right: -5%; transform: translateY(-50%);
            width: 500px; height: 500px; border-radius: 50%;
            background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
            pointer-events: none; z-index: 0;
        }

        /* ================================================================
           SECTION UTILITIES
           ================================================================ */
        .section { padding: var(--sp-24) 0; }
        .section--tight { padding: var(--sp-16) 0; }
        .section--tinted {
            background: linear-gradient(180deg, transparent 0%, var(--section-tint) 12%, var(--section-tint) 88%, transparent 100%);
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
        }

        .section__label {
            font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--accent-text);
            margin-bottom: var(--sp-4);
        }
        .section__title {
            font-size: clamp(1.9rem, 4.5vw, 2.9rem);
            font-weight: 800; letter-spacing: -0.03em;
            line-height: 1.1; margin-bottom: var(--sp-5);
        }
        .section__desc {
            font-size: 1.0625rem; color: var(--text-secondary);
            line-height: 1.7; max-width: 560px;
        }
        .section__header { margin-bottom: var(--sp-16); }
        .section__header--center { text-align: center; }
        .section__header--center .section__desc { margin-inline: auto; }

        .showcase-block { margin-bottom: var(--sp-20); }
        .showcase-block--compact { margin-bottom: var(--sp-12); }
        .showcase-block--top { margin-top: var(--sp-20); }
        .showcase-title {
            font-size: 1.5rem; font-weight: 800; margin-bottom: var(--sp-3); letter-spacing: -0.02em;
        }
        .showcase-copy {
            font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-6);
        }
        .showcase-heading-sm { font-size: 1rem; margin-bottom: var(--sp-5); }
        .showcase-center { text-align: center; margin-top: var(--sp-8); }
        .section-note {
            margin-top: var(--sp-4); color: var(--text-muted); font-size: 0.8125rem;
        }
        .section-note--center {
            text-align: center; margin-top: var(--sp-6); font-size: 0.875rem;
        }
        .section-note--wide {
            max-width: 600px; margin: var(--sp-8) auto 0; text-align: center; line-height: 1.7;
        }

        .project-story {
            padding-top: var(--sp-12);
        }

        .project-sections {
            display: block;
        }

        .project-sections__loading,
        .project-sections__fallback,
        .project-sections__error {
            margin: 0;
            padding: var(--sp-8);
            border: 1px solid var(--border);
            border-radius: var(--r-xl);
            background: var(--bg-raised);
            color: var(--text-secondary);
            text-align: center;
            font-size: 0.9375rem;
            line-height: 1.7;
        }

        .project-sections__error {
            border-color: var(--primary);
            color: var(--text);
        }

        .story-section {
            position: relative;
        }

        .story-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--sp-8);
            align-items: start;
        }

        @media (min-width: 1024px) {
            .story-grid {
                grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
                gap: var(--sp-12);
            }
        }

        .story-grid__head {
            margin-bottom: var(--sp-2);
        }

        .story-card {
            background: var(--bg-raised);
            border: 1px solid var(--border);
            border-radius: var(--r-xl);
            padding: clamp(var(--sp-6), 1.3vw + var(--sp-5), var(--sp-10));
            box-shadow: var(--card-shadow);
        }

        .story-card p {
            margin: 0;
            font-size: 0.96875rem;
            line-height: 1.75;
            color: var(--text-secondary);
        }

        .story-card p + p {
            margin-top: var(--sp-4);
        }

        .story-card strong {
            color: var(--text);
            font-weight: 700;
        }

        .story-card__accent {
            border-left: 2px solid var(--primary);
            padding-left: var(--sp-4);
            color: var(--text);
        }

        .story-list {
            list-style: none;
            margin: var(--sp-5) 0 0;
            padding: 0;
            display: grid;
            gap: var(--sp-3);
        }

        .story-list li {
            position: relative;
            padding-left: var(--sp-5);
            color: var(--text-secondary);
            font-size: 0.90625rem;
            line-height: 1.65;
        }

        .story-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.62em;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary);
        }

        .story-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--sp-2);
            margin-top: var(--sp-5);
        }

        .story-chip {
            display: inline-flex;
            align-items: center;
            gap: var(--sp-2);
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--text);
            border-radius: var(--r-full);
            padding: var(--sp-2) var(--sp-4);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        /* ================================================================
           FEATURES — ASYMMETRIC GRID
           ================================================================ */
        .features-grid {
            display: grid; grid-template-columns: 1fr;
            gap: var(--sp-4);
        }
        @media (min-width: 768px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 1024px) {
            .features-grid {
                grid-template-columns: repeat(12, 1fr);
            }
            .feat--wide { grid-column: span 7; }
            .feat--narrow { grid-column: span 5; }
            .feat--half { grid-column: span 6; }
            .feat--third { grid-column: span 4; }
        }

        .feat {
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-xl); padding: var(--sp-8);
            transition: border-color var(--t-med), transform var(--t-med);
            position: relative; overflow: hidden;
        }
        .feat:hover { border-color: var(--border-light); transform: translateY(-2px); }
        .feat__icon {
            width: 44px; height: 44px; display: grid; place-items: center;
            border-radius: var(--r-md); margin-bottom: var(--sp-5);
            background: var(--bg-muted); color: var(--primary);
            font-size: 1.25rem;
        }
        .feat__title {
            font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-2);
            letter-spacing: -0.01em;
        }
        .feat__desc {
            font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65;
        }

        /* Amber top-line on hover */
        .feat::before {
            content: ''; position: absolute; top: 0; left: var(--sp-8); right: var(--sp-8);
            height: 2px; background: var(--primary); border-radius: 0 0 2px 2px;
            transform: scaleX(0); transition: transform var(--t-med);
        }
        .feat:hover::before { transform: scaleX(1); }

        /* ================================================================
           SHOWCASE (Order & Invite System)
           ================================================================ */
        .showcase__grid {
            display: grid; grid-template-columns: 1fr;
            gap: var(--sp-16); align-items: start;
        }
        @media (min-width: 1024px) { .showcase__grid { grid-template-columns: 1fr 1fr; } }
        .showcase__grid--reverse .showcase__visual { order: -1; }
        @media (max-width: 1023px) { .showcase__grid--reverse .showcase__visual { order: 0; } }

        .showcase__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-8); }
        .showcase__list li {
            display: flex; gap: var(--sp-4); align-items: flex-start;
        }
        .showcase__list-icon {
            width: 40px; height: 40px; min-width: 40px;
            display: grid; place-items: center;
            background: var(--bg-muted); border-radius: var(--r-md);
            font-size: 1.125rem;
        }
        .showcase__list-text { font-size: 0.9375rem; line-height: 1.6; }
        .showcase__list-text strong { display: block; font-weight: 600; margin-bottom: 1px; }
        .showcase__list-text span { color: var(--text-secondary); font-size: 0.875rem; }

        /* Flow steps */
        .flow {
            display: flex; flex-direction: column; gap: var(--sp-3);
        }
        .flow__step {
            display: flex; align-items: center; gap: var(--sp-4);
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
            position: relative;
            transition: all var(--t-med);
        }
        .flow__step:hover { border-color: var(--primary); transform: translateX(4px); }
        .flow__num {
            width: 28px; height: 28px; min-width: 28px;
            display: grid; place-items: center;
            background: var(--primary); color: var(--on-primary);
            border-radius: 50%; font-size: 0.75rem; font-weight: 700;
        }
        .flow__text { font-size: 0.875rem; font-weight: 500; }

        /* Connector lines */
        .flow__step::after {
            content: ''; position: absolute; bottom: -13px; left: 22px;
            width: 1.5px; height: 13px; background: var(--border);
        }
        .flow__step:last-child::after { display: none; }

        /* ================================================================
           STATUS PIPELINE
           ================================================================ */
        .pipeline {
            display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
            gap: var(--sp-2); margin-top: var(--sp-12);
        }
        .pipeline__step {
            padding: var(--sp-2) var(--sp-5); border-radius: var(--r-full);
            font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
            background: var(--bg-muted); color: var(--text-secondary);
        }
        .pipeline__step--active { background: var(--primary); color: var(--on-primary); }
        .pipeline__arrow { color: var(--text-muted); font-size: 0.75rem; }

        /* ================================================================
           BUSINESS TYPES
           ================================================================ */
        .biz-grid {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
        }
        @media (min-width: 640px) { .biz-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1024px) { .biz-grid { grid-template-columns: repeat(5, 1fr); } }

        .biz-card {
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-4);
            text-align: center; transition: all var(--t-med); cursor: default;
        }
        .biz-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--card-shadow); }
        .biz-card__emoji { font-size: 2rem; display: block; margin-bottom: var(--sp-3); }
        .biz-card__name { font-size: 0.9375rem; font-weight: 700; margin-bottom: 2px; }
        .biz-card__desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }

        /* ================================================================
           CATEGORIES
           ================================================================ */
        .cats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
        .cat {
            display: inline-flex; align-items: center; gap: var(--sp-2);
            padding: var(--sp-2) var(--sp-5);
            background: var(--bg-raised); border: 1.5px solid var(--border);
            border-radius: var(--r-full); font-size: 0.875rem; font-weight: 500;
            color: var(--text); transition: all var(--t-med); cursor: default;
        }
        .cat:hover {
            border-color: var(--primary); transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(217,119,6,0.08);
        }
        .cat svg { width: 16px; height: 16px; color: var(--primary); }

        /* ================================================================
           HOW IT WORKS
           ================================================================ */
        .steps {
            display: grid; grid-template-columns: 1fr; gap: var(--sp-8);
            counter-reset: step;
        }
        @media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

        .step { counter-increment: step; text-align: left; }
        .step__num {
            width: 52px; height: 52px; display: grid; place-items: center;
            background: var(--primary); color: var(--on-primary);
            border-radius: 50%; font-size: 1.25rem; font-weight: 800;
            margin-bottom: var(--sp-5);
        }
        .step__num::before { content: counter(step); }
        .step__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--sp-2); }
        .step__desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; }

        /* ================================================================
           POST TYPES
           ================================================================ */
        .posts-grid {
            display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
        }
        @media (min-width: 768px) { .posts-grid { grid-template-columns: 1fr 1fr; } }

        .post-card {
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-xl); padding: var(--sp-8);
            transition: all var(--t-med);
        }
        .post-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
        .post-card__icon {
            width: 56px; height: 56px; display: grid; place-items: center;
            background: var(--primary); color: var(--on-primary);
            border-radius: var(--r-lg); margin-bottom: var(--sp-6);
        }
        .post-card__icon svg { width: 28px; height: 28px; }
        .post-card__title { font-size: 1.375rem; font-weight: 700; margin-bottom: var(--sp-3); letter-spacing: -0.01em; }
        .post-card__desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: var(--sp-6); }
        .post-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
        .post-card__list li {
            display: flex; align-items: center; gap: var(--sp-3);
            font-size: 0.875rem; color: var(--text);
        }
        .post-card__list li::before {
            content: ''; width: 6px; height: 6px; border-radius: 50%;
            background: var(--primary); flex-shrink: 0;
        }

        /* ================================================================
           THEME PREVIEW
           ================================================================ */
        .theme-grid {
            display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
        }
        @media (min-width: 768px) { .theme-grid { grid-template-columns: 1fr 1fr; } }

        .theme-card {
            border-radius: var(--r-xl); padding: var(--sp-8);
            border: 1px solid; overflow: hidden;
        }
        .theme-card--light {
            background: var(--bg); color: var(--text); border-color: var(--border);
        }
        .theme-card--dark {
            background: #1c1917; color: #f5f5f4; border-color: #44403c;
        }
        .theme-card__head { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
        .theme-card__text { font-size: 0.875rem; line-height: 1.6; opacity: 0.7; margin-bottom: var(--sp-5); }
        .theme-card__swatches { display: flex; gap: var(--sp-2); }
        .swatch { width: 28px; height: 28px; border-radius: var(--r-sm); }

        /* ================================================================
           PRIVACY
           ================================================================ */
        .privacy-grid {
            display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
        }
        @media (min-width: 768px) { .privacy-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .privacy-grid { grid-template-columns: repeat(4, 1fr); } }

        .privacy-card {
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-xl); padding: var(--sp-6);
            transition: all var(--t-med);
        }
        .privacy-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
        .privacy-card__icon {
            width: 44px; height: 44px; display: grid; place-items: center;
            background: var(--bg-muted); border-radius: 50%;
            color: var(--primary); margin-bottom: var(--sp-4);
            font-size: 1.25rem;
        }
        .privacy-card__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-2); }
        .privacy-card__desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; }

        /* ================================================================
           TESTIMONIALS
           ================================================================ */
        .reviews-grid {
            display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
        }
        @media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }

        .review {
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-xl); padding: var(--sp-8);
            transition: all var(--t-med);
        }
        .review:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
        .review__stars { display: flex; gap: 3px; margin-bottom: var(--sp-4); color: var(--primary); }
        .review__stars svg { width: 16px; height: 16px; fill: currentColor; }
        .review__text { font-size: 0.9375rem; line-height: 1.65; margin-bottom: var(--sp-6); color: var(--text); }
        .review__author { display: flex; align-items: center; gap: var(--sp-3); }
        .review__avatar {
            width: 40px; height: 40px; border-radius: 50%;
        }
        .review__avatar--primary { background: linear-gradient(135deg, var(--primary), var(--primary-dim)); }
        .review__avatar--stone { background: linear-gradient(135deg, #78716C, #44403C); }
        .review__avatar--gold { background: linear-gradient(135deg, #F59E0B, #FB2C36); }
        .review__name { font-weight: 600; font-size: 0.875rem; }
        .review__role { font-size: 0.75rem; color: var(--text-muted); }

        /* ================================================================
           CTA
           ================================================================ */
        .cta {
            padding: var(--sp-24) 0; text-align: center;
            position: relative;
        }
        .cta__bg {
            display: none;
        }
        .cta__content { position: relative; z-index: 1; }
        .cta__title {
            font-size: clamp(2.25rem, 5vw, 3.5rem);
            font-weight: 900; letter-spacing: -0.03em;
            line-height: 1.05; margin-bottom: var(--sp-5);
        }
        .cta__desc {
            font-size: 1.0625rem; color: var(--text-secondary);
            max-width: 480px; margin: 0 auto var(--sp-10); line-height: 1.7;
        }
        .cta__badges {
            display: flex; justify-content: center; flex-wrap: wrap;
            gap: var(--sp-3); margin-top: var(--sp-8);
        }
        .badge {
            display: flex; align-items: center; gap: var(--sp-3);
            padding: var(--sp-3) var(--sp-5);
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-md); font-size: 0.875rem;
            transition: all var(--t-fast); color: var(--text);
            min-height: 48px;
        }
        .badge:hover { border-color: var(--primary); transform: translateY(-1px); }
        .badge--disabled {
            opacity: 0.72;
            cursor: default;
        }
        .badge--disabled:hover { border-color: var(--border); transform: none; }
        .badge svg { width: 22px; height: 22px; }
        .badge__text { text-align: left; }
        .badge__small { font-size: 0.625rem; color: var(--text-muted); }
        .badge__large { font-weight: 600; font-size: 0.875rem; }
        .mobile-nav__cta { color: var(--accent-text); margin-top: var(--sp-4); }

        /* ================================================================
           FOOTER
           ================================================================ */
        .footer {
            padding: var(--sp-16) 0 var(--sp-8);
            position: relative;
            z-index: 1;
        }
        .footer__grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: var(--sp-10); margin-bottom: var(--sp-12);
        }
        @media (min-width: 768px) { .footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }

        .footer__brand { grid-column: span 2; }
        @media (min-width: 768px) { .footer__brand { grid-column: span 1; } }
        .footer__logo {
            display: flex; align-items: center; gap: var(--sp-2);
            font-weight: 800; font-size: 1.25rem; color: var(--text);
            margin-bottom: var(--sp-3);
        }
        .footer__logo img { width: 26px; height: 26px; border-radius: var(--r-sm); }
        .footer__tagline { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--sp-4); line-height: 1.6; }
        .footer__social { display: flex; gap: var(--sp-2); }
        .footer__social a,
        .footer__social span {
            width: 48px; height: 48px; display: grid; place-items: center;
            border-radius: var(--r-full); border: 1px solid var(--border);
            color: var(--text-muted); transition: all var(--t-fast);
        }
        .footer__social a:hover { border-color: var(--primary); color: var(--accent-text); }
        .footer__social svg { width: 16px; height: 16px; }

        .footer__col h4 {
            font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.1em; color: var(--text-muted);
            margin-bottom: var(--sp-4);
        }
        .footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
        .footer__links a { font-size: 0.875rem; color: var(--text-secondary); transition: color var(--t-fast); }
        .footer__links a:hover { color: var(--primary); }

        .footer__bottom {
            display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
            padding-top: var(--sp-8); border-top: 1px solid var(--border);
            text-align: center;
        }
        @media (min-width: 768px) {
            .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
        }
        .footer__copy { font-size: 0.8125rem; color: var(--text-muted); }
        .footer__legal { display: flex; gap: var(--sp-6); }
        .footer__legal a { font-size: 0.8125rem; color: var(--text-muted); transition: color var(--t-fast); }
        .footer__legal a:hover { color: var(--text); }
        @media (max-width: 767px) {
            .footer__legal { flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-5); }
        }

        .footer__microcopy {
            display: grid; gap: var(--sp-4); margin-top: var(--sp-8);
            padding-top: var(--sp-8); border-top: 1px solid var(--border);
        }
        .footer__microcopy details {
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
        }
        .footer__microcopy summary {
            cursor: pointer; font-weight: 600; color: var(--text);
        }
        .footer__microcopy p {
            font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; margin-top: var(--sp-3);
        }

        .swatch--light-bg { background: var(--bg); border: 1px solid var(--border); }
        .swatch--light-muted { background: var(--bg-muted); }
        .swatch--light-text { background: var(--text); }
        .swatch--light-accent { background: var(--accent-text); }
        .swatch--light-secondary { background: var(--text-secondary); }
        .swatch--dark-bg { background: #0c0a09; }
        .swatch--dark-raised { background: #1c1917; }
        .swatch--dark-text { background: #f5f5f4; }
        .swatch--dark-accent { background: #dc2626; }
        .swatch--dark-muted { background: #a8a29e; }

        /* ================================================================
           TECH
           ================================================================ */
        .tech-row {
            display: flex; flex-wrap: wrap; justify-content: center;
            gap: var(--sp-3); margin-top: var(--sp-10);
        }
        .tech-pill {
            display: flex; align-items: center; gap: var(--sp-2);
            padding: var(--sp-2) var(--sp-4);
            background: var(--bg-raised); border: 1px solid var(--border);
            border-radius: var(--r-full); font-size: 0.8125rem; font-weight: 500;
            color: var(--text-secondary); transition: all var(--t-fast);
        }
        .tech-pill:hover { border-color: var(--primary); color: var(--text); }
        .tech-pill span { font-size: 1rem; }

        /* ================================================================
           SCROLL ANIMATIONS
           ================================================================ */
        .reveal {
            opacity: 0; transform: translateY(32px);
            transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 80ms; }
        .reveal-delay-2 { transition-delay: 160ms; }
        .reveal-delay-3 { transition-delay: 240ms; }
        .reveal-delay-4 { transition-delay: 320ms; }
        .reveal-delay-5 { transition-delay: 400ms; }

        /* ================================================================
           ACCESSIBILITY
           ================================================================ */
        .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
        }

        /* ================================================================
           DIVIDER
           ================================================================ */
        .divider {
            width: 48px; height: 3px; border-radius: 2px;
            background: var(--primary); margin-bottom: var(--sp-8);
        }
        .divider--center { margin-inline: auto; }