/*
 * ESAS public site — theme adapted from the es.jo "infetech" palette.
 * Primary  var(--c-blue-600)  (vivid violet)
 * Dark     var(--c-navy-900)  (deep navy)
 * Accent   var(--c-blue-400)  (light purple)
 * Tint     var(--c-blue-50)  (pale lavender)
 * Text     var(--c-ink-900)  / body var(--c-slate-500)
 * Borders  var(--c-gray-250)  var(--c-gray-200)
 */

:root {
    /* Fixed colours the classic skin used as literals, named so a theme can reach them.
       Same value in light and dark: moving them here changes nothing on screen. */
    --c-amber-200: #FDE68A;
    --c-amber-800: #92400E;
    --c-blue-200: #BFD8FB;
    --c-blue-400: #4F9CF9;
    --c-blue-400-a25: rgba(79, 156, 249, .25);
    --c-blue-50: #E5EFFD;
    --c-blue-50-a55: rgba(229, 239, 253, .55);
    --c-blue-600: #2563EB;
    --c-blue-600-a08: rgba(37, 99, 235, .08);
    --c-blue-600-a14: rgba(37, 99, 235, .14);
    --c-blue-600-a15: rgba(37,99,235,.15);
    --c-blue-600-a35: rgba(37, 99, 235, .35);
    --c-blue-600-a40: rgba(37,99,235,.4);
    --c-blue-600-a42: rgba(37, 99, 235, .42);
    --c-gray-100: #f0f0f0;
    --c-gray-200: #E8E8E8;
    --c-gray-250: #E0E0E0;
    --c-gray-300: #ddd;
    --c-gray-500: #6B7280;
    --c-gray-600: #555;
    --c-green-200: #BBF7D0;
    --c-hex-999: #999;
    --c-ink-900: #2C2734;
    --c-ink-950-a45: rgba(15, 10, 30, .45);
    --c-ink-950-a50: rgba(15, 10, 30, .5);
    --c-mint-300: #A0F0C0;
    --c-navy-900: #16233B;
    --c-navy-900-a28: rgba(22, 35, 59, .28);
    --c-paper-25: #FCFCFE;
    --c-paper-50: #FAFAFE;
    --c-red-100: #FEE2E2;
    --c-red-200: #FECACA;
    --c-red-50: #FEF2F2;
    --c-red-600-a07: rgba(220, 38, 38, .07);
    --c-red-600-a14: rgba(220, 38, 38, .14);
    --c-red-700: #B91C1C;
    --c-rgb-245-158-11-a07: rgba(245, 158, 11, .07);
    --c-slate-300: #C7CDDA;
    --c-slate-500: #62718D;
    --c-white: #fff;
    --c-white-a06: rgba(255,255,255,.06);
    --c-white-a08: rgba(255, 255, 255, .08);
    --c-white-a18: rgba(255, 255, 255, .18);
    --c-white-a35: rgba(255,255,255,.35);
    --c-white-a55: rgba(255, 255, 255, .55);
    --c-white-a70: rgba(255, 255, 255, .7);
    --c-white-a75: rgba(255,255,255,.75);
    --c-white-a80: rgba(255,255,255,.8);
    --c-white-a85: rgba(255,255,255,.85);
    --c-white-a92: rgba(255, 255, 255, .92);

    --c-primary:       #2563EB;
    --c-primary-600:   #1D4ED8;
    --c-primary-700:   #1E40AF;
    --c-dark:          #16233B;
    --c-dark-2:        #0E1A2E;
    --c-accent:        #4F9CF9;
    --c-tint:          #E5EFFD;
    --c-text:          #2C2734;
    --c-body:          #62718D;
    --c-border:        #E0E0E0;
    --c-border-soft:   #E8E8E8;
    --c-surface:       #FFFFFF;
    --c-surface-2:     #F7F8FB;
    --c-bg:            #FFFFFF;
    --c-bg-soft:       #FAFAFE;
    --c-success:       #16A34A;
    --c-warning:       #F59E0B;
    --c-danger:        #DC2626;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Fields — every input, select and textarea in the system is one of two sizes. Standard:
       forms, filter bars, searches. Compact: inside a table (line items, grids, column filters).
       Standard matches a standard .btn, so a field and its button line up in a toolbar. */
    --field-h:         42px;
    --field-h-sm:      34px;
    --field-font:      .95rem;
    --field-font-sm:   .88rem;
    --field-pad-x:     12px;
    --field-pad-x-sm:  8px;
    --field-radius:    var(--radius);
    --field-radius-sm: 8px;

    --shadow-sm: 0 1px 2px rgba(15, 10, 30, .04), 0 1px 3px rgba(15, 10, 30, .06);
    --shadow:    0 6px 18px rgba(22, 35, 59, .08), 0 2px 6px rgba(22, 35, 59, .06);
    --shadow-lg: 0 24px 60px rgba(37, 99, 235, .18), 0 8px 16px rgba(22, 35, 59, .08);

    --font-display: "Catamaran", "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body:    "Roboto", "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;

    --container: 1200px;

    /* ── Spacing scale ───────────────────────────────────────────────────────
       There was none: card padding alone was 20px, 22px, 24px and 26px in four
       places for the same kind of box. A scale is what stops that recurring. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* ── Semantic colour pairs ───────────────────────────────────────────────
       The same six hex values were restated about eight times across alerts and
       badges. Naming them once is what makes a dark theme possible at all —
       otherwise every alert has to be found and inverted by hand. */
    --c-success-bg: #DCFCE7;  --c-success-fg: #15803D;
    --c-warning-bg: #FEF3C7;  --c-warning-fg: #B45309;
    --c-danger-bg:  #FECACA;  --c-danger-fg:  #991B1B;
    --c-info-bg:    var(--c-tint); --c-info-fg: var(--c-primary-700);

    /* ── Surfaces and foregrounds ────────────────────────────────────────────
       Every literal #fff in a component becomes one of these. A theme then only
       has to redefine this handful rather than every rule that draws a box. */
    --c-app-bg:      #F5F5FA;   /* the canvas behind the cards */
    --c-surface-3:   #FAFAFE;   /* table headers, hover rows */
    --c-input-bg:    #FFFFFF;
    --c-input-disabled-bg: #F5F6FA;
    --c-placeholder: #6B7280;
    --c-code-bg:     #0F172A;
    --c-code-fg:     #E2E8F0;
    --c-overlay:     rgba(15, 23, 42, .45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark theme
   ───────────────────────────────────────────────────────────────────────────
   Only the tokens are redefined; not one component rule changes. That is the
   whole point of the layer above.

   Two things are deliberately NOT simple inversions. Surfaces get LIGHTER as
   they stack (the opposite of the light theme, which is how depth reads in the
   dark), and the semantic pairs are re-picked rather than darkened — a washed
   red on near-black fails contrast, and in an accounting system the difference
   between "posted" and "overdue" has to stay legible.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-text:        #E8EAF0;
        --c-body:        #A3ADC2;
        --c-border:      #2C3444;
        --c-border-soft: #242B38;

        --c-app-bg:      #0E1218;
        --c-surface:     #161B24;
        --c-surface-2:   #1D2430;
        --c-surface-3:   #1A212C;
        --c-bg:          #161B24;
        --c-bg-soft:     #1A212C;

        --c-tint:        #1E2A44;
        --c-primary:     #5B8DEF;
        --c-primary-600: #4A7BDC;
        --c-primary-700: #8AB0F5;

        --c-success:     #34D399;
        --c-warning:     #FBBF24;
        --c-danger:      #F87171;

        --c-success-bg: #16301F;  --c-success-fg: #6EE7A8;
        --c-warning-bg: #3A2C10;  --c-warning-fg: #FCD34D;
        --c-danger-bg:  #3A1A1A;  --c-danger-fg:  #FCA5A5;

        --c-input-bg:          #1D2430;
        --c-input-disabled-bg: #171D26;
        --c-placeholder:       #8792A6;
        --c-overlay:           rgba(0, 0, 0, .6);

        /* Shadows do almost nothing on a dark canvas; depth comes from the
           lighter surface instead, so they are dialled right down. */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow:    0 6px 18px rgba(0, 0, 0, .45);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    }
}

