/* ============================================================
   KHEDMA LB — MAIN STYLESHEET
   ------------------------------------------------------------
   Table of Contents:
   1.  Design Tokens (CSS Variables)
   2.  Reset & Base Styles
   3.  Utility Classes
   4.  Buttons
   5.  Navigation
   6.  Mobile Drawer
   7.  Hero Section
   8.  Trust Bar
   9.  Services Section
   10. How It Works Section
   11. Why Khedma LB Section
   12. Vendor CTA Section
   13. FAQ Section
   14. Footer
   15. Animations & Scroll Reveal
   16. Responsive (Media Queries)
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   These CSS variables are the single source of truth for
   colors, spacing, fonts, and effects used across the site.
   Update a variable here and it changes everywhere.
   ============================================================ */
:root {
    /* --- Brand Colors --- */
    --color-primary: #1A2B4A;    /* Deep navy — trust, professionalism */
    --color-dark:    #0D1A30;    /* Darker navy for hero & footer backgrounds */
    --color-accent:  #E84B1A;    /* Vibrant orange-red — energy, action */
    --color-gold:    #F5C535;    /* Amber gold — premium feel */
    --color-bg:      #F5F7FA;    /* Off-white page background */

    /* --- Text Colors --- */
    --color-text:    #2D3748;    /* Main body text */
    --color-muted:   #718096;    /* Secondary / descriptive text */
    --color-white:   #FFFFFF;

    /* --- UI Colors --- */
    --color-border:  #E2E8F0;    /* Subtle dividing lines */

    /* --- Shadows --- */
    --shadow-sm:     0 2px 8px   rgba(26, 43, 74, 0.07);
    --shadow-md:     0 8px 32px  rgba(26, 43, 74, 0.11);
    --shadow-lg:     0 24px 64px rgba(26, 43, 74, 0.16);
    --shadow-accent: 0 8px 30px  rgba(232, 75, 26, 0.35);

    /* --- Border Radii --- */
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-xl:   36px;
    --radius-pill: 100px;

    /* --- Transition --- */
    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s var(--ease);

    /* --- Typography --- */
    --font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-ar: 'Noto Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
}


/* ============================================================
   2. RESET & BASE STYLES
   Clears browser defaults so we start from a clean slate.
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */
}

body {
    font-family: var(--font);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;           /* Prevents horizontal scroll on mobile */
    -webkit-font-smoothing: antialiased; /* Sharper text on Mac/iOS */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

/* Keyboard focus ring — only shows for keyboard users, not mouse clicks */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ============================================================
   3. UTILITY CLASSES
   Reusable building blocks applied directly in the HTML.
   ============================================================ */

/* Centers content with a max width and side padding */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Small eyebrow label shown above section headings */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 75, 26, 0.10);
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(1.9rem, 4vw, 3rem); /* Scales fluidly with screen width */
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.18;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--color-muted);
    line-height: 1.75;
    max-width: 540px;
}

.text-center { text-align: center; }
.mx-auto     { margin-left: auto; margin-right: auto; }


/* ============================================================
   4. BUTTONS
   Three styles: primary (orange), ghost (transparent outline),
   and gold (for the vendor CTA).
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

/* Orange filled — used for the main customer CTA */
.btn-primary {
    background: var(--color-accent);
    color: var(--color-white);
    box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
    background: #d43e10;
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(232, 75, 26, 0.45);
}

/* Transparent with border — used on dark backgrounds */
.btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border: 1.5px solid rgba(255, 255, 255, 0.30);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.60);
}

/* Gold filled — used for the vendor CTA card */
.btn-gold {
    background: var(--color-gold);
    color: var(--color-primary);
    font-weight: 800;
    box-shadow: 0 8px 30px rgba(245, 197, 53, 0.35);
}
.btn-gold:hover {
    background: #e8b820;
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(245, 197, 53, 0.50);
}


/* ============================================================
   5. NAVIGATION
   Fixed to the top of the page. Transparent until the user
   scrolls down, then becomes a blurred dark bar.
   ============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 18px 0;
    transition: var(--transition);
}

/* Added by JavaScript once the page scrolls past 60px */
.nav.is-scrolled {
    background: rgba(13, 26, 48, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 12px 0;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.25);
}

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

/* --- Logo --- */
.nav__logo {
    display: flex;
    align-items: center;
    gap: 11px;
}

.nav__logo-mark {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #f07030 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--color-white);
    flex-shrink: 0;
}

