/* ═══════════════════════════════════════════════════════════════════
   AL FAROOQUE MANUFACTURING — UNIFIED THEME SYSTEM v3.0
   Dark (default) + Premium Light | Full component coverage
   ═══════════════════════════════════════════════════════════════════ */

/* ── Master transition ── */
*, *::before, *::after {
  transition:
    background-color 0.45s cubic-bezier(0.4,0,0.2,1),
    background     0.45s cubic-bezier(0.4,0,0.2,1),
    color          0.45s cubic-bezier(0.4,0,0.2,1),
    border-color   0.45s cubic-bezier(0.4,0,0.2,1),
    box-shadow     0.45s cubic-bezier(0.4,0,0.2,1),
    fill           0.45s cubic-bezier(0.4,0,0.2,1),
    stroke         0.45s cubic-bezier(0.4,0,0.2,1);
}
.orb,.geo,.ray,.pt,.hero-orbit,.btn,.svc-card,.machine-card,
.cert-card,.gal-item,.div-row,.pillar,.float-chip,
.nav-logo img,.marquee-track,.reveal { transition-property: none; }
.btn {
  transition:
    transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.3s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease;
}

/* ══ DARK TOKENS (default) — warm olive-branded dark, matches the
   light-luxury palette's accent (olive instead of the old teal) ══ */
:root {
  --bg:        #14140F;
  --bg-2:      #1B1B14;
  --bg-3:      #22221A;
  --bg-card:   rgba(255,255,255,0.05);
  --bg-card-2: rgba(255,255,255,0.08);
  --bg-card-3: rgba(255,255,255,0.12);
  --bg-teal:   rgba(140,160,91,0.09);
  --bg-teal-2: rgba(140,160,91,0.16);
  --bd:        rgba(255,255,255,0.08);
  --bd-2:      rgba(255,255,255,0.14);
  --bd-3:      rgba(255,255,255,0.22);
  --bd-teal:   rgba(140,160,91,0.34);
  --bd-teal-2: rgba(140,160,91,0.60);
  --tx:        #F5F3EE;
  --tx-90:     rgba(245,243,238,0.90);
  --tx-70:     rgba(245,243,238,0.70);
  --tx-40:     rgba(245,243,238,0.40);
  --tx-2:      #D6D2C4;
  --tx-3:      #A8A497;
  --tx-4:      #79766B;
  --pr:        #8CA05B;
  --pr-2:      #A3B873;
  --ac:        #B9CC8B;
  --ac-2:      #CFDDA8;
  --sh-sm:     0 2px 12px rgba(0,0,0,0.40);
  --sh-md:     0 8px 32px rgba(0,0,0,0.50);
  --sh-lg:     0 20px 60px rgba(0,0,0,0.60);
  --sh-xl:     0 40px 100px rgba(0,0,0,0.65);
  --sh-btn:    0 4px 24px rgba(140,160,91,0.42);
  --sh-btn-h:  0 10px 36px rgba(140,160,91,0.62);
  --gw-xs:     0 0 12px rgba(140,160,91,0.28);
  --gw-sm:     0 0 24px rgba(140,160,91,0.36);
  --gw-md:     0 0 55px rgba(140,160,91,0.24), 0 0 110px rgba(140,160,91,0.10);
  --gw-lg:     0 0 80px rgba(140,160,91,0.35), 0 0 160px rgba(140,160,91,0.14);
  --nav-bg:    rgba(20,20,15,0.55);
  --nav-bg-s:  rgba(20,20,15,0.92);
  --nav-bd:    rgba(255,255,255,0.07);
  --fm-bg:     rgba(255,255,255,0.04);
  --fm-bd:     rgba(255,255,255,0.09);
  --fm-ph:     #57544A;
  --sc-t:      #8CA05B;
  --env-orb1:  rgba(140,160,91,0.16);
  --env-orb2:  rgba(163,184,115,0.10);
  --env-grid:  rgba(140,160,91,0.032);
  --env-ray:   rgba(140,160,91,0.22);
  --env-pt:    rgba(140,160,91,0.55);

  /* New named tokens from the brief, for use by product/e-commerce
     components (badges, success states) that don't map to an existing
     --pr/--ac slot. */
  --terracotta:      #D98A67;
  --terracotta-bg:   rgba(217,138,103,0.14);
  --success:         #9BC378;
  --success-bg:      rgba(155,195,120,0.14);
  --beige:           #3A362B;
}

/* ══ LIGHT LUXURY TOKENS ══
   Pure white / warm light gray / olive accent — the site's default
   theme. Kept the same variable names as the dark tokens above so
   every consumer across nav/hero/cards/forms/footer works unchanged. */
