.trust-bar {
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 1.1rem 0;
        overflow: hidden;
    }
    .trust-inner {
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 2rem;
        display: flex;
        align-items: center;
        gap: 2.5rem;
    }
    .trust-label {
        font-size: 0.67rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--text-muted);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .marquee-wrapper {
        overflow: hidden;
        flex: 1;
        mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }
    .marquee-track {
        display: flex;
        gap: 0;
        width: max-content;
        animation: marquee 30s linear infinite;
        will-change: transform;
    }
    .marquee-item {
        display: flex;
        align-items: center;
        gap: 0;
        white-space: nowrap;
    }
    .marquee-item span {
        font-size: 0.8rem;
        color: var(--text-dim);
        padding: 0 1.4rem;
    }
    .marquee-dot {
        color: var(--gold-muted);
        font-size: 0.5rem;
        opacity: 0.6;
    }
    @keyframes marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    /* ── Section scaffolding ───────────────────────────────────────── */
    .section-inner {
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 2rem;
    }
    .section-header { text-align: center; margin-bottom: 3.5rem; }
    .section-eyebrow {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 0.85rem;
    }
    .section-title {
        font-family: 'Amiri', serif;
        font-size: clamp(1.9rem, 3.5vw, 2.6rem);
        font-weight: 700;
        color: var(--text);
        line-height: 1.15;
        margin-bottom: 1rem;
        letter-spacing: -0.01em;
    }
    .section-title em { font-style: italic; color: var(--gold-light); }
    .section-sub {
        font-size: 1rem;
        color: var(--text-dim);
        max-width: 520px;
        margin: 0 auto;
        line-height: 1.75;
    }

    /* ── Dictionaries ──────────────────────────────────────────────── */
    #dictionaries {
        padding: clamp(5rem, 9vw, 8rem) 0;
        background: var(--bg);
    }
    .dicts-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    .dict-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 2.5rem 2rem;
        position: relative;
        overflow: hidden;
        transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .dict-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
    }
    .dict-card.premium::before {
        background: linear-gradient(to right, var(--gold-muted), var(--gold), var(--gold-muted));
    }
    .dict-card.premium {
        border-color: var(--gold-border);
        box-shadow: 0 0 40px var(--gold-glow);
    }
    .dict-card.premium:hover {
        box-shadow: 0 0 60px rgba(201,168,76,0.22);
        transform: translateY(-3px);
    }
    .dict-card.free::before {
        background: rgba(74,124,89,0.5);
    }
    .dict-card.free:hover {
        border-color: var(--border-mid);
        transform: translateY(-2px);
    }
    .dict-arabic-label {
        font-family: 'Amiri', serif;
        font-size: 3.5rem;
        line-height: 1;
        margin-bottom: 1rem;
        direction: rtl;
    }
    .dict-card.premium .dict-arabic-label { color: rgba(201,168,76,0.22); }
    .dict-card.free .dict-arabic-label { color: rgba(240,237,228,0.1); }
    .dict-badge {
        display: inline-flex;
        align-items: center;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 0.22rem 0.75rem;
        border-radius: 999px;
        margin-bottom: 1rem;
    }
    .dict-badge.premium {
        background: var(--gold);
        color: #0a0800;
    }
    .dict-badge.free {
        border: 1px solid rgba(74,124,89,0.6);
        color: #7aae8a;
        background: rgba(74,124,89,0.08);
    }
    .dict-name {
        font-family: 'Amiri', serif;
        font-size: 1.5rem;
        color: var(--text);
        margin-bottom: 0.3rem;
        font-weight: 700;
    }
    .dict-author {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
        letter-spacing: 0.03em;
    }
    .dict-desc {
        font-size: 0.88rem;
        color: var(--text-dim);
        line-height: 1.7;
    }
    .dict-stat {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
        font-size: 0.72rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    /* ── Cinematic Divider ─────────────────────────────────────────── */
    .scene-divider {
        position: relative;
        height: 360px;
        overflow: hidden;
    }
    .scene-divider-bg {
        position: absolute;
        top: -30%;
        bottom: -30%;
        left: 0;
        right: 0;
        background-image: url('/static/assets/section-divider.webp');
        background-size: cover;
        background-position: center;
        opacity: 0.55;
        will-change: transform;
    }
    .scene-divider-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(3,3,3,0.9) 0%,
            rgba(3,3,3,0.3) 30%,
            rgba(3,3,3,0.3) 70%,
            rgba(3,3,3,0.9) 100%
        );
    }
    .scene-divider-ornament {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 100px; height: 100px;
        opacity: 0.25;
    }
    .scene-divider-ornament img {
        width: 100%; height: 100%;
        object-fit: contain;
    }
    .scene-divider-ornament-fallback {
        font-family: 'Amiri', serif;
        font-size: 4rem;
        color: var(--gold-muted);
        text-align: center;
        line-height: 1;
    }

    /* ── Product Demo ──────────────────────────────────────────────── */
    #demo {
        padding: clamp(5rem, 9vw, 8rem) 0;
        background: var(--surface);
    }
    .device-wrap {
        max-width: 900px;
        margin: 0 auto;
    }
    .device-mockup {
        border-radius: 14px 14px 0 0;
        border: 2px solid #252525;
        border-bottom: none;
        background: #0a0a0a;
        padding: 10px 10px 0;
        box-shadow:
            0 40px 80px rgba(0,0,0,0.8),
            0 0 0 1px rgba(255,255,255,0.04);
        overflow: hidden;
    }
    .device-screen {
        border-radius: 6px 6px 0 0;
        overflow: hidden;
        background: #050505;
        aspect-ratio: 16/9;
    }
    .device-screen video {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 6px 6px 0 0;
        object-fit: cover;
    }
    .device-base {
        height: 20px;
        background: linear-gradient(to bottom, #1e1e1e, #141414);
        border: 2px solid #252525;
        border-top: none;
    }
    .device-stand-wrap {
        display: flex;
        justify-content: center;
    }
    .device-stand {
        width: 32%;
        height: 14px;
        background: #111;
        border: 2px solid #222;
        border-top: none;
        border-radius: 0 0 8px 8px;
    }
    .demo-caption {
        text-align: center;
        margin-top: 2.5rem;
        font-size: 0.85rem;
        font-style: italic;
        color: var(--text-muted);
        line-height: 1.7;
    }
    /* Mobile video fallback */
    .demo-mobile-video {
        display: none;
        border-radius: 20px;
        overflow: hidden;
        border: 2px solid #252525;
        max-width: 300px;
        margin: 0 auto;
        box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    }
    .demo-mobile-video { aspect-ratio: 9/16; }
    .demo-mobile-video video { width: 100%; height: 100%; display: block; object-fit: cover; }

    /* ── Features ──────────────────────────────────────────────────── */
    #features {
        padding: clamp(5rem, 9vw, 8rem) 0;
        background: var(--bg);
    }
    .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        max-width: 900px;
        margin: 0 auto;
    }
    .feature-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 2rem 1.5rem;
        text-align: center;
        transition: border-color 0.25s, transform 0.25s;
    }
    .feature-card:hover {
        border-color: var(--gold-border);
        transform: translateY(-2px);
    }
    .feature-icon-wrap {
        width: 52px;
        height: 52px;
        margin: 0 auto 1.25rem;
        position: relative;
    }
    .feature-icon-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .feature-icon-fallback {
        width: 52px;
        height: 52px;
        border-radius: 10px;
        background: var(--gold-glow);
        border: 1px solid rgba(201,168,76,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--gold);
    }
    .feature-title {
        font-family: 'Amiri', serif;
        font-size: 1.15rem;
        color: var(--text);
        margin-bottom: 0.5rem;
        font-weight: 700;
    }
    .feature-desc {
        font-size: 0.85rem;
        color: var(--text-dim);
        line-height: 1.7;
    }

    /* ── Pricing ───────────────────────────────────────────────────── */
    #pricing {
        padding: clamp(5rem, 9vw, 8rem) 0;
        background: var(--surface);
    }
    .pricing-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        max-width: 740px;
        margin: 0 auto;
    }
    .price-card {
        border-radius: 20px;
        padding: 2.5rem 2rem;
        border: 1px solid var(--border-mid);
        background: var(--elevated);
        position: relative;
    }
    .price-card.highlighted {
        border-color: var(--gold-border);
        background: linear-gradient(145deg, rgba(201,168,76,0.04) 0%, var(--elevated) 60%);
        box-shadow: 0 0 50px var(--gold-glow), 0 20px 40px rgba(0,0,0,0.5);
    }
    .price-popular {
        position: absolute;
        top: -13px; left: 50%;
        transform: translateX(-50%);
        background: var(--gold);
        color: #000;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 4px 14px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .price-name {
        font-family: 'Amiri', serif;
        font-size: 1.5rem;
        color: var(--text);
        margin-bottom: 0.6rem;
        font-weight: 700;
    }
    .price-amount-row {
        display: flex;
        align-items: baseline;
        gap: 0.2rem;
        margin-bottom: 0.4rem;
    }
    .price-curr { font-size: 1.2rem; color: var(--text-dim); font-weight: 300; }
    .price-num {
        font-family: 'Amiri', serif;
        font-size: 3.2rem;
        color: var(--text);
        line-height: 1;
        font-weight: 400;
    }
    .price-period { font-size: 0.82rem; color: var(--text-muted); }
    .price-annual {
        font-size: 0.75rem;
        color: var(--gold-muted);
        margin-bottom: 1.5rem;
    }
    .price-annual a { color: var(--gold-muted); text-decoration: underline; text-underline-offset: 2px; }
    .price-desc {
        font-size: 0.85rem;
        color: var(--text-dim);
        line-height: 1.65;
        margin-bottom: 1.5rem;
    }
    .price-features { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 2rem; }
    .price-feature {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.84rem;
        color: var(--text-dim);
    }
    .price-check { color: var(--gold); font-size: 0.75rem; flex-shrink: 0; }
    .price-check.dim { color: var(--text-muted); }
    .price-feature.dim { color: var(--text-muted); }
    .price-cta {
        display: block;
        width: 100%;
        padding: 12px;
        text-align: center;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
        border: none;
        letter-spacing: -0.01em;
    }
    .price-cta.primary {
        background: var(--gold);
        color: #0a0800;
    }
    .price-cta.primary:hover {
        background: var(--gold-light);
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(201,168,76,0.3);
    }
    .price-cta.secondary {
        background: transparent;
        color: var(--text-dim);
        border: 1px solid var(--border-mid);
    }
    .price-cta.secondary:hover {
        border-color: var(--border-mid);
        color: var(--text);
        background: var(--surface);
    }

    /* ── Final CTA ─────────────────────────────────────────────────── */
    #cta-section {
        padding: clamp(5rem, 10vw, 9rem) 0;
        background: var(--bg);
        position: relative;
        overflow: hidden;
        text-align: center;
    }
    .cta-ornament-bg {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        width: min(500px, 40vw);
        opacity: 0.05;
        pointer-events: none;
        user-select: none;
    }
    .cta-ornament-bg img { width: 100%; height: 100%; object-fit: contain; }
    .cta-ornament-bg-fallback {
        font-family: 'Amiri', serif;
        font-size: clamp(8rem, 20vw, 18rem);
        color: var(--gold-muted);
        line-height: 1;
    }
    .cta-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(201,168,76,0.05) 0%, transparent 70%);
        pointer-events: none;
    }
    .cta-inner {
        position: relative;
        z-index: 1;
        max-width: 560px;
        margin: 0 auto;
        padding: 0 2rem;
    }
    .cta-headline {
        font-family: 'Amiri', serif;
        font-size: clamp(2rem, 4vw, 3rem);
        color: var(--text);
        line-height: 1.2;
        margin-bottom: 1rem;
        font-weight: 700;
    }
    .cta-sub {
        font-size: 1rem;
        color: var(--text-dim);
        line-height: 1.75;
        margin-bottom: 2.5rem;
    }
    .cta-google {
        max-width: 340px;
        margin: 0 auto;
    }
    .cta-footnote {
        margin-top: 1rem;
        font-size: 0.72rem;
        color: var(--text-muted);
    }

    /* ── Footer ────────────────────────────────────────────────────── */
    footer {
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding: 2rem;
    }
    .footer-inner {
        max-width: 1160px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .footer-logo {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        font-family: 'Amiri', serif;
        font-size: 1rem;
        color: var(--text-muted);
    }
    .footer-logo img { width: 20px; height: 20px; opacity: 0.5; }
    .footer-copy { font-size: 0.72rem; color: var(--text-muted); }
    .footer-links { display: flex; gap: 1.5rem; }
    .footer-links a {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--text-dim); }

    /* ── Animations ────────────────────────────────────────────────── */
    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    .animate-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .animate-on-scroll.delay-1 { transition-delay: 0.08s; }
    .animate-on-scroll.delay-2 { transition-delay: 0.16s; }
    .animate-on-scroll.delay-3 { transition-delay: 0.24s; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
        .animate-on-scroll { opacity: 1; transform: none; }
        .hero-eyebrow, .hero-headline, .hero-subhead, .hero-stats, .hero-copy-top, .hero-copy-bottom, #auth { opacity: 1; }
    }

    /* ── Responsive ────────────────────────────────────────────────── */
    @media (max-width: 1024px) {
        .hero-content { grid-template-columns: 1fr; gap: 1.5rem; }
        .hero-copy-top    { grid-column: 1; grid-row: 1; }
        .hero-copy-bottom { grid-column: 1; grid-row: 2; }
        #auth { grid-column: 1; grid-row: 3; max-width: 420px; width: 100%; }
        .dicts-grid { grid-template-columns: 1fr; gap: 1rem; }
        .features-grid { grid-template-columns: 1fr; max-width: 100%; gap: 0.75rem; }
        .calli-1, .calli-2, .calli-3 { display: none; }
    }

    @media (max-width: 768px) {
        /* Hero: headline → auth → description */
        .hero-content {
            padding: 5rem 1.25rem 2.5rem;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            gap: 1.25rem;
        }
        .hero-copy-top    { grid-column: 1; grid-row: 1; padding-bottom: 0; }
        .hero-copy-bottom { grid-column: 1; grid-row: 3; }
        #auth             { grid-column: 1; grid-row: 2; max-width: 100%; }
        .hero-eyebrow { display: none; }
        .hero-subhead { font-size: 0.9rem; margin-bottom: 0; }
        .hero-stats { display: none; }

        /* Google button — compact, consistent everywhere */
        .google-btn { font-size: 0.85rem; padding: 11px 18px; }
        .google-btn img { width: 16px; height: 16px; }

        /* CTA section button — constrained width, centered */
        .cta-google { max-width: 280px; width: 100%; padding: 0; }
        .cta-inner { padding: 0 1.5rem; }
        .cta-headline { font-size: 1.7rem; }
        .cta-sub { font-size: 0.88rem; margin-bottom: 1.75rem; }

        /* Trust */
        .trust-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

        /* Pricing */
        .pricing-grid { grid-template-columns: 1fr; max-width: 100%; margin: 0; }
        .price-card { padding: 2rem 1.5rem; }

        /* Features */
        .features-grid { grid-template-columns: 1fr; gap: 0.75rem; }

        /* Divider scene */
        .scene-divider { height: 180px; }

        /* Product demo */
        .device-wrap .device-mockup,
        .device-wrap .device-base,
        .device-wrap .device-stand-wrap { display: none; }
        .demo-mobile-video { display: block; }

        /* Section spacing */
        #dictionaries, #demo, #features, #pricing, #cta-section { padding: 3.5rem 1.25rem; }
        .section-inner { padding: 0; }
        .section-title { font-size: 1.8rem; }
        .section-sub { font-size: 0.88rem; }

        /* Footer */
        .footer-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    }

    @media (max-width: 420px) {
        .hero-headline { font-size: 2.1rem; }
        .features-grid { grid-template-columns: 1fr; gap: 0.75rem; }
        .auth-card { padding: 1.5rem 1.25rem; }
        .dict-card { padding: 1.75rem 1.25rem; }
    }

    /* ── Mobile: disable expensive effects ──────────────────────── */
    @media (max-width: 768px) {
        .auth-card {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: rgba(13,13,13,0.96);
        }
        #main-nav.scrolled {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: rgba(3,3,3,0.97);
        }
    }