.nav__logo-text {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-white);
    letter-spacing: -0.3px;
}

.nav__logo-text em {
    font-style: normal;
    color: var(--color-accent);
}

/* --- Desktop Links --- */
.nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav__links a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav__links a:hover {
    color: var(--color-white);
}

/* --- Desktop CTA Buttons --- */
.nav__cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav__cta .btn {
    padding: 9px 18px;
    font-size: 0.82rem;
}

/* --- Hamburger Menu Icon (mobile only) --- */
.nav__burger {
    display: none; /* Hidden on desktop — shown in media query below */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

.nav__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: var(--transition);
}


/* ============================================================
   6. MOBILE DRAWER
   Full-screen overlay that slides open when the hamburger
   is tapped on mobile devices.
   ============================================================ */
.mobile-drawer {
    display: none; /* JavaScript adds .is-open to show it */
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--color-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.mobile-drawer.is-open {
    display: flex;
}

.mobile-drawer__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    font-family: var(--font);
}

.mobile-drawer a {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.80);
}

.mobile-drawer a:hover {
    color: var(--color-white);
}

.mobile-drawer .btn {
    font-size: 0.95rem;
    padding: 13px 28px;
}


/* ============================================================
   7. HERO SECTION
   The full-screen banner at the top of the page.
   Features a dark gradient background, floating service cards,
   and the main headline + CTAs.
   ============================================================ */
.hero {
    min-height: 100svh; /* svh = small viewport height, accounts for mobile browser bars */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-dark) 0%, #1A2B4A 55%, #233A62 100%);
}

/* Glowing color blobs in the background — purely decorative */
.hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__glow::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(232, 75, 26, 0.12) 0%, transparent 65%);
}

.hero__glow::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -5%;
    width: 55%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(245, 197, 53, 0.07) 0%, transparent 65%);
}

/* Subtle dot-grid texture overlay */
.hero__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}

/* Two-column layout: text on the left, visual cards on the right */
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    width: 100%;
    padding-top: 80px; /* Offset so content doesn't hide behind the fixed nav */
}

/* --- Hero Text Column --- */
.hero__text {
    max-width: 560px;
}

/* Small badge above the main headline */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(232, 75, 26, 0.14);
    border: 1px solid rgba(232, 75, 26, 0.28);
    color: #ff8c5a;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    margin-bottom: 24px;
    animation: fadeUp 0.7s var(--ease) both;
}

/* The animated green dot inside the eyebrow badge */
.hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

.hero__title {
    font-size: clamp(2.6rem, 5.5vw, 4rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.12;
    margin-bottom: 22px;
    animation: fadeUp 0.7s var(--ease) 0.1s both;
}

/* Gold-to-orange gradient on highlighted words in the title */
.hero__title .grad {
    background: linear-gradient(120deg, var(--color-gold) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.78;
    margin-bottom: 36px;
    animation: fadeUp 0.7s var(--ease) 0.2s both;
}

.hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    animation: fadeUp 0.7s var(--ease) 0.3s both;
}

/* Quick stat numbers shown below the CTA buttons */
.hero__stats {
    display: flex;
    gap: 36px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    animation: fadeUp 0.7s var(--ease) 0.4s both;
}

.hero__stat-val {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-white);
    line-height: 1;
}

.hero__stat-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
}

/* --- Hero Visual Column (floating cards) --- */
.hero__visual {
    position: relative;
    height: 500px;
    animation: fadeLeft 0.8s var(--ease) 0.25s both;
}

/* Central "hub" card in the middle of the visual */
.hero-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    background: linear-gradient(145deg, rgba(232, 75, 26, 0.22), rgba(26, 43, 74, 0.50));
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(232, 75, 26, 0.28);
    border-radius: 26px;
    padding: 28px;
    text-align: center;
    color: var(--color-white);
    animation: floatY 5s ease-in-out infinite;
}

.hero-hub__icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-accent), #f07030);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto 14px;
}

.hero-hub__title {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 3px;
}

.hero-hub__sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.50);
    margin-bottom: 18px;
}

.hero-hub__live {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.70rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
}

.hero-hub__live-dot {
    color: #4ade80;
    font-size: 0.65rem;
    font-weight: 700;
}

.hero-hub__bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    overflow: hidden;
}

.hero-hub__bar-fill {
    height: 100%;
    width: 72%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
    border-radius: 3px;
}

