/* =============================================================================
   SPORTS INCUBATOR — "ARENA" design system
   -----------------------------------------------------------------------------
   The public-facing visual language of the Sports Incubator platform.

   Identity notes
     · Palette: a single purple hue (#75418F) carried through every step — deep
       aubergine ink, the brand purple itself, and a bright lilac for accents on
       dark panels. Light surfaces are tinted from the same hue, so nothing reads
       as neutral grey. Hairline rules, no soft pastel cards.
     · --sp-orange stays a warm alert colour rather than a brand shade: it marks
       toast errors, validation messages and discount badges, where a purple would
       be read as decoration instead of a warning.
     · Type: Anton (condensed athletic display) over Barlow/Inter; Noto Kufi Arabic
       and Tajawal carry the same weight and energy in RTL.
     · Motifs: pitch markings, chevrons, skewed speed accents, scoreboard numerals,
       numbered section indices, flat panels with a leading accent bar.

   Loaded LAST so it governs the storefront chrome and all public pages.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Kufi+Arabic:wght@500;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

/* ---------------------------------------------------------------- 0 · Tokens */
:root {
    /* brand — one hue (280deg), stepped by lightness */
    --sp-brand: #75418F;
    --sp-brand-400: #8A4CA9;
    --sp-brand-600: #623678;
    --sp-brand-700: #4E2B5F;
    --sp-accent: #D7A6F0;      /* bright lilac, for accents on the dark panels */
    --sp-accent-200: #E6C4F7;
    --sp-orange: #FF6B2C;      /* semantic alert colour, not part of the brand ramp */

    /* ink & surfaces */
    --sp-ink: #1C0F24;
    --sp-ink-2: #2A1733;
    --sp-ink-3: #3A2145;
    --sp-paper: #F7F4F9;
    --sp-paper-2: #EFE8F3;
    --sp-card: #FFFFFF;
    --sp-line: #E2D8E9;
    --sp-line-2: #CBBAD6;
    --sp-muted: #665B6E;
    --sp-muted-2: #8A7E92;

    /* type */
    --sp-display: 'Anton', 'Barlow Condensed', Impact, sans-serif;
    --sp-display-ar: 'Noto Kufi Arabic', 'Tajawal', sans-serif;
    --sp-head: 'Barlow Condensed', 'Barlow', sans-serif;
    --sp-sans: 'Inter', 'Barlow', 'Tajawal', sans-serif;
    --sp-sans-ar: 'Tajawal', 'Inter', sans-serif;

    /* geometry */
    --sp-r: 4px;
    --sp-r-lg: 10px;
    --sp-container: 1240px;
    --sp-shadow: 0 1px 0 rgba(28, 15, 36, .04), 0 18px 36px -28px rgba(28, 15, 36, .55);
    --sp-shadow-hi: 0 28px 60px -32px rgba(28, 15, 36, .6);

    /* keep legacy variables in step so inherited components stay on-palette */
    --primary-color: #75418F;
    --secondary-color: #1C0F24;
}

/* ------------------------------------------------------------- 1 · Base ---- */
body {
    font-family: var(--sp-sans);
    color: #241C29;
    background: var(--sp-paper);
}

[dir="rtl"] body { font-family: var(--sp-sans-ar); }

.sp-page,
.home-page, .about-page, .services-page, .suppliers-page,
.training-page, .events-page, .media-page, .faq-page,
.contact-page, .product-list-page, .recruitment-page {
    background: var(--sp-paper);
    overflow-x: clip;
}

.sp-container {
    width: 100%;
    max-width: var(--sp-container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* Display type — Anton is Latin-only, so RTL swaps to a heavy Kufi. */
.sp-page h1, .sp-page h2, .sp-page h3,
.sp-display {
    font-family: var(--sp-display);
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--sp-ink);
    text-transform: uppercase;
    line-height: 1.04;
}

[dir="rtl"] .sp-page h1,
[dir="rtl"] .sp-page h2,
[dir="rtl"] .sp-page h3,
[dir="rtl"] .sp-display {
    font-family: var(--sp-display-ar);
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
}

.sp-page p { color: #443A4C; line-height: 1.75; }

/* micro label — the uppercase kicker used above every section heading */
.sp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sp-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sp-brand-700);
    margin-bottom: 14px;
}
[dir="rtl"] .sp-kicker {
    font-family: var(--sp-sans-ar);
    letter-spacing: 0;
    font-size: 14px;
}
.sp-kicker::before {
    content: "";
    width: 26px;
    height: 3px;
    background: var(--sp-brand);
    display: block;
    transform: skewX(-20deg);
}

