/* ==========================================================================
   FASTER 10/10 Premium Theme
   Variables & Reset (Theme Switchable)
   ========================================================================== */
:root {
    /* Default: Light Mode (Daymode) */
    --bg-color: #ffffff;
    --text-color: #050505;
    --text-muted: #666666;
    --card-bg: #f8f8f8;
    --card-inner-bg: #ffffff;
    --border-color: rgba(0, 0, 0, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --primary-color: #F97316; /* FASTER Orange */
    --primary-dark: #ea580c;
    --accent-color: #3b82f6;
    --grid-color: rgba(0, 0, 0, 0.03);
    
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-arabic: 'Tajawal', 'SF Pro AR', sans-serif;

    /* Motion tokens */
    --dur-fast: 180ms;
    --dur: 280ms;
    --dur-slow: 480ms;
    --easing: cubic-bezier(0.16, 1, 0.3, 1);      /* expressive (entrances) */
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);   /* smooth (hover/exit) */
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);    /* neutral UI */

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(249, 115, 22, 0.35);

    /* ------------------------------------------------------------------
       Unified Type Scale (SSOT) — all headings/titles pull from these.
       Clamp floors are mobile-safe so no media query overrides needed.
       Formula: clamp(mobile, fluid, desktop).
       ------------------------------------------------------------------ */
    --text-display-xl: clamp(2rem,    5vw + 0.5rem,   4.5rem);    /* hero title — 32→72px */
    --text-display-lg: clamp(1.65rem, 3.5vw + 0.3rem, 3rem);      /* section titles, cta — 26→48px */
    --text-display-md: clamp(1.35rem, 2vw + 0.5rem,   2rem);      /* promise title, feature h3 — 22→32px */
    --text-display-sm: clamp(1.1rem,  0.8vw + 0.7rem, 1.4rem);    /* card/benefit h3 — 18→22px */
    --text-display-xs: clamp(1rem,    0.5vw + 0.6rem, 1.15rem);   /* footer h4, method value — 16→18px */

    /* Metric/badge numerals (big numbers) */
    --text-stat-lg: clamp(1.75rem, 2.5vw + 0.4rem, 2.5rem);       /* metric/stat-number — 28→40px */
    --text-stat-md: clamp(1.35rem, 1.8vw + 0.3rem, 1.85rem);      /* promise-stat-number — 22→30px */

    /* Body copy */
    --text-body-lg: 1.125rem;     /* hero-desc, section-desc */
    --text-body-md: 1rem;         /* default paragraph */
    --text-body-sm: 0.9375rem;    /* card p, benefit p */
    --text-body-xs: 0.8125rem;    /* micro copy */

    /* Labels / eyebrows / caps */
    --text-eyebrow: 0.8125rem;    /* section-tag */
    --text-overline: 0.72rem;     /* metric-label, stat-label */

    /* Font weights — single source of truth */
    --weight-bold:     700;
    --weight-semibold: 600;
    --weight-medium:   500;
    --weight-regular:  400;

    /* Line heights */
    --lh-tight:    1.1;
    --lh-snug:     1.25;
    --lh-normal:   1.5;
    --lh-relaxed:  1.7;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.1em;
    --tracking-wider:  0.2em;
}

[data-theme="dark"] {
    --bg-color: #050505;
    --text-color: #ffffff;
    --text-muted: #999999;
    --card-bg: #111111;
    --card-inner-bg: #161616;
    --border-color: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(5, 5, 5, 0.8);
    --grid-color: rgba(255, 255, 255, 0.03);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    /* scroll-behavior handled by GSAP ScrollToPlugin */
}

html {
    overflow-x: hidden;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "ss01";
    overflow-x: hidden;
    max-width: 100vw;
    transition: background-color var(--dur-slow) var(--ease-soft), color var(--dur-slow) var(--ease-soft);
}

@media (pointer: fine) {
    body { cursor: none; }
}

/* Hide custom cursor elements entirely on touch devices (no fine pointer) */
@media (pointer: coarse), (hover: none) {
    .cursor-dot,
    .cursor-circle { display: none !important; }
}

/* Universal focus-visible — keyboard users get a clear ring that follows the element's own shape */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* RTL Support */
html[dir="rtl"] body {
    font-family: var(--font-arabic);
    text-align: right;
}

html[dir="rtl"] .logo-text { letter-spacing: 0; }
html[dir="rtl"] .nav-link::after { text-align: right; left: auto; right: 0; }
html[dir="rtl"] .hero-trust .trust-avatars img { margin-left: 0; margin-right: -10px; }
html[dir="rtl"] .hero-trust .trust-avatars img:first-child { margin-right: 0; }
html[dir="rtl"] .service-card .card-link i { transform: rotate(180deg); }
html[dir="rtl"] .services-slider { scroll-padding-right: 1.5rem; scroll-padding-left: 0; }
html[dir="rtl"] .btn-primary .btn-icon { transform: rotate(180deg); }
html[dir="rtl"] .btn-primary:hover .btn-icon { transform: scale(1.1) rotate(135deg); }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 6rem; }

@media (max-width: 1024px) {
    .container { padding: 0 3rem; }
}

@media (max-width: 768px) {
    .container { padding: 0 1.5rem; }
}

/* ==========================================================================
   Custom Cursor
   ========================================================================== */
.cursor-dot,
.cursor-circle {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
}

.cursor-circle {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

body.hovered .cursor-circle {
    width: 60px;
    height: 60px;
    background-color: rgba(249, 115, 22, 0.05);
    border-color: var(--primary-color);
}

/* ==========================================================================
   Loader
   ========================================================================== */
.loader {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    overflow: hidden;
}

.loader::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
    opacity: 0.06;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: loaderPulse 2s ease-in-out infinite;
}

.loader.loaded {
    opacity: 0;
    pointer-events: none;
}

.loader-logo-wrap {
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: scale(0.8);
}

.loader-logo {
    height: 64px;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.3));
}

[data-theme="dark"] .loader-logo {
    filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.4)) brightness(1.1);
}

.loader-text {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 0.5em;
    margin-bottom: 2rem;
    display: flex;
    overflow: hidden;
    direction: ltr;
}

.loader-text span {
    display: block;
    animation: revealLetter 1s var(--easing) forwards;
    transform: translateY(100%);
}

.loader-bar {
    width: 200px;
    height: 2px;
    background: var(--border-color);
    overflow: hidden;
    border-radius: 2px;
}

.loader-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.2s;
    border-radius: 2px;
}

.loader-tagline {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0;
}

@keyframes revealLetter {
    to { transform: translateY(0); }
}

@keyframes loaderPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.06; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.1; }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 0;
    z-index: 100;
    transition: background-color 0.3s, padding 0.3s;
}

.navbar.scrolled {
    background-color: var(--glass-bg);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text-color);
    letter-spacing: -0.02em;
}

.nav-menu {
    display: flex;
    gap: 3rem;
}

.nav-link {
    position: relative;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-muted);
    overflow: hidden;
    padding: 5px 0;
}

.nav-link span {
    display: block;
    transition: transform 0.4s var(--easing);
}

.nav-link::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    font-weight: 600;
    color: var(--primary-color);
    transition: transform 0.4s var(--easing);
    width: 100%;
}

.nav-link:hover span { transform: translateY(-150%); }
.nav-link:hover::after { transform: translateY(-135%); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.theme-btn, .lang-btn {
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.7;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    font-size: 1rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    min-width: 2rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .theme-btn:hover, .lang-btn:hover { opacity: 1; transform: scale(1.1); }
}
.theme-btn:active, .lang-btn:active { transform: scale(0.95); }

.theme-icon {
    width: 20px;
    height: 20px;
    stroke: var(--text-color);
    flex-shrink: 0;
}

.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-color);
    font-weight: 600;
    overflow: hidden;
    transition: border-color 0.3s;
}

.btn-primary .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    font-size: 0.7rem;
    color: #fff;
    transition: transform 0.3s var(--easing);
}

.btn-primary:hover { border-color: var(--primary-color); }
.btn-primary:hover .btn-icon { transform: scale(1.1) rotate(-45deg); }

.menu-toggle { display: none; }

/* ==========================================================================
   Utilities & Alignment
   ========================================================================== */
.text-center { text-align: center; }

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-primary);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3.5rem;
}

html[dir="rtl"] .section-tag {
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: 120px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.gradient-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
}

.sphere-1 {
    width: 500px;
    height: 500px;
    background: var(--primary-color);
    top: -100px;
    right: -100px;
    animation: float 10s ease-in-out infinite;
}

.sphere-2 {
    width: 400px;
    height: 400px;
    background: var(--accent-color);
    bottom: -100px;
    left: -100px;
    animation: float 12s ease-in-out infinite reverse;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 560px;
}

/* Badge */
.badge-wrapper { margin-bottom: 2rem; }
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-inner-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.badge-dot { width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; box-shadow: 0 0 10px var(--primary-color); }
.badge-text { font-family: var(--font-primary); font-size: var(--text-overline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-color); line-height: var(--lh-snug); }