/* Floating service chip cards around the hub */
.svc-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 14px 18px;
    color: var(--color-white);
    width: 195px;
}

.svc-chip__ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.svc-chip__name {
    font-size: 0.85rem;
    font-weight: 700;
}

.svc-chip__status {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.50);
    margin-top: 2px;
}

/* Position each chip and give it a staggered float animation */
.svc-chip:nth-child(1) { top: 6%;    right: 0;    animation: floatY 6s ease-in-out 0.0s infinite; }
.svc-chip:nth-child(2) { top: 26%;   left: -10px; animation: floatY 6s ease-in-out 1.0s infinite; }
.svc-chip:nth-child(3) { top: 46%;   right: -8px; animation: floatY 6s ease-in-out 2.0s infinite; }
.svc-chip:nth-child(4) { top: 66%;   left: 5px;   animation: floatY 6s ease-in-out 0.5s infinite; }
.svc-chip:nth-child(5) { bottom: 4%; right: 10px; animation: floatY 6s ease-in-out 1.5s infinite; }


/* ============================================================
   8. TRUST BAR
   A thin horizontal strip below the hero that highlights
   four key platform promises.
   ============================================================ */
.trust-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.trust-bar__inner {
    display: flex;
    align-items: stretch;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 40px;
    flex: 1;
    justify-content: center;
}

/* Vertical dividers between the four items */
.trust-item + .trust-item {
    border-left: 1px solid var(--color-border);
}

.trust-item__ico {
    width: 38px;
    height: 38px;
    background: rgba(232, 75, 26, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.trust-item__copy strong {
    display: block;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--color-primary);
}

.trust-item__copy span {
    font-size: 0.75rem;
    color: var(--color-muted);
}


/* ============================================================
   9. SERVICES SECTION
   A five-column grid of clickable service category cards.
   Each card links to the customer request form.
   ============================================================ */
.services {
    padding: 96px 0;
}

.services__header {
    margin-bottom: 56px;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

/* Pagination row below the services grid */
.services__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

/* Individual page-number button */
.svc-pagination__btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-muted);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.svc-pagination__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.svc-pagination__btn.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    box-shadow: var(--shadow-accent);
}

/* Individual service card */
.svc-card {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 20px 28px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

/* Colored accent line at the bottom — scales in on hover */
.svc-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, var(--color-accent)); /* set per-card in HTML */
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
}

.svc-card:hover {
    transform: translateY(-10px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.svc-card:hover::after {
    transform: scaleX(1);
}

.svc-card__icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: var(--card-bg, rgba(232, 75, 26, 0.08)); /* set per-card in HTML */
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    transition: transform 0.3s var(--ease);
}

.svc-card:hover .svc-card__icon {
    transform: scale(1.1) rotate(-6deg);
}

.svc-card__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.svc-card__desc {
    font-size: 0.80rem;
    color: var(--color-muted);
    line-height: 1.60;
}

/* "Request ›" label — fades in on hover */
.svc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
    font-size: 0.77rem;
    font-weight: 700;
    color: var(--color-accent);
    opacity: 0;
    transform: translateY(6px);
    transition: var(--transition);
}

.svc-card:hover .svc-card__cta {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   10. HOW IT WORKS SECTION
   Dark section explaining the 3-step process.
   Has a tab switcher to show steps for Customers vs Vendors.
   ============================================================ */
.hiw {
    padding: 96px 0;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-dark) 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative background glow */
.hiw::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(232, 75, 26, 0.09) 0%, transparent 60%);
    pointer-events: none;
}

.hiw__header {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
}

/* Override default section title color for dark background */
.hiw__header .section-title   { color: var(--color-white); }
.hiw__header .section-subtitle { color: rgba(255, 255, 255, 0.55); margin: 0 auto; }

.hiw__header .section-tag {
    background: rgba(232, 75, 26, 0.18);
    color: #ff8c5a;
    border: 1px solid rgba(232, 75, 26, 0.25);
}

/* Pill-style tab switcher */
.hiw__tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-pill);
    padding: 5px;
    width: fit-content;
    margin: 0 auto 52px;
}

.hiw__tab {
    padding: 9px 26px;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.50);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

/* Active tab state — added by JavaScript */
.hiw__tab.is-active {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Panels — only the active one is visible */
.hiw__panel {
    display: none;
}

.hiw__panel.is-active {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
}

/* Arrow connector between steps */
.hiw__panel.is-active .hiw__step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -18px;
    top: 44px;
    color: rgba(232, 75, 26, 0.50);
    font-size: 1.4rem;
    font-weight: 700;
}