:is(html.light, body.light) {
  --bg:        #FFFFFF;
  --bg-2:      #F7F5F1;
  --bg-3:      #F1EEE7;
  --bg-card:   #FFFFFF;
  --bg-card-2: #FFFFFF;
  --bg-card-3: #FFFFFF;
  --bg-teal:   rgba(107,122,79,0.055);
  --bg-teal-2: rgba(107,122,79,0.10);
  --bd:        #E5E2DD;
  --bd-2:      #D8D4CC;
  --bd-3:      #C9C4B7;
  --bd-teal:   rgba(107,122,79,0.24);
  --bd-teal-2: rgba(107,122,79,0.46);
  --tx:        #1A1A18;
  --tx-90:     rgba(26,26,24,0.90);
  --tx-70:     rgba(26,26,24,0.70);
  --tx-40:     rgba(26,26,24,0.40);
  --tx-2:      #4A4A45;
  --tx-3:      #6B6B63;
  --tx-4:      #8C8A80;
  --pr:        #6B7A4F;
  --pr-2:      #7D8F5C;
  --ac:        #8A9A6B;
  --ac-2:      #9DAE7E;
  --sh-sm:     0 1px 2px rgba(26,26,24,0.04), 0 4px 12px rgba(26,26,24,0.05);
  --sh-md:     0 2px 6px rgba(26,26,24,0.05), 0 12px 28px rgba(26,26,24,0.07);
  --sh-lg:     0 4px 10px rgba(26,26,24,0.06), 0 24px 54px rgba(26,26,24,0.09);
  --sh-xl:     0 8px 18px rgba(26,26,24,0.07), 0 44px 96px rgba(26,26,24,0.11);
  --sh-btn:    0 2px 8px rgba(107,122,79,0.22), 0 8px 20px rgba(107,122,79,0.18);
  --sh-btn-h:  0 4px 14px rgba(107,122,79,0.30), 0 12px 30px rgba(107,122,79,0.26);
  --gw-xs:     0 0 14px rgba(107,122,79,0.12);
  --gw-sm:     0 0 24px rgba(107,122,79,0.14);
  --gw-md:     0 0 40px rgba(107,122,79,0.10), 0 0 80px rgba(107,122,79,0.05);
  --gw-lg:     0 0 56px rgba(107,122,79,0.13), 0 0 110px rgba(107,122,79,0.06);
  --nav-bg:    rgba(255,255,255,0.72);
  --nav-bg-s:  rgba(255,255,255,0.96);
  --nav-bd:    rgba(229,226,221,0.75);
  --fm-bg:     #FAF9F6;
  --fm-bd:     #E5E2DD;
  --fm-ph:     #A6A399;
  --sc-t:      #6B7A4F;
  --env-orb1:  rgba(107,122,79,0.045);
  --env-orb2:  rgba(201,168,118,0.035);
  --env-grid:  rgba(26,26,24,0);
  --env-ray:   rgba(107,122,79,0.05);
  --env-pt:    rgba(107,122,79,0.20);

  /* New named tokens from the brief, for use by product/e-commerce
     components (badges, success states) that don't map to an existing
     --pr/--ac slot. */
  --terracotta:      #BC6B4E;
  --terracotta-bg:   rgba(188,107,78,0.10);
  --success:         #7FA65C;
  --success-bg:      rgba(127,166,92,0.10);
  --beige:           #E8DFD0;
}

/* ══ BASE ══ */
body                    { background-color: var(--bg); color: var(--tx); }
:is(html.light, body.light)              { background-color: #F7F5F1; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--sc-t); }
::selection             { background: rgba(107,122,79,0.25); color: var(--tx); }

/* ══ NAV ══ */
.nav                    { background: var(--nav-bg); border-bottom-color: var(--nav-bd); }
.nav.scrolled           { background: var(--nav-bg-s); border-color: var(--bd-2); box-shadow: var(--sh-md); }
.nav-brand-name         { color: var(--tx); }
.nav-brand-sub          { color: var(--pr-2); }
.nav-links a            { color: var(--tx-3); }
.nav-links a:hover      { color: var(--tx); background: var(--bg-card); }
.nav-links a.active     { color: var(--pr-2); }
.nav-links a.active::after { background: var(--pr-2); }
.nav-cta                { background: var(--bg-teal); border-color: var(--bd-teal); color: var(--pr-2); }
.nav-cta:hover          { background: var(--bg-teal-2); border-color: var(--bd-teal-2); color: var(--tx); box-shadow: var(--gw-sm); }
.nav-burger span        { background: var(--tx-3); }
.nav-mobile             { background: var(--nav-bg-s); border-color: var(--bd); }
.nav-mobile a           { color: var(--tx-3); border-color: var(--bd); }
.nav-mobile a:hover     { color: var(--pr-2); }

/* ══ ENV ══ */
.bg-grad {
  background:
    radial-gradient(ellipse 90% 70% at 8% 15%, var(--env-orb1) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 95% 85%, var(--env-orb2) 0%, transparent 55%),
    var(--bg);
}
.bg-grid {
  background-image:
    linear-gradient(var(--env-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--env-grid) 1px, transparent 1px);
}
.orb-1  { background: radial-gradient(circle, var(--env-orb1) 0%, transparent 70%); }
.orb-2  { background: radial-gradient(circle, var(--env-orb2) 0%, transparent 70%); }
.orb-3  { background: radial-gradient(circle, rgba(107,122,79,0.10) 0%, transparent 70%); }
:is(html.light, body.light) .orb-3 { background: radial-gradient(circle, rgba(107,122,79,0.05) 0%, transparent 70%); }
.geo    { border-color: rgba(107,122,79,0.07); }
:is(html.light, body.light) .geo { border-color: rgba(107,122,79,0.09); }
.ray    { background: linear-gradient(to bottom, transparent, var(--env-ray), transparent); }
.pt     { background: var(--env-pt); }

/* ══ EYEBROW ══ */
.eyebrow       { color: var(--pr-2); }
.eyebrow::before { background: var(--pr-2); }

/* ══ TYPE ══ */
.section-title .accent {
  background: linear-gradient(100deg, var(--pr-2), var(--ac-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-title .muted { color: var(--tx-40); }
.section-body   { color: var(--tx-3); }
.hero-body      { color: var(--tx-3); }
.about-body     { color: var(--tx-3); }
.hero-headline .t { color: var(--tx); }
.hero-headline .a {
  background: linear-gradient(100deg, var(--pr-2), var(--ac-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-headline .d { color: var(--tx-40); }

/* ══ HERO ══ */
.stat-v         { color: var(--tx); }
.stat-v em      { color: var(--pr-2); }
.stat-l         { color: var(--tx-4); }
.stat-i         { border-color: var(--bd); }
.hero-eyebrow   { background: var(--bg-teal); border-color: var(--bd-teal); }
.hero-eyebrow span { color: var(--pr-2); }
.hero-card      { background: var(--bg-card-2); border-color: var(--bd-2); box-shadow: var(--sh-lg), var(--gw-md); }
:is(html.light, body.light) .hero-card { background: rgba(255,255,255,0.88); box-shadow: var(--sh-lg); }
.hero-card-top-glow { background: radial-gradient(ellipse 80% 40% at 50% 0%, var(--bg-teal-2) 0%, transparent 55%); }
.hero-card-lbl  { color: var(--pr-2); }
.hero-card-img-overlay { background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%); }
:is(html.light, body.light) .hero-card-img-overlay { background: linear-gradient(to bottom, transparent 30%, rgba(255,255,255,0.88) 100%); }
.div-row        { background: var(--bg-card); border-color: var(--bd); }
.div-row:hover  { background: var(--bg-teal); border-color: var(--bd-teal); }
.div-name       { color: var(--tx); }
.div-sub        { color: var(--tx-4); }
.div-icon       { background: var(--bg-teal); border-color: var(--bd-teal); }
.div-icon svg   { stroke: var(--pr-2); }
.div-pill       { color: var(--pr-2); background: var(--bg-teal); border-color: var(--bd-teal); }
.chip-1         { background: var(--bg-teal-2); border-color: var(--bd-teal); }
.chip-2         { background: var(--bg-card-2); border-color: var(--bd-2); }
.chip-lbl       { color: var(--tx-4); }
.chip-val       { color: var(--tx); }
.chip-val em    { color: var(--pr-2); }
.chip-sub       { color: var(--tx-4); }

/* ══ BUTTONS ══ */
.btn-primary    { background: linear-gradient(135deg, var(--pr), #006478); border-color: var(--pr-2); box-shadow: var(--sh-btn); color: #fff; }
.btn-primary:hover { background: linear-gradient(135deg, var(--pr-2), var(--pr)); box-shadow: var(--sh-btn-h); }
.btn-outline    { border-color: var(--bd-teal); color: var(--pr-2); }
.btn-outline:hover { background: var(--bg-teal-2); border-color: var(--bd-teal-2); color: var(--tx); box-shadow: var(--gw-sm); }
.btn-ghost      { background: var(--bg-card); border-color: var(--bd-2); color: var(--tx-70); }
.btn-ghost:hover { background: var(--bg-card-3); border-color: var(--bd-3); color: var(--tx); }

/* ══ TAGS ══ */
.tag { border-color: var(--bd-teal); background: var(--bg-teal); color: var(--pr-2); }

/* ══ MARQUEE ══ */
.marquee-strip  { background: var(--bg-card); border-color: var(--bd); }
.marquee-item   { color: var(--tx-4); border-color: var(--bd); }
.marquee-item .dot { background: var(--pr); }

/* ══ SERVICE CARDS ══ */
.svc-card       { background: var(--bg-card); border-color: var(--bd); }
.svc-card:hover { border-color: var(--bd-teal); box-shadow: var(--sh-lg), var(--gw-sm); }
.svc-icon       { background: var(--bg-teal); border-color: var(--bd-teal); }
.svc-card:hover .svc-icon { background: var(--bg-teal-2); border-color: var(--bd-teal-2); box-shadow: var(--gw-xs); }
.svc-icon svg   { stroke: var(--pr-2); }
.svc-title      { color: var(--tx); }
.svc-desc       { color: var(--tx-4); }
.svc-link       { color: var(--pr-2); }
.svc-num        { color: var(--bg-teal-2); }
.svc-glow       { background: radial-gradient(ellipse 80% 50% at 50% -15%, var(--bg-teal-2) 0%, transparent 55%); }
:is(html.light, body.light) .svc-card { box-shadow: var(--sh-sm); }
:is(html.light, body.light) .svc-card:hover { box-shadow: var(--sh-lg), var(--gw-sm); }

/* ══ MACHINES ══ */
.machine-card   { background: var(--bg-card); border-color: var(--bd); }
.machine-card:hover { border-color: var(--bd-teal); box-shadow: var(--sh-md), var(--gw-xs); }
.machine-name   { color: var(--tx); }
.machine-desc   { color: var(--tx-4); }
.machine-img    { background: var(--bg-2); }
:is(html.light, body.light) .machine-card { box-shadow: var(--sh-sm); }
:is(html.light, body.light) .machine-card:hover { box-shadow: var(--sh-md), var(--gw-xs); }

/* ══ STATS ══ */
.stats-grid     { background: var(--bd); }
.stat-box       { background: var(--bg); }
.stat-box:hover { background: var(--bg-teal); }
.stat-box-v     { color: var(--tx); }
.stat-box-v em  { color: var(--pr-2); }
.stat-box-l     { color: var(--tx-4); }
:is(html.light, body.light) .stat-box { background: rgba(255,255,255,0.65); }

/* ══ CLIENTS ══ */
/* Dark mode — glass tokens already set in main.css (rgba whites on dark bg) */
.client-card        { box-shadow: 0 4px 16px rgba(26,26,24,0.22), 0 1px 0 rgba(255,255,255,0.10) inset; }
.client-card:hover  {
  box-shadow:
    0 16px 48px rgba(26,26,24,0.35),
    0 0 32px rgba(107,122,79,0.22),
    0 1px 0 rgba(255,255,255,0.18) inset;
}
/* Light mode — brighter frosted glass */
:is(html.light, body.light) .client-card {
  background: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 8px 28px rgba(15,23,42,0.05),
              0 1px 0 rgba(255,255,255,0.90) inset;
}
:is(html.light, body.light) .client-card:hover {
  background: rgba(255,255,255,0.92);
  border-color: rgba(107,122,79,0.35);
  box-shadow:
    0 8px 32px rgba(15,23,42,0.10),
    0 20px 48px rgba(15,23,42,0.07),
    0 0 28px rgba(107,122,79,0.12),
    0 1px 0 rgba(255,255,255,0.95) inset;
}
/* ═══════ */

/* ══ CERTS ══ */
.cert-card      { background: var(--bg-card); border-color: var(--bd); }
.cert-card:hover { border-color: var(--bd-teal); box-shadow: var(--sh-md); }
.cert-ico       { background: var(--bg-teal); border-color: var(--bd-teal); }
.cert-ico svg   { stroke: var(--pr-2); }
.cert-name      { color: var(--tx); }
.cert-auth      { color: var(--tx-4); }
.cert-view      { color: var(--pr-2); }
:is(html.light, body.light) .cert-card { box-shadow: var(--sh-sm); }

/* ══ GALLERY ══ */
.flt            { background: var(--bg-card); border-color: var(--bd); color: var(--tx-3); }
.flt:hover      { color: var(--tx); border-color: var(--bd-2); background: var(--bg-card-2); }
.flt.active     { background: var(--bg-teal-2); border-color: var(--bd-teal); color: var(--pr-2); box-shadow: var(--gw-xs); }
.gal-overlay    { background: linear-gradient(to top, rgba(26,26,24,0.80), transparent 55%); }
:is(html.light, body.light) .gal-overlay { background: linear-gradient(to top, rgba(15,23,42,0.75), transparent 55%); }

/* ══ ABOUT ══ */
.pillar         { background: var(--bg-card); border-color: var(--bd); }
.pillar:hover   { background: var(--bg-teal); border-color: var(--bd-teal); }
.pillar-name    { color: var(--tx); }
.pillar-txt     { color: var(--tx-4); }
.about-visual   { border-color: var(--bd); }
.about-visual-overlay { background: linear-gradient(to top, var(--bg) 0%, transparent 100%); }
:is(html.light, body.light) .about-visual-overlay { background: linear-gradient(to top, rgba(236,239,243,0.97) 0%, transparent 100%); }
.ov-v           { color: var(--tx); }
.ov-v em        { color: var(--pr-2); }
.ov-l           { color: var(--tx-4); }

/* ══ CONTACT ══ */
.cinfo-ico      { background: var(--bg-teal); border-color: var(--bd-teal); }
.cinfo-ico svg  { stroke: var(--pr-2); }
.cinfo-lbl      { color: var(--pr-2); }
.cinfo-val      { color: var(--tx); }
.cinfo-sub      { color: var(--tx-4); }
.contact-form-wrap { background: var(--bg-card-2); border-color: var(--bd-2); backdrop-filter: blur(24px); }
:is(html.light, body.light) .contact-form-wrap { background: rgba(255,255,255,0.92); box-shadow: var(--sh-lg); }
.form-lbl       { color: var(--tx-3); }
.form-ctrl      { background: var(--fm-bg); border-color: var(--fm-bd); color: var(--tx); }
.form-ctrl::placeholder { color: var(--fm-ph); }
.form-ctrl:focus { border-color: var(--bd-teal); box-shadow: 0 0 0 3px var(--bg-teal); }
.form-select option { background: var(--bg-2); color: var(--tx); }

/* ══ V2030 ══ */
.v2030          { border-color: var(--bd); background: radial-gradient(ellipse 80% 60% at 50% 50%, var(--bg-teal) 0%, transparent 65%); }
:is(html.light, body.light) .v2030 { background: linear-gradient(135deg, #ecfeff, #f0fdf4); }
.v2030-badge    { background: var(--bg-teal); border-color: var(--bd-teal); color: var(--pr-2); }

/* ══ PAGE HERO ══ */
.page-hero-body { color: var(--tx-3); }
.page-hero-title span { background: linear-gradient(100deg, var(--pr-2), var(--ac-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ══ SERVICES PAGE ══ */
:is(html.light, body.light) .svc-hero-bg { background: linear-gradient(160deg, rgba(107,122,79,0.06) 0%, rgba(247,250,252,0.80) 70%); }
.process-step   { background: var(--bg); }
.process-step:hover { background: var(--bg-teal); }
:is(html.light, body.light) .process-step { background: rgba(255,255,255,0.62); }
:is(html.light, body.light) .process-step:hover { background: rgba(107,122,79,0.06); }
.ps-name        { color: var(--tx); }
.ps-desc        { color: var(--tx-4); }
.ps-num         { color: rgba(107,122,79,0.25); }
.cap-item       { background: var(--bg-card); border-color: var(--bd); }
.cap-item:hover { border-color: var(--bd-teal); background: var(--bg-teal); }
.cap-text       { color: var(--tx-3); }

/* ══ FOOTER — fully styled with fixed literals in main.css (always
   dark by design, independent of the site's light/dark toggle) ══ */

/* ══ LIGHTBOX ══ */
.lightbox       { background: rgba(7,9,12,0.97); }
:is(html.light, body.light) .lightbox { background: rgba(15,23,42,0.96); }
.lb-close       { background: var(--bg-card-2); border-color: var(--bd-2); color: var(--tx); }

/* ══ PRELOADER ══ */
#preloader      { background: var(--bg); }
:is(html.light, body.light) #preloader { background: #F7F5F1; }
.preloader-bar  { background: var(--bd); }
.preloader-text { color: var(--tx-4); }
#progress-bar   { background: linear-gradient(90deg, var(--pr), var(--ac-2)); box-shadow: 0 0 8px var(--bg-teal-2); }

/* ══ SECTION BACKGROUNDS (light) — overridden by premium section below ══ */
:is(html.light, body.light)                      { background-color: #F7F5F1; }
:is(html.light, body.light) #home                { background: linear-gradient(180deg, #FBFAF8 0%, #F7F5F1 55%, #F1EEE7 100%); }
:is(html.light, body.light) #services            { background: #FBFAF8; }
:is(html.light, body.light) #services-preview    { background: #FBFAF8; }
:is(html.light, body.light) #clients             { background: #FAF9F6; }
:is(html.light, body.light) #gallery-preview     { background: #F7F5F1; }
:is(html.light, body.light) #certifications      { background: #FBFAF8; }
:is(html.light, body.light) #about               { background: #F1EEE7; }
:is(html.light, body.light) #certs-section       { background: #F7F5F1; }

/* ══════════════════════════════════════
   FLOATING GLASS CONTROLS
   Theme toggle + Language switcher
   ══════════════════════════════════════ */

/* Cluster in desktop nav */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  flex-shrink: 0;
}
html[dir="rtl"] .nav-controls { margin-left: 0; margin-right: 10px; }

/* Floating cluster (mobile) */
.float-controls {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 600;
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
html[dir="rtl"] .float-controls { right: auto; left: 20px; align-items: flex-start; }

@media (max-width: 768px) {
  .nav-controls    { display: none; }
  .float-controls  { display: flex; }
}

/* ── Shared glass pill ── */
.glass-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 40px;
  border: 1px solid var(--bd-2);
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--tx-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(26,26,24,0.22);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
:is(html.light, body.light) .glass-ctrl {
  background: rgba(255,255,255,0.78);
  border-color: rgba(26,26,24,0.10);
  box-shadow: 0 4px 16px rgba(26,26,24,0.09);
}
.glass-ctrl:hover {
  background: var(--bg-teal-2);
  border-color: var(--bd-teal);
  color: var(--tx);
  box-shadow: 0 8px 28px rgba(26,26,24,0.28), var(--gw-xs);
  transform: translateY(-2px);
}
:is(html.light, body.light) .glass-ctrl:hover {
  background: var(--bg-teal);
  box-shadow: 0 8px 20px rgba(26,26,24,0.10), var(--gw-xs);
}

/* Icon spin on hover */
.ctrl-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.glass-ctrl:hover .ctrl-icon { transform: rotate(20deg) scale(1.15); }

/* Mobile: circular */
@media (max-width: 768px) {
  .glass-ctrl {
    width: 50px; height: 50px;
    padding: 0; border-radius: 50%;
    font-size: 20px; gap: 0;
    box-shadow: 0 8px 32px rgba(26,26,24,0.28);
  }
  .glass-ctrl .ctrl-label { display: none; }
  :is(html.light, body.light) .glass-ctrl  { box-shadow: 0 4px 20px rgba(26,26,24,0.12); }
}

/* ── Language switcher pill ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--bd-2);
  border-radius: 40px;
  overflow: hidden;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  flex-shrink: 0;
}
:is(html.light, body.light) .lang-switcher { background: rgba(255,255,255,0.70); border-color: rgba(26,26,24,0.10); }
.lang-btn {
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tx-4);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  line-height: 1;
}
.lang-btn:hover  { color: var(--tx); background: var(--bg-card); }
.lang-btn.active { color: var(--pr-2); background: var(--bg-teal); }
.lang-btn.ar-btn {
  font-family: 'Cairo','Tajawal',sans-serif;
  font-size: 12px;
  border-left: 1px solid var(--bd);
}
:is(html.light, body.light) .lang-btn.ar-btn { border-color: rgba(26,26,24,0.07); }
html[dir="rtl"] .lang-btn.ar-btn { border-left: none; border-right: 1px solid var(--bd); }

/* Mobile lang switcher in float cluster */
@media (max-width: 768px) {
  .lang-switcher { border-radius: 40px; }
  .lang-btn { padding: 8px 14px; font-size: 12px; }
}

/* ══ THEME MORPH OVERLAY ══ */
#theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#theme-overlay.flash { opacity: 0.50 !important; }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM LIGHT VISUAL ENHANCEMENTS v3.0
   Bentley · Rolls-Royce · Porsche · Apple · Linear · Framer inspired
   Architecture · Manufacturing Excellence · Corporate Elegance
   ════════════════════════════════════════════════════════════════════ */

/* ── Canvas: luxury layered background ── */
:is(html.light, body.light),
:is(html.light, body.light) body {
  background-color: #F7F5F1;
}

/* ── Decorative orbs / rays ── */
:is(html.light, body.light) .bg-gradient {
  background:
    radial-gradient(ellipse 130% 80% at 16%  -6%,  rgba(107,122,79,0.048) 0%, transparent 50%),
    radial-gradient(ellipse  72% 55% at 88%  92%,  rgba(138,154,107,0.026) 0%, transparent 55%),
    radial-gradient(ellipse 112% 44% at 50%  -4%,  rgba(255,255,255,0.55) 0%, transparent 44%),
    #F7F5F1;
}
:is(html.light, body.light) .bg-grid  { opacity: 0; }
:is(html.light, body.light) .orb-1    { opacity: 0.28; }
:is(html.light, body.light) .orb-2    { opacity: 0.18; }
:is(html.light, body.light) .orb-3    { opacity: 0.12; }
:is(html.light, body.light) .orb-4    { opacity: 0.08; }
:is(html.light, body.light) .ray-1,
:is(html.light, body.light) .ray-2,
:is(html.light, body.light) .ray-3    { opacity: 0.28; }

/* ── Section backgrounds — alternating architectural layers ── */
:is(html.light, body.light) #home {
  background:
    radial-gradient(ellipse 80%  68% at  8%   4%, rgba(107,122,79,0.055) 0%, transparent 55%),
    radial-gradient(ellipse 52%  42% at 93%  90%, rgba(125,143,92,0.030) 0%, transparent 55%),
    radial-gradient(ellipse 120% 44% at 50%  -6%, rgba(255,255,255,0.62) 0%, transparent 45%),
    linear-gradient(180deg, #FBFAF8 0%, #F7F5F1 50%, #F1EEE7 100%);
}
:is(html.light, body.light) #services         { background: #FBFAF8; }
:is(html.light, body.light) #services-preview { background: #FBFAF8; }
:is(html.light, body.light) #machinery        { background: #F1EEE7; }
:is(html.light, body.light) #gallery-preview  { background: #F7F5F1; }
:is(html.light, body.light) #certifications   { background: #FBFAF8; }
:is(html.light, body.light) #about            { background: #F1EEE7; }
:is(html.light, body.light) #certs-section    { background: #F7F5F1; }
:is(html.light, body.light) #preloader        { background: #F7F5F1; }

/* ── Navigation glassmorphism ── */
:is(html.light, body.light) .nav {
  background: rgba(247,245,241,0.74);
  border-bottom-color: rgba(196,210,228,0.65);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    0 1px 0 rgba(196,210,228,0.55),
    0 4px 24px rgba(15,23,42,0.04);
}
:is(html.light, body.light) .nav.scrolled {
  background: rgba(247,245,241,0.96);
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
  box-shadow:
    0 1px 0 rgba(196,210,228,0.68),
    0 8px 36px rgba(15,23,42,0.07);
}

/* ── Hero card — architectural glass panel ── */
:is(html.light, body.light) .hero-card {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.72) 0%,
    rgba(251,252,253,0.55) 100%
  );
  border-color: rgba(255,255,255,0.60);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.48),
    0 4px 8px  rgba(15,23,42,0.04),
    0 16px 48px rgba(15,23,42,0.08),
    0 44px 100px rgba(15,23,42,0.06),
    0 0 48px rgba(107,122,79,0.055);
}
:is(html.light, body.light) .hero-card-img-overlay {
  background: linear-gradient(to bottom, transparent 30%, rgba(246,248,251,0.94) 100%);
}

/* ── Hero eyebrow badge ── */
:is(html.light, body.light) .hero-eyebrow {
  background: rgba(107,122,79,0.06);
  border-color: rgba(107,122,79,0.22);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.10),
    0 2px 10px rgba(107,122,79,0.08);
}

/* ── Division rows (hero section cards) ── */
:is(html.light, body.light) .div-row {
  background: rgba(255,255,255,0.48);
  border-color: rgba(255,255,255,0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.50),
    0 2px 4px rgba(15,23,42,0.04),
    0 6px 18px rgba(15,23,42,0.06);
}
:is(html.light, body.light) .div-row:hover {
  background: rgba(107,122,79,0.06);
  border-color: rgba(107,122,79,0.26);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.18),
    0 4px 8px  rgba(15,23,42,0.05),
    0 14px 30px rgba(15,23,42,0.08),
    0 0 24px rgba(107,122,79,0.08);
}

/* ── Service cards — premium glass tile ── */
:is(html.light, body.light) .svc-card {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.62) 0%,
    rgba(251,252,253,0.50) 100%
  );
  border-color: rgba(255,255,255,0.60);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.52),
    0 2px 4px  rgba(15,23,42,0.04),
    0 10px 28px rgba(15,23,42,0.08);
}
:is(html.light, body.light) .svc-card:hover {
  border-color: rgba(107,122,79,0.28);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.18),
    0 4px 8px  rgba(15,23,42,0.05),
    0 22px 52px rgba(15,23,42,0.10),
    0 0 36px rgba(107,122,79,0.09);
  transform: translateY(-3px);
}

/* ── Machine cards ── */
:is(html.light, body.light) .machine-card {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.60) 0%,
    rgba(251,252,253,0.48) 100%
  );
  border-color: rgba(255,255,255,0.58);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.50),
    0 2px 4px  rgba(15,23,42,0.04),
    0 10px 28px rgba(15,23,42,0.08);
}
:is(html.light, body.light) .machine-card:hover {
  border-color: rgba(107,122,79,0.26);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.16),
    0 4px 8px  rgba(15,23,42,0.05),
    0 18px 44px rgba(15,23,42,0.09),
    0 0 28px rgba(107,122,79,0.08);
}
:is(html.light, body.light) .machine-img {
  background: rgba(236,239,243,0.80);
}

/* ── Cert cards ── */
:is(html.light, body.light) .cert-card {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.62) 0%,
    rgba(251,252,253,0.50) 100%
  );
  border-color: rgba(255,255,255,0.58);
  backdrop-filter: blur(20px) saturate(175%);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.50),
    0 2px 4px  rgba(15,23,42,0.04),
    0 10px 28px rgba(15,23,42,0.08);
}
:is(html.light, body.light) .cert-card:hover {
  border-color: rgba(107,122,79,0.26);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.16),
    0 4px 8px  rgba(15,23,42,0.05),
    0 18px 44px rgba(15,23,42,0.09),
    0 0 26px rgba(107,122,79,0.08);
}