/* Title */
.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-bold);
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.title-line { overflow: hidden; display: block; }
.reveal-text { display: block; transform: translateY(100%); transition: opacity 0.3s; }
/* Fallback: if GSAP hasn't run after 3s, reveal hero text via CSS */
body:not(.loading) .reveal-text { animation: revealFallback 0.8s 3s both; }
body:not(.loading) .reveal-text-delay { animation: fadeFallback 0.8s 3.5s both; }
@keyframes revealFallback { to { transform: translateY(0); } }
@keyframes fadeFallback { to { opacity: 1; transform: translateY(0); } }
/* GSAP overrides these via inline styles, so fallback only matters if GSAP fails */
.highlight {
    position: relative;
    display: inline-block;
    color: var(--primary-color);
    background: linear-gradient(
        110deg,
        #f97316 0%,
        #fb923c 18%,
        #ffd49a 38%,
        #fb923c 58%,
        #f97316 78%,
        #ea580c 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease-in-out infinite;
    will-change: background-position;
    filter: drop-shadow(0 4px 22px rgba(249, 115, 22, 0.35));
}

[data-theme="dark"] .highlight {
    filter: drop-shadow(0 6px 28px rgba(249, 115, 22, 0.55));
}

@media (prefers-reduced-motion: reduce) {
    .highlight { animation: none; }
}

.hero-desc {
    font-size: var(--text-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    max-width: 500px;
    margin-bottom: 3rem;
    transition: opacity 0.3s;
}

/* reveal-text-delay: start hidden so GSAP can animate them in */
.reveal-text-delay {
    opacity: 0;
    transform: translateY(30px);
}

.hero-btns {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    transition: opacity 0.3s;
}

.btn-primary.large {
    background: var(--primary-color);
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    color: #fff;
}

.btn-play {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: var(--text-color);
    transition: opacity 0.3s;
}

.play-icon {
    width: 50px;
    height: 50px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
    .btn-play:hover .play-icon {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
        transform: scale(1.1);
    }
}
.btn-play:active .play-icon { transform: scale(0.95); }

.hero-trust {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: nowrap;
    padding: 0.65rem 0.95rem 0.65rem 0.65rem;
    background: var(--card-inner-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.25);
    transition: opacity 0.3s, border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}

@media (hover: hover) {
    .hero-trust:hover {
        border-color: rgba(249, 115, 22, 0.4);
        transform: translateY(-1px);
    }
}

.trust-avatars { display: flex; align-items: center; }
.trust-avatars img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bg-color);
    margin-left: -10px;
}
.trust-plus {
    width: 40px;
    height: 40px;
    background: var(--card-inner-bg);
    border-radius: 50%;
    border: 2px solid var(--bg-color);
    margin-left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-color);
}

.trust-text { display: flex; flex-direction: column; font-family: var(--font-primary); font-size: var(--text-body-sm); line-height: var(--lh-snug); }
.trust-text .rating { font-weight: var(--weight-bold); color: var(--text-color); }
.trust-text .rating i { color: var(--primary-color); margin-right: 5px; }
.trust-text .label { color: var(--text-muted); font-size: var(--text-body-xs); font-weight: var(--weight-regular); }

.trust-badge-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Hero visual — houses either phone mockup or composite image */
.hero-visual {
    position: relative;
    min-height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.phone-container {
    position: relative;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Hero 3D stage — holds tilt composite + floating cards in shared perspective */
.hero-stage {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    perspective: 1400px;
    perspective-origin: 50% 45%;
    transform-style: preserve-3d;
}

/* Warm orange ambient glow behind the composite */
.hero-stage::before {
    content: '';
    position: absolute;
    inset: -10% -10% -20%;
    background: radial-gradient(ellipse at 50% 55%, rgba(249, 115, 22, 0.28) 0%, rgba(249, 115, 22, 0.08) 35%, transparent 65%);
    filter: blur(40px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

/* Hero composite — full brand photo, static (no tilt/3D) */
.hero-composite {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    transform: none;
    box-shadow:
        0 40px 80px -40px rgba(15, 23, 42, 0.4),
        0 15px 40px -25px rgba(249, 115, 22, 0.25);
    z-index: 1;
}

.hero-composite-static,
.hero-composite-static:hover { transform: none !important; box-shadow: 0 40px 80px -40px rgba(15, 23, 42, 0.4), 0 15px 40px -25px rgba(249, 115, 22, 0.25) !important; }

.hero-composite-media {
    display: block;
    position: relative;
    z-index: 1;
}

.hero-composite-media img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateZ(0);
}

/* Light sheen sweep — subtle reflection on the composite */
.hero-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.08) 100%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
}

@media (hover: hover) {
    .hero-composite:hover {
        box-shadow:
            0 60px 110px -40px rgba(15, 23, 42, 0.55),
            0 25px 55px -20px rgba(249, 115, 22, 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    }
}

@media (max-width: 768px) {
    .hero-stage { max-width: 440px; perspective: 1000px; }
    .hero-composite { max-width: 420px; border-radius: 22px; transform: none; }
}

@media (max-width: 480px) {
    .hero-stage { max-width: 340px; }
    .hero-composite { max-width: 320px; border-radius: 18px; }
}

/* Disable tilt transform on touch + reduced motion */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .hero-composite { transform: none !important; }
    .hero-stage::before { opacity: 0.6; }
}

.phone-mockup {
    width: 280px;
    height: 570px;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    border-radius: 44px;
    border: 3px solid #2a2a2a;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* Primary phone — front & center with 3D tilt */
.phone-primary {
    transform: rotateY(-12deg) rotateX(5deg);
    box-shadow:
        0 25px 60px -12px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.05),
        -20px 20px 60px -20px rgba(249, 115, 22, 0.15);
    z-index: 2;
}

/* Secondary phone — offset behind with tilt */
.phone-secondary {
    position: absolute;
    top: 40px;
    right: -100px;
    width: 240px;
    height: 490px;
    transform: rotateY(8deg) rotateX(3deg) translateZ(-40px);
    opacity: 0.85;
    box-shadow:
        0 20px 50px -12px rgba(0,0,0,0.25),
        0 0 0 1px rgba(255,255,255,0.03);
    z-index: 1;
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 30px;
    background: #0a0a0a;
    border-radius: 0 0 18px 18px;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.phone-notch::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a1a1a;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.1);
}

.phone-screen {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 36px;
}

.screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Video inside phone mockup — inherits .screen-img but ensures no control chrome */
video.screen-img {
    background: #0a0a0a;
    pointer-events: none;
}

/* ---------- User-journey slideshow (hero primary phone) ---------- */
.journey-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f7f8fa;
}

.journey-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 600ms ease, transform 1800ms ease-out;
    pointer-events: none;
    display: block;
}

.journey-frame.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.journey-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* ---------- Brand Promise — bridging strip between services & process ---------- */
.brand-promise {
    padding: 4rem 0 3rem;
    position: relative;
}

.promise-card {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.02));
    border: 1px solid rgba(249, 115, 22, 0.18);
    border-radius: 32px;
    padding: 3rem 3.5rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.promise-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, transparent 65%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

html[dir="rtl"] .promise-card::before { right: auto; left: -10%; }

.promise-content { position: relative; z-index: 1; }

.promise-title {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-color);
    margin: 0.5rem 0 1rem;
    font-weight: var(--weight-bold);
}

.promise-desc {
    font-size: var(--text-body-md);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 620px;
}

.promise-chips {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.promise-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    font-family: var(--font-primary);
    font-size: var(--text-body-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    background: var(--card-inner-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-color);
    transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.promise-chip i { color: var(--primary-color); font-size: 0.85rem; }

@media (hover: hover) {
    .promise-chip:hover {
        border-color: rgba(249, 115, 22, 0.5);
        background: rgba(249, 115, 22, 0.08);
        transform: translateY(-2px);
    }
}

.promise-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}

.promise-stat {
    padding: 1.25rem 1rem;
    background: var(--card-inner-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    text-align: center;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
    .promise-stat:hover { border-color: var(--primary-color); transform: translateY(-3px); }
}

.promise-stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-stat-md);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--primary-color);
    margin-bottom: 0.35rem;
}

.promise-stat-label {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--text-overline);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    line-height: var(--lh-snug);
}

@media (max-width: 1024px) {
    .promise-card {
        grid-template-columns: 1fr;
        padding: 2.5rem 2rem;
        gap: 2rem;
        text-align: center;
    }
    .promise-chips { justify-content: center; }
    .promise-stats { max-width: 520px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .brand-promise { padding: 3rem 0 2rem; }
    .promise-card { padding: 2rem 1.5rem; border-radius: 24px; }
    .promise-chip { padding: 0.4rem 0.8rem; }
    .promise-stat { padding: 1rem 0.75rem; border-radius: 14px; }
}

@media (max-width: 480px) {
    .promise-card { padding: 1.75rem 1.25rem; }
    .promise-stats { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

/* ---------- Brand Band — full-width key visual + tagline ---------- */
.brand-band {
    width: 100%;
    padding: 3.5rem 0 2rem;
    background: transparent;
}

.brand-band-media {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    perspective: 1800px;
}

.brand-band-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(17, 24, 39, 0.35);
    background: var(--card-bg);
    transform-style: preserve-3d;
    transition: box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    .brand-band-frame:hover {
        box-shadow: 0 40px 80px -30px rgba(17, 24, 39, 0.45), 0 20px 40px -20px rgba(249, 115, 22, 0.25);
    }
}

.brand-band-frame picture {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-band-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.brand-band-caption {
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
}

.brand-tagline {
    font-family: var(--font-primary);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
    color: var(--text-color, #0f172a);
    margin: 0;
    line-height: var(--lh-snug);
}

[data-theme="dark"] .brand-tagline {
    color: rgba(226, 232, 240, 0.92);
}

@media (max-width: 1024px) {
    .brand-band-frame { aspect-ratio: 16 / 8; }
}

@media (max-width: 768px) {
    .brand-band { padding: 2.5rem 0 1.25rem; }
    .brand-band-media { padding: 0 1rem; }
    .brand-band-frame { aspect-ratio: 4 / 3; border-radius: 18px; }
    .brand-band-caption { margin-top: 1rem; padding: 0 1rem; }
}

@media (max-width: 480px) {
    .brand-band-frame { aspect-ratio: 3 / 2; border-radius: 14px; }
}

/* ---------- Service card additions (icon chip + tagline) ---------- */
.service-card .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange, #F97316);
    margin-bottom: 12px;
    font-size: 18px;
}

/* Lottie-based service icon — bigger animated square */
.service-card .card-icon-lottie {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(140deg, rgba(249, 115, 22, 0.14), rgba(249, 115, 22, 0.04));
    border: 1px solid rgba(249, 115, 22, 0.18);
    margin-bottom: 16px;
    padding: 6px;
    overflow: hidden;
}
.service-card .card-icon-lottie svg {
    width: 100% !important;
    height: 100% !important;
}

.service-card .card-tagline {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body-sm);
    line-height: var(--lh-snug);
    color: var(--orange, #F97316);
    margin: 0 0 0.75rem;
}

/* Journey step indicator (dots under phone) */
.journey-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.journey-dot {
    width: 22px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
    cursor: pointer;
    transition: background 250ms ease, width 250ms ease, transform 250ms ease;
    -webkit-appearance: none;
    appearance: none;
}

.journey-dot:hover,
.journey-dot:focus-visible {
    background: rgba(148, 163, 184, 0.65);
    outline: none;
}

.journey-dot.is-active {
    background: var(--orange, #F97316);
    width: 40px;
}

.journey-dot > span { display: none; } /* visually hidden label container */

/* Caption under step dots — describes current frame */
.journey-caption {
    margin-top: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.72);
    min-height: 18px;
    transition: opacity 200ms ease;
}

[data-theme="dark"] .journey-caption {
    color: rgba(226, 232, 240, 0.72);
}

/* Respect prefers-reduced-motion — static image instead of crossfade */
@media (prefers-reduced-motion: reduce) {
    .journey-frame { transition: none; }
    .journey-dot { transition: none; }
}

/* Glass reflection overlay for depth */
.phone-shine {
    position: absolute;
    inset: 0;
    border-radius: 36px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,0.04) 100%
    );
    pointer-events: none;
    z-index: 4;
}

.float-card {
    position: absolute;
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 210px;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35), 0 4px 12px -6px rgba(15, 23, 42, 0.18);
    pointer-events: none;            /* never block clicks on hero text below */
    z-index: 6;                       /* sit above hero phone, below sticky nav */
}

