/* ============================================================================
   Landing page — the public page at / for anonymous visitors (2026-09-17)
   ============================================================================
   Loaded on templates/landing/index.html only, through head-with-css, like
   login.css. plans/public-landing-page-plan.md.

   EVERY colour is a design token (CLAUDE.md rule 40), so the page follows the
   visitor's design and theme with no per-design rule:
     - the page is --bg, cards are --card;
     - the dark "why" band is --sidebar-bg, the app's own chrome surface;
     - the brand as an ACCENT is --nav-active-a (mixed into soft glows);
     - the brand as TEXT is --primary; as a FILL behind a label it is
       --primary-fill under --on-primary-fill — never stretched to a wall;
     - the «ت» mark is the tibyan-mark.svg MASK, so no design needs a file.

   Logical properties only, so RTL and LTR share every rule. Geometry of .btn
   goes through Bootstrap's own --bs-btn-* variables (rule 36). Motion is GSAP
   (landing.js); the CSS only carries hover transitions on named properties.
   ============================================================================ */

/* ============================================================================
   Type — Cairo, and ONLY on this page (2026-09-25)
   ============================================================================
   The app keeps --font-sans, the device's own Segoe UI / SF / Roboto stack:
   nothing downloads on a signed-in screen, and CLAUDE.md's measured numbers
   (the 270px stat-tile floor, the clamped columns, the 260px rail) were taken
   in it and stay valid. This page is the exception, and the reason is Arabic.

   --font-sans names no Arabic family, so each OS picks its own: Segoe UI on
   Windows, SF Arabic on a Mac or an iPhone, Noto Naskh on Android — three
   different Arabic faces for the one page whose type IS the design. Cairo
   pins it to one, the same face mostashar.tech serves, and its Latin sits
   beside its Arabic so the `en` locale reads as one family too.

   The file is the hub's subset (hub/assets/fonts/cairo.woff2): the variable
   face instanced to weights 400-800, no slant, Arabic + Latin only — 43 KB
   instead of 600 KB. SIL OFL 1.1; the rebuild recipe is in the hub's README.

   `swap` so the page paints in --font-sans and reflows once, plus a preload in
   the template's head so that swap lands before first paint. font-src stays
   'self'; service-worker.js serves /fonts/ cache-first beside the libs.
   ============================================================================ */
@font-face {
    font-family: "Cairo";
    src: url("/fonts/cairo.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

.landing-page {
    --landing-topbar-h: 72px;
    --landing-gutter: 1rem;
    --landing-glow: color-mix(in srgb, var(--nav-active-a) 16%, transparent);
    --landing-glow-soft: color-mix(in srgb, var(--nav-active-a) 8%, transparent);
    display: block;
    /* Scoped to the page, never to --font-sans: the token is SHARED (D5) and
       every app screen reads it. */
    font-family: "Cairo", var(--font-sans);
}

html:has(> body.landing-page) {
    scroll-padding-top: calc(var(--landing-topbar-h) + 0.75rem);
}

@media (prefers-reduced-motion: no-preference) {
    html:has(> body.landing-page) {
        scroll-behavior: smooth;
    }
}

.landing-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--landing-gutter);
}

@media (min-width: 576px) {
    .landing-page { --landing-gutter: 1.5rem; }
}

/* Skip link — invisible until it takes keyboard focus. */
.landing-skip {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -100px;
    z-index: var(--z-toast, 1090);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-btn);
    background: var(--primary-fill-solid);
    color: var(--on-primary-fill);
    font-weight: 600;
    text-decoration: none;
}

.landing-skip:focus {
    inset-block-start: 1rem;
}

/* ============================================================================
   The «ت» mark — a mask over a filled box, as the sidebar and login build it.
   On this page it sits on --bg / --card, so the box is the brand as a FILL.
   NEVER WRITE `--` INSIDE tibyan-mark.svg's COMMENT — see CLAUDE.md.
   ============================================================================ */
.landing-brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 12px;
    background: var(--primary-fill);
    box-shadow: 0 6px 18px var(--nav-active-shadow);
}

.landing-brand-mark::before {
    content: "";
    inline-size: 60%;
    block-size: 60%;
    background: var(--on-primary-fill);
    -webkit-mask: url('/imgs/icons/tibyan-mark.svg') center / contain no-repeat;
    mask: url('/imgs/icons/tibyan-mark.svg') center / contain no-repeat;
}

