/* ============================================================
   FinBee — Marketing Landing Page
   Same brand tokens as the product (navy #162940 / gold #DFAB50 /
   ivory #F7F3EC), reused deliberately so the jump from this page
   into the real app (/app) feels seamless, not like a different
   product. The honeycomb motif ties the visual language directly
   to the "Bee" in FinBee without leaning on cute mascot overload.
   ============================================================ */
:root {
    --bg-page: #ffffff;
    --bg-main: #f7f3ec;
    --bg-sidebar: #162940;
    --bg-card: #ffffff;
    --border-card: #e7e0cf;
    --border-card-hover: rgba(223, 171, 80, 0.35);

    --text-primary: #162940;
    --text-secondary: #55677a;
    --text-muted: #8996a3;

    --color-primary: #dfab50;
    --color-primary-deep: #c2913d;
    --color-primary-light: #faf1de;
    --color-on-primary: #162940;
    --color-profit: #1f8a5f;
    --color-margin: #af5a2e;
    --color-runway: #3f6f98;
    --color-warning: #c0392b;

    /* Apple design guidance: default to the platform's own system font
       before a custom face. Same stack as the product app (styles.css) so
       the jump from this page into /app carries the same typographic
       voice. Display headings reuse the same family at larger size/weight/
       tighter tracking rather than pairing a separate serif. This stack
       also already has solid native Arabic coverage on every platform (San
       Francisco/Segoe UI/Roboto all ship Arabic glyphs), so no separate
       Cairo webfont or RTL override is needed anymore. */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 1px 3px rgba(15,20,30,0.06), 0 1px 2px rgba(15,20,30,0.03);
    --shadow-hover: 0 8px 20px -4px rgba(15,20,30,0.12), 0 3px 8px -2px rgba(15,20,30,0.06);
    --shadow-lift: 0 24px 60px -12px rgba(22,41,64,0.22);
    --radius: 12px;
    --radius-lg: 20px;
    --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* prefers-reduced-motion handling lives in motion.css (shared with app.html)
   — a single consolidated rule instead of two competing ones. */

body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-optical-sizing: auto; /* the system font (-apple-system/San Francisco) auto-switches Text/Display optical sizing by point size in WebKit; harmless no-op on stacks that don't support it */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Arabic typography (RTL)
   Arabic is a connected/cursive script — adjacent letters within a word
   join into a single form. Any letter-spacing, positive or negative,
   forces those joins apart and reads as broken rather than refined; the
   negative tracking on the large Latin display headings below and the
   positive tracking on uppercase Latin "eyebrow" labels both actively
   damage Arabic legibility. Neutralize tracking everywhere under RTL in
   one place rather than chasing every individual selector.
   Leading also loosens for RTL: Arabic's diacritics and taller letterforms
   need more vertical room than the tightly-set Latin display headings
   below give them (hero-copy h1 alone runs as tight as line-height 1.08). */
html[dir="rtl"] * {
    letter-spacing: normal !important;
}
html[dir="rtl"] body {
    line-height: 1.65;
}
html[dir="rtl"] .hero-copy h1,
html[dir="rtl"] .coverage-head h2,
html[dir="rtl"] .section-head h2,
html[dir="rtl"] .final-cta h2 {
    line-height: 1.4;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
section { scroll-margin-top: calc(var(--nav-h) + 12px); }
.container { max-width: 1180px; margin: 0 auto; padding-inline: 1.75rem; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: #d9c9a3; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-deep); }

/* ============================================================
   Shared decorative honeycomb texture — used as a faint background
   layer behind the hero and features sections. Pure CSS gradients,
   no image request.
   ============================================================ */
.hex-texture {
    background-color: transparent;
    background-image:
        radial-gradient(circle farthest-side at 0% 50%, transparent 23.5%, rgba(223,171,80,0.16) 24%, rgba(223,171,80,0.16) 26%, transparent 26.5%, transparent),
        radial-gradient(circle farthest-side at 0% 50%, transparent 23.5%, rgba(223,171,80,0.16) 24%, rgba(223,171,80,0.16) 26%, transparent 26.5%, transparent),
        linear-gradient(rgba(223,171,80,0.16) 3px, transparent 3px),
        linear-gradient(rgba(223,171,80,0.16) 3px, transparent 3px),
        linear-gradient(90deg, transparent 3px, transparent 3px);
    background-size: 64px 111px, 64px 111px, 64px 111px, 64px 111px, 64px 111px;
    background-position: 0 0, 32px 55.5px, 0 0, 32px 55.5px, 0 0;
}
.hex-texture.on-dark {
    background-image:
        radial-gradient(circle farthest-side at 0% 50%, transparent 23.5%, rgba(255,255,255,0.06) 24%, rgba(255,255,255,0.06) 26%, transparent 26.5%, transparent),
        radial-gradient(circle farthest-side at 0% 50%, transparent 23.5%, rgba(255,255,255,0.06) 24%, rgba(255,255,255,0.06) 26%, transparent 26.5%, transparent),
        linear-gradient(rgba(255,255,255,0.06) 3px, transparent 3px),
        linear-gradient(rgba(255,255,255,0.06) 3px, transparent 3px);
    background-size: 64px 111px, 64px 111px, 64px 111px, 64px 111px;
    background-position: 0 0, 32px 55.5px, 0 0, 32px 55.5px;
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--d, 0s); }
.reveal.in-view { opacity: 1; transform: none; }

/* ============================================================
   Buttons & pills
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font); font-size: 0.95rem; font-weight: 700; padding: 0.85rem 1.6rem; border-radius: 999px; border: none; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 10px 24px -8px rgba(223,171,80,0.55); }
.btn-primary:hover { background: var(--color-primary-deep); transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(223,171,80,0.65); }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-card); }
.btn-ghost:hover { border-color: var(--border-card-hover); background: var(--color-primary-light); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-ghost.on-dark:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }
.btn svg { width: 18px; height: 18px; }


/* ============================================================
   Nav
   ============================================================ */
.site-nav {
    position: fixed; inset-inline: 0; top: 0; z-index: 500;
    height: var(--nav-h);
    display: flex; align-items: center;
    background: var(--bg-sidebar);
    box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 12px 24px -18px rgba(0,0,0,0.35);
    transition: box-shadow 0.25s ease, height 0.25s ease;
}
.site-nav.scrolled { height: 68px; box-shadow: 0 1px 0 rgba(0,0,0,0.18), 0 16px 30px -16px rgba(0,0,0,0.45); }
.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.nav-logo-chip { height: 30px; width: auto; display: block; }
.footer-brand .nav-logo-chip { height: 38px; }
.nav-links { display: flex; align-items: center; gap: 2.1rem; }
.nav-links a { font-size: 0.92rem; font-weight: 600; color: rgba(245,247,243,0.72); transition: var(--transition); position: relative; }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-signin { font-size: 0.9rem; font-weight: 700; color: #fff; padding: 0.6rem 0.4rem; }
.nav-signin:hover { color: var(--color-primary); }

.lang-toggle-btn {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.22);
    color: rgba(245,247,243,0.75);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}
.lang-toggle-btn:hover { border-color: rgba(255,255,255,0.42); color: #fff; background: rgba(255,255,255,0.08); }

.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: var(--transition); }
/* display:none is the resting state; FinMotion.crossfade (landing.js) owns
   the open/close swap via inline style, so no ".open { display }" rule is
   needed here — the "open" class exists only for bookkeeping. */
.mobile-menu { display: none; position: fixed; top: var(--nav-h); inset-inline: 0; background: var(--bg-sidebar); box-shadow: var(--shadow-hover); padding: 1.25rem 1.75rem 1.75rem; z-index: 499; flex-direction: column; gap: 1rem; }
.mobile-menu a { font-weight: 700; font-size: 1rem; padding: 0.4rem 0; color: #fff; }
.mobile-menu .mobile-cta-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.mobile-menu .mobile-cta-row .btn { flex: 1; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    padding-top: calc(var(--nav-h) + 3.5rem);
    padding-bottom: 5rem;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--bg-page) 62%);
}
.hero::before { content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none; }
.hero .hex-texture { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%); mask-image: linear-gradient(180deg, #000 0%, transparent 82%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
.hero-copy h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 3.6vw, 3.4rem); line-height: 1.08; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.hero-copy h1 .hl { color: var(--color-margin); }
.hero-copy p.lead { font-size: 1.12rem; line-height: 1.6; color: var(--text-secondary); max-width: 46ch; margin-bottom: 2rem; }
.hero-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.hero-micro { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; margin-bottom: 2.4rem; }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.hero-stat { background: rgba(255,255,255,0.6); border: 1px solid var(--border-card); border-radius: 14px; padding: 0.9rem 0.6rem; text-align: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-stat .num { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.hero-stat .lbl { display: block; font-size: 0.68rem; color: var(--text-secondary); font-weight: 600; margin-top: 0.15rem; line-height: 1.25; }

/* Hero visual: framed screenshot with 3D tilt + floating micro-cards */
.hero-visual { position: relative; perspective: 1400px; }
/* No CSS transition here on purpose — the tilt is spring-driven from
   landing.js (per-frame rAF writes), and a CSS transition stacked on top
   would double-ease against those writes. */
.hero-frame-wrap { transform-style: preserve-3d; will-change: transform; }
.hero-frame {
    border-radius: 16px; overflow: hidden; background: #fff;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-lift);
}
.hero-frame .chrome { display: flex; gap: 6px; padding: 10px 14px; background: #edeee8; }
.hero-frame .chrome span { width: 9px; height: 9px; border-radius: 50%; background: #d3d6cd; }
.hero-frame img { display: block; width: 100%; height: auto; }

.float-card {
    position: absolute;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    box-shadow: var(--shadow-hover);
    padding: 0.7rem 0.95rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: floaty 5s ease-in-out infinite;
}
.float-card .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.float-card.f1 { top: -6%; inset-inline-start: -8%; animation-delay: 0s; }
.float-card.f1 .dot { background: var(--color-profit); }
.float-card.f2 { bottom: 10%; inset-inline-end: -9%; animation-delay: 1.4s; }
.float-card.f2 .dot { background: var(--color-warning); }
.float-badge {
    position: absolute; bottom: -7%; inset-inline-start: 6%;
    width: 64px; height: 64px; border-radius: 50%; background: #fff;
    border: 1px solid var(--border-card); box-shadow: var(--shadow-hover);
    display: flex; align-items: center; justify-content: center;
    animation: floaty 6s ease-in-out infinite; animation-delay: 0.7s;
}
.float-badge img { width: 38px; height: auto; }

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

/* ============================================================
   Coverage marquee band
   ============================================================ */
.coverage-band { position: relative; background: var(--bg-sidebar); color: #fff; padding: 4rem 0 4.5rem; overflow: hidden; }
.coverage-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; position: relative; }
.coverage-head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
.coverage-head p { color: rgba(245,247,243,0.62); font-size: 0.95rem; }
.marquee-viewport { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.country-chip {
    display: flex; align-items: center; gap: 0.7rem;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px; padding: 0.75rem 1.35rem; white-space: nowrap;
}
.country-chip .flag { font-size: 1.3rem; }
.country-chip .name { font-weight: 700; font-size: 0.92rem; }
.country-chip .cur { color: rgba(245,247,243,0.5); font-size: 0.8rem; margin-inline-start: 0.15rem; }
.country-chip .status { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; margin-inline-start: 0.35rem; }
.country-chip .status.live { background: rgba(31,138,95,0.22); color: #6fdba8; }
.country-chip .status.soon { background: rgba(255,255,255,0.1); color: rgba(245,247,243,0.55); }

/* ============================================================
   Features — honeycomb icon badges
   ============================================================ */
.features { padding: 6.5rem 0; position: relative; }
.section-head { max-width: 620px; margin-bottom: 3.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.018em; color: var(--text-primary); margin-bottom: 0.75rem; }
.section-head p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.55; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.feature-card {
    background: #fff; border: 1px solid var(--border-card); border-radius: var(--radius-lg);
    padding: 2rem 1.75rem; box-shadow: var(--shadow); transition: var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-card-hover); transform: translateY(-4px); }
.feature-card:nth-child(2n) { transform: translateY(1.4rem); }
.feature-card:nth-child(2n):hover { transform: translateY(1.4rem) translateY(-4px); }
.hex-icon {
    width: 60px; height: 60px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.4rem;
}
.hex-icon svg { width: 26px; height: 26px; color: var(--color-on-primary); }
.feature-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }

/* ============================================================
   How it works — connected timeline
   ============================================================ */
.how-it-works { padding: 6.5rem 0; background: var(--bg-main); }
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; position: relative; }
.steps-connector { position: absolute; top: 34px; inset-inline: 12%; height: 2px; z-index: 0; }
.steps-connector svg { width: 100%; height: 2px; display: block; overflow: visible; }
.steps-connector path { stroke: var(--color-primary); stroke-width: 2; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1); }
.steps-connector.in-view path { stroke-dashoffset: 0; }
.step-card { position: relative; z-index: 1; text-align: center; }
.step-num {
    width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 1.25rem;
    background: #fff; border: 2px solid var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-margin);
    box-shadow: var(--shadow-hover);
}
.step-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.55rem; color: var(--text-primary); }
.step-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; max-width: 30ch; margin-inline: auto; }

/* ============================================================
   Comparison band
   ============================================================ */
.compare { padding: 6.5rem 0; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-top: 1rem; }
.compare-col { border-radius: var(--radius-lg); padding: 2.25rem; }
.compare-col.old { background: var(--bg-main); border: 1px solid var(--border-card); }
.compare-col.new { background: var(--bg-sidebar); color: #fff; box-shadow: var(--shadow-lift); position: relative; overflow: hidden; }
.compare-col.new::before { content: ""; position: absolute; inset: 0; opacity: 0.5; }
.compare-col h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 1.4rem; position: relative; }
.compare-col.old h4 { color: var(--text-muted); }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.compare-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.92rem; line-height: 1.5; }
.compare-col.old .compare-list li { color: var(--text-secondary); }
.compare-list .mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; margin-top: 0.1rem; }
.compare-col.old .mark { background: #ece4d3; color: var(--text-muted); }
.compare-col.new .mark { background: var(--color-primary); color: var(--color-on-primary); }

/* ============================================================
   Pricing — single plan + trial (see .compare-col.new above, same
   dark-navy/gold "obvious pick" treatment, but one centered card since
   there's nothing to compare against — everything's included either way,
   just gated by trial days vs. an active subscription).
   ============================================================ */
.pricing { padding: 6.5rem 0; }
.pricing-card {
    max-width: 480px; margin: 2.5rem auto 0; border-radius: var(--radius-lg);
    background: var(--bg-sidebar); color: #fff; box-shadow: var(--shadow-lift);
    position: relative; overflow: hidden;
}
.pricing-card .hex-texture { position: absolute; inset: 0; opacity: 0.5; }
.pricing-card-inner { position: relative; padding: 2.75rem 2.25rem 2.25rem; }
.pricing-card-head { text-align: center; margin-bottom: 1.75rem; }
.pricing-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--color-on-primary); background: var(--color-primary);
    border-radius: 999px; padding: 0.35rem 0.85rem; margin-bottom: 1rem;
}
.pricing-card-head h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.6rem; }
.pricing-amount { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
.pricing-num { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; }
.pricing-period { font-size: 0.95rem; color: rgba(245,247,243,0.65); }
.pricing-note { font-size: 0.8rem; color: rgba(245,247,243,0.55); margin-top: 0.6rem; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; line-height: 1.4; }
.pricing-features .mark {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 0.68rem; font-weight: 800; margin-top: 0.1rem;
    background: var(--color-primary); color: var(--color-on-primary);
}
.pricing-cta { width: 100%; text-align: center; justify-content: center; }

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta { position: relative; background: var(--bg-sidebar); color: #fff; padding: 6rem 0; overflow: hidden; text-align: center; }
.final-cta .hex-texture { position: absolute; inset: 0; }
.final-cta-inner { position: relative; max-width: 620px; margin: 0 auto; }
.final-cta h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1rem; }
.final-cta p { color: rgba(245,247,243,0.66); font-size: 1.05rem; margin-bottom: 2.2rem; }
.final-cta .hero-cta-row { justify-content: center; margin-bottom: 1rem; }
.final-cta .hero-micro { color: rgba(245,247,243,0.5); margin-bottom: 0; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: #0f1e30; color: rgba(245,247,243,0.7); padding: 3.5rem 0 2rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.footer-brand { max-width: 340px; }
.footer-brand .nav-logo-chip { margin-bottom: 1rem; }
.footer-brand p { font-size: 0.88rem; line-height: 1.6; color: rgba(245,247,243,0.5); }
.footer-col h5 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(245,247,243,0.85); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a { font-size: 0.88rem; color: rgba(245,247,243,0.55); transition: var(--transition); }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: rgba(245,247,243,0.45); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
    .hero-visual { max-width: 480px; margin-inline: auto; width: 100%; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-card:nth-child(2n) { transform: none; }
    .feature-card:nth-child(2n):hover { transform: translateY(-4px); }
    .steps-row { grid-template-columns: 1fr; gap: 3rem; }
    .steps-connector { display: none; }
    .compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-actions .nav-signin { display: none; }
    /* The full-width CTA is one tap away in the mobile menu already — dropping
       it from the bar itself is what stops the nav-logo chip from being
       squeezed down to nothing by flexbox shrink on narrow viewports. */
    .nav-actions .btn-primary { display: none; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .float-card { display: none; }
    .footer-grid { flex-direction: column; gap: 2rem; }
}
@media (max-width: 620px) {
    .feature-grid { grid-template-columns: 1fr; }
    .hero-cta-row .btn { flex: 1; }
    .compare-col { padding: 1.75rem 1.4rem; }
}

/* ============================================================
   RTL — logical properties above already flip most of this
   automatically; the few physical-property exceptions get a
   dedicated override here.
   ============================================================ */
html[dir="rtl"] .marquee-track { animation-direction: reverse; }