[data-theme="dark"] .float-card {
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7), 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}

/* Keep cards inside the visual stage — no negative bleed into hero text column */
.card-1 { top: 56px;    left: 8px;    animation: float 6s infinite; }
.card-2 { bottom: 96px; right: 8px;   animation: float 8s infinite 1s; }

html[dir="rtl"] .card-1 { left: auto; right: 8px; }
html[dir="rtl"] .card-2 { right: auto; left: 8px; }

.icon-box { width: 40px; height: 40px; background: #22c55e; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.icon-box.star { background: #eab308; }
.text-box strong { display: block; font-size: 0.9rem; margin-bottom: 2px; color: var(--text-color); }
.text-box span { display: block; font-size: 0.75rem; color: var(--text-muted); }

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

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-section {
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}

html[dir="rtl"] .marquee-track {
    animation-direction: reverse;
}

.marquee-content {
    display: flex;
    align-items: center;
}

.marquee-content span {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    -webkit-text-stroke: 1px var(--primary-color);
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.4), 0 0 20px rgba(249, 115, 22, 0.2);
    margin: 0 2rem;
    white-space: nowrap;
    transition: color 0.3s, text-shadow 0.3s, opacity 0.3s;
}

.marquee-content span:hover {
    color: var(--primary-color);
    -webkit-text-stroke: 1px var(--primary-color);
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.6), 0 0 30px rgba(249, 115, 22, 0.3), 0 0 45px rgba(249, 115, 22, 0.15);
}

.marquee-content i { color: var(--primary-color); font-size: 1.5rem; margin: 0 1rem; text-shadow: 0 0 8px rgba(249, 115, 22, 0.4); }

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about { padding: 6rem 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }

.about-visual { position: relative; perspective: 1400px; }
.visual-stack { position: relative; width: 100%; height: 500px; transform-style: preserve-3d; transition: box-shadow 420ms var(--ease-out); }
.box-main { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; border: 1px solid var(--border-color); }
.box-main img { width: 100%; height: 100%; object-fit: cover; }
.box-accent { position: absolute; bottom: -30px; right: -30px; background: var(--primary-color); padding: 2rem; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.experience-badge { color: #fff; text-align: center; }
.experience-badge .number { display: block; font-size: var(--text-stat-lg); font-weight: var(--weight-bold); font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.experience-badge .text { font-size: var(--text-overline); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.about-content .section-title { margin-bottom: 1.5rem; color: var(--text-color); text-align: left; }
html[dir="rtl"] .about-content .section-title { text-align: right; }
.about-content .section-desc { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--text-muted); margin-bottom: 2.5rem; }

.about-content { max-width: 560px; }
.about-stats { display: flex; gap: 4rem; flex-wrap: wrap; }
.about-stats .stat-number { font-family: var(--font-display); font-size: var(--text-stat-lg); font-weight: var(--weight-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--primary-color); margin-bottom: 0.5rem; }
.about-stats .stat-label { font-size: var(--text-overline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

/* Credentials list — replaces thin 2-stat block in About section */
.about-credentials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.credential {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--card-inner-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

@media (hover: hover) {
    .credential:hover {
        border-color: rgba(249, 115, 22, 0.45);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.25);
    }
}

.credential > i {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(140deg, rgba(249, 115, 22, 0.14), rgba(249, 115, 22, 0.04));
    border: 1px solid rgba(249, 115, 22, 0.2);
    color: var(--primary-color);
    font-size: 1rem;
}

.credential > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.credential strong {
    font-family: var(--font-display);
    font-size: var(--text-display-xs);
    font-weight: var(--weight-bold);
    color: var(--text-color);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
}

.credential span {
    font-family: var(--font-primary);
    font-size: var(--text-body-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
}

html[dir="rtl"] .credential { text-align: right; }

@media (max-width: 1024px) {
    .about-credentials { max-width: 520px; margin: 0 auto; }
    .credential { text-align: left; }
    html[dir="rtl"] .credential { text-align: right; }
}

@media (max-width: 480px) {
    .credential { padding: 0.9rem 1rem; gap: 0.85rem; }
    .credential > i { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* ==========================================================================
   Services Section
   ========================================================================== */
.services { padding: 6rem 0; position: relative; background: var(--card-bg); }
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-bold);
    color: var(--text-color);
}

.services-slider { display: flex; gap: 2rem; overflow-x: auto; padding-bottom: 2.5rem; padding-right: 2rem; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; perspective: 1400px; }
.services-slider::-webkit-scrollbar { display: none; }

/* On desktop (all 3 cards fit), center them in the container instead of sliding */
@media (min-width: 1100px) {
    .services-slider {
        justify-content: center;
        overflow-x: visible;
        padding-right: 0;
        scroll-snap-type: none;
    }
}
.service-card { flex: 0 0 320px; display: flex; align-items: stretch; position: relative; scroll-snap-align: start; transform-style: preserve-3d; }
.card-inner { width: 100%; height: 100%; background: var(--card-inner-bg); border: 1px solid var(--border-color); border-radius: 24px; display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); overflow: hidden; transform: translateZ(0); }

.card-image { position: relative; width: 100%; height: 220px; overflow: hidden; background: var(--card-bg); }
.card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform 700ms var(--easing); }
.card-image-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.15)); pointer-events: none; }

.card-content { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.card-content h3 { font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: var(--weight-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin-bottom: 0.75rem; color: var(--text-color); }
.card-content p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: var(--text-body-sm); line-height: var(--lh-relaxed); flex: 1; }
.card-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary-color); font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }

/* Hover-only devices — avoid sticky hover on touch and animate smoothly */
@media (hover: hover) {
    .service-card:hover .card-inner { border-color: var(--primary-color); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.22), 0 12px 30px -15px rgba(249, 115, 22, 0.3); }
    .service-card:hover .card-image img { transform: scale(1.08); }
    .service-card:hover .card-link { opacity: 1; transform: translateY(0); }
}
/* On touch, keep the card-link always visible (no hover to reveal) */
@media (hover: none) {
    .card-link { opacity: 1; transform: translateY(0); }
}


.btn-fill {
    position: absolute;
    inset: 0;
    background: var(--primary-dark);
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--easing);
    z-index: -1;
}

html[dir="rtl"] .btn-fill { transform-origin: right; }

.btn-primary.large:hover .btn-fill { transform: scaleX(1); }

/* ==========================================================================
   Features / Process
   ========================================================================== */
.features { padding: 6rem 0; }
.feature-row { display: flex; align-items: center; gap: 4rem; margin-bottom: 5rem; }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-row:last-child { margin-bottom: 0; }
.feature-text { flex: 1; max-width: 520px; }
.feature-text .num { font-size: 4rem; font-family: var(--font-display); color: var(--primary-color); opacity: 0.1; font-weight: 700; line-height: 1; display: block; margin-bottom: -1rem; }
.feature-text h3 { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: var(--weight-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin-bottom: 1rem; color: var(--text-color); }
.feature-text p { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--text-muted); max-width: 400px; }
.feature-visual {
    flex: 1;
    height: 420px;
    background: var(--card-bg);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(249, 115, 22, 0.2);
    box-shadow: 0 25px 60px -30px rgba(15, 23, 42, 0.45), 0 10px 30px -15px rgba(249, 115, 22, 0.15);
    isolation: isolate;
}

.feature-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.35));
    pointer-events: none;
    z-index: 1;
}

.visual-box,
.feature-visual > picture {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    transition: transform 700ms var(--easing);
}

.feature-visual > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (hover: hover) {
    .feature-visual:hover .visual-box,
    .feature-visual:hover > picture { transform: scale(1.04); }
    .feature-visual:hover { border-color: rgba(249, 115, 22, 0.4); }
}

