/* =====================================================================
   Star Chemical — design system
   Refined scientific-editorial: navy anchor · coral accent · peach support.
   Bilingual: one sheet, logical properties serve RTL (ar) + LTR (en).
   ===================================================================== */

/* ------------------------------------------------------------ tokens ---- */
:root{
  /* brand (sampled from logo) */
  --navy-900:#0E1230;
  --navy-800:#141A4A;
  --navy-700:#20256B;
  --navy-600:#2C327F;
  --red:#D8503B;
  --red-600:#C6432F;
  --red-700:#9E3620;
  --peach:#F1C4A0;
  --peach-soft:#F8DEC7;

  /* neutrals */
  --cream:#F5F2EA;
  --paper:#FCFAF5;
  --sand:#ECE5D7;
  --white:#fff;

  /* category accents */
  --leaf:#2FA36B;
  --sky:#3B7CD8;

  /* text on light */
  --text:#1A1E36;
  --muted:#585D74;
  --muted-2:#8B8FA2;
  --line:rgba(20,26,74,.13);
  --line-soft:rgba(20,26,74,.07);

  /* on dark */
  --on-dark:#EDEFF7;
  --on-dark-muted:rgba(237,239,247,.64);
  --line-dark:rgba(255,255,255,.13);

  /* type */
  --font-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;

  /* geometry */
  --container:1200px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:28px;
  --radius-xl:36px;
  --pill:100px;

  /* shadows */
  --shadow-sm:0 2px 8px rgba(20,26,74,.06);
  --shadow:0 18px 40px -22px rgba(20,26,74,.35);
  --shadow-lg:0 40px 80px -40px rgba(20,26,74,.5);
  --shadow-red:0 16px 34px -14px rgba(216,80,59,.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
.lang-ar{
  --font-display:'Tajawal',system-ui,sans-serif;
  --font-body:'Tajawal',system-ui,sans-serif;
}

/* ------------------------------------------------------------ reset ----- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.lang-ar body,.lang-ar{line-height:1.8}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:4px}
::selection{background:var(--red);color:#fff}

/* ------------------------------------------------------- typography ----- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;font-weight:700;color:var(--navy-800);letter-spacing:-.02em}
.lang-ar h1,.lang-ar h2,.lang-ar h3,.lang-ar h4{font-weight:800;letter-spacing:0;line-height:1.3}
p{text-wrap:pretty}

/* ------------------------------------------------------- primitives ----- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.section{padding-block:clamp(66px,9vw,128px);position:relative}
.section--tight{padding-block:clamp(50px,6vw,84px)}
.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
.bg-navy{background:var(--navy-800);color:var(--on-dark)}
.bg-navy h2,.bg-navy h3{color:#fff}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-body);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:1.1rem;
}
.lang-ar .eyebrow{letter-spacing:.04em;font-weight:700;font-size:.82rem}
.eyebrow svg{color:var(--red)}
.bg-navy .eyebrow{color:var(--peach)}
.bg-navy .eyebrow svg{color:var(--peach)}

.sec-head{max-width:62ch}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-title{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.sec-lead{margin-top:1.1rem;font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);max-width:60ch}
.sec-head--center .sec-lead{margin-inline:auto}
.bg-navy .sec-lead{color:var(--on-dark-muted)}

/* reveal-on-scroll (JS adds .in; no-JS shows all) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

/* ---------------------------------------------------------- buttons ----- */
.btn{
  --bg:var(--navy-800);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.6em;border-radius:var(--pill);
  font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:1;
  background:var(--bg);color:var(--fg);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
  position:relative;white-space:nowrap;
}
.btn--sm{padding:.7em 1.2em;font-size:.86rem}
.btn__arrow{transition:transform .35s var(--ease)}
[dir="rtl"] .btn__arrow{transform:scaleX(-1)}
.btn:hover{transform:translateY(-3px)}
.btn:hover .btn__arrow{transform:translateX(4px)}
[dir="rtl"] .btn:hover .btn__arrow{transform:scaleX(-1) translateX(4px)}

.btn--primary{--bg:var(--red);--fg:#fff;box-shadow:var(--shadow-red);background:linear-gradient(135deg,var(--red),var(--red-600))}
.btn--primary:hover{box-shadow:0 22px 44px -14px rgba(216,80,59,.62)}
.btn--light{--bg:#fff;--fg:var(--navy-800);box-shadow:var(--shadow)}
.btn--ghost{--bg:transparent;--fg:var(--navy-800);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--navy-800);background:var(--navy-800);--fg:#fff}
.bg-navy .btn--ghost,.hero .btn--ghost{--fg:#fff;border-color:var(--line-dark)}
.bg-navy .btn--ghost:hover,.hero .btn--ghost:hover{background:#fff;--fg:var(--navy-800);border-color:#fff}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--red);font-size:.95rem}
.link-arrow svg{transition:transform .35s var(--ease)}
[dir="rtl"] .link-arrow svg{transform:scaleX(-1)}
.link-arrow:hover svg{transform:translateX(5px)}
[dir="rtl"] .link-arrow:hover svg{transform:scaleX(-1) translateX(5px)}

/* ------------------------------------------------- scroll progress ------ */
.scroll-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:120;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--peach));transition:width .1s linear}

/* --------------------------------------------------------- header ------- */
.skip-link{position:absolute;inset-block-start:-100px;inset-inline-start:16px;z-index:200;background:var(--navy-800);color:#fff;padding:.7em 1.2em;border-radius:0 0 12px 12px;transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:0}

.site-head{position:sticky;inset-block-start:0;z-index:100;transition:background .4s var(--ease),box-shadow .4s,backdrop-filter .4s}
.site-head__row{display:flex;align-items:center;gap:1.4rem;min-height:76px}
.site-head.is-stuck{background:rgba(252,250,245,.82);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--line-soft),0 12px 30px -22px rgba(20,26,74,.4)}

.brand{display:inline-flex;align-items:center;flex-shrink:0}
/* One bilingual lockup (emblem + AR & EN name) — identical in both languages. */
.brand__logo img{display:block;height:clamp(52px,5vw,62px);width:auto;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(20,26,74,.18))}

.nav{margin-inline:auto}
.nav__list{display:flex;gap:.35rem}
.nav__link{position:relative;padding:.6em .95em;border-radius:var(--pill);font-weight:600;font-size:.95rem;color:var(--navy-700);transition:color .25s,background .25s}
.nav__link::after{content:"";position:absolute;inset-block-end:.35em;inset-inline-start:50%;transform:translateX(-50%);width:0;height:2px;border-radius:2px;background:var(--red);transition:width .3s var(--ease)}
.nav__link:hover{color:var(--red)}
.nav__link.is-active{color:var(--red)}
.nav__link.is-active::after{width:18px}

.site-head__actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.lang-toggle{display:inline-flex;align-items:center;gap:.4em;padding:.55em .9em;border-radius:var(--pill);border:1.5px solid var(--line);font-weight:700;font-size:.85rem;color:var(--navy-700);transition:.25s}
.lang-toggle:hover{border-color:var(--navy-700);background:var(--navy-800);color:#fff}
.burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;color:var(--navy-800);border:1.5px solid var(--line)}

/* mobile nav */
.mobile-nav{position:fixed;inset:0;z-index:110;visibility:hidden;pointer-events:none}
.mobile-nav::before{content:"";position:absolute;inset:0;background:rgba(14,18,48,.5);opacity:0;transition:opacity .4s}
.mobile-nav.is-open{visibility:visible;pointer-events:auto}
.mobile-nav.is-open::before{opacity:1}
.mobile-nav__panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(86vw,380px);background:var(--paper);
  box-shadow:var(--shadow-lg);padding:5.5rem 1.6rem 2rem;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s var(--ease)}
[dir="rtl"] .mobile-nav__panel{transform:translateX(-100%)}
.mobile-nav.is-open .mobile-nav__panel{transform:none}
.mobile-nav__link{display:flex;align-items:center;justify-content:space-between;padding:1em .4em;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--navy-800);border-block-end:1px solid var(--line-soft)}
.mobile-nav__link svg{color:var(--muted-2)}
[dir="rtl"] .mobile-nav__link svg{transform:scaleX(-1)}
.mobile-nav__link.is-active{color:var(--red)}
.mobile-nav__foot{margin-block-start:auto;display:flex;flex-direction:column;gap:.9rem;padding-block-start:1.6rem}
.mobile-nav__foot .btn{width:100%}