/* The manual override. Someone on a dark OS who wants this app light, or the
   reverse, gets to say so — the toggle writes data-theme onto <html>. */
:root[data-theme="dark"] {
    --c-text:        #E8EAF0;
    --c-body:        #A3ADC2;
    --c-border:      #2C3444;
    --c-border-soft: #242B38;

    --c-app-bg:      #0E1218;
    --c-surface:     #161B24;
    --c-surface-2:   #1D2430;
    --c-surface-3:   #1A212C;
    --c-bg:          #161B24;
    --c-bg-soft:     #1A212C;

    --c-tint:        #1E2A44;
    --c-primary:     #5B8DEF;
    --c-primary-600: #4A7BDC;
    --c-primary-700: #8AB0F5;

    --c-success:     #34D399;
    --c-warning:     #FBBF24;
    --c-danger:      #F87171;

    --c-success-bg: #16301F;  --c-success-fg: #6EE7A8;
    --c-warning-bg: #3A2C10;  --c-warning-fg: #FCD34D;
    --c-danger-bg:  #3A1A1A;  --c-danger-fg:  #FCA5A5;

    --c-input-bg:          #1D2430;
    --c-input-disabled-bg: #171D26;
    --c-placeholder:       #8792A6;
    --c-overlay:           rgba(0, 0, 0, .6);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 6px 18px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}