[data-theme="dark"] .feature-visual {
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 25px 60px -25px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact { padding: 6rem 0; background: var(--card-bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-methods { display: flex; flex-direction: column; gap: 1rem; }
.contact-form-container { justify-self: end; width: 100%; max-width: 520px; }

.method { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: var(--card-inner-bg); border-radius: 20px; border: 1px solid var(--border-color); transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
@media (hover: hover) {
    .method:hover { border-color: var(--primary-color); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.06); }
}
.method .icon { width: 50px; height: 50px; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--primary-color); }
.method .icon.whatsapp { color: #25d366; background: rgba(37, 211, 102, 0.1); border-color: rgba(37, 211, 102, 0.15); }
.method .details .label { font-family: var(--font-primary); font-size: var(--text-body-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); display: block; margin-bottom: 0.15rem; }
.method .details .value { font-family: var(--font-primary); font-size: var(--text-body-md); font-weight: var(--weight-semibold); line-height: var(--lh-snug); color: var(--text-color); }

.glass-card { background: var(--card-inner-bg); border: 1px solid var(--border-color); border-radius: 30px; padding: 3rem; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 1rem; }
.form-group:last-of-type { margin-bottom: 1.5rem; }
.form-group input, .form-group textarea { width: 100%; background: var(--card-bg); border: 1px solid var(--border-color); padding: 1.2rem; border-radius: 12px; color: var(--text-color); font-family: inherit; transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), background-color var(--dur) var(--ease-soft); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.btn-primary.full-width { width: 100%; justify-content: center; background: var(--primary-color); border: none; padding: 1.2rem; color: #fff; }

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-container { background: var(--primary-color); border-radius: 22px; padding: 2.25rem 1.5rem; text-align: center; color: #fff; max-width: 920px; margin: 3rem auto 0; }
.cta-title { font-family: var(--font-display); font-size: var(--text-display-md); font-weight: var(--weight-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: 0.55rem; color: #fff; }
.cta-desc { font-size: var(--text-body-md); line-height: var(--lh-relaxed); opacity: 0.9; margin-bottom: 1.4rem; color: #fff; max-width: 38ch; margin-left: auto; margin-right: auto; }

.app-store-btns { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }
.store-btn { background: #000; color: #fff; padding: 0.55rem 1.25rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); display: inline-flex; align-items: center; gap: 0.55rem; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.store-btn .text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.store-btn .text .sm { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.store-btn .text .lg { font-size: 0.95rem; font-weight: 600; }
.store-btn i { font-size: 1.3rem; }
@media (hover: hover) {
    .store-btn:hover { transform: translateY(-4px); background: #111; box-shadow: 0 14px 30px rgba(0,0,0,0.25); }
}
.store-btn:active { transform: translateY(-1px); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 6rem 0 2rem; border-top: 1px solid var(--border-color); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; margin-bottom: 3rem; }
.footer-brand { max-width: 320px; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 2.5rem; }
.footer-links .col { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-logo { font-family: var(--font-display); font-size: var(--text-display-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin-bottom: 1rem; color: var(--text-color); direction: ltr; display: inline-block; }
.footer-links h4 { font-family: var(--font-primary); font-size: var(--text-body-md); font-weight: var(--weight-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-normal); margin-bottom: 1.5rem; color: var(--text-color); }
.footer-links a:hover { color: var(--primary-color); }
.footer-bottom { text-align: center; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid var(--border-color); padding-top: 2rem; margin-top: 4rem; }

/* ==========================================================================
   Trust Avatars (SVG)
   ========================================================================== */
.trust-avatars .trust-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bg-color);
    margin-left: -10px;
    vertical-align: middle;
}
.trust-avatars .trust-avatar:first-child { margin-left: 0; }
html[dir="rtl"] .trust-avatars .trust-avatar { margin-left: 0; margin-right: -10px; }
html[dir="rtl"] .trust-avatars .trust-avatar:first-child { margin-right: 0; }

/* ==========================================================================
   Form Message
   ========================================================================== */
.form-message {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    animation: fadeInUp 0.4s ease;
}
.form-message--success {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
[data-theme="dark"] .form-message--success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Mobile Menu Overlay
   ========================================================================== */
body.nav-open .nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    z-index: 99;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    animation: fadeIn 0.3s ease;
}
body.nav-open .nav-menu .nav-link {
    font-size: 1.5rem;
    color: var(--text-color);
}
body.nav-open .menu-toggle {
    z-index: 101;
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
}
html[dir="rtl"] body.nav-open .menu-toggle {
    right: auto;
    left: 1.5rem;
}
/* Animate hamburger lines to X when open */
body.nav-open .menu-toggle .line:nth-child(1) {
    top: 19px;
    transform: rotate(45deg);
}
body.nav-open .menu-toggle .line:nth-child(2) {
    top: 19px;
    transform: rotate(-45deg);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   Responsiveness
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
    .hero-btns, .hero-trust, .badge-wrapper { justify-content: center; }
    .hero-content { align-items: center; max-width: 100%; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-visual { min-height: 460px; }
    .phone-primary { width: 240px; height: 490px; }
    .phone-secondary { display: none; }
    .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
    .about-visual { display: flex; justify-content: center; }
    .about-stats { justify-content: center; }
    .contact-methods { max-width: 500px; margin: 0 auto; }
    .contact-form-container { justify-self: center; }
    .footer-top { flex-direction: column; align-items: flex-start; }
    .footer-links { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

@media (max-width: 768px) {
    .nav-menu { display: none; }
    .menu-toggle { display: block; width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: 50%; position: relative; }
    .menu-toggle .line { position: absolute; left: 10px; width: 20px; height: 2px; background: var(--text-color); transition: 0.3s; }
    .menu-toggle .line:nth-child(1) { top: 16px; }
    .menu-toggle .line:nth-child(2) { top: 22px; }

    /* Compact nav actions on tablet/mobile */
    .nav-actions { gap: 0.5rem; }
    .navbar { padding: 1rem 0; }
    .logo-img { height: 36px; }

    /* hero-title size handled by --text-display-xl clamp */
    .hero-visual { min-height: 380px; padding: 0.5rem; }
    .phone-primary { width: 200px; height: 410px; }
    .float-card { display: none; }
    .feature-row, .feature-row.reverse { flex-direction: column; text-align: center; gap: 2rem; }
    .feature-text { max-width: 100%; }
    .footer-links { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .store-btn .text { align-items: center; }
    .store-btn { padding: 0.7rem 1.5rem; }

    /* Trust badge — always keep icon inline with text */
    .hero-trust { flex-wrap: nowrap; justify-content: center; text-align: left; }
    html[dir="rtl"] .hero-trust { text-align: right; }
    .trust-badge-icon { width: 40px; height: 40px; font-size: 1rem; }
    .hero-trust .trust-text { flex: 1; min-width: 0; }
    .hero-trust .label { font-size: 0.78rem; line-height: 1.35; }
}

html[dir="rtl"] .hero-content,
html[dir="rtl"] .about-content,
html[dir="rtl"] .contact-info {
    align-items: flex-end;
    text-align: right;
}

/* On tablet/mobile the hero stacks — center everything for visual balance regardless of lang */
@media (max-width: 1024px) {
    html[dir="rtl"] .hero-content {
        align-items: center;
        text-align: center;
    }
    html[dir="rtl"] .hero-desc,
    html[dir="rtl"] .hero-trust .trust-text {
        text-align: center;
    }
}

html[dir="rtl"] .store-btn .text {
    align-items: flex-end;
    text-align: right;
}

/* ==========================================================================
   Why Choose FASTER Section
   ========================================================================== */
.why-faster {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.why-faster::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
    opacity: 0.04;
    border-radius: 50%;
    pointer-events: none;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.benefit-card {
    padding: 2.5rem 2rem;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: var(--card-inner-bg);
    transition: border-color 0.4s var(--easing), box-shadow 0.4s var(--easing), background 0.4s var(--easing);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Animated orange glow behind card on hover */
.benefit-card::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 30% 20%, rgba(249, 115, 22, 0.25) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 500ms var(--ease-out);
    pointer-events: none;
    z-index: 0;
}
.benefit-card:hover::before { opacity: 1; }

.benefit-card > * { position: relative; z-index: 1; }

.benefit-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--easing);
    z-index: 2;
}

html[dir="rtl"] .benefit-card::after { transform-origin: right; }

@media (hover: hover) {
    .benefit-card:hover {
        transform: translateY(-6px);
        border-color: var(--primary-color);
        box-shadow: 0 20px 40px rgba(249, 115, 22, 0.08);
    }
    .benefit-card:hover::after { transform: scaleX(1); }
}

.benefit-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    background: linear-gradient(140deg, rgba(249, 115, 22, 0.14), rgba(249, 115, 22, 0.04));
    border: 1px solid rgba(249, 115, 22, 0.18);
    isolation: isolate;
    transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.benefit-card:hover .benefit-icon-wrap {
    background: linear-gradient(140deg, rgba(249, 115, 22, 0.24), rgba(249, 115, 22, 0.08));
    border-color: rgba(249, 115, 22, 0.42);
}

.benefit-icon-wrap i {
    font-size: 1.5rem;
    color: var(--primary-color);
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.3));
}

/* ---------- Animated SVG icons inside benefit cards ---------- */
.benefit-svg {
    width: 38px;
    height: 38px;
    color: var(--primary-color);
    position: relative;
    z-index: 2;
    overflow: visible;
    filter: drop-shadow(0 2px 6px rgba(249, 115, 22, 0.35));
}

/* Pulse ring — concentric ring that expands + fades */
.benefit-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    border: 2px solid rgba(249, 115, 22, 0.55);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
    animation: benefitPulse 2.6s ease-out infinite;
}

@keyframes benefitPulse {
    0%   { opacity: 0;    transform: scale(0.85); }
    25%  { opacity: 0.55; transform: scale(1);    }
    80%  { opacity: 0;    transform: scale(1.35); }
    100% { opacity: 0;    transform: scale(1.35); }
}

/* GPS ping — two offset rings for location-radar feel */
.pin-ping   { animation-duration: 2.2s; animation-delay: 0s;   }
.pin-ping-2 { animation-duration: 2.2s; animation-delay: 1.1s; }

/* Shield check-mark — animated draw */
.benefit-svg-shield .svg-shield-check {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: drawStroke 2.2s ease-in-out infinite;
}

/* Bolt — flash opacity for same-day service */
.benefit-svg-bolt .svg-bolt-body {
    transform-origin: center;
    animation: boltFlash 1.8s ease-in-out infinite;
}
@keyframes boltFlash {
    0%, 70%, 100% { opacity: 1;   transform: scale(1);   }
    80%           { opacity: 0.55; transform: scale(0.92); }
    85%           { opacity: 1;   transform: scale(1.06); }
}

/* Calendar check — draw the inside checkmark */
.benefit-svg-calendar .svg-cal-check {
    stroke-dasharray: 38;
    stroke-dashoffset: 38;
    animation: drawStroke 2.4s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* Price tag — gentle sway */
.benefit-svg-price {
    transform-origin: 20% 20%;
    animation: tagSway 3.2s ease-in-out infinite;
}
@keyframes tagSway {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg);  }
}
.benefit-svg-price .svg-tag-dot {
    transform-origin: 22px 18px;
    animation: tagDotPulse 2.4s ease-in-out infinite;
}
@keyframes tagDotPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1;   }
}

/* GPS pin — gentle bob */
.benefit-svg-gps {
    animation: pinBob 2.8s ease-in-out infinite;
}
@keyframes pinBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Headset — subtle scale on boom arm */
.benefit-svg-support .svg-hs-boom {
    transform-origin: 52px 50px;
    animation: boomWiggle 2.6s ease-in-out infinite;
}
@keyframes boomWiggle {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-6deg); }
}

/* Stroke-draw keyframes (shield/calendar checks) */
@keyframes drawStroke {
    0%, 20%  { stroke-dashoffset: 42; }
    50%      { stroke-dashoffset: 0;  }
    80%,100% { stroke-dashoffset: 0;  opacity: 0.85; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .benefit-pulse,
    .benefit-svg-shield .svg-shield-check,
    .benefit-svg-bolt .svg-bolt-body,
    .benefit-svg-calendar .svg-cal-check,
    .benefit-svg-price,
    .benefit-svg-price .svg-tag-dot,
    .benefit-svg-gps,
    .benefit-svg-support .svg-hs-boom {
        animation: none !important;
    }
}

.benefit-glow {
    position: absolute;
    inset: -6px;
    background: var(--primary-color);
    opacity: 0;
    border-radius: 22px;
    filter: blur(12px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    transform: scale(0.9);
    pointer-events: none;
}

@media (hover: hover) {
    .benefit-card:hover .benefit-glow { opacity: 0.25; transform: scale(1); }
}

.benefit-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-display-sm);
    font-weight: var(--weight-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.benefit-card p {
    font-size: var(--text-body-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq {
    padding: 6rem 0;
    background: var(--card-bg);
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-inner-bg);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    position: relative;
}

.faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 400ms var(--easing);
}

html[dir="rtl"] .faq-item::before { left: auto; right: 0; }

.faq-item.active::before { transform: scaleY(1); }

.faq-item:hover,
.faq-item.active { border-color: var(--primary-color); box-shadow: 0 10px 30px -20px rgba(249, 115, 22, 0.35); }

.faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    font-family: var(--font-primary);
    font-size: var(--text-body-md);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    gap: 1rem;
    transition: color var(--dur) var(--ease-soft), background-color var(--dur) var(--ease-soft);
}

.faq-item.active .faq-trigger,
.faq-trigger:hover { color: var(--primary-color); }

html[dir="rtl"] .faq-trigger { text-align: right; }

.faq-trigger i {
    color: var(--primary-color);
    font-size: 0.9rem;
    transition: transform 0.3s var(--easing);
    flex-shrink: 0;
}

.faq-item.active .faq-trigger i { transform: rotate(45deg); }

.faq-answer {
    height: 0;
    overflow: hidden;
}

.faq-answer p {
    padding: 0 2rem 1.5rem;
    font-size: var(--text-body-md);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */
.testimonials {
    padding: 6rem 0;
    background: var(--card-bg);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform 0.4s var(--easing), box-shadow 0.4s;
}

@media (hover: hover) {
    .testimonial-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.08);
    }
}

.testimonial-card.featured {
    border-color: var(--primary-color);
    position: relative;
    overflow: hidden;
}

.testimonial-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.testimonial-stars {
    display: flex;
    gap: 0.25rem;
    color: #eab308;
    font-size: 0.9rem;
}

.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.author-avatar svg {
    border-radius: 50%;
}

.author-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 2px;
}

.author-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Trust Metrics Section
   ========================================================================== */
.trust-metrics {
    padding: 5rem 0;
    position: relative;
}

.trust-metrics::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
    opacity: 0.03;
    border-radius: 50%;
    pointer-events: none;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    text-align: center;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: var(--card-inner-bg);
    transition: transform 0.3s var(--easing), border-color 0.3s;
}

@media (hover: hover) {
    .metric-item:hover {
        transform: translateY(-5px);
        border-color: var(--primary-color);
        box-shadow: 0 16px 32px rgba(249, 115, 22, 0.06);
    }
}

.metric-icon {
    position: relative;
    width: 64px;
    height: 64px;
    background: radial-gradient(circle at 30% 30%, rgba(249, 115, 22, 0.18), rgba(249, 115, 22, 0.06));
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.15));
    isolation: isolate;
    animation: metricFloat 4s ease-in-out infinite;
}

.metric-icon i { position: relative; z-index: 2; }

/* Concentric pulse rings */
.metric-icon::before,
.metric-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(249, 115, 22, 0.45);
    opacity: 0;
    z-index: 1;
    animation: metricPulse 3s ease-out infinite;
    pointer-events: none;
}