.hiw__step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    position: relative;
    transition: var(--transition);
}

.hiw__step:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(232, 75, 26, 0.30);
}

.hiw__step-num {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-accent), #f07030);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: 20px;
}

.hiw__step-icon {
    font-size: 1.8rem;
    margin-bottom: 14px;
}

.hiw__step-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 10px;
}

.hiw__step-desc {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.72;
}

/* CTA row below the steps */
.hiw__cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 56px;
}


/* ============================================================
   11. WHY KHEDMA LB SECTION
   Two-column layout: coverage card on the left,
   feature list on the right.
   ============================================================ */
.why {
    padding: 96px 0;
    background: var(--color-white);
}

.why__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* --- Left: Coverage Card --- */
.why__visual {
    position: relative;
}

.why__map-card {
    background: linear-gradient(140deg, var(--color-primary), var(--color-dark));
    border-radius: var(--radius-xl);
    padding: 44px;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* Decorative circle behind the text */
.why__map-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(232, 75, 26, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.why__map-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(232, 75, 26, 0.18);
    border: 1px solid rgba(232, 75, 26, 0.30);
    color: #ff8c5a;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
}

.why__map-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.why__map-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.72;
    margin-bottom: 24px;
}

/* Two-column grid of Lebanese region names */
.why__regions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.why__region {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.75);
}

.why__region::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Floating rating badge over the bottom-right of the map card */
.why__rating {
    position: absolute;
    bottom: -22px;
    right: -22px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-lg);
}

.why__rating-ico {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-accent), #f07030);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.why__rating-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.why__rating-lbl {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 3px;
}

/* --- Right: Feature List --- */
.why__header {
    margin-bottom: 36px;
}

/* Individual feature row (icon + text) */
.feature {
    display: flex;
    gap: 18px;
    padding: 26px 0;
    border-bottom: 1px solid var(--color-border);
}

.feature:last-child {
    border-bottom: none;
}

.feature__ico {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.feature__title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.feature__desc {
    font-size: 0.84rem;
    color: var(--color-muted);
    line-height: 1.68;
}


/* ============================================================
   12. VENDOR CTA SECTION
   A dark, visually rich card encouraging professionals
   to join the platform.
   ============================================================ */
.vendor {
    padding: 96px 0;
    background: var(--color-bg);
}

.vendor__card {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1A2B4A 60%, #22427A 100%);
    border-radius: var(--radius-xl);
    padding: 72px 80px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 60px;
    align-items: center;
}

/* Decorative glowing orbs on the card */
.vendor__card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(232, 75, 26, 0.14), transparent 70%);
    pointer-events: none;
}

.vendor__card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 25%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 197, 53, 0.08), transparent 70%);
    pointer-events: none;
}

.vendor__content {
    position: relative; /* Keeps content above the pseudo-element orbs */
}

.vendor__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 197, 53, 0.12);
    border: 1px solid rgba(245, 197, 53, 0.28);
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 22px;
}

.vendor__title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 16px;
}

.vendor__desc {
    font-size: 0.97rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.78;
    max-width: 460px;
    margin-bottom: 32px;
}

/* Checklist of vendor benefits */
.vendor__perks {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.perk {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

.perk__check {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--color-accent), #f07030);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    color: var(--color-white);
    flex-shrink: 0;
}

/* Right side: the CTA button and note */
.vendor__action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.vendor__action .btn-gold {
    font-size: 1rem;
    padding: 16px 36px;
}

.vendor__note {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}


/* ============================================================
   13. FAQ SECTION
   Expandable accordion. One item can be open at a time.
   Clicking a question toggles its answer.
   ============================================================ */
.faq {
    padding: 96px 0;
    background: var(--color-white);
}

.faq__header {
    text-align: center;
    margin-bottom: 56px;
}

.faq__list {
    max-width: 740px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}

/* Highlighted state when an item is open */
.faq__item.is-open {
    border-color: rgba(232, 75, 26, 0.28);
    box-shadow: 0 4px 18px rgba(232, 75, 26, 0.07);
}

.faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 26px;
    cursor: pointer;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--color-primary);
    gap: 16px;
    user-select: none;
}

