:root {
            --primary: #f97316;
            --primary-light: #fb923c;
            --primary-deep: #ea580c;
            --primary-dark: #9a3412;
            --hero-bg-1: #1a0d02;
            --hero-bg-2: #2e1608;
            --hero-bg-3: #7c2d12;
            --bg: #ffffff;
            --bg-alt: #f7f7fb;
            --surface: #ffffff;
            --fg: #1c1408;
            --fg-2: #3a2c1a;
            --muted: #8a7a68;
            --border: #efe8de;
            --border-2: #e2d8c9;
            --amber: #fbbf24;
            --amber-soft: #fdecc4;
            --green: #22c55e;
            --radius-card: 16px;
            --radius-btn: 10px;
            --radius-pill: 100px;
            --shadow: 0 6px 20px -6px rgba(40, 25, 8, 0.1);
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
            --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --max: 1180px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-body); background: var(--bg); color: var(--fg); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
        h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--fg); }
        .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--transition), transform 0.7s var(--transition); }
        .fade-in.visible { opacity: 1; transform: translateY(0); }

        /* ── Header ── */
        .header { position: sticky; top: 0; z-index: 1000; transition: background var(--transition), border-color var(--transition); background: rgba(26, 13, 2, 0.6); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-block-end: 1px solid rgba(255,255,255,0.08); }
        .header.scrolled { background: rgba(255, 255, 255, 0.85); border-block-end-color: var(--border); }
        .header-inner { max-width: var(--max); margin: 0 auto; padding: 0.95rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
        .header-logo img { height: 30px; display: block; filter: brightness(0) invert(1); transition: filter var(--transition); }
        .header.scrolled .header-logo img { filter: none; }
        .brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
        .brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 14px -4px rgba(249, 115, 22, 0.6); flex-shrink: 0; }
        .brand-name { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; color: #fff; line-height: 1; }
        .brand-name b { font-weight: 800; color: var(--primary-light); }
        .header.scrolled .brand-name { color: var(--fg); }
        .header.scrolled .brand-name b { color: var(--primary-deep); }
        .footer-brand .brand { margin-block-end: 1rem; }
        .footer-brand .brand-name { color: #fff; }
        .header-nav { display: flex; gap: 2rem; list-style: none; align-items: center; }
        .header-nav a { text-decoration: none; color: rgba(255,255,255,0.85); font-size: 0.92rem; font-weight: 500; transition: color var(--transition); }
        .header-nav a:hover { color: var(--primary-light); }
        .header.scrolled .header-nav a { color: var(--fg-2); }
        .header.scrolled .header-nav a:hover { color: var(--primary-deep); }
        .header-actions { display: flex; align-items: center; gap: 1rem; }
        .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.4rem; border-radius: var(--radius-btn); font-weight: 600; font-size: 0.93rem; cursor: pointer; text-decoration: none; border: none; font-family: var(--font-body); transition: all var(--transition); white-space: nowrap; }
        .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 20px -4px rgba(249, 115, 22, 0.6); }
        .btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: 0 8px 28px -6px rgba(249, 115, 22, 0.7); }
        .btn-secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--border-2); }
        .btn-secondary:hover { border-color: var(--primary); color: var(--primary-deep); }
        .btn-glass { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); }
        .btn-glass:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
        .btn-signin { background: transparent; color: rgba(255,255,255,0.85); font-size: 0.9rem; padding: 0.5rem 0.85rem; }
        .btn-signin:hover { color: #fff; }
        .header.scrolled .btn-signin { color: var(--fg-2); }
        .header.scrolled .btn-signin:hover { color: var(--primary-deep); }
        .header-cta { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
        .mobile-menu-btn { display: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0.45rem; cursor: pointer; color: #fff; }
        .header.scrolled .mobile-menu-btn { background: var(--bg-alt); border-color: var(--border); color: var(--fg); }

        /* ── Hero ── */
        .hero { position: relative; padding: clamp(5rem, 12vw, 9rem) 1.5rem clamp(4rem, 10vw, 7rem); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(249, 115, 22, 0.35) 0%, transparent 60%), radial-gradient(circle 700px at 80% 90%, rgba(251, 191, 36, 0.12) 0%, transparent 50%), radial-gradient(circle 500px at 10% 70%, rgba(234, 88, 12, 0.5) 0%, transparent 50%), linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 60%, #2e1608 100%); color: #fff; overflow: hidden; margin-top: -1px; }
        .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%); pointer-events: none; }
        .hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
        .hero-inner { position: relative; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; z-index: 1; }
        .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.95rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.92); margin-block-end: 1.75rem; backdrop-filter: blur(6px); }
        .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25); }
        .hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; margin-block-end: 1.5rem; color: #fff; text-wrap: balance; }
        .hero h1 .accent { background: linear-gradient(135deg, var(--primary-light) 0%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
        .hero p.lede { font-size: clamp(1.05rem, 1.6vw, 1.18rem); line-height: 1.6; color: rgba(255,255,255,0.78); margin-block-end: 2.25rem; max-width: 36em; text-wrap: pretty; }
        .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
        .hero-trust { display: flex; align-items: center; gap: 1.25rem; margin-block-start: 2.75rem; padding-block-start: 1.5rem; border-block-start: 1px solid rgba(255,255,255,0.1); font-size: 0.84rem; color: rgba(255,255,255,0.65); }
        .hero-trust .stars { color: var(--amber); letter-spacing: 0.1em; font-size: 0.95rem; }
        .hero-trust strong { color: #fff; font-weight: 600; }
        .hero-visual { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; }
        .hero-mockup { position: relative; width: 100%; max-width: 500px; aspect-ratio: 4 / 3.2; background: linear-gradient(135deg, #3d1c0a, #7c2d12); border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 80px -20px rgba(249, 115, 22, 0.4); padding: 18px; display: flex; flex-direction: column; gap: 12px; transform: perspective(1500px) rotateY(-8deg) rotateX(4deg); transition: transform 0.5s var(--transition); }
        .hero-mockup:hover { transform: perspective(1500px) rotateY(-3deg) rotateX(2deg); }
        .mockup-bar { display: flex; align-items: center; gap: 6px; padding: 4px; }
        .mockup-bar .traffic { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); }
        .mockup-content { flex: 1; background: linear-gradient(180deg, #fffaf5 0%, #fde9d7 100%); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; color: var(--fg); }
        .mockup-orders { background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); font-size: 11px; }
        .mockup-orders h4 { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-block-end: 8px; display: flex; justify-content: space-between; }
        .mockup-orders h4 small { font-size: 9px; color: var(--primary-deep); font-weight: 700; letter-spacing: 0.08em; }
        .mockup-order { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px; border-block-end: 1px solid #fde9d7; }
        .mockup-order:last-child { border: none; }
        .mockup-order .id { font-weight: 600; color: var(--primary-deep); font-family: var(--font-mono); font-size: 10px; }
        .mockup-order .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
        .mockup-order .pill-mini { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #fde9d7; color: var(--primary-deep); font-size: 9px; font-weight: 600; text-transform: uppercase; margin-inline-start: 4px; }
        .mockup-order .pill-mini.amber { background: var(--amber-soft); color: #8a5e0e; }
        .mockup-stats { display: flex; flex-direction: column; gap: 8px; }
        .mockup-stat { background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
        .mockup-stat .label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-block-end: 4px; font-weight: 600; }
        .mockup-stat .value { font-size: 16px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1; }
        .mockup-stat .value sub { font-size: 9px; font-weight: 600; color: var(--muted); margin-inline-start: 3px; vertical-align: baseline; }
        .mockup-stat .delta { font-size: 10px; color: #16a34a; margin-block-start: 3px; font-weight: 500; }
        .mockup-bars { display: flex; gap: 3px; align-items: end; height: 30px; margin-block-start: 6px; }
        .mockup-bars span { flex: 1; background: linear-gradient(to top, var(--primary), var(--primary-light)); border-radius: 2px; min-height: 4px; }
        .hero-floater { position: absolute; background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); padding: 0.6rem 0.9rem; border-radius: 12px; font-size: 0.78rem; color: #fff; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 8px 32px -8px rgba(0,0,0,0.5); z-index: 2; }
        .hero-floater.f1 { top: 8%; left: -3%; animation: float1 5s ease-in-out infinite; }
        .hero-floater.f2 { bottom: 12%; right: -5%; animation: float2 6s ease-in-out infinite; }
        .hero-floater .pulse { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25); }
        .hero-floater .amber-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25); }
        @keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
        @keyframes float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

        /* ── Trust strip ── */
        .trust-strip { padding: 3rem 1.5rem; background: var(--bg); border-block-end: 1px solid var(--border); }
        .trust-strip-inner { max-width: var(--max); margin: 0 auto; text-align: center; }
        .trust-strip p { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-block-end: 1.5rem; font-weight: 600; }
        .trust-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.8rem; }
        .trust-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.88rem; font-weight: 500; color: var(--fg-2); }
        .trust-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

        /* ── Replace your stack — Version A (Before/After split) ── */
        .replace-v1 { padding: clamp(4rem, 9vw, 7rem) 1.5rem; background: var(--bg); border-block-end: 1px solid var(--border); }
        .replace-v1-inner { max-width: var(--max); margin: 0 auto; }
        .replace-v1-header { text-align: center; margin-block-end: 3.5rem; }
        .replace-v1-header .section-eyebrow { justify-content: center; }
        .replace-v1-header .section-eyebrow::after { content: ''; width: 18px; height: 1px; background: var(--primary); }
        .ba-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; }
        /* Before panel */
        .ba-before { background: #fafafa; border: 1px solid #e5e5e5; border-radius: 20px; padding: 1.75rem; }
        .ba-panel-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-block-end: 1.4rem; }
        .ba-panel-label.bad { color: #dc2626; }
        .ba-panel-label.good { color: #f97316; }
        .ba-panel-label .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .ba-panel-label.bad .dot { background: #dc2626; }
        .ba-panel-label.good .dot { background: var(--primary); box-shadow: 0 0 0 3px rgba(249,115,22,0.2); }
        .ba-apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-block-end: 1.25rem; }
        .ba-app-tile { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.8rem; background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; }
        .ba-app-tile-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .ba-app-tile-name { font-size: 0.78rem; font-weight: 500; color: #9ca3af; line-height: 1.2; }
        .ba-app-tile-x { margin-inline-start: auto; color: #fca5a5; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
        .ba-before-footer { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.9rem; background: #fef2f2; border-radius: 10px; font-size: 0.82rem; color: #b91c1c; font-weight: 600; }
        /* Arrow middle */
        .ba-arrow { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
        .ba-arrow-icon { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -6px rgba(249,115,22,0.5); flex-shrink: 0; }
        .ba-arrow-label { font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
        /* After panel */
        .ba-after { background: linear-gradient(160deg, #2e1608 0%, #7c2d12 100%); border-radius: 20px; padding: 1.75rem; position: relative; overflow: hidden; box-shadow: 0 16px 40px -12px rgba(124,45,18,0.4); }
        .ba-after::before { content: ''; position: absolute; top: -40%; left: -20%; width: 80%; height: 180%; background: radial-gradient(ellipse, rgba(249,115,22,0.25) 0%, transparent 60%); pointer-events: none; }
        .ba-features { list-style: none; display: grid; gap: 0.55rem; margin-block-end: 1.5rem; position: relative; z-index: 1; }
        .ba-features li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; color: rgba(255,255,255,0.92); }
        .ba-features li .fcheck { width: 20px; height: 20px; border-radius: 50%; background: rgba(249,115,22,0.3); border: 1px solid rgba(249,115,22,0.5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary-light); }
        .ba-after-footer { position: relative; z-index: 1; padding-block-start: 1.25rem; border-block-start: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
        .ba-price { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
        .ba-price span { font-size: 0.72rem; font-weight: 500; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle; margin-inline-start: 0.3rem; }
        .ba-cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; background: #fff; color: var(--primary-deep); border-radius: 9px; font-size: 0.85rem; font-weight: 700; text-decoration: none; transition: all var(--transition); box-shadow: 0 4px 14px rgba(0,0,0,0.2); flex-shrink: 0; }
        .ba-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }

        /* ── Replace your stack — Version B (notification chaos) ── */
        .replace-v2 { padding: clamp(4rem, 9vw, 7rem) 1.5rem; background: var(--bg-alt); border-block-end: 1px solid var(--border); }
        .replace-v2-inner { max-width: var(--max); margin: 0 auto; }
        .replace-v2-header { text-align: center; margin-block-end: 3.5rem; }
        .replace-v2-header .section-eyebrow { justify-content: center; }
        .replace-v2-header .section-eyebrow::after { content: ''; width: 18px; height: 1px; background: var(--primary); }
        .notif-split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 3rem; align-items: start; }
        .notif-side-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-block-end: 1.5rem; display: flex; align-items: center; gap: 0.55rem; }
        .notif-side-label.chaos { color: #dc2626; }
        .notif-side-label.calm { color: var(--primary-deep); }
        .notif-divider-line { background: var(--border-2); align-self: stretch; }
        /* Chaos notifications */
        .notif-chaos-list { display: grid; gap: 0.65rem; }
        .notif-card { border-radius: 14px; padding: 0.85rem 1.1rem; display: flex; align-items: flex-start; gap: 0.85rem; box-shadow: 0 2px 8px rgba(11,8,32,0.07); }
        .notif-card.err { background: #fff; border-left: 3px solid #f87171; }
        .notif-card.warn { background: #fff; border-left: 3px solid #fbbf24; }
        .notif-card.info { background: #fff; border-left: 3px solid #60a5fa; }
        .notif-card-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; }
        .notif-card-body { flex: 1; min-width: 0; }
        .notif-card-app { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-block-end: 0.2rem; }
        .notif-card-msg { font-size: 0.86rem; font-weight: 600; color: var(--fg); line-height: 1.35; }
        .notif-card-time { font-size: 0.68rem; color: var(--muted); margin-block-start: 0.2rem; }
        .notif-chaos-footer { margin-block-start: 1.1rem; padding: 0.75rem 1rem; background: #fef2f2; border-radius: 10px; font-size: 0.82rem; color: #b91c1c; font-weight: 500; text-align: center; }
        /* Calm / Zuu Eats side */
        .notif-calm-card { background: linear-gradient(160deg, #2e1608, #7c2d12); border-radius: 18px; padding: 1.5rem; position: relative; overflow: hidden; box-shadow: 0 16px 40px -12px rgba(124,45,18,0.35); margin-block-end: 0.65rem; }
        .notif-calm-card::before { content: ''; position: absolute; top: -60%; right: -20%; width: 70%; height: 200%; background: radial-gradient(ellipse, rgba(249,115,22,0.2) 0%, transparent 60%); pointer-events: none; }
        .notif-calm-header { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1.1rem; position: relative; z-index: 1; }
        .notif-calm-logo { width: 38px; height: 38px; border-radius: 10px; background: rgba(249,115,22,0.3); border: 1px solid rgba(249,115,22,0.4); display: flex; align-items: center; justify-content: center; color: var(--primary-light); flex-shrink: 0; }
        .notif-calm-title { font-size: 0.88rem; font-weight: 700; color: #fff; }
        .notif-calm-sub { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
        .notif-calm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; position: relative; z-index: 1; margin-block-end: 1.25rem; }
        .notif-calm-stat { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 0.85rem; }
        .notif-calm-stat .sv { font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -0.025em; line-height: 1; }
        .notif-calm-stat .sl { font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-block-start: 0.25rem; }
        .notif-calm-stat .sd { font-size: 0.72rem; color: #4ade80; margin-block-start: 0.2rem; font-weight: 500; }
        .notif-calm-footer { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; padding-block-start: 1.1rem; border-block-start: 1px solid rgba(255,255,255,0.1); }
        .notif-calm-price { font-size: 0.82rem; color: rgba(255,255,255,0.7); }
        .notif-calm-price strong { color: #fff; font-size: 1rem; }
        .notif-calm-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; background: #fff; color: var(--primary-deep); border-radius: 8px; font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: all var(--transition); }
        .notif-calm-cta:hover { transform: translateY(-1px); }
        .notif-calm-check { background: #fff; border-radius: 12px; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.7rem; border: 1px solid rgba(34,197,94,0.2); }
        .notif-calm-check-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(34,197,94,0.12); color: #16a34a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .notif-calm-check-text { font-size: 0.86rem; font-weight: 600; color: var(--fg); }
        .notif-calm-check-text span { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; margin-block-start: 0.1rem; }

        /* ── Cost Reality Check ── */
        .cost-reality { padding: clamp(5rem, 10vw, 8rem) 1.5rem; background: var(--bg); border-block: 1px solid var(--border); position: relative; overflow: hidden; }
        .cr-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
        .cr-header { text-align: center; margin-block-end: 4rem; }
        .cr-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--primary-deep); margin-block-end: 1.25rem; }
        .cr-eyebrow::before, .cr-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--primary); }
        .cr-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; color: var(--fg); letter-spacing: -0.03em; line-height: 1.1; margin-block-end: 0.85rem; }
        .cr-sub { font-size: 1rem; color: var(--muted); max-width: 420px; margin: 0 auto; }
        /* Two-column grid */
        .cr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
        /* Left — separate apps */
        .cr-before { background: #fff9f9; border: 1px solid #fecaca; border-radius: 24px; padding: 1.75rem; }
        .cr-panel-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #dc2626; margin-block-end: 1.5rem; display: flex; align-items: center; gap: 0.55rem; }
        .cr-items { display: grid; gap: 0.45rem; }
        .cr-item { display: flex; align-items: center; padding: 0.65rem 0.85rem; border-radius: 10px; background: #fff; border: 1px solid #f3f4f6; }
        .cr-item-name { display: flex; align-items: center; gap: 0.65rem; font-size: 0.875rem; color: #374151; font-weight: 500; }
        .cr-item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .cr-footnote { margin-block-start: 1.25rem; font-size: 0.78rem; color: #9ca3af; line-height: 1.85; padding-inline-start: 0.85rem; border-inline-start: 2px solid #fca5a5; }
        /* Right — Zuu Eats */
        .cr-after { background: linear-gradient(160deg, #2e1608 0%, #7c2d12 100%); border: 1px solid rgba(249,115,22,0.22); border-radius: 24px; padding: 1.75rem; position: relative; overflow: hidden; }
        .cr-after::before { content: ''; position: absolute; top: -40%; right: -20%; width: 80%; height: 180%; background: radial-gradient(ellipse, rgba(249,115,22,0.18) 0%, transparent 60%); pointer-events: none; }
        .cr-after-inner { position: relative; z-index: 1; }
        .cr-after-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(249,115,22,0.85); margin-block-end: 1.5rem; display: flex; align-items: center; gap: 0.55rem; }
        .cr-after-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(249,115,22,0.25); flex-shrink: 0; }
        .cr-after-items { display: grid; gap: 0.5rem; margin-block-end: 1.75rem; }
        .cr-after-item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.875rem; color: rgba(255,255,255,0.88); }
        .cr-after-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(249,115,22,0.25); border: 1px solid rgba(249,115,22,0.4); display: flex; align-items: center; justify-content: center; color: var(--primary-light); flex-shrink: 0; font-size: 0.7rem; }
        .cr-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.5rem; border-block: 1px solid rgba(255,255,255,0.1); margin-block-end: 1.25rem; }
        .cr-price-main { font-size: 2.25rem; font-weight: 900; color: #fff; letter-spacing: -0.04em; line-height: 1; }
        .cr-price-meta { font-size: 0.72rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-inline-start: 0.3rem; vertical-align: middle; }
        .cr-savings-badge { display: flex; align-items: center; gap: 0.65rem; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.22); font-size: 0.875rem; font-weight: 700; color: #4ade80; }
        /* Bottom bar comparison */
        .cr-bars { margin-block-start: 3.5rem; padding-block-start: 3rem; border-block-start: 1px solid var(--border); }
        .cr-bars-title { text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-block-end: 1.75rem; }
        .cr-bar-row { display: flex; align-items: center; gap: 1.25rem; margin-block-end: 0.65rem; }
        .cr-bar-tag { font-size: 0.72rem; font-weight: 600; color: var(--muted); width: 90px; text-align: right; flex-shrink: 0; line-height: 1.3; }
        .cr-bar-track { flex: 1; height: 48px; border-radius: 12px; background: #f3f4f6; position: relative; overflow: hidden; }
        .cr-bar-fill { height: 100%; border-radius: 12px; display: flex; align-items: center; padding-inline: 1rem; position: relative; }
        .cr-bar-fill.red { background: linear-gradient(90deg, #f87171, #fca5a5); width: 100%; }
        .cr-bar-fill.purple { background: linear-gradient(90deg, var(--primary-deep), var(--primary)); width: 30.8%; min-width: 90px; }
        .cr-bar-label { font-size: 0.8rem; font-weight: 800; color: #fff; font-family: var(--font-mono); white-space: nowrap; letter-spacing: -0.02em; }
        .cr-bar-saved { position: absolute; left: 30.8%; top: 0; bottom: 0; right: 0; display: flex; align-items: center; padding-inline: 1rem; border-inline-start: 2px dashed #86efac; }
        .cr-bar-saved-text { font-size: 0.78rem; font-weight: 700; color: #16a34a; white-space: nowrap; }
        .cr-cta-wrap { display: flex; justify-content: center; margin-block-start: 2.5rem; }

        /* ── Style consistency overrides ── */
        /* Steps */
        .step { padding-block-start: 1.75rem; overflow: hidden; }
        .step-number { position: absolute; bottom: -0.5rem; right: 0.9rem; top: auto; left: auto; width: auto; height: auto; background: none; border-radius: 0; box-shadow: none; color: rgba(0,0,0,0.045); font-size: 5.5rem; font-weight: 900; font-family: var(--font-mono); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: normal; }
        .step-accent { width: 36px; height: 3px; border-radius: 3px; background: var(--primary); margin-block-end: 1.25rem; }
        .step-time { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-deep); background: rgba(234,88,12,0.08); padding: 0.2rem 0.55rem; border-radius: 5px; margin-block-end: 0.85rem; }
        /* Why Zuu Eats */
        .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
        .why-item { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1.75rem; position: relative; overflow: hidden; flex-direction: column; align-items: flex-start; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .why-item:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgba(0,0,0,0.1); border-color: var(--border); }
        .why-item .why-icon { display: none; }
        .why-item > div { display: contents; }
        .why-item h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin-block-end: 0.5rem; color: var(--fg); }
        .why-item p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
        /* Testimonials */
        .testimonials { background: var(--bg); }
        .testimonial-stars { display: none; }
        .testimonial-card { background: #fff; }
        .testimonial-card::before { content: '\201C'; font-size: 4rem; font-weight: 900; line-height: 0.8; color: var(--primary); opacity: 0.25; display: block; margin-block-end: 0.75rem; font-family: Georgia, 'Times New Roman', serif; }
        .testimonial-quote { font-style: normal; font-size: 0.94rem; line-height: 1.7; }
        .testimonial-quote::before, .testimonial-quote::after { content: ''; }
        /* .testimonial-avatar override moved to original rule */
        .testimonial-author-info strong { font-size: 0.88rem; }
        /* Iraq stat cards */
        .iraq-stat-card { background: #fff; position: relative; overflow: hidden; text-align: left; }
        .iraq-stat-card .stat-emoji { display: none; }
        .iraq-stat-card .stat-value { font-size: 2rem; letter-spacing: -0.04em; font-weight: 900; margin-block-end: 0.3rem; }
        .iraq-stat-card .stat-label { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
        .iraq-stat-accent { width: 28px; height: 3px; border-radius: 3px; margin-block-end: 0.85rem; }
        /* Iraq feature list */
        .iraq-feature { gap: 0; padding-block: 1rem; border-block-end: 1px solid var(--border); }
        .iraq-feature:last-child { border-block-end: none; padding-block-end: 0; }
        .iraq-feature:first-child { padding-block-start: 0; }
        .iraq-feature h4 { font-size: 0.95rem; font-weight: 700; margin-block-end: 0.25rem; letter-spacing: -0.01em; }
        /* Pricing minor tweaks */
        .pricing-card { border-radius: 20px; }
        .pricing-features li::before { background: rgba(234,88,12,0.07); font-size: 0.65rem; }
        .pricing-card:not(.featured) { background: #fff; }

        /* ── Logos strip ── */
        .logos-strip { padding: 3.5rem 1.5rem 4rem; background: var(--bg); }
        .logos-strip-inner { max-width: var(--max); margin: 0 auto; text-align: center; }
        .logos-strip h2 { font-size: 0.95rem; color: var(--muted); font-weight: 500; margin-block-end: 2.5rem; line-height: 1.5; }
        .logos-strip h2 strong { color: var(--fg); font-weight: 700; }
        .logos-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem 1.5rem; align-items: center; justify-items: center; }
        .logo-mark { color: var(--fg-2); opacity: 0.55; transition: opacity var(--transition), color var(--transition); white-space: nowrap; user-select: none; }
        .logo-mark:hover { opacity: 1; color: var(--primary-deep); }
        .logo-mark.serif { font-family: var(--font-serif); font-style: italic; font-size: 1.55rem; font-weight: 500; letter-spacing: -0.015em; }
        .logo-mark.bold { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.04em; }
        .logo-mark.upper { text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.95rem; font-weight: 700; }
        .logo-mark.mono { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }
        .logo-mark.serif-cap { font-family: var(--font-serif); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.005em; }
        .logo-mark .accent-dot { color: var(--primary); }

        /* ── Sections ── */
        .section { padding: clamp(4rem, 9vw, 7rem) 1.5rem; }
        .section-inner { max-width: var(--max); margin: 0 auto; }
        .section-alt { background: var(--bg-alt); }
        .section-header { max-width: 720px; margin-block-end: 4rem; }
        .section-header.center { margin-inline: auto; text-align: center; }
        .section-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary-deep); font-weight: 700; margin-block-end: 1rem; }
        .section-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--primary); }
        .section-header.center .section-eyebrow { justify-content: center; }
        .section-header.center .section-eyebrow::after { content: ''; width: 18px; height: 1px; background: var(--primary); }
        .section-title { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; margin-block-end: 1rem; text-wrap: balance; line-height: 1.1; }
        .section-title .accent { color: var(--primary-deep); }
        .section-subtitle { font-size: 1.1rem; color: var(--muted); line-height: 1.55; text-wrap: pretty; }

        /* ── Features ── */
        /* ── Feature bento grid ── */
        .feat-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }
        .feat-cell { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1.75rem 1.85rem; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .feat-cell:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgba(0,0,0,0.1); }
        .feat-cell.w2 { grid-column: span 2; }
        .feat-cell.w3 { grid-column: span 3; }
        .feat-cell.w4 { grid-column: span 4; }
        /* Watermark number */
        .feat-wm { position: absolute; bottom: -0.5rem; right: 0.9rem; font-size: 5.5rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1; pointer-events: none; user-select: none; font-family: var(--font-mono); opacity: 0.045; color: #000; }
        /* Accent line */
        .feat-line { width: 36px; height: 3px; border-radius: 3px; margin-block-end: 1.3rem; }
        .feat-line.purple { background: var(--primary); }
        .feat-line.amber { background: var(--amber); }
        .feat-line.green { background: #22c55e; }
        .feat-line.blue { background: #3b82f6; }
        .feat-line.orange { background: #f97316; }
        /* Content */
        .feat-cell h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); margin-block-end: 0.5rem; }
        .feat-cell p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; text-wrap: pretty; }
        /* Tag */
        .feat-pill { display: inline-flex; align-items: center; gap: 0.3rem; margin-block-start: 0.85rem; padding: 0.22rem 0.6rem; border-radius: 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
        .feat-pill.purple { background: rgba(234,88,12,0.08); color: var(--primary-deep); }
        .feat-pill.amber { background: rgba(251,191,36,0.15); color: #92400e; }
        .feat-pill.green { background: rgba(34,197,94,0.1); color: #15803d; }
        /* Mini decorative elements on wider cards */
        .feat-mini { margin-block-start: 1.1rem; display: flex; gap: 0.4rem; align-items: flex-end; height: 36px; }
        .feat-mini-bar { border-radius: 3px 3px 0 0; width: 100%; }
        .feat-kds-dots { display: flex; gap: 0.5rem; margin-block-start: 1.1rem; flex-wrap: wrap; }
        .feat-kds-dot { padding: 0.28rem 0.65rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; }
        .feat-stat-row { display: flex; gap: 1.25rem; margin-block-start: 1.1rem; }
        .feat-stat { }
        .feat-stat .sv { font-size: 1.4rem; font-weight: 800; color: var(--fg); letter-spacing: -0.04em; line-height: 1; }
        .feat-stat .sl { font-size: 0.7rem; color: var(--muted); margin-block-start: 0.15rem; }
        /* Legacy compat (unused but harmless) */
        .feature-tag { display: inline-block; margin-block-start: 0.9rem; padding: 0.25rem 0.65rem; background: rgba(249,115,22,0.1); color: var(--primary-deep); font-size: 0.72rem; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
        .feature-tag.amber { background: var(--amber-soft); color: #8a5e0e; }

        /* ── How it works ── */
        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
        .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 2rem 1.75rem; position: relative; transition: all var(--transition); }
        .step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
        .step-number { position: absolute; bottom: -0.5rem; right: 0.9rem; top: auto; left: auto; width: auto; height: auto; background: none; border-radius: 0; box-shadow: none; color: rgba(0,0,0,0.045); font-size: 5.5rem; font-weight: 900; font-family: var(--font-mono); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: normal; display: block; }
        .step-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--primary-deep); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-block-start: 0.75rem; margin-block-end: 0.6rem; }
        .step h3 { font-size: 1.25rem; margin-block-end: 0.5rem; letter-spacing: -0.01em; font-weight: 700; }
        .step p { font-size: 0.94rem; color: var(--muted); line-height: 1.55; }

        /* ── Testimonials ── */
        .testimonials { padding: clamp(4rem, 9vw, 7rem) 1.5rem; background: var(--bg-alt); }
        .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
        .testimonial-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.85rem 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; transition: all var(--transition); }
        .testimonial-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
        .testimonial-stars { color: var(--amber); font-size: 0.9rem; letter-spacing: 0.08em; }
        .testimonial-quote { font-size: 0.98rem; color: var(--fg-2); line-height: 1.65; font-style: italic; flex: 1; text-wrap: pretty; }
        .testimonial-quote::before { content: '\201C'; }
        .testimonial-quote::after { content: '\201D'; }
        .testimonial-author { display: flex; align-items: center; gap: 0.85rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--border); }
        .testimonial-avatar { width: 36px; height: 36px; border-radius: 0; background: none; display: flex; align-items: center; justify-content: center; color: var(--primary-deep); font-weight: 900; font-size: 1.4rem; flex-shrink: 0; letter-spacing: -0.03em; }
        .testimonial-author-info strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--fg); }
        .testimonial-author-info span { font-size: 0.8rem; color: var(--muted); }

        /* ── Built for Iraq ── */
        .built-iraq { padding: clamp(4rem, 9vw, 7rem) 1.5rem; background: var(--bg); position: relative; overflow: hidden; }
        .built-iraq::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,0.06) 0%, transparent 70%); pointer-events: none; }
        .built-iraq-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
        .built-iraq-text .section-eyebrow { margin-block-end: 1rem; }
        .built-iraq-text .section-title { margin-block-end: 1.25rem; }
        .built-iraq-text .section-subtitle { margin-block-end: 2.5rem; }
        .iraq-features { display: grid; gap: 1.1rem; }
        .iraq-feature { display: flex; gap: 0; align-items: flex-start; }
        .iraq-feature-icon { display: none; }
        .iraq-feature h4 { font-size: 0.95rem; font-weight: 700; margin-block-end: 0.2rem; letter-spacing: -0.01em; }
        .iraq-feature p { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
        .built-iraq-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .iraq-stat-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.25rem; text-align: center; transition: all var(--transition); }
        .iraq-stat-card:hover { border-color: var(--primary); transform: translateY(-2px); }
        .iraq-stat-card .stat-emoji { font-size: 1.75rem; margin-block-end: 0.6rem; }
        .iraq-stat-card .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--primary-deep); letter-spacing: -0.03em; margin-block-end: 0.25rem; }
        .iraq-stat-card .stat-label { font-size: 0.8rem; color: var(--muted); font-weight: 500; line-height: 1.35; }

        /* ── Pricing ── */
        .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
        .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 2rem 1.75rem; display: flex; flex-direction: column; position: relative; transition: all var(--transition); }
        .pricing-card:hover:not(.featured) { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
        .pricing-card.featured { background: linear-gradient(160deg, #2e1608 0%, #7c2d12 100%); color: #fff; border: none; box-shadow: 0 24px 48px -12px rgba(124, 45, 18, 0.5), 0 0 0 1px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255,255,255,0.1); overflow: hidden; }
        .pricing-card.featured:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -12px rgba(124, 45, 18, 0.6), 0 0 0 1px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255,255,255,0.1); }
        .pricing-card.featured::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 50%); pointer-events: none; }
        .pricing-card.featured h3, .pricing-card.featured .pricing-price, .pricing-card.featured .pricing-period { color: #fff; }
        .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.92); }
        .pricing-card.featured .pricing-features li::before { background: rgba(249,115,22,0.25); color: var(--primary-light); }
        .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--amber); color: #2a1a08; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.32rem 0.85rem; border-radius: var(--radius-pill); box-shadow: 0 6px 16px -4px rgba(251, 191, 36, 0.5); z-index: 1; white-space: nowrap; }
        .pricing-card h3 { font-size: 1.35rem; margin-block-end: 0.5rem; font-weight: 700; letter-spacing: -0.01em; }
        .pricing-tagline { font-size: 0.88rem; color: var(--muted); margin-block-end: 1.4rem; }
        .pricing-card.featured .pricing-tagline { color: rgba(255,255,255,0.65); }
        .pricing-price { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin-block-end: 0.35rem; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
        .pricing-price .currency { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; }
        .pricing-card.featured .pricing-price .currency { color: rgba(255,255,255,0.65); }
        .pricing-period { font-size: 0.82rem; color: var(--muted); margin-block-end: 1.5rem; line-height: 1.4; }
        .pricing-card.featured .pricing-period { color: rgba(255,255,255,0.7); }
        .pricing-divider { border: none; border-block-start: 1px solid var(--border); margin-block: 1.25rem; }
        .pricing-card.featured .pricing-divider { border-block-start-color: rgba(255,255,255,0.12); }
        .pricing-features { list-style: none; margin-block-end: 1.75rem; flex: 1; }
        .pricing-features li { font-size: 0.9rem; padding: 0.38rem 0; color: var(--fg); display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.4; }
        .pricing-features li::before { content: '✓'; width: 18px; height: 18px; border-radius: 50%; background: rgba(249,115,22,0.12); color: var(--primary-deep); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-block-start: 1px; }
        .pricing-cta { width: 100%; }
        .pricing-cta .btn { width: 100%; justify-content: center; padding: 0.85rem 1rem; font-size: 0.92rem; }
        .pricing-card.featured .pricing-cta .btn-primary { background: #fff; color: var(--primary-deep); box-shadow: 0 4px 16px -4px rgba(0,0,0,0.3); }
        .pricing-card.featured .pricing-cta .btn-primary:hover { background: var(--bg); transform: translateY(-1px); }
        .pricing-note { text-align: center; margin-block-start: 2.25rem; font-size: 0.92rem; color: var(--muted); }
        .pricing-note strong { color: var(--fg); font-weight: 600; }
        .pricing-trial-note { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 1rem; padding: 0.5rem 1rem; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: var(--radius-pill); font-size: 0.82rem; color: #16a34a; font-weight: 500; }

        /* ── Why Zuu Eats ── */
        .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 920px; margin: 0 auto; }
        .why-item { display: flex; gap: 1.25rem; padding: 1.65rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); transition: all var(--transition); }
        .why-item:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
        .why-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, var(--amber), #e89e2b); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -4px rgba(251, 191, 36, 0.5); }
        .why-item h3 { font-size: 1.1rem; margin-block-end: 0.4rem; font-weight: 700; }
        .why-item p { font-size: 0.93rem; color: var(--muted); line-height: 1.55; }

        /* ── FAQ ── */
        .faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 0.85rem; }
        .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: all var(--transition); }
        .faq-item[open] { border-color: var(--primary); box-shadow: 0 4px 16px -4px rgba(249,115,22,0.12); }
        .faq-item summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; font-size: 1.05rem; font-weight: 600; color: var(--fg); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
        .faq-item summary:hover { color: var(--primary-deep); }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: '＋'; font-size: 1.25rem; color: var(--muted); line-height: 1; }
        .faq-item[open] summary::after { content: '−'; color: var(--primary-deep); }
        .faq-answer { padding: 0 1.5rem 1.5rem; font-size: 0.96rem; color: var(--muted); line-height: 1.65; }

        /* ── Contact ── */
        .contact-section { padding: clamp(4rem, 9vw, 6.5rem) 1.5rem; background: radial-gradient(ellipse 60% 80% at 25% 30%, rgba(249,115,22,0.4) 0%, transparent 60%), radial-gradient(circle at 85% 80%, rgba(251,191,36,0.15) 0%, transparent 50%), linear-gradient(135deg, var(--hero-bg-2) 0%, var(--hero-bg-1) 100%); color: #fff; position: relative; overflow: hidden; }
        .contact-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%); pointer-events: none; }
        .contact-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .contact-text .hero-eyebrow { margin-block-end: 1.5rem; }
        .contact-text h2 { font-size: clamp(2rem, 4.2vw, 3rem); color: #fff; margin-block-end: 1.2rem; line-height: 1.1; text-wrap: balance; font-weight: 800; }
        .contact-text h2 .accent { background: linear-gradient(135deg, var(--primary-light), var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .contact-text p.lede { font-size: 1.05rem; color: rgba(255,255,255,0.78); line-height: 1.6; margin-block-end: 1.75rem; text-wrap: pretty; }
        .contact-perks { list-style: none; display: grid; gap: 0.7rem; margin-block-end: 1.75rem; }
        .contact-perks li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255,255,255,0.85); font-size: 0.95rem; line-height: 1.5; }
        .contact-perks .check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(249,115,22,0.25); color: var(--primary-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; margin-block-start: 1px; }
        .contact-channels { display: flex; flex-direction: column; gap: 0.6rem; }
        .contact-channel { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; color: #fff; text-decoration: none; font-size: 0.94rem; font-weight: 500; transition: all var(--transition); backdrop-filter: blur(6px); }
        .contact-channel:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); transform: translateX(2px); }
        .contact-channel .ch-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(249,115,22,0.25); color: var(--primary-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .contact-channel .ch-meta { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
        .contact-channel .ch-meta strong { font-weight: 600; }
        .contact-channel .ch-meta span { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
        .contact-form { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 2rem 1.85rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4); }
        .contact-form h3 { color: #fff; font-size: 1.3rem; margin-block-end: 0.35rem; font-weight: 700; letter-spacing: -0.01em; }
        .contact-form .form-meta { color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-block-end: 1.4rem; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-block-end: 0.85rem; }
        .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-block-end: 0.85rem; }
        .form-row .form-field { margin-block-end: 0; }
        .form-field label { font-size: 0.78rem; color: rgba(255,255,255,0.7); font-weight: 500; }
        .form-field label .opt { color: rgba(255,255,255,0.4); font-weight: 400; margin-inline-start: 0.3rem; }
        .form-field input, .form-field select, .form-field textarea { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 0.7rem 0.9rem; color: #fff; font-family: inherit; font-size: 0.93rem; transition: all var(--transition); width: 100%; }
        .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; background: rgba(255,255,255,0.1); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(249,115,22,0.18); }
        .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255,255,255,0.3); }
        .form-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%), linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%); background-position: calc(100% - 18px) 56%, calc(100% - 13px) 56%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 2.2rem; cursor: pointer; }
        .form-field select option { background: var(--hero-bg-2); color: #fff; }
        .form-field textarea { resize: vertical; min-height: 84px; }
        .submit-btn { width: 100%; justify-content: center; padding: 0.95rem 1.4rem; background: #fff; color: var(--primary-deep); margin-block-start: 0.5rem; font-size: 0.95rem; }
        .submit-btn:hover { background: var(--bg); transform: translateY(-1px); }
        .submit-btn .btn-state-sent { display: none; align-items: center; gap: 0.5rem; }
        .submit-btn.is-sent { background: rgba(74, 222, 128, 0.18); color: #86efac; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.25); cursor: default; }
        .submit-btn.is-sent:hover { transform: none; }
        .submit-btn.is-sent .btn-state-default { display: none; }
        .submit-btn.is-sent .btn-state-sent { display: inline-flex; }
        .contact-form .form-fineprint { text-align: center; margin-block-start: 1rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); }

        /* ── Footer ── */
        .footer { background: var(--hero-bg-1); color: rgba(255,255,255,0.85); padding: 4rem 1.5rem 2rem; }
        .footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-block-end: 3rem; }
        .footer-brand img { height: 28px; margin-block-end: 1rem; display: block; filter: brightness(0) invert(1); }
        .footer-brand p { font-size: 0.93rem; color: rgba(255,255,255,0.6); margin-block-end: 1.5rem; max-width: 22em; }
        .footer-social { display: flex; gap: 0.6rem; }
        .footer-social a { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: all var(--transition); }
        .footer-social a:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
        .footer h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-block-end: 1.1rem; font-weight: 600; }
        .footer-links { list-style: none; }
        .footer-links li { margin-block-end: 0.65rem; }
        .footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.92rem; transition: color var(--transition); }
        .footer-links a:hover { color: var(--primary-light); }
        .footer-bottom { max-width: var(--max); margin: 0 auto; padding-block-start: 1.75rem; border-block-start: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
        a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

        /* ── Responsive ── */
        @media (max-width: 1100px) {
            .stack-grid { grid-template-columns: repeat(3, 1fr); }
            .logos-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem; }
            .built-iraq-inner { gap: 3rem; }
            .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
        }
        @media (max-width: 1024px) {
            .hero-inner { grid-template-columns: 1fr; gap: 3rem; text-align: start; }
            .hero-visual { max-width: 480px; margin: 0 auto; min-height: 400px; }
            .feat-bento { grid-template-columns: repeat(4, 1fr); }
            .feat-cell.w3 { grid-column: span 2; }
            .feat-cell.w4 { grid-column: span 4; }
            .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; max-width: 600px; }
            .built-iraq-inner { grid-template-columns: 1fr; }
            .built-iraq-visual { grid-template-columns: repeat(4, 1fr); }
            .testimonials-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
        }
        @media (max-width: 768px) {
            .header-nav { display: none; }
            .header-nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: rgba(26,13,2,0.96); backdrop-filter: blur(16px); flex-direction: column; gap: 0; padding: 0.5rem; }
            .header.scrolled .header-nav.open { background: rgba(255,255,255,0.96); }
            .header-nav.open li { width: 100%; padding: 0.85rem 1rem; }
            .header-nav.open a { color: rgba(255,255,255,0.9); }
            .header.scrolled .header-nav.open a { color: var(--fg-2); }
            .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
            .header-cta, .btn-signin { display: none; }
            .feat-bento { grid-template-columns: 1fr; }
            .feat-cell.w2, .feat-cell.w3, .feat-cell.w4 { grid-column: span 1; }
            .steps { grid-template-columns: 1fr; gap: 2rem; }
            .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
            .why-grid { grid-template-columns: 1fr; }
            .compare-header-row, .compare-row, .compare-footer { grid-template-columns: 1fr 40px 1fr; }
            .compare-cell { padding: 0.85rem 1rem; font-size: 0.84rem; }
            .compare-col-label { padding: 0.9rem 1rem; }
            .stack-grid { grid-template-columns: repeat(2, 1fr); }
            .built-iraq-visual { grid-template-columns: repeat(2, 1fr); }
            .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
            .footer-brand { grid-column: 1 / -1; }
            .hero-floater.f1 { left: 0; top: 4%; }
            .hero-floater.f2 { right: 0; bottom: 4%; }
        }
        @media (max-width: 600px) {
            .form-row { grid-template-columns: 1fr; }
            .logos-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
            .built-iraq-visual { grid-template-columns: 1fr 1fr; }
            .compare-cell-icon { display: none; }
            .compare-footer-after { align-items: flex-start; }
            .stack-arrow { flex-direction: column; gap: 0.75rem; }
        }
        @media (max-width: 480px) {
            .footer-inner { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; text-align: center; }
            .hero { padding-top: 4rem; }
            .hero-visual { min-height: 320px; }
            .hero-mockup { transform: none; max-width: 360px; }
        }

        /* ═══════════════════════════════════════════════
           SHARED MULTI-PAGE COMPONENTS (Zuu Eats site)
           ═══════════════════════════════════════════════ */

        /* ── Header dropdown (Products) ── */
        .has-dropdown { position: relative; }
        .dropdown-toggle { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
        .dropdown-toggle svg { transition: transform var(--transition); }
        .dropdown-menu { position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 260px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 48px -12px rgba(28,20,8,0.18); padding: 0.5rem; opacity: 0; visibility: hidden; transition: all var(--transition); z-index: 1001; }
        .has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .has-dropdown:hover .dropdown-toggle svg { transform: rotate(180deg); }
        .dropdown-menu a { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0.8rem; border-radius: 10px; text-decoration: none; transition: background var(--transition); }
        .dropdown-menu a:hover { background: var(--bg-alt); }
        .dropdown-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(249,115,22,0.1); color: var(--primary-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .dropdown-tt { font-size: 0.9rem; font-weight: 600; color: var(--fg); line-height: 1.3; }
        .dropdown-ds { font-size: 0.78rem; color: var(--muted); line-height: 1.35; margin-block-start: 0.1rem; }

        /* ── Sub-page hero (compact, dark) ── */
        .page-hero { position: relative; padding: clamp(6rem, 12vw, 8.5rem) 1.5rem clamp(3.5rem, 8vw, 5.5rem); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(249,115,22,0.32) 0%, transparent 60%), radial-gradient(circle 500px at 12% 80%, rgba(234,88,12,0.4) 0%, transparent 55%), linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%); color: #fff; overflow: hidden; margin-top: -1px; }
        .page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 80%); pointer-events: none; }
        .page-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 70px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
        .page-hero-inner { position: relative; max-width: 800px; margin: 0 auto; text-align: center; z-index: 1; }
        .page-hero .hero-eyebrow { margin-block-end: 1.5rem; }
        .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: #fff; margin-block-end: 1.25rem; text-wrap: balance; }
        .page-hero h1 .accent { background: linear-gradient(135deg, var(--primary-light) 0%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .page-hero p.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: rgba(255,255,255,0.8); line-height: 1.6; max-width: 42em; margin: 0 auto 2rem; text-wrap: pretty; }
        .page-hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

        /* ── Breadcrumb ── */
        .breadcrumb { max-width: var(--max); margin: 0 auto; padding: 1.25rem 1.5rem 0; font-size: 0.82rem; color: var(--muted); }
        .breadcrumb a { color: var(--muted); text-decoration: none; }
        .breadcrumb a:hover { color: var(--primary-deep); }

        /* ── Three-up cards ── */
        .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
        .icard { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 1.85rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .icard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(28,20,8,0.12); }
        .icard-ic { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; display: flex; align-items: center; justify-content: center; margin-block-end: 1.1rem; box-shadow: 0 6px 16px -6px rgba(249,115,22,0.5); }
        .icard-ic.amber { background: linear-gradient(135deg, var(--amber), #e89e2b); box-shadow: 0 6px 16px -6px rgba(251,191,36,0.5); }
        .icard-ic.green { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 6px 16px -6px rgba(34,197,94,0.5); }
        .icard h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin-block-end: 0.5rem; }
        .icard p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }

        /* ── Alternating split feature rows ── */
        .split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .split + .split { margin-block-start: clamp(3.5rem, 7vw, 6rem); }
        .split.reverse .split-media { order: 2; }
        .split-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary-deep); font-weight: 700; margin-block-end: 0.9rem; }
        .split-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--primary); }
        .split h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-block-end: 1rem; text-wrap: balance; }
        .split > div > p { font-size: 1rem; color: var(--muted); line-height: 1.65; margin-block-end: 1.5rem; }
        .check-list { list-style: none; display: grid; gap: 0.8rem; }
        .check-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; color: var(--fg-2); line-height: 1.5; }
        .check-list li .ci { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(249,115,22,0.12); color: var(--primary-deep); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; margin-block-start: 1px; }
        .check-list li strong { color: var(--fg); font-weight: 600; }

        /* ── Media panel (framed screenshot substitute) ── */
        .media-panel { background: linear-gradient(160deg, var(--hero-bg-2), var(--hero-bg-3)); border-radius: 20px; padding: 1.4rem; box-shadow: 0 24px 56px -20px rgba(124,45,18,0.5), 0 0 0 1px rgba(249,115,22,0.15); position: relative; overflow: hidden; }
        .media-panel::before { content: ''; position: absolute; top: -40%; right: -20%; width: 70%; height: 180%; background: radial-gradient(ellipse, rgba(249,115,22,0.22) 0%, transparent 60%); pointer-events: none; }
        .media-panel-inner { position: relative; z-index: 1; background: #fff; border-radius: 12px; padding: 1.1rem; }
        .mp-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: 9px; background: var(--bg-alt); margin-block-end: 0.5rem; }
        .mp-row:last-child { margin-block-end: 0; }
        .mp-row .l { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; font-weight: 600; color: var(--fg); }
        .mp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
        .mp-pill { font-size: 0.72rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 5px; }
        .mp-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; color: var(--fg); }

        /* ── Stat band ── */
        .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
        .stat-b { text-align: center; padding: 1.25rem; }
        .stat-b .sv { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; letter-spacing: -0.04em; color: var(--primary-deep); line-height: 1; }
        .stat-b .sl { font-size: 0.85rem; color: var(--muted); margin-block-start: 0.5rem; line-height: 1.4; }

        /* ── CTA band ── */
        .cta-band { padding: clamp(4rem, 9vw, 6rem) 1.5rem; background: radial-gradient(ellipse 60% 90% at 30% 20%, rgba(249,115,22,0.4) 0%, transparent 60%), linear-gradient(135deg, var(--hero-bg-2) 0%, var(--hero-bg-1) 100%); color: #fff; text-align: center; position: relative; overflow: hidden; }
        .cta-band::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%); pointer-events: none; }
        .cta-band-inner { position: relative; max-width: 640px; margin: 0 auto; z-index: 1; }
        .cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1.1; margin-block-end: 1rem; text-wrap: balance; }
        .cta-band h2 .accent { background: linear-gradient(135deg, var(--primary-light), var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .cta-band p { font-size: 1.05rem; color: rgba(255,255,255,0.78); line-height: 1.6; margin-block-end: 2rem; }
        .cta-band .hero-ctas { justify-content: center; }

        /* ── Clients logo strip (image logos) ── */
        .clients-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2.5rem; }
        .client-logo { display: flex; align-items: center; justify-content: center; height: 84px; width: 84px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 14px -6px rgba(28,20,8,0.1); filter: grayscale(1); opacity: 0.75; transition: filter var(--transition), opacity var(--transition), transform var(--transition); }
        .client-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px); }
        .client-logo img { width: 100%; height: 100%; object-fit: cover; }

        /* ── Integrations grid ── */
        .int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
        .int-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.6rem 1.4rem; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; align-items: center; }
        .int-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(28,20,8,0.12); border-color: var(--border-2); }
        .int-logo { height: 56px; width: 56px; display: flex; align-items: center; justify-content: center; margin-block-end: 1rem; }
        .int-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
        .int-card h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; margin-block-end: 0.4rem; }
        .int-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
        .int-tag { display: inline-block; margin-block-start: 0.9rem; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(34,197,94,0.1); color: #15803d; }
        .int-tag.soon { background: rgba(251,191,36,0.15); color: #92400e; }

        /* ── Office cards (contact) ── */
        .office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
        .office-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .office-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(28,20,8,0.12); }
        .office-flag { font-size: 1.6rem; margin-block-end: 0.75rem; line-height: 1; }
        .office-card h3 { font-size: 1.15rem; font-weight: 700; margin-block-end: 0.15rem; }
        .office-card .office-city { font-size: 0.82rem; color: var(--primary-deep); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-block-end: 1rem; }
        .office-card address { font-style: normal; font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin-block-end: 1rem; }
        .office-contact { display: grid; gap: 0.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
        .office-contact a { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--fg-2); text-decoration: none; font-weight: 500; }
        .office-contact a:hover { color: var(--primary-deep); }
        .office-contact svg { color: var(--primary); flex-shrink: 0; }

        /* ── Legal / prose ── */
        .prose-wrap { max-width: 820px; margin: 0 auto; }
        .prose { font-size: 1rem; color: var(--fg-2); line-height: 1.75; }
        .prose h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-block: 2.5rem 0.85rem; color: var(--fg); }
        .prose h3 { font-size: 1.15rem; font-weight: 700; margin-block: 1.75rem 0.6rem; color: var(--fg); }
        .prose p { margin-block-end: 1.1rem; }
        .prose ul { margin: 0 0 1.1rem 1.25rem; display: grid; gap: 0.5rem; }
        .prose li { padding-inline-start: 0.25rem; }
        .prose a { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 2px; }
        .prose strong { color: var(--fg); font-weight: 600; }
        .legal-updated { display: inline-block; font-size: 0.85rem; color: var(--muted); background: var(--bg-alt); border: 1px solid var(--border); padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); margin-block-end: 2rem; }
        .legal-toc { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.6rem; margin-block-end: 2.5rem; }
        .legal-toc h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-block-end: 0.85rem; }
        .legal-toc ol { margin-inline-start: 1.1rem; display: grid; gap: 0.4rem; }
        .legal-toc a { color: var(--fg-2); text-decoration: none; font-size: 0.92rem; }
        .legal-toc a:hover { color: var(--primary-deep); }

        /* ── Footer badge ── */
        .footer-badge { margin-block-start: 1.4rem; }
        .footer-badge img { height: 64px; width: auto; display: block; border-radius: 8px; }

        /* ── Support cards / channels ── */
        .support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
        .support-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s; }
        .support-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(28,20,8,0.12); border-color: var(--primary); }
        .support-card .icard-ic { margin: 0 auto 1.1rem; }

        /* ── Section intro helper ── */
        .center-narrow { max-width: 680px; margin: 0 auto 3.5rem; text-align: center; }

        /* ── Extra responsive ── */
        @media (max-width: 1024px) {
            .split { grid-template-columns: 1fr; gap: 2.5rem; }
            .split.reverse .split-media { order: 0; }
            .int-grid { grid-template-columns: repeat(2, 1fr); }
            .office-grid { grid-template-columns: 1fr 1fr; }
            .cards-3, .support-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
            .stat-band { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .dropdown-menu { position: static; transform: none; box-shadow: none; border: none; min-width: 0; padding: 0; background: transparent; opacity: 1; visibility: visible; }
            .dropdown-menu a { padding: 0.6rem 1rem; }
            .dropdown-ic { display: none; }
            .office-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 600px) {
            .int-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
            .clients-grid { gap: 1rem 1.25rem; }
        }

        /* ── Brand logo image (sunEats), swaps with header state ── */
        .brand-logo { height: 26px; width: auto; display: block; }
        .brand-logo-dark { display: none; }                       /* top of page: dark bg → show light logo */
        .header.scrolled .brand-logo-light { display: none; }
        .header.scrolled .brand-logo-dark { display: block; }     /* scrolled: white bg → show dark logo */
        .footer-brand .brand-logo { height: 28px; }
        .footer-brand .brand-logo-light { display: block; }       /* footer: dark bg → light logo */
        .footer-brand .brand-logo-dark { display: none; }
        @media (max-width: 480px) { .brand-logo { height: 22px; } .footer-brand .brand-logo { height: 24px; } }

        /* ═══════════ REFINEMENTS (design polish pass) ═══════════ */

        /* #7 — remove the muddy gradient fade at the bottom of heroes; use a clean edge */
        .hero::after, .page-hero::after { content: none !important; }

        /* Display font sits a touch looser at large sizes (Bricolage) */
        .hero h1, .page-hero h1, .cr-title, .cta-band h2, .contact-text h2 { letter-spacing: -0.03em; }
        .section-title { letter-spacing: -0.025em; }
        .brand-name { font-family: var(--font-display); }

        /* Warmer, more dimensional primary button */
        .btn-primary { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-deep) 100%); box-shadow: 0 6px 22px -6px rgba(234, 88, 12, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
        .btn-primary:hover { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 60%, var(--primary) 100%); box-shadow: 0 10px 30px -8px rgba(234, 88, 12, 0.6), inset 0 1px 0 rgba(255,255,255,0.3); }

        /* #1 — footer payment badge: minimized + muted so it reads as a subtle "accepted payments" mark */
        .footer-badge { margin-block-start: 1.6rem; opacity: 0.42; transition: opacity var(--transition); }
        .footer-badge:hover { opacity: 0.7; }
        .footer-badge img { height: 24px; width: auto; display: block; filter: grayscale(1) brightness(1.4); }

        /* Slightly crisper card + panel shadows, warm-toned */
        .icard:hover, .int-card:hover, .office-card:hover, .support-card:hover, .feat-cell:hover { box-shadow: 0 16px 40px -14px rgba(40, 25, 8, 0.16); }

        /* Contact page: hero that contains the demo form */
        .contact-hero { padding-block-start: clamp(7rem, 13vw, 9.5rem); }
        .contact-hero .contact-text h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.08; }

        /* ═══════════ Segments marquee (replaces chip row) ═══════════ */
        .marquee-strip { padding-block: clamp(2.75rem, 6vw, 4.25rem); background: var(--bg); border-block-end: 1px solid var(--border); overflow: hidden; }
        .marquee-kicker { text-align: center; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-block-end: 1.9rem; }
        .marquee-kicker .accent { color: var(--primary-deep); }
        .marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
        .marquee-track { display: flex; align-items: center; gap: 2.25rem; width: max-content; animation: mq 40s linear infinite; }
        .marquee-strip:hover .marquee-track { animation-play-state: paused; }
        .mq-word { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.9rem); letter-spacing: -0.02em; color: var(--fg); white-space: nowrap; }
        .mq-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(249,115,22,0.16); flex-shrink: 0; }
        @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 1rem; } .marquee { mask-image: none; -webkit-mask-image: none; } }

        /* ═══════════ Clients logo wall (real restaurant logos) ═══════════ */
        .logos-strip-inner .section-eyebrow { margin-block-end: 0.9rem; }
        .logos-strip h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); color: var(--fg); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; margin-block-end: 0.6rem; }
        .logos-sub { color: var(--muted); font-size: 1rem; max-width: 40em; margin: 0 auto 2.75rem; }
        .client-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 1000px; margin: 0 auto; }
        .client-wall .client-logo { flex: 0 0 auto; width: 176px; height: 96px; display: flex; align-items: center; justify-content: center; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); filter: grayscale(1); opacity: 0.72; transition: filter var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition); }
        .client-wall .client-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(40, 25, 8, 0.22); }
        .client-wall .client-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
        @media (max-width: 600px) { .client-wall .client-logo { width: 44%; height: 78px; padding: 12px 16px; } }

        /* ═══════════ Kicker / eyebrow redesign — de-slop ═══════════ */
        /* One editorial voice for all kickers: monospace, tracked, tiny diamond marker.
           No glossy pills, no glowing dots. */

        /* Eyebrow on dark backgrounds (hero / page-hero / contact hero) */
        .hero-eyebrow { background: none; border: none; padding: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.66); gap: 0.65rem; }
        .hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 1.5px; background: var(--amber); transform: rotate(45deg); box-shadow: none; }

        /* Eyebrow on light sections */
        .section-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.17em; color: var(--primary-deep); gap: 0.6rem; }
        .section-eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--primary); transform: rotate(45deg); border-radius: 1.5px; }
        .section-header.center .section-eyebrow::after,
        .replace-v1-header .section-eyebrow::after,
        .replace-v2-header .section-eyebrow::after { content: none; }

        /* Marquee kicker → mono to match */
        .marquee-kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.17em; }

        /* Pricing trial note → inline mono line, no pill */
        .pricing-trial-note { background: none; border: none; padding: 0; border-radius: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: #15803d; font-weight: 600; gap: 0.5rem; }

        /* Kicker marker → full sun (masked so it tints per context) */
        .hero-eyebrow .dot,
        .section-eyebrow::before { content: ''; width: 15px; height: 15px; border-radius: 0; transform: none; box-shadow: none; -webkit-mask: url("sun.svg") center / contain no-repeat; mask: url("sun.svg") center / contain no-repeat; }
        .hero-eyebrow .dot { background-color: var(--amber); }
        .section-eyebrow::before { background-color: var(--primary); }

        /* Sun marker via background-image (robust — masks rendered empty in Chrome) */
        .hero-eyebrow .dot { -webkit-mask: none; mask: none; background: url("sun-gold.svg") center / contain no-repeat; }
        .section-eyebrow::before { -webkit-mask: none; mask: none; background: url("sun-orange.svg") center / contain no-repeat; }