.metric-icon::after { animation-delay: 1.4s; }

@keyframes metricPulse {
    0%   { opacity: 0;    transform: scale(0.85); }
    20%  { opacity: 0.55; transform: scale(1);    }
    80%  { opacity: 0;    transform: scale(1.4);  }
    100% { opacity: 0;    transform: scale(1.4);  }
}

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

.metric-item:nth-child(2) .metric-icon { animation-delay: 0.5s; }
.metric-item:nth-child(3) .metric-icon { animation-delay: 1s; }
.metric-item:nth-child(4) .metric-icon { animation-delay: 1.5s; }

@media (prefers-reduced-motion: reduce) {
    .metric-icon,
    .metric-icon::before,
    .metric-icon::after { animation: none !important; }
}

.metric-number {
    font-family: var(--font-display);
    font-size: var(--text-stat-lg);
    font-weight: var(--weight-bold);
    color: var(--primary-color);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}

.metric-label {
    font-size: var(--text-body-sm);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    line-height: var(--lh-snug);
}

/* ==========================================================================
   Responsive: Testimonials & Metrics
   ========================================================================== */
@media (max-width: 1024px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
    .testimonials-grid .testimonial-card:last-child { grid-column: span 2; max-width: 500px; margin: 0 auto; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .benefits-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .testimonials-grid .testimonial-card:last-child { grid-column: span 1; max-width: 100%; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .faq-trigger { padding: 1.25rem 1.5rem; }
    .faq-answer p { padding: 0 1.5rem 1.25rem; }
}

/* ==========================================================================
   Service Card Badge Overlay
   ========================================================================== */
.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--primary-color);
    color: #fff;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: var(--text-body-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

html[dir="rtl"] .card-badge { left: auto; right: 12px; }

/* ==========================================================================
   Partner Logos Strip
   ========================================================================== */
.partners {
    padding: 4rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.partners-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.partners-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    white-space: nowrap;
}

.partner-logos {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.partner-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity 0.3s;
    white-space: nowrap;
    font-family: var(--font-display);
}

.partner-logo:hover { opacity: 0.8; }

.partner-logo i { font-size: 1.4rem; }

/* ==========================================================================
   Mobile Menu Backdrop Blur
   ========================================================================== */
body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    z-index: 98;
    animation: fadeIn 0.3s ease;
}

/* ==========================================================================
   CTA Enhanced Section
   ========================================================================== */
.cta-container {
    position: relative;
    overflow: hidden;
}

.cta-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-container::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-phone-visual {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    position: relative;
}

/* CTA stage — shared 3D perspective for the tilt composite */
.cta-stage {
    position: relative;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    perspective: 1400px;
    perspective-origin: 50% 45%;
    transform-style: preserve-3d;
}

/* Warm orange glow behind the composite */
.cta-stage::before {
    content: '';
    position: absolute;
    inset: -15% -15% -25%;
    background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: ctaGlow 5s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.05); }
}

/* CTA composite — tilts with mouse, floats gently, glows */
.cta-composite {
    position: relative;
    width: 100%;
    max-width: 190px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(6deg) rotateY(-8deg) scale(1);
    backface-visibility: hidden;
    animation: ctaFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.35)) drop-shadow(0 15px 40px rgba(255, 255, 255, 0.1));
    z-index: 1;
    transition: filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-composite picture { display: block; width: 100%; position: relative; z-index: 1; }
.cta-composite img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    transform: translateZ(0);
}

/* Moving sheen across the composite */
.cta-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

@keyframes ctaFloat {
    0%, 100% { transform: perspective(1200px) rotateX(6deg) rotateY(-8deg) translateY(0) scale(1); }
    50%      { transform: perspective(1200px) rotateX(4deg) rotateY(-10deg) translateY(-6px) scale(1.01); }
}

@media (hover: hover) {
    .cta-composite:hover {
        filter: drop-shadow(0 50px 100px rgba(0, 0, 0, 0.45)) drop-shadow(0 20px 50px rgba(255, 255, 255, 0.15));
    }
}

@media (max-width: 768px) {
    .cta-stage { max-width: 300px; perspective: 1000px; }
    .cta-composite { max-width: 260px; border-radius: 20px; animation: none; transform: none; }
    .cta-composite img { border-radius: 20px; }
}

@media (max-width: 480px) {
    .cta-stage { max-width: 250px; }
    .cta-composite { max-width: 220px; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cta-composite {
        animation: none !important;
        transform: none !important;
    }
    .cta-stage::before { animation: none !important; }
}

/* Orbiting chips + sparkles around the CTA phone */
.cta-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.orbit-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.3), 0 2px 6px rgba(255, 255, 255, 0.3) inset;
    white-space: nowrap;
    animation: orbitFloat 5s ease-in-out infinite;
    z-index: 2;
}