/* ── Stat boxes ── */
:is(html.light, body.light) .stat-box {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.70) 0%,
    rgba(251,252,253,0.56) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.52),
    0 2px 4px rgba(15,23,42,0.04),
    0 8px 22px rgba(15,23,42,0.07);
}
:is(html.light, body.light) .stat-box:hover {
  background: rgba(107,122,79,0.06);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.18),
    0 4px 8px  rgba(15,23,42,0.05),
    0 14px 36px rgba(15,23,42,0.08),
    0 0 20px rgba(107,122,79,0.08);
}

/* ── About pillars ── */
:is(html.light, body.light) .pillar {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.60) 0%,
    rgba(251,252,253,0.48) 100%
  );
  border-color: rgba(255,255,255,0.58);
  backdrop-filter: blur(20px) saturate(175%);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.48),
    0 2px 6px rgba(15,23,42,0.04),
    0 8px 20px rgba(15,23,42,0.07);
}
:is(html.light, body.light) .pillar:hover {
  background: rgba(107,122,79,0.06);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.16),
    0 4px 10px rgba(15,23,42,0.05),
    0 14px 34px rgba(15,23,42,0.08),
    0 0 22px rgba(107,122,79,0.08);
}

/* ── About visual panel ── */
:is(html.light, body.light) .about-visual {
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.55),
    0 8px 24px rgba(15,23,42,0.07),
    0 28px 70px rgba(15,23,42,0.10);
}
:is(html.light, body.light) .about-visual-overlay {
  background: linear-gradient(to top, rgba(236,239,243,0.97) 0%, transparent 100%);
}

/* ── Process steps ── */
:is(html.light, body.light) .process-step {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.62) 0%,
    rgba(251,252,253,0.50) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.50),
    0 2px 6px rgba(15,23,42,0.04),
    0 10px 26px rgba(15,23,42,0.07);
}
:is(html.light, body.light) .process-step:hover {
  background: rgba(107,122,79,0.06);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.16),
    0 4px 10px rgba(15,23,42,0.05),
    0 16px 38px rgba(15,23,42,0.08);
}

/* ── Capability items ── */
:is(html.light, body.light) .cap-item {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.58) 0%,
    rgba(251,252,253,0.46) 100%
  );
  border-color: rgba(255,255,255,0.56);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.48),
    0 2px 6px rgba(15,23,42,0.04),
    0 8px 20px rgba(15,23,42,0.07);
}
:is(html.light, body.light) .cap-item:hover {
  background: rgba(107,122,79,0.06);
  border-color: rgba(107,122,79,0.22);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.16),
    0 4px 10px rgba(15,23,42,0.05),
    0 14px 32px rgba(15,23,42,0.08);
}

/* ── V2030 section ── */
:is(html.light, body.light) .v2030 {
  background:
    radial-gradient(ellipse 100% 60% at 50% 50%, rgba(107,122,79,0.045) 0%, transparent 65%),
    linear-gradient(135deg, #F3F0E8 0%, #EEF1E7 50%, #F1EEE7 100%);
  border-color: rgba(196,210,228,0.60);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.44),
    0 4px 16px rgba(15,23,42,0.05),
    0 18px 52px rgba(15,23,42,0.07);
}

/* ── Marquee strip ── */
:is(html.light, body.light) .marquee-strip {
  background: rgba(255,255,255,0.52);
  border-color: rgba(196,210,228,0.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 1px 0 rgba(196,210,228,0.50),
    0 4px 18px rgba(15,23,42,0.04);
}

/* ── Gallery filter buttons ── */
:is(html.light, body.light) .flt {
  background: rgba(255,255,255,0.55);
  border-color: rgba(196,210,228,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.42),
    0 1px 3px rgba(15,23,42,0.04),
    0 4px 10px rgba(15,23,42,0.05);
}
:is(html.light, body.light) .flt:hover {
  background: rgba(255,255,255,0.78);
  border-color: rgba(175,196,220,0.78);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.52),
    0 2px 6px rgba(15,23,42,0.05),
    0 8px 18px rgba(15,23,42,0.07);
}
:is(html.light, body.light) .flt.active {
  background: rgba(107,122,79,0.09);
  border-color: rgba(107,122,79,0.30);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.18),
    0 2px 8px rgba(107,122,79,0.14),
    0 6px 20px rgba(107,122,79,0.10);
}

/* ── Gallery items ── */
:is(html.light, body.light) .gal-item {
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.58),
    0 4px 12px rgba(15,23,42,0.06),
    0 14px 36px rgba(15,23,42,0.09);
}
:is(html.light, body.light) .gal-item:hover {
  box-shadow:
    0 0 0 1px rgba(175,196,220,0.72),
    0 8px 24px rgba(15,23,42,0.08),
    0 28px 64px rgba(15,23,42,0.11);
}

