/* ════════════════════════════════════════════════════════════════════
   THIMAR — FARMIX-INSPIRED PUBLIC THEME
   Yellow/gold accent · green agriculture · bold · mobile-first
   Loaded AFTER thimar-public.css so it overrides the public site.
   ════════════════════════════════════════════════════════════════════ */
:root {
    --fx-yellow:   #F6C915;
    --fx-yellow-d: #E0B400;
    --fx-ink:      #16181d;
    --fx-ink-soft: #3d4451;
    --fx-green:    #0EA371;
    --fx-green-d:  #076B4A;
    --fx-line:     #E7EBF0;
    --fx-bg-soft:  #F6F8F5;
    --fx-container: 1200px;
}

/* kill horizontal overflow everywhere on the public site */
.fx-layout, .fx-layout * { box-sizing: border-box; }
.fx-layout { overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; background: #fff; font-family: var(--font-family, 'Cairo', sans-serif); }
.fx-layout img { max-width: 100%; height: auto; }
.fx-container { width: 100%; max-width: var(--fx-container); margin: 0 auto; padding-inline: 16px; }
.fx-hide-sm { display: none; }
@media (min-width: 768px) { .fx-hide-sm { display: inline-flex; } }

/* ─────────── Top utility bar ─────────── */
.fx-topbar { background: var(--fx-yellow); color: var(--fx-ink); font-size: .82rem; font-weight: 600; }
.fx-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.fx-topbar-info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fx-topbar-info > span { display: inline-flex; align-items: center; gap: 6px; }
.fx-topbar-info .bi { font-size: .95rem; }
.fx-topbar-social { display: flex; align-items: center; gap: 6px; }
.fx-topbar-social a { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--fx-ink); border-radius: 50%; transition: all .15s; }
.fx-topbar-social a:hover { background: rgba(0,0,0,.12); }

/* ─────────── Header ─────────── */
.fx-header { position: sticky; top: 0; z-index: 300; background: #fff; border-bottom: 1px solid var(--fx-line); box-shadow: 0 2px 18px rgba(0,0,0,.05); }
.fx-header-inner { display: flex; align-items: center; gap: 16px; min-height: 74px; position: relative; }
.fx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.fx-brand img { height: 46px; width: auto; }
.fx-brand-name { font-size: 1.7rem; font-weight: 800; color: var(--fx-ink); letter-spacing: -.5px; }

.fx-nav { display: none; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.fx-nav-link { padding: 10px 12px; border-radius: 8px; color: var(--fx-ink); font-size: .95rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .15s; position: relative; }
.fx-nav-link:hover { color: var(--fx-green-d); }
.fx-nav-link.active { color: var(--fx-green-d); }
.fx-nav-link.active::after { content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--fx-yellow); }

.fx-actions { display: none; align-items: center; gap: 8px; flex-shrink: 0; }

/* ─────────── Buttons ─────────── */
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: all .16s ease; white-space: nowrap; }
.fx-btn-solid { background: var(--fx-yellow); color: var(--fx-ink); border-color: var(--fx-yellow); }
.fx-btn-solid:hover { background: var(--fx-yellow-d); border-color: var(--fx-yellow-d); color: var(--fx-ink); transform: translateY(-1px); }
.fx-btn-outline { background: transparent; color: var(--fx-ink); border-color: var(--fx-line); }
.fx-btn-outline:hover { border-color: var(--fx-ink); background: var(--fx-bg-soft); color: var(--fx-ink); }
.fx-btn.w-100 { width: 100%; }

/* ─────────── Mobile hamburger + drawer (CSS-only) ─────────── */
.fx-nav-cb { display: none; }
.fx-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; margin-inline-start: auto; padding: 11px; border-radius: 12px; background: var(--fx-yellow); cursor: pointer; flex-shrink: 0; }
.fx-burger span { display: block; height: 3px; width: 100%; background: var(--fx-ink); border-radius: 3px; transition: all .25s ease; }
.fx-nav-cb:checked ~ .fx-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.fx-nav-cb:checked ~ .fx-burger span:nth-child(2) { opacity: 0; }
.fx-nav-cb:checked ~ .fx-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.fx-mobile {
    position: fixed; top: 0; inset-inline-end: 0; height: 100dvh; width: min(84vw, 340px);
    background: #fff; z-index: 400; box-shadow: -8px 0 40px rgba(0,0,0,.18);
    transform: translateX(110%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    padding: 84px 18px 24px; overflow-y: auto; display: flex; flex-direction: column;
}
[dir="rtl"] .fx-mobile { transform: translateX(-110%); }
.fx-nav-cb:checked ~ .fx-mobile { transform: translateX(0); }
/* dim backdrop */
.fx-nav-cb:checked ~ .fx-burger::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 390;
}
.fx-mobile-nav { display: flex; flex-direction: column; gap: 2px; }
.fx-mobile-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px; color: var(--fx-ink); font-weight: 700; font-size: 1rem; text-decoration: none; }
.fx-mobile-link .bi { color: var(--fx-green); font-size: 1.15rem; width: 22px; }
.fx-mobile-link:hover { background: var(--fx-bg-soft); }
.fx-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--fx-line); }

@media (min-width: 992px) {
    .fx-nav, .fx-actions { display: flex; }
    .fx-burger { display: none; }
    .fx-mobile { display: none; }
}