/* Tell the browser, so form controls, scrollbars and the caret follow. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-body);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

body.rtl {
    font-family: "Tajawal", "Catamaran", "Segoe UI", system-ui, sans-serif;
}

/* ── Fields ────────────────────────────────────────────────────────────────
   The base look of every input, select and textarea, in the --field-* sizes above. Here rather
   than in dashboard.css so the sign-in pages get it too; see the Fields section there for the
   compact size inside tables. Weightless (:where) so a component can still differ on purpose. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not([type="file"]),
       select, textarea) {
    box-sizing: border-box;
    max-width: 100%;
    height: var(--field-h);
    padding: 0 var(--field-pad-x);
    border: 1px solid var(--c-border);
    border-radius: var(--field-radius);
    font-family: var(--font-body);
    font-size: var(--field-font);
    line-height: 1.3;
    color: var(--c-text);
    background-color: var(--c-input-bg);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
:where(textarea) {
    height: auto;
    min-height: 92px;
    padding: 10px var(--field-pad-x);
    line-height: 1.55;
    resize: vertical;
}
/* Custom chevron, on the side the text ends (RTL-aware). */
:where(select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2362718D' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--field-pad-x) center;
    padding-right: calc(var(--field-pad-x) + 22px);
    text-overflow: ellipsis;
}
:where(body.rtl select) {
    background-position: left var(--field-pad-x) center;
    padding-right: var(--field-pad-x);
    padding-left: calc(var(--field-pad-x) + 22px);
}
:where(select[multiple], select[size]:not([size="1"])) {
    height: auto;
    padding: 6px;
    background-image: none;
}
/* A file picker: the browser's own button inside a field-shaped box. */
:where(input[type="file"]) {
    box-sizing: border-box;
    max-width: 100%;
    min-height: var(--field-h);
    padding: 7px var(--field-pad-x);
    border: 1px dashed var(--c-border);
    border-radius: var(--field-radius);
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--c-body);
    background-color: var(--c-input-bg);
}
:where(input, textarea)::placeholder { color: var(--c-placeholder); opacity: 1; }

