/* ============================================================
   THARWA INTERNATIONAL - F.Z.C — Landing Page
   Brand: luxury black & gold, bilingual EN/AR
   ============================================================ */

:root{
  --bg-0:#0a0a0d;
  --bg-1:#0f0f13;
  --bg-2:#14141a;
  --panel:#191920;
  --panel-2:#1e1e26;
  --line:rgba(212,175,55,.22);
  --line-soft:rgba(212,175,55,.12);
  --gold:#d4af37;
  --gold-hi:#f7d774;
  --gold-deep:#9a6d1b;
  --gold-grad:linear-gradient(160deg,#ffe9a3 0%,#f5c542 34%,#d4a017 62%,#8a5a12 100%);
  --gold-grad-h:linear-gradient(90deg,#f7d774,#d4a017 55%,#b8860b);
  --cream:#f5f1e6;
  --ink:#181613;
  --text:#eceae3;
  --muted:#a6a39a;
  --ff-en:'Montserrat','Cairo',system-ui,sans-serif;
  --ff-ar:'Cairo','Montserrat',system-ui,sans-serif;
  --radius:16px;
  --shadow-gold:0 10px 40px rgba(212,160,23,.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--ff-en);
  background:var(--bg-0);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(212,175,55,.85);color:#141005}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0c0c0f}
::-webkit-scrollbar-thumb{background:linear-gradient(#8a6410,#5b430c);border-radius:6px;border:2px solid #0c0c0f}

.container{width:min(1200px,92%);margin-inline:auto}
.ar,[class$="-ar"],[class*="__ar"]{font-family:var(--ff-ar)}

/* gradient gold text helper */
.hero__title,.stat__num,.section-head h2 em{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============ NAVBAR ============ */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  transition:background .35s,box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.nav--scrolled{
  background:rgba(10,10,14,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.nav__inner{
  width:min(1280px,94%);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding-block:10px;min-height:68px;
}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__brand img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(212,160,23,.4))}
.nav__brand-text{display:flex;flex-direction:column;line-height:1.15}
.nav__brand-text strong{
  font-size:1.15rem;font-weight:800;letter-spacing:.14em;
  background:var(--gold-grad-h);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav__brand-text small{font-size:.58rem;letter-spacing:.26em;color:var(--muted);font-weight:600}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{
  font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--text);
  text-align:center;transition:color .25s;position:relative;padding-block:4px;
}
.nav__links a i{display:block;font-style:normal;font-family:var(--ff-ar);font-size:.66rem;color:var(--muted);font-weight:600;transition:color .25s}
.nav__links a:hover{color:var(--gold-hi)}
.nav__links a:hover i{color:var(--gold)}
.nav__links a:not(.nav__cta)::after{
  content:'';position:absolute;left:50%;bottom:-4px;width:0;height:2px;
  background:var(--gold-grad-h);transition:width .3s,left .3s;border-radius:2px;
}
.nav__links a:not(.nav__cta):hover::after{width:100%;left:0}
.nav__cta{
  border:1px solid var(--line);border-radius:999px;padding:8px 20px;
  background:rgba(212,175,55,.08);
}
.nav__cta:hover{background:rgba(212,175,55,.16);border-color:var(--gold)}
.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:110}
.nav__burger span{display:block;width:26px;height:2px;background:var(--gold);margin:6px 0;border-radius:2px;transition:.3s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(1200px 600px at 50% 118%,rgba(212,160,23,.14),transparent 60%),
    radial-gradient(900px 480px at 12% -10%,rgba(40,40,52,.55),transparent 60%),
    radial-gradient(900px 480px at 88% -10%,rgba(40,40,52,.55),transparent 60%),
    var(--bg-0);
  overflow:hidden;
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}

.hero__deco{position:absolute;inset:0;pointer-events:none}
/* dark angular corner panels with gold hairline edge */
.corner{position:absolute;top:0;width:34vw;height:30vh;min-width:260px}
.corner--tl{left:0;background:var(--gold-grad);clip-path:polygon(0 0,100% 0,0 100%)}
.corner--tr{right:0;background:var(--gold-grad);clip-path:polygon(0 0,100% 0,100% 100%)}
.corner::after{content:'';position:absolute;inset:0;background:linear-gradient(150deg,#131318,#0c0c10)}
.corner--tl::after{clip-path:polygon(0 0,calc(100% - 4px) 0,0 calc(100% - 4px))}
.corner--tr::after{clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px))}

/* nested gold chevrons on both edges */
.chev{
  position:absolute;top:50%;
  width:120px;height:58vh;min-height:320px;
  transform:translateY(-50%) translate3d(calc(var(--px,0)*1px),calc(var(--py,0)*1px),0);
  background:var(--gold-grad);
  filter:drop-shadow(0 0 22px rgba(212,160,23,.35));
  opacity:.95;
  transition:transform .1s linear;
}
.chev--l{left:-52px;clip-path:polygon(0 0,42% 0,100% 50%,42% 100%,0 100%,58% 50%)}
.chev--r{right:-52px;clip-path:polygon(100% 0,58% 0,0 50%,58% 100%,100% 100%,42% 50%)}
.chev--inner{width:84px;opacity:.55}
.chev--l.chev--inner{left:64px;height:44vh;min-height:240px}
.chev--r.chev--inner{right:64px;height:44vh;min-height:240px}

.hero__content{
  position:relative;z-index:3;text-align:center;
  padding:110px 20px 40px;
  transform:translate3d(calc(var(--cx,0)*1px),calc(var(--cy,0)*1px),0);
}
.hero__emblem{
  width:clamp(120px,15vw,178px);margin:0 auto 6px;
  filter:drop-shadow(0 6px 30px rgba(212,160,23,.45));
  animation:emblemFloat 7s ease-in-out infinite;
}
@keyframes emblemFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero__title{
  font-size:clamp(3rem,8vw,5.6rem);
  font-weight:800;letter-spacing:.16em;line-height:1.05;
  text-shadow:0 0 60px rgba(212,160,23,.25);
}
.hero__subtitle{
  font-size:clamp(.9rem,2.2vw,1.35rem);
  letter-spacing:.42em;font-weight:600;color:#f0eee6;margin-top:4px;
}
.hero__subtitle span{color:var(--gold)}
.hero__arabic{
  font-family:var(--ff-ar);font-weight:700;
  font-size:clamp(1rem,2.4vw,1.4rem);color:var(--gold);
  margin-top:10px;letter-spacing:.05em;
}
.hero__rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 18px;max-width:420px}
.hero__rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold));}
.hero__rule span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.hero__rule b{width:8px;height:8px;background:var(--gold-grad);transform:rotate(45deg);box-shadow:0 0 12px rgba(212,160,23,.8)}
.hero__tagline{
  font-size:clamp(.95rem,2.3vw,1.35rem);
  font-weight:600;letter-spacing:.2em;color:#f4f2ea;
}
.hero__tagline-ar{
  font-family:var(--ff-ar);color:var(--muted);
  font-size:clamp(.85rem,1.8vw,1.05rem);margin-top:6px;font-weight:600;
}
.hero__cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:34px}