/* ─────────── Footer ─────────── */
.fx-main { flex: 1; }
.fx-footer { background: var(--fx-ink); color: #cfd4dc; margin-top: 60px; }
.fx-footer .fx-container { padding-block: 54px 20px; }
.fx-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.fx-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fx-footer-brand img { height: 46px; }
.fx-footer-brand span { font-size: 1.5rem; font-weight: 800; color: #fff; }
.fx-footer-about p { line-height: 1.9; font-size: .92rem; margin-bottom: 16px; }
.fx-footer-social { display: flex; gap: 8px; }
.fx-footer-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: all .15s; }
.fx-footer-social a:hover { background: var(--fx-yellow); color: var(--fx-ink); }
.fx-footer-col h5 { color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; }
.fx-footer-col ul { list-style: none; padding: 0; margin: 0; }
.fx-footer-col li { margin-bottom: 10px; }
.fx-footer-col a { color: #cfd4dc; text-decoration: none; font-size: .92rem; transition: color .15s; }
.fx-footer-col a:hover { color: var(--fx-yellow); }
.fx-footer-contact li { display: flex; align-items: center; gap: 8px; }
.fx-footer-contact .bi { color: var(--fx-yellow); }
.fx-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.fx-footer-bottom strong { color: #fff; }
.fx-footer-meta a { color: #cfd4dc; text-decoration: none; }
.fx-footer-meta a:hover { color: var(--fx-yellow); }
@media (max-width: 860px) { .fx-footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .fx-footer-grid { grid-template-columns: 1fr; } .fx-footer-bottom { flex-direction: column; text-align: center; } }

/* ════════════════════════════════════════════════════════════════════
   FARMIX THEMING OF PAGE CONTENT (hero, cards, cta, buttons)
   ════════════════════════════════════════════════════════════════════ */

/* Hero — bold green field vibe + yellow CTA (Farmix) */
.thimar-hero-rich {
    background-image:
        linear-gradient(180deg, rgba(8,50,35,.72), rgba(8,50,35,.82)),
        linear-gradient(135deg, #0b5a3e 0%, #0EA371 60%, #14c08a 100%) !important;
    background-size: cover; background-position: center;
    padding-block: clamp(48px, 8vw, 96px) !important;
}
.thimar-hero-rich h1 {
    font-size: clamp(2rem, 7vw, 3.6rem) !important; font-weight: 900 !important; line-height: 1.18 !important;
    color: #fff !important; letter-spacing: -.5px; overflow-wrap: anywhere;
}
.thimar-hero-rich h1 .hl { color: var(--fx-yellow) !important; box-shadow: none !important; padding: 0 !important; }
.thimar-hero-rich p { color: rgba(255,255,255,.92) !important; }
.thimar-hero-eyebrow { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; border: none !important; font-weight: 700; }
/* hero buttons → Farmix (solid yellow + white outline), stack on mobile */
.btn-hero { border-radius: 999px !important; padding: 13px 28px !important; }
.btn-hero-primary { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; box-shadow: 0 12px 28px rgba(246,201,21,.35) !important; }
.btn-hero-primary:hover { background: var(--fx-yellow-d) !important; color: var(--fx-ink) !important; }
.btn-hero-ghost { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.7) !important; }

/* Feature cards — yellow icon tile + hover pop */
.thimar-feature-card-icon-wrapper { background: linear-gradient(135deg, var(--fx-yellow), #ffd84d) !important; box-shadow: 0 10px 22px rgba(246,201,21,.35) !important; }
.thimar-feature-card:hover { border-color: var(--fx-yellow) !important; box-shadow: 0 18px 44px rgba(246,201,21,.18) !important; }
.thimar-section-badge { background: rgba(246,201,21,.16) !important; color: #8a6d00 !important; border: 1px solid rgba(246,201,21,.4) !important; }
.thimar-section-title { color: var(--fx-ink) !important; font-weight: 900 !important; }

/* CTA section — dark with yellow accents (Farmix) */
.thimar-section-cta { background: var(--fx-ink) !important; }
.thimar-section-cta .thimar-section-title, .thimar-section-cta .thimar-section-subtitle { color: #fff !important; }
.thimar-btn-cta-primary { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; border: none !important; border-radius: 999px !important; }
.thimar-btn-cta-primary:hover { background: var(--fx-yellow-d) !important; }
.thimar-btn-cta-secondary { border: 2px solid rgba(255,255,255,.6) !important; color: #fff !important; border-radius: 999px !important; }

/* generic public button re-theme (thimar-btn-primary → yellow) */
.thimar-btn-primary { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; border-color: var(--fx-yellow) !important; }
.thimar-btn-primary:hover { background: var(--fx-yellow-d) !important; }

/* section spacing safety on mobile */
@media (max-width: 640px) {
    .thimar-section { padding-block: 40px !important; }
    .thimar-hero-rich div[style*="display:flex"] { flex-direction: column; }
    .btn-hero { width: 100%; }
}

/* ─────────── Hard overflow guards (mobile) ─────────── */
html, body { overflow-x: hidden !important; max-width: 100%; }
.fx-topbar-inner, .fx-header-inner { max-width: 100%; }
.thimar-section > .container, .thimar-hero-rich > .container { max-width: 100% !important; }
.thimar-hero-rich .thimar-section-wrapper { max-width: 100% !important; }
/* hero CTA row: robust wrap + stack on small screens */
.thimar-hero-rich .thimar-section-wrapper > div:last-of-type { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 12px; }
.thimar-hero-rich .btn-hero { max-width: 100%; }
@media (max-width: 640px) {
    .thimar-hero-rich .thimar-section-wrapper > div:last-of-type { flex-direction: column !important; align-items: stretch; }
    .thimar-hero-rich .btn-hero { width: 100%; }
    .fx-topbar-info { gap: 10px; font-size: .74rem; }
    .fx-brand-name { font-size: 1.4rem; }
    .fx-brand img { height: 40px; }
}

/* ─────────── Stronger mobile fixes (v2) ─────────── */
/* fix: hide-sm was overridden by .fx-topbar-info > span (higher specificity) */
.fx-topbar-info > span.fx-hide-sm { display: none !important; }
@media (min-width: 768px) { .fx-topbar-info > span.fx-hide-sm { display: inline-flex !important; } }
/* clip overflow at section level, not just body */
html { overflow-x: clip; }
.thimar-main, .thimar-hero-rich, .thimar-section, .fx-topbar, .fx-header { overflow-x: clip; }
.thimar-hero-rich .thimar-section-wrapper { max-width: 100% !important; width: 100%; }
/* force hero CTA buttons to stack full-width on phones */
@media (max-width: 640px) {
    .thimar-hero-rich .thimar-section-wrapper > div { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
    .thimar-hero-rich .btn-hero { width: 100% !important; justify-content: center; }
    .thimar-hero-eyebrow { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-ABOUT — "مرحبًا بك في ثمار" welcome/about section (Farmix layout, RTL)
   Copy column (grid col 1 → RIGHT in RTL) · tall inline-SVG Syrian farm
   panel (grid col 2 → LEFT) with a straddling watch card · light feature
   band with a dotted divider (vertical desktop / horizontal mobile) ·
   floating decorative leaf. Pure markup + CSS, no JS, logical properties.
   ════════════════════════════════════════════════════════════════════ */
.fx-about { position: relative; }
.fx-about, .fx-about *, .fx-about *::before, .fx-about *::after { box-sizing: border-box; }
.fx-about img { max-width: 100%; height: auto; }

/* re-center content: farmix.css forces .thimar-section>.container to 100%,
   so mirror the sibling .thimar-section-wrapper (max-width 1200 / auto) */
.fx-about-inner { position: relative; width: 100%; max-width: var(--fx-container); margin-inline: auto; }

/* ── grid: mobile-first single column (copy → media) ── */
.fx-about-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); align-items: center; }
.fx-about-copy, .fx-about-media { min-width: 0; max-width: 100%; }

/* ── copy column ── */
.fx-about-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding-block: .4rem; padding-inline: .95rem; border-radius: var(--radius-full); background: rgba(14,163,113,.1); color: var(--fx-green-d); font-weight: 800; font-size: .9rem; margin-bottom: var(--spacing-md); }
.fx-about-eyebrow .bi { color: var(--fx-green); font-size: 1rem; }

.fx-about-title { margin: 0 0 var(--spacing-md); font-size: clamp(1.65rem, 4.6vw, 2.7rem); line-height: 1.34; font-weight: 900; color: var(--fx-ink); letter-spacing: -.3px; overflow-wrap: break-word; }
.fx-about-hl { background-image: linear-gradient(transparent 58%, rgba(246,201,21,.6) 0); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .1em; border-radius: 2px; }

.fx-about-text { margin: 0 0 var(--spacing-lg); max-inline-size: 52ch; font-size: clamp(1rem, 2.4vw, 1.1rem); line-height: 2; color: var(--fx-ink-soft); }

/* founder + signature block */
.fx-about-founder { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); padding-block-start: var(--spacing-md); border-block-start: 1px solid var(--fx-line); }
.fx-about-avatar { flex: 0 0 auto; inline-size: 58px; block-size: 58px; border-radius: var(--radius-full); background: #fff; border: 2px solid var(--fx-line); box-shadow: 0 6px 16px rgba(14,163,113,.14); display: grid; place-items: center; overflow: hidden; }
.fx-about-avatar img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 8px; }
.fx-about-founder-meta { display: flex; flex-direction: column; line-height: 1.35; }
.fx-about-founder-name { font-weight: 800; color: var(--fx-ink); font-size: 1.05rem; }
.fx-about-founder-role { font-weight: 600; color: var(--fx-ink-soft); font-size: .88rem; }
/* handwritten-style wordmark (CSS + inline swoosh, no image) */
.fx-about-sign { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-inline-start: auto; color: var(--fx-green-d); -webkit-user-select: none; user-select: none; }
.fx-about-sign-word { font-weight: 800; font-style: italic; font-size: 1.9rem; line-height: 1; letter-spacing: .02em; transform: rotate(-5deg); }
.fx-about-sign-swoosh { inline-size: 78px; block-size: 14px; color: var(--fx-yellow-d); }

/* ── media column: tall SVG panel ── */
.fx-about-media { position: relative; inline-size: 100%; max-inline-size: 460px; margin-inline: auto; margin-block-end: 28px; }
.fx-about-scene-frame { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 30px 60px -22px rgba(7,107,74,.45), 0 0 0 1px rgba(22,24,29,.05) inset; line-height: 0; }
.fx-about-scene { display: block; inline-size: 100%; block-size: auto; }

/* overlapping "watch how it works" card (inner bottom corner) */
.fx-about-play { position: absolute; inset-block-end: -24px; inset-inline-start: 18px; max-inline-size: calc(100% - 36px); display: inline-flex; align-items: center; gap: .75rem; padding-block: .55rem; padding-inline: .6rem 1.1rem; background: #fff; border-radius: var(--radius-full); box-shadow: 0 18px 40px -12px rgba(16,24,40,.32); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.fx-about-play:hover, .fx-about-play:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 48px -12px rgba(16,24,40,.4); outline: none; }
.fx-about-play:focus-visible { box-shadow: 0 0 0 3px rgba(14,163,113,.45), 0 18px 40px -12px rgba(16,24,40,.32); }
.fx-about-play-btn { position: relative; flex: 0 0 auto; inline-size: 48px; block-size: 48px; border-radius: var(--radius-full); background: var(--fx-yellow); color: var(--fx-ink); display: grid; place-items: center; font-size: 1.2rem; }
.fx-about-play-btn .bi { transform: translateX(1px); }
.fx-about-play-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--fx-yellow); animation: fxAboutPulse 2.6s ease-out infinite; }
.fx-about-play-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fx-about-play-eyebrow { font-size: .72rem; font-weight: 700; color: var(--fx-green); white-space: nowrap; }
.fx-about-play-title { font-size: .95rem; font-weight: 800; color: var(--fx-ink); white-space: nowrap; }
@keyframes fxAboutPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── feature band (light panel, dotted divider) ── */
.fx-about-features { position: relative; z-index: 1; margin-block-start: var(--spacing-2xl); background: var(--fx-bg-soft); border: 1px solid var(--fx-line); border-radius: var(--radius-2xl); padding: var(--spacing-lg); display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); }
.fx-about-feature { display: flex; align-items: flex-start; gap: var(--spacing-md); min-width: 0; }
/* mobile divider: horizontal dotted */
.fx-about-feature + .fx-about-feature { border-block-start: 2px dotted rgba(11,113,80,.28); padding-block-start: var(--spacing-lg); }
.fx-about-feature-icon { flex: 0 0 auto; inline-size: 56px; block-size: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: 1.5rem; background: linear-gradient(135deg, var(--fx-yellow), #ffd84d); color: var(--fx-ink); box-shadow: 0 10px 22px rgba(246,201,21,.32); }
.fx-about-feature-icon--green { background: linear-gradient(135deg, var(--fx-green), var(--fx-green-d)); color: #fff; box-shadow: 0 10px 22px rgba(14,163,113,.32); }
.fx-about-feature-body { min-width: 0; }
.fx-about-feature-title { margin: 0 0 .3rem; font-size: 1.12rem; font-weight: 800; color: var(--fx-ink); }
.fx-about-feature-text { margin: 0; font-size: .96rem; line-height: 1.75; color: var(--fx-ink-soft); overflow-wrap: break-word; }

/* decorative floating leaf (desktop only) */
.fx-about-leaf { display: none; }

/* ── desktop (>=992px): two columns, side-by-side features ── */
@media (min-width: 992px) {
    .fx-about-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--spacing-2xl); }
    .fx-about-media { max-inline-size: none; margin-inline: 0; }
    .fx-about-play { inset-block-end: -28px; }

    .fx-about-features { grid-template-columns: 1fr 1fr; gap: 0; padding: var(--spacing-xl); }
    .fx-about-feature { padding-inline: var(--spacing-xl); }
    .fx-about-feature:first-child { padding-inline-start: 0; }
    .fx-about-feature:last-child { padding-inline-end: 0; }
    .fx-about-feature + .fx-about-feature { border-block-start: 0; padding-block-start: 0; border-inline-start: 2px dotted rgba(11,113,80,.28); }

    .fx-about-leaf { display: block; position: absolute; inset-block-start: 10px; inset-inline-end: -8px; inline-size: 150px; color: var(--fx-green); opacity: .1; z-index: 0; pointer-events: none; transform: rotate(16deg); animation: fxAboutFloat 7s ease-in-out infinite; }
    .fx-about-leaf svg { display: block; inline-size: 100%; block-size: auto; }
}
@keyframes fxAboutFloat { 0%, 100% { transform: rotate(16deg) translateY(0); } 50% { transform: rotate(20deg) translateY(-12px); } }

/* ── very small phones: keep the watch card inside the frame ── */
@media (max-width: 360px) {
    .fx-about-play { inset-inline-start: 12px; padding-inline: .5rem .85rem; }
    .fx-about-play-btn { inline-size: 44px; block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-about-play-btn::before, .fx-about-leaf { animation: none; }
    .fx-about-play { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-HERO — Farmix-style top hero (RTL, no photos)
   ───────────────────────────────────────────────────────────────────
   Full-bleed inline-SVG golden-hour farm panorama + dark-green overlay,
   decorative edge carousel arrows, centered white heading/subtitle/CTAs,
   and FOUR feature cards straddling the hero/white seam (yellow icon on
   the seam). Overlap uses an IN-FLOW technique: the cards are the last
   flex child, so the hero AUTO-hosts their top halves; a fixed negative
   block-end margin (120px) makes exactly 120px spill below the hero, and
   the following section reserves 120px + gap. Nothing depends on the
   cards' computed height, so collision is impossible. Overlap + arrows
   are desktop-only (>=992px) and fully absent on mobile.
   All selectors prefixed .fx-hero. Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-hero {
    position: relative;
    z-index: 2;                 /* whole hero (incl. spilled cards) paints above the following .fx-about (position:relative, z-auto) */
    display: flex;
    flex-direction: column;
    min-block-size: clamp(560px, 82vh, 760px);
    padding-block-start: clamp(2rem, 6vw, 4rem);
    padding-block-end: var(--spacing-2xl);   /* green breathing room under the cards on mobile */
    color: #fff;
    font-family: var(--font-family, 'Cairo', sans-serif);
}
.fx-hero, .fx-hero *, .fx-hero *::before, .fx-hero *::after { box-sizing: border-box; }

/* width container inside the hero (override Bootstrap .container to the brand cap) */
.fx-hero .container { width: 100%; max-width: var(--fx-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }

/* ── full-bleed SVG panorama + dark overlay (decorative) ── */
.fx-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; line-height: 0; }
.fx-hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8,50,35,.55), rgba(8,50,35,.78)),
        radial-gradient(90% 72% at 50% 36%, rgba(8,50,35,0), rgba(6,38,26,.30));
}

/* ── decorative edge carousel arrows (no slider → aria-hidden, inert, hidden < 992px) ── */
.fx-hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    inline-size: 56px; block-size: 56px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.92); font-size: 1.4rem;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    pointer-events: none;                    /* never a dead click target */
}
.fx-hero-arrow--start { inset-inline-start: clamp(14px, 2.5vw, 34px); }   /* physical RIGHT in RTL */
.fx-hero-arrow--end   { inset-inline-end:   clamp(14px, 2.5vw, 34px); }   /* physical LEFT in RTL */

/* ── centered content ── */
.fx-hero-inner {
    position: relative; z-index: 2;
    flex: 1 1 auto;                          /* grows to vertically center the text above the cards */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.fx-hero-inner .container { display: flex; flex-direction: column; align-items: center; }

.fx-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding-block: .45rem; padding-inline: 1.05rem;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    color: #fff; font-weight: 700; font-size: clamp(.8rem, 2.2vw, .9rem); line-height: 1.2;
    max-inline-size: 100%; margin-block-end: var(--spacing-md);
}
.fx-hero-eyebrow .bi { color: var(--fx-yellow); font-size: 1em; }

.fx-hero-title {
    margin: 0 0 var(--spacing-md);
    font-size: clamp(2rem, 6.5vw, 3.6rem);
    font-weight: 900; line-height: 1.15; color: #fff;
    letter-spacing: -.01em; max-inline-size: 18ch; overflow-wrap: break-word; text-wrap: balance;
    text-shadow: 0 2px 22px rgba(0,0,0,.28);
}
.fx-hero-hl { color: var(--fx-yellow); }

.fx-hero-subtitle {
    margin: 0 auto var(--spacing-lg); max-inline-size: 60ch;
    font-size: clamp(1rem, 2.3vw, 1.22rem); line-height: 1.85;
    color: rgba(255,255,255,.92); font-weight: 500;
    text-shadow: 0 1px 14px rgba(0,0,0,.24);
}

.fx-hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
.fx-hero-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding-block: .85rem; padding-inline: 1.75rem; border-radius: var(--radius-full);
    font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
    white-space: nowrap; max-inline-size: 100%;
}
.fx-hero-btn .bi { font-size: 1.05rem; transition: transform .16s ease; }
.fx-hero-btn--primary { background: var(--fx-yellow); color: var(--fx-ink); border-color: var(--fx-yellow); box-shadow: 0 14px 30px rgba(246,201,21,.35); }
.fx-hero-btn--primary:hover { background: var(--fx-yellow-d); border-color: var(--fx-yellow-d); color: var(--fx-ink); transform: translateY(-2px); }
.fx-hero-btn--primary:hover .bi { transform: translateX(-4px); }   /* nudge forward = leftward in RTL */
.fx-hero-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.75); }
.fx-hero-btn--ghost:hover { background: #fff; color: var(--fx-green-d); border-color: #fff; transform: translateY(-2px); }
.fx-hero-btn:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 3px; }

/* ── straddling feature cards (base = MOBILE: normal flow, NO overlap) ── */
.fx-hero-cards-wrap { position: relative; z-index: 4; flex: 0 0 auto; margin-block-start: var(--spacing-2xl); }
.fx-hero-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); }