:where(input, select, textarea):hover { border-color: var(--c-slate-300); }
:where(input, select, textarea):focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-blue-600-a14);
}
/* Read-only / disabled look muted, not broken. */
:where(input[readonly], input:disabled, textarea[readonly], textarea:disabled, select:disabled) {
    background-color: var(--c-input-disabled-bg);
    color: var(--c-body);
    cursor: not-allowed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--c-text);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 .6em;
}
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4 { font-family: "Tajawal", "Catamaran", sans-serif; }

h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; font-weight: 700; }

p { margin: 0 0 1rem; }

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--c-primary-700); }

img { max-width: 100%; display: block; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 12px 22px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }

.btn-primary {
    background: var(--c-primary);
    color: var(--c-white);
    box-shadow: 0 8px 22px var(--c-blue-600-a35);
}
.btn-primary:hover {
    background: var(--c-primary-600);
    color: var(--c-white);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px var(--c-blue-600-a42);
}

.btn-outline {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}
.btn-outline:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.btn-ghost {
    background: transparent;
    color: var(--c-primary);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--c-tint);
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-white-a92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--c-border-soft);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--c-text);
}
/* The mark is now an SVG file rather than a styled letter, so it carries its own gradient
   and corner radius and can be reused outside the app (emails, PDF, the favicon). The box
   shadow stays here — it belongs to the lockup, not to the artwork. */
.brand-mark {
    width: 36px;
    height: 36px;
    display: inline-block;
    box-shadow: 0 6px 16px var(--c-blue-600-a35);
    border-radius: 10px;
}
.brand-light { color: var(--c-white); }

.primary-nav {
    display: flex;
    gap: 28px;
    flex: 1;
    justify-content: center;
}
.primary-nav a {
    color: var(--c-text);
    font-weight: 500;
    font-size: .95rem;
    position: relative;
    padding: 6px 0;
}
.primary-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--c-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}
.primary-nav a:hover { color: var(--c-primary); }
.primary-nav a:hover::after { transform: scaleX(1); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lang-toggle {
    color: var(--c-body);
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    font-size: .85rem;
}
.lang-toggle:hover { color: var(--c-primary); border-color: var(--c-primary); }

/* ===== Hamburger (public site) ===== */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    width: 42px; height: 42px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle:hover { border-color: var(--c-primary); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Validation (universal — client + server) ===== */
.field-validation-error,
.field-error,
.form-error {
    display: block;
    color: var(--c-danger);
    font-size: .8rem;
    margin-top: 5px;
}
.field-validation-valid { display: none; }
.input-validation-error {
    border-color: var(--c-danger) !important;
}
.input-validation-error:focus {
    box-shadow: 0 0 0 3px var(--c-red-600-a14) !important;
}

/* ===== Hero ===== */
.hero {
    position: relative;
    padding: 80px 0 96px;
    background:
        radial-gradient(800px 400px at 85% 10%, var(--c-blue-400-a25), transparent 60%),
        radial-gradient(700px 400px at 10% 90%, var(--c-blue-50-a55), transparent 60%),
        linear-gradient(180deg, var(--c-white) 0%, var(--c-paper-50) 100%);
    overflow: hidden;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}
.eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--c-tint);
    color: var(--c-primary-700);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hero-text h1 { margin-bottom: 20px; }
.hero-text .lead { font-size: 1.15rem; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-bullets {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--c-body);
    font-size: .92rem;
}
.hero-bullets li {
    position: relative;
    padding-inline-start: 22px;
}
.hero-bullets li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--c-primary);
    font-weight: 800;
}