.orbit-chip i { color: var(--primary-color); font-size: 0.85rem; }

.chip-pay      { top:  4%;   left:  12%;  animation-delay: 0s; }
.chip-rating   { top:  12%;  right: 10%;  animation-delay: 1s; }
.chip-same-day { bottom: 22%; left:  6%;  animation-delay: 2s; }
.chip-arabic   { bottom: 10%; right: 12%; animation-delay: 3s; }

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

/* Sparkles */
.orbit-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.75);
    opacity: 0;
    animation: orbitSpark 3s ease-in-out infinite;
}

.spark-a { top: 30%; left: 35%; animation-delay: 0.2s; }
.spark-b { top: 60%; right: 28%; animation-delay: 1.1s; }
.spark-c { bottom: 38%; left: 22%; animation-delay: 2.2s; }

@keyframes orbitSpark {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1.2); }
}

html[dir="rtl"] .chip-pay      { left: auto; right: 12%; }
html[dir="rtl"] .chip-rating   { right: auto; left: 10%; }
html[dir="rtl"] .chip-same-day { left: auto; right: 6%; }
html[dir="rtl"] .chip-arabic   { right: auto; left: 12%; }

@media (max-width: 768px) {
    .orbit-chip { font-size: 0.72rem; padding: 0.4rem 0.7rem; }
    .chip-pay      { top: 2%;   left: 2%; }
    .chip-rating   { top: 6%;   right: 2%; }
    .chip-same-day { bottom: 18%; left: 0%; }
    .chip-arabic   { bottom: 8%;  right: 0%; }
    .cta-phone-visual { min-height: 220px; }
}

@media (max-width: 480px) {
    .orbit-chip i { font-size: 0.72rem; }
    .orbit-chip { font-size: 0.66rem; gap: 0.3rem; padding: 0.35rem 0.6rem; }
    .cta-phone-visual { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
    .orbit-chip, .orbit-spark { animation: none !important; }
}

.cta-phone {
    width: 200px;
    height: 410px;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    border-radius: 36px;
    border: 3px solid rgba(255,255,255,0.15);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
    position: relative;
}

.cta-phone .screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 33px;
}

.cta-phone::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 33px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%);
    pointer-events: none;
}

.cta-qr-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 1rem;
    align-items: center;
}

.cta-qr-text {
    font-size: 0.85rem;
    opacity: 0.8;
    color: #fff;
}

/* ==========================================================================
   Responsive: New Elements
   ========================================================================== */
@media (max-width: 1024px) {
    .partners-inner { gap: 2rem; }
    .partner-logos { gap: 2rem; }
}

@media (max-width: 768px) {
    .partners-inner { flex-direction: column; gap: 1.5rem; }
    .partner-logos { gap: 1.5rem; }
    .partner-logo { font-size: 0.9rem; }
    .cta-phone { width: 160px; height: 330px; border-radius: 28px; }
    .cta-qr-wrap { flex-direction: column; }
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .marquee-track { animation: none !important; }
    .gradient-sphere { animation: none !important; }
    .float-card { animation: none !important; }
    .loader::before { animation: none !important; }
}

/* ==========================================================================
   Mobile / low-power performance
   Animating large blurred spheres & floating cards is expensive on mobile GPUs.
   ========================================================================== */
@media (max-width: 768px), (pointer: coarse) {
    .gradient-sphere { animation: none !important; }
    .float-card { animation: none !important; }
    .loader::before { animation-duration: 4s; }
    /* Reduce backdrop-blur cost on mobile */
    body.nav-open::before { backdrop-filter: blur(10px); }
    .navbar.scrolled { backdrop-filter: blur(6px); }
    .float-card { backdrop-filter: blur(6px); }
}

/* ==========================================================================
   Mobile Enhancements — Section Spacing & Typography (768px supplement)
   ========================================================================== */
@media (max-width: 768px) {
    /* Reduce section padding — 8rem (128px) is far too large on mobile */
    .about,
    .features,
    .why-faster,
    .contact { padding: 4.5rem 0; }
    .services { padding: 4.5rem 0 3.5rem; }
    .testimonials,
    .faq { padding: 4.5rem 0; }
    .trust-metrics,
    .cta { padding: 3.5rem 0; }
    .footer { padding: 3.5rem 0 2rem; }

    /* Section header spacing */
    .section-header { margin-bottom: 2.25rem; padding: 0 0.25rem; }

    /* Section titles — size handled by token clamp; only tweak header spacing */

    /* Hero — don't force full-viewport-height when phone stacks below content */
    .hero { min-height: auto; padding-top: 86px; padding-bottom: 2rem; }
    .hero-content { align-items: center; text-align: center; }
    .hero-desc { font-size: 1rem; margin-bottom: 1.75rem; max-width: 360px; margin-left: auto; margin-right: auto; }
    .hero-btns { margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; justify-content: center; }
    .hero-trust { gap: 0.875rem; align-items: center; }
    .hero-trust .trust-text { font-size: 0.85rem; text-align: left; }
    html[dir="rtl"] .hero-trust .trust-text { text-align: right; }
    .hero-trust .label { font-size: 0.75rem; }
    .btn-primary.large { padding: 0.85rem 1.75rem; font-size: 1rem; }

    /* Marquee scale-down */
    .marquee-content span { font-size: 2.4rem; margin: 0 1.25rem; }
    .marquee-content i { font-size: 1.1rem; margin: 0 0.5rem; }

    /* About */
    .visual-stack { height: 340px; max-width: 380px; margin: 0 auto; }
    .box-accent { bottom: -12px; right: -12px; padding: 1rem 1.25rem; border-radius: 16px; }
    /* Stat numbers (experience/about) auto-scale via --text-stat-lg clamp */
    .about-stats { gap: 2rem; justify-content: center; }

    /* Services — horizontal slider with peek */
    .services-slider { gap: 1.25rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.75rem; margin-left: -1.5rem; margin-right: -1.5rem; scroll-padding-left: 1.5rem; }
    .service-card { flex: 0 0 85%; max-width: 320px; }
    .card-image { height: 200px; }
    .card-content { padding: 1.5rem; }

    /* Features */
    .feature-text .num { font-size: 3rem; }
    .feature-visual { flex: none; width: 100%; height: 240px; }
    .feature-row { gap: 2rem; margin-bottom: 3.5rem; }
    .features .feature-row:last-child { margin-bottom: 0; }

    /* Benefits / Why FASTER */
    .benefit-card { padding: 2rem 1.5rem; }
    .benefit-icon-wrap { width: 56px; height: 56px; margin-bottom: 1.25rem; }

    /* Metrics */
    /* .metric-number handled by --text-stat-lg clamp */

    /* FAQ */
    .faq-list { padding: 0 0.25rem; }

    /* Contact */
    .contact-grid { gap: 2.5rem; }
    .glass-card { padding: 1.75rem; border-radius: 22px; }
    .contact-methods { gap: 0.75rem; }
    .method { padding: 1.25rem; gap: 1rem; }
    .method .icon { width: 44px; height: 44px; font-size: 1.05rem; }

    /* CTA — title/desc sizes via token clamps */
    .cta-container { padding: 1.85rem 1.15rem; border-radius: 18px; }
    .cta-desc { margin-bottom: 1.25rem; }
    .app-store-btns { gap: 0.55rem; }
    .cta-phone-visual { margin-top: 1.15rem; }

    /* Footer */
    .footer-top { gap: 2rem; margin-bottom: 2rem; }
    .footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; }
}

/* ==========================================================================
   Small-phone Enhancements (max-width: 480px)
   Below this width: modern iPhones 375–390px, budget Android 360px
   ========================================================================== */