.btn{
  display:inline-block;border-radius:999px;
  padding:13px 32px;font-weight:700;font-size:.92rem;letter-spacing:.06em;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
  text-align:center;
}
.btn i{display:block;font-style:normal;font-family:var(--ff-ar);font-size:.74rem;font-weight:600;opacity:.85;margin-top:2px}
.btn--gold{background:var(--gold-grad-h);color:#1c1305;box-shadow:var(--shadow-gold)}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(212,160,23,.4)}
.btn--ghost{border:1px solid var(--line);color:var(--gold-hi);background:rgba(212,175,55,.05)}
.btn--ghost:hover{transform:translateY(-3px);background:rgba(212,175,55,.13);border-color:var(--gold)}

.hero__strip{
  position:relative;z-index:3;width:100%;
  margin-top:auto;
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px 38px;
  padding:16px 4vw 18px;
  background:rgba(9,9,12,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line-soft);
}
.strip-item{display:flex;align-items:center;gap:10px;font-size:.8rem;color:#d8d5cc;letter-spacing:.02em;transition:color .25s}
.strip-item svg{width:17px;height:17px;fill:var(--gold);flex-shrink:0}
a.strip-item:hover{color:var(--gold-hi)}

.hero__scroll{
  position:absolute;bottom:76px;left:50%;transform:translateX(-50%);z-index:4;
  width:26px;height:44px;border:2px solid var(--line);border-radius:16px;
  display:flex;justify-content:center;padding-top:8px;
}
.hero__scroll span{width:4px;height:9px;border-radius:3px;background:var(--gold);animation:scrollHint 1.8s infinite}
@keyframes scrollHint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ============ STATS ============ */
.stats{
  background:linear-gradient(180deg,#101015,#0c0c10);
  border-block:1px solid var(--line-soft);
  padding:44px 0;
}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat__num{display:block;font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:800;line-height:1.1}
.stat__en{display:block;font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#d8d5cc;margin-top:6px}
.stat__ar{display:block;font-family:var(--ff-ar);font-size:.8rem;color:var(--gold);font-weight:600}

/* ============ SECTIONS (shared) ============ */
.section{padding:96px 0;position:relative}
.section-head{text-align:center;max-width:820px;margin:0 auto 56px}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
}
.kicker::before,.kicker::after{content:'';width:34px;height:1px;background:var(--gold);opacity:.6}
.kicker i{font-style:normal;font-family:var(--ff-ar);letter-spacing:.05em;font-size:.8rem}
.section-head h2{
  font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;letter-spacing:.06em;
  margin-top:14px;color:#f4f2ec;
}
.head-ar{display:block;font-family:var(--ff-ar);font-size:clamp(.95rem,2vw,1.15rem);color:var(--gold);margin-top:8px;font-weight:700;letter-spacing:0}
.section-lead{color:var(--muted);margin-top:16px;font-size:.98rem}

/* ============ ABOUT ============ */
.about{background:var(--bg-1)}
.about__grid{display:grid;grid-template-columns:1.02fr 1.15fr;gap:56px;align-items:center}
.about__media{position:relative}
.about__media > img{
  width:100%;height:440px;object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.about__media::before,.about__media::after{
  content:'';position:absolute;width:70px;height:70px;pointer-events:none;
}
.about__media::before{top:-12px;inset-inline-start:-12px;border-top:3px solid var(--gold);border-inline-start:3px solid var(--gold);border-start-start-radius:14px}
.about__media::after{bottom:-12px;inset-inline-end:-12px;border-bottom:3px solid var(--gold);border-inline-end:3px solid var(--gold);border-end-end-radius:14px}
.about__badge{
  position:absolute;bottom:-22px;inset-inline-end:26px;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(150deg,#1c1c24,#121218);
  border:1px solid var(--line);border-radius:14px;
  padding:12px 18px;box-shadow:var(--shadow-gold);
}
.about__badge img{width:40px;border:0;box-shadow:none;border-radius:0}
.about__badge span{font-size:.68rem;letter-spacing:.14em;color:var(--muted);font-weight:600;line-height:1.3}
.about__badge b{font-size:1rem;color:var(--gold-hi);letter-spacing:.06em}
.about__text p{margin-bottom:16px;color:#cfccc3;font-size:.98rem}
.about__text strong{color:var(--gold-hi)}
.about__text-ar{font-family:var(--ff-ar);color:var(--muted);border-inline-start:3px solid var(--gold);padding-inline-start:16px;font-size:.95rem}
.about__pillars{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.pillar{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;
  padding:18px;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.pillar:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.pillar svg{width:26px;height:26px;fill:var(--gold);margin-bottom:10px}
.pillar b{display:block;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:6px}
.pillar span{font-size:.82rem;color:var(--muted)}

/* ============ VISION / MISSION / VALUES ============ */
.vmv{background:var(--bg-0)}
.vmv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vmv-card{
  position:relative;background:linear-gradient(165deg,var(--panel-2),#14141a 70%);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:38px 30px 32px;text-align:center;overflow:hidden;
  transition:transform .35s,border-color .35s,box-shadow .35s;
}
.vmv-card::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:3px;
  background:var(--gold-grad-h);border-radius:0 0 4px 4px;opacity:.85;
}
.vmv-card:hover{transform:translateY(-8px);border-color:var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(212,160,23,.08)}
.vmv-card__icon{
  width:74px;height:74px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(212,175,55,.16),rgba(212,175,55,.04));
  border:1px solid var(--line);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
}
.vmv-card__icon svg{width:32px;height:32px;fill:var(--gold)}
.vmv-card h3{font-size:1.02rem;letter-spacing:.14em;color:#f4f2ec;margin-bottom:6px}
.vmv-card h3 span{display:block;font-family:var(--ff-ar);color:var(--gold);font-size:.9rem;margin-top:4px;letter-spacing:0}
.vmv-card p{font-size:.88rem;color:var(--muted);margin-top:12px}
.vmv-card p.ar{font-family:var(--ff-ar);color:#8f8c84;font-size:.85rem}

/* ============ CORE VALUES (light) ============ */
.values{
  background:
    linear-gradient(120deg,rgba(212,175,55,.08),transparent 40%),
    var(--cream);
  border-block:3px solid var(--gold);
}
.values .section-head{margin-bottom:44px}
.values__title{color:var(--ink)!important}
.values__title em{font-style:normal;background:linear-gradient(120deg,#a8791c,#7c5a10);-webkit-background-clip:text;background-clip:text;color:transparent}
.values__title .head-ar{color:#8a6410}
.values__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;text-align:center}
.value__icon{
  width:78px;height:78px;margin:0 auto 14px;border-radius:50%;
  background:#fff;
  border:2px solid #d9c68a;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(138,100,16,.18);
  transition:transform .3s,border-color .3s;
}
.value:hover .value__icon{transform:translateY(-6px) scale(1.05);border-color:#b8860b}
.value__icon svg{width:34px;height:34px;fill:#a8791c}
.value b{display:block;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:#6b4e0e}
.value span{display:block;font-family:var(--ff-ar);font-size:.82rem;color:#8a6410;font-weight:700;margin:2px 0 6px}
.value p{font-size:.8rem;color:#5d594e}

/* ============ PRODUCTS ============ */
.products{background:var(--bg-1)}
.products__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:20px;
}
.product{
  position:relative;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:14px;
  padding:12px 12px 16px;text-align:center;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.product:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 30px rgba(212,160,23,.12)}
/* solid gold coin — gradient text over a photo was unreadable */
.product__num{
  position:absolute;top:10px;inset-inline-start:10px;z-index:3;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-grad-h);
  color:#1c1305;font-size:.86rem;font-weight:800;letter-spacing:0;
  border:1.5px solid rgba(255,240,190,.85);
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}
.product__img{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.product__img img{width:100%;aspect-ratio:5/6;object-fit:cover;transition:transform .5s}
.product:hover .product__img img{transform:scale(1.08)}
.product h3{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#f0eee6;margin-top:12px}
.product .ar{display:block;font-size:.8rem;color:var(--gold);font-weight:600;margin-top:2px}

/* ============ ACTIVITIES ============ */
.activities{background:var(--bg-0)}
.activities__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.activity{
  position:relative;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;
  overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.activity:hover{transform:translateY(-7px);border-color:var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.activity__num{
  position:absolute;top:10px;inset-inline-start:10px;z-index:3;
  min-width:32px;height:32px;padding-inline:8px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-grad-h);
  color:#1c1305;font-size:.8rem;font-weight:800;letter-spacing:0;
  border:1.5px solid rgba(255,240,190,.85);
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}
.activity__img{overflow:hidden;border-bottom:2px solid var(--gold);position:relative}
.activity__img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,14,.55))}
.activity__img img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.activity:hover .activity__img img{transform:scale(1.07)}
.activity__body{padding:16px 16px 18px;text-align:center}
.activity h3{font-size:.85rem;letter-spacing:.04em;color:#f0eee6;line-height:1.4}
.activity .ar{display:block;font-size:.8rem;color:var(--gold);font-weight:600;margin-top:4px}

/* ============ INDUSTRIES ============ */
.industries{background:var(--bg-1)}
.industries__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* photo-topped tiles with a gold coin number — mirrors page 7 of the profile */
.industry{
  position:relative;background:linear-gradient(180deg,#171720,#101016);
  border:1px solid var(--line);border-radius:14px;
  text-align:center;overflow:hidden;padding-bottom:20px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.industry:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(212,160,23,.16)}
.industry__img{position:relative;overflow:hidden;border-bottom:2px solid var(--gold)}
.industry__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}
.industry:hover .industry__img img{transform:scale(1.07)}
.industry__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,14,.10) 40%,rgba(10,10,14,.72));
}
.industry i{
  position:relative;z-index:2;display:flex;
  width:38px;height:38px;margin:-19px auto 10px;
  align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(160deg,#1b1b23,#101016);
  border:2px solid var(--gold);
  font-style:normal;font-weight:800;font-size:.86rem;
  color:var(--gold-hi);
  box-shadow:0 4px 14px rgba(0,0,0,.6);
}
.industry svg{width:30px;height:30px;fill:var(--gold);margin-bottom:8px}
.industry b{display:block;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#f0eee6;padding-inline:8px}
.industry span{display:block;font-family:var(--ff-ar);font-size:.8rem;color:var(--gold);font-weight:600;margin-top:3px}

/* ============ MARKETS MAP ============ */
.markets{background:var(--bg-0)}
.markets__map{
  position:relative;width:min(1050px,100%);margin-inline:auto;
  aspect-ratio:2/1;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:radial-gradient(80% 90% at 50% 40%,#15151c,#0c0c10);
  overflow:hidden;
}
#marketsCanvas{position:absolute;inset:0;width:100%;height:100%}
.marker{
  position:absolute;left:var(--mx);top:var(--my);transform:translate(-50%,-50%);
  background:none;border:0;cursor:pointer;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  font-family:inherit;
}
.marker__dot{
  width:13px;height:13px;border-radius:50%;
  background:var(--gold-grad-h);
  box-shadow:0 0 14px rgba(212,160,23,.9);
  position:relative;
}
.marker__dot::before,.marker__dot::after{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(212,175,55,.65);
  animation:markerPulse 2.4s ease-out infinite;
}
.marker__dot::after{animation-delay:1.2s}
@keyframes markerPulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.3);opacity:0}}
.marker--hq .marker__dot{width:17px;height:17px;background:#fff2c8;box-shadow:0 0 22px rgba(255,220,120,1),0 0 44px rgba(212,160,23,.7)}
.marker__label{
  margin-top:10px;white-space:nowrap;
  background:rgba(12,12,16,.92);border:1px solid var(--line);
  padding:6px 13px;border-radius:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#f4f2ec;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;
  pointer-events:none;
}
.marker__label i{display:block;font-style:normal;font-family:var(--ff-ar);font-size:.7rem;color:var(--gold);font-weight:600;letter-spacing:0}
.marker:hover .marker__label,.marker:focus-visible .marker__label,.marker--hq .marker__label{opacity:1;transform:translateY(0)}

/* ============ PROCESS ============ */
.process{background:var(--bg-1)}
.process__track{
  list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
  position:relative;counter-reset:step;
}
.process__track::before{
  content:'';position:absolute;top:38px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  opacity:.28;
}
/* number coin, label, then the photo — the profile's step card */
.step{
  position:relative;text-align:center;
  background:linear-gradient(180deg,#171720,#101016);
  border:1px solid var(--line);border-radius:14px;
  padding:16px 10px 0;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.step:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(212,160,23,.14)}
.step b{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 auto 10px;border-radius:50%;
  background:var(--gold-grad);color:#1c1305;
  font-size:1rem;font-weight:800;
  box-shadow:0 8px 24px rgba(212,160,23,.35);
  transition:transform .3s,box-shadow .3s;
}
.step:hover b{transform:scale(1.12);box-shadow:0 10px 34px rgba(212,160,23,.55)}
.step h3{
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:#f0eee6;
  line-height:1.4;min-height:2.6em;display:flex;align-items:center;justify-content:center;
  padding-inline:4px;
}
.step__img{margin:10px -10px 0;border-top:2px solid var(--gold);overflow:hidden}
.step__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}
.step:hover .step__img img{transform:scale(1.07)}
.step .ar{display:block;font-size:.76rem;color:var(--gold);font-weight:600;margin-top:3px}

/* ============ WHY / QUALITY ============ */
.why{background:var(--bg-0)}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;
  padding:28px 24px;text-align:center;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.why-card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 18px 46px rgba(0,0,0,.45)}
.why-card svg{width:36px;height:36px;fill:var(--gold);margin-bottom:14px}
.why-card h3{font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.why-card h3 span{display:block;font-family:var(--ff-ar);font-size:.82rem;color:var(--gold);margin-top:3px;letter-spacing:0}
.why-card p{font-size:.85rem;color:var(--muted);margin-top:10px}
.quality{
  margin-top:54px;
  background:linear-gradient(160deg,#1b1b23,#111116);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 30px;
}
.quality__title{
  text-align:center;font-size:1.05rem;letter-spacing:.2em;color:#f4f2ec;margin-bottom:26px;
}
.quality__title .head-ar{font-size:.9rem;margin-top:4px}
.quality__badges{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 44px}
.badge{text-align:center;min-width:120px}
.badge svg{width:30px;height:30px;fill:var(--gold);margin-bottom:8px}
.badge b{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#e8e5dc}
.badge span{display:block;font-family:var(--ff-ar);font-size:.72rem;color:var(--gold);font-weight:600;margin-top:2px}

/* ============ PACKAGING ============ */
.packaging{background:var(--bg-1)}
.packaging__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* framed product panel + gold caption bar, as on the profile spread */
.pack{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:10px 10px 0;text-align:center;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.pack:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 26px rgba(212,160,23,.14)}
.pack__img{
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(212,175,55,.35);
  background:#111116;
}
.pack__img img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .5s}
.pack:hover .pack__img img{transform:scale(1.05)}
.pack b{
  display:block;margin:10px -10px 0;padding:11px 8px;
  background:var(--gold-grad-h);color:#1c1305;
  font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.pack span{display:block;font-family:var(--ff-ar);font-size:.8rem;color:var(--gold);font-weight:600;margin-top:4px}

/* ============ CONTACT ============ */
.contact{
  background:
    radial-gradient(900px 500px at 85% 110%,rgba(212,160,23,.1),transparent 55%),
    var(--bg-0);
}
.contact__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:stretch}
.contact__cards{display:flex;flex-direction:column;gap:16px}
.ccard{
  display:flex;align-items:center;gap:18px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;
  padding:18px 22px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.ccard:hover{transform:translateX(6px);border-color:var(--gold);box-shadow:0 12px 34px rgba(0,0,0,.4)}
[dir="rtl"] .ccard:hover{transform:translateX(-6px)}
.ccard__icon{
  flex-shrink:0;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(160deg,rgba(212,175,55,.2),rgba(212,175,55,.05));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.ccard__icon svg{width:23px;height:23px;fill:var(--gold)}
.ccard b{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:3px}
.ccard b span{font-family:var(--ff-ar);color:var(--gold);font-size:.76rem;letter-spacing:0;margin-inline-start:6px}
.ccard p{font-size:.88rem;color:#d8d5cc;word-break:break-word}
.contact__media{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:420px}
.contact__media > img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.contact__connect{
  position:absolute;inset-inline:18px;bottom:18px;
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(11,11,15,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;
}
.contact__connect-icon{
  flex-shrink:0;width:46px;height:46px;border-radius:50%;
  background:var(--gold-grad);display:flex;align-items:center;justify-content:center;
}
.contact__connect-icon svg{width:22px;height:22px;fill:#1c1305}
.contact__connect b{font-size:.9rem;letter-spacing:.14em;color:var(--gold-hi)}
.contact__connect b .head-ar{display:inline;font-size:.82rem;margin-inline-start:8px}
.contact__connect p{font-size:.82rem;color:#cfccc3;margin-top:6px}

/* ============ FOOTER ============ */
.footer{background:#08080b;border-top:1px solid var(--line-soft)}
.footer__inner{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;
  padding:56px 0 40px;
}
.footer__brand img{width:56px;margin-bottom:12px}
.footer__brand b{
  display:block;font-size:1.15rem;font-weight:800;letter-spacing:.14em;
  background:var(--gold-grad-h);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.footer__brand small{display:block;font-size:.6rem;letter-spacing:.26em;color:var(--muted);margin-top:2px}
.footer__brand p{font-size:.74rem;letter-spacing:.16em;color:var(--muted);margin-top:14px}
.footer__brand p.ar{letter-spacing:0;font-size:.82rem;margin-top:4px}
.footer__links{display:flex;flex-direction:column;gap:10px}
.footer__links a{font-size:.85rem;color:var(--muted);transition:color .25s;width:fit-content}
.footer__links a:hover{color:var(--gold-hi)}
.footer__meta{display:flex;flex-direction:column;gap:10px;font-size:.85rem;color:var(--muted)}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.05);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  width:min(1200px,92%);margin-inline:auto;
  padding:18px 0;font-size:.76rem;color:#7c7a72;
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .activities__grid{grid-template-columns:repeat(2,1fr)}
  .industries__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .values__grid{grid-template-columns:repeat(3,1fr)}
  .process__track{grid-template-columns:repeat(3,1fr);gap:28px 18px}
  .process__track::before{display:none}
}
@media (max-width:920px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(320px,80vw);
    flex-direction:column;justify-content:center;gap:30px;
    background:rgba(10,10,14,.97);border-inline-start:1px solid var(--line-soft);
    transform:translateX(105%);
    transition:transform .4s cubic-bezier(.16,1,.3,1),visibility .4s;
    visibility:hidden;   /* closed drawer must not paint or take focus */
  }
  /* RTL: anchor to the left edge, otherwise sliding left from a right anchor
     leaves part of the drawer on screen */
  [dir="rtl"] .nav__links{inset:0 auto 0 0;transform:translateX(-105%)}
  .nav__links.open{transform:translateX(0);visibility:visible}
  .nav__burger{display:block}
  .about__grid{grid-template-columns:1fr;gap:44px}
  .contact__grid{grid-template-columns:1fr}
  .contact__media{min-height:360px}
  .vmv__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .footer__inner{grid-template-columns:1fr;gap:28px}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .chev--inner{display:none}
  .chev{width:80px}
  .chev--l{left:-40px}.chev--r{right:-40px}
}
@media (max-width:640px){
  .section{padding:70px 0}
  .values__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:1fr}
  .packaging__grid{grid-template-columns:repeat(2,1fr)}
  .activities__grid{grid-template-columns:1fr}
  .process__track{grid-template-columns:repeat(2,1fr)}
  .products__grid{grid-template-columns:repeat(2,1fr)}
  /* the strip sits under the floating dock and its four items are far wider
     than a phone screen, so they were being cut off at both edges */
  .hero__strip{gap:5px 14px;font-size:.68rem;padding-inline:72px}
  .strip-item{font-size:.68rem;max-width:100%}
  .strip-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* LinkedIn and the registration number are repeated in Contact and the footer */
  .hero__strip a[href*="linkedin"],
  .hero__strip div.strip-item{display:none}
  .hero__scroll{display:none}
  /* keep hero copy clear of the gold chevrons on narrow screens */
  .chev{width:62px}
  .chev--l{left:-34px}.chev--r{right:-34px}
  .hero__content{padding-inline:38px}
  .corner{min-width:200px;height:22vh}
  .marker__label{display:none}
  .marker--hq .marker__label{display:block}
}

/* ============ FLOATING CONTACT DOCK ============ */
.dock{
  position:fixed;z-index:90;
  inset-inline-end:22px;bottom:22px;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.dock__btn{
  position:relative;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s;
  -webkit-tap-highlight-color:transparent;
}
.dock__btn svg{width:29px;height:29px;fill:#fff;position:relative;z-index:2}
.dock__btn:hover,.dock__btn:focus-visible{transform:translateY(-4px) scale(1.06)}
.dock__btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.dock__btn--wa{background:linear-gradient(150deg,#43d854,#1faf38 60%,#128c7e)}
.dock__btn--wa:hover{box-shadow:0 12px 34px rgba(37,211,102,.5)}
.dock__btn--wechat{width:48px;height:48px;background:linear-gradient(150deg,#5fd66e,#2dc100 65%,#1f9c00)}
.dock__btn--wechat svg{width:25px;height:25px}
.dock__btn--wechat:hover{box-shadow:0 12px 34px rgba(45,193,0,.45)}

/* pulsing ring on the WhatsApp button */
.dock__pulse{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(37,211,102,.55);
  animation:dockPulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes dockPulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}
}

/* label that slides out on hover (pointer devices only) */
.dock__tip{
  position:absolute;inset-inline-end:calc(100% + 12px);
  white-space:nowrap;
  background:rgba(12,12,16,.94);border:1px solid var(--line);
  color:#f4f2ec;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  padding:6px 13px;border-radius:9px;
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .25s,transform .25s;
}
[dir="rtl"] .dock__tip{transform:translateX(-8px)}
@media (hover:hover){
  .dock__btn:hover .dock__tip,.dock__btn:focus-visible .dock__tip{opacity:1;transform:translateX(0)}
}

/* WeChat QR popover */
.dock__panel{
  position:absolute;inset-inline-end:0;bottom:calc(100% + 12px);
  width:236px;padding:16px 16px 14px;
  background:linear-gradient(165deg,#1c1c24,#121218);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(212,160,23,.1);
  text-align:center;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:bottom right;
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),visibility .3s;
}
[dir="rtl"] .dock__panel{transform-origin:bottom left}
.dock__panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.dock__panel b{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:var(--gold-hi);margin-bottom:10px;line-height:1.45;
  padding-inline-end:26px;  /* clear the close button */
  text-align:start;
}
.dock__panel img{
  width:100%;border-radius:10px;background:#fff;padding:8px;
}
.dock__panel span{
  display:block;margin-top:9px;
  font-size:.68rem;letter-spacing:.14em;font-weight:700;color:var(--muted);
}
.dock__close{
  position:absolute;top:7px;inset-inline-end:7px;
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,border-color .25s;
}
.dock__close svg{width:15px;height:15px;fill:var(--muted)}
.dock__close:hover{background:rgba(212,175,55,.16);border-color:var(--line)}
.dock__close:hover svg{fill:var(--gold-hi)}

@media (max-width:640px){
  .dock{inset-inline-end:14px;bottom:14px;gap:10px}
  .dock__btn{width:52px;height:52px}
  .dock__btn svg{width:27px;height:27px}
  .dock__btn--wechat{width:44px;height:44px}
  .dock__btn--wechat svg{width:23px;height:23px}
  .dock__panel{width:212px}
}

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

/* ============================================================
   i18n + THEME  (language switch EN/AR/ZH + dark/light mode)
   ============================================================ */
:root{
  --ff-zh:'Noto Sans SC','Montserrat','Cairo',system-ui,sans-serif;
  color-scheme:dark;
}

/* ---- per-language typography & direction ---- */
html[data-lang="ar"] body{font-family:var(--ff-ar)}
html[data-lang="zh"] body{font-family:var(--ff-zh)}
/* Arabic must never be letter-spaced (it breaks cursive glyph joining) */
html[data-lang="ar"] [data-i18n],
html[data-lang="ar"] [data-i18n] *{letter-spacing:normal!important}

/* Arabic has no italic form; synthetic slanting also pushes glyphs out of the
   background-clip:text paint box, which erases the parts that stick out. */
html[data-lang="ar"] em,
html[data-lang="ar"] .section-head h2 em{font-style:normal}

/* Gradient text is painted only inside the element's background box, so any
   glyph part outside it disappears. Arabic ascenders (hamza, lam-alef) and
   descenders (ج ي ل) reach well past the line box — pad the box to fit them. */
html[data-lang="ar"] .hero__title,
html[data-lang="ar"] .stat__num,
html[data-lang="ar"] .section-head h2 em,
html[data-lang="ar"] .values__title em,
html[data-lang="ar"] .nav__brand-text strong,
html[data-lang="ar"] .footer__brand b,
html[data-lang="ar"] .product__num{
  padding-block:.30em;
  padding-inline:.10em;
  margin-inline:-.10em;   /* keep horizontal rhythm unchanged */
}
/* block-level ones would grow the layout, so pull the extra height back */
html[data-lang="ar"] .hero__title,
html[data-lang="ar"] .stat__num,
html[data-lang="ar"] .footer__brand b,
html[data-lang="ar"] .nav__brand-text strong{margin-block:-.30em}
/* soften the very wide Latin tracking for Chinese */
html[data-lang="zh"] .kicker,
html[data-lang="zh"] .section-head h2{letter-spacing:.08em}

/* ---- NAV right-hand cluster ---- */
.nav__cluster{display:flex;align-items:center;gap:22px}
.nav__tools{display:flex;align-items:center;gap:10px}

/* ---- language segmented control ---- */
.langsel{
  position:relative;display:flex;align-items:center;gap:2px;
  padding:3px;border:1px solid var(--line);border-radius:999px;
  background:rgba(212,175,55,.07);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.langsel__btn{
  position:relative;z-index:2;
  min-width:36px;height:28px;padding:0 9px;border:0;background:none;cursor:pointer;
  color:var(--muted);font-weight:700;font-size:.78rem;line-height:1;letter-spacing:.03em;
  border-radius:999px;transition:color .3s;font-family:var(--ff-en);
}
.langsel__btn[data-lang="ar"]{font-family:var(--ff-ar);font-size:.95rem}
.langsel__btn[data-lang="zh"]{font-family:var(--ff-zh);font-size:.9rem}
.langsel__btn:hover{color:var(--gold-hi)}
.langsel__btn.is-active{color:#1c1305}
.langsel__ind{
  position:absolute;z-index:1;top:3px;bottom:3px;left:0;width:0;
  border-radius:999px;background:var(--gold-grad-h);
  box-shadow:0 3px 12px rgba(212,160,23,.5);
  transition:transform .38s cubic-bezier(.16,1,.3,1),width .38s cubic-bezier(.16,1,.3,1);
}

/* ---- theme toggle ---- */
.themetoggle{
  position:relative;width:38px;height:38px;flex-shrink:0;
  border-radius:50%;border:1px solid var(--line);color:var(--gold);
  background:rgba(212,175,55,.07);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,transform .3s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.themetoggle:hover{border-color:var(--gold);background:rgba(212,175,55,.15);transform:translateY(-1px)}
.themetoggle svg{position:absolute;width:19px;height:19px;transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.themetoggle .i-moon{fill:var(--gold);opacity:1;transform:rotate(0) scale(1)}
.themetoggle .i-sun{fill:none;stroke:var(--gold);opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-theme="light"] .themetoggle .i-moon{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-theme="light"] .themetoggle .i-sun{opacity:1;transform:rotate(0) scale(1)}

/* ---- hero localized one-liner ---- */
.hero__note{
  color:var(--muted);font-size:clamp(.85rem,1.8vw,1.05rem);
  margin:10px auto 0;max-width:640px;line-height:1.7;
}

/* ============================================================
   LIGHT THEME
   (the hero + the export-map box stay dark as cinematic showcases)
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;
  --bg-0:#f6f3ec;
  --bg-1:#efeadf;
  --bg-2:#e7e1d2;
  --panel:#ffffff;
  --panel-2:#fbf9f2;
  --line:rgba(150,110,20,.30);
  --line-soft:rgba(150,110,20,.15);
  --text:#211f19;
  --muted:#6b665a;
  --gold:#a9791b;
  --gold-hi:#8a6410;
  --cream:#fdf7e8;
  --shadow-gold:0 12px 40px rgba(150,110,20,.16);
}
/* re-assert the dark palette inside the always-dark islands */
html[data-theme="light"] .hero{
  --bg-0:#0a0a0d;--bg-1:#0f0f13;--bg-2:#14141a;
  --text:#eceae3;--muted:#a6a39a;--gold:#d4af37;--gold-hi:#f7d774;
  --line:rgba(212,175,55,.22);--line-soft:rgba(212,175,55,.12);
}
html[data-theme="light"] .nav:not(.nav--scrolled){
  --text:#eceae3;--muted:#c9c6bd;--gold:#d4af37;--gold-hi:#f7d774;--line:rgba(212,175,55,.28);
}
html[data-theme="light"] .nav--scrolled{
  background:rgba(250,247,240,.86);
  border-bottom-color:var(--line-soft);
  box-shadow:0 10px 30px rgba(120,90,20,.12);
}

/* hardcoded dark backgrounds -> light equivalents */
html[data-theme="light"] .stats{background:linear-gradient(180deg,#f2ecdf,#ece5d4);border-block-color:var(--line-soft)}
html[data-theme="light"] .about__badge{background:linear-gradient(150deg,#fffdf6,#f3ecd8)}
html[data-theme="light"] .vmv-card{background:linear-gradient(165deg,#ffffff,#faf5e9 72%)}
html[data-theme="light"] .industry{background:linear-gradient(160deg,#ffffff,#f6efdd)}
html[data-theme="light"] .step{background:linear-gradient(180deg,#ffffff,#f6efdd)}
html[data-theme="light"] .quality{background:linear-gradient(160deg,#fffdf6,#f3ecd8)}
html[data-theme="light"] .footer{background:#ece5d5;border-top-color:var(--line-soft)}
html[data-theme="light"] .footer__bar{color:#8a8474;border-top-color:rgba(120,90,20,.16)}

/* hardcoded near-white text -> dark ink */
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .stat__en,
html[data-theme="light"] .about__text p,
html[data-theme="light"] .vmv-card h3,
html[data-theme="light"] .product h3,
html[data-theme="light"] .activity h3,
html[data-theme="light"] .industry b,
html[data-theme="light"] .step h3,
html[data-theme="light"] .badge b,
html[data-theme="light"] .pack b,
html[data-theme="light"] .quality__title,
html[data-theme="light"] .ccard p{color:var(--text)}

html[data-theme="light"] .about__media > img{box-shadow:0 24px 60px rgba(80,60,10,.18)}
html[data-theme="light"] ::-webkit-scrollbar-track{background:#e7e0d0}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:linear-gradient(#c8a53c,#9a6d1b);border-color:#e7e0d0}

/* mobile nav drawer needs dark ink on its light panel */
@media (max-width:920px){
  html[data-theme="light"] .nav__links{background:rgba(250,247,240,.98);border-inline-start-color:var(--line-soft)}
  html[data-theme="light"] .nav__links a{color:#211f19}
  html[data-theme="light"] .nav__links a:hover{color:#8a6410}
}

/* ---- controls: responsive ---- */
@media (max-width:920px){ .nav__cluster{gap:12px} }
@media (max-width:420px){
  .nav__tools{gap:7px}
  .langsel__btn{min-width:30px;padding:0 6px}
  .themetoggle{width:34px;height:34px}
  .nav__brand-text small{display:none}
}