.hero-art {
    position: relative;
    height: 460px;
}
.hero-card {
    position: absolute;
    background: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--c-border-soft);
    padding: 22px;
    font-family: var(--font-display);
}
.hero-card-1 {
    top: 40px; inset-inline-start: 30px;
    width: 280px;
}
.hero-card-2 {
    top: 200px; inset-inline-end: 20px;
    width: 200px;
    background: linear-gradient(135deg, var(--c-primary), var(--c-dark));
    color: var(--c-white);
    border: none;
}
.hero-card-3 {
    bottom: 30px; inset-inline-start: 80px;
    width: 280px;
}
.hc-label { font-size: .8rem; color: var(--c-body); margin-bottom: 6px; }
.hc-amount { font-size: 1.6rem; font-weight: 800; color: var(--c-text); margin-bottom: 6px; }
.hc-status { font-size: .85rem; color: var(--c-success); font-weight: 600; }
.hc-mini { font-size: .78rem; opacity: .85; }
.hc-big { font-size: 1.8rem; font-weight: 800; margin: 6px 0; }
.hc-trend.up { color: var(--c-mint-300); font-weight: 700; }
.hc-bar {
    height: 10px;
    background: var(--c-tint);
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 6px;
}
.hc-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    border-radius: 999px;
}

/* ===== Feature blocks ===== */
.feature-blocks {
    padding: 80px 0;
    background: var(--c-white);
}
.fb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.fb-card {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 36px 28px 32px;
    transition: all .25s ease;
}
.fb-card:hover {
    border-color: var(--c-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.fb-num {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 12px;
}
.fb-card h3 { color: var(--c-dark); margin-bottom: 10px; }
/* The front door's country cards are links to /jo and /sa: the card, not underlined text. */
a.fb-card { display: block; color: inherit; text-decoration: none; }

/* ===== Services grid ===== */
.services {
    padding: 90px 0;
    background: linear-gradient(180deg, var(--c-paper-50) 0%, var(--c-white) 100%);
}
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.svc {
    background: var(--c-white);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    padding: 28px;
    transition: all .2s ease;
}
.svc:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}
.svc-ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--c-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}
.svc h4 { color: var(--c-dark); }
.svc p { font-size: .95rem; margin: 0; }
.svc a { color: var(--c-primary); font-weight: 600; }

/* ===== Stat strip (About) ===== */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--c-border-soft);
}
.stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
}
.stat-label { color: var(--c-body); font-size: .9rem; }
@media (max-width: 720px) { .stat-strip { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }

/* ===== Plan grid (also used on dashboard) ===== */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.plan-grid-public {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
}
.plan-card {
    position: relative;
    background: var(--c-white);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover { transform: translateY(-2px); }
.plan-card.featured,
.plan-card.current {
    border-color: var(--c-primary);
    box-shadow: 0 18px 40px var(--c-blue-600-a15);
}
.plan-badge {
    position: absolute;
    top: -12px;
    inset-inline-start: 24px;
    background: var(--c-primary);
    color: var(--c-white);
    font-size: .72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.plan-card h3 { color: var(--c-dark); margin-bottom: 6px; }
.plan-price {
    margin: 16px 0 20px;
    font-family: var(--font-display);
}
.plan-price strong { font-size: 2.2rem; color: var(--c-text); font-weight: 800; }
.plan-price span { color: var(--c-body); font-size: .92rem; margin-inline-start: 4px; }
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    font-size: .94rem;
    color: var(--c-body);
}
.plan-features li {
    padding: 7px 0;
    position: relative;
    padding-inline-start: 22px;
}
.plan-features li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--c-primary);
    font-weight: 800;
}
.btn-block { width: 100%; }
.small { font-size: .85rem; }
.muted { color: var(--c-body); }

/* ===== CTA band ===== */
.cta-band {
    padding: 70px 0;
    background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-primary-700) 100%);
    color: var(--c-white);
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.cta-band h2 { color: var(--c-white); margin-bottom: 6px; }
.cta-band p { margin: 0; opacity: .85; }

