/*
 * Davaya marketing site — no framework, mobile-first, RTL/LTR via logical properties.
 *
 * Colour system derived from the logo: Dark Blue #2C5B80, Green #45A76C, Teal #7CC5B5, Light Green #96CF86.
 * WCAG 2.x contrast ratios (computed with the relative-luminance formula):
 *   #FFFFFF on #45A76C (brand green) ....... 3.00:1  -> fails 4.5 for normal text; used for accents, icons, large text and borders only.
 *   #FFFFFF on #2E8553 (--color-primary-strong, button bg) ... 4.57:1  AA normal text
 *   #FFFFFF on #2A7A4C (--color-primary-hover) ............... 5.27:1
 *   #FFFFFF on #236A41 (--color-primary-active) .............. 6.54:1
 *   #FFFFFF on #2C5B80 (--color-secondary) ................... 7.20:1
 *   #FFFFFF on #234A69 (--color-secondary-hover) ............. 9.31:1
 *   #16324A (--color-heading)   on #F7FAF8 bg 12.57:1 · on #FFFFFF 13.21:1 · on #EEF4F2 11.87:1
 *   #2B3F52 (--color-text-main) on #F7FAF8 bg 10.32:1 · on #FFFFFF 10.85:1 · on #EEF4F2  9.74:1
 *   #53677A (--color-text-muted) on #F7FAF8 bg 5.57:1 · on #FFFFFF  5.85:1 · on #EEF4F2  5.25:1
 *   #2C5B80 (links) on #F7FAF8 6.86:1 · #2E8553 (green text) on #FFFFFF 4.57:1
 *   Footer: #C9D6E0 on #16324A 8.92:1 · #7CC5B5 on #16324A 6.61:1
 */
:root {
    --color-primary: #45A76C;
    --color-primary-strong: #2E8553;
    --color-primary-hover: #2A7A4C;
    --color-primary-active: #236A41;
    --color-primary-tint: #E3F3E8;
    --color-secondary: #2C5B80;
    --color-secondary-hover: #234A69;
    --color-secondary-tint: #E6EEF5;
    --color-accent: #7CC5B5;
    --color-accent-soft: #96CF86;
    --color-heading: #16324A;
    --color-text-main: #2B3F52;
    --color-text-muted: #53677A;
    --color-border: #DCE6E3;
    --color-border-strong: #B9CAC6;
    --color-icon: #2C5B80;
    --color-bg: #F7FAF8;
    --color-surface: #FFFFFF;
    --color-surface-alt: #EEF4F2;
    --color-footer: #16324A;
    --color-footer-text: #C9D6E0;
    --color-danger: #B42318;
    --color-danger-tint: #FDECEA;
    --color-wa: #1F7A4A;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(22, 50, 74, .06), 0 1px 3px rgba(22, 50, 74, .05);
    --shadow-md: 0 6px 18px rgba(22, 50, 74, .08);
    --shadow-lg: 0 20px 50px rgba(22, 50, 74, .14);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --container: 1180px;
    --gutter: 16px;
    --header-h: 64px;

    --font-body: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
    --font-head: 'Cairo', 'Almarai', 'Segoe UI', Tahoma, sans-serif;
    --font-latin: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.lang-en { --font-body: var(--font-latin); --font-head: var(--font-latin); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.lang-en body, body.lang-en { line-height: 1.6; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); color: var(--color-heading); line-height: 1.3; margin: 0 0 var(--space-3); }
.lang-en h1, .lang-en h2, .lang-en h3 { letter-spacing: -.02em; line-height: 1.2; }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-secondary); text-underline-offset: 3px; }
a:hover { color: var(--color-secondary-hover); }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; border-radius: 4px; }
ul, ol { margin: 0; padding: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 820px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--space-4); top: -60px; z-index: 100; background: var(--color-secondary); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-3); color: #fff; }

.icon { width: 22px; height: 22px; flex: none; vertical-align: middle; }
.icon-sm { width: 18px; height: 18px; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 10px 20px;
    border: 2px solid transparent; border-radius: var(--radius-md);
    font: 700 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 13px 24px; font-size: 16px; border-radius: var(--radius-md); }