/* ============================================================= HERO ===== */
.hero{position:relative;overflow:hidden;color:var(--on-dark);
  background:
    radial-gradient(120% 90% at 82% -8%,rgba(216,80,59,.36),transparent 55%),
    radial-gradient(90% 80% at 8% 108%,rgba(44,50,127,.9),transparent 60%),
    linear-gradient(158deg,var(--navy-800),var(--navy-900) 70%)}
/* The two accent radials use physical %, so they don't follow the layout when it
   flips for RTL — the bottom-left navy glow would land under the product box (which
   sits on the left in Arabic) instead of under the text. Mirror them horizontally so
   the warm accent stays behind the box and the navy stays behind the copy, matching EN. */
[dir="rtl"] .hero{
  background:
    radial-gradient(120% 90% at 18% -8%,rgba(216,80,59,.36),transparent 55%),
    radial-gradient(90% 80% at 92% 108%,rgba(44,50,127,.9),transparent 60%),
    linear-gradient(202deg,var(--navy-800),var(--navy-900) 70%)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;
  /* fade the molecular network out in the lower hero so nothing twinkles below the product box */
  -webkit-mask-image:linear-gradient(180deg,#000 54%,transparent 85%);
  mask-image:linear-gradient(180deg,#000 54%,transparent 85%)}
.hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.hero__blob--1{width:440px;height:440px;background:rgba(216,80,59,.5);inset-block-start:-120px;inset-inline-end:-80px}
.hero__blob--2{width:360px;height:360px;background:rgba(241,196,160,.35);inset-block-end:-140px;inset-inline-start:-60px}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(4.5rem,11vw,8.5rem)}

.hero__badge{display:inline-flex;align-items:center;gap:.6em;padding:.5em 1em;border-radius:var(--pill);
  background:rgba(255,255,255,.09);border:1px solid var(--line-dark);backdrop-filter:blur(6px);
  font-size:.82rem;font-weight:600;color:#fff;margin-bottom:1.6rem}
.hero__badge .dot{width:8px;height:8px;border-radius:50%;background:var(--peach);box-shadow:0 0 0 4px rgba(241,196,160,.25);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(241,196,160,0)}}
.hero__eyebrow{color:var(--peach)!important}
.hero h1{color:#fff;font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.03em}
.lang-ar .hero h1{line-height:1.25;letter-spacing:0}
.hero h1 .accent{color:var(--peach);white-space:nowrap}
.hero__lead{margin-block-start:1.5rem;font-size:clamp(1.05rem,1.7vw,1.28rem);color:rgba(237,239,247,.82);max-width:52ch}
.hero__cta{margin-block-start:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem}
.hero__scroll{margin-block-start:3rem;display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600}
.lang-ar .hero__scroll{letter-spacing:.02em;text-transform:none}
.hero__scroll .mouse{width:22px;height:34px;border:1.5px solid var(--on-dark-muted);border-radius:12px;position:relative}
.hero__scroll .mouse::after{content:"";position:absolute;inset-block-start:6px;inset-inline-start:50%;transform:translateX(-50%);width:3px;height:6px;border-radius:2px;background:var(--peach);animation:scroll 1.8s infinite}
@keyframes scroll{0%{opacity:0;transform:translate(-50%,-3px)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,9px)}}

/* hero visual: a living "range wall" — the real product catalogue in two gently
   counter-scrolling columns on a framed navy stage, grounded by a live count and a
   quality seal. Replaces the abstract card. Decorative (aria-hidden): every product
   is real, linked content below. All motion stills under prefers-reduced-motion. */
.hero__visual{position:relative;justify-self:center;width:100%;max-width:452px}
/* warm halo sits BEHIND/above the box and fades out before its bottom edge — no light spills below it */
.hero__glow{position:absolute;z-index:0;inset:-16% -12% 9%;pointer-events:none;
  background:radial-gradient(54% 44% at 50% 35%,rgba(241,196,160,.5),transparent 70%)}

.hero__stage{position:relative;z-index:1;height:clamp(400px,50vw,552px);border-radius:26px;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 44px 76px -30px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* subtle grain so the navy stage reads as a finished surface, not a flat fill */
.hero__stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.hero__wall{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 74%,transparent)}
.hero__col{overflow:hidden}
.hero__track{display:flex;flex-direction:column;gap:14px;will-change:transform}
.hero__col--up   .hero__track{animation:wall-up 52s linear infinite}
.hero__col--down .hero__track{animation:wall-down 62s linear infinite}
@keyframes wall-up{to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.hero__tile{flex:0 0 auto;position:relative;display:block;aspect-ratio:5/4;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#fff,#f6f3ec);border:1px solid rgba(255,255,255,.75);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.55)}
.hero__tile::before{content:"";position:absolute;z-index:2;inset-block-start:0;inset-inline:0;height:3px;background:var(--c)}
.hero__tile-img,.hero__tile-img img{display:block;width:100%;height:100%}
.hero__tile-img img{object-fit:contain;padding:11px}

.hero__caption{position:absolute;z-index:3;inset-inline:0;inset-block-end:0;
  display:flex;align-items:center;gap:.85rem;padding:2rem 1.35rem 1.2rem;
  background:linear-gradient(0deg,var(--navy-900) 44%,rgba(14,18,48,.72) 76%,transparent)}
.hero__caption-n{font-family:var(--font-display);font-weight:800;font-size:2.7rem;line-height:.82;color:#fff}
.hero__caption-n span{color:var(--peach);font-size:1.4rem;vertical-align:super;margin-inline-start:.04em}
.hero__caption-tx{display:flex;flex-direction:column;line-height:1.28}
.hero__caption-tx strong{font-weight:700;font-size:1.02rem;color:#fff}
.hero__caption-tx span{font-size:.82rem;color:var(--on-dark-muted)}

.hero__chip{position:absolute;z-index:4;inset-block-start:1.5rem;inset-inline-start:-.7rem;
  display:flex;align-items:center;gap:.5em;padding:.58em .9em;border-radius:12px;
  background:#fff;color:var(--navy-800);box-shadow:0 20px 38px -16px rgba(0,0,0,.62);
  font-weight:700;font-size:.8rem;animation:float 5.5s ease-in-out infinite}
.hero__chip svg{color:var(--leaf);flex-shrink:0}
@keyframes float{50%{transform:translateY(-9px)}}

/* -------------------------------------------------- trust marquee ------- */
.trust{border-block-start:1px solid var(--line-dark);position:relative;z-index:2}
.trust__label{text-align:center;color:var(--on-dark-muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding-block:1.8rem .4rem}
.lang-ar .trust__label{letter-spacing:.02em;text-transform:none;font-size:.9rem}
/* direction:ltr on the overflow container anchors the max-content track at x=0 in BOTH
   languages. Without it, RTL right-aligns the track and the reverse animation below then
   pushes the whole logo strip off-screen left, so the strip appears empty on load. The 90deg
   edge mask is direction-agnostic, so forcing ltr here is safe. */
.marquee{overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,1.9rem);width:max-content;padding-block:1.6rem;animation:marquee 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
[dir="rtl"] .marquee__track{animation-direction:reverse}
.marquee__track picture{flex-shrink:0;display:grid;place-items:center;height:62px;min-width:124px;padding-inline:1.5rem;background:#fff;border-radius:14px;box-shadow:0 12px 26px -14px rgba(0,0,0,.55)}
.marquee img{height:34px;width:auto;max-width:132px;object-fit:contain;transition:transform .3s}
.marquee picture:hover img{transform:scale(1.06)}

/* =========================================================== ABOUT ====== */
.about__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about__body p{color:var(--muted);font-size:1.06rem;margin-block-start:1.1rem}
.vmv{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.vm{display:flex;flex-direction:column;gap:1.1rem;padding:2.1rem 1.9rem;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s}
.vm:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.vm__ic{flex-shrink:0;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff}
.vm:nth-child(2) .vm__ic{background:linear-gradient(135deg,var(--red),var(--red-600))}
.vm:nth-child(3) .vm__ic{background:linear-gradient(135deg,var(--leaf),#248a58)}
.vm h3{font-size:1.18rem;margin-block-end:.4rem}
.vm p{font-size:.96rem;color:var(--muted);line-height:1.65}

.about__media{position:relative}
.about__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;object-fit:cover}
/* Enclosing frame: a peach outline slightly larger than the image on every side, so the photo
   sits fully inside it with an even gap all around (a mat / passe-partout look). Symmetric
   inset => identical in RTL and LTR. Outer radius = image radius + gap so the corners stay
   concentric. Protrudes 16px (14 + 2 border) < the 20px container padding, so no h-overflow. */
.about__media::before{content:"";position:absolute;inset:-14px;
  border:2px solid var(--peach);border-radius:calc(var(--radius-lg) + 14px);z-index:-1}
.about__badge{position:absolute;inset-block-end:-22px;inset-inline-start:-22px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:1rem 1.3rem;display:flex;align-items:center;gap:.8rem}
.about__badge .n{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--red);line-height:1}
.about__badge .t{font-size:.82rem;color:var(--muted);font-weight:600;max-width:12ch}

/* ------------------------------------------------------- stats band ----- */
.stats{background:linear-gradient(140deg,var(--navy-800),var(--navy-900));color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 85% 0%,rgba(216,80,59,.28),transparent 60%)}
.stats__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat{position:relative;padding:1rem}
.stat:not(:last-child)::after{content:"";position:absolute;inset-block:18%;inset-inline-end:0;width:1px;background:var(--line-dark)}
.stat__n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;
  background:linear-gradient(120deg,#fff,var(--peach));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat__l{margin-block-start:.6rem;color:var(--on-dark-muted);font-weight:600;font-size:.95rem;letter-spacing:.02em}

/* ------------------------------------------------------- categories ----- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-block-start:3.2rem}
.cat{position:relative;overflow:hidden;padding:2.2rem 2rem;border-radius:var(--radius-lg);background:var(--white);
  border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s;display:flex;flex-direction:column}
.cat::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:var(--c);transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease)}
.cat:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.cat:hover::before{transform:scaleX(1)}
.cat__ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;background:var(--c);margin-block-end:1.3rem;box-shadow:0 12px 24px -10px var(--c)}
.cat__watermark{position:absolute;inset-block-start:-10px;inset-inline-end:-10px;color:var(--c);opacity:.07}
.cat h3{font-size:1.5rem;margin-block-end:.5rem}
.cat__desc{color:var(--muted);font-size:.98rem;flex:1}
.cat__foot{margin-block-start:1.6rem;display:flex;align-items:center;justify-content:space-between}
.cat__count{font-weight:700;color:var(--c);font-size:.9rem;display:inline-flex;align-items:center;gap:.4em}
.cat .link-arrow{color:var(--navy-700)}

/* --------------------------------------------------------- products ----- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-block:2.4rem 3rem}
.filter-btn{padding:.65em 1.3em;border-radius:var(--pill);border:1.5px solid var(--line);font-weight:700;font-size:.9rem;color:var(--navy-700);background:#fff;transition:.28s var(--ease)}
.filter-btn .c{font-weight:600;opacity:.6;margin-inline-start:.3em}
.filter-btn:hover{border-color:var(--navy-700)}
.filter-btn.is-active{background:var(--navy-800);color:#fff;border-color:var(--navy-800);box-shadow:var(--shadow)}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.pcard{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;display:flex;flex-direction:column}
.pcard.is-hidden{display:none}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.pcard__media{position:relative;aspect-ratio:1;background:linear-gradient(160deg,#fff,var(--cream));display:grid;place-items:center;padding:1.4rem;overflow:hidden}
.pcard__media::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:40%;background:linear-gradient(0deg,rgba(20,26,74,.05),transparent);opacity:0;transition:opacity .4s}
.pcard:hover .pcard__media::after{opacity:1}
.pcard__img{width:80%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.pcard__img img{width:100%;height:100%;object-fit:contain}
.pcard:hover .pcard__img{transform:scale(1.07) translateY(-3px)}
/* Missing-art placeholder — branded, inherits the surrounding --accent (cards + hero) */
.pic-empty{display:grid;place-items:center}
.pic-empty__glyph{width:40%;min-width:60px;max-width:104px;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:var(--accent,var(--navy-700));
  background:#fff;background:color-mix(in srgb,var(--accent,var(--navy-700)) 12%,#fff);
  box-shadow:0 12px 26px -14px color-mix(in srgb,var(--accent,var(--navy-700)) 55%,transparent),
    inset 0 0 0 1.5px color-mix(in srgb,var(--accent,var(--navy-700)) 24%,transparent)}
.pic-empty__glyph svg{width:46%;height:46%}
.phero__img.pic-empty{width:100%;height:100%}
.phero__img.pic-empty .pic-empty__glyph{max-width:132px;width:46%}
.pcard__index{position:absolute;inset-block-start:.9rem;inset-inline-start:1rem;font-family:var(--font-display);font-weight:800;
  font-size:1.05rem;color:var(--navy-800);opacity:.14}
.pcard__form{position:absolute;inset-block-start:.9rem;inset-inline-end:1rem;font-weight:700;font-size:.72rem;letter-spacing:.05em;
  padding:.35em .7em;border-radius:var(--pill);background:var(--navy-800);color:#fff}
.pcard__body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.4rem}
.pcard__cat{display:inline-flex;align-items:center;gap:.4em;font-size:.76rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.lang-ar .pcard__cat{text-transform:none;letter-spacing:0;font-size:.85rem}
.pcard__name{font-size:1.16rem;color:var(--navy-800)}
.pcard__spec{font-size:.9rem;color:var(--muted);line-height:1.5}
.prod-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 0}

/* per-category catalogue section */
.catsec{scroll-margin-top:90px}
.catsec__head{display:flex;align-items:center;gap:1.2rem;margin-block-end:2.4rem;padding-block-end:1.6rem;border-block-end:1px solid var(--line-soft)}
.catsec__ic{flex-shrink:0;width:60px;height:60px;border-radius:17px;display:grid;place-items:center;color:#fff;background:var(--c);box-shadow:0 12px 24px -10px var(--c)}
.catsec__meta{flex:1}
.catsec__meta h2{font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--navy-800)}
.catsec__meta p{color:var(--muted);margin-block-start:.3rem;max-width:60ch}
.catsec__count{flex-shrink:0;font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,transparent);padding:.5em 1em;border-radius:var(--pill);white-space:nowrap}
@media(max-width:620px){.catsec__head{flex-wrap:wrap;gap:.9rem}.catsec__count{order:3}}
[hidden]{display:none!important}

/* ------------------------------------------------------------- why ------ */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-block-start:3.2rem}
.feat{padding:2rem 1.7rem;border-radius:var(--radius-lg);background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  transition:transform .45s var(--ease),background .45s}
.feat:hover{transform:translateY(-8px);background:rgba(255,255,255,.07)}
.feat__ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:var(--navy-900);
  background:linear-gradient(135deg,var(--peach),var(--peach-soft));margin-block-end:1.3rem}
.feat h3{color:#fff;font-size:1.16rem;margin-block-end:.5rem}
.feat p{color:var(--on-dark-muted);font-size:.95rem}
.feat__num{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--peach);opacity:.6;letter-spacing:.1em}

/* --------------------------------------------------------- suppliers ---- */
.sups{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-block-start:3rem}
.sup{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center;padding:1.6rem 1.8rem;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s}
.sup:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.sup__logo{width:120px;height:84px;border-radius:var(--radius);background:var(--cream);display:grid;place-items:center;padding:1rem;border:1px solid var(--line-soft)}
.sup__logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.sup__name{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.sup__name h3{font-size:1.2rem}
.sup__flag{font-size:.74rem;font-weight:700;color:var(--red);background:rgba(216,80,59,.09);padding:.3em .7em;border-radius:var(--pill);display:inline-flex;align-items:center;gap:.35em}
.sup p{color:var(--muted);font-size:.94rem;margin-block-start:.35rem}

/* --------------------------------------------------------- customers ---- */
.custs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-block-start:3rem}
.cust{aspect-ratio:3/2;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);display:grid;
  place-items:center;padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s;position:relative}
.cust:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.cust img{max-height:74px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.4s}
.cust:hover img{filter:none;opacity:1}
.cust__name{position:absolute;inset-block-end:.7rem;inset-inline:0;text-align:center;font-size:.74rem;color:var(--muted-2);font-weight:600;opacity:0;transition:opacity .3s}
.cust:hover .cust__name{opacity:1}
/* Touch devices never fire :hover — without this the client logos would stay
   greyed out and their names hidden forever on phones/tablets (home wall + customers
   page share these classes). Reveal both by default where hover is unavailable. */
@media(hover:none){
  .cust img{filter:none;opacity:1}
  .cust__name{opacity:1}
}

/* ---------------------------------------------------------- founder ----- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.founder__media{position:relative;max-width:360px;justify-self:center}
.founder__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%}
.founder__media::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,transparent 55%,rgba(216,80,59,.16));pointer-events:none}
.founder__frame{position:absolute;inset-block-end:-16px;inset-inline-end:-16px;width:100%;height:100%;border:2px solid var(--peach);border-radius:var(--radius-lg);z-index:-1}
.founder__bio{font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.75;color:var(--navy-700)}
.lang-ar .founder__bio{line-height:1.95}
.bg-navy .founder__bio{color:var(--on-dark-muted)}
.founder__sign{margin-block-start:1.8rem;display:flex;align-items:center;gap:1rem}
.founder__sign .line{width:44px;height:2px;background:var(--red)}
.founder__name{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--navy-800)}
.bg-navy .founder__name{color:#fff}
.founder__role{font-size:.9rem;color:var(--muted)}
.bg-navy .founder__role{color:var(--on-dark-muted)}

/* ---------------------------------------------------------- gallery ----- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:1rem;margin-block-start:3rem}
.gitem{position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow-sm)}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,18,48,.5),transparent 55%);opacity:0;transition:opacity .4s}
.gitem:hover img{transform:scale(1.06)}
.gitem:hover::after{opacity:1}
.gitem--wide{grid-column:span 3}
.gitem--tall{grid-column:span 3;grid-row:span 2}
.gitem--std{grid-column:span 3}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,12,30,.92);display:grid;place-items:center;padding:2rem;
  opacity:0;visibility:hidden;transition:opacity .35s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:var(--radius);box-shadow:var(--shadow-lg);transform:scale(.94);transition:transform .35s}
.lightbox.is-open img{transform:scale(1)}
.lightbox__close{position:absolute;inset-block-start:1.4rem;inset-inline-end:1.4rem;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:.25s}
.lightbox__close:hover{background:var(--red);transform:rotate(90deg)}

/* --------------------------------------------------------- cta band ----- */
.ctaband{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--red),var(--red-700));color:#fff;border-radius:var(--radius-xl);
  padding:clamp(2.5rem,6vw,4.5rem);text-align:center;box-shadow:var(--shadow-lg)}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 15% 10%,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.ctaband h2{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);position:relative}
.ctaband p{color:rgba(255,255,255,.9);margin-block:1rem 2rem;font-size:1.1rem;position:relative;max-width:52ch;margin-inline:auto}
.ctaband .btn--light{position:relative}

/* ----------------------------------------------------------- page hero -- */
.page-hero{position:relative;overflow:hidden;color:#fff;padding-block:clamp(3.5rem,9vw,6.5rem) clamp(3rem,7vw,5rem);
  background:radial-gradient(90% 120% at 88% 0%,rgba(216,80,59,.3),transparent 55%),linear-gradient(150deg,var(--navy-800),var(--navy-900))}
.page-hero__grid{position:absolute;inset:0;opacity:.35;background-image:
  linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask-image:radial-gradient(70% 90% at 70% 0%,#000,transparent);mask-image:radial-gradient(70% 90% at 70% 0%,#000,transparent)}
.page-hero__inner{position:relative;z-index:2}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-size:.88rem;color:var(--on-dark-muted);margin-block-end:1.1rem;font-weight:600}
.breadcrumb a:hover{color:var(--peach)}
.breadcrumb svg{width:15px;height:15px}
[dir="rtl"] .breadcrumb svg{transform:scaleX(-1)}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,5.5vw,3.8rem)}
.page-hero__sub{margin-block-start:1rem;color:rgba(237,239,247,.8);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:56ch}

/* ---------------------------------------------------------- contact ----- */
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact__info{display:grid;gap:1rem}
.cinfo{display:flex;gap:1.1rem;align-items:flex-start;padding:1.3rem 1.4rem;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease)}
.cinfo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cinfo__ic{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--navy-700),var(--navy-600))}
.cinfo h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-block-end:.2rem;font-weight:700}
.lang-ar .cinfo h3{letter-spacing:0;text-transform:none;font-size:.9rem}
.cinfo p,.cinfo a{color:var(--navy-800);font-weight:600}
.cinfo a:hover{color:var(--red)}