/* The +/× toggle icon */
.faq__icon {
    width: 26px;
    height: 26px;
    background: rgba(232, 75, 26, 0.09);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 1rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.faq__item.is-open .faq__icon {
    background: var(--color-accent);
    color: var(--color-white);
    transform: rotate(45deg); /* Turns + into × */
}

/* Answer text — uses max-height trick for smooth slide-down */
.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease), padding 0.25s;
}

.faq__a.is-open {
    max-height: 240px;
    padding-bottom: 22px;
}

.faq__a p {
    padding: 0 26px;
    font-size: 0.88rem;
    color: var(--color-muted);
    line-height: 1.78;
}


/* ============================================================
   14. FOOTER
   Dark, four-column grid with brand info, links, and contacts.
   ============================================================ */
.footer {
    background: var(--color-dark);
    padding: 72px 0 0;
}

/* Four-column grid layout */
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* --- Brand Column --- */
.footer__logo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.footer__logo-mark {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-accent), #f07030);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-white);
    flex-shrink: 0;
}

.footer__logo-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-white);
}

.footer__logo-name em {
    font-style: normal;
    color: var(--color-accent);
}

.footer__brand-desc {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.72;
    max-width: 270px;
    margin-bottom: 22px;
}

/* Social media icon row */
.footer__socials {
    display: flex;
    gap: 9px;
}

.footer__social-btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.50);
    transition: var(--transition);
}

.footer__social-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.footer__social-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* --- Link Columns --- */
.footer__col-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 18px;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer__links a {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.2s;
}

.footer__links a:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Contact Column --- */
.footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: normal; /* Override <address> italic */
}

.footer__contact-ico {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

/* --- Bottom Bar --- */
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
}

.footer__copy {
    font-size: 0.77rem;
    color: rgba(255, 255, 255, 0.25);
}

.footer__legal {
    display: flex;
    gap: 22px;
}

.footer__legal a {
    font-size: 0.77rem;
    color: rgba(255, 255, 255, 0.25);
    transition: color 0.2s;
}

.footer__legal a:hover {
    color: rgba(255, 255, 255, 0.60);
}


/* ============================================================
   15. FORM MODALS
   Full-screen overlay modals for the customer request form
   and the vendor signup form. They sit above everything else
   (z-index 1000) and use the same dark navy palette as the
   Vendor CTA section and the How It Works dark background.
   ============================================================ */

/* --- Backdrop + scroll container ---------------------------------- */
/*
   The modal element itself is the scroll container when the
   form is taller than the viewport (e.g. on small phones).
   The backdrop sits behind the card as a fixed pseudo-sibling.
*/
.form-modal {
    display: none;              /* Hidden by default — JS adds .is-open */
    position: fixed;
    inset: 0;
    z-index: 1000;              /* Above the nav (z-index 900) */
    overflow-y: auto;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px 60px;    /* Top space so card doesn't touch the navbar */
}

.form-modal.is-open {
    display: flex;
}

/* Dark, blurred backdrop — clicking it closes the modal */
.form-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

/* --- Modal card --------------------------------------------------- */
.form-modal__card {
    position: relative;
    background: linear-gradient(140deg, var(--color-dark) 0%, #1A2B4A 60%, #22427A 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 52px 56px;
    width: 100%;
    max-width: 660px;
    z-index: 1;                 /* Sits above the .form-modal__backdrop */
}

/* Decorative red glow in the top-right corner of the card */
.form-modal__card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(232, 75, 26, 0.12), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* --- Close button ------------------------------------------------- */
.form-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    cursor: pointer;
    font-family: var(--font);
    transition: var(--transition);
}

.form-modal__close:hover {
    background: rgba(232, 75, 26, 0.15);
    border-color: rgba(232, 75, 26, 0.35);
    color: var(--color-white);
}

/* --- Form header -------------------------------------------------- */
.form-modal__header {
    margin-bottom: 36px;
    position: relative;         /* Keeps it above the ::before glow */
}

/* Icon block above the title */
.form-modal__icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-accent), #f07030);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 18px;
}

/* Gold variant for the vendor form */
.form-modal__icon--gold {
    background: linear-gradient(135deg, var(--color-gold), #e8a820);
}

.form-modal__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 8px;
}

.form-modal__subtitle {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.48);
    line-height: 1.72;
}

/* --- Form layout -------------------------------------------------- */

/* Two-column row — collapses to single column on mobile */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Single field group: label + input stacked */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

/* When inside a form-row, the row gap handles spacing — no extra margin */
.form-row .form-group {
    margin-bottom: 0;
}

.form-group label {
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Lighter weight for the "(optional)" hint inside labels */
.form-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}