/* section shell */
.sp-section { padding: 86px 0; position: relative; }
.sp-section--tight { padding: 60px 0; }
.sp-section--alt { background: var(--sp-paper-2); }
.sp-section--dark { background: var(--sp-ink); }
.sp-section--dark h2, .sp-section--dark h3 { color: #fff; }
.sp-section--dark p { color: #C8BAD1; }

.sp-section__head { max-width: 780px; margin-bottom: 44px; }
.sp-section__head--center { margin-inline: auto; text-align: center; }
.sp-section__head h2 { font-size: clamp(30px, 4vw, 48px); margin: 0 0 14px; }
.sp-section__head p { font-size: 16.5px; margin: 0; max-width: 72ch; }
.sp-section__head--center p { margin-inline: auto; }

/* ------------------------------------------------------------ 2 · Buttons -- */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    font-family: var(--sp-head);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: var(--sp-r);
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
[dir="rtl"] .sp-btn {
    font-family: var(--sp-sans-ar);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 15.5px;
}
.sp-btn:hover { transform: translateY(-2px); text-decoration: none; }

.sp-btn--primary { background: var(--sp-brand); color: #fff; }
.sp-btn--primary:hover { background: var(--sp-brand-600); color: #fff; }

.sp-btn--accent { background: var(--sp-accent); color: var(--sp-ink); }
.sp-btn--accent:hover { background: #e6c4f7; color: var(--sp-ink); }

.sp-btn--ghost { background: transparent; color: var(--sp-ink); border-color: var(--sp-line-2); }
.sp-btn--ghost:hover { border-color: var(--sp-brand); color: var(--sp-brand-700); }

.sp-btn--on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.sp-btn--on-dark:hover { border-color: var(--sp-accent); color: var(--sp-accent); }

.sp-btn--sm { padding: 11px 20px; font-size: 14px; }

/* Bootstrap's form-select is LTR-only: move the dropdown caret to the left and
   right-align the text/padding in RTL so Arabic selects read correctly. */
[dir="rtl"] .form-select {
    background-position: left 0.75rem center;
    padding-inline: 0.75rem 2.25rem;
    text-align: right;
}

/* Bootstrap's form-check is LTR-only in this build: flip the checkbox/radio to
   the right of its label in RTL. */
[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}
[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em;
}

/* ------------------------------------------------------------- 3 · Header -- */
.site-header-sticky { position: relative; z-index: 1200; }

.top-bar {
    background: var(--sp-ink);
    color: #DCD2E3;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.top-bar .container { max-width: var(--sp-container); }
.top-bar .top-menu { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; }
.top-bar a, .top-bar .dropdown-toggle { color: #DCD2E3; text-decoration: none; }
.top-bar .dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--sp-r); }
.top-bar .dropdown-toggle:hover { color: var(--sp-accent); background: rgba(255, 255, 255, .06); }
.top-bar img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
.top-bar .dropdown-content {
    background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-hi); padding: 6px 0; min-width: 170px;
}
.top-bar .dropdown-content a { color: #241C29; display: block; padding: 9px 16px; font-size: 14px; }
.top-bar .dropdown-content a:hover { background: var(--sp-paper-2); color: var(--sp-brand-700); }
.top-bar .top-register-btn {
    background: var(--sp-brand); color: #fff; padding: 8px 18px; border-radius: var(--sp-r);
    font-family: var(--sp-head); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; font-size: 14px;
}
[dir="rtl"] .top-bar .top-register-btn { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; }
.top-bar .top-register-btn:hover { background: var(--sp-accent); color: var(--sp-ink); }
.top-bar .user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.navbar {
    background: #fff;
    border-bottom: 1px solid var(--sp-line);
    padding: 0;
    box-shadow: 0 1px 0 rgba(28, 15, 36, .04);
}
.navbar > .container {
    max-width: var(--sp-container);
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px;
}

/* brand lockup */
.sp-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.sp-brand__mark { width: 42px; height: 42px; flex: 0 0 42px; }

/* The mark's three colours, so one SVG works on light and dark chrome. The brand
   purple is darker than the green it replaced, so on dark panels the ring moves up
   the ramp to keep its edge visible. */
:root {
    --sp-mark-shield: var(--sp-ink);
    --sp-mark-ring: var(--sp-brand);
    --sp-mark-chevron: var(--sp-accent);
}
.sp-footer {
    --sp-mark-shield: var(--sp-ink-2);
    --sp-mark-ring: #A87FBD;
    --sp-mark-chevron: var(--sp-accent);
}
.sp-brand__text { display: flex; flex-direction: column; line-height: 1; }
.sp-brand__name {
    font-family: var(--sp-display); font-size: 22px; letter-spacing: .02em;
    text-transform: uppercase; color: var(--sp-ink);
}
[dir="rtl"] .sp-brand__name { font-family: var(--sp-display-ar); font-weight: 800; font-size: 20px; text-transform: none; }
.sp-brand__tag {
    font-family: var(--sp-head); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--sp-brand-700); margin-top: 5px; font-weight: 600;
}
[dir="rtl"] .sp-brand__tag { font-family: var(--sp-sans-ar); letter-spacing: 0; font-size: 12px; text-transform: none; }

.main-menu { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: center; }
.main-menu > a, .nav-more-toggle {
    font-family: var(--sp-head);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2E2438;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: var(--sp-r);
    position: relative;
    white-space: nowrap;
}
[dir="rtl"] .main-menu > a, [dir="rtl"] .nav-more-toggle {
    font-family: var(--sp-sans-ar); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none;
}
.main-menu > a::after {
    content: ""; position: absolute; inset-inline: 12px; bottom: 4px; height: 3px;
    background: var(--sp-brand); transform: scaleX(0); transform-origin: inline-start;
    transition: transform .18s ease;
}
.main-menu > a:hover { color: var(--sp-brand-700); }
.main-menu > a:hover::after, .main-menu > a.is-active::after { transform: scaleX(1); }

.nav-more-dropdown .nav-more-menu {
    background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg);
    box-shadow: var(--sp-shadow-hi); padding: 7px 0; min-width: 210px;
}
.nav-more-dropdown .nav-more-menu a { font-family: var(--sp-sans); font-size: 14.5px; color: #2E2438; padding: 10px 18px; }
.nav-more-dropdown .nav-more-menu a:hover { background: var(--sp-paper-2); color: var(--sp-brand-700); }

.navbar .add-product-btn, .add-product-btn {
    background: var(--sp-ink); color: #fff; padding: 13px 22px; border-radius: var(--sp-r);
    font-family: var(--sp-head); font-weight: 700; font-size: 15px; letter-spacing: .07em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}
[dir="rtl"] .add-product-btn { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-weight: 700; }
.add-product-btn:hover { background: var(--sp-brand); color: #fff; }

.navbar .logo { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
/* Let the menu absorb tight widths instead of pushing the bar wider than the page. */
.main-menu { min-width: 0; }

/* The navbar container is capped at --sp-container, so beyond that width the bar
   never gets roomier — the eight links plus the "More" menu, brand and CTA don't fit
   at the default spacing at any desktop width. Tighten padding, gap and type for the
   whole desktop range so the menu stays within the bar instead of overlapping the
   cart / CTA on the inline-end. */
@media (min-width: 1300px) {
    /* Give the header bar more room than the 1240px content container so the full link
       set fits; the page sections below stay at --sp-container. */
    .top-bar .container, .navbar > .container { max-width: 1440px; }
    .navbar > .container { gap: 8px; }
    .main-menu { gap: 0; }
    .main-menu > a, .nav-more-toggle { padding: 10px 5px; font-size: 13.5px; letter-spacing: .01em; }
    [dir="rtl"] .main-menu > a, [dir="rtl"] .nav-more-toggle { font-size: 13px; }
    .navbar .add-product-btn, .add-product-btn { padding: 11px 14px; font-size: 13px; letter-spacing: .04em; }
}
.mobile-menu-icon { display: none; font-size: 22px; color: var(--sp-ink); cursor: pointer; }
.cart-icon-link { position: relative; color: var(--sp-ink); font-size: 19px; text-decoration: none; padding: 8px; }
.cart-icon-link:hover { color: var(--sp-brand); }
.cart-icon-badge {
    position: absolute; top: 0; inset-inline-end: 0; background: var(--sp-orange); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* --------------------------------------------------------------- 4 · Hero -- */
.sp-hero {
    position: relative;
    background: linear-gradient(140deg, var(--sp-ink) 0%, var(--sp-ink-2) 48%, var(--sp-ink-3) 100%);
    color: #fff;
    overflow: hidden;
    padding: 108px 0 96px;
    isolation: isolate;
}
/* pitch markings */
.sp-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 86px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 86px);
}
/* centre-circle arc + speed sweep */
.sp-hero::after {
    content: ""; position: absolute; z-index: -1;
    inset-inline-end: -180px; top: -140px; width: 720px; height: 720px; border-radius: 50%;
    border: 2px solid rgba(200, 255, 79, .14);
    box-shadow: inset 0 0 0 90px rgba(117, 65, 143, .06);
}
.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 54px; align-items: center; }
.sp-hero__brandline {
    font-family: var(--sp-head); font-size: 13px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--sp-accent); margin-bottom: 18px; display: flex; align-items: center; gap: 12px;
}
[dir="rtl"] .sp-hero__brandline { font-family: var(--sp-sans-ar); letter-spacing: 0; font-size: 15px; text-transform: none; }
.sp-hero__brandline::before { content: ""; width: 34px; height: 3px; background: var(--sp-accent); transform: skewX(-20deg); }

.sp-hero h1 {
    font-family: var(--sp-display); font-size: clamp(38px, 5.6vw, 76px); line-height: .98;
    color: #fff; text-transform: uppercase; margin: 0 0 22px; letter-spacing: .005em;
}
[dir="rtl"] .sp-hero h1 { font-family: var(--sp-display-ar); font-weight: 800; text-transform: none; line-height: 1.3; font-size: clamp(30px, 4.4vw, 56px); }
.sp-hero__lede { max-width: 60ch; }
.sp-hero__lede p { color: #D0C4D8; font-size: 16.5px; line-height: 1.8; margin: 0 0 14px; }
.sp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* the three secondary calls: tighter, lighter, and set apart from the main pair */
.sp-hero__cta--more { margin-top: 14px; gap: 10px; }
.sp-hero__cta--more .sp-btn { letter-spacing: .04em; }
.sp-hero__cta--more .sp-btn:not(:hover) { border-color: rgba(255, 255, 255, .22); color: #D0C4D8; }

/* scoreboard panel */
.sp-hero__board {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    border-radius: var(--sp-r-lg);
    padding: 8px;
    backdrop-filter: blur(4px);
}
.sp-hero__board-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.sp-hero__stat { padding: 22px 20px; border: 1px solid rgba(255, 255, 255, .07); }
.sp-hero__stat-value {
    font-family: var(--sp-display); font-size: 40px; color: var(--sp-accent); line-height: 1;
    display: flex; align-items: baseline; gap: 2px;
}
.sp-hero__stat-value sup { font-size: 20px; top: -.45em; }
.sp-hero__stat-label {
    margin-top: 10px; font-size: 13px; color: #B8A9C2; line-height: 1.5;
    font-family: var(--sp-head); letter-spacing: .09em; text-transform: uppercase;
}
[dir="rtl"] .sp-hero__stat-label { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 13.5px; }

/* ---------------------------------------------------- 5 · Stat strip ------ */
.sp-stats { background: var(--sp-ink-2); padding: 0; }
.sp-stats__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.sp-stats__item {
    padding: 34px 22px; text-align: center; color: #fff;
    border-inline-end: 1px solid rgba(255, 255, 255, .08);
}
.sp-stats__item:last-child { border-inline-end: 0; }
.sp-stats__icon { color: var(--sp-accent); font-size: 19px; margin-bottom: 12px; display: block; }
.sp-stats__value { font-family: var(--sp-display); font-size: 42px; line-height: 1; color: #fff; }
.sp-stats__value sup { color: var(--sp-accent); font-size: 20px; top: -.5em; }
.sp-stats__label { margin-top: 10px; font-size: 13px; color: #B3A3BC; line-height: 1.45; }

/* national-programme target band, sitting flush under the hero */
.sp-targets { background: var(--sp-ink-2); color: #fff; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.08); }
.sp-targets__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 36px; align-items: center; }
.sp-targets__label p { color: #B3A3BC; font-size: 14.5px; margin: 0; }
.sp-targets__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sp-targets__item { display: flex; gap: 16px; align-items: center; }
.sp-targets__item i { color: var(--sp-accent); font-size: 24px; flex: 0 0 auto; }
.sp-targets__value { font-family: var(--sp-display); font-size: 34px; line-height: 1; color: #fff; }
.sp-targets__value sup { color: var(--sp-accent); font-size: 17px; top: -.55em; }
.sp-targets__text { font-size: 13.5px; color: #B3A3BC; margin-top: 7px; line-height: 1.45; }
@media (max-width: 1024px) {
    .sp-targets__inner { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
    .sp-targets__items { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------------------------------------------- 6 · Sector / card grids --- */
.sp-grid { display: grid; gap: 18px; }
.sp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* flat panel with leading accent bar */
.sp-card {
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-lg);
    padding: 26px 24px;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.sp-card::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
    background: var(--sp-brand); transform: scaleY(0); transform-origin: top;
    transition: transform .22s ease;
}
.sp-card:hover { transform: translateY(-4px); border-color: var(--sp-line-2); box-shadow: var(--sp-shadow); }
.sp-card:hover::before { transform: scaleY(1); }
.sp-card__icon {
    width: 48px; height: 48px; border-radius: var(--sp-r);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-paper-2); color: var(--sp-brand-700); font-size: 19px; margin-bottom: 18px;
}
.sp-card:hover .sp-card__icon { background: var(--sp-brand); color: #fff; }
.sp-card h3 {
    font-family: var(--sp-head); font-weight: 700; font-size: 19px; letter-spacing: .02em;
    text-transform: uppercase; color: var(--sp-ink); margin: 0 0 10px; line-height: 1.25;
}
[dir="rtl"] .sp-card h3 { font-family: var(--sp-sans-ar); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 18px; }
.sp-card p { font-size: 14.5px; color: var(--sp-muted); margin: 0; line-height: 1.65; }
.sp-card__link {
    margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sp-head); font-weight: 700; font-size: 14px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--sp-brand-700); text-decoration: none;
}
[dir="rtl"] .sp-card__link { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; }
.sp-card__link i { transition: transform .18s ease; }
[dir="rtl"] .sp-card__link i { transform: scaleX(-1); }
.sp-card:hover .sp-card__link i { transform: translateX(4px); }
[dir="rtl"] .sp-card:hover .sp-card__link i { transform: scaleX(-1) translateX(4px); }

/* two actions sharing the card footer */
.sp-card__actions {
    margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px 16px;
}
.sp-card__actions .sp-card__link { margin-top: 0; padding-top: 0; }
.sp-card__link--alt { color: var(--sp-muted); }
.sp-card__link--alt:hover { color: var(--sp-brand-700); }

/* nested bullet list inside a card */
.sp-card__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.sp-card__list li {
    font-size: 14px; color: var(--sp-muted); display: flex; gap: 9px; align-items: flex-start; line-height: 1.5;
}
.sp-card__list li::before {
    content: ""; width: 6px; height: 6px; flex: 0 0 6px; margin-top: 8px;
    background: var(--sp-brand); transform: skewX(-18deg);
}

/* compact tile used for long taxonomy lists */
.sp-tile {
    background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg);
    padding: 18px 18px; display: flex; align-items: center; gap: 14px;
    transition: border-color .16s ease, transform .16s ease, background .16s ease;
    text-decoration: none; height: 100%;
}
.sp-tile:hover { border-color: var(--sp-brand); transform: translateY(-3px); text-decoration: none; }
.sp-tile i { color: var(--sp-brand-700); font-size: 17px; flex: 0 0 auto; width: 22px; text-align: center; }
.sp-tile span {
    font-family: var(--sp-head); font-weight: 600; font-size: 16px; letter-spacing: .02em;
    text-transform: uppercase; color: var(--sp-ink); line-height: 1.3;
}
[dir="rtl"] .sp-tile span { font-family: var(--sp-sans-ar); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 15px; }

/* numbered "point" row — the Why / benefits lists */
.sp-point { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--sp-line); }
.sp-point:last-child { border-bottom: 0; }
.sp-point__no {
    font-family: var(--sp-display); font-size: 20px; color: var(--sp-brand); line-height: 1;
    flex: 0 0 auto; min-width: 34px; padding-top: 2px;
}
.sp-point__icon { color: var(--sp-brand-700); font-size: 17px; flex: 0 0 24px; padding-top: 3px; }
.sp-point p { margin: 0; font-size: 15.5px; color: #3D3345; }

/* journey / steps */
.sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; }
.sp-step {
    padding: 28px 22px; border: 1px solid var(--sp-line); margin: -1px 0 0 -1px;
    background: var(--sp-card); position: relative;
}
.sp-step__no {
    font-family: var(--sp-display); font-size: 34px; color: var(--sp-line-2); line-height: 1; display: block; margin-bottom: 12px;
}
.sp-step h4 {
    font-family: var(--sp-head); font-weight: 700; font-size: 17px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--sp-ink); margin: 0; line-height: 1.3;
}
[dir="rtl"] .sp-step h4 { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 16px; }
.sp-step:hover { background: var(--sp-ink); }
.sp-step:hover .sp-step__no { color: var(--sp-accent); }
.sp-step:hover h4 { color: #fff; }

/* ------------------------------------------------------- 7 · Page banner -- */
.sp-banner {
    background: linear-gradient(135deg, var(--sp-ink) 0%, var(--sp-ink-3) 100%);
    color: #fff; padding: 76px 0 68px; position: relative; overflow: hidden;
}
.sp-banner::before {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 16px);
    opacity: .7;
}
.sp-banner .sp-container { position: relative; }
.sp-banner__kicker {
    font-family: var(--sp-head); font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--sp-accent); margin-bottom: 14px; display: block;
}
[dir="rtl"] .sp-banner__kicker { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 15px; }
.sp-banner h1 { font-size: clamp(32px, 4.6vw, 58px); color: #fff; margin: 0 0 16px; max-width: 20ch; }
.sp-banner p { color: #C8BAD1; max-width: 68ch; margin: 0; font-size: 16.5px; }
.sp-banner__crumbs { margin-top: 24px; font-size: 13.5px; color: #8FA89C; }
.sp-banner__crumbs a { color: #DCD2E3; text-decoration: none; }
.sp-banner__crumbs a:hover { color: var(--sp-accent); }

/* --------------------------------------------------- 8 · Split / feature -- */
.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sp-split__media {
    position: relative; border-radius: var(--sp-r-lg); overflow: hidden; min-height: 340px;
    background: linear-gradient(140deg, var(--sp-ink) 0%, var(--sp-brand-700) 100%);
    display: flex; align-items: center; justify-content: center;
}
.sp-split__media::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
}
.sp-split__media i { font-size: 92px; color: rgba(200, 255, 79, .55); position: relative; }
.sp-split__body h2 { font-size: clamp(27px, 3.3vw, 40px); margin: 0 0 18px; }
.sp-split__body p { font-size: 16px; margin: 0 0 14px; }

/* vision / mission pair */
.sp-vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sp-vm__card {
    background: var(--sp-ink); color: #fff; border-radius: var(--sp-r-lg); padding: 38px 34px;
    position: relative; overflow: hidden;
}
.sp-vm__card:nth-child(2) { background: var(--sp-brand-700); }
.sp-vm__card i { font-size: 26px; color: var(--sp-accent); margin-bottom: 18px; display: block; }
.sp-vm__card h3 { color: #fff; font-size: 26px; margin: 0 0 14px; }
.sp-vm__card p { color: rgba(255, 255, 255, .84); font-size: 15.5px; margin: 0; line-height: 1.8; }

/* --------------------------------------------------------------- 9 · CTA -- */
.sp-cta {
    background: var(--sp-accent); color: var(--sp-ink); padding: 68px 0; position: relative; overflow: hidden;
}
.sp-cta::before {
    content: ""; position: absolute; inset-inline-end: -120px; top: -90px;
    width: 420px; height: 420px; border-radius: 50%; border: 3px solid rgba(28, 15, 36, .1);
}
.sp-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; position: relative; }
.sp-cta h2 { font-size: clamp(28px, 3.6vw, 44px); margin: 0 0 12px; color: var(--sp-ink); }
.sp-cta p { margin: 0; max-width: 62ch; color: #27392F; font-size: 16px; }
.sp-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sp-cta .sp-btn--primary { background: var(--sp-ink); }
.sp-cta .sp-btn--primary:hover { background: var(--sp-brand-700); }
.sp-cta .sp-btn--ghost { border-color: rgba(28, 15, 36, .35); }

/* ------------------------------------------------------------ 10 · FAQ ---- */
.sp-faq { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.sp-faq__item { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg); overflow: hidden; }
.sp-faq__q {
    width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
    padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    font-family: var(--sp-head); font-weight: 700; font-size: 18px; letter-spacing: .02em;
    text-transform: uppercase; color: var(--sp-ink);
}
[dir="rtl"] .sp-faq__q { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 17px; }
.sp-faq__q i { color: var(--sp-brand); transition: transform .2s ease; flex: 0 0 auto; }
.sp-faq__item.is-open .sp-faq__q { background: var(--sp-paper-2); }
.sp-faq__item.is-open .sp-faq__q i { transform: rotate(45deg); }
.sp-faq__a { display: none; padding: 0 24px 24px; }
.sp-faq__item.is-open .sp-faq__a { display: block; }
.sp-faq__a p { margin: 0; font-size: 15.5px; color: var(--sp-muted); }

/* --------------------------------------------------------- 11 · Contact --- */
.sp-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 44px; align-items: start; }
.sp-contact-card {
    background: var(--sp-ink); color: #fff; border-radius: var(--sp-r-lg); padding: 36px 32px;
}
.sp-contact-card h3 { color: #fff; font-size: 24px; margin: 0 0 22px; }
.sp-contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.sp-contact-item:last-of-type { border-bottom: 0; }
.sp-contact-item i { color: var(--sp-accent); font-size: 17px; flex: 0 0 22px; padding-top: 3px; }
.sp-contact-item a, .sp-contact-item span { color: #DCD2E3; text-decoration: none; font-size: 15px; line-height: 1.6; }
.sp-contact-item a:hover { color: var(--sp-accent); }

.sp-form { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg); padding: 34px 32px; }
.sp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sp-field { margin-bottom: 18px; }
.sp-field label {
    display: block; font-family: var(--sp-head); font-weight: 600; font-size: 13.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--sp-ink); margin-bottom: 8px;
}
[dir="rtl"] .sp-field label { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }
.sp-field input, .sp-field select, .sp-field textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--sp-line-2); border-radius: var(--sp-r);
    font-family: inherit; font-size: 15px; color: #241C29; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus {
    outline: none; border-color: var(--sp-brand); box-shadow: 0 0 0 3px rgba(117, 65, 143, .14);
}
.sp-field textarea { min-height: 130px; resize: vertical; }
.sp-field__hint { font-size: 13px; color: var(--sp-muted-2); margin-top: 6px; }
.sp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #3D3345; }
.sp-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--sp-brand); flex: 0 0 auto; }

/* inline alerts */
.sp-alert {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--sp-r-lg);
    margin-bottom: 24px; font-size: 15px; border: 1px solid transparent;
}
.sp-alert--success { background: rgba(117, 65, 143, .1); border-color: rgba(117, 65, 143, .3); color: var(--sp-brand-700); }
.sp-alert--error { background: rgba(255, 107, 44, .1); border-color: rgba(255, 107, 44, .32); color: #B8431A; }

/* ------------------------------------------------------------ 12 · News --- */
.sp-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-news__item {
    background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg); overflow: hidden;
    display: flex; flex-direction: column; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sp-news__item:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow); border-color: var(--sp-line-2); text-decoration: none; }
.sp-news__media {
    height: 180px; background: linear-gradient(140deg, var(--sp-ink) 0%, var(--sp-brand-700) 100%);
    position: relative; display: flex; align-items: center; justify-content: center;
}
.sp-news__media::before {
    content: ""; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px);
}
.sp-news__media i { font-size: 40px; color: rgba(200,255,79,.5); position: relative; }
.sp-news__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sp-news__cat {
    font-family: var(--sp-head); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--sp-brand-700); font-weight: 700; margin-bottom: 10px;
}
[dir="rtl"] .sp-news__cat { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
.sp-news__item h3 { font-size: 18px; margin: 0 0 10px; line-height: 1.3; }
.sp-news__item p { font-size: 14.5px; color: var(--sp-muted); margin: 0 0 14px; }
.sp-news__date { margin-top: auto; font-size: 13px; color: var(--sp-muted-2); }

/* ------------------------------------------------- 13 · Partner / logos --- */
.sp-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.sp-logo-card {
    border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg); background: #fff;
    padding: 24px 16px; text-align: center; text-decoration: none; transition: border-color .16s ease, transform .16s ease;
}
.sp-logo-card:hover { border-color: var(--sp-brand); transform: translateY(-3px); text-decoration: none; }
.sp-logo-card__mark {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
    background: var(--sp-paper-2); color: var(--sp-brand-700);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sp-display); font-size: 20px;
}
.sp-logo-card__name { font-size: 14.5px; font-weight: 600; color: var(--sp-ink); line-height: 1.35; }
.sp-logo-card__type { font-size: 12.5px; color: var(--sp-muted-2); margin-top: 5px; }