.fx-hero-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--fx-line); border-radius: var(--radius-xl);
    overflow: hidden; text-decoration: none; color: var(--fx-ink);
    box-shadow: 0 18px 40px -20px rgba(7,60,42,.40);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fx-hero-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -20px rgba(7,60,42,.50); border-color: rgba(246,201,21,.60); }
.fx-hero-card:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 3px; }

.fx-hero-card-media { position: relative; display: block; block-size: 96px; overflow: hidden; background: linear-gradient(135deg, var(--fx-green) 0%, var(--fx-green-d) 100%); }
.fx-hero-card:nth-child(2) .fx-hero-card-media { background: linear-gradient(135deg, #14b07c 0%, #0a6a49 100%); }
.fx-hero-card:nth-child(3) .fx-hero-card-media { background: linear-gradient(135deg, #0c9268 0%, #075c40 100%); }
.fx-hero-card:nth-child(4) .fx-hero-card-media { background: linear-gradient(135deg, #17a074 0%, #0b573c 100%); }
.fx-hero-card-media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .4s ease; }
.fx-hero-card:hover .fx-hero-card-media svg { transform: scale(1.06); }

.fx-hero-card-icon {
    position: absolute; top: 96px; inset-inline-start: 22px; transform: translateY(-50%); z-index: 2;  /* straddles the media/body seam, anchored to the start (RIGHT in RTL) */
    inline-size: 56px; block-size: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--fx-yellow), #ffd84d); color: var(--fx-ink);
    display: grid; place-items: center; font-size: 1.4rem;
    box-shadow: 0 8px 18px rgba(246,201,21,.40), 0 0 0 4px #fff;
    transition: transform .2s ease;
}
.fx-hero-card:hover .fx-hero-card-icon { transform: translateY(-50%) rotate(-6deg); }

.fx-hero-card-body { padding: 34px var(--spacing-md) var(--spacing-lg); display: flex; flex-direction: column; gap: .4rem; text-align: start; }
.fx-hero-card-title { font-size: 1.18rem; font-weight: 800; color: var(--fx-ink); }
.fx-hero-card-text { font-size: .92rem; line-height: 1.7; color: var(--fx-ink-soft); overflow-wrap: break-word; }

/* ── small tablets: 2-up cards (still normal flow, no overlap) ── */
@media (min-width: 576px) {
    .fx-hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); }
}

/* ── desktop (>=992px): 4-up cards + straddle the hero/white seam ── */
@media (min-width: 992px) {
    .fx-hero { padding-block-start: clamp(3rem, 6vw, 4.5rem); padding-block-end: 0; }
    .fx-hero-arrow { display: inline-flex; }

    /* pull the hero's bottom up 120px → the cards spill EXACTLY 120px below it (height-independent) */
    .fx-hero-cards-wrap { margin-block-start: var(--spacing-xl); margin-block-end: -120px; }
    .fx-hero-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); }

    /* clear the overhang: the following section's content starts below the 120px spill + a gap */
    .fx-hero + .thimar-section { position: relative; z-index: 1; padding-block-start: calc(120px + var(--spacing-2xl)); }
}