/* ============================================================================
   Top bar
   ============================================================================ */
.landing-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky, 1020);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--transition-normal, 0.2s ease),
                box-shadow var(--transition-normal, 0.2s ease);
}

.landing-topbar[data-scrolled] {
    border-block-end-color: var(--border);
    box-shadow: var(--shadow-sm);
}

/* iOS: room for the status bar. Not gated on display-mode — see "iOS PWA
   SAFE-AREA" in _layout.css. */
.landing-topbar {
    padding-block-start: env(safe-area-inset-top, 0px);
}

/* The status-bar band, as .app-topbar paints it (see "iOS PWA SAFE-AREA" in
   _layout.css): the app's own home-screen icon draws white system text, and
   in the light theme this bar is near-white. Gated, like that band. */
@media (display-mode: standalone) {
    .landing-topbar {
        background: linear-gradient(var(--sidebar-bg, #0f1419) 0,
                                    var(--sidebar-bg, #0f1419) env(safe-area-inset-top, 0px),
                                    color-mix(in srgb, var(--bg) 86%, transparent) env(safe-area-inset-top, 0px));
    }
}

.landing-topbar-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: var(--landing-topbar-h);
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}

.landing-brand:hover {
    color: var(--text);
}

.landing-brand-words {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.landing-brand-name {
    font-size: 1.25rem;
    font-weight: 800;
}

.landing-brand-tagline {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
}

.landing-nav a {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-nav);
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast, 0.15s ease),
                background-color var(--transition-fast, 0.15s ease);
}

.landing-nav a:hover,
.landing-nav a:focus-visible {
    color: var(--text);
    background: var(--bg-secondary);
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Round icon buttons — the login corner's shape, sized to the bar. */
.landing-icon-btn {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: var(--radius-circle, 50%);
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1;
    flex: 0 0 auto;
    inline-size: 42px;
    block-size: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.landing-icon-btn i {
    font-size: 1.05rem;
}

.landing-lang-toggle span:lang(ar) {
    translate: 0 -0.2em;
}

.landing-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.landing-menu-btn {
    display: none;
}

/* ≤991px: the in-page links fold behind «⋮» (D11). data-open is set by
   landing.js; without the script the links are still reachable further down
   the page, and the footer repeats all of them. */
@media (max-width: 991.98px) {
    .landing-menu-btn {
        display: inline-flex;
    }

    .landing-actions {
        margin-inline-start: auto;
    }

    .landing-nav {
        display: none;
        position: absolute;
        inset-block-start: calc(100% + 0.25rem);
        inset-inline: var(--landing-gutter);
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        margin: 0;
        padding: 0.5rem;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-lg);
    }

    .landing-nav[data-open] {
        display: flex;
    }

    .landing-nav a {
        padding: 0.75rem 1rem;
    }
}

/* A phone keeps the mark, the name and the four buttons on one line. The
   login label becomes visually hidden rather than display:none, so the link
   keeps its accessible name. */
@media (max-width: 575.98px) {
    .landing-brand-tagline {
        display: none;
    }

    .landing-actions {
        gap: 0.35rem;
    }
}

@media (max-width: 479.98px) {
    .landing-login-btn {
        --bs-btn-padding-x: 0;
        --bs-btn-padding-y: 0;
        inline-size: 42px;
        block-size: 42px;
        justify-content: center;
        border-radius: var(--radius-circle, 50%);
    }

    .landing-login-btn span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ============================================================================
   Shared section vocabulary
   ============================================================================ */
.landing-section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.landing-section-head {
    max-width: 720px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--chip-primary-bg);
    color: var(--chip-primary-fg);
    font-size: 0.85rem;
    font-weight: 700;
}

.landing-section-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--text);
}

.landing-section-lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ============================================================================
   Hero
   ============================================================================ */
.landing-hero {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
    /* Both glows fade out INSIDE the section. One centred near the bottom edge
       was cut by the section boundary and drew a visible horizontal seam where
       the features section begins. */
    background-image:
        radial-gradient(55% 50% at 85% 12%, var(--landing-glow), transparent 70%),
        radial-gradient(40% 40% at 8% 55%, var(--landing-glow-soft), transparent 70%);
    overflow: hidden;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 992px) {
    .landing-hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    }
}

.landing-hero-title {
    margin: 0 0 1.1rem;
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
}

/* The one place the two scripts need different leading. Cairo sets this
   headline larger than Segoe UI did and wraps the Arabic to three lines, and
   an Arabic descender — the ج of «بوضوح» — drops far enough at 1.3 to reach
   the line beneath it. Latin descenders are shallow and 1.3 already clears
   them, so widening both would only leave the English headline airy. */
.landing-hero-title:lang(ar) {
    line-height: 1.45;
}

.landing-hero-lead {
    margin: 0 0 1.75rem;
    max-width: 38rem;
    font-size: clamp(1.02rem, 1.4vw, 1.15rem);
    line-height: 1.9;
    color: var(--text-secondary);
}

.landing-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1.75rem;
}

.landing-hero-ctas .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.landing-cta-primary {
    box-shadow: var(--shadow-primary);
}

.landing-hero-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
}

.landing-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
}

.landing-hero-points i {
    color: var(--primary);
}

@media (max-width: 575.98px) {
    .landing-hero-ctas .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ── The product drawing ──────────────────────────────────────────────── */
.landing-mock {
    display: flex;
    min-width: 0;
    border-radius: var(--radius-modal);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.landing-mock-rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 0.75rem;
    background: var(--sidebar-bg);
    color: var(--sidebar-icon);
    font-size: 0.95rem;
}

.landing-mock-rail i {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: var(--radius-icon-btn);
}

.landing-mock-rail i:nth-of-type(1) {
    background: linear-gradient(135deg, var(--nav-active-a), var(--nav-active-b));
    color: var(--nav-active-text);
    box-shadow: 0 4px 12px var(--nav-active-shadow);
}

/* On --sidebar-bg the rail's arrangement is INVERTED, exactly as the login
   panel does it: --logo-bg is the rail colour, so it becomes the letter. */
.landing-mock-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    background: var(--logo-fg);
    margin-block-end: 0.35rem;
}

.landing-mock-mark::before {
    content: "";
    inline-size: 60%;
    block-size: 60%;
    background: var(--logo-bg);
    -webkit-mask: url('/imgs/icons/tibyan-mark.svg') center / contain no-repeat;
    mask: url('/imgs/icons/tibyan-mark.svg') center / contain no-repeat;
}

.landing-mock-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.1rem 1.25rem 1.25rem;
    background: var(--bg);
}

.landing-mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 1rem;
    font-weight: 800;
    color: var(--text);
}

.landing-mock-dots {
    display: inline-flex;
    gap: 0.3rem;
}

.landing-mock-dots i {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--border-strong);
}

.landing-mock-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-block-end: 1rem;
}

.landing-mock-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.75rem;
    border-radius: var(--radius-card);
    background: var(--card);
    border: 1px solid var(--border);
}

.landing-mock-stat i {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    margin-block-end: 0.25rem;
    border-radius: var(--radius-icon-btn);
    font-size: 0.8rem;
}

.landing-mock-stat:nth-child(1) i { background: var(--chip-primary-bg); color: var(--chip-primary-fg); }
.landing-mock-stat:nth-child(2) i { background: var(--chip-info-bg);    color: var(--chip-info-fg); }
.landing-mock-stat:nth-child(3) i { background: var(--chip-warning-bg); color: var(--chip-warning-fg); }

.landing-mock-stat strong {
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--text);
    text-align: start;
}

html[dir="rtl"] .landing-mock-stat strong { text-align: right; }
html[dir="ltr"] .landing-mock-stat strong { text-align: left; }

.landing-mock-stat span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-mock-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-card);
    background: var(--card);
    border: 1px solid var(--border);
}

.landing-mock-rows li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.82rem;
}

.landing-mock-rows li + li {
    border-block-start: 1px solid var(--border);
}

.landing-mock-time {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.landing-mock-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 479.98px) {
    .landing-mock-rail {
        display: none;
    }

    .landing-mock-body {
        padding: 0.9rem;
    }
}

/* ============================================================================
   Features
   ============================================================================ */
.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.1rem;
}