/* ── Contact form ── */
:is(html.light, body.light) .contact-form-wrap {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.72) 0%,
    rgba(251,252,253,0.58) 100%
  );
  border-color: rgba(255,255,255,0.60);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.52),
    0 8px 24px rgba(15,23,42,0.06),
    0 28px 70px rgba(15,23,42,0.10);
}
:is(html.light, body.light) .form-ctrl {
  background: rgba(247,245,241,0.75);
  border-color: rgba(196,210,228,0.78);
  box-shadow:
    0 0 0 1px rgba(196,210,228,0.35),
    0 1px 3px rgba(15,23,42,0.03);
}
:is(html.light, body.light) .form-ctrl:focus {
  background: rgba(255,255,255,0.92);
  border-color: rgba(107,122,79,0.42);
  box-shadow:
    0 0 0 3px rgba(107,122,79,0.09),
    0 2px 8px rgba(107,122,79,0.10);
}

/* ── Services hero bg ── */
:is(html.light, body.light) .svc-hero-bg {
  background: linear-gradient(160deg,
    rgba(107,122,79,0.060) 0%,
    rgba(247,245,241,0.92) 65%
  );
}

/* ── Buttons ── */
:is(html.light, body.light) .btn-ghost {
  background: linear-gradient(148deg,
    rgba(255,255,255,0.68) 0%,
    rgba(251,252,253,0.54) 100%
  );
  border-color: rgba(196,210,228,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.50),
    0 1px 3px rgba(15,23,42,0.04),
    0 4px 14px rgba(15,23,42,0.06);
}
:is(html.light, body.light) .btn-ghost:hover {
  background: rgba(255,255,255,0.86);
  border-color: rgba(175,196,220,0.85);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.60),
    0 2px 6px rgba(15,23,42,0.06),
    0 10px 22px rgba(15,23,42,0.09);
}
:is(html.light, body.light) .btn-outline {
  border-color: rgba(107,122,79,0.28);
  box-shadow: 0 0 0 1px rgba(107,122,79,0.10);
}
:is(html.light, body.light) .btn-outline:hover {
  background: rgba(107,122,79,0.07);
  border-color: rgba(107,122,79,0.42);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.18),
    0 0 20px rgba(107,122,79,0.12);
}