@media (min-width: 1200px) {
    .fx-hero-cards { gap: var(--spacing-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .fx-hero-card, .fx-hero-card-media svg, .fx-hero-card-icon, .fx-hero-btn, .fx-hero-btn .bi { transition: none; }
    .fx-hero-card:hover { transform: none; }
    .fx-hero-card:hover .fx-hero-card-media svg { transform: none; }
    .fx-hero-card:hover .fx-hero-card-icon { transform: translateY(-50%); }
    .fx-hero-btn--primary:hover, .fx-hero-btn--ghost:hover { transform: none; }
    .fx-hero-btn--primary:hover .bi { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-WORK — Featured offers, styled after Farmix "Latest From Our Work"
   RTL · no photos (green gradient tiles + subtle inline-SVG silhouettes)
   · Cairo. Top row: green eyebrow + bold heading (inline-start) with a
   pair of decorative « » arrows (inline-end, inert, hidden < 768px).
   A 3-up grid of tall tiles, each with a yellow price pill; the MIDDLE
   tile is the featured/active one under a solid green overlay (title +
   location + "عرض التفاصيل"), the two side tiles carry a block-end dark
   scrim + title + a small map-pin location line. Centered CTA below.
   All selectors prefixed .fx-work; logical properties throughout.
   Re-centers via .fx-work-inner because farmix.css forces
   .thimar-section > .container to max-width:100% (mirrors sibling
   .thimar-section-wrapper). Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-work, .fx-work *, .fx-work *::before, .fx-work *::after { box-sizing: border-box; }
.fx-work img { max-inline-size: 100%; block-size: auto; }
.fx-work-inner { position: relative; inline-size: 100%; max-inline-size: var(--fx-container); margin-inline: auto; }

/* ─── top row: eyebrow + heading (start) · arrows (end) ─── */
.fx-work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-lg); margin-block-end: var(--spacing-xl); }
.fx-work-heading { min-inline-size: 0; }
.fx-work-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-block-end: .7rem; color: var(--fx-green-d); font-weight: 800; font-size: .95rem; letter-spacing: .01em; }
.fx-work-eyebrow::before { content: ""; inline-size: 26px; block-size: 3px; border-radius: var(--radius-full); background: var(--fx-yellow); }
.fx-work-eyebrow .bi { color: var(--fx-green); font-size: 1.05em; }
.fx-work-title { margin: 0; font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: 1.25; font-weight: 900; color: var(--fx-ink); letter-spacing: -.3px; overflow-wrap: break-word; }

/* decorative nav arrows (no slider → inert; revealed ≥768px) */
.fx-work-arrows { display: none; align-items: center; gap: .6rem; flex-shrink: 0; pointer-events: none; }
.fx-work-arrow { inline-size: 52px; block-size: 52px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: #fff; border: 1.6px solid var(--fx-line); color: var(--fx-ink); }
.fx-work-arrow--next { background: var(--fx-green); border-color: var(--fx-green); color: #fff; box-shadow: 0 10px 22px -8px rgba(14,163,113,.6); }
@media (min-width: 768px) { .fx-work-arrows { display: inline-flex; } }

/* ─── showcase grid ─── */
.fx-work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
@media (min-width: 600px) {
    .fx-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-work-card:nth-child(3) { grid-column: 1 / -1; } /* lone 3rd card spans the row → no gap */
}
@media (min-width: 992px) {
    .fx-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
    .fx-work-card:nth-child(3) { grid-column: auto; }
}

/* ─── card (real link, tall tile) ─── */
.fx-work-card { position: relative; display: block; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; min-block-size: 400px; border-radius: var(--radius-2xl); background: var(--fx-green-d); text-decoration: none; box-shadow: 0 20px 44px -24px rgba(7,60,40,.55); transition: transform .2s ease, box-shadow .2s ease; isolation: isolate; }
.fx-work-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(7,60,40,.6); }
.fx-work-card:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 3px; }
@media (min-width: 992px) { .fx-work-card { min-block-size: 440px; } }

/* media: green gradient tile (+ subtle top highlight) with per-card variety */
.fx-work-card-media { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; background: radial-gradient(120% 88% at 82% 2%, rgba(255,255,255,.16), transparent 58%), var(--fx-work-grad, linear-gradient(150deg, var(--fx-green) 0%, var(--fx-green-d) 82%)); }
.fx-work-card:nth-child(1) { --fx-work-grad: linear-gradient(150deg, #14b481 0%, #0a6a49 82%); }
.fx-work-card:nth-child(2) { --fx-work-grad: linear-gradient(150deg, #0ea371 0%, #076b4a 82%); }
.fx-work-card:nth-child(3) { --fx-work-grad: linear-gradient(150deg, #10a472 0%, #075c40 82%); }
.fx-work-motif { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: #fff; opacity: .12; transform-origin: center; transition: transform .3s ease; }
.fx-work-card:hover .fx-work-motif { transform: scale(1.06); }

/* side-card scrim (block-end → legible white title + location) */
.fx-work-scrim { position: absolute; inset: 0; z-index: 1; display: block; background: linear-gradient(to top, rgba(5,38,26,.92) 0%, rgba(5,38,26,.55) 26%, rgba(5,38,26,.05) 55%, transparent 72%); }

/* featured overlay (solid green → active look) */
.fx-work-overlay { position: absolute; inset: 0; z-index: 1; display: block; background: linear-gradient(158deg, rgba(14,163,113,.82) 0%, rgba(7,107,74,.94) 62%, rgba(7,107,74,.97) 100%); }

/* yellow price pill (top inline-start corner = top-right in RTL) */
.fx-work-badge { position: absolute; z-index: 3; inset-block-start: 1rem; inset-inline-start: 1rem; display: inline-flex; align-items: center; gap: .35rem; max-inline-size: calc(100% - 2rem); padding-block: .42rem; padding-inline: .9rem; border-radius: var(--radius-full); background: var(--fx-yellow); color: var(--fx-ink); font-weight: 800; font-size: .9rem; line-height: 1.1; white-space: nowrap; box-shadow: 0 10px 20px -8px rgba(224,180,0,.75); }
.fx-work-badge .bi { font-size: .95em; }

/* card content (block-end) */
.fx-work-card-body { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: .5rem; padding: var(--spacing-lg); text-align: start; }
.fx-work-card-title { display: block; color: #fff; font-weight: 800; font-size: 1.3rem; line-height: 1.35; text-shadow: 0 2px 14px rgba(0,0,0,.4); overflow-wrap: break-word; }
.fx-work-card-loc { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.92); font-weight: 600; font-size: .95rem; }
.fx-work-card-loc .bi { color: var(--fx-yellow); font-size: 1em; }
.fx-work-card-more { display: inline-flex; align-items: center; gap: .45rem; margin-block-start: .35rem; color: #fff; font-weight: 800; font-size: .98rem; }
.fx-work-card-more .bi { font-size: .95em; transition: transform .2s ease; }
.fx-work-card:hover .fx-work-card-more .bi { transform: translateX(-4px); } /* nudge toward inline-end (left) */

/* featured emphasis: yellow ring, bigger title, desktop lift */
.fx-work-card--featured { box-shadow: 0 0 0 2px rgba(246,201,21,.9), 0 26px 56px -22px rgba(7,60,40,.62); }
.fx-work-card--featured .fx-work-card-title { font-size: 1.46rem; }
.fx-work-card--featured .fx-work-motif { opacity: .16; }
@media (min-width: 992px) {
    .fx-work-card--featured { transform: translateY(-14px); z-index: 2; }
    .fx-work-card--featured:hover { transform: translateY(-20px); }
}

/* ─── centered CTA ─── */
.fx-work-cta { margin-block-start: var(--spacing-xl); text-align: center; font-size: clamp(1rem, 2.6vw, 1.15rem); font-weight: 600; color: var(--fx-ink-soft); }
.fx-work-cta a { display: inline-flex; align-items: center; gap: .4rem; margin-inline-start: .45rem; color: var(--fx-green-d); font-weight: 800; text-decoration: none; border-radius: 6px; transition: color .16s ease; }
.fx-work-cta a .bi { transition: transform .2s ease; }
.fx-work-cta a:hover { color: var(--fx-green); }
.fx-work-cta a:hover .bi { transform: translateX(-4px); }
.fx-work-cta a:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 3px; }

/* ─── reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .fx-work-card, .fx-work-motif, .fx-work-card-more .bi, .fx-work-cta a, .fx-work-cta a .bi { transition: none; }
    .fx-work-card:hover, .fx-work-card--featured, .fx-work-card--featured:hover { transform: none; }
    .fx-work-card:hover .fx-work-motif { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-CATS — "اكتشف المنصة" category cards (Farmix service-card style, RTL)
   ───────────────────────────────────────────────────────────────────
   Each card = a real <a> with: a GREEN gradient HEADER band + a subtle
   low-opacity white inline-SVG motif; a YELLOW round Bootstrap-icon tile
   (white ring) STRADDLING the header/body seam, anchored inline-start
   (= physical RIGHT in RTL, like the hero cards); a bold title; a short
   description; and a "تعرّف أكثر" read-more with a chevron.

   Layout is FLEXBOX (flex-wrap + justify-content:center) so the trailing
   4th & 5th cards form a cleanly CENTERED row under the first three at
   3-up; reflow 3 → 2 → 1 columns at 992 / 600px. No orphan, zero
   horizontal overflow 320px+. All selectors prefixed .fx-cats.
   Logical properties throughout. Re-centers via .fx-cats-inner because
   farmix.css forces .thimar-section > .container to max-width:100%
   (mirrors the sibling .thimar-section-wrapper / .fx-work-inner).
   Appended to farmix.css. No JS, no external assets.
   ════════════════════════════════════════════════════════════════════ */
.fx-cats, .fx-cats *, .fx-cats *::before, .fx-cats *::after { box-sizing: border-box; }

/* local tokens: header band height + straddling icon diameter */
.fx-cats { --fx-cats-media-h: 96px; --fx-cats-icon: 58px; }

/* re-center content (farmix.css forces .thimar-section>.container to 100%) */
.fx-cats-inner { position: relative; inline-size: 100%; max-inline-size: var(--fx-container); margin-inline: auto; }

/* ─────────── section header (centered) ─────────── */
.fx-cats-head { max-inline-size: 64ch; margin-inline: auto; margin-block-end: var(--spacing-2xl); text-align: center; }
.fx-cats-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding-block: .4rem; padding-inline: .95rem;
    border-radius: var(--radius-full);
    background: rgba(14,163,113,.1); color: var(--fx-green-d);
    font-weight: 800; font-size: .9rem; margin-block-end: var(--spacing-md);
}
.fx-cats-eyebrow .bi { color: var(--fx-green); font-size: 1rem; }
.fx-cats-title {
    margin: 0 0 var(--spacing-md);
    font-size: clamp(1.65rem, 4.6vw, 2.7rem); line-height: 1.3;
    font-weight: 900; color: var(--fx-ink); letter-spacing: -.3px;
    overflow-wrap: break-word;
}
.fx-cats-subtitle {
    margin: 0 auto; max-inline-size: 56ch;
    font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.9; color: var(--fx-ink-soft);
}

/* ─────────── grid: flex wrap + centered trailing row ─────────── */
.fx-cats-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-lg); }

/* card = real link · base (mobile) = 1 column.
   flex-grow:0 keeps the trailing line at natural column width so
   justify-content:center genuinely CENTERS it (no stretched orphan). */
.fx-cats-card {
    position: relative;
    flex: 0 1 100%;
    min-inline-size: 0;          /* allow shrink → kill overflow from long words */
    max-inline-size: 100%;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--fx-line);
    border-radius: var(--radius-xl);
    overflow: hidden;            /* clip media corners + motif; icon straddles INSIDE the card */
    text-decoration: none;
    color: var(--fx-ink);
    box-shadow: 0 18px 40px -22px rgba(7,60,42,.4);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fx-cats-card:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -22px rgba(7,60,42,.5); border-color: rgba(246,201,21,.6); }
.fx-cats-card:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 3px; } /* outline isn't clipped by the card's own overflow */

/* ─────────── header "image" band: green gradient + motif ─────────── */
.fx-cats-media {
    position: relative; display: block;
    block-size: var(--fx-cats-media-h); flex: 0 0 auto; overflow: hidden;
    background:
        radial-gradient(120% 90% at 82% 0%, rgba(255,255,255,.18), transparent 58%),
        var(--fx-cats-grad, linear-gradient(135deg, var(--fx-green) 0%, var(--fx-green-d) 100%));
}
/* per-card green variety (mirrors the hero cards) */
.fx-cats-card:nth-child(1) { --fx-cats-grad: linear-gradient(135deg, #14b481 0%, #0a6a49 100%); }
.fx-cats-card:nth-child(2) { --fx-cats-grad: linear-gradient(135deg, #0ea371 0%, #076b4a 100%); }
.fx-cats-card:nth-child(3) { --fx-cats-grad: linear-gradient(135deg, #0c9268 0%, #075c40 100%); }
.fx-cats-card:nth-child(4) { --fx-cats-grad: linear-gradient(135deg, #17a074 0%, #0b573c 100%); }
.fx-cats-card:nth-child(5) { --fx-cats-grad: linear-gradient(135deg, #12a472 0%, #076544 100%); }

.fx-cats-motif { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: #fff; opacity: .16; transition: transform .35s ease; }
.fx-cats-card:hover .fx-cats-motif { transform: scale(1.06); }

/* ─────────── straddling yellow icon tile ───────────
   Anchored inline-start (physical RIGHT in RTL); sits half on the header,
   half on the body (top = band height, then translateY(-50%)). Stays
   fully INSIDE the overflow:hidden card, so nothing clips. */
.fx-cats-icon {
    position: absolute; z-index: 2;
    inset-block-start: var(--fx-cats-media-h);
    inset-inline-start: var(--spacing-lg);      /* aligns with body's inline-start padding */
    transform: translateY(-50%);
    inline-size: var(--fx-cats-icon); block-size: var(--fx-cats-icon);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--fx-yellow), #ffd84d);
    color: var(--fx-ink);
    display: grid; place-items: center; font-size: 1.4rem;
    box-shadow: 0 8px 18px rgba(246,201,21,.4), 0 0 0 4px #fff;   /* white ring */
    transition: transform .2s ease;
}
.fx-cats-card:hover .fx-cats-icon { transform: translateY(-50%) rotate(-6deg); }

/* ─────────── body ─────────── */
.fx-cats-body {
    flex: 1 1 auto;                 /* fill card height so read-more can pin to the bottom */
    display: flex; flex-direction: column; gap: .5rem;
    /* reserve room for the icon's lower half (icon/2) + breathing space */
    padding-block-start: calc(var(--fx-cats-icon) / 2 + .9rem);
    padding-block-end: var(--spacing-lg);
    padding-inline: var(--spacing-lg);
    text-align: start;
}
.fx-cats-card-title { font-size: 1.25rem; font-weight: 800; color: var(--fx-ink); line-height: 1.3; overflow-wrap: break-word; }
.fx-cats-text { font-size: .95rem; line-height: 1.8; color: var(--fx-ink-soft); overflow-wrap: break-word; }

/* read-more (styled span inside the link) */
.fx-cats-more {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-block-start: auto; padding-block-start: .35rem;
    color: var(--fx-green-d); font-weight: 800; font-size: .98rem;
}
.fx-cats-more .bi { font-size: .95em; transition: transform .2s ease; }
.fx-cats-card:hover .fx-cats-more { color: var(--fx-green); }
.fx-cats-card:hover .fx-cats-more .bi { transform: translateX(-4px); } /* nudge toward inline-end (physical LEFT in RTL) */

/* ─────────── ≥600px: 2 columns ─────────── */
@media (min-width: 600px) {
    /* -1px guards against sub-pixel rounding wrapping a full row */
    .fx-cats-card {
        flex-basis: calc((100% - var(--spacing-lg)) / 2 - 1px);
        max-inline-size: calc((100% - var(--spacing-lg)) / 2 - 1px);
    }
}
/* ─────────── ≥992px: 3 columns (trailing 2 auto-center) ─────────── */
@media (min-width: 992px) {
    .fx-cats-card {
        flex-basis: calc((100% - 2 * var(--spacing-lg)) / 3 - 1px);
        max-inline-size: calc((100% - 2 * var(--spacing-lg)) / 3 - 1px);
    }
}

/* ─────────── reduced motion ─────────── */
@media (prefers-reduced-motion: reduce) {
    .fx-cats-card, .fx-cats-motif, .fx-cats-icon, .fx-cats-more .bi { transition: none; }
    .fx-cats-card:hover { transform: none; }
    .fx-cats-card:hover .fx-cats-motif { transform: none; }
    .fx-cats-card:hover .fx-cats-icon { transform: translateY(-50%); }
    .fx-cats-card:hover .fx-cats-more .bi { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-HOW — "كيف تعمل ثمار؟" — Farmix "How We Do" style (RTL, no photos)
   ───────────────────────────────────────────────────────────────────
   Centered header (yellow plant icon + green eyebrow + bold title), a
   faint decorative vegetable outline top-inline-start, green circular
   « » edge arrows (decorative), and THREE steps as circles wrapped in a
   dashed yellow ring, staggered in a zigzag (middle raised) on desktop.
   Circles hold a large white icon + a yellow step-number badge. No JS.
   All selectors prefixed .fx-how; logical properties throughout.
   Re-centers via .fx-how-inner (farmix.css forces .thimar-section >
   .container to max-width:100%). Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-how, .fx-how *, .fx-how *::before, .fx-how *::after { box-sizing: border-box; }
.fx-how { position: relative; overflow: hidden; }              /* clip the decorative veg */
.fx-how-inner { position: relative; inline-size: 100%; max-inline-size: var(--fx-container); margin-inline: auto; }

/* ── decorative faint vegetable (desktop only) ── */
.fx-how-deco { display: none; }
@media (min-width: 992px) {
    .fx-how-deco { position: absolute; inset-block-start: -34px; inset-inline-start: -8px; inline-size: 168px; color: var(--fx-green-d); opacity: .15; z-index: 0; pointer-events: none; display: block; }
    .fx-how-deco svg { display: block; inline-size: 100%; block-size: auto; }
}

/* ── header ── */
.fx-how-head { position: relative; z-index: 1; text-align: center; max-inline-size: 62ch; margin-inline: auto; margin-block-end: var(--spacing-2xl); }
.fx-how-topicon { display: inline-grid; place-items: center; color: var(--fx-yellow-d); font-size: 2rem; margin-block-end: .35rem; }
.fx-how-eyebrow { display: block; color: var(--fx-green); font-weight: 800; font-size: .95rem; letter-spacing: .04em; margin-block-end: .5rem; }
.fx-how-title { margin: 0 0 var(--spacing-md); font-size: clamp(1.7rem, 4.8vw, 2.8rem); font-weight: 900; color: var(--fx-ink); letter-spacing: -.3px; overflow-wrap: break-word; }
.fx-how-subtitle { margin: 0 auto; max-inline-size: 54ch; font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.9; color: var(--fx-ink-soft); }

/* ── steps body (relative → hosts the absolute edge arrows) ── */
.fx-how-body { position: relative; z-index: 1; }

/* decorative green edge arrows (no slider → inert, desktop only) */
.fx-how-arrow { display: none; }
@media (min-width: 992px) {
    .fx-how-arrow {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; inset-block-start: 95px; transform: translateY(-50%); z-index: 3;
        inline-size: 58px; block-size: 58px; border-radius: 50%;
        background: var(--fx-green); color: #fff; font-size: 1.35rem;
        box-shadow: 0 14px 28px -10px rgba(14,163,113,.7); pointer-events: none;
    }
    .fx-how-arrow--start { inset-inline-start: -8px; }   /* physical RIGHT in RTL */
    .fx-how-arrow--end   { inset-inline-end: -8px; }     /* physical LEFT in RTL */
}

/* ── grid of steps: mobile = 1 column ── */
.fx-how-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); justify-items: center; }
.fx-how-item { inline-size: 100%; max-inline-size: 340px; text-align: center; }

/* circle + dashed yellow ring + number badge */
.fx-how-circle {
    position: relative; inline-size: 186px; block-size: 186px;
    margin-inline: auto; margin-block-end: var(--spacing-lg); border-radius: 50%;
    background: radial-gradient(125% 125% at 30% 20%, #16b585, var(--fx-green-d));
    display: grid; place-items: center; color: #fff; font-size: 3.5rem;
    box-shadow: 0 22px 46px -20px rgba(7,60,42,.6);
    transition: transform .2s ease;
}
.fx-how-circle::before {
    content: ""; position: absolute; inset: -13px; border-radius: 50%;
    border: 2px dashed var(--fx-yellow);
}
.fx-how-num {
    position: absolute; inset-block-start: 4px; inset-inline-start: 4px; z-index: 1;
    inline-size: 42px; block-size: 42px; border-radius: 50%;
    background: var(--fx-yellow); color: var(--fx-ink);
    display: grid; place-items: center; font-size: 1.15rem; font-weight: 800;
    box-shadow: 0 6px 14px rgba(246,201,21,.5); border: 3px solid #fff;
}
.fx-how-item:hover .fx-how-circle { transform: translateY(-6px); }

.fx-how-item-title { margin: 0 0 .55rem; font-size: 1.4rem; font-weight: 800; color: var(--fx-ink); }
.fx-how-item-text { margin: 0 auto; max-inline-size: 34ch; font-size: 1rem; line-height: 1.9; color: var(--fx-ink-soft); }

/* ── desktop (>=768px): 3 across + staggered zigzag (middle raised) ── */
@media (min-width: 768px) {
    .fx-how-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); align-items: start; }
    .fx-how-item { max-inline-size: none; padding-inline: var(--spacing-sm); }
    .fx-how-item:nth-child(2) { transform: translateY(-58px); }   /* raise the middle → Farmix zigzag */
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fx-how-circle { transition: none; }
    .fx-how-item:hover .fx-how-circle { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-FOOT — Farmix-style footer (dark, green-tinted, yellow accents, RTL)
   Top contact row (yellow round icons + yellow divider) · 4-col grid
   (brand+social / الأقسام / الشركة / newsletter) · bottom copyright bar.
   No photos → dark bg with subtle green radial glows. Logical props.
   Uses .fx-container (NOT .thimar-section>.container) so it keeps the
   1200px cap without a re-center hack. Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-foot { position: relative; overflow: hidden; background: #0d1013; color: #cfd4dc; }
.fx-foot, .fx-foot *, .fx-foot *::before, .fx-foot *::after { box-sizing: border-box; }
.fx-foot img { max-inline-size: 100%; block-size: auto; }
.fx-foot-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(70% 110% at 12% 0%, rgba(14,163,113,.22), transparent 55%),
        radial-gradient(65% 100% at 100% 100%, rgba(7,107,74,.24), transparent 60%),
        linear-gradient(180deg, #14181e 0%, #0d1013 100%);
}
.fx-foot-inner { position: relative; z-index: 1; padding-block: 56px 22px; }

/* ── top contact row ── */
.fx-foot-contact {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg);
    padding-block-end: var(--spacing-xl);
    border-block-end: 1px solid rgba(246,201,21,.5);
    margin-block-end: var(--spacing-2xl);
}
.fx-foot-cinfo { display: flex; align-items: center; gap: 1rem; min-inline-size: 0; }
.fx-foot-cicon {
    flex: 0 0 auto; inline-size: 62px; block-size: 62px; border-radius: 50%;
    background: var(--fx-yellow); color: var(--fx-ink);
    display: grid; place-items: center; font-size: 1.5rem;
}
.fx-foot-cbody { display: flex; flex-direction: column; gap: .18rem; min-inline-size: 0; }
.fx-foot-clabel { color: #fff; font-weight: 800; font-size: 1.05rem; }
.fx-foot-cbody a, .fx-foot-cbody > span:not(.fx-foot-clabel) { color: #b9c0ca; font-size: .95rem; text-decoration: none; overflow-wrap: break-word; }
.fx-foot-cbody a:hover { color: var(--fx-yellow); }

/* ── main grid ── */
.fx-foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 34px; padding-block-end: var(--spacing-2xl); }
.fx-foot-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-block-end: 16px; }
.fx-foot-brand img { height: 46px; width: auto; }
.fx-foot-brand span { font-size: 1.6rem; font-weight: 800; color: #fff; }
.fx-foot-about p { line-height: 1.9; font-size: .92rem; margin: 0 0 18px; color: #aeb5bf; }
.fx-foot-social { display: flex; gap: 10px; }
.fx-foot-social a {
    inline-size: 40px; block-size: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: background .16s, color .16s, transform .16s;
}
.fx-foot-social a:hover { background: var(--fx-yellow); color: var(--fx-ink); transform: translateY(-2px); }

.fx-foot-col h5, .fx-foot-news h5 { color: #fff; font-weight: 800; font-size: 1.2rem; margin: 0 0 22px; position: relative; padding-block-end: 12px; }
.fx-foot-col h5::after, .fx-foot-news h5::after {
    content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
    inline-size: 46px; block-size: 3px; border-radius: 3px; background: var(--fx-yellow);
}
.fx-foot-col ul { list-style: none; margin: 0; padding: 0; }
.fx-foot-col li { margin-block-end: 12px; }
.fx-foot-col a { color: #b9c0ca; text-decoration: none; font-size: .96rem; transition: color .15s, padding-inline-start .15s; }
.fx-foot-col a:hover { color: var(--fx-yellow); padding-inline-start: 4px; }

/* ── newsletter ── */
.fx-foot-news p { line-height: 1.85; font-size: .92rem; color: #aeb5bf; margin: 0 0 18px; }
.fx-foot-news-form { display: flex; align-items: center; background: #fff; border-radius: var(--radius-full); padding: 6px; max-inline-size: 360px; }
.fx-foot-news-form input {
    flex: 1 1 auto; min-inline-size: 0; border: 0; background: transparent; outline: none;
    padding-inline: 16px; font-size: .95rem; color: var(--fx-ink); font-family: inherit;
}
.fx-foot-news-btn {
    flex: 0 0 auto; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%;
    background: var(--fx-yellow); color: var(--fx-ink); display: grid; place-items: center;
    font-size: 1.1rem; cursor: pointer; text-decoration: none; transition: background .16s;
}
.fx-foot-news-btn:hover { background: var(--fx-yellow-d); color: var(--fx-ink); }

/* ── bottom bar ── */
.fx-foot-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding-block-start: 22px; border-block-start: 1px solid rgba(255,255,255,.1); font-size: .9rem; color: #aeb5bf;
}
.fx-foot-bottom strong { color: #fff; }
.fx-foot-meta { display: flex; gap: 20px; flex-wrap: wrap; }
.fx-foot-meta a { color: #b9c0ca; text-decoration: none; }
.fx-foot-meta a:hover { color: var(--fx-yellow); }

/* ── responsive ── */
@media (max-width: 991px) {
    .fx-foot-contact { grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
    .fx-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 600px) {
    .fx-foot-contact { grid-template-columns: 1fr; gap: var(--spacing-md); }
    .fx-foot-grid { grid-template-columns: 1fr; gap: 28px; }
    .fx-foot-bottom { flex-direction: column; text-align: center; }
    .fx-foot-meta { justify-content: center; }
    .fx-foot-news-form { max-inline-size: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-STATS — Farmix "stats band" (replaces the smart-features section)
   Full-bleed green SVG field + dark overlay · centered yellow plant icon,
   heading, subtitle, yellow CTA button · a row of 4 stat items (yellow
   round icon + number + label). RTL, no photos, no JS. Uses .fx-container
   for the 1200px cap. Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-stats { position: relative; overflow: hidden; color: #fff; padding-block: clamp(56px, 8vw, 96px); }
.fx-stats, .fx-stats *, .fx-stats *::before, .fx-stats *::after { box-sizing: border-box; }

.fx-stats-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; line-height: 0; }
.fx-stats-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-stats-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(6,45,31,.60) 0%, rgba(5,38,26,.78) 100%); }
.fx-stats-inner { position: relative; z-index: 2; }

/* header */
.fx-stats-head { text-align: center; max-inline-size: 62ch; margin-inline: auto; margin-block-end: var(--spacing-2xl); }
.fx-stats-topicon { display: inline-grid; place-items: center; color: var(--fx-yellow); font-size: 2rem; margin-block-end: .35rem; }
.fx-stats-title { margin: 0 0 var(--spacing-md); font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 900; color: #fff; line-height: 1.2; letter-spacing: -.3px; overflow-wrap: break-word; text-shadow: 0 2px 20px rgba(0,0,0,.28); }
.fx-stats-hl { color: var(--fx-yellow); }
.fx-stats-subtitle { margin: 0 auto var(--spacing-lg); max-inline-size: 56ch; font-size: clamp(1rem, 2.3vw, 1.18rem); line-height: 1.85; color: rgba(255,255,255,.9); }
.fx-stats-btn { display: inline-flex; align-items: center; gap: .55rem; padding-block: .85rem; padding-inline: 1.9rem;
    border-radius: var(--radius-full); background: var(--fx-yellow); color: var(--fx-ink); font-weight: 800; font-size: 1rem;
    text-decoration: none; box-shadow: 0 14px 30px rgba(246,201,21,.35); transition: transform .16s ease, background-color .16s ease; }
.fx-stats-btn:hover { background: var(--fx-yellow-d); color: var(--fx-ink); transform: translateY(-2px); }
.fx-stats-btn .bi { transition: transform .16s ease; }
.fx-stats-btn:hover .bi { transform: translateX(-4px); }
.fx-stats-btn:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 3px; }

/* stat row */
.fx-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); }
.fx-stats-item { display: flex; align-items: center; justify-content: center; gap: 1rem; min-inline-size: 0; }
.fx-stats-icon { flex: 0 0 auto; inline-size: 66px; block-size: 66px; border-radius: 50%; background: var(--fx-yellow);
    color: var(--fx-ink); display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 12px 26px -10px rgba(246,201,21,.6); }
.fx-stats-meta { display: flex; flex-direction: column; line-height: 1.2; min-inline-size: 0; text-align: start; }
.fx-stats-num { font-size: 2.1rem; font-weight: 900; color: #fff; letter-spacing: -.5px; }
.fx-stats-label { font-size: .95rem; color: rgba(255,255,255,.85); font-weight: 600; overflow-wrap: break-word; }

/* responsive */
@media (max-width: 860px) { .fx-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl) var(--spacing-lg); } }
@media (max-width: 480px) { .fx-stats-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .fx-stats-btn, .fx-stats-btn .bi { transition: none; }
    .fx-stats-btn:hover { transform: none; }
    .fx-stats-btn:hover .bi { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-PROVIDE — "لماذا ثمار؟" — Farmix "What We Provide" style (RTL)
   Dark-green section with a decorative foliage cluster peeking on the
   inline-end (the "photo"), and a brighter emerald rounded PANEL on the
   inline-start holding an eyebrow, heading, and a 2-col grid of 6 benefit
   items (yellow round icon + white title + muted description). No photos,
   no JS. Uses .fx-container for the 1200 cap. Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-provide { position: relative; overflow: hidden; color: #fff; padding-block: clamp(48px, 7vw, 84px);
    background: linear-gradient(120deg, #06331f 0%, #0a4a32 55%, #0b5a3e 100%); }
.fx-provide, .fx-provide *, .fx-provide *::before, .fx-provide *::after { box-sizing: border-box; }

/* decorative foliage (desktop only) */
.fx-provide-scene { display: none; }
@media (min-width: 992px) {
    .fx-provide-scene { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 42%; z-index: 0; opacity: .55; pointer-events: none; display: block; }
    .fx-provide-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
}

.fx-provide-inner { position: relative; z-index: 1; }

/* emerald panel */
.fx-provide-panel {
    max-inline-size: 100%;
    background: linear-gradient(135deg, rgba(14,163,113,.94) 0%, rgba(9,120,82,.96) 100%);
    border-radius: var(--radius-2xl); padding: clamp(24px, 4vw, 52px);
    box-shadow: 0 34px 74px -34px rgba(0,0,0,.55);
}
@media (min-width: 992px) { .fx-provide-panel { max-inline-size: 74%; } }

.fx-provide-eyebrow { display: block; color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .06em; margin-block-end: .5rem; opacity: .95; }
.fx-provide-title { margin: 0 0 var(--spacing-md); font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.3px; }
.fx-provide-sub { margin: 0 0 var(--spacing-xl); max-inline-size: 62ch; font-size: clamp(1rem, 2.2vw, 1.1rem); line-height: 1.85; color: rgba(255,255,255,.9); }

/* 2-col benefit grid */
.fx-provide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl) var(--spacing-lg); }
.fx-provide-item { display: flex; align-items: flex-start; gap: 1rem; min-inline-size: 0; }
.fx-provide-icon {
    flex: 0 0 auto; inline-size: 62px; block-size: 62px; border-radius: 50%;
    background: var(--fx-yellow); color: var(--fx-ink); display: grid; place-items: center; font-size: 1.55rem;
    box-shadow: 0 10px 22px -8px rgba(0,0,0,.45);
}
.fx-provide-body { min-inline-size: 0; }
.fx-provide-item-title { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 800; color: #fff; }
.fx-provide-item-text { margin: 0; font-size: .95rem; line-height: 1.8; color: rgba(255,255,255,.82); overflow-wrap: break-word; }

/* responsive */
@media (max-width: 620px) { .fx-provide-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } }