/*! Website by Fkhatib · © 2026 ZALAL MOWAFAQ */
/* ZALAL MOWAFAQ — website concept. Mobile-first, logical properties (RTL-ready), no frameworks. */
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-var.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Onest";src:url(/fonts/onest-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(/fonts/vazirmatn-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(/fonts/vazirmatn-bold.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(/fonts/vazirmatn-extrabold.woff2) format("woff2");font-weight:800 900;font-display:swap}

:root{
  --ink:#04140f; --forest:#062b1f; --emerald:#0b3d2c; --green:#00a650; --green-d:#008440; --lime:#b6f36a; --lime-2:#8be04e;
  --mint:#e7f5ec; --cream:#f5f7f0; --paper:#fff; --text:#0c1d16; --muted:#5a6b62; --line:rgba(12,29,22,.1);
  --gold:#e6b450; --gold-2:#fff0c2; --neon:#8dff1f;
  --r:24px; --r-sm:14px; --hdr:72px;
  --f-display:"Unbounded",system-ui,sans-serif; --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* type scale — professional B2B harmony (headings / body / CTAs) */
  --fs-body:16px; --lh-body:1.65; --fw-body:450;
  --fs-lead:clamp(1.05rem,1.4vw,1.175rem); --lh-lead:1.65;
  --fs-h2:clamp(1.7rem,4.1vw,3.05rem); --lh-display:1.12; --ls-display:-.022em; --fw-display:750;
  --fs-h3:clamp(1.15rem,1.6vw,1.35rem); --lh-h3:1.25;
  --fs-eyebrow:11.5px; --ls-eyebrow:.14em; --fw-eyebrow:700;
  --fs-btn:15px; --fw-btn:650; --ls-btn:.015em;
  --fs-small:13.5px; --lh-small:1.45;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 2px rgba(4,20,15,.05),0 12px 32px -12px rgba(4,20,15,.18);
}
.rtl-script{--f-display:"Vazirmatn",system-ui,sans-serif;--f-body:"Vazirmatn",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 8px)}
body{margin:0;font-family:var(--f-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);color:var(--text);background:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:inherit}
.rtl-script h1,.rtl-script h2,.rtl-script h3,.rtl-script h4{letter-spacing:0;line-height:1.4;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.wrap{padding-inline:36px}}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:200;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.ic{width:20px;height:20px;flex:none}
[dir=rtl] .ic--arrow{transform:scaleX(-1)}

/* ---------- type helpers */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--green-d);margin-bottom:16px;line-height:1.3}
.eyebrow::before{content:"";width:26px;height:2.5px;border-radius:3px;background:currentColor;opacity:.9}
.rtl-script .eyebrow{letter-spacing:0;font-size:13.5px;font-weight:700}
.eyebrow--pill{color:var(--lime);background:rgba(182,243,106,.1);border:1px solid rgba(182,243,106,.25);padding:8px 14px;border-radius:99px;letter-spacing:.12em}
.eyebrow--pill::before{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px rgba(182,243,106,.18);opacity:1}
.h2{font-size:var(--fs-h2);max-width:18ch;overflow-wrap:break-word;hyphens:auto;line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-display)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:450;color:var(--muted);max-width:58ch;margin-top:16px}
.sec{padding-block:clamp(72px,10vw,140px)}
.sec--tight{padding-bottom:clamp(40px,5vw,64px)}
.sec__head{margin-bottom:clamp(32px,4vw,56px)}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:28px;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:450;max-width:80ch}
.note .ic{margin-top:2px;color:var(--green)}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:650;letter-spacing:.01em;color:var(--green-d);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.link:hover{border-color:currentColor}
.link .ic{width:16px;height:16px}

/* ---------- buttons */
.btn{--bg:var(--ink);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;
  border-radius:99px;border:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-weight:var(--fw-btn);font-size:var(--fs-btn);letter-spacing:var(--ls-btn);line-height:1.2;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px var(--glow,rgba(0,0,0,.4))}
.btn:active{transform:translateY(0)}
.btn .ic{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .ic--arrow{transform:translateX(3px)}
[dir=rtl] .btn:hover .ic--arrow{transform:scaleX(-1) translateX(3px)}
.btn--lg{min-height:54px;padding:14px 26px;font-size:15.5px;letter-spacing:.018em}
.btn--block{width:100%}
.btn--lime{--bg:var(--lime);--fg:var(--ink);--glow:rgba(182,243,106,.7)}
.btn--ghost{--bg:rgba(255,255,255,.06);--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn--ghost:hover{--bg:rgba(255,255,255,.12)}
.btn--white{--bg:#fff;--fg:var(--green-d);--glow:rgba(0,0,0,.35)}
.btn--gold{--bg:linear-gradient(135deg,#f7d27a,#c8922c);--fg:#1a1205;--glow:rgba(230,180,80,.6)}
.btn--neon{--bg:var(--neon);--fg:#061000;--glow:rgba(141,255,31,.6)}
.btn--dark{--bg:var(--ink);--fg:#fff}

/* ---------- header */
.hdr{position:fixed;inset-inline:0;top:0;z-index:100;height:var(--hdr);color:#fff;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.hdr.is-scrolled{background:rgba(4,20,15,.78);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.hdr__in{height:100%;display:flex;align-items:center;gap:20px}
.hdr__logo{flex:none}
.hdr__logo img{height:40px;width:auto;max-width:none}
@media (min-width:768px){.hdr__logo img{height:48px}}
.nav{display:none}
.hdr__right{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.hdr__cta{display:none;min-height:42px;padding:10px 18px;font-size:13.5px;font-weight:var(--fw-btn);letter-spacing:var(--ls-btn);white-space:nowrap;flex:none}
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:99px;border:0;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer;font-weight:700;font-size:14px}
.lang__btn .ic{width:18px;height:18px}
.lang__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:170px;padding:8px;border-radius:16px;background:#fff;color:var(--text);
  box-shadow:0 20px 50px -12px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s var(--ease)}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:none}
.lang__menu a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.lang__menu a:hover{background:var(--mint)}
.lang__menu a[aria-current]{background:var(--mint);color:var(--green-d)}
.lang__menu a[lang=fa-AF]{font-family:"Vazirmatn",sans-serif}
.burger{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  display:grid;place-content:center;gap:6px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease)}
.nav-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1139px){
  .nav{display:flex;position:fixed;inset:var(--hdr) 0 0 0;flex-direction:column;gap:4px;padding:28px 20px 40px;background:rgba(4,20,15,.97);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s var(--ease);overflow:auto}
  .nav-open .nav{opacity:1;visibility:visible;transform:none}
  .nav a{font-family:var(--f-display);font-weight:700;font-size:24px;padding:12px 4px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav .nav__cta-m{margin-top:24px;border:0;font-family:var(--f-body);font-size:16px}
  .nav-open{overflow:hidden}
  .nav-open .hdr{background:rgba(4,20,15,.97)}
}
@media (min-width:1140px){
  .nav{display:flex;gap:2px;margin-inline-start:12px}
  .nav a{padding:10px 12px;border-radius:99px;text-decoration:none;font-size:13.5px;font-weight:550;letter-spacing:.01em;opacity:.88;white-space:nowrap;transition:opacity .2s,background .2s}
  .nav a{padding:10px clamp(6px,.75vw - 2px,12px);font-size:clamp(12.5px,.55vw + 5px,14px)}
  .nav a:hover,.nav a.is-active{opacity:1;background:rgba(255,255,255,.08)}
  .nav .nav__cta-m{display:none}
  .burger{display:none}
  .hdr__cta{display:inline-flex}
}

/* ---------- hero */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--ink);padding-top:calc(var(--hdr) + 20px)}
.hero__bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 55% at 72% 58%,rgba(0,166,80,.55),transparent 70%),
  radial-gradient(40% 40% at 10% 0%,rgba(182,243,106,.14),transparent 70%),
  linear-gradient(180deg,#05211a 0%,#04140f 100%)}
.orb{position:absolute;border-radius:50%;opacity:.55} /* no blur filter: radial-gradient is already soft; animated 60px blur is costly in Safari */
.orb--1{width:46vmax;height:46vmax;inset-inline-end:-12vmax;top:10%;background:radial-gradient(circle,#00c060,transparent 65%);animation:orb 18s ease-in-out infinite alternate}
.orb--2{width:30vmax;height:30vmax;inset-inline-start:-10vmax;bottom:-12vmax;background:radial-gradient(circle,#0b6b3f,transparent 65%);animation:orb 22s ease-in-out infinite alternate-reverse}
@keyframes orb{to{transform:translate3d(-4vmax,3vmax,0) scale(1.08)}}
.hero__grain{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bubbles__b{position:absolute;bottom:-18px;left:var(--l);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(255,255,255,.14) 42%,rgba(255,255,255,.05) 62%,transparent 78%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);opacity:0;
  animation:bubble var(--t) cubic-bezier(.33,.05,.67,.95) var(--w) infinite;will-change:transform,opacity}
/* v7: canvas fizz (site.js) replaces the CSS bubbles when JS runs; the CSS ones stay as the no-JS fallback */
.bubbles__cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.bubbles.is-canvas .bubbles__b{display:none}
.bubbles__cv--front{z-index:1} /* above the cans (stage), below the copy (z-index 2) */
@keyframes bubble{
  0%{transform:translate3d(0,8px,0) scale(.75);opacity:0}
  14%{opacity:var(--op,.3)}
  72%{opacity:calc(var(--op,.3) * .65)}
  100%{transform:translate3d(var(--dx,10px),-105vh,0) scale(1);opacity:0}
}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center;min-height:calc(100svh - var(--hdr) - 20px)}
.hero__copy{position:relative;z-index:2;padding-top:18px}
@media (max-width:979px){
  .hero__in{gap:0;min-height:0;padding-bottom:36px}
  .hero__copy{display:contents}
  .hero__copy > *{position:relative;z-index:2}
  .hero .eyebrow--pill{order:1;justify-self:start;margin-top:18px;font-size:10.5px;letter-spacing:.07em;padding:7px 12px}
  .hero__title{order:2;margin-top:16px}
  .stage{order:3;height:clamp(290px,82vw,420px);margin-top:4px}
  .hero__sub{order:4;margin-top:8px}
  .hero__ctas{order:5;margin-top:24px}
  .hero__ctas .btn{flex:1 1 auto}
  .hero__badges{order:6;margin-top:22px}
}
.hero__title{font-size:clamp(2.2rem,7.8vw,4.5rem);line-height:1.06;letter-spacing:-.03em;font-weight:var(--fw-display);max-width:13ch;color:#fff}
.lang-ru .hero__title{font-size:clamp(1.55rem,6.8vw,3.1rem);max-width:16ch}
.lang-uz .hero__title{font-size:clamp(1.85rem,6.6vw,3.7rem)}
.rtl-script .hero__title{line-height:1.35;letter-spacing:0;font-size:clamp(2.3rem,8.2vw,4.9rem);font-weight:800}
.hero__title em{font-style:normal;display:inline;background:linear-gradient(100deg,var(--lime) 10%,#5be08a 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{margin-top:20px;font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:450;color:rgba(255,255,255,.78);max-width:52ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__badges{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:500;color:rgba(255,255,255,.78)}
.hero__badges li{display:flex;align-items:center;gap:8px}
.hero__badges .ic{width:18px;height:18px;color:var(--lime)}
.stage{position:relative;height:clamp(300px,92vw,460px);margin-inline:-10px;perspective:1100px;perspective-origin:50% 45%;transform-style:preserve-3d}
.stage__glow{position:absolute;left:50%;bottom:6%;width:78%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(182,243,106,.35),rgba(0,166,80,.15) 45%,transparent 70%)}
.stage__ring{position:absolute;left:50%;bottom:10%;width:70%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  border:1px solid rgba(182,243,106,.22);box-shadow:0 0 0 30px rgba(182,243,106,.03),0 0 0 70px rgba(182,243,106,.02)}
.fcan{position:absolute;left:calc(var(--x) * 1%);bottom:calc(var(--b) * 1%);height:calc(var(--h) * 1%);z-index:var(--z);
  transform:translate3d(calc(-50% + var(--px,0px) * var(--depth)),calc(var(--py,0px) * var(--depth)),var(--lift,0px))
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;will-change:transform;cursor:pointer}
.fcan__rise,.fcan__float{height:100%}
.fcan__rise{animation:rise 1.25s var(--ease) both;animation-delay:calc(.15s + (6 - var(--z)) * .09s)}
.fcan__float{animation:float var(--dur) ease-in-out var(--del) infinite}
.fcan img{height:100%;width:auto;max-width:none;transform:rotate(var(--rot))}
.fcan--soft img{filter:blur(var(--blur))} /* class, not [style*=] (JS setProperty reserialises style in WebKit, which made sharp cans get blur(0px)) */
.fcan--soft img{opacity:.92}
/* NO filter:drop-shadow on any image (Safari/WebKit, iOS and macOS, paints drop-shadowed animated imgs as white boxes); ground shadows are separate elements */

.fcan__shadow{position:absolute;left:50%;bottom:-5%;width:80%;height:7%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);animation:shadow var(--dur) ease-in-out var(--del) infinite;z-index:-1}
@keyframes rise{from{opacity:0;transform:translateY(40%) scale(.92)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4.5%)}}
@keyframes shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(.82);opacity:.6}}
.hero__scroll{display:none}
@media (min-width:980px){
  .hero{padding-top:var(--hdr)}
  .hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:24px;min-height:calc(100svh - var(--hdr));max-height:980px;min-height:min(calc(100svh - var(--hdr)),900px)}
  .hero__copy{padding-block:40px 80px}
  .stage{height:min(76vh,660px);margin:0;align-self:end;margin-bottom:6vh}
  .hero__scroll{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:8px;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none}
  .hero__scroll i{width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);position:relative}
  .hero__scroll i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--lime);transform:translateX(-50%);animation:wheel 1.8s ease-in-out infinite}
}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* ---------- marquee */
.marquee{background:var(--lime);color:var(--ink);overflow:hidden;padding-block:16px;border-block:1px solid rgba(4,20,15,.1)}
.marquee__track{display:flex;width:max-content;gap:28px;align-items:center;animation:marquee 46s linear infinite;direction:ltr}
.marquee span{font-family:var(--f-display);font-weight:650;font-size:clamp(14px,1.45vw,18px);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.rtl-script .marquee span{text-transform:none;font-weight:800;direction:rtl;unicode-bidi:isolate}
.marquee b{font-size:14px;color:var(--green-d)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- about */
.about{background:var(--cream)}
.about__in{display:grid;gap:48px}
.vm{display:grid;gap:14px;margin:30px 0 0}
.vm div{padding:18px 20px;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow)}
.vm dt{font-family:var(--f-display);font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--green-d);margin-bottom:6px;line-height:1.3}
.rtl-script .vm dt{letter-spacing:0;font-size:13.5px}
.vm dd{margin:0;font-weight:500;line-height:var(--lh-body);color:var(--text)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center}
.stat{position:relative;overflow:hidden;padding:26px 22px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}
.stat b{font-family:var(--f-display);font-size:clamp(2.6rem,5.6vw,4.2rem);line-height:1;font-weight:var(--fw-display);letter-spacing:-.03em;color:var(--green)}
.stat>span{margin-top:10px;font-weight:500;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.stat::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--mint)}
.stat--halal{background:var(--forest)}
.stat--halal b{color:var(--lime);font-size:clamp(2.2rem,4.6vw,3.4rem)}
.stat--halal>span{color:rgba(255,255,255,.7)}
.stat--halal::after{background:rgba(182,243,106,.08)}
@media (min-width:980px){.about__in{grid-template-columns:1.05fr 1fr;gap:72px;align-items:center}.vm{grid-template-columns:1fr 1fr}}