.form-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.6rem,3vw,2.4rem)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-block-end:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:.86rem;font-weight:700;color:var(--navy-700)}
.field input,.field textarea{width:100%;padding:.85em 1em;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--text);transition:border-color .25s,box-shadow .25s,background .25s}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px rgba(216,80,59,.12)}
.form-note{font-size:.86rem;color:var(--muted);margin-block-start:.4rem;display:flex;align-items:center;gap:.5em}
.form-msg{display:none;align-items:center;gap:.6em;padding:.9em 1.1em;border-radius:var(--radius-sm);
  background:rgba(47,163,107,.1);color:#1d7a4d;font-weight:600;margin-block-end:1.1rem}
.form-msg.show{display:flex}
.form-err{display:none;align-items:center;gap:.6em;padding:.9em 1.1em;border-radius:var(--radius-sm);
  background:rgba(216,80,59,.1);color:var(--red-700);font-weight:600;margin-block-end:1.1rem}
.form-err.show{display:flex}
.field--error input,.field--error textarea{border-color:var(--red)}
.field--error input:focus,.field--error textarea:focus{box-shadow:0 0 0 4px rgba(216,80,59,.14)}
.field__err{font-size:.82rem;color:var(--red-700);font-weight:600}
#contactForm.is-sending{opacity:.65;pointer-events:none}
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.form-card .btn{width:100%;margin-block-start:.4rem}

/* ------------------------------------------------------------ footer ---- */
.site-foot{position:relative;overflow:hidden;background:var(--navy-900);color:var(--on-dark);padding-block:clamp(3rem,6vw,4.5rem) 2rem;margin-block-start:0}
.site-foot__glow{position:absolute;inset-block-start:-40%;inset-inline-end:-10%;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,80,59,.22),transparent 65%);pointer-events:none}
.site-foot__grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem}
/* The lockup's navy wordmark would vanish on the navy footer, so seat it on a
   light chip — preserves the exact brand colours with guaranteed contrast. */