/* ===== Footer ===== */
.site-footer {
    background: var(--c-dark-2);
    color: var(--c-white-a70);
    padding: 60px 0 24px;
    margin-top: 0;
}
.site-footer h4 {
    color: var(--c-white);
    font-size: 1rem;
    margin-bottom: 14px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; font-size: .92rem; }
.footer-col a { color: var(--c-white-a70); }
.footer-col a:hover { color: var(--c-accent); }
.footer-brand p { font-size: .92rem; line-height: 1.7; max-width: 360px; }
.footer-bottom {
    border-top: 1px solid var(--c-white-a08);
    padding-top: 22px;
    margin-top: 40px;
    font-size: .85rem;
    text-align: center;
    color: var(--c-white-a55);
}
/* The maker (es.jo) on its own line above the copyright. */
.footer-maker { display: block; margin-bottom: 4px; }
.footer-maker a { color: var(--c-white-a70); font-weight: 600; }
.footer-maker a:hover { color: var(--c-accent); }

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-art { height: 340px; }
    .fb-grid,
    .services-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: span 2; }

    /* Mobile menu */
    .site-header { position: sticky; }
    .header-inner { flex-wrap: wrap; gap: 10px; }
    .nav-toggle { display: inline-flex; order: 3; }
    .primary-nav {
        order: 4;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease, padding .25s ease;
        padding: 0;
        background: var(--c-white);
        border-top: 1px solid var(--c-border-soft);
        margin-inline: -20px;
        padding-inline: 20px;
    }
    .primary-nav.is-open {
        max-height: 80vh;
        padding-block: 8px 16px;
    }
    .primary-nav a {
        padding: 14px 0;
        border-bottom: 1px solid var(--c-border-soft);
        font-size: 1rem;
    }
    .primary-nav a:last-child { border-bottom: 0; }
    .primary-nav a::after { display: none; }
    .header-actions { gap: 8px; }
    .header-actions .lang-toggle { padding: 6px 8px; }
}

@media (max-width: 540px) {
    .header-actions .btn-outline { display: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: span 1; }
}

/* Touch screens (phones, tablets, the ESAS app): fields a finger can hit, and 16px text — below
   16px iPhones zoom the whole page in every time a field is tapped. */
@media (pointer: coarse) {
    :root {
        --field-h:        44px;
        --field-h-sm:     40px;
        --field-font:     16px;
        --field-font-sm:  16px;
    }
}

/* ── Search inside drop-down lists (js/select-search.js) ─────────────────────
   The select stays as it is; only the list that drops down is this panel. */
.ss-panel {
    position: fixed;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    max-height: 360px;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-family: var(--font-body);
}
.ss-panel[hidden] { display: none; }
.ss-input {
    flex: none;
    margin: 8px;
    height: var(--field-h-sm);
    padding: 0 var(--field-pad-x-sm);
    font-size: var(--field-font-sm);
    color: var(--c-text);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--field-radius-sm);
    outline: none;
}
.ss-input:focus { border-color: var(--c-primary); background: var(--c-surface); }
.ss-list {
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ss-option {
    padding: 8px 12px;
    font-size: .93rem;
    line-height: 1.35;
    cursor: pointer;
    border-inline-start: 3px solid transparent;
}
.ss-option.is-active { background: var(--c-tint); }
.ss-option.is-selected { font-weight: 600; border-inline-start-color: var(--c-primary); }
.ss-option.is-empty { color: var(--c-body); }
.ss-option.is-disabled { color: var(--c-body); opacity: .55; cursor: default; }
.ss-group {
    padding: 8px 12px 4px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--c-body);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.ss-none, .ss-note { padding: 10px 12px; color: var(--c-body); font-size: .85rem; }
.ss-note { flex: none; border-top: 1px solid var(--c-border); }
.ss-note[hidden] { display: none; }

/* On a phone the panel is a sheet across the bottom of the screen, with room to tap. */
.ss-panel.ss-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 70vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
}
.ss-sheet .ss-input { height: var(--field-h); font-size: 16px; }
.ss-sheet .ss-option { padding: 13px 16px; font-size: 1rem; }