/* ---------- brand worlds */
.brands{background:var(--cream)}
.brands__head{padding-top:0}
.bw{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(72px,10vw,130px)}
.bw__deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bw__deco span{position:absolute;border-radius:50%;filter:blur(60px)}
.bw__in{display:grid;gap:40px;align-items:center}
.bw__logo{width:clamp(150px,22vw,230px);height:auto;margin-bottom:24px}
.bw__slogan{font-size:clamp(1.85rem,4.6vw,3.6rem);max-width:14ch;line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-display)}
.bw__tag{margin-top:14px;font-weight:650;font-size:var(--fs-small);letter-spacing:.04em;line-height:var(--lh-small);opacity:.88}
.bw__text{margin-top:16px;font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:450;max-width:52ch;opacity:.9}
.bw__keys{margin-top:14px;font-size:var(--fs-small);font-weight:550;line-height:var(--lh-small);opacity:.82}
.bw .btn{margin-top:28px}
.bw__warn{margin-top:18px;font-size:12.5px;opacity:.6;max-width:60ch;line-height:1.5}
.bw__amb{margin-top:18px;font-weight:700;font-size:14px}
.bw__visual{position:relative;display:grid;place-items:center}
.bw__lineup{width:100%;max-width:720px}
.bw__lineup--tall{max-width:440px}
@media (min-width:980px){
  .bw__in{grid-template-columns:1fr 1.1fr;gap:56px}
  .bw__in--rev .bw__copy{order:2}
}
/* MANI: fresh green / fruit */
.bw--mani{color:#fff;background:radial-gradient(70% 60% at 80% 35%,#2fd57a 0%,transparent 70%),linear-gradient(160deg,#00a650 0%,#008a43 60%,#006b33 100%)}
.bw--mani .bw__deco span:nth-child(1){width:520px;height:520px;inset-inline-end:-160px;top:-160px;background:#eaffb0;opacity:.3}
.bw--mani .bw__deco span:nth-child(2){width:360px;height:360px;inset-inline-start:-140px;bottom:10%;background:#ff4f79;opacity:.28}
.bw--mani .bw__deco span:nth-child(3){width:300px;height:300px;inset-inline-start:52%;top:30%;background:#d9f59a;opacity:.3}
.bw--mani .bw__slogan{font-weight:800}
.bw__lines{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;max-width:520px}
.bw__lines li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-weight:600;font-size:14px;line-height:1.3}
.bw__lines b{font-family:var(--f-display);font-size:24px;color:#fff;min-width:24px}
.bw__moments{display:grid;gap:18px;margin-top:clamp(48px,6vw,80px)}
.moment{margin:0;position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.moment img{width:100%;aspect-ratio:16/10;object-fit:cover}
.moment figcaption{position:absolute;inset:auto 0 0 0;padding:60px 22px 20px;background:linear-gradient(transparent,rgba(0,40,20,.85));font-size:15px;line-height:1.45}
.moment figcaption b{display:block;font-family:var(--f-display);font-size:20px;margin-bottom:4px}
.moment__chips{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:22px;padding:28px 24px 30px;border-radius:var(--r);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.moment__chips p{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.moment__chips span{padding:10px 18px;border-radius:99px;background:#fff;color:var(--green-d);font-weight:700;font-size:14px}
.moment__chips img{width:100%;max-width:400px}
@media (min-width:980px){.bw__moments{grid-template-columns:1.3fr 1fr}}
/* HERO: dark gold */
.bw--hero{color:#f6ead0;background:radial-gradient(55% 60% at 30% 50%,rgba(230,180,80,.28),transparent 70%),linear-gradient(180deg,#0d0a05,#060503)}
.bw--hero .bw__deco span:nth-child(1){width:520px;height:520px;inset-inline-start:2%;top:50%;transform:translateY(-50%);border:1px solid rgba(230,180,80,.18);box-shadow:0 0 0 50px rgba(230,180,80,.03)}
.bw--hero .bw__slogan{background:linear-gradient(100deg,#fff0c2,#e6b450 50%,#b07d1a);-webkit-background-clip:text;background-clip:text;color:transparent}
.bw--hero .bw__tag{color:var(--gold)}
/* ATTACK: neon green / black */
.bw--attack{color:#eaffd6;background:radial-gradient(50% 60% at 75% 50%,rgba(141,255,31,.2),transparent 70%),
  repeating-linear-gradient(-45deg,rgba(141,255,31,.035) 0 2px,transparent 2px 22px),#040503}
.bw--attack .bw__deco span:nth-child(1){width:600px;height:600px;inset-inline-end:-10%;top:50%;transform:translateY(-50%);background:radial-gradient(circle,rgba(141,255,31,.16),transparent 60%);filter:blur(20px)}
.bw--attack .bw__slogan{color:var(--neon);text-shadow:0 0 30px rgba(141,255,31,.35);text-transform:uppercase;font-weight:900}
.rtl-script .bw--attack .bw__slogan{text-transform:none}
.bw--attack .bw__tag{color:var(--neon)}

/* ---------- products */
.products{background:var(--cream)}
.filters{display:grid;gap:12px;margin-bottom:28px;padding:16px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.filters__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filters__l{font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);min-width:56px;line-height:1.3}
.rtl-script .filters__l{letter-spacing:0;font-size:13px}
.chip{min-height:40px;padding:8px 16px;border-radius:99px;border:0;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:14px;letter-spacing:.01em;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--green)}
.chip.is-on{background:var(--ink);color:#fff;box-shadow:none}
.chip--mani.is-on{background:var(--green)}
.chip--hero.is-on{background:linear-gradient(135deg,#f7d27a,#b07d1a);color:#1a1205}
.chip--attack.is-on{background:#0b0d08;color:var(--neon)}
.filters__count{font-size:var(--fs-small);color:var(--muted);font-weight:500;line-height:var(--lh-small)}
@media (min-width:980px){.filters{grid-template-columns:auto auto 1fr;align-items:center;gap:24px;padding:12px 20px}.filters__count{text-align:end}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.card{animation:cardin .5s var(--ease) both}
/* v6: grouped product grid. Flex rows centre a short last row; 2 / 4 / 5 per row. Below 1100 px the first card of an
   odd-sized group is a wide card (photo + text side by side), so a group never ends with one lonely card on a phone. */
.pgroups{display:grid;gap:clamp(30px,4.2vw,52px)}
.pgroup[hidden]{display:none}
.pgroup__head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px;margin:0 0 14px;padding:0 2px 10px;border-bottom:1px solid var(--line)}
.pgroup__t{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.7vw,21px);line-height:1.25;letter-spacing:var(--ls-display);color:var(--ink)}
.pgroup__meta{margin:0;margin-inline-start:auto;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rtl-script .pgroup__meta{letter-spacing:0;font-size:12.5px}
@media (max-width:639.98px){.pgroup__head{flex-direction:column;align-items:flex-start}.pgroup__meta{margin-inline-start:0}}
.pgroup__grid{--n:2;--g:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);margin:0;padding:0;list-style:none}
.pgroup__grid>.card{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));min-width:0}
@media (min-width:640px){.pgroup__grid{--n:4;--g:16px}}
@media (min-width:1100px){.pgroup__grid{--n:5;--g:18px}}
@media (max-width:1099.98px){
  .pgroup__grid>.card--lead{flex-basis:calc((100% - (var(--n) - 1) * var(--g)) / var(--n) * 2 + var(--g))}
  .card--lead .card__btn{flex-direction:row;align-items:stretch}
  .card--lead .card__media{flex:0 0 calc(50% - var(--g) / 2);aspect-ratio:1/1.05;align-self:center}
  .card--lead .card__body{justify-content:center;padding-block:16px;padding-inline:4px 16px}
  .card--lead .card__name{font-size:18px}
  .card--lead .card__meta{margin-top:6px}
}
.card[hidden]{display:none}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.card__btn{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:0;text-align:start;background:#fff;border-radius:var(--r);overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s}
.card__btn:hover{transform:translateY(-6px);box-shadow:0 30px 50px -24px color-mix(in srgb,var(--c) 60%,transparent)}
.card__media{position:relative;display:grid;place-items:center;aspect-ratio:1/1.05;overflow:hidden;perspective:720px;perspective-origin:50% 60%;
  background:radial-gradient(70% 60% at 50% 62%,color-mix(in srgb,var(--c2) 70%,#fff) 0%,color-mix(in srgb,var(--c) 22%,#fff) 70%)}
.card__halo{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--c2) 55%,#fff);opacity:.7;bottom:12%}
.card__media img{position:absolute;z-index:1;left:4%;top:8%;width:92%;height:86%;max-width:none;margin:0;object-fit:contain;object-position:50% 100%;
  transform-style:preserve-3d;transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1);
  transition:transform .45s var(--ease);will-change:transform}
/* whole can always visible: abs-positioned + contain (Safari ignored % height in the aspect-ratio grid and cropped the can) */
.card__media::after{content:"";position:absolute;z-index:0;left:50%;bottom:3%;width:50%;height:6%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.32),transparent);transition:transform .45s var(--ease),opacity .45s}
.card__btn:hover .card__media img{transform:translate3d(0,-8px,22px) rotateX(4deg) rotateY(-7deg) scale(1.05)}
.card__btn:hover .card__media::after{transform:translateX(-50%) scale(.88);opacity:.75}
.card__btn.is-tilting .card__media img{transition:transform .12s ease-out}
/* 360° cans: one shared WebGL renderer paints into each card's own canvas; the photo stays underneath until the
   first 3D frame is ready (and stays for reduced motion / no WebGL). No CSS drop-shadow (Safari white boxes). */
.card__media .can3d{position:absolute;z-index:2;left:15%;top:0;width:70%;height:100%;pointer-events:none;opacity:0;
  transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1);transition:opacity .6s var(--ease),transform .45s var(--ease)}
.card__media.is-3d .can3d{opacity:1}
.card__media.is-3d img{opacity:0;transition:opacity .6s var(--ease) .15s,transform .45s var(--ease)}
.card__btn:hover .card__media .can3d{transform:translate3d(0,-8px,22px) rotateX(4deg) rotateY(-7deg) scale(1.05)}
.card__btn.is-tilting .card__media .can3d{transition:opacity .6s var(--ease),transform .12s ease-out}
.card__body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.card__brand{font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);line-height:1.3}
.rtl-script .card__brand{letter-spacing:0;font-size:12.5px}
.card__name{font-family:var(--f-display);font-weight:700;font-size:15.5px;line-height:1.22;letter-spacing:var(--ls-display);color:var(--ink)}
.card__flav{font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-small);font-weight:450}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:10px}
.card__meta i{font-style:normal;font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--c) 12%,#fff);color:color-mix(in srgb,var(--c) 80%,#000)}
.card__meta em{margin-inline-start:auto;font-style:normal;display:none;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--green-d)}
.card__meta em .ic{width:15px;height:15px}
@media (min-width:640px){.card__name{font-size:16.5px}.card__meta em{display:inline-flex}.card__body{padding:16px 18px 18px}}

/* ---------- why */
.why{background:var(--forest);color:#fff;position:relative;overflow:hidden}
.why::before{content:"";position:absolute;width:60vmax;height:60vmax;inset-inline-end:-20vmax;top:-20vmax;border-radius:50%;background:radial-gradient(circle,rgba(0,166,80,.35),transparent 65%)}
.sec__head--light .eyebrow{color:var(--lime)}
.tiles{position:relative;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:600px){.tiles{grid-template-columns:1fr 1fr;gap:14px}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(4,1fr);gap:16px}}
.tile{position:relative;padding:26px 24px;border-radius:var(--r);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:transform .35s var(--ease),background .35s,box-shadow .35s;min-height:200px}
.tile:hover{transform:translateY(-4px);background:rgba(182,243,106,.06);box-shadow:inset 0 0 0 1px rgba(182,243,106,.35)}
.tile__ic{width:44px;height:44px;color:var(--lime);margin-bottom:22px}
.tile h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700;letter-spacing:var(--ls-display)}
.tile p{margin-top:10px;color:rgba(255,255,255,.72);font-size:var(--fs-small);line-height:var(--lh-body);font-weight:450}
.tile--1{background:linear-gradient(150deg,var(--lime),#7fd65a);color:var(--ink)}
.tile--1 .tile__ic{color:var(--ink)}
.tile--1 h3{font-size:clamp(2.4rem,4vw,3.2rem);letter-spacing:-.03em}
.tile--1 p{color:rgba(4,20,15,.75)}
.tile--1:hover{background:linear-gradient(150deg,#c4f77f,#8be04e)}
.flags{position:absolute;inset-inline-end:22px;top:26px;display:flex;gap:6px}
.fl{width:28px;height:19px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.fl--de{background:linear-gradient(#000 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%)}
.fl--at{background:linear-gradient(#ed2939 0 33.3%,#fff 33.3% 66.6%,#ed2939 66.6%)}

/* ---------- quality */
.quality{background:#fff}
.quality__head{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;margin-bottom:clamp(32px,4vw,56px)}
.seal{position:relative;width:150px;height:150px;justify-self:start}
.seal svg{width:100%;height:100%;animation:spin 28s linear infinite;font-family:"Unbounded",sans-serif;font-size:12px;font-weight:700;fill:var(--green-d)}
.seal span{position:absolute;inset:26px;display:grid;place-items:center;border-radius:50%;background:var(--forest);color:var(--lime);font-family:var(--f-display);font-weight:800;font-size:20px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:980px){.quality__head{grid-template-columns:minmax(0,1fr) auto}.seal{width:190px;height:190px}.seal span{inset:34px;font-size:24px}}
.certs{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:600px){.certs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.certs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.certs{grid-template-columns:repeat(5,1fr)}}
.cert{display:flex;flex-direction:column;border-radius:var(--r);background:var(--cream);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.cert:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.cert__img{display:block;height:200px;overflow:hidden;background:#e9ece4;padding:16px 16px 0}
.cert__img img{width:100%;height:auto;border-radius:6px 6px 0 0;box-shadow:0 10px 30px -10px rgba(0,0,0,.35);transition:transform .5s var(--ease)}
.cert:hover .cert__img img{transform:translateY(-6px)}
.cert__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.cert__kind{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d)}
.rtl-script .cert__kind{letter-spacing:0;font-size:12.5px}
.cert h3{font-size:17px;line-height:1.25;word-break:break-word}
.cert__desc{font-size:14px;color:var(--muted);line-height:1.45}
.cert__no{font-size:12.5px;font-weight:700;margin-top:4px;direction:ltr;unicode-bidi:isolate}
[dir=rtl] .cert__no{text-align:right}
.cert__by{font-size:12.5px;color:var(--muted)}
.cert .link{margin-top:auto;padding-top:8px;font-size:14px}

/* ---------- factory */
.factory{position:relative;background:var(--cream);padding-bottom:clamp(72px,10vw,130px)}
.factory__media{position:relative;height:clamp(300px,62vw,680px);overflow:hidden}
.factory__media img{width:100%;height:120%;object-fit:cover;margin-top:-10%}
.factory__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,15,.25),transparent 40%,var(--cream) 100%)}
.factory__cap{position:absolute;z-index:1;top:calc(var(--hdr) - 40px);inset-inline-start:20px;font-size:12px;font-weight:700;color:#fff;background:rgba(4,20,15,.5);padding:6px 12px;border-radius:99px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);top:20px}
.factory__in{position:relative;display:grid;gap:18px;margin-top:-90px}
.factory__card{padding:clamp(26px,4vw,48px);border-radius:28px;background:#fff;box-shadow:0 40px 80px -40px rgba(4,20,15,.35)}
.ticks{display:grid;gap:12px;margin-top:26px}
.ticks li{position:relative;padding-inline-start:34px;font-weight:600;line-height:1.45}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ticks--light li::before{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2304140f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.addr{display:grid;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.addr div{display:flex;gap:12px}
.addr .ic{color:var(--green);margin-top:3px}
.addr b{display:block;font-family:var(--f-display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.rtl-script .addr b{letter-spacing:0;font-size:14px}
.addr p{font-size:15px;color:var(--muted)}
.addr .link{margin-inline-start:6px;font-size:14px}
.factory__side{display:grid;gap:18px;align-content:end}
.factory__side figure{margin:0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.factory__side img{width:100%;aspect-ratio:16/9;object-fit:cover}
.factory__side figcaption{padding:12px 16px;font-size:13px;font-weight:600;color:var(--muted)}
@media (min-width:980px){.factory__in{grid-template-columns:1.15fr .85fr;gap:24px;margin-top:-180px}.factory__cap{inset-inline-start:36px}}

/* ---------- samimi */
.samimi{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,#f1fbe1 0%,#dcf5b5 55%,#c2ea85 100%)}
.samimi__bg span{position:absolute;border-radius:50%;z-index:-1}
.samimi__bg span:first-child{width:520px;height:520px;inset-inline-start:-140px;top:-160px;background:radial-gradient(circle,rgba(255,255,255,.8),transparent 65%)}
.samimi__bg span:last-child{width:420px;height:420px;inset-inline-end:-120px;bottom:-160px;background:radial-gradient(circle,rgba(111,181,47,.35),transparent 65%)}
.samimi__in{display:grid;gap:36px;align-items:center}
.samimi__visual{position:relative;max-width:440px;margin-inline:auto;width:100%}
.carton{width:100%;height:auto;animation:float2 7s ease-in-out infinite;font-family:var(--f-display)}
.carton__a1{animation:float 5.5s ease-in-out infinite;transform-box:fill-box}
@keyframes float2{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1deg)}}
.samimi__viz{text-align:center;font-size:12px;color:#4d6b33;margin-top:6px}
.badge-soon{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:99px;background:var(--ink);color:var(--lime);font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.rtl-script .badge-soon{letter-spacing:0;font-size:14px}
.badge-soon span{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(182,243,106,.7)}100%{box-shadow:0 0 0 12px rgba(182,243,106,0)}}
.samimi__title{margin-top:18px;font-size:clamp(3.4rem,11vw,8rem);font-weight:900;letter-spacing:-.04em;line-height:.95;
  background:linear-gradient(100deg,#2f7d1f,#6cb52f 60%,#3f7d17);-webkit-background-clip:text;background-clip:text;color:transparent}
.rtl-script .samimi__title{font-family:"Unbounded",sans-serif}
.samimi .lead{color:#33502a}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 28px;max-width:520px}
.facts div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(47,125,31,.15)}
.facts dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4d7a2b}
.rtl-script .facts dt{letter-spacing:0;font-size:13px}
.facts dd{margin:4px 0 0;font-weight:700;font-family:var(--f-display);font-size:15px}
@media (min-width:980px){.samimi__in{grid-template-columns:.9fr 1.1fr;gap:64px}.samimi__visual{max-width:480px}}

/* ---------- where */
.where{background:var(--cream)}
.where__grid{display:grid;gap:16px}
@media (min-width:900px){.where__grid{grid-template-columns:1.4fr 1fr 1fr}}
.wcard{position:relative;padding:28px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.wcard h3{font-size:20px}
.wcard p{color:var(--muted)}
.wcard--dunya img{width:180px;height:auto;mix-blend-mode:multiply;margin-bottom:6px}
.wcard__kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-d)!important}
.rtl-script .wcard__kicker{letter-spacing:0}
.wcard__list{display:grid;gap:8px;margin-top:6px}
.wcard__list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:12px 14px;border-radius:12px;background:var(--cream);font-size:14px}
.wcard__list span{font-weight:700}
.wcard__list a{color:var(--green-d);font-weight:700;text-decoration:none;direction:ltr}
.uzum{align-self:flex-start;font-family:var(--f-display);font-weight:800;font-size:26px;color:#fff;background:linear-gradient(135deg,#7f2bff,#5a00e0);padding:10px 18px;border-radius:14px;line-height:1;letter-spacing:-.02em}
.uzum small{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;opacity:.85;margin-top:4px}
.wcard--export{background:var(--forest);color:#fff}
.wcard--export p{color:rgba(255,255,255,.72)}
.wcard__ic{width:40px;height:40px;color:var(--lime)}
.wcard--export .btn{margin-top:auto;align-self:flex-start}

/* ---------- export */

/* ---------- expos / trade shows */
.expos{background:#fff}
.expos .lead{max-width:62ch}
.expos__grid{display:grid;gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:800px){.expos__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.expo{display:flex;flex-direction:column;gap:10px;padding:28px 26px;border-radius:var(--r);background:var(--cream);box-shadow:var(--shadow);border:1px solid var(--line)}
.expo__when{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.expo__badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;background:var(--mint);color:var(--green-d);font-family:var(--f-display);font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;line-height:1.3}
.expo__when time{font-weight:650;font-size:var(--fs-small);letter-spacing:.01em;color:var(--ink);line-height:var(--lh-small)}
.expo__name{font-family:var(--f-display);font-size:clamp(1.25rem,2.2vw,1.55rem);font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--ls-display);color:var(--ink);margin:4px 0 0}
.expo__place{font-size:var(--fs-small);font-weight:550;color:var(--green-d);line-height:var(--lh-small)}
.expo__note{font-size:var(--fs-small);font-weight:450;color:var(--muted);line-height:var(--lh-body);max-width:48ch}
.expo__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px}
.expo__ctas .btn{min-height:44px;padding:10px 18px;font-size:14px}
.expo-tools{margin-top:28px;display:grid;gap:20px;padding:28px;border-radius:var(--r);background:var(--ink);color:#fff;box-shadow:var(--shadow)}
@media (min-width:900px){.expo-tools{grid-template-columns:minmax(0,1.4fr) minmax(220px,280px);align-items:center;gap:32px;padding:32px 36px}}
.expo-tools__kicker{font-family:var(--f-display);font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--lime);margin:0 0 8px;line-height:1.3}
.expo-tools__title{font-family:var(--f-display);font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;letter-spacing:var(--ls-display);line-height:var(--lh-h3);margin:0 0 14px;color:#fff}
.expo-tools__brands{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 18px;font-size:var(--fs-small);color:rgba(255,255,255,.7)}
.expo-tools__brands span{margin-inline-end:4px;font-weight:550}
.expo-tools__brands a{display:inline-flex;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;text-decoration:none;font-weight:650;letter-spacing:.02em}
.expo-tools__brands a:hover{background:rgba(182,243,106,.16);box-shadow:inset 0 0 0 1px rgba(182,243,106,.45)}
.expo-tools__actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.expo-tools__actions .btn{min-height:46px;font-size:14px}
.btn--ghost-ink{--bg:rgba(255,255,255,.06);--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn--ghost-ink:hover{--bg:rgba(255,255,255,.12)}
.expo-tools__catalog{padding-top:4px;border-top:1px solid rgba(255,255,255,.1)}
.expo-tools__catalog .expo-tools__kicker{margin-top:16px}
.expo-tools__files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip-file{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-weight:600;font-size:13.5px;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.chip-file:hover{background:rgba(182,243,106,.14);color:var(--lime)}
.expo-qr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px;border-radius:20px;background:#fff;color:var(--ink)}
.expo-qr__link{display:block;line-height:0;border-radius:12px;overflow:hidden}
.expo-qr__img{width:min(180px,56vw);height:auto;background:#fff}
.expo-qr__label{margin:4px 0 0;font-size:14px;font-weight:700;letter-spacing:.01em}
.expo-qr__hint{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);max-width:28ch}
.expo-qr__url{margin:2px 0 0;font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--green-d)}
.prod-catalog-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.prod-catalog-links .btn{min-height:44px;padding:10px 18px;font-size:14px}

.export{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff}
.export__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 15% 20%,rgba(0,166,80,.4),transparent 70%),radial-gradient(40% 50% at 90% 90%,rgba(182,243,106,.12),transparent 70%)}
.export .eyebrow{color:var(--lime)}
.export .lead{color:rgba(255,255,255,.75)}
.export__in{display:grid;gap:40px;align-items:start}
@media (min-width:980px){.export__in{grid-template-columns:1fr 1fr;gap:64px}}
.tg{display:flex;align-items:center;gap:16px;margin-top:32px;padding:16px 20px;border-radius:20px;text-decoration:none;background:linear-gradient(135deg,#229ed9,#1c7fc0);box-shadow:0 20px 40px -20px rgba(34,158,217,.8);transition:transform .3s var(--ease)}
.tg:hover{transform:translateY(-3px)}
.tg__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#229ed9;flex:none}
.tg__ic .ic{width:26px;height:26px}
.tg b{display:block;font-size:17px}
.tg small{display:block;font-size:13px;opacity:.85;line-height:1.4}
.tg > .ic{margin-inline-start:auto}
.contacts{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
@media (min-width:560px){.contacts{grid-template-columns:1fr 1fr}}
.contacts>a,.contacts__ph{padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);text-decoration:none;font-weight:700;direction:ltr;text-align:start}
[dir=rtl] .contacts>a,[dir=rtl] .contacts__ph{text-align:right}
.contacts__ph a{display:block;width:fit-content;text-decoration:none;color:inherit;line-height:1.55}
[dir=rtl] .contacts__ph a{margin-inline-start:auto}
.contacts__ph a:hover,.contacts>a:hover{color:var(--lime)}
.contacts small{display:block;font-weight:600;font-size:12px;color:rgba(255,255,255,.6);direction:initial}
/* sales manager chat: WhatsApp + Telegram */
.chats{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
@media (min-width:560px){.chats{grid-template-columns:1fr 1fr}}
.chat{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;text-decoration:none;color:#fff;transition:transform .3s var(--ease)}
.chat:hover{transform:translateY(-2px)}
.chat--wa{background:#1fa855;box-shadow:0 16px 30px -18px rgba(37,211,102,.9)}
.chat--tg{background:#229ed9;box-shadow:0 16px 30px -18px rgba(34,158,217,.9)}
.chat__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;flex:none}
.chat--wa .chat__ic{color:#1fa855}.chat--tg .chat__ic{color:#229ed9}
.chat__ic .ic{width:22px;height:22px}
.chat b{display:block;font-size:14.5px;line-height:1.3}
.chat small{display:block;font-size:12.5px;opacity:.9;margin-top:2px;text-align:start}
[dir=rtl] .chat small{text-align:right}
.ftr__chat{display:inline-flex;align-items:center;gap:8px}
.ftr__chat .ic{width:18px;height:18px;flex:none}
.ftr__chat--wa .ic{color:#25d366}.ftr__chat--tg .ic{color:#2aabee}
.fab{position:fixed;z-index:90;inset-inline-end:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
[dir=rtl] .fab{inset-inline-end:max(14px,env(safe-area-inset-left))}
.fab__btn{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#fff;text-decoration:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .25s var(--ease)}
.fab__btn:hover,.fab__btn:focus-visible{transform:scale(1.08)}
.fab__btn .ic{width:27px;height:27px}
.fab__btn--wa{background:#25d366}
.fab__btn--tg{background:#229ed9}
.fab__btn--tg .ic{width:24px;height:24px;margin-inline-end:2px}
.nav-open .fab{display:none}
@media (min-width:980px){.fab{inset-inline-end:24px;bottom:24px;gap:12px}[dir=rtl] .fab{inset-inline-end:24px}.fab__btn{width:56px;height:56px}.fab__btn .ic{width:30px;height:30px}}
@media (max-width:979px){.ftr{padding-bottom:110px}}
@media print{.fab{display:none}}
.form{padding:clamp(22px,3.4vw,40px);border-radius:28px;background:#fff;color:var(--text);box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.form h3{font-size:24px;margin-bottom:22px}
.form__grid{display:grid;gap:14px}
@media (min-width:560px){.form__grid{grid-template-columns:1fr 1fr}.fld--full{grid-column:1/-1}}
.fld{display:grid;gap:6px}
.fld span{font-size:13px;font-weight:700;color:var(--muted)}
.fld input,.fld textarea{width:100%;padding:13px 15px;border-radius:14px;border:0;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.fld input:focus,.fld textarea:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--green)}
.fld textarea{resize:vertical;min-height:110px}
.form > .fld{margin-top:14px}
.opts{border:0;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.opts legend{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px;padding:0}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:inline-flex;min-height:38px;align-items:center;padding:8px 14px;border-radius:99px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:700;transition:.2s}
.opt input:checked + span{background:var(--ink);color:#fff;box-shadow:none}
.opt input:focus-visible + span{outline:3px solid var(--lime);outline-offset:2px}
.form .btn{margin-top:22px}
.form__err{margin-top:14px;color:#c0262d;font-weight:700;font-size:14px}
.form__note{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- footer */
.ftr{background:#020c09;color:rgba(255,255,255,.72);padding-top:64px;font-size:14.5px}
.ftr__in{display:grid;gap:36px}
@media (min-width:800px){.ftr__in{grid-template-columns:1.4fr 1fr 1fr 1.3fr}}
.ftr__brand img{height:44px;width:auto}
.ftr__brand p{margin-top:16px;max-width:30ch}
.social{display:flex;gap:10px;margin-top:20px}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;transition:background .2s,color .2s}
.social a:hover{background:var(--lime);color:var(--ink)}
.ftr__col{display:flex;flex-direction:column;gap:10px}
.ftr__col h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.rtl-script .ftr__col h4{letter-spacing:0;font-size:15px}
.ftr__col a{text-decoration:none;width:fit-content}
.ftr__col a:hover{color:var(--lime)}
.ftr__col p{line-height:1.5}
.ftr__bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:48px;padding-block:22px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.ftr__langs{display:flex;gap:6px;flex-wrap:wrap}
.ftr__langs a{display:block;padding:4px 10px;border-radius:99px;text-decoration:none}
.ftr__langs a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
.ftr__concept{width:100%;font-size:12px;opacity:.5}
.ftr__legal{width:100%;max-width:120ch;font-size:11.5px;line-height:1.6;opacity:.5;text-align:start}
.rtl-script .ftr__legal{font-size:12.5px;line-height:1.9}

/* ---------- modal */
.modal{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--text)}
.modal::backdrop{background:rgba(2,12,9,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal[open]{display:flex;align-items:flex-end;justify-content:center}
.modal__box{position:relative;width:100%;max-height:92svh;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:28px 28px 0 0;display:grid;animation:sheet .45s var(--ease)}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal__x{position:sticky;top:12px;grid-area:1/1;justify-self:end;align-self:start;margin:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer}
.modal__media{position:relative;display:grid;place-items:center;height:300px;overflow:hidden;grid-area:1/1;perspective:860px;perspective-origin:50% 55%;
  background:radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--c2) 75%,#fff),color-mix(in srgb,var(--c) 30%,#fff) 75%)}
.modal__halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;max-width:340px;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--c2) 60%,#fff);opacity:.8}
.modal__media img{position:relative;height:260px;width:auto;max-width:78%;object-fit:contain;animation:float 6s ease-in-out infinite;transform-style:preserve-3d;transition:transform .35s var(--ease)}
.modal__media.is-tilting img{animation:none;transition:transform .12s ease-out}
.modal__media::after{content:"";position:absolute;left:50%;bottom:16px;width:120px;height:14px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.3),transparent)}
.modal__media img[data-ml="300"]{height:200px}
.modal__media img[data-ml="250"]{height:230px}
.modal__body{padding:24px 22px 32px;grid-area:2/1;min-width:0}
.pm-kicker{font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);line-height:1.3}
.rtl-script .pm-kicker{letter-spacing:0}
.pm-name{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:6px}
.pm-flav{margin-top:6px;font-weight:700;color:color-mix(in srgb,var(--c) 85%,#000)}
.pm-desc{margin-top:14px;color:var(--muted)}
.pm-var{display:flex;gap:8px;margin-top:18px}
/* v6: size switch (segmented, with a small can silhouette per size) + 3D can in the pop-up */
.pm-sizes{margin-top:16px}
.pm-sizes__l{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rtl-script .pm-sizes__l{letter-spacing:0;font-size:12px}
.pm-sizes .pm-var{display:inline-flex;gap:4px;margin:0;padding:4px;border-radius:99px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.pm-sizes .pm-var button{display:inline-flex;align-items:flex-end;gap:9px;min-height:46px;padding:8px 20px 10px 16px;background:transparent;box-shadow:none;font-size:15px;line-height:1;transition:background .25s,color .25s}
.pm-sizes .pm-var button i{display:block;border-radius:2.5px 2.5px 3px 3px;background:currentColor;opacity:.45;transition:opacity .25s}
.pm-sizes .pm-var button[aria-pressed=true]{background:var(--ink);color:#fff}
.pm-sizes .pm-var button[aria-pressed=true] i{opacity:1;background:color-mix(in srgb,var(--c2) 80%,#fff)}
.pm-sizes .pm-var button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.modal__media{--ch:260px}
.modal__media[data-ml="300"]{--ch:200px}
.modal__media[data-ml="250"]{--ch:230px}
.modal__media .can3d{position:absolute;z-index:2;inset:0;margin:auto;height:calc(var(--ch) / .86);width:calc(var(--ch) / .86 * .72);max-width:100%;
  pointer-events:none;opacity:0;transition:opacity .45s var(--ease);animation:float 6s ease-in-out infinite;transform-style:preserve-3d}
.modal__media.is-3d .can3d{opacity:1}
.modal__media.is-3d img{opacity:0;transition:opacity .45s var(--ease) .1s}
.modal__media.is-tilting .can3d{animation:none;transition:opacity .45s var(--ease),transform .12s ease-out}
.pm-var button{min-height:40px;padding:8px 16px;border-radius:99px;border:0;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-weight:700;cursor:pointer}
.pm-var button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.pm-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.pm-facts div{padding:12px;border-radius:14px;background:var(--cream)}
.pm-facts dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rtl-script .pm-facts dt{letter-spacing:0;font-size:12px}
.pm-facts dd{margin:4px 0 0;font-weight:700;font-size:14px;line-height:1.3}
.pm-h{font-family:var(--f-display);font-size:14px;font-weight:700;margin-top:22px}
.pm-keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pm-keys li{padding:6px 12px;border-radius:99px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 25%,transparent)}
.pm-halal{display:flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;font-size:14px;color:var(--green-d)}
.pm-acc{margin-top:14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.pm-acc summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.pm-acc summary::-webkit-details-marker{display:none}
.pm-acc summary::after{content:"+";font-size:20px;line-height:1;color:var(--green)}
.pm-acc[open] summary::after{content:"–"}
.pm-acc > div{padding:0 16px 16px;font-size:14px;color:var(--muted)}
.pm-acc p[lang=en]{direction:ltr;text-align:left}
.pm-nutr{width:100%;border-collapse:collapse;font-size:14px}
.pm-nutr td{padding:7px 0;border-bottom:1px solid var(--line)}
.pm-nutr td:last-child{text-align:end;font-weight:700;color:var(--text);direction:ltr}
.pm-warn{margin-top:14px;padding:12px 14px;border-radius:14px;background:#fff6e5;color:#7a4b00;font-size:13px;line-height:1.5}
.pm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pm-actions .btn{flex:1 1 200px}
.pm-note{margin-top:14px;font-size:12.5px;color:var(--muted)}
@media (min-width:860px){
  .modal[open]{align-items:center;padding:24px}
  .modal__box{max-width:1040px;max-height:min(88vh,820px);height:min(88vh,820px);border-radius:32px;grid-template-columns:.9fr 1.1fr;grid-template-rows:minmax(0,1fr);overflow:hidden}
  .modal__x{position:absolute;top:16px;inset-inline-end:16px;margin:0}
  .modal__media{height:auto;min-height:100%;grid-area:1/1}
  .modal__media img{height:min(62vh,540px)}
  .modal__media img[data-ml="300"]{height:min(44vh,400px)}
  .modal__media img[data-ml="250"]{height:min(54vh,470px)}
  .modal__media{--ch:min(62vh,540px)}.modal__media[data-ml="300"]{--ch:min(44vh,400px)}.modal__media[data-ml="250"]{--ch:min(54vh,470px)}
  .modal__body{overflow-y:auto;min-height:0;overscroll-behavior:contain;padding:44px 40px 40px;grid-area:1/2}
}

/* ---------- reveal + parallax */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.px{will-change:transform}

/* ---------- translation review mode (?review=1) */
.review [data-review]{outline:1.5px dashed #ff2d7a;outline-offset:2px;background:rgba(255,45,122,.08);border-radius:3px}
.review-badge{position:fixed;z-index:300;inset-inline-start:12px;bottom:12px;padding:10px 14px;border-radius:12px;background:#ff2d7a;color:#fff;font-weight:700;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.3)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .orb,.bubbles__b{display:none} /* v7: the canvas draws a few static bubbles instead */
  .fcan{transform:translateX(-50%)!important}
  .card__btn:hover .card__media img,.card__btn:hover .card__media .can3d,.bw__frame:hover img,.modal__media.is-tilting img{transform:none!important}
  .card__media.is-3d img{opacity:1}.card__media .can3d{display:none}
}

/* HERO framed key visual + ATTACK wide photo */
.bw__frame{margin:0 auto;width:min(84vw,440px);border-radius:28px;overflow:hidden;position:relative;perspective:900px;
  box-shadow:0 0 0 1px rgba(240,190,90,.35),0 40px 90px -30px rgba(240,170,40,.45),0 0 120px -40px rgba(255,190,60,.5)}
.bw__frame img{width:100%;height:auto;display:block;transform-style:preserve-3d;transition:transform .45s var(--ease)}
.bw__frame:hover img{transform:translate3d(0,-4px,16px) rotateX(2deg) scale(1.02)}
.bw__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 70%,rgba(10,7,2,.35))}
.bw__wide{margin:clamp(40px,6vw,72px) 0 0;border-radius:var(--r);overflow:hidden;position:relative;
  box-shadow:0 0 0 1px rgba(141,255,31,.22),0 40px 90px -40px rgba(141,255,31,.45)}
.bw__wide img{width:100%;height:auto;display:block;aspect-ratio:1600/678;object-fit:cover}
@media (max-width:640px){.bw__wide img{aspect-ratio:4/3;object-position:62% 50%}}

/* small Uzbekistan flag after the hero slogan */
.flag-uz{display:inline-block;width:.62em;height:.42em;margin-inline-start:.22em;vertical-align:.12em;border-radius:.07em;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 6px 14px -4px rgba(0,0,0,.5)}
.nw{white-space:nowrap}

/* registered trademark sign */
sup.reg{font-size:.5em;line-height:0;vertical-align:.85em;margin-inline-start:.04em;font-weight:inherit;letter-spacing:0}
/* can line / Tetra Pak capacity tile (About) */
.stat--cap{grid-column:1/-1;min-height:0;background:linear-gradient(135deg,#0f3b25,#062317);color:#fff;gap:14px;justify-content:flex-start}
.stat--cap::after{background:rgba(182,243,106,.08)}
.stat--cap .cap__l{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);position:relative;z-index:1}
.rtl-script .stat--cap .cap__l{letter-spacing:0;font-size:14px}
.cap__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;z-index:1}
.cap__row li{display:flex;flex-direction:column;gap:4px}
.stat--cap .cap__row b{font-size:clamp(1.05rem,4.6vw,1.75rem);color:#fff;letter-spacing:-.02em;white-space:nowrap}
@media (min-width:980px){.stat--cap .cap__row b{font-size:clamp(1.4rem,2.1vw,1.9rem)}}
.cap__row small{font-size:13px;font-weight:700;color:rgba(255,255,255,.62)}
.stat--cap .cap__tp{margin:0;display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
  font-size:14px;font-weight:600;color:rgba(255,255,255,.85);position:relative;z-index:1}
.stat--cap .cap__tp .ic{width:18px;height:18px;flex:none;color:var(--lime)}
.facts .facts__wide{grid-column:1/-1}
.samimi__title sup.reg{font-size:.26em;vertical-align:2.1em;margin-inline-start:.06em}
.lang-ru .stat--halal b,.lang-uz .stat--halal b{font-size:clamp(1.45rem,6.6vw,2.4rem)}

.ftr__credit{font-size:12px;opacity:.55;letter-spacing:.02em;unicode-bidi:isolate;direction:ltr}
@media (min-width:1140px) and (max-width:1299px){.lang-es .hdr__cta{display:none}} /* long ES CTA: keep the header on one line (hero has the same CTA) */


/* ===================== NAVY COLOUR THEME (visitor switch; default is green) =====================
   Applied via html[data-theme="navy"] (set before first paint by the inline head script).
   MANI / HERO / ATTACK brand sections keep their own colours. */
html[data-theme="navy"]{
  --ink:#08182e; --forest:#0e2a4f; --emerald:#13396a; --mint:#e9eff8;
  --cream:#f4f6fa; --text:#0c1a2e; --muted:#5b6679; --line:rgba(12,26,46,.1);
  --shadow:0 1px 2px rgba(8,24,46,.05),0 12px 32px -12px rgba(8,24,46,.2);
}
html[data-theme="navy"] .hdr.is-scrolled{background:rgba(11,31,58,.82)}
@media (max-width:1139px){html[data-theme="navy"] .nav{background:rgba(11,31,58,.97)}}
html[data-theme="navy"] .nav-open .hdr{background:rgba(11,31,58,.97)}
html[data-theme="navy"] .hero__bg{background:
  radial-gradient(60% 55% at 72% 58%,rgba(52,120,220,.5),transparent 70%),
  radial-gradient(40% 40% at 10% 0%,rgba(182,243,106,.10),transparent 70%),
  linear-gradient(180deg,#0e2a4f 0%,#0b1f3a 100%)}
html[data-theme="navy"] .hero{background:#0b1f3a}
html[data-theme="navy"] .orb--1{background:radial-gradient(circle,#2f6fd0,transparent 65%)}
html[data-theme="navy"] .orb--2{background:radial-gradient(circle,#173f78,transparent 65%)}
html[data-theme="navy"] .stage__glow{background:radial-gradient(circle,rgba(150,195,255,.30),rgba(52,120,220,.16) 45%,transparent 70%)}
html[data-theme="navy"] .marquee{border-block-color:rgba(8,24,46,.1)}
html[data-theme="navy"] .why{background:#0e2a4f}
html[data-theme="navy"] .why::before{background:radial-gradient(circle,rgba(60,135,235,.35),transparent 65%)}
html[data-theme="navy"] .tile--1 p{color:rgba(8,24,46,.75)}
html[data-theme="navy"] .stat--cap{background:linear-gradient(135deg,#13396a,#0b1f3a)}
html[data-theme="navy"] .factory__media::after{background:linear-gradient(180deg,rgba(8,24,46,.25),transparent 40%,var(--cream) 100%)}
html[data-theme="navy"] .factory__cap{background:rgba(8,24,46,.5)}
html[data-theme="navy"] .factory__card{box-shadow:0 40px 80px -40px rgba(8,24,46,.35)}
html[data-theme="navy"] .export{background:#0b1f3a}
html[data-theme="navy"] .export__bg{background:radial-gradient(50% 60% at 15% 20%,rgba(52,120,220,.42),transparent 70%),radial-gradient(40% 50% at 90% 90%,rgba(182,243,106,.10),transparent 70%)}
html[data-theme="navy"] .ftr{background:#06111f}
html[data-theme="navy"] .modal::backdrop{background:rgba(5,12,24,.6)}

/* theme switch: palette button -> dropdown of 5 swatches (5 inline dots crowd the 390px header) */
.theme{position:relative;flex:none}
.theme__toggle{display:flex;align-items:center;gap:6px;height:42px;padding:0 11px;border-radius:99px;border:0;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer;color:#fff}
.theme__toggle .ic{width:18px;height:18px}
.theme__cur{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.55);background:var(--sw-green)}
.theme__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:5;display:grid;gap:2px;min-width:214px;padding:8px;border-radius:16px;background:#fff;color:#0c1d16;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s var(--ease)}
.theme.is-open .theme__menu{opacity:1;visibility:visible;transform:none}
.theme__btn{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:none;cursor:pointer;text-align:start;color:inherit}
.theme__btn:hover{background:#f1f3f1}
.theme__btn span{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .2s,transform .2s}
.theme__btn b{font-weight:600;font-size:14.5px;line-height:1.25}
.theme__btn[aria-pressed="true"]{background:#eef2ef}
.theme__btn[aria-pressed="true"] span{box-shadow:0 0 0 2px #fff,0 0 0 4px #0c1d16;transform:scale(.92)}
.theme__btn[aria-pressed="true"] b{font-weight:800}
.theme__btn:focus-visible{outline:3px solid #1b6fd1;outline-offset:-3px}
:root{--sw-green:linear-gradient(135deg,#2fd57a,#00a650);--sw-navy:linear-gradient(135deg,#2f6fd0,#0e2a4f);
  --sw-samarkand:conic-gradient(from 45deg,#0b2a5b 0 25%,#1fb5b0 0 50%,#0b2a5b 0 75%,#d4a63a 0);
  --sw-pomegranate:linear-gradient(135deg,#f4a13b 0 30%,#8a1a2e 30% 60%,#5a0f1e 60%);
  --sw-silkroad:linear-gradient(135deg,#e0a526 0 38%,#121216 38% 82%,#2ec4b6 82%)}
.theme__btn--green span{background:var(--sw-green)}
.theme__btn--navy span{background:var(--sw-navy)}
.theme__btn--samarkand span{background:var(--sw-samarkand)}
.theme__btn--pomegranate span{background:var(--sw-pomegranate)}
.theme__btn--silkroad span{background:var(--sw-silkroad)}
html[data-theme="navy"] .theme__cur{background:var(--sw-navy)}
html[data-theme="samarkand"] .theme__cur{background:var(--sw-samarkand)}
html[data-theme="pomegranate"] .theme__cur{background:var(--sw-pomegranate)}
html[data-theme="silkroad"] .theme__cur{background:var(--sw-silkroad)}
@media (max-width:420px){.hdr__right{gap:6px}.lang__btn{padding:0 11px;gap:6px}.theme__toggle{padding:0 10px;gap:5px}}
@media (max-width:359px){.theme__cur{display:none}}

/* ===================== SAMARKAND / POMEGRANATE / SILK ROAD THEMES (preview) =====================
   Same mechanism as navy: html[data-theme=...] variable overrides. Light sections stay light (tinted) for readable text;
   dark sections, accents, header, footer and hero change. MANI / HERO / ATTACK (and SAMIMI pack) keep their own colours. */
html[data-theme="samarkand"]{
  --ink:#0a1f45; --ink-rgb:10,31,69; --forest:#0b2a5b; --emerald:#123a75; --lime:#3cd3c8; --lime-2:#1fb5b0; --green:#178f8a; --green-d:#0b6560;
  --mint:#e2f3f2; --cream:#f3f6fb; --text:#0b1a33; --muted:#53607a; --line:rgba(11,26,51,.1);
  --shadow:0 1px 2px rgba(10,31,69,.05),0 12px 32px -12px rgba(10,31,69,.2);
  --acc-rgb:60,211,200; --glow-rgb:31,181,176; --hero-a:#0b2a5b; --hero-b:#0a1f45; --ftr-bg:#051230; --orb-1:#147f95; --orb-2:#1a438a;
  --em-a:#3cd3c8; --em-b:#9beee6; --tile-b:#1fb5b0; --deco:#d4a63a; --deco-rgb:212,166,58;
}
html[data-theme="pomegranate"]{
  --ink:#3e0a15; --ink-rgb:62,10,21; --forest:#5a0f1e; --emerald:#741628; --lime:#f4a13b; --lime-2:#e8892a; --green:#b02a3f; --green-d:#9c3f06;
  --mint:#fbeee5; --cream:#fbf6f2; --text:#2a0d12; --muted:#6c585b; --line:rgba(42,13,18,.1);
  --shadow:0 1px 2px rgba(62,10,21,.05),0 12px 32px -12px rgba(62,10,21,.22);
  --acc-rgb:244,161,59; --glow-rgb:196,36,66; --hero-a:#5a0f1e; --hero-b:#3e0a15; --ftr-bg:#24050c; --orb-1:#a8213d; --orb-2:#6e1426;
  --em-a:#f4a13b; --em-b:#ffd29a; --tile-b:#e8892a; --deco:#f4a13b; --deco-rgb:244,161,59;
}
html[data-theme="silkroad"]{
  --ink:#0b0b0d; --ink-rgb:11,11,13; --forest:#121216; --emerald:#1d1d23; --lime:#e0a526; --lime-2:#c98f17; --green:#a06d0c; --green-d:#7f5608;
  --mint:#f6efdc; --cream:#f7f5ef; --text:#141416; --muted:#5e5b55; --line:rgba(20,20,22,.1);
  --shadow:0 1px 2px rgba(11,11,13,.05),0 12px 32px -12px rgba(11,11,13,.24);
  --acc-rgb:224,165,38; --glow-rgb:224,165,38; --hero-a:#121216; --hero-b:#0b0b0d; --ftr-bg:#050506; --orb-1:#7a5410; --orb-2:#2a2113;
  --em-a:#e0a526; --em-b:#f7d684; --tile-b:#c98f17; --deco:#2ec4b6; --deco-rgb:46,196,182;
}
/* brand worlds + SAMIMI pack + brand filter chips keep their own (green-based) colours */
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) :is(.bw,.samimi,.chip--mani,.chip--hero,.chip--attack){
  --ink:#04140f; --forest:#062b1f; --emerald:#0b3d2c; --green:#00a650; --green-d:#008440; --lime:#b6f36a; --lime-2:#8be04e; --mint:#e7f5ec}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .hdr.is-scrolled{background:rgba(var(--ink-rgb),.84)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .nav-open .hdr{background:rgba(var(--ink-rgb),.97)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .hero{background:var(--hero-b)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .hero__bg{background:
    radial-gradient(60% 55% at 72% 58%,rgba(var(--glow-rgb),.5),transparent 70%),
    radial-gradient(40% 40% at 10% 0%,rgba(var(--acc-rgb),.12),transparent 70%),
    linear-gradient(180deg,var(--hero-a) 0%,var(--hero-b) 100%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .orb--1{background:radial-gradient(circle,var(--orb-1),transparent 65%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .orb--2{background:radial-gradient(circle,var(--orb-2),transparent 65%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .stage__glow{background:radial-gradient(circle,rgba(var(--acc-rgb),.30),rgba(var(--glow-rgb),.16) 45%,transparent 70%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .stage__ring{border-color:rgba(var(--deco-rgb),.3);box-shadow:0 0 0 30px rgba(var(--deco-rgb),.03),0 0 0 70px rgba(var(--deco-rgb),.02)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .hero__title em{background-image:linear-gradient(100deg,var(--em-a) 10%,var(--em-b) 90%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .eyebrow--pill{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.28)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .eyebrow--pill::before{box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .btn--lime{--glow:rgba(var(--acc-rgb),.6)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .marquee{border-block-color:rgba(var(--ink-rgb),.12)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .marquee b{color:var(--ink);opacity:.55}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .why::before{background:radial-gradient(circle,rgba(var(--glow-rgb),.32),transparent 65%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .tile:hover{background:rgba(var(--acc-rgb),.06);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.35)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .tile--1{background:linear-gradient(150deg,var(--lime),var(--tile-b))}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .tile--1:hover{background:linear-gradient(150deg,var(--em-b),var(--lime))}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .tile--1 p{color:rgba(var(--ink-rgb),.82)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .stat--halal::after,html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .stat--cap::after{background:rgba(var(--acc-rgb),.08)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .stat--cap{background:linear-gradient(135deg,var(--emerald),var(--ink))}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .factory__media::after{background:linear-gradient(180deg,rgba(var(--ink-rgb),.25),transparent 40%,var(--cream) 100%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .factory__cap{background:rgba(var(--ink-rgb),.55)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .factory__card{box-shadow:0 40px 80px -40px rgba(var(--ink-rgb),.35)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .export{background:var(--hero-b)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .export__bg{background:radial-gradient(50% 60% at 15% 20%,rgba(var(--glow-rgb),.4),transparent 70%),radial-gradient(40% 50% at 90% 90%,rgba(var(--acc-rgb),.12),transparent 70%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .ftr{background:var(--ftr-bg)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .modal::backdrop{background:rgba(var(--ink-rgb),.6)}
@media (max-width:1139px){html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .nav{background:rgba(var(--ink-rgb),.97)}}

/* Samarkand: Registan tilework — girih star lattice at very low opacity in the hero, thin gold details */
html[data-theme="samarkand"] .hero__bg::before{content:"";position:absolute;inset:0;opacity:.1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23D4A63A' stroke-width='1.1'%3E%3Cpath d='M48 20L76 48L48 76L20 48Z'/%3E%3Cpath d='M28.2 28.2H67.8V67.8H28.2Z'/%3E%3Cpath d='M48 0V20M48 76V96M0 48H20M76 48H96M0 0L28.2 28.2M96 0L67.8 28.2M0 96L28.2 67.8M96 96L67.8 67.8'/%3E%3Cpath d='M0 20L20 0M76 0L96 20M0 76L20 96M76 96L96 76'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='9' fill='none' stroke='%233CD3C8' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/96px 96px;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 30%,#000 30%,transparent 85%);mask-image:radial-gradient(120% 90% at 30% 30%,#000 30%,transparent 85%)}
html[data-theme="samarkand"] .eyebrow--pill{border-color:rgba(212,166,58,.55)}
html[data-theme="samarkand"] .eyebrow--pill::before{background:var(--deco);box-shadow:0 0 0 4px rgba(212,166,58,.2)}
html[data-theme="samarkand"] .sec__head--light .eyebrow::before,html[data-theme="samarkand"] .export .eyebrow::before{background:var(--deco)}
html[data-theme="samarkand"] .ftr{box-shadow:inset 0 1px 0 rgba(212,166,58,.45)}
html[data-theme="samarkand"] .seal span{box-shadow:inset 0 0 0 2px rgba(212,166,58,.6)}
html[data-theme="samarkand"] .tile--1 .flags .fl{box-shadow:0 0 0 1px rgba(10,31,69,.25)}
/* Pomegranate: slightly richer grain on the deep red hero */
html[data-theme="pomegranate"] .hero__grain{opacity:.09}
/* Silk Road: saffron gold + one turquoise detail (hero eyebrow pill) */
html[data-theme="silkroad"] .eyebrow--pill{color:#2ec4b6;background:rgba(46,196,182,.1);border-color:rgba(46,196,182,.3)}
html[data-theme="silkroad"] .eyebrow--pill::before{box-shadow:0 0 0 4px rgba(46,196,182,.18)}
html[data-theme="silkroad"] .stage__ring{border-color:rgba(224,165,38,.28);box-shadow:0 0 0 30px rgba(224,165,38,.03),0 0 0 70px rgba(224,165,38,.02)}
/* header fit with theme switch: hide partner CTA where the desktop nav would push it off-screen (Export link stays in nav) */
@media (min-width:1140px) and (max-width:1279px){.lang-uz .hdr__cta{display:none}}
@media (min-width:1140px) and (max-width:1219px){.lang-ru .hdr__cta{display:none}}

/* certificates: copies on request only (no PDFs / thumbnails published, owner Oct 2026) */
.cert__body{padding-top:20px}
.q-req{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px;padding:18px 20px;border-radius:var(--r);background:var(--mint)}
.q-req>.ic{width:22px;height:22px;color:var(--green);flex:none}
.q-req p{flex:1 1 220px;font-size:15px;font-weight:600;line-height:1.45}
.q-req .btn{white-space:normal;text-align:center}

/* ===== v9b (owner, 6 Oct 2026): soft "premium" glows, consistent fonts, 360° can in the product pop-up only ===== */
/* fonts: Latin/Cyrillic pages = Unbounded (display) + Onest (body); fa/ar pages = Vazirmatn, now the variable cut
   ("Vazirmatn VF", wght 100-900) so RTL text gets exactly the same weights as the LTR pages instead of snapping to the
   static 400/700/800 files. Tiny "ZM Names" / "ZM Arabic" faces cover the language names (menu + footer), the arrows on
   RTL pages and µ, so no system fallback anywhere (scripts/prep_fonts_v9.py). */
@font-face{font-family:"Vazirmatn VF";src:url(/fonts/vazirmatn-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"ZM Names";src:url(/fonts/zm-names-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0045,U+004F,U+0061-0063,U+0065,U+0067-0069,U+006B,U+006C,U+006E-0070,U+0073,U+007A,U+00F1,U+02BB,U+0420,U+0438-043A,U+0441,U+0443,U+2190,U+2192}
@font-face{font-family:"ZM Names";src:url(/fonts/zm-names-mu.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+00B5}
@font-face{font-family:"ZM Arabic";src:url(/fonts/zm-names-arabic.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0627-0629,U+062F,U+0631,U+0639,U+0644,U+064A,U+06CC}
:root{--f-display:"Unbounded","ZM Names",system-ui,sans-serif;--f-body:"Onest","ZM Names",system-ui,-apple-system,"Segoe UI",sans-serif}
.rtl-script{--f-display:"Vazirmatn VF","ZM Names",system-ui,sans-serif;--f-body:"Vazirmatn VF","ZM Names",system-ui,sans-serif}
.lang__menu a[lang],.ftr__langs a[lang]{font-family:"ZM Names","ZM Arabic",var(--f-body)}
.rtl-script .lang__menu a[lang],.rtl-script .ftr__langs a[lang]{font-family:"ZM Names","Vazirmatn VF",var(--f-body)}
/* same weights as the LTR pages (the old 800 only existed because Vazirmatn had no 750 cut) */
.rtl-script h1,.rtl-script h2,.rtl-script h3,.rtl-script h4,.rtl-script .hero__title{font-weight:var(--fw-display)}
.rtl-script .marquee span{font-weight:650}
/* headings keep the page's display family everywhere (RTL pages no longer pull in Unbounded for one word / the seal) */
.rtl-script .samimi__title{font-family:var(--f-display)}
.seal svg{font-family:var(--f-display)}
/* marquee separator: a drawn 4-point star instead of the ✦ glyph (no site font has it) */
.marquee b{display:inline-block;flex:none;width:13px;height:13px;font-size:0;background:currentColor;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.pm-warn{display:flex;gap:8px;align-items:flex-start}
.pm-warn__i{flex:none;width:18px;height:18px;margin-top:1px;fill:currentColor}

/* glows: small, soft, low-opacity light tightly behind the can (about 40% of before), no hard circle edge */
.card__btn:hover{box-shadow:0 26px 44px -26px color-mix(in srgb,var(--c) 34%,transparent)}
.card__media{background:radial-gradient(78% 66% at 50% 58%,color-mix(in srgb,var(--c2) 26%,#fff) 0%,color-mix(in srgb,var(--c) 8%,#fff) 74%)}
.card__halo{left:50%;top:50%;bottom:auto;width:46%;aspect-ratio:.78;border-radius:0;transform:translate(-50%,-50%);opacity:.5;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c2) 62%,#fff) 0%,color-mix(in srgb,var(--c2) 30%,transparent) 48%,transparent 100%)}
.card__media::after{background:radial-gradient(closest-side,rgba(0,0,0,.2),transparent)}
.modal__media{padding-bottom:var(--pm3d-h,0px);
  background:radial-gradient(78% 70% at 50% 56%,color-mix(in srgb,var(--c2) 28%,#fff),color-mix(in srgb,var(--c) 10%,#fff) 78%)}
.modal__halo{top:calc(50% - var(--pm3d-h,0px) / 2);width:46%;max-width:300px;aspect-ratio:.78;border-radius:0;opacity:.5;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c2) 62%,#fff) 0%,color-mix(in srgb,var(--c2) 30%,transparent) 48%,transparent 100%)}
.modal__media::after{background:radial-gradient(closest-side,rgba(0,0,0,.2),transparent)}
.stage__glow{width:58%;bottom:10%;background:radial-gradient(closest-side,rgba(182,243,106,.14),rgba(0,166,80,.07) 50%,transparent 100%)}
.stage__ring{border-color:rgba(182,243,106,.14)}
html[data-theme="navy"] .stage__glow{background:radial-gradient(closest-side,rgba(150,195,255,.12),rgba(52,120,220,.07) 50%,transparent 100%)}
html:is([data-theme="samarkand"],[data-theme="pomegranate"],[data-theme="silkroad"]) .stage__glow{background:radial-gradient(closest-side,rgba(var(--acc-rgb),.12),rgba(var(--glow-rgb),.07) 50%,transparent 100%)}
.bw--hero{background:radial-gradient(55% 60% at 30% 50%,rgba(230,180,80,.13),transparent 70%),linear-gradient(180deg,#0d0a05,#060503)}
.bw--attack .bw__deco span:nth-child(1){background:radial-gradient(circle,rgba(141,255,31,.07),transparent 60%)}

/* product grid: cans stand still (front label, static photo); only the pop-up can turns */
.card__media .can3d{display:none}
/* 360° can in the pop-up: drag / swipe to turn, slow auto-turn, button to show the back label */
.modal__media{--pm3d-h:58px}
.modal__media .can3d{inset:0 0 var(--pm3d-h) 0;animation:none} /* no bobbing: the small print stays readable */
.modal__media::after{bottom:calc(var(--pm3d-h) + (100% - var(--pm3d-h) - var(--ch) / .86) / 2 + var(--ch) / .86 * .06 - 7px)}
.modal__media.is-3d{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.modal__media.is-dragging{cursor:grabbing}
.pm3d{position:absolute;z-index:4;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;border-radius:99px;
  background:rgba(255,255,255,.86);box-shadow:0 1px 2px rgba(4,20,15,.08),0 8px 22px -10px rgba(4,20,15,.3);color:var(--ink);white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.modal__media.is-3d .pm3d{opacity:1;visibility:visible}
.pm3d button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 15px;border:0;border-radius:99px;background:transparent;
  font-family:var(--f-body);font-size:13.5px;font-weight:650;line-height:1;color:inherit;cursor:pointer;transition:background .2s,color .2s}
.pm3d button:hover{background:var(--mint)}
.pm3d button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pm3d .pm3d__spin{width:38px;padding:0}
.pm3d .pm3d__spin[aria-pressed=true]{background:var(--ink);color:#fff}
.pm3d svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pm3d__hint{position:absolute;z-index:4;left:0;right:0;top:20px;margin:0;padding-inline:64px;text-align:center;font-size:12.5px;font-weight:600;color:rgba(12,29,22,.62);
  pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.modal__media.is-3d .pm3d__hint{opacity:1}
.modal__media.is-3d.has-turned .pm3d__hint{opacity:0}
@media (max-width:859px){.modal__media{height:350px}.pm3d__hint{top:12px}}
@media (min-width:860px){.modal__media{--pm3d-h:76px}.pm3d{bottom:22px}}