.brand--foot{background:#fff;padding:.7rem 1.05rem;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.brand--foot .brand__logo img{height:56px;filter:none}
.site-foot__tag{color:var(--on-dark-muted);font-size:.95rem;margin-block:1.2rem;max-width:38ch}
.foot-profile{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.9rem;color:var(--peach);
  padding:.6em 1.1em;border:1.5px solid var(--line-dark);border-radius:var(--pill);transition:.3s}
.foot-profile:hover{background:var(--peach);color:var(--navy-900);border-color:var(--peach)}
.site-foot__h{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-block-end:1.2rem;font-family:var(--font-body);font-weight:700}
.lang-ar .site-foot__h{letter-spacing:.02em;text-transform:none;font-size:.98rem}
.site-foot__col li{margin-block-end:.7rem}
.site-foot__col a{color:var(--on-dark-muted);font-size:.95rem;transition:color .25s}
.site-foot__col a:hover{color:#fff}
.site-foot__contact li{display:flex;align-items:flex-start;gap:.7em;color:var(--on-dark-muted);font-size:.95rem}
.site-foot__contact svg{color:var(--peach);flex-shrink:0;margin-block-start:2px}
.site-foot__contact a:hover{color:#fff}
.site-foot__bar{position:relative;margin-block-start:2.8rem;padding-block-start:1.6rem;border-block-start:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--on-dark-muted);font-size:.86rem}
/* developer credit — appended to the copyright line, company name as accent link */
.site-foot__dev::before{content:"·";margin-inline:.5rem;color:var(--on-dark-muted)}
.site-foot__dev a{color:var(--peach);font-weight:600;transition:color .25s}
.site-foot__dev a:hover,.site-foot__dev a:focus-visible{color:#fff}

/* to-top */
.to-top{position:fixed;inset-block-end:1.5rem;inset-inline-end:1.5rem;z-index:90;width:50px;height:50px;border-radius:50%;
  background:var(--navy-800);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s var(--ease)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--red)}
/* arrow icon rotated to point up ("back to top") — identical in LTR and RTL */
.to-top__i{transform:rotate(-90deg)}

/* floating WhatsApp button ------------------------------------------------
   Fixed, site-wide. Sits on the opposite bottom corner from .to-top
   (inset-inline-START here vs inset-inline-END there) so the two never
   collide in either LTR or RTL. Collapsed = a circular icon; on hover/focus
   it expands into a labelled pill. */
.wa-fab{position:fixed;inset-block-end:1.5rem;inset-inline-start:1.5rem;z-index:90;
  display:inline-flex;align-items:center;height:56px;border-radius:999px;
  background:#25d366;color:#fff;text-decoration:none;
  box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.wa-fab:hover,.wa-fab:focus-visible{background:#1da851;box-shadow:0 14px 34px rgba(37,211,102,.5);transform:translateY(-2px)}
.wa-fab__i{flex:0 0 56px;width:56px;height:56px;padding:13px;box-sizing:border-box}
.wa-fab__label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;line-height:56px;
  font-weight:700;font-size:.95rem;
  transition:max-width .45s var(--ease),opacity .3s var(--ease),padding-inline-end .45s var(--ease)}
/* Reveal the label only on real hover-capable pointers (desktop) — touch keeps the tidy circle. */
@media(hover:hover){
  .wa-fab:hover .wa-fab__label,.wa-fab:focus-visible .wa-fab__label{max-width:16rem;opacity:1;padding-inline-end:1.35rem}
}
/* Calm, slow presence pulse (a soft expanding ring) — no layout shift, no flash. */
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waPulse 2.6s var(--ease) infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.wa-fab,.wa-fab *{transition:none}.wa-fab::before{animation:none}}
@media(max-width:600px){
  .wa-fab{height:52px;inset-block-end:1.1rem;inset-inline-start:1.1rem}
  .wa-fab__i{flex-basis:52px;width:52px;height:52px;padding:12px}
  .wa-fab__label{line-height:52px}
}

/* ------------------------------------------------------- responsive ----- */
@media(max-width:1100px){
  /* The horizontal nav stops fitting next to the brand + CTA well before the
     old 860px switch: English "Get in touch" clips ~1040px and the Arabic
     links wrap ~940px. Fold into the burger menu here instead. */
  .nav,.nav-cta{display:none}
  .burger{display:grid}
  .site-head__row{min-height:66px}
  /* Bar is shorter here (66px); cap the enlarged brand so it still fits it. */
  .brand__logo img{height:clamp(48px,5.4vw,54px)}
}
@media(max-width:1024px){
  .hero__inner{grid-template-columns:1fr;gap:2.5rem}
  /* visual stacks above the headline here, so cap the wall height — a full
     552px stage would push the value proposition below the fold */
  .hero__visual{max-width:392px;grid-row:1}
  .hero__stage{height:428px}
  .pgrid,.feats,.custs{grid-template-columns:repeat(3,1fr)}
  .about__grid,.founder,.contact__grid{grid-template-columns:1fr}
  .founder__media{max-width:320px}
  .sups{grid-template-columns:1fr}
}
@media(max-width:860px){
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:1rem 0}
  .stat:nth-child(2)::after{display:none}
  .cats{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gitem--wide,.gitem--std{grid-column:span 1}
  /* 3 items in a 2-col grid leaves a hole; make the tall one a full-width
     banner up top so the two standard tiles fill the row below it cleanly */
  .gitem--tall{grid-column:span 2;grid-row:span 1}
}
@media(max-width:620px){
  .pgrid,.feats,.custs{grid-template-columns:repeat(2,1fr)}
  .hero__stage{height:360px}
  .hero__caption-n{font-size:2.3rem}
  .vmv{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .site-foot__grid{grid-template-columns:1fr 1fr}
  .site-foot__brand{grid-column:1/-1}
  .stats__grid{gap:1.4rem 0}
  .feats{gap:1rem}
  .ctaband{border-radius:var(--radius-lg)}
}
@media(max-width:400px){
  .pgrid,.feats,.custs{grid-template-columns:1fr}
  .feats{gap:.9rem}
  /* full-width logo card: keep it a compact bar, not a tall sparse box */
  .cust{aspect-ratio:5/2}
  /* let the long EN accent phrase ("a stronger harvest") wrap instead of being
     clipped by the hero's overflow:hidden on the narrowest phones */
  .hero h1 .accent{white-space:normal}
}

/* =========================================================================
   PRODUCT DETAIL PAGE (product.php)  +  clickable product-card affordance
   ========================================================================= */

/* --- product card is now a full-card link ------------------------------- */
.pcard__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.pcard__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-lg)}
.pcard__body{flex:1 1 auto}
.pcard__more{display:inline-flex;align-items:center;gap:.45em;margin-block-start:auto;padding-block-start:.85rem;
  border-block-start:1px solid var(--line-soft);color:var(--accent);font-weight:700;font-size:.9rem}
.pcard__more-ic{transition:transform .35s var(--ease)}
[dir="rtl"] .pcard__more-ic{transform:scaleX(-1)}
.pcard:hover .pcard__more-ic{transform:translateX(3px)}
[dir="rtl"] .pcard:hover .pcard__more-ic{transform:scaleX(-1) translateX(3px)}

/* --- hero -------------------------------------------------------------- */
.page-hero--product{padding-block:clamp(2.4rem,6vw,4rem) clamp(2.6rem,6vw,4.5rem)}
.phero__body{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-block-start:1.4rem}
.phero__info{min-width:0}
.phero__cat{display:inline-flex;align-items:center;gap:.5em;padding:.42em 1em;border-radius:var(--pill);
  background:rgba(255,255,255,.08);border:1px solid var(--line-dark);color:#fff;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.05em;transition:background .25s}
.phero__cat:hover{background:rgba(255,255,255,.16)}
.phero__cat svg{color:var(--accent)}
.lang-ar .phero__cat{text-transform:none;letter-spacing:0;font-size:.9rem}
.phero__title{margin-block-start:1rem}
.phero__ai{display:inline-flex;align-items:center;gap:.55em;margin-block-start:.9rem;color:rgba(237,239,247,.92);
  font-weight:600;font-size:clamp(1.02rem,1.7vw,1.22rem)}
.phero__ai svg{color:var(--accent);flex-shrink:0}
.phero__facts{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-start:1.6rem}
.phero__fact{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--radius-sm);padding:.55rem .95rem}
.phero__fact dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--on-dark-muted);font-weight:700}
.phero__fact dd{color:#fff;font-weight:700;font-size:.96rem;margin-block-start:.18rem}
.lang-ar .phero__fact dt{text-transform:none;letter-spacing:0;font-size:.8rem}
.phero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-block-start:2rem}
.page-hero--product .btn--ghost{--fg:#fff;border-color:var(--line-dark)}
.page-hero--product .btn--ghost:hover{background:#fff;--fg:var(--navy-800);border-color:#fff}

.phero__media{position:relative;display:grid;place-items:center}
.phero__plate{position:relative;width:100%;max-width:420px;aspect-ratio:1;border-radius:var(--radius-xl);
  background:linear-gradient(160deg,#fff,var(--cream));box-shadow:var(--shadow-lg);display:grid;place-items:center;
  padding:clamp(1.6rem,4vw,2.6rem);overflow:hidden}
.phero__plate::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 22%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);pointer-events:none}
.phero__img{position:relative;display:block;width:100%;height:100%}
.phero__img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(20,26,74,.18))}
.phero__badge{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;z-index:2;background:var(--accent);color:#fff;
  font-weight:800;font-size:.8rem;letter-spacing:.05em;padding:.4em .8em;border-radius:var(--pill);box-shadow:var(--shadow)}