/* --------------------------------------------------------- 14 · Footer ---- */
.sp-footer { background: var(--sp-ink); color: #C8BAD1; padding-top: 72px; position: relative; overflow: hidden; }
.sp-footer::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--sp-brand) 0%, var(--sp-accent) 50%, var(--sp-orange) 100%);
}
.sp-footer__top { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 52px; }
.sp-footer .sp-brand__name { color: #fff; }
.sp-footer .sp-brand__tag { color: var(--sp-accent); }
.sp-footer__about { margin: 20px 0 24px; font-size: 14.5px; line-height: 1.8; color: #B3A3BC; max-width: 44ch; }
.sp-footer h4 {
    font-family: var(--sp-head); font-weight: 700; font-size: 16px; letter-spacing: .12em;
    text-transform: uppercase; color: #fff; margin: 0 0 20px;
}
[dir="rtl"] .sp-footer h4 { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 17px; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sp-footer ul a { color: #B3A3BC; text-decoration: none; font-size: 14.5px; transition: color .15s ease, padding .15s ease; }
.sp-footer ul a:hover { color: var(--sp-accent); padding-inline-start: 5px; }

.sp-footer__contact { display: grid; gap: 12px; margin-bottom: 24px; }
.sp-footer__contact a { display: inline-flex; gap: 10px; align-items: center; color: #DCD2E3; text-decoration: none; font-size: 14.5px; }
.sp-footer__contact a:hover { color: var(--sp-accent); }
.sp-footer__contact i { color: var(--sp-brand); width: 18px; }

.sp-footer__social { display: flex; gap: 9px; margin-top: 4px; }
.sp-footer__social a {
    width: 38px; height: 38px; border-radius: var(--sp-r); border: 1px solid rgba(255,255,255,.16);
    display: inline-flex; align-items: center; justify-content: center; color: #DCD2E3; font-size: 15px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sp-footer__social a:hover { background: var(--sp-accent); color: var(--sp-ink); border-color: var(--sp-accent); }

.sp-footer__apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sp-footer__apps a {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px;
    border-radius: var(--sp-r); border: 1px solid rgba(255,255,255,.16);
    color: #DCD2E3; text-decoration: none; font-size: 14px; font-weight: 600;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sp-footer__apps a i { font-size: 18px; color: var(--sp-brand); transition: color .15s ease; }
.sp-footer__apps a:hover { background: var(--sp-accent); color: var(--sp-ink); border-color: var(--sp-accent); }
.sp-footer__apps a:hover i { color: var(--sp-ink); }

.sp-footer__newsletter { display: flex; margin: 22px 0 6px; max-width: 360px; }
.sp-footer__newsletter input {
    flex: 1; padding: 13px 15px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
    color: #fff; border-radius: var(--sp-r) 0 0 var(--sp-r); font-size: 14.5px;
}
[dir="rtl"] .sp-footer__newsletter input { border-radius: 0 var(--sp-r) var(--sp-r) 0; }
.sp-footer__newsletter input::placeholder { color: #7D968B; }
.sp-footer__newsletter input:focus { outline: none; border-color: var(--sp-brand); }
.sp-footer__newsletter button {
    padding: 0 20px; background: var(--sp-brand); color: #fff; border: 0;
    border-radius: 0 var(--sp-r) var(--sp-r) 0; cursor: pointer; font-size: 16px;
}
[dir="rtl"] .sp-footer__newsletter button { border-radius: var(--sp-r) 0 0 var(--sp-r); }
.sp-footer__newsletter button:hover { background: var(--sp-accent); color: var(--sp-ink); }

.sp-footer__bar { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; }
.sp-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; }
.sp-footer__bar a { color: #B3A3BC; text-decoration: none; }
.sp-footer__bar a:hover { color: var(--sp-accent); }
.sp-footer__policies { display: flex; gap: 20px; flex-wrap: wrap; }
.sp-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-footer__pay span {
    border: 1px solid rgba(255,255,255,.16); border-radius: 3px; padding: 4px 10px;
    font-size: 11.5px; letter-spacing: .06em; color: #B3A3BC;
}
.sp-footer__copy { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; text-align: center; font-size: 13.5px; color: #80998D; }
.sp-footer__copy a { color: var(--sp-accent); text-decoration: none; }

/* ----------------------------------------------- 15 · Marketplace cards --- */
/* Product cards carry no photography in the seeded catalogue, so the media area
   is a generated, on-brand panel keyed to the product's sector icon. */
.sp-product-media {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--sp-r) var(--sp-r) 0 0; overflow: hidden;
    background: linear-gradient(140deg, var(--sp-ink) 0%, var(--sp-brand-700) 100%);
    display: flex; align-items: center; justify-content: center;
}
.sp-product-media::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px);
}
.sp-product-media i { font-size: 46px; color: rgba(200,255,79,.55); position: relative; }
.sp-product-media img { width: 100%; height: 100%; object-fit: cover; position: relative; }

.sp-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.sp-product {
    background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sp-product:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow); border-color: var(--sp-line-2); }
.sp-product__link { text-decoration: none; display: flex; flex-direction: column; flex: 1; color: inherit; }
.sp-product__link:hover { text-decoration: none; }
.sp-product .sp-product-media { border-radius: 0; }

.sp-product__badge {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
    background: var(--sp-orange); color: #fff; font-family: var(--sp-head); font-weight: 700;
    font-size: 12.5px; letter-spacing: .06em; padding: 4px 10px; border-radius: 3px;
}
.sp-product__bulk {
    position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 2;
    background: rgba(200, 255, 79, .92); color: var(--sp-ink);
    font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 3px;
}
.sp-product__body { padding: 16px 16px 14px; display: flex; flex-direction: column; flex: 1; }
.sp-product__sector {
    font-family: var(--sp-head); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sp-brand-700); font-weight: 700; margin-bottom: 8px;
}
[dir="rtl"] .sp-product__sector { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
/* Product names stay sentence-case — the uppercase display rule hurts scannability here. */
.sp-page h3.sp-product__name, h3.sp-product__name {
    font-family: var(--sp-sans); font-weight: 600; font-size: 15px; line-height: 1.4;
    color: var(--sp-ink); margin: 0 0 12px; text-transform: none; letter-spacing: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[dir="rtl"] .sp-page h3.sp-product__name, [dir="rtl"] h3.sp-product__name {
    font-family: var(--sp-sans-ar); font-weight: 700;
}
.sp-product__meta { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sp-product__price { font-family: var(--sp-head); font-weight: 700; font-size: 19px; color: var(--sp-brand-700); }
[dir="rtl"] .sp-product__price { font-family: var(--sp-sans-ar); }
.sp-product__price-was { font-size: 13.5px; color: var(--sp-muted-2); text-decoration: line-through; margin-inline-start: 7px; font-weight: 400; }
.sp-product__rating { font-size: 13px; color: var(--sp-muted); white-space: nowrap; }
.sp-product__rating i { color: #F5A623; }

.sp-product__actions { display: flex; gap: 8px; padding: 0 16px 16px; }
.sp-product__cart {
    flex: 1; min-width: 0; border: 0; background: var(--sp-ink); color: #fff; border-radius: var(--sp-r);
    padding: 11px 10px; font-family: var(--sp-head); font-weight: 700; font-size: 13.5px;
    letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .15s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[dir="rtl"] .sp-product__cart { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; }
.sp-product__cart:hover { background: var(--sp-brand); }
.sp-product__cart:disabled { opacity: .6; cursor: not-allowed; }
.sp-product__wish {
    width: 42px; flex: 0 0 42px; border: 1px solid var(--sp-line-2); background: #fff;
    border-radius: var(--sp-r); color: var(--sp-muted); cursor: pointer; transition: all .15s ease;
}
.sp-product__wish:hover, .sp-product__wish.is-active { border-color: var(--sp-orange); color: var(--sp-orange); }

@media (max-width: 1024px) { .sp-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .sp-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 420px)  { .sp-products { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- 16 · Utility --- */
.sp-divider { height: 1px; background: var(--sp-line); border: 0; margin: 0; }
.sp-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px;
    background: var(--sp-paper-2); color: var(--sp-brand-700);
    font-family: var(--sp-head); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
[dir="rtl"] .sp-badge { font-family: var(--sp-sans-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
.sp-badge--lime { background: rgba(200,255,79,.22); color: var(--sp-ink); }
.sp-prose h3 { font-size: 22px; margin: 32px 0 12px; }
.sp-prose h2 { font-size: 28px; margin: 36px 0 14px; }
.sp-prose p, .sp-prose li { font-size: 15.5px; color: #443A4C; line-height: 1.8; }
.sp-prose ul, .sp-prose ol { padding-inline-start: 22px; margin: 0 0 16px; }
.sp-prose li { margin-bottom: 8px; }

/* ------------------------------------------------------- 17 · Responsive -- */
@media (max-width: 1200px) {
    .sp-stats__grid { grid-template-columns: repeat(3, 1fr); }
    .sp-stats__item:nth-child(3) { border-inline-end: 0; }
    .sp-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .sp-hero { padding: 76px 0 70px; }
    .sp-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .sp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-split { grid-template-columns: 1fr; gap: 34px; }
    .sp-contact-grid { grid-template-columns: 1fr; gap: 28px; }
    .sp-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .sp-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Eight top links plus the "More" menu, the brand and the CTA only fit comfortably
   on a full-width desktop. Below that, use the hamburger / offcanvas (which already
   lists every link) instead of squeezing the horizontal bar until items collide. */
@media (max-width: 1299px) {
    .main-menu { display: none !important; }
    .mobile-menu-icon { display: inline-flex; }
}

@media (max-width: 768px) {
    .sp-section { padding: 58px 0; }
    .sp-section__head { margin-bottom: 30px; }
    .sp-grid--2, .sp-grid--3, .sp-grid--4 { grid-template-columns: 1fr; }
    /* Grids tagged --m2 stay two-up on phones (e.g. the training objectives tiles). */
    .sp-grid.sp-grid--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    /* Corporate values cards stay two-up on phones. */
    .sp-grid.sp-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    /* Twenty-two sector cards stacked one-up makes the home page enormous on a phone,
       so they become a compact two-up index there. */
    .sp-grid.sp-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .sp-sectors .sp-card { padding: 18px 15px; }
    .sp-sectors .sp-card p { font-size: 13px; line-height: 1.55; }
    .sp-sectors .sp-card__icon { width: 38px; height: 38px; font-size: 16px; margin-bottom: 12px; }
    .sp-sectors .sp-card h3 { font-size: 15px; }
    .sp-sectors .sp-card__actions { gap: 6px; padding-top: 12px; }
    .sp-sectors .sp-card__link { font-size: 12.5px; }
    .sp-sectors .sp-card__link--alt { display: none; }
    .sp-vm { grid-template-columns: 1fr; }
    .sp-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .sp-stats__item { border-inline-end: 1px solid rgba(255,255,255,.08) !important; }
    .sp-stats__item:nth-child(2n) { border-inline-end: 0 !important; }
    .sp-hero__board-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-news { grid-template-columns: 1fr; }
    .sp-steps { grid-template-columns: 1fr; }
    .sp-form__row { grid-template-columns: 1fr; }
    .sp-cta__inner { flex-direction: column; align-items: flex-start; }
    .sp-footer__top { grid-template-columns: 1fr; }
    .sp-banner { padding: 52px 0 46px; }
    .sp-container { padding-inline: 16px; }
    .navbar > .container { min-height: 64px; }
    .sp-brand__mark { width: 36px; height: 36px; flex: 0 0 36px; }
    .sp-brand__name { font-size: 18px; }
    .sp-brand__tag { font-size: 10px; }
    .add-product-btn { display: none; }
}

@media (max-width: 480px) {
    .sp-hero__cta { flex-direction: column; align-items: stretch; }
    .sp-hero__cta .sp-btn { width: 100%; }
    /* The two main calls go full width; the secondary trio becomes a tidy,
       equal-width 2-up grid so the buttons line up instead of wrapping into a
       lone, offset block. The odd last button spans the full row. */
    .sp-hero__cta--more {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .sp-hero__cta--more .sp-btn {
        width: 100%;
        flex: none;
        padding-inline: 10px;
    }
    .sp-hero__cta--more .sp-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .sp-footer__newsletter { max-width: none; }
}