.landing-feature {
    padding: 1.5rem;
    border-radius: var(--radius-card);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-normal, 0.2s ease),
                box-shadow var(--transition-normal, 0.2s ease),
                border-color var(--transition-normal, 0.2s ease);
}

.landing-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
    .landing-feature:hover {
        transform: none;
    }
}

.landing-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 50px;
    block-size: 50px;
    margin-block-end: 1rem;
    border-radius: 14px;
    background: var(--chip-primary-bg);
    color: var(--chip-primary-fg);
    font-size: 1.2rem;
}

.landing-feature-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
}

.landing-feature-desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ============================================================================
   Why us — the dark band, on the app's own chrome surface
   ============================================================================ */
.landing-why {
    background: var(--sidebar-bg);
    background-image:
        radial-gradient(60% 60% at 90% 0%, color-mix(in srgb, var(--nav-active-a) 20%, transparent), transparent 65%),
        radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--nav-active-a) 10%, transparent), transparent 70%);
    color: var(--sidebar-text);
}

.landing-why .landing-eyebrow {
    background: var(--sidebar-hover-bg);
    color: var(--logo-fg);
    border: 1px solid var(--sidebar-line);
}

.landing-why .landing-section-title {
    color: var(--sidebar-text);
}

.landing-why .landing-section-lead {
    color: var(--sidebar-muted);
}

.landing-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1rem;
}

.landing-why-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: var(--radius-card);
    background: var(--sidebar-hover-bg);
    border: 1px solid var(--sidebar-line);
    transition: transform var(--transition-normal, 0.2s ease),
                background-color var(--transition-normal, 0.2s ease),
                border-color var(--transition-normal, 0.2s ease),
                box-shadow var(--transition-normal, 0.2s ease);
}

.landing-why-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-icon-btn);
    background: linear-gradient(135deg, var(--nav-active-a), var(--nav-active-b));
    color: var(--nav-active-text);
    box-shadow: 0 6px 16px var(--nav-active-shadow);
    transition: transform var(--transition-normal, 0.2s ease),
                box-shadow var(--transition-normal, 0.2s ease);
}

/* The hover the feature cards above have, and the hub's why cards: the card
   lifts, its border takes the brand accent and its icon glows. The cards are
   not links, so there is no pointer cursor, and the rule sits behind
   (hover: hover) so a tap on a phone does not leave a card stuck raised.
   The border mixes the accent into --sidebar-MUTED, not --sidebar-line: in
   عنّابي the accent is a dark maroon, and mixed into the line it all but
   vanished on the band; into the muted tone it reads in all five designs. */
@media (hover: hover) {
    .landing-why-item:hover {
        transform: translateY(-4px);
        background-color: color-mix(in srgb, var(--sidebar-hover-bg) 92%, var(--sidebar-text));
        border-color: color-mix(in srgb, var(--nav-active-a) 60%, var(--sidebar-muted));
        box-shadow: 0 18px 36px -18px var(--nav-active-shadow);
    }

    .landing-why-item:hover .landing-why-icon {
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 10px 24px var(--nav-active-shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-why-item:hover,
    .landing-why-item:hover .landing-why-icon {
        transform: none;
    }
}

.landing-why-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sidebar-text);
}

.landing-why-desc {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--sidebar-muted);
}

/* ============================================================================
   FAQ — native <details>
   ============================================================================ */
.landing-faq-wrap {
    max-width: 860px;
}

.landing-faq {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.landing-faq-item {
    border-radius: var(--radius-card);
    background: var(--card);
    border: 1px solid var(--border);
    transition: border-color var(--transition-normal, 0.2s ease),
                box-shadow var(--transition-normal, 0.2s ease);
}

.landing-faq-item[open] {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: var(--shadow-sm);
}

.landing-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text);
    border-radius: var(--radius-card);
}

.landing-faq-item summary::-webkit-details-marker {
    display: none;
}

.landing-faq-item summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
}

.landing-faq-chevron {
    flex: 0 0 auto;
    color: var(--text-secondary);
    transition: transform var(--transition-normal, 0.2s ease);
}

.landing-faq-item[open]:not([data-closing]) .landing-faq-chevron {
    transform: rotate(180deg);
    color: var(--primary);
}