@media (max-width: 480px) {
    /* Tighter container padding on small phones */
    .container { padding: 0 1.15rem; }

    /* Section padding */
    .about,
    .features,
    .why-faster,
    .contact,
    .services,
    .testimonials,
    .faq { padding: 3.5rem 0; }
    .trust-metrics,
    .cta { padding: 3rem 0; }
    .footer { padding: 3rem 0 1.5rem; }

    /* Section header */
    .section-header { margin-bottom: 1.75rem; }

    /* Section titles + tags — sizes via tokens */
    .section-tag { margin-bottom: 0.75rem; }

    /* Nav */
    .logo-img { height: 32px; }
    .theme-btn, .lang-btn { font-size: 0.9rem; padding: 0.35rem; min-width: 1.75rem; min-height: 1.75rem; }
    .menu-toggle { width: 36px; height: 36px; }
    .menu-toggle .line { left: 9px; width: 18px; }
    .menu-toggle .line:nth-child(1) { top: 14px; }
    .menu-toggle .line:nth-child(2) { top: 20px; }

    /* Nav btn — hide "Get App" text on very small phones, keep icon */
    .nav-actions .btn-primary { padding: 0.5rem 0.85rem; gap: 0.5rem; }
    .nav-actions .btn-primary .btn-text { font-size: 0.8rem; }
    .nav-actions .btn-primary .btn-icon { width: 20px; height: 20px; font-size: 0.6rem; }

    /* Hero — tight mobile layout with stacked buttons */
    .hero { padding-top: 78px; padding-bottom: 1.5rem; }
    .hero-container { gap: 2rem; }
    .hero-content { gap: 0; width: 100%; }
    .hero-title { margin-bottom: 1rem; }
    .hero-desc { margin-bottom: 1.5rem; max-width: 320px; }
    .hero-visual { min-height: 280px; padding: 0.25rem; }
    .phone-primary { width: 150px; height: 310px; border-radius: 34px; }
    .phone-screen { border-radius: 28px; }
    .hero-composite { max-width: 320px; }

    /* Stack buttons vertically, equal weight, full-width-ish for premium feel */
    .hero-btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .hero-btns .btn-primary.large {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
        border-radius: 999px;
    }
    .btn-play {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.25rem;
        font-size: 0.92rem;
        gap: 0.65rem;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--card-inner-bg);
    }
    .play-icon { width: 32px; height: 32px; font-size: 0.9rem; border: none; background: rgba(37, 211, 102, 0.12); color: #25d366; }

    .badge-wrapper { margin-bottom: 1.25rem; }
    .badge { padding: 0.4rem 0.85rem; }
    .badge-text { font-size: 0.72rem; }

    /* Trust badge — tight inline presentation */
    .hero-trust {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        gap: 0.75rem;
        justify-content: flex-start;
    }
    .trust-badge-icon { width: 36px; height: 36px; font-size: 0.9rem; }
    .hero-trust .rating { font-size: 0.85rem; }
    .hero-trust .label { font-size: 0.72rem; line-height: 1.3; }

    /* Marquee */
    .marquee-content span { font-size: 2rem; margin: 0 1rem; }
    .marquee-content i { font-size: 1rem; margin: 0 0.4rem; }

    /* About */
    .visual-stack { height: 260px; max-width: 300px; }
    .box-accent { bottom: -10px; right: -10px; padding: 0.85rem 1rem; border-radius: 14px; }
    .about-stats { gap: 1.5rem; }

    /* Services */
    .services-slider { gap: 1rem; padding-left: 1.15rem; padding-right: 1.15rem; margin-left: -1.15rem; margin-right: -1.15rem; scroll-padding-left: 1.15rem; }
    .service-card { flex: 0 0 88%; max-width: 300px; }
    .card-image { height: 180px; }
    .card-content { padding: 1.35rem; }
    .service-card .card-icon { width: 36px; height: 36px; font-size: 16px; }

    /* Features — sizes via tokens */
    .feature-text .num { font-size: 2.5rem; }
    .feature-visual { flex: none; width: 100%; height: 210px; border-radius: 24px; }
    .feature-row { gap: 1.75rem; margin-bottom: 3rem; }

    /* Benefits */
    .benefit-card { padding: 1.6rem 1.3rem; border-radius: 20px; }
    .benefit-icon-wrap { width: 50px; height: 50px; margin-bottom: 1rem; border-radius: 14px; }
    .benefit-icon-wrap i { font-size: 1.25rem; }
    .benefit-card h3 { margin-bottom: 0.5rem; }

    /* Metrics — sizes via tokens */
    .metrics-grid { gap: 0.85rem; }
    .metric-item { padding: 1.35rem 0.65rem; }
    .metric-icon i { font-size: 1.5rem; }

    /* FAQ */
    .faq-trigger { padding: 1rem 1.15rem; }
    .faq-answer p { padding: 0 1.15rem 1rem; }

    /* Contact */
    .glass-card { padding: 1.35rem; border-radius: 18px; }
    .method { padding: 1.1rem; gap: 0.9rem; border-radius: 16px; }
    .method .icon { width: 40px; height: 40px; font-size: 1rem; }

    /* CTA */
    .cta-container { padding: 2.75rem 1.15rem; border-radius: 20px; }
    .cta-desc { margin-bottom: 1.75rem; }
    .app-store-btns { flex-direction: column; gap: 0.75rem; align-items: stretch; }
    .store-btn { justify-content: center; padding: 0.75rem 1.25rem; border-radius: 14px; }
    .store-btn .text { align-items: center; }
    .cta-phone { width: 150px; height: 310px; border-radius: 28px; }

    /* Footer */
    .footer-top { gap: 1.75rem; margin-bottom: 1.5rem; }
    .footer-links { gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
    .footer-links h4 { margin-bottom: 1rem; }
    .footer-links .col { gap: 0.55rem; }
    .footer-links a { font-size: var(--text-body-sm); }
    .footer-brand p { font-size: var(--text-body-sm); }

    /* RTL: flip box-accent for Arabic */
    html[dir="rtl"] .box-accent { left: -10px; right: auto; }
}

/* ==========================================================================
   Extra-small phones (<=360px)
   ========================================================================== */
@media (max-width: 360px) {
    .container { padding: 0 1rem; }
    .marquee-content span { font-size: 1.75rem; margin: 0 0.75rem; }
    .service-card { flex: 0 0 92%; }
    .footer-links { grid-template-columns: 1fr; }
    .about-stats { flex-direction: column; gap: 1.25rem; }

    /* Nav — hide Get App label, keep icon-only on tiniest screens */
    .nav-actions .btn-primary .btn-text { display: none; }
    .nav-actions .btn-primary { padding: 0.45rem 0.55rem; }
    .nav-actions { gap: 0.35rem; }

    /* Hero — ultra-tight */
    .hero-stage { max-width: 300px; }
    .hero-composite { max-width: 280px; }
    .hero-composite img { border-radius: 14px; }
    .badge-text { font-size: 0.66rem; }
    .hero-btns { max-width: 260px; }

    /* Promise — 1-col stats to avoid squish */
    .promise-stats { grid-template-columns: 1fr; }

    /* Promise chips — allow full-width */
    .promise-chips { flex-direction: column; align-items: stretch; }
    .promise-chip { justify-content: center; }

    /* Credentials — tighter padding */
    .credential { padding: 0.8rem 0.85rem; gap: 0.75rem; }
    .credential > i { width: 34px; height: 34px; border-radius: 10px; }

    /* CTA — tightest */
    .cta-stage { max-width: 220px; }
    .cta-composite { max-width: 200px; border-radius: 14px; }
    .cta-composite img { border-radius: 14px; }
}

/* ==========================================================================
   Tap highlight polish (mobile)
   ========================================================================== */
@media (pointer: coarse), (hover: none) {
    a, button, [role="button"] {
        -webkit-tap-highlight-color: rgba(249, 115, 22, 0.15);
    }
}

/* ==========================================================================
   PREMIUM POLISH LAYER — top-tier React-site finishes
   - Cursor spotlight on cards
   - Aurora gradient mesh + grain
   - Magnetic buttons
   - Animated gradient text
   - Smoother scroll snap-margin for sticky nav
   ========================================================================== */

/* Smooth scroll + offset for sticky nav (was relying on JS only) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

section[id] { scroll-margin-top: 90px; }

/* ---------- 1. Cursor spotlight (primary cards) ----------
   JS sets --mx / --my on the element; CSS paints a soft radial light.
   Falls back gracefully (no spotlight = no harm). */
.service-card,
.benefit-card,
.metric-item,
.credential,
.method,
.faq-item,
.promise-card {
    --mx: 50%;
    --my: 50%;
    position: relative;
}

.service-card::before,
.benefit-card::before,
.metric-item::before,
.credential::before,
.method::before,
.faq-item::before,
.promise-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        420px circle at var(--mx) var(--my),
        rgba(249, 115, 22, 0.13),
        transparent 45%
    );
    opacity: 0;
    transition: opacity 320ms var(--ease-out);
    z-index: 0;
    mix-blend-mode: plus-lighter;
}

[data-theme="dark"] .service-card::before,
[data-theme="dark"] .benefit-card::before,
[data-theme="dark"] .metric-item::before,
[data-theme="dark"] .credential::before,
[data-theme="dark"] .method::before,
[data-theme="dark"] .faq-item::before,
[data-theme="dark"] .promise-card::before {
    background: radial-gradient(
        420px circle at var(--mx) var(--my),
        rgba(249, 115, 22, 0.22),
        transparent 45%
    );
}

@media (hover: hover) {
    .service-card:hover::before,
    .benefit-card:hover::before,
    .metric-item:hover::before,
    .credential:hover::before,
    .method:hover::before,
    .faq-item:hover::before,
    .promise-card:hover::before { opacity: 1; }
}

/* Make sure card content sits above the spotlight layer */
.service-card > *,
.benefit-card > *,
.metric-item > *,
.credential > *,
.method > *,
.faq-item > *,
.promise-card > * { position: relative; z-index: 1; }

/* ---------- 2. Aurora mesh — extra animated blobs in hero ----------
   Layered with existing .gradient-sphere for richer depth. */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(249, 115, 22, 0.18), transparent 60%),
        radial-gradient(35% 45% at 80% 70%, rgba(59, 130, 246, 0.14), transparent 60%),
        radial-gradient(30% 40% at 60% 20%, rgba(249, 115, 22, 0.10), transparent 60%);
    filter: blur(40px);
    opacity: 0.85;
    animation: auroraDrift 22s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

[data-theme="dark"] .hero-bg::after {
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(249, 115, 22, 0.28), transparent 60%),
        radial-gradient(35% 45% at 80% 70%, rgba(59, 130, 246, 0.22), transparent 60%),
        radial-gradient(30% 40% at 60% 20%, rgba(249, 115, 22, 0.18), transparent 60%);
}

@keyframes auroraDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
    100% { transform: translate3d(-1%, 1.5%, 0) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg::after { animation: none; }
}

/* ---------- 3. Subtle film grain — premium texture ----------
   SVG noise data-URI, fixed to viewport, very light blend. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

[data-theme="dark"] body::after { opacity: 0.06; }
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.02; } }

/* ---------- 4. Magnetic primary buttons + animated sheen ----------
   JS optionally translates with cursor; CSS gives the moving sheen. */
.btn-primary,
.app-store-btns .store-btn {
    position: relative;
    overflow: hidden;
    transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background 280ms var(--ease-out);
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -100%;
    width: 60%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 700ms var(--ease-out);
    pointer-events: none;
}

.btn-primary:hover::after { left: 130%; }

@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px -12px rgba(249, 115, 22, 0.55);
    }
}

/* ---------- 5. Animated gradient text — hero key-phrase highlight ----------
   Use class .gradient-text on a span to apply. */
.gradient-text {
    background: linear-gradient(110deg, var(--primary-color) 0%, #ffb169 35%, var(--primary-color) 70%, #f97316 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease-in-out infinite;
    will-change: background-position;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .gradient-text { animation: none; }
}

/* ---------- 6. Section-tag dot indicator (premium SaaS pattern) ---------- */
.section-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
    flex-shrink: 0;
}