/* Shared styles for input, select, and textarea */
.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font);
    font-size: 0.90rem;
    padding: 12px 14px;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
    outline: none;
    width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.22);
}

/* Accent-coloured focus ring */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: rgba(232, 75, 26, 0.55);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(232, 75, 26, 0.12);
}

/* Select — remove default OS arrow, draw a custom white chevron */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2C255%2C255%2C0.40)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Keep option backgrounds dark in browsers that honour this */
.form-group select option {
    background: var(--color-dark);
    color: var(--color-white);
}

/* Make the native date picker icon visible on dark backgrounds */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.55);
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

/* --- Multi-select checkbox pills (Areas Covered) ------------------ */
/*
   The native checkbox is hidden; its <span> sibling acts as the
   visible pill. Checking the input lights up the span via the
   adjacent sibling selector (+).
*/
.form-checkgroup {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.form-check {
    display: inline-flex;
    cursor: pointer;
}

/* Hide the native checkbox completely.
   !important overrides the .form-group input { width: 100% } rule above. */
.form-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0 !important;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* The visible pill */
.form-check span {
    display: inline-block;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: 0.80rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.04);
    transition: var(--transition);
    user-select: none;
    cursor: pointer;
}

.form-check:hover span {
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.80);
    background: rgba(255, 255, 255, 0.07);
}

/* Checked — orange-red accent, matches the site's primary action colour */
.form-check input[type="checkbox"]:checked + span {
    background: rgba(232, 75, 26, 0.18);
    border-color: rgba(232, 75, 26, 0.60);
    color: var(--color-white);
}

/* Keyboard focus ring on the pill (not the hidden input) */
.form-check input[type="checkbox"]:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-pill);
}

/* Inline error shown when no area is selected on submit */
.form-check-error {
    font-size: 0.80rem;
    color: #f87171;
    margin-top: 6px;
    min-height: 18px;
}


/* --- Submit / cancel row ------------------------------------------ */
.form-modal__actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* --- Submission status message ------------------------------------ */
/*
   Shows "Sending…" while the fetch is in flight,
   a green message on success, and a red message on error.
   min-height reserves space so the layout doesn't jump.
*/
.form-status {
    margin-top: 14px;
    font-size: 0.87rem;
    line-height: 1.60;
    min-height: 22px;
}

.form-status.is-error {
    color: #f87171;     /* Soft red */
}

/* --- Post-submission success state -------------------------------- */
/*
   Replaces the <form> element after a successful API call.
   Hidden by default; JS adds .is-visible to show it.
*/
.form-success-state {
    display: none;
    text-align: center;
    padding: 16px 0 8px;
    position: relative;
}

.form-success-state.is-visible {
    display: block;
}

/* Circular checkmark icon */
.form-success-state__icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #10B981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-white);
    font-weight: 800;
    margin: 0 auto 24px;
}

/* Gold icon variant for the vendor success state */
.form-success-state__icon--gold {
    background: linear-gradient(135deg, var(--color-gold), #e8a820);
    color: var(--color-primary);
}

.form-success-state__title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 10px;
}

.form-success-state__desc {
    font-size: 0.90rem;
    color: rgba(255, 255, 255, 0.52);
    line-height: 1.72;
    max-width: 380px;
    margin: 0 auto 28px;
}


/* ============================================================
   15. ANIMATIONS & SCROLL REVEAL
   ============================================================ */