.landing-faq-answer {
    overflow: hidden;
}

.landing-faq-answer p {
    margin: 0;
    padding: 0 1.25rem 1.2rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* ============================================================================
   Contact
   ============================================================================ */
.landing-contact {
    padding-block-start: 0;
}

.landing-contact-card {
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    border-radius: var(--radius-modal);
    border: 1px solid var(--border);
    background: var(--card);
    background-image:
        radial-gradient(60% 80% at 100% 0%, var(--landing-glow), transparent 70%),
        radial-gradient(50% 70% at 0% 100%, var(--landing-glow-soft), transparent 70%);
    box-shadow: var(--shadow-lg);
}

.landing-contact-card .landing-section-head {
    margin-block-end: 2rem;
}

.landing-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 1rem;
    max-width: 900px;
    margin-inline: auto;
}

.landing-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.35rem 1rem;
    border-radius: var(--radius-card);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    text-align: center;
    transition: transform var(--transition-normal, 0.2s ease),
                border-color var(--transition-normal, 0.2s ease),
                box-shadow var(--transition-normal, 0.2s ease);
}

.landing-contact-item:hover,
.landing-contact-item:focus-visible {
    color: var(--text);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
    .landing-contact-item:hover,
    .landing-contact-item:focus-visible {
        transform: none;
    }
}

.landing-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    margin-block-end: 0.35rem;
    border-radius: 50%;
    background: var(--primary-fill);
    color: var(--on-primary-fill);
    font-size: 1.15rem;
}

.landing-contact-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.landing-contact-value {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------------------
   The contact FORM (2026-09-18)

   The controls themselves are styled by Bootstrap + _forms.css, which this
   page already links — so there is no .form-control rule here and there must
   not be one. Everything below is LAYOUT, plus the two things the app has no
   class for: the honeypot and the "(optional)" marker.
   -------------------------------------------------------------------------- */
.landing-contact-form-wrap {
    max-width: 900px;
    margin-inline: auto;
    margin-block-start: 2.5rem;
    padding-block-start: 2.5rem;
    /* A rule, not a gap: the cards above are "reach us now" and the form is
       "have us reach you" — two offers, not one list. */
    border-block-start: 1px solid var(--border);
}

.landing-contact-form-head {
    margin-block-end: 1.5rem;
    text-align: center;
}

.landing-contact-form-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--text);
}

.landing-contact-form-lead {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.landing-contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Two columns once there is room for two real fields side by side. A phone
   keeps one, so no label ever has to wrap to fit its own column. */
@media (min-width: 620px) {
    .landing-contact-form {
        grid-template-columns: 1fr 1fr;
    }
}

.landing-contact-field-full {
    grid-column: 1 / -1;
}

/* The label's own «(اختياري)» — quieter than the field name, and never the
   --text-muted token, which is only 2.5:1 on the light card. */
.landing-contact-optional {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.landing-contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 0.25rem;
}

.landing-contact-privacy {
    margin: 0;
    flex: 1 1 14rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.landing-contact-spinner {
    margin-inline-end: 0.5rem;
    /* `hidden` is what contact-form.js toggles; Bootstrap's .spinner-border
       sets display:inline-block, which wins over the attribute's UA rule, so
       the attribute has to be honoured explicitly or the spinner never hides. */
}

.landing-contact-spinner[hidden] {
    display: none;
}

/* The honeypot: off-screen rather than display:none, because a bot that
   filters on display:none would skip it and never trip. Clipped to a pixel and
   out of the tab order, so no human and no screen reader can reach it. Same
   shape as _forms.css's .multi-select-native. */
.landing-contact-honeypot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   Footer
   ============================================================================ */
.landing-footer {
    border-block-start: 1px solid var(--border);
    background: var(--card);
    padding-block: 2.5rem 1.5rem;
}

/* iOS: clear the home bar. Not gated on display-mode — see "iOS PWA
   SAFE-AREA" in _layout.css. */
.landing-footer {
    padding-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.landing-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .landing-footer-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.landing-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.landing-footer-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.landing-footer-about {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.landing-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.landing-footer-links a,
.landing-back-top {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
}

.landing-footer-links a:hover,
.landing-back-top:hover {
    color: var(--primary);
}

.landing-footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.landing-back-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}