/* ---------- 7. Refined card hover depth (multi-layer shadow) ---------- */
@media (hover: hover) {
    .service-card,
    .benefit-card,
    .credential,
    .method,
    .promise-card {
        transition:
            transform 380ms var(--ease-out),
            border-color 280ms var(--ease-out),
            box-shadow 380ms var(--ease-out),
            background 280ms var(--ease-out);
    }

    .service-card:hover,
    .benefit-card:hover,
    .credential:hover,
    .method:hover {
        transform: translateY(-3px);
        box-shadow:
            0 1px 0 rgba(249, 115, 22, 0.06) inset,
            0 18px 40px -22px rgba(15, 23, 42, 0.28),
            0 6px 18px -10px rgba(249, 115, 22, 0.18);
    }

    [data-theme="dark"] .service-card:hover,
    [data-theme="dark"] .benefit-card:hover,
    [data-theme="dark"] .credential:hover,
    [data-theme="dark"] .method:hover {
        box-shadow:
            0 1px 0 rgba(249, 115, 22, 0.10) inset,
            0 22px 50px -22px rgba(0, 0, 0, 0.6),
            0 8px 22px -10px rgba(249, 115, 22, 0.30);
    }
}

/* ---------- 8. Link underline animation (footer + nav) ---------- */
.footer-links a,
.nav-links a {
    position: relative;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 300ms var(--ease-out), color 200ms var(--ease-out);
}

@media (hover: hover) {
    .footer-links a:hover,
    .nav-links a:hover { background-size: 100% 1px; }
}

html[dir="rtl"] .footer-links a,
html[dir="rtl"] .nav-links a { background-position: 100% 100%; }

/* ---------- 9. Focus-visible polish (accessibility + premium feel) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
}

/* ---------- 10. Selection color matches brand ---------- */
::selection { background: rgba(249, 115, 22, 0.28); color: var(--text-color); }
::-moz-selection { background: rgba(249, 115, 22, 0.28); color: var(--text-color); }

/* Disable the spotlight + sheen on touch devices (no real hover) */
@media (hover: none), (pointer: coarse) {
    .service-card::before,
    .benefit-card::before,
    .metric-item::before,
    .credential::before,
    .method::before,
    .faq-item::before,
    .promise-card::before { display: none; }

    .btn-primary::after { display: none; }
}

/* ==========================================================================
   FAQ + CTA — paired layout
   FAQ accordion left, compact CTA card right (stacks on mobile)
   ========================================================================== */
.faq { padding: 4.5rem 0; }
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
.faq-main { min-width: 0; }
.faq-heading {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin: 0.5rem 0 1.5rem;
}
.faq-list { max-width: none; margin: 0; }

/* Compact CTA card — sits beside FAQ list */
.faq-cta {
    background: var(--primary-color);
    border-radius: 22px;
    padding: 2rem 1.75rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    align-self: start;
}
.faq-cta::before {
    content: '';
    position: absolute;
    inset: -40% -30% auto auto;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.faq-cta-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    position: relative; z-index: 1;
}
.faq-cta-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: #fff;
    position: relative; z-index: 1;
}
.faq-cta-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.9;
    margin: 0 0 1.25rem;
    color: #fff;
    position: relative; z-index: 1;
}
.faq-cta .app-store-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    position: relative; z-index: 1;
}
.faq-cta .store-btn {
    justify-content: flex-start;
    padding: 0.6rem 1rem;
}
.faq-cta-content { position: relative; z-index: 1; }
.faq-cta-phone {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.faq-cta-phone img {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    border-radius: 18px;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,0.28));
    transform: rotate(-3deg);
    transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
    .faq-cta:hover .faq-cta-phone img { transform: rotate(-2deg) translateY(-3px); }
}

@media (max-width: 900px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .faq-cta { padding: 1.75rem 1.5rem; }
    .faq-cta .app-store-btns { flex-direction: row; flex-wrap: wrap; }
    .faq-cta .store-btn { justify-content: center; flex: 1 1 auto; }
    .faq-cta-phone img { max-width: 180px; }
}

@media (max-width: 480px) {
    .faq { padding: 3rem 0; }
    .faq-cta-title { font-size: 1.35rem; }
    .faq-cta-phone { display: none; }
}

/* ==========================================================================
   Contact — tight horizontal row + collapsible form
   ========================================================================== */
.contact { padding: 4.5rem 0; }
.contact-narrow { max-width: 1000px; }
.contact-head { text-align: center; margin-bottom: 2rem; }
.contact-heading {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin: 0.5rem 0 0;
}
.contact-methods-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.contact-methods-row .method { padding: 1rem 1.25rem; gap: 0.85rem; }
.contact-methods-row .method .icon { width: 42px; height: 42px; font-size: 1rem; }
.contact-methods-row .method .label { font-size: 0.95rem; }
.contact-methods-row .method .value { font-size: 0.8rem; }

.contact-form-toggle {
    max-width: 640px;
    margin: 0 auto;
}
.contact-form-toggle > summary {
    list-style: none;
    cursor: pointer;
    text-align: center;
    padding: 0.6rem 1.25rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    transition: background-color var(--dur) var(--ease-out);
    user-select: none;
}
.contact-form-toggle > summary::-webkit-details-marker { display: none; }
.contact-form-toggle > summary::after {
    content: ' ▾';
    opacity: 0.7;
    margin-inline-start: 0.25rem;
}
.contact-form-toggle[open] > summary::after { content: ' ▴'; }
.contact-form-toggle[open] > summary {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.contact-form-toggle #contact-form { margin-top: 1rem; }
.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (hover: hover) {
    .contact-form-toggle > summary:hover {
        background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    }
}
@media (max-width: 700px) {
    .contact-methods-row { grid-template-columns: 1fr; }
    .contact-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .contact { padding: 3rem 0; }
}

/* ==========================================================================
   Service-card price tag — anchors visitors with starting price
   ========================================================================== */
.card-price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 1rem 0 0.5rem;
    padding: 0.45rem 0.85rem;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: 999px;
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1;
}
.card-price-tag .price-from {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    font-weight: 600;
}
.card-price-tag .price-amount {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}
.card-price-tag .price-currency {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* ==========================================================================
   Guarantee Strip — risk-reversal banner between services and brand-promise
   ========================================================================== */
.guarantee-strip {
    padding: 0 0 3rem;
}
.guarantee-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 880px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color) 8%, var(--card-bg)) 0%,
        color-mix(in srgb, var(--primary-color) 4%, var(--card-bg)) 100%);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}
.guarantee-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.guarantee-text { flex: 1; min-width: 0; }
.guarantee-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
}
.guarantee-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
@media (max-width: 600px) {
    .guarantee-card { flex-direction: column; text-align: center; padding: 1.5rem 1.25rem; gap: 0.85rem; }
    .guarantee-title { font-size: 1.15rem; }
}

.guarantee-link {
    display: inline-block;
    margin-top: 0.65rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity var(--dur) var(--ease-out);
}
.guarantee-link:hover { opacity: 0.8; }

/* ==========================================================================
   Subscribe & Save section — surfaces existing monthly packages
   ========================================================================== */
.subscribe-section { padding: 4.5rem 0; background: var(--card-bg); }
.subscribe-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.subscribe-head .section-tag {
    background: color-mix(in srgb, var(--success-color, #10b981) 15%, transparent);
    color: var(--success-color, #10b981);
}
.subscribe-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}
.subscribe-pkg {
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.subscribe-pkg.featured {
    border-color: var(--primary-color);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary-color) 6%, var(--bg-color, #fff)) 0%,
        var(--bg-color, #fff) 100%);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--primary-color) 18%, transparent);
}
@media (hover: hover) {
    .subscribe-pkg:hover { transform: translateY(-4px); border-color: var(--primary-color); }
}
.pkg-tag {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.subscribe-pkg.featured .pkg-tag {
    background: var(--primary-color);
    color: #fff;
}
.pkg-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin: 0 0 0.85rem;
    line-height: 1.25;
}
.pkg-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.pkg-amount {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}
.pkg-currency {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.pkg-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}
.subscribe-trust {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .subscribe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .subscribe-section { padding: 3rem 0; }
    .subscribe-grid { grid-template-columns: 1fr; }
    .pkg-amount { font-size: 1.85rem; }
}

/* ==========================================================================
   B2B Section — for property managers, Airbnb hosts, real estate
   ========================================================================== */
.b2b-section { padding: 4.5rem 0; }
.b2b-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.b2b-content { min-width: 0; }
.b2b-heading {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    color: var(--text-primary);
    margin: 0.5rem 0 1rem;
}
.b2b-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.b2b-points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}
.b2b-points li {
    position: relative;
    padding-inline-start: 1.5rem;
    margin-bottom: 0.55rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.b2b-points li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: var(--primary-color);
    font-weight: 700;
}
.b2b-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.b2b-cta-row .btn-primary,
.b2b-cta-row .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.b2b-cta-row .btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color, #e5e7eb);
}
.b2b-cta-row .btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.b2b-visual {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.b2b-stat {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
}
.b2b-stat-num {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    flex: 0 0 auto;
}
.b2b-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .b2b-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
    .b2b-section { padding: 3rem 0; }
}

/* ==========================================================================
   Footer redesign — adds tagline / Al-Jazeera badge / store buttons /
   Product + Company + Support + Legal columns
   ========================================================================== */
.footer-tagline {
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 36ch;
    margin-bottom: 1rem;
}
.footer-badge {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}
.footer-stores {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.footer-store-btn {
    background: var(--text-primary);
    color: var(--bg-color, #fff);
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    font-size: 0.85rem;
    transition: opacity var(--dur) var(--ease-out);
}
.footer-store-btn:hover { opacity: 0.85; }
.footer-store-btn i { font-size: 1.15rem; }
.footer-store-btn .store-text { display: flex; flex-direction: column; line-height: 1.05; }
.footer-store-btn .store-sm { font-size: 0.6rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-store-btn .store-lg { font-size: 0.9rem; font-weight: 600; }

/* Allow 4-col layout when there are 4 link columns */
.footer-links { gap: 2rem; }
@media (min-width: 900px) {
    .footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}