/* ── Contact form (Home/Contact) ─────────────────────────────────────────── */
.contact-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--sp-8);
}
.contact-card h2 { margin: 0 0 var(--sp-2); }
.contact-card > p { margin: 0 0 var(--sp-6); color: var(--c-body); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
.contact-grid .full { grid-column: 1 / -1; }
.contact-field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .92rem; color: var(--c-text); }
.contact-field label .req { color: var(--c-danger); }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; box-sizing: border-box; }
.contact-field textarea { min-height: 150px; resize: vertical; }
.contact-field .form-error { display: block; margin-top: 4px; }
.contact-actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }
.contact-actions .muted { color: var(--c-body); font-size: .85rem; }
.contact-sent {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
    border-radius: var(--radius);
    background: var(--c-success-bg);
    color: var(--c-success-fg);
    font-weight: 600;
}
/* The trap field bots fill in: out of sight and out of the tab order for people. */
.contact-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
    .contact-card { padding: var(--sp-5); }
    .contact-grid { grid-template-columns: 1fr; }
}

/* ── Start-up form (Onboarding/Index) ────────────────────────────────────── */
.onb { padding: var(--sp-10) 0 var(--sp-12); background: var(--c-app-bg); }
.onb-wrap { max-width: 920px; }
.onb-head { margin-bottom: var(--sp-6); }
.onb-head h1 { margin: var(--sp-2) 0; }
.onb-state { color: var(--c-success-fg); font-weight: 600; }
.onb-alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); margin-bottom: var(--sp-5); font-weight: 600; }
.onb-ok { background: var(--c-success-bg); color: var(--c-success-fg); }
.onb-bad { background: var(--c-danger-bg); color: var(--c-danger-fg); }
.onb-card {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.onb-card legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--sp-4); font-size: 1.15rem; font-weight: 700; color: var(--c-text); display: flex; align-items: center; gap: var(--sp-3); }
body.rtl .onb-card legend { float: right; }
.onb-card legend + * { clear: both; }
.onb-n { width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary); color: var(--c-surface); display: inline-grid; place-items: center; font-size: .95rem; }
.onb-card h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: .95rem; color: var(--c-text); }
.onb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
.onb-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--c-text); }
.onb-grid .full { grid-column: 1 / -1; }
.onb-grid input, .onb-grid select, .onb-card textarea { width: 100%; box-sizing: border-box; }
.onb-hint { color: var(--c-body); font-size: .86rem; margin: var(--sp-2) 0 var(--sp-3); }
.onb-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.onb-check { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer; font-weight: 500; }
.onb-check:has(input:checked) { border-color: var(--c-primary); background: var(--c-tint); }
.onb-rows { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.onb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.onb-file { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; }
.onb-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.onb-filecard { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px dashed var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); }
.onb-filecard .onb-hint { margin: 0; }
.onb-have { color: var(--c-success-fg); font-size: .86rem; font-weight: 600; display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.onb-remove { color: var(--c-danger); font-weight: 500; display: inline-flex; gap: 4px; align-items: center; }
.onb-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; padding: var(--sp-4) 0; background: var(--c-app-bg); }
@media (max-width: 700px) {
    .onb-card { padding: var(--sp-4); }
    .onb-grid { grid-template-columns: 1fr; }
    .onb-actions .btn { flex: 1; }
}

/* Admin → company → Start-up form */
.onb-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.onb-admin-grid h3 { margin: 0 0 var(--sp-2); font-size: 1rem; }
.onb-dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px var(--sp-3); margin: 0; font-size: .9rem; }
.onb-dl dt { color: var(--c-body); }
.onb-dl dd { margin: 0; overflow-wrap: anywhere; }