/* Keyframe definitions */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes blink {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

/*
  Scroll Reveal: elements start invisible and slide up.
  JavaScript adds .is-visible when they enter the viewport.
*/
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   16. RESPONSIVE (MEDIA QUERIES)
   Breakpoints:
   - 1100px: collapse services & footer grids
   - 900px:  stack hero and why-us sections
   - 768px:  switch to mobile nav, wrap trust bar
   - 480px:  single column for small screens
   ============================================================ */

@media (max-width: 1100px) {
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

/* Laptop screens: shrink the floating rating badge so it doesn't cover the regions row */
@media (min-width: 901px) and (max-width: 1280px) {
    .why__rating {
        padding: 10px 14px;
        gap: 8px;
        bottom: -14px;
        right: -14px;
    }
    .why__rating-ico {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    .why__rating-val  { font-size: 1.05rem; }
    .why__rating-lbl  { font-size: 0.65rem; }
}

@media (max-width: 900px) {
    /* Stack hero to single column, hide the visual cards */
    .hero__inner  { grid-template-columns: 1fr; gap: 0; }
    .hero__visual { display: none; }

    /* Stack why-us section */
    .why__inner  { grid-template-columns: 1fr; }
    .why__visual { order: -1; } /* Move map above the features */
    .why__rating { bottom: -18px; right: -8px; }
    /* Push card content up so the floating rating badge doesn't cover the bottom-right region name */
    .why__map-card { padding-bottom: 80px; }

    /* Stack vendor card */
    .vendor__card   { grid-template-columns: 1fr; padding: 48px 36px; }
    .vendor__action { align-items: flex-start; }

    /* Stack how-it-works steps */
    .hiw__panel.is-active { grid-template-columns: 1fr; }

    /* Hide the → arrow connectors between steps on mobile */
    .hiw__step:not(:last-child)::after { display: none; }
}

@media (max-width: 768px) {
    /* Hide desktop nav links & CTA, show hamburger */
    .nav__links { display: none; }
    .nav__cta   { display: none; }
    .nav__burger { display: flex; }

    /* Trust bar becomes a 2×2 grid */
    .trust-bar__inner { flex-wrap: wrap; }
    .trust-item       { padding: 16px 24px; width: 50%; justify-content: flex-start; }
    .trust-item + .trust-item { border-left: none; }
    .trust-item:nth-child(2n) { border-left: 1px solid var(--color-border); }
    .trust-item:nth-child(3)  { border-top: 1px solid var(--color-border); }
    .trust-item:nth-child(4)  { border-top: 1px solid var(--color-border); }

    /* Services: 2 columns */
    .services__grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer: single column */
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer__legal  { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
    /* Services: single column on very small screens */
    .services__grid { grid-template-columns: 1fr; }

    /* Trust bar: single column */
    .trust-item       { width: 100%; }
    .trust-item + .trust-item { border-left: none; border-top: 1px solid var(--color-border); }
    .trust-item:nth-child(2n) { border-left: none; }

    /* Wrap hero stats */
    .hero__stats { gap: 24px; flex-wrap: wrap; }

    /* Vendor card tighter padding */
    .vendor__card { padding: 36px 24px; }
}

/* Form modal responsive adjustments */
@media (max-width: 640px) {
    /* Reduce card padding on small screens */
    .form-modal__card   { padding: 36px 24px; }

    /* Collapse the two-column form rows to a single column */
    .form-row           { grid-template-columns: 1fr; }

    /* Slightly smaller title */
    .form-modal__title  { font-size: 1.45rem; }
}


/* ============================================================
   17. DYNAMIC DATA — LOADING STATES
   Skeleton cards pulse in the services grid while Airtable
   data is being fetched. A small inline text handles the
   loading state inside the vendor areas checkbox group.
   ============================================================ */

/* Skeleton service card — same size as a real card, pulsing */
.svc-card--skeleton {
    background:     rgba(255, 255, 255, 0.04);
    border:         1px solid rgba(255, 255, 255, 0.06);
    border-radius:  20px;
    min-height:     220px;
    cursor:         default;
    pointer-events: none;

    /* Shimmer sweep across the card */
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Suppress the hover lift and accent line on skeleton cards */
.svc-card--skeleton:hover  { transform: none; box-shadow: none; border-color: rgba(255,255,255,0.06); }
.svc-card--skeleton::after { display: none; }

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Inline loading text shown inside the vendor areas checkbox group */
.form-loading-text {
    display:     block;
    font-size:   0.82rem;
    color:       var(--color-muted);
    padding:     8px 2px;
    font-style:  italic;
    letter-spacing: 0.01em;
}


/* ============================================================
   18. LANGUAGE TOGGLE & RTL SUPPORT
   Bilingual Arabic/English toggle functionality with RTL
   layout support for Arabic language.
   ============================================================ */

/* --- Language Toggle Button --- */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 7px 14px 7px 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.38);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lang-toggle:active {
    transform: translateY(0);
}

.lang-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Globe icon */
.lang-toggle__icon {
    flex-shrink: 0;
    opacity: 0.80;
    transition: opacity var(--transition);
}
.lang-toggle:hover .lang-toggle__icon {
    opacity: 1;
}

/* Thin vertical divider between icon and text */
.lang-toggle__divider {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.30);
    margin: 0 9px;
    flex-shrink: 0;
}

/* Text uses Arabic font only when showing Arabic characters */
.lang-toggle__text {
    font-family: var(--font-ar);
    line-height: 1;
}

/* Mobile language toggle (inside drawer) */
.lang-toggle--mobile {
    margin-bottom: 12px;
    padding: 10px 18px 10px 12px;
    font-size: 0.88rem;
}

/* --- RTL Support --- */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    font-family: var(--font-ar);
    text-align: right;
}

/* Navigation RTL adjustments */
html[dir="rtl"] .nav__inner {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav__links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav__cta {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav__logo {
    flex-direction: row-reverse;
}

/* Hero RTL adjustments */
html[dir="rtl"] .hero__inner {
    direction: rtl;
}

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

html[dir="rtl"] .hero__eyebrow {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html[dir="rtl"] .hero__stats {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero__visual {
    transform: scaleX(-1);
}

html[dir="rtl"] .hero__visual .svc-chip,
html[dir="rtl"] .hero__visual .hero-hub {
    transform: scaleX(-1);
}

/* Trust bar RTL */
html[dir="rtl"] .trust-bar__inner {
    flex-direction: row-reverse;
}

html[dir="rtl"] .trust-item {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .trust-item + .trust-item {
    border-left: none;
    border-right: 1px solid var(--color-border);
}

/* Services RTL */
html[dir="rtl"] .svc-card {
    text-align: right;
}

/* How It Works RTL */
html[dir="rtl"] .hiw__tabs {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hiw__panel.is-active {
    direction: rtl;
}

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

html[dir="rtl"] .hiw__panel.is-active .hiw__step:not(:last-child)::after {
    content: '←';
    right: auto;
    left: -18px;
}

html[dir="rtl"] .hiw__cta {
    flex-direction: row-reverse;
}

/* Why section RTL */
html[dir="rtl"] .why__inner {
    direction: rtl;
}

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

html[dir="rtl"] .why__map-card::before {
    right: auto;
    left: -50px;
}

html[dir="rtl"] .why__regions {
    direction: rtl;
}

html[dir="rtl"] .why__region {
    flex-direction: row-reverse;
}

html[dir="rtl"] .why__rating {
    right: auto;
    left: -22px;
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .feature {
    flex-direction: row-reverse;
    text-align: right;
}

/* Vendor CTA RTL */
html[dir="rtl"] .vendor__card {
    direction: rtl;
}

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

html[dir="rtl"] .vendor__card::before {
    right: auto;
    left: -80px;
}

html[dir="rtl"] .perk {
    flex-direction: row-reverse;
}

/* FAQ RTL */
html[dir="rtl"] .faq__q {
    flex-direction: row-reverse;
    text-align: right;
}

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

/* Footer RTL */
html[dir="rtl"] .footer__grid {
    direction: rtl;
}

html[dir="rtl"] .footer__logo {
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .footer__socials {
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .footer__contact-row {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .footer__bottom {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer__legal {
    flex-direction: row-reverse;
}

/* Mobile drawer RTL */
html[dir="rtl"] .mobile-drawer {
    text-align: center;
}

html[dir="rtl"] .mobile-drawer__close {
    right: auto;
    left: 20px;
}

/* Form modals RTL */
html[dir="rtl"] .form-modal__card {
    text-align: right;
}

html[dir="rtl"] .form-modal__card::before {
    right: auto;
    left: -80px;
}

html[dir="rtl"] .form-modal__close {
    right: auto;
    left: 20px;
}

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

html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group select,
html[dir="rtl"] .form-group textarea {
    text-align: right;
}

html[dir="rtl"] .form-group select {
    background-position: left 14px center;
    padding-right: 14px;
    padding-left: 40px;
}

html[dir="rtl"] .form-row {
    direction: rtl;
}

html[dir="rtl"] .form-modal__actions {
    flex-direction: row-reverse;
}

html[dir="rtl"] .form-checkgroup {
    direction: rtl;
}

html[dir="rtl"] .form-success-state {
    text-align: center;
}

/* Button icon adjustments for RTL */
html[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

/* Section tags RTL */
html[dir="rtl"] .section-tag {
    flex-direction: row-reverse;
}

/* Responsive RTL adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .trust-item + .trust-item {
        border-right: none;
    }

    html[dir="rtl"] .trust-item:nth-child(2n) {
        border-right: 1px solid var(--color-border);
        border-left: none;
    }

    html[dir="rtl"] .footer__bottom {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    html[dir="rtl"] .why__rating {
        left: -8px;
        right: auto;
    }
}