/* --- body: usage + aside ----------------------------------------------- */
.prod-detail__grid{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.prod-detail__main{min-width:0}
.prod-detail__h{display:flex;align-items:center;gap:.6em;font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--navy-800);margin-block-end:1.6rem}
.prod-detail__h svg{color:var(--accent);flex-shrink:0}
.prod-usage{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.prod-usage li{display:flex;align-items:flex-start;gap:.9rem;padding-block:1rem;line-height:1.65;color:var(--text)}
.prod-usage li:not(:last-child){border-block-end:1px solid var(--line-soft)}
.prod-usage__ic{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-block-start:1px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.prod-soon{display:flex;align-items:center;gap:.7em;padding:1.4rem 1.5rem;border-radius:var(--radius);
  background:var(--cream);border:1px dashed var(--line);color:var(--muted);font-weight:600}
.prod-soon svg{color:var(--accent);flex-shrink:0}

.prod-detail__aside{position:sticky;inset-block-start:90px;display:flex;flex-direction:column;gap:1.2rem}
.prod-quick{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:1.4rem 1.5rem;border-inline-start:4px solid var(--accent)}
.prod-quick__row{display:flex;align-items:flex-start;gap:.9rem}
.prod-quick__row+.prod-quick__row{margin-block-start:1rem;padding-block-start:1rem;border-block-start:1px solid var(--line-soft)}
.prod-quick__ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.prod-quick__tx{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.prod-quick__k{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:700}
.prod-quick__v{color:var(--navy-800);font-weight:700;font-size:1.02rem;line-height:1.4}
.lang-ar .prod-quick__k{text-transform:none;letter-spacing:0;font-size:.84rem}

.prod-spec{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.4rem 1.5rem}
.prod-spec__h{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-block-end:1rem;
  font-family:var(--font-body);font-weight:700}
.lang-ar .prod-spec__h{text-transform:none;letter-spacing:0;font-size:.98rem}
.prod-spec__row{display:flex;justify-content:space-between;gap:1.2rem;padding-block:.75rem}
.prod-spec__row:not(:last-child){border-block-end:1px solid var(--line-soft)}
.prod-spec__row dt{color:var(--muted);font-size:.9rem;flex-shrink:0}
.prod-spec__row dd{color:var(--navy-800);font-weight:700;font-size:.92rem;text-align:end}

.prod-enquire{display:flex;align-items:center;gap:.9rem;padding:1.2rem 1.4rem;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));color:#fff;box-shadow:var(--shadow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.prod-enquire:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.prod-enquire__ic{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--peach)}
.prod-enquire__tx{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.prod-enquire__t{font-weight:700;font-size:1rem}
.prod-enquire__s{color:var(--on-dark-muted);font-size:.85rem}
.prod-enquire__ar{margin-inline-start:auto;flex-shrink:0;transition:transform .35s var(--ease)}
[dir="rtl"] .prod-enquire__ar{transform:scaleX(-1)}
.prod-enquire:hover .prod-enquire__ar{transform:translateX(4px)}
[dir="rtl"] .prod-enquire:hover .prod-enquire__ar{transform:scaleX(-1) translateX(4px)}

/* --- back bar ---------------------------------------------------------- */
.prod-backbar{background:var(--cream);padding-block:2rem 3rem}
.prod-back{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;color:var(--navy-800);
  transition:gap .25s var(--ease),color .25s}
.prod-back:hover{color:var(--red);gap:.85rem}
.prod-back__ic{transform:scaleX(-1)}
[dir="rtl"] .prod-back__ic{transform:none}

/* --- 404 / not found --------------------------------------------------- */
.prod-missing{max-width:34rem;margin-inline:auto;text-align:center;padding-block:clamp(1rem,4vw,3rem)}
.prod-missing__code{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,14vw,7rem);
  line-height:1;color:var(--navy-800);opacity:.12}
.prod-missing__title{margin-block:.4rem .8rem}
.prod-missing__text{color:var(--muted);margin-block-end:2rem;font-size:1.05rem}

@media(max-width:900px){
  .phero__body{grid-template-columns:1fr;gap:2.2rem}
  .phero__plate{max-width:330px}
  .prod-detail__grid{grid-template-columns:1fr;gap:2.4rem}
  .prod-detail__aside{position:static}
}
@media(max-width:560px){
  .phero__cta .btn,.prod-missing .btn{width:100%;justify-content:center}
  .phero__facts{gap:.55rem}
}

/* ---------------------------------------------- page transition loader -- */
/* Feedback while navigating between pages (this site does full page loads):
   a top progress bar (immediate) + a gently-delayed branded veil, so quick
   loads don't flash it. Direction-agnostic; the global reduced-motion rule
   below strips the spin/pulse automatically. */
.pageload{position:fixed;inset:0;z-index:300;pointer-events:none}
.pageload__bar{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:320;opacity:0;transition:opacity .25s var(--ease)}
.pageload__bar span{display:block;height:100%;width:0;border-start-end-radius:3px;border-end-end-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--peach));
  box-shadow:0 0 8px rgba(216,80,59,.55),0 1px 4px rgba(216,80,59,.6);
  transition:width .28s var(--ease)}
.pageload__veil{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(14,18,48,.6);backdrop-filter:blur(5px) saturate(120%);-webkit-backdrop-filter:blur(5px) saturate(120%);
  opacity:0;pointer-events:none;transition:opacity .36s var(--ease) .14s}
.pageload__box{position:relative;display:grid;place-items:center;width:84px;height:84px}
.pageload__ring{position:absolute;inset:0;border-radius:50%;border:2.5px solid rgba(241,196,160,.2);
  border-inline-start-color:var(--peach);border-block-start-color:var(--peach);
  animation:pl-spin .9s linear infinite}
.pageload__logo{width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));animation:pl-pulse 1.7s var(--ease) infinite}
body.is-loading .pageload__bar{opacity:1}
body.is-loading .pageload__veil{opacity:1;pointer-events:auto}
body.is-loaded .pageload__bar{opacity:0}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.7}}

/* ------------------------------------------------- reduced motion ------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}