.btn-block { width: 100%; }
.btn-primary { background: var(--color-primary-strong); color: #fff; box-shadow: 0 6px 16px rgba(46, 133, 83, .25); }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-primary:active { background: var(--color-primary-active); transform: translateY(1px); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background: var(--color-secondary-hover); color: #fff; }
.btn-outline { background: var(--color-surface); color: var(--color-secondary); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-secondary); color: var(--color-secondary-hover); background: var(--color-secondary-tint); }
.btn-light { background: #fff; color: var(--color-heading); }
.btn-light:hover { background: var(--color-primary-tint); color: var(--color-heading); }
.btn-wa { background: var(--color-wa); color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-wa:hover { background: #18633C; color: #fff; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.header-inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: inline-flex; flex: none; }
.brand-logo { height: 40px; width: auto; aspect-ratio: 523 / 167; display: block; }
.main-nav { display: none; margin-inline-start: auto; }
.main-nav ul { display: flex; gap: var(--space-1); list-style: none; }
.main-nav a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--color-text-main); text-decoration: none; font-weight: 700; font-size: 15px; }
.main-nav a:hover { background: var(--color-surface-alt); color: var(--color-heading); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.main-nav + .header-actions { margin-inline-start: var(--space-3); }
.lang-switch { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; text-decoration: none; color: var(--color-secondary); font-family: 'Almarai', var(--font-latin); }
.lang-ar .lang-switch { font-family: var(--font-latin); }
.lang-switch:hover { background: var(--color-surface-alt); }
@media (max-width: 380px) {
    .brand-logo { height: 34px; }
    .header-actions .btn-sm { padding: 8px 10px; }
}
@media (min-width: 900px) {
    .main-nav { display: block; }
    .brand-logo { height: 46px; }
    :root { --header-h: 72px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-8); }
.section-alt { background: var(--color-surface-alt); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto var(--space-7); }
.section-head h2 { font-size: clamp(26px, 5vw, 38px); }
.section-head p:last-child { color: var(--color-text-muted); font-size: 17px; margin: 0; }
.eyebrow {
    display: inline-block; margin-bottom: var(--space-3);
    padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--color-primary-tint); color: var(--color-primary-active);
    font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
@media (min-width: 900px) { .section { padding-block: var(--space-9); } }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    padding-block: var(--space-7) var(--space-8);
    background:
        radial-gradient(600px 360px at 85% 10%, rgba(124, 197, 181, .22), transparent 70%),
        radial-gradient(520px 320px at 10% 90%, rgba(150, 207, 134, .18), transparent 70%),
        var(--color-bg);
}
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.hero h1 { font-size: clamp(30px, 7.4vw, 54px); font-weight: 800; margin-bottom: var(--space-4); }
.hero h1 .hl { color: var(--color-primary-strong); }
.lead { font-size: clamp(17px, 2.4vw, 19px); color: var(--color-text-muted); max-width: 40em; }
.hero-url {
    display: inline-block; max-width: 100%; overflow-wrap: anywhere;
    margin-bottom: var(--space-5); padding: 6px 14px;
    background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-pill);
    font: 600 15px/1.5 var(--font-latin); color: var(--color-text-muted);
}
.hero-url-slug { color: var(--color-primary-strong); font-weight: 700; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-row .btn { flex: 1 1 200px; }
.demo-dash { margin: var(--space-3) 0 0; font-size: 15px; }
.demo-dash a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.trust-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin-top: var(--space-5); color: var(--color-text-muted); font-size: 15px; }
.trust-list li { display: inline-flex; align-items: center; gap: 6px; }
.trust-list .icon { color: var(--color-primary-strong); }
@media (min-width: 600px) { .cta-row .btn { flex: 0 0 auto; } }
@media (min-width: 980px) {
    .hero { padding-block: var(--space-8) var(--space-9); }
    .hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); }
}

/* Hero product mock (decorative) */
.hero-visual { position: relative; min-height: 420px; max-width: 560px; width: 100%; margin-inline: auto; }
.mock-dash {
    position: absolute; inset-inline-start: 0; top: 30px; width: 88%;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.mock-dash-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); }