/* ── Glass controls (theme toggle) ── */
:is(html.light, body.light) .glass-ctrl {
  background: rgba(255,255,255,0.62);
  border-color: rgba(196,210,228,0.72);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.50),
    0 2px 6px  rgba(15,23,42,0.05),
    0 8px 20px rgba(15,23,42,0.07);
}
:is(html.light, body.light) .glass-ctrl:hover {
  background: rgba(107,122,79,0.07);
  border-color: rgba(107,122,79,0.28);
  box-shadow:
    0 0 0 1px rgba(107,122,79,0.16),
    0 4px 10px rgba(15,23,42,0.06),
    0 14px 30px rgba(15,23,42,0.08),
    0 0 22px rgba(107,122,79,0.09);
}
@media (max-width: 768px) {
  :is(html.light, body.light) .glass-ctrl {
    background: rgba(255,255,255,0.72);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.55),
      0 4px 16px rgba(15,23,42,0.07),
      0 14px 36px rgba(15,23,42,0.09);
  }
}

/* ── Language switcher ── */
:is(html.light, body.light) .lang-switcher {
  background: rgba(255,255,255,0.62);
  border-color: rgba(196,210,228,0.72);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.50),
    0 2px 6px  rgba(15,23,42,0.05),
    0 8px 20px rgba(15,23,42,0.07);
}
:is(html.light, body.light) .lang-btn:hover {
  background: rgba(255,255,255,0.72);
}
:is(html.light, body.light) .lang-btn.active {
  background: rgba(107,122,79,0.09);
  color: var(--pr-2);
}
:is(html.light, body.light) .lang-btn.ar-btn {
  border-color: rgba(196,210,228,0.65);
}

/* ══ RESPONSIVE ══ */
@media (max-width: 1200px) { .nav-controls .glass-ctrl .ctrl-label { display: none; } }