.mock-dash-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); }
.mock-dash-body { display: flex; min-height: 280px; }
.mock-side { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; background: var(--color-secondary); }
.mock-side i { display: block; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .22); }
.mock-side i.on { background: var(--color-accent-soft); }
.mock-main { flex: 1; padding: 14px; padding-inline-end: 38%; min-width: 0; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-kpis div { padding: 8px; border-radius: var(--radius-sm); background: var(--color-bg); border: 1px solid var(--color-border); min-width: 0; }
.mock-kpis b { display: block; font-size: 10px; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-kpis strong { font: 800 18px/1.2 var(--font-latin); color: var(--color-heading); }
.mock-chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; margin: 14px 0; padding: 8px; border-radius: var(--radius-sm); background: linear-gradient(var(--color-surface-alt), var(--color-surface)); }
.mock-chart i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(var(--color-primary), var(--color-accent)); }
.mock-orders { display: grid; gap: 8px; }
.mock-orders div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.mock-line { display: block; height: 8px; border-radius: 4px; background: var(--color-border); }
.w45 { width: 45%; } .w55 { width: 55%; } .w60 { width: 60%; } .w80 { width: 80%; }
.chip { flex: none; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; }
.chip-new { background: var(--color-primary-tint); color: var(--color-primary-active); }
.chip-rx { background: var(--color-secondary-tint); color: var(--color-secondary); }
.chip-go { background: #FFF3DC; color: #7A4B00; }

.mock-phone {
    position: absolute; inset-inline-end: 0; top: 0; width: 200px;
    padding: 26px 12px 14px; border-radius: 32px;
    background: var(--color-surface); border: 8px solid var(--color-heading);
    box-shadow: var(--shadow-lg);
}
.mock-phone-notch { position: absolute; top: 6px; left: 50%; width: 60px; height: 8px; margin-left: -30px; border-radius: 6px; background: var(--color-heading); }
.mock-store-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mock-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); flex: none; }
.mock-store-name { font: 800 12px/1.3 var(--font-head); color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-search { padding: 6px 10px; margin-bottom: 8px; border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-rx-btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--color-primary-strong); color: #fff; font-size: 11px; font-weight: 700; }
.mock-rx-btn .icon { width: 14px; height: 14px; }
.mock-cats { display: flex; gap: 4px; margin-bottom: 8px; }
.mock-cats span { padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: 10px; color: var(--color-text-muted); }
.mock-cats span.on { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.mock-products { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mock-product { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.mock-img { display: block; height: 42px; border-radius: 6px; background: var(--color-surface-alt); }
.mock-img.v0 { background: linear-gradient(135deg, #E3F3E8, #CFE9DA); }
.mock-img.v1 { background: linear-gradient(135deg, #E6EEF5, #D2E0EC); }
.mock-img.v2 { background: linear-gradient(135deg, #E4F4F0, #CBE9E1); }
.mock-img.v3 { background: linear-gradient(135deg, #EEF7E9, #DCEFD2); }
.mock-price { font: 800 11px/1 var(--font-latin); color: var(--color-primary-active); }
.mock-cart { margin-top: 8px; padding: 7px; border-radius: var(--radius-sm); background: var(--color-heading); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.mock-toast {
    position: absolute; inset-inline-start: 6%; bottom: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: var(--radius-md);
    background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
    font-size: 13px; font-weight: 700; color: var(--color-heading);
    animation: toast-in 4s ease-in-out infinite;
}
.mock-toast .icon { color: var(--color-primary-strong); }
@keyframes toast-in {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (max-width: 480px) {
    .hero-visual { min-height: 380px; }
    .mock-dash { width: 100%; top: 60px; }
    .mock-main { padding-inline-end: 44%; }
    .mock-kpis { grid-template-columns: 1fr; }
    .mock-kpis div:nth-child(n+2) { display: none; }
    .mock-phone { width: 168px; }
    .mock-toast { inset-inline-start: 0; }
}

/* ---------- Features ---------- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); list-style: none; }
.feature-card {
    padding: var(--space-5); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
    display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-4);
    border-radius: var(--radius-md); background: var(--color-primary-tint); color: var(--color-primary-active);
}
.feature-card:nth-child(3n+2) .feature-icon { background: var(--color-secondary-tint); color: var(--color-icon); }
.feature-card:nth-child(3n) .feature-icon { background: #E4F4F0; color: #1E6B5C; }
.feature-card h3 { font-size: 18px; margin-bottom: var(--space-2); }
.nowrap { white-space: nowrap; }
@media (max-width: 599px) {
    .feature-card { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-4); padding: var(--space-4); }
    .feature-icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
    .feature-card h3 { font-size: 17px; margin-bottom: 2px; }
}
.feature-card p { margin: 0; color: var(--color-text-muted); font-size: 15px; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--space-4); list-style: none; counter-reset: step; }
.step { position: relative; padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.step-num {
    display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: var(--space-3);
    border-radius: 50%; background: var(--color-secondary); color: #fff;
    font: 800 18px/1 var(--font-latin);
}
.step h3 { font-size: 18px; margin-bottom: var(--space-2); }
.step p { margin: 0; color: var(--color-text-muted); font-size: 15px; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
    .steps { grid-template-columns: repeat(4, 1fr); }
    .step:not(:last-child)::after {
        content: ""; position: absolute; top: 45px; inset-inline-end: calc(var(--space-4) * -1); width: var(--space-4); height: 2px; background: var(--color-accent);
    }
}

/* ---------- Pricing ---------- */
.cycle-switch {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
    width: fit-content; max-width: 100%; margin: 0 auto var(--space-6); padding: 4px;
    border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface);
}
.cycle-switch[hidden] { display: none; }
@media (max-width: 479px) {
    .cycle-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--radius-lg); }
    .cycle-switch span { width: 100%; justify-content: center; }
}
.cycle-switch label { position: relative; }
.cycle-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cycle-switch span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
    border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; color: var(--color-text-main); cursor: pointer;
}
.cycle-switch em { font-style: normal; font-size: 12px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary-active); font-family: var(--font-latin); }
.cycle-switch input:checked + span { background: var(--color-secondary); color: #fff; }
.cycle-switch input:checked + span em { background: rgba(255, 255, 255, .2); color: #fff; }
.cycle-switch input:focus-visible + span { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

.plans { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 680px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
    position: relative; display: flex; flex-direction: column;
    padding: var(--space-5); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.plan-featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-lg); }
.plan-badge {
    position: absolute; top: -13px; inset-inline-start: var(--space-5); margin: 0;
    padding: 2px 12px; border-radius: var(--radius-pill);
    background: var(--color-primary-strong); color: #fff; font-size: 13px; font-weight: 700;
}
.plan h3 { font-size: 22px; margin-bottom: var(--space-1); }
.plan-tagline { color: var(--color-text-muted); font-size: 14px; min-height: 3.5em; margin-bottom: var(--space-4); }
.plan-price { margin-bottom: var(--space-4); min-height: 100px; }
.price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; }
.price-amount { font: 800 40px/1.1 var(--font-latin); color: var(--color-heading); letter-spacing: -.02em; }
.lang-ar .price-amount.price-text, .lang-ar .plan-price .price-amount:not([data-price-amount]) { font-family: var(--font-head); }
.price-text { font-size: 30px; }
.price-unit { color: var(--color-text-muted); font-weight: 700; font-size: 15px; }
.price-note { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 13px; min-height: 1.6em; }
.plan-trial { margin: 0 0 var(--space-3); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-primary-tint); color: var(--color-primary-active); font-size: 14px; font-weight: 700; text-align: center; }
.plan-trial.is-empty { display: none; }
@media (min-width: 680px) { .plan-trial.is-empty { display: block; visibility: hidden; min-height: 37px; } }
.plan .btn { margin-bottom: var(--space-5); }
.plan-limits { list-style: none; display: grid; gap: 2px; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.plan-limits li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; padding: 3px 0; }
.plan-limits strong { color: var(--color-heading); font-family: var(--font-latin); }
.lang-ar .plan-limits strong { font-family: var(--font-body); }
.plan-limits .is-off { color: var(--color-text-muted); }
.plan-features { list-style: none; display: grid; gap: 6px; }
.plan-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; }
.plan-features .icon { margin-top: 1px; }
.plan-features .is-on .icon { color: var(--color-primary-strong); }
.plan-features .is-off { color: var(--color-text-muted); }
.plan-features .is-off span:not(.sr-only) { text-decoration: line-through; text-decoration-color: rgba(83, 103, 122, .4); }
.plan-features .is-off .icon { color: #9AAAB8; }
.pricing-foot { margin: var(--space-6) auto 0; max-width: 720px; text-align: center; color: var(--color-text-muted); font-size: 14px; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: var(--space-4); list-style: none; }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); border-inline-start: 4px solid var(--color-accent); }
.quote blockquote { margin: 0 0 var(--space-3); }
.quote blockquote p { margin: 0; font-size: 16px; color: var(--color-heading); }
.quote-by { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-text-muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--space-3); }
.faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.faq details[open] { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
    font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--color-heading);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
    border-right: 2px solid var(--color-secondary); border-bottom: 2px solid var(--color-secondary);
    transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details p { margin: 0; padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); }

/* ---------- Final CTA ---------- */
.final-cta { padding-block: var(--space-8); background: linear-gradient(135deg, var(--color-secondary) 0%, #1F4A6B 55%, #24705A 100%); color: #fff; }
.final-cta-inner { text-align: center; max-width: 760px; }
.final-cta h2 { color: #fff; font-size: clamp(26px, 5vw, 38px); }
.final-cta p { color: #E4EEF5; font-size: 18px; margin-bottom: var(--space-6); }
.cta-center { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-footer); color: var(--color-footer-text); padding-top: var(--space-7); font-size: 15px; }
.site-footer a { color: var(--color-footer-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-name { font: 800 22px/1.2 var(--font-head); color: #fff; margin-bottom: var(--space-2); }
.footer-title { font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; display: grid; gap: var(--space-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-7); padding-block: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.footer-bottom p { margin: 0; }
@media (min-width: 900px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
    .footer-brand { grid-column: auto; max-width: 360px; }
}

/* ---------- Register ---------- */
.register-section { padding-block: var(--space-6) var(--space-8); }
.register-grid { display: grid; gap: var(--space-6); align-items: start; }
.register-aside h1 { font-size: clamp(28px, 6vw, 42px); }
.check-list { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.check-list li { position: relative; padding-inline-start: 32px; }
.check-list li::before {
    content: ""; position: absolute; inset-inline-start: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%;
    background: var(--color-primary-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23236A41' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.register-card { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
@media (min-width: 960px) {
    .register-grid { grid-template-columns: 1fr 1.25fr; gap: var(--space-8); }
    .register-aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
    .register-card { padding: var(--space-6); }
}
.form-alert { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-danger-tint); color: var(--color-danger); font-weight: 700; }
.form-group { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.form-group legend { padding: 0; margin-bottom: var(--space-3); font: 700 15px/1.4 var(--font-head); color: var(--color-secondary); }
.field { margin-bottom: var(--space-4); min-width: 0; }
.field-row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; color: var(--color-heading); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"] {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-heading);
    font: 16px/1.4 var(--font-body);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input[dir="ltr"] { font-family: var(--font-latin); text-align: left; }
.field input::placeholder { color: #7D8D9B; }
.field input:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(44, 91, 128, .18); }
.has-error input, .field input[aria-invalid="true"] { border-color: var(--color-danger); }
.field-hint { margin: 6px 0 0; font-size: 13px; color: var(--color-text-muted); }
.field-error { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--color-danger); }
.slug-input { display: flex; align-items: stretch; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.slug-input:focus-within { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(44, 91, 128, .18); }
.slug-input input[type="text"] { flex: 1 1 auto; min-width: 0; border: 0 !important; box-shadow: none !important; border-radius: 0; font-family: var(--font-latin); text-align: left; }
.slug-suffix { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--color-surface-alt); color: var(--color-text-muted); font: 600 14px/1 var(--font-latin); white-space: nowrap; border-left: 1px solid var(--color-border); max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
.has-error .slug-input, .slug-input.is-bad { border-color: var(--color-danger); }
.slug-input.is-ok { border-color: var(--color-primary-strong); }
.slug-status { margin: 6px 0 0; font-size: 14px; font-weight: 700; min-height: 1.5em; }
.slug-status:empty { min-height: 0; margin: 0; }
.slug-status.is-ok { color: var(--color-primary-active); }
.slug-status.is-bad { color: var(--color-danger); }
.slug-status.is-wait { color: var(--color-text-muted); font-weight: 400; }
.slug-status bdi { font-family: var(--font-latin); display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.field-check { margin-top: var(--space-2); }
.check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--color-primary-strong); }
.form-foot { margin: var(--space-3) 0 0; text-align: center; font-size: 14px; color: var(--color-text-muted); }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; inset-inline-start: -10000px; }

/* ---------- Legal ---------- */
.legal { padding-block: var(--space-6) var(--space-8); }
.legal-head { margin-bottom: var(--space-5); }
.legal-head h1 { font-size: clamp(28px, 6vw, 40px); }
.legal-meta, .legal-alt { color: var(--color-text-muted); font-size: 15px; margin-bottom: var(--space-2); }
.legal-notice { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: #FFF6E5; border: 1px solid #F1D9A6; border-inline-start: 4px solid #C98A12; color: #5C3F00; }
.legal-toc { margin-bottom: var(--space-6); padding: var(--space-5); background: var(--color-surface-alt); border-radius: var(--radius-md); }
.legal-toc .footer-title { color: var(--color-secondary); }
.legal-toc ol { padding-inline-start: 1.4em; display: grid; gap: 4px; }
@media (min-width: 640px) { .legal-toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }
.legal-section { margin-bottom: var(--space-6); }
.legal-section h2 { font-size: 22px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.legal-num { color: var(--color-primary-strong); font-family: var(--font-latin); }
.legal-section ul { padding-inline-start: 1.3em; display: grid; gap: var(--space-2); }
.legal-section li::marker { color: var(--color-primary); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- Pricing on phones: compact cards in a swipeable row, Pro first, only what each plan includes ---- */
.plans-hint { display: none; }
@media (max-width: 679px) {
  .plans-hint { display: block; text-align: center; color: var(--color-text-muted); font-size: 13px; margin: 0 0 var(--space-2); }
  .plans-hint span { font-family: var(--font-latin); letter-spacing: 2px; }
  .plans {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px; padding: 14px 16px 18px; align-items: stretch; scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plans:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: -2px; border-radius: var(--radius-lg); }
  .plan { scroll-snap-align: center; padding: 18px 16px; display: flex; flex-direction: column; }
  .plan-featured { order: -1; }
  .plan h3 { font-size: 20px; }
  .plan-tagline { min-height: 0; margin-bottom: 10px; font-size: 13px; }
  .plan-price { min-height: 0; margin-bottom: 10px; }
  .price-amount { font-size: 32px; }
  .price-text { font-size: 24px; }
  .plan .btn { margin-bottom: 14px; min-height: 46px; }
  .plan-limits { padding-bottom: 10px; margin-bottom: 10px; }
  .plan-limits li { font-size: 13px; padding: 2px 0; }
  .plan-features { gap: 4px; }
  .plan-features li { font-size: 13px; }
  .plan-features .is-off, .plan-limits .is-off { display: none; }
  .cycle-switch span { padding-block: 10px; }
}

/* ---- modules section + directory call-to-action ---- */
.module-group-title { font-family: var(--font-head); font-size: 18px; color: var(--color-heading); margin: var(--space-6) 0 var(--space-3); display: flex; align-items: center; gap: 10px; }
.module-group-title::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.modules-grid { margin-bottom: var(--space-2); }
.plan-chip { display: inline-block; vertical-align: middle; margin-inline-start: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary-active); font-size: 12px; font-weight: 700; font-family: var(--font-body); white-space: nowrap; }
.directory-cta { padding-block: var(--space-6); }
.directory-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-secondary), #1f4766); color: #fff; }
.directory-cta-in h2 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.directory-cta-in p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 560px; }
.directory-cta-in .btn { background: #fff; color: var(--color-secondary); border-color: #fff; }
.directory-cta-in .btn:hover { background: #eef4f9; }
@media (max-width: 679px) { .directory-cta-in { padding: var(--space-5); } .directory-cta-in .btn { width: 100%; justify-content: center; } }