/* =============================================================================
   ALLAM AMBALAJ — "Engineered Luxury" design system
   Gold (#bb9654) on deep navy (#001d39), adhesive-tape motifs.
   Mobile-first. Full RTL support via CSS logical properties.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  --navy-950: #00101f;
  --navy-900: #00162b;
  --navy:     #001d39;
  --navy-700: #0a2c4d;
  --navy-600: #143a5e;

  --gold:      #bb9654;
  --gold-2:    #d9b877;
  --gold-deep: #9d7c3f;
  --gold-soft: rgba(187, 150, 84, .14);
  --gold-line: rgba(187, 150, 84, .34);

  --paper:   #f7f2e9;
  --paper-2: #efe6d5;
  --ink:     #12202e;
  --ink-2:   #47566a;
  --line:    rgba(4, 25, 48, .12);
  --white:   #ffffff;

  --font-display: 'Sora', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'Manrope', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --rhythm: clamp(4rem, 9vw, 8rem);
  --radius:   18px;
  --radius-lg: 26px;
  --header-h: 78px;

  --shadow-sm: 0 4px 18px rgba(0, 22, 43, .10);
  --shadow-md: 0 18px 44px rgba(0, 22, 43, .16);
  --shadow-lg: 0 34px 80px rgba(0, 16, 31, .30);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --tr: .45s var(--ease);
}

[lang="ar"] {
  --font-display: 'IBM Plex Sans Arabic', 'Sora', sans-serif;
  --font-body:    'IBM Plex Sans Arabic', 'Manrope', sans-serif;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: clamp(1rem, .55vw + .9rem, 1.09rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }

/* Arabic softens the tight tracking that suits the Latin display face */
[lang="ar"] { line-height: 1.85; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { letter-spacing: 0 !important; }

/* ---- Layout helpers ------------------------------------------------------ */
.container { width: min(1200px, 100% - 2.6rem); margin-inline: auto; }
.container-wide { width: min(1360px, 100% - 2.6rem); margin-inline: auto; }
.section { padding-block: var(--rhythm); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.dark  { background: var(--navy); color: #e9eef4; }
.dark-950 { background: var(--navy-950); color: #d7dee7; }
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--navy-950); padding: .7rem 1.1rem;
  border-radius: 10px; font-weight: 700; transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---- Type ---------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.h-xl { font-size: clamp(2.5rem, 6.4vw, 5rem); }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.35rem); line-height: 1.08; }
.h-md { font-size: clamp(1.35rem, 2.3vw, 1.9rem); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-2); }
.dark .lead, .dark-950 .lead { color: #aebbc9; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
}
.dark .eyebrow, .dark-950 .eyebrow { color: var(--gold-2); }
.eyebrow::before {
  content: ""; inline-size: 30px; block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
[lang="ar"] .eyebrow { letter-spacing: .06em; }

.text-gold { color: var(--gold); }
.dark .text-gold { color: var(--gold-2); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --_bg: var(--gold); --_fg: var(--navy-950);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: .98rem;
  letter-spacing: .01em; white-space: nowrap;
  background: var(--_bg); color: var(--_fg);
  border: 1.5px solid transparent;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
  will-change: transform;
}
.btn svg { inline-size: 1.1em; block-size: 1.1em; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(187, 150, 84, .34); }
.btn--gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.btn--ghost { --_bg: transparent; --_fg: #eef2f7; border-color: rgba(255, 255, 255, .3); }
.btn--ghost:hover { border-color: var(--gold-2); color: var(--gold-2); box-shadow: none; }
.btn--dark { --_bg: var(--navy); --_fg: #fff; }
.btn--wa { --_bg: #25d366; --_fg: #06331b; }
.btn--wa:hover { box-shadow: 0 14px 30px rgba(37, 211, 102, .35); }
.btn--outline-ink { --_bg: transparent; --_fg: var(--ink); border-color: var(--line); }
.btn--outline-ink:hover { border-color: var(--gold); color: var(--gold-deep); box-shadow: none; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--gold-deep);
  transition: gap var(--tr);
}
.dark .link-arrow, .dark-950 .link-arrow { color: var(--gold-2); }
.link-arrow:hover { gap: .85rem; }
.link-arrow svg { transition: transform var(--tr); }
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }

/* =============================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background var(--tr), box-shadow var(--tr), backdrop-filter var(--tr), padding var(--tr);
  padding-block: 14px;
}
.site-header.scrolled {
  background: rgba(0, 20, 39, .82);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 10px 34px rgba(0, 12, 26, .4);
  padding-block: 8px;
}
/* Inner pages don't sit over the dark home hero, so the bar must carry its own
   navy background from the top — otherwise the light nav links, gold wordmark
   and language switch vanish against a light page top (e.g. the product detail
   breadcrumb bar, which is white). */
.site-header--solid {
  background: rgba(0, 20, 39, .92);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 8px 30px rgba(0, 12, 26, .3);
}
.site-header__bar { display: flex; align-items: center; gap: 1.4rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand__mark {
  inline-size: 46px; block-size: 46px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; letter-spacing: .12em; color: #fff; }
.brand__sub { font-size: .64rem; letter-spacing: .42em; color: var(--gold-2); font-weight: 600; margin-block-start: 3px; }
[lang="ar"] .brand__name { letter-spacing: .02em; }
[lang="ar"] .brand__sub { letter-spacing: .18em; }

.nav { display: none; align-items: center; gap: .3rem; margin-inline-start: auto; }
.nav a {
  position: relative; padding: .55rem .9rem; border-radius: 8px;
  color: #dfe6ee; font-weight: 600; font-size: .95rem;
  transition: color var(--tr);
}
.nav a::after {
  content: ""; position: absolute; inset-inline: .9rem; inset-block-end: .28rem;
  block-size: 2px; background: var(--gold-2); border-radius: 2px;
  transform: scaleX(0); transform-origin: inline-start; transition: transform var(--tr);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: .7rem; margin-inline-start: auto; }
.nav ~ .header-tools { margin-inline-start: 0; }

/* Language switcher */
.langs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.langs a {
  min-inline-size: 34px; text-align: center; padding: .3rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #cdd6e0; text-transform: uppercase;
  transition: background var(--tr), color var(--tr);
}
.langs a:hover { color: #fff; }
.langs a.is-active { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--navy-950); }

.header-cta { display: none; }

/* Hamburger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  inline-size: 46px; block-size: 46px; border-radius: 12px; padding: 0 11px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.burger span { block-size: 2px; background: #fff; border-radius: 2px; transition: transform var(--tr), opacity var(--tr); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  padding: calc(var(--header-h) + 2rem) 1.6rem 2rem;
  display: flex; flex-direction: column;
  clip-path: circle(0% at 100% 0);
  transition: clip-path .6s var(--ease);
  pointer-events: none;
}
[dir="rtl"] .mobile-menu { clip-path: circle(0% at 0 0); }
.mobile-menu.open { clip-path: circle(150% at 100% 0); pointer-events: auto; }
[dir="rtl"] .mobile-menu.open { clip-path: circle(150% at 0 0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: .3rem; margin-block-start: 1rem; }
.mobile-menu nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: #eef2f7;
  padding: .6rem 0; border-block-end: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; transform: translateY(14px);
}
.mobile-menu.open nav a { animation: menuItem .5s var(--ease) forwards; }
.mobile-menu.open nav a:nth-child(1) { animation-delay: .12s; }
.mobile-menu.open nav a:nth-child(2) { animation-delay: .19s; }
.mobile-menu.open nav a:nth-child(3) { animation-delay: .26s; }
.mobile-menu.open nav a:nth-child(4) { animation-delay: .33s; }
.mobile-menu.open nav a:nth-child(5) { animation-delay: .40s; }
.mobile-menu nav a span { color: var(--gold-2); font-size: 1rem; }
.mobile-menu__foot { margin-block-start: auto; display: flex; flex-direction: column; gap: 1rem; }
@keyframes menuItem { to { opacity: 1; transform: translateY(0); } }

/* =============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  background: linear-gradient(160deg, var(--navy-900), var(--navy) 55%, var(--navy-950));
  color: #eef2f7;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) clamp(3rem, 7vw, 6rem);
}
/* Full-bleed factory-line photo behind the hero copy */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/machine.jpg") no-repeat center right / cover;
  transform: scale(1.04);
}
[dir="rtl"] .hero::before { transform: scaleX(-1.04) scaleY(1.04); }
/* Navy wash keeps the copy crisp — vertical on phones (machine peeks at the base) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(78% 55% at 82% 4%, rgba(217, 184, 119, .18), transparent 60%),
    linear-gradient(180deg, rgba(0, 16, 31, .94) 0%, rgba(0, 16, 31, .86) 46%, rgba(0, 16, 31, .58) 100%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center; justify-items: start;
}
.hero__copy { max-inline-size: 600px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem;
  border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-soft);
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: #f0e6d2;
}
.hero__badge .dot { position: relative; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 4px rgba(217, 184, 119, .22); }
.hero h1 { margin-block: 1.4rem 1.2rem; }
.hero__top {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: clamp(.95rem, 1.4vw, 1.15rem); letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-2); margin-block-end: 1rem;
}
[lang="ar"] .hero__top { letter-spacing: .1em; }
.hero__main { color: #fff; }
.hero__main .accent {
  color: var(--gold-2);
  background: linear-gradient(120deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__sub { max-inline-size: 46ch; color: #b9c6d5; font-size: clamp(1.02rem, 1.3vw, 1.2rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-block-start: 2rem; }

.hero__trust { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-block-start: 2.4rem; padding-block-start: 1.6rem; border-block-start: 1px solid rgba(255, 255, 255, .1); }
.hero__trust div { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: #cbd6e2; font-weight: 600; }
.hero__trust svg { color: var(--gold-2); inline-size: 1.15rem; }

/* Hero visual — taped, tilted frame + spinning roll badge */
.hero__visual { position: relative; justify-self: center; inline-size: min(100%, 520px); }
.hero__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  transform: rotate(-2.2deg);
}
[dir="rtl"] .hero__frame { transform: rotate(2.2deg); }
.hero__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 16, 31, .55));
}
/* torn tape strips over the frame corners */
.tape {
  position: absolute; z-index: 3; inline-size: 118px; block-size: 34px;
  background: repeating-linear-gradient(45deg, rgba(217, 184, 119, .92), rgba(217, 184, 119, .92) 9px, rgba(187, 150, 84, .92) 9px, rgba(187, 150, 84, .92) 18px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  -webkit-mask: linear-gradient(90deg, transparent 0 6px, #000 6px calc(100% - 6px), transparent calc(100% - 6px));
  mask: linear-gradient(90deg, transparent 0 6px, #000 6px calc(100% - 6px), transparent calc(100% - 6px));
  opacity: .95;
}
.tape--tl { inset-block-start: -14px; inset-inline-start: 26px; transform: rotate(-7deg); }
.tape--br { inset-block-end: -14px; inset-inline-end: 26px; transform: rotate(-7deg); }

.roll-badge {
  position: absolute; z-index: 4; inset-block-end: -26px; inset-inline-start: -26px;
  inline-size: 116px; block-size: 116px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 50%, var(--navy-900) 0 26%, var(--gold) 26% 30%, var(--navy-700) 30% 33%, var(--gold) 33%);
  color: var(--navy-950); box-shadow: var(--shadow-md);
  border: 3px solid var(--gold-2);
  animation: spin 16s linear infinite;
}
.roll-badge span {
  display: grid; place-content: center;
  inline-size: 76px; block-size: 76px; border-radius: 50%;
  background: #fff; color: var(--navy);
  font-family: var(--font-display); font-weight: 800; font-size: .72rem; line-height: 1.15; letter-spacing: .04em;
  animation: spin 16s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__chip {
  position: absolute; z-index: 5; inset-block-start: 12%; inset-inline-end: -18px;
  background: rgba(255, 255, 255, .96); color: var(--ink); border-radius: 14px;
  padding: .7rem .95rem; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: .82rem; animation: float 5s var(--ease) infinite;
}
.hero__chip b { color: var(--gold-deep); }
.hero__chip .ic { inline-size: 34px; block-size: 34px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero__wave { position: absolute; inset-inline: 0; inset-block-end: -1px; color: var(--paper); line-height: 0; }
.hero__wave svg { inline-size: 100%; block-size: auto; }

/* =============================================================================
   MARQUEE (tape strip)
   ========================================================================== */
.marquee {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-deep));
  color: var(--navy-950); overflow: hidden; position: relative;
  border-block: 2px solid rgba(0, 16, 31, .18);
}
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; padding-block: .8rem;
  animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .04em; padding-inline: 1.4rem; display: inline-flex; align-items: center; gap: 1.4rem; }
.marquee__track span::after { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; border: 2.5px solid var(--navy-950); }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* =============================================================================
   ABOUT
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }
.about__media { position: relative; }
.about__media img { inline-size: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* Show the about image at its natural ratio — no cover-cropping.
   --full keeps the two-column layout (home preview, machine.jpg 16:9);
   --wide also lets the ultra-wide collage span the full width as a banner. */
.about__media--wide img,
.about__media--full img { aspect-ratio: auto; object-fit: contain; }
.about__grid.about__grid--wide { grid-template-columns: 1fr; }
.about__grid--wide .about__body { max-inline-size: 80ch; }
.about__cap {
  position: absolute; inset-block-end: 18px; inset-inline-start: 18px;
  background: rgba(0, 20, 39, .86); backdrop-filter: blur(6px); color: #eef2f7;
  padding: .6rem .95rem; border-radius: 12px; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--gold-line); max-inline-size: 70%;
}
.about__badge {
  position: absolute; inset-block-start: -22px; inset-inline-end: -14px; z-index: 2;
  inline-size: 108px; block-size: 108px; border-radius: 50%;
  background: var(--navy); color: var(--gold-2); display: grid; place-items: center; text-align: center;
  border: 2px dashed var(--gold-line); box-shadow: var(--shadow-md);
  font-family: var(--font-display); font-weight: 800; font-size: .8rem; line-height: 1.2; padding: 1rem;
}

/* Facility showcase — framed branded plant photo on the About page */
.facility__frame {
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.facility__frame img { display: block; inline-size: 100%; block-size: auto; }
.facility__frame::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 45%;
  background: linear-gradient(to top, rgba(0, 16, 31, .74), rgba(0, 16, 31, 0));
  pointer-events: none;
}
.facility__cap {
  position: absolute; z-index: 2;
  inset-block-end: clamp(16px, 3vw, 26px); inset-inline-start: clamp(16px, 3vw, 28px);
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(0, 20, 39, .86); backdrop-filter: blur(6px);
  color: #eef2f7; border: 1px solid var(--gold-line); border-radius: 999px;
  padding: .62rem 1.05rem; box-shadow: var(--shadow-md);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.8rem, 1.5vw, .95rem); letter-spacing: .01em;
}
.facility__pin { inline-size: 18px; block-size: 18px; color: var(--gold-2); flex: none; }

.points { display: grid; gap: .85rem; margin-block: 1.6rem 2rem; }
.points li { display: flex; align-items: flex-start; gap: .8rem; font-weight: 600; color: var(--ink); }
.points .tick {
  flex: none; inline-size: 26px; block-size: 26px; border-radius: 8px; margin-block-start: 1px;
  background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center;
}
.points svg { inline-size: 15px; block-size: 15px; }

/* =============================================================================
   STATS
   ========================================================================== */
.stats { position: relative; overflow: hidden; }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, .08); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.stat { background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); padding: clamp(1.6rem, 3vw, 2.6rem) 1.2rem; text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1; color: #fff; letter-spacing: -.02em; }
.stat__num .suffix { color: var(--gold-2); }
.stat__label { margin-block-start: .7rem; font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: #a9b7c6; text-transform: uppercase; }
[lang="ar"] .stat__label { letter-spacing: 0; }

/* =============================================================================
   SECTION HEADER
   ========================================================================== */
.sec-head { max-inline-size: 62ch; margin-block-end: clamp(2.4rem, 4vw, 3.6rem); }
.sec-head .eyebrow { margin-block-end: 1rem; }
.sec-head p { margin-block-start: 1rem; }
.sec-head--between { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: flex-end; justify-content: space-between; max-inline-size: none; }

/* =============================================================================
   PRODUCTS
   ========================================================================== */
.products__grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.pcard {
  position: relative; background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  display: flex; flex-direction: column;
}
.pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.pcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.07); }
.pcard__tag {
  position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 2;
  background: var(--navy); color: var(--gold-2); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: .4rem .8rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 16, 31, .28);
}
[lang="ar"] .pcard__tag { letter-spacing: .02em; }
.pcard__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.pcard__body h3 { font-size: 1.24rem; letter-spacing: -.01em; }
.pcard__desc { margin-block: .6rem 1.1rem; color: var(--ink-2); font-size: .96rem; }
.pcard__spec {
  margin-block-start: auto; display: flex; align-items: center; gap: .55rem;
  padding-block-start: 1rem; border-block-start: 1px dashed var(--line);
  font-size: .85rem; font-weight: 600; color: var(--ink); font-family: var(--font-display);
}
.pcard__spec svg { color: var(--gold-deep); inline-size: 1.1rem; flex: none; }

/* =============================================================================
   WHY US (features)
   ========================================================================== */
.features__grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.fcard {
  padding: 1.7rem 1.6rem; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--line); position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tr), border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.fcard:hover { transform: translateY(-6px); border-color: var(--gold-line); box-shadow: var(--shadow-md); }
.fcard::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 0; block-size: 3px; background: linear-gradient(90deg, var(--gold-2), transparent); transition: inline-size var(--tr); }
.fcard:hover::before { inline-size: 100%; }
.fcard__ic {
  inline-size: 56px; block-size: 56px; border-radius: 15px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold-2); margin-block-end: 1.1rem;
  border: 1px solid var(--gold-line); transition: transform var(--tr);
}
.fcard:hover .fcard__ic { transform: rotate(-6deg) scale(1.06); }
.fcard__ic svg { inline-size: 26px; block-size: 26px; }
.fcard h3 { font-size: 1.16rem; color: var(--ink); margin-block-end: .5rem; }
.fcard p { color: var(--ink-2); font-size: .95rem; }

/* Dark sections (Home "Why us") keep the translucent-on-navy treatment */
.dark .fcard, .dark-950 .fcard {
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); box-shadow: none;
}
.dark .fcard:hover, .dark-950 .fcard:hover {
  border-color: var(--gold-line); background: rgba(255, 255, 255, .06); box-shadow: none;
}
.dark .fcard h3, .dark-950 .fcard h3 { color: #fff; }
.dark .fcard p, .dark-950 .fcard p { color: #adbbc9; }

/* =============================================================================
   TRENDYOL
   ========================================================================== */
.trendyol__card {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  background: linear-gradient(150deg, #fff, var(--paper)); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3.4rem); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.trendyol__card::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; inline-size: 320px; block-size: 320px; background: radial-gradient(circle, rgba(242, 122, 26, .14), transparent 68%); }
.trendyol__tag { color: #e8590c; }
.trendyol__tag::before { background: linear-gradient(90deg, #f27a1a, transparent); }
.trendyol__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.trendyol__media img { inline-size: 100%; display: block; }
.btn--trendyol { --_bg: #f27a1a; --_fg: #fff; }
.btn--trendyol:hover { box-shadow: 0 14px 30px rgba(242, 122, 26, .34); }
.trendyol__note { margin-block-start: 1rem; font-size: .85rem; color: var(--ink-2); display: flex; align-items: center; gap: .5rem; }
.trendyol__note svg { color: #e8590c; }

/* =============================================================================
   CERTIFICATES
   ========================================================================== */
.certs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.ccard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  cursor: zoom-in; text-align: start;
}
.ccard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.ccard__media { position: relative; aspect-ratio: 3 / 4; background: var(--paper-2); overflow: hidden; }
.ccard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.ccard:hover .ccard__media img { transform: scale(1.05); }
.ccard__media::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--tr);
  background: linear-gradient(180deg, transparent 55%, rgba(0, 16, 31, .5));
}
.ccard:hover .ccard__media::after { opacity: 1; }
.ccard__seal {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2;
  inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--gold);
  color: var(--navy-950); display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.ccard__seal svg { inline-size: 20px; block-size: 20px; }
.ccard__body { padding: 1.1rem 1.2rem 1.3rem; }
.ccard__body h3 { font-size: 1.02rem; line-height: 1.25; }
.ccard__body p { margin-block-start: .35rem; font-size: .84rem; color: var(--ink-2); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 5vw;
  background: rgba(0, 12, 26, .88); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-block-size: 88vh; max-inline-size: 100%; border-radius: 12px; box-shadow: var(--shadow-lg); transform: scale(.94); transition: transform .4s var(--ease); }
.lightbox.open img { transform: scale(1); }
.lightbox__close { position: absolute; inset-block-start: 22px; inset-inline-end: 22px; inline-size: 48px; block-size: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); }
.lightbox__close:hover { background: var(--gold); color: var(--navy-950); }

/* =============================================================================
   CONTACT CARDS
   ========================================================================== */
.contact__grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.info-card {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform var(--tr), border-color var(--tr);
}
.info-card:hover { transform: translateY(-4px); border-color: var(--gold-line); }
.info-card__ic { flex: none; inline-size: 52px; block-size: 52px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-deep); display: grid; place-items: center; }
.info-card__ic svg { inline-size: 24px; block-size: 24px; }
.info-card h3 { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-family: var(--font-body); font-weight: 700; }
[lang="ar"] .info-card h3 { letter-spacing: 0; }
.info-card a, .info-card p { display: block; margin-block-start: .35rem; font-weight: 600; color: var(--ink); font-size: 1.02rem; word-break: break-word; }
.info-card a:hover { color: var(--gold-deep); }

.map-embed { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: linear-gradient(135deg, var(--gold-soft), #ece3d2); min-block-size: 340px; }
/* Branded placeholder — visible only while the lazy map iframe is still loading */
.map-embed::before { content: ""; position: absolute; inset: 0; background: no-repeat center / 44px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bb9654' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); opacity: .4; }
.map-embed iframe { position: relative; display: block; inline-size: 100%; block-size: 340px; border: 0; filter: saturate(.9); }

/* =============================================================================
   CTA BAND
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band__bg { position: absolute; inset: 0; object-fit: cover; object-position: center; inline-size: 100%; block-size: 100%; opacity: .15; filter: grayscale(.25); }
.cta-band__inner { position: relative; z-index: 2; max-inline-size: 60ch; margin-inline: auto; }
.cta-band h2 { margin-block-end: 1.1rem; }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-block-start: 2rem; }

/* =============================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.footer__tape { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 22px, transparent 22px 44px); opacity: .5; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
.footer__about { max-inline-size: 42ch; }
.footer__about p { color: #9fb0c1; margin-block-start: 1.1rem; font-size: .95rem; }
.footer__made { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: 1.4rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--gold-line); color: var(--gold-2); font-weight: 700; font-size: .85rem; }
.footer h4 { font-family: var(--font-body); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: #ffffff; margin-block-end: 1.2rem; }
[lang="ar"] .footer h4 { letter-spacing: .04em; }
.footer__links { display: grid; gap: .7rem; }
.footer__links a, .footer__contact a, .footer__contact p { color: #9fb0c1; font-size: .96rem; transition: color var(--tr); display: inline-flex; gap: .5rem; align-items: center; }
.footer__links a:hover, .footer__contact a:hover { color: var(--gold-2); }
.footer__contact { display: grid; gap: .8rem; }
.footer__bottom {
  margin-block-start: 2.6rem; padding-block-start: 1.6rem; border-block-start: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between;
  color: #8496a8; font-size: .86rem;
}

/* Back to top — sits stacked above the floating WhatsApp button */
.to-top {
  position: fixed; inset-block-end: 88px; inset-inline-end: 22px; z-index: 80;
  inline-size: 50px; block-size: 50px; border-radius: 50%; background: var(--gold); color: var(--navy-950);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity var(--tr), transform var(--tr), background var(--tr);
}
.to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover { background: var(--gold-2); transform: translateY(-3px); }

/* Floating WhatsApp button — always visible on every screen */
.wa-fab {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 80;
  inline-size: 56px; block-size: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, .42), var(--shadow-md);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.wa-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, .55);
  animation: waPulse 2.4s var(--ease) infinite; pointer-events: none;
}
.wa-fab:hover { background: #20bd5a; transform: translateY(-3px); }
.wa-fab:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 4px; }
.wa-fab__ic { display: grid; place-items: center; }
.wa-fab__ic svg { inline-size: 32px; block-size: 32px; }
.wa-fab__label {
  position: absolute; inset-inline-end: calc(100% + 12px); inset-block-start: 50%;
  white-space: nowrap; background: var(--navy); color: #fff;
  padding: .5rem .9rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transform: translateY(-50%) scale(.92);
  transition: opacity var(--tr), transform var(--tr);
}
.wa-fab:hover .wa-fab__label, .wa-fab:focus-visible .wa-fab__label {
  opacity: 1; transform: translateY(-50%) scale(1);
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 560px) {
  .wa-fab { inline-size: 52px; block-size: 52px; }
  .wa-fab__ic svg { inline-size: 29px; block-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab::before { animation: none; }
}

/* =============================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* Hero load-in — cinematic focus-in (blur → sharp, drift up) */
[data-load] { opacity: 0; transform: translateY(26px); filter: blur(7px); animation: loadIn 1s var(--ease) forwards; }
.hero__visual[data-load] { transform: translateY(26px) scale(.98); }
[data-load="1"] { animation-delay: .1s; }
[data-load="2"] { animation-delay: .22s; }
[data-load="3"] { animation-delay: .34s; }
[data-load="4"] { animation-delay: .46s; }
[data-load="5"] { animation-delay: .58s; }
[data-load="6"] { animation-delay: .70s; }
@keyframes loadIn { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---- Hero signature motion ------------------------------------------------ */
/* Gold kicker ("تصنيع" / Manufacturing): brushed-metal sheen sweeps across */
.hero__top {
  background-image: linear-gradient(100deg,
    var(--gold-2) 0%, var(--gold-2) 32%, #fff4dd 50%, var(--gold-2) 68%, var(--gold-2) 100%);
  background-size: 250% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loadIn 1s var(--ease) .22s forwards, goldSheen 6.5s ease-in-out 1.6s infinite;
}
@keyframes goldSheen {
  0% { background-position: 130% 0; }
  40%, 100% { background-position: -30% 0; }
}

/* Badge dot: live "on air" signal — an expanding ring keeps pinging */
.hero__badge .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(217, 184, 119, .55);
  animation: dotPulse 2.6s var(--ease) infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 184, 119, .55); }
  70%, 100% { box-shadow: 0 0 0 13px rgba(217, 184, 119, 0); }
}

/* Primary CTA ("اطلب عرض سعر"): an occasional luxury glint glides across */
.hero__cta .btn--gold { position: relative; overflow: hidden; isolation: isolate; }
.hero__cta .btn--gold::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-180%) skewX(-16deg);
  animation: ctaSheen 6s var(--ease) 2s infinite;
}
@keyframes ctaSheen {
  0% { transform: translateX(-180%) skewX(-16deg); }
  18%, 100% { transform: translateX(320%) skewX(-16deg); }
}
[dir="rtl"] .hero__cta .btn--gold::before { animation-name: ctaSheenRtl; }
@keyframes ctaSheenRtl {
  0% { transform: translateX(180%) skewX(16deg); }
  18%, 100% { transform: translateX(-320%) skewX(16deg); }
}

/* CTA arrow glides forward on hover (keeps its RTL mirror) */
.i-arrow { transition: transform var(--tr); }
.btn:hover .i-arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .i-arrow { transform: scaleX(-1) translateX(4px); }

/* Trust chips: cascade in one-by-one, each check stamps with a pop */
.hero__trust--seq { opacity: 0; animation: loadIn .8s var(--ease) .72s forwards; }
.hero__trust--seq > div {
  opacity: 0; transform: translateY(12px) scale(.96);
  animation: chipIn .6s var(--ease) forwards; transition: color var(--tr);
}
.hero__trust--seq > div:nth-child(1) { animation-delay: .86s; }
.hero__trust--seq > div:nth-child(2) { animation-delay: 1s; }
.hero__trust--seq > div:nth-child(3) { animation-delay: 1.14s; }
@keyframes chipIn { to { opacity: 1; transform: none; } }
.hero__trust--seq > div svg { transform: scale(0); animation: tickPop .55s var(--ease) forwards; }
.hero__trust--seq > div:nth-child(1) svg { animation-delay: 1.02s; }
.hero__trust--seq > div:nth-child(2) svg { animation-delay: 1.16s; }
.hero__trust--seq > div:nth-child(3) svg { animation-delay: 1.30s; }
@keyframes tickPop {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.hero__trust--seq > div:hover { color: #fff; }
.hero__trust--seq > div:hover svg { color: #fff; }

/* Typewriter — title + subtitle type themselves in, letter after letter.
   A ghost holds the full text (reserves the final wrap + height and stays
   readable for no-JS and screen readers); the live overlay is typed on top of
   it, so Arabic keeps its cursive joins, RTL types from the right, and the box
   never shifts. JS adds .tw only when motion is allowed — otherwise the plain
   static text shows. */
.tw { position: relative; }
.hero__main.tw { display: block; }                 /* inline span → block box for the overlay */
.hero__main.tw, .hero__sub.tw {                     /* JS drives entrance now: drop the load-in fade */
  opacity: 1; transform: none; filter: blur(0); animation: none;
}
.tw .tw__ghost { color: transparent; }              /* invisible spacer while JS is driving */
.tw .tw__live { position: absolute; inset: 0; color: inherit; }
.tw .tw__live::after {                              /* gold caret riding the typing head */
  content: ""; display: inline-block;
  inline-size: .07em; block-size: 1.05em;
  margin-inline-start: .06em; vertical-align: -.16em;
  background: var(--gold-2); border-radius: 1px;
  animation: twCaret .9s steps(1, end) infinite;
}
.tw.is-done .tw__live::after { animation: none; opacity: 0; }
@keyframes twCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 600px) {
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; }
  .hero__cta { flex-wrap: nowrap; }
  .hero__copy { max-inline-size: 560px; }
  /* Side-lit wash: opaque behind the copy, clear where the machine sits */
  .hero::after {
    background:
      radial-gradient(56% 76% at 95% 2%, rgba(217, 184, 119, .20), transparent 55%),
      linear-gradient(100deg, rgba(0, 16, 31, .96) 0%, rgba(0, 16, 31, .90) 32%, rgba(0, 16, 31, .60) 62%, rgba(0, 16, 31, .28) 100%);
  }
  [dir="rtl"] .hero::after {
    background:
      radial-gradient(56% 76% at 5% 2%, rgba(217, 184, 119, .20), transparent 55%),
      linear-gradient(260deg, rgba(0, 16, 31, .96) 0%, rgba(0, 16, 31, .90) 32%, rgba(0, 16, 31, .60) 62%, rgba(0, 16, 31, .28) 100%);
  }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .burger { display: none; }
  .header-cta { display: inline-flex; }
  /* hero is a single full-bleed column now — copy width is capped instead */
  .about__grid { grid-template-columns: 1fr 1fr; }
  .products__grid { grid-template-columns: repeat(4, 1fr); }
  .features__grid { grid-template-columns: repeat(3, 1fr); }
  .certs__grid { grid-template-columns: repeat(4, 1fr); }
  .trendyol__card { grid-template-columns: 1.1fr .9fr; }
  .contact__grid { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
  .pdetail__grid { grid-template-columns: 1fr 1fr; }
  .pdetail__info { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .hero__sub { font-size: 1.2rem; }
}

/* =============================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-load], .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__trust--seq, .hero__trust--seq > div, .hero__trust--seq > div svg { opacity: 1 !important; transform: none !important; }
  .roll-badge, .roll-badge span, .marquee__track, .hero__chip,
  .hero__top, .hero__badge .dot::after, .hero__cta .btn--gold::before, .hero__trust--seq > div svg { animation: none !important; }
}

/* =============================================================================
   SOCIAL ICONS
   ========================================================================== */
.social { display: inline-flex; gap: .6rem; margin-block-start: 1.4rem; }
.social a {
  inline-size: 44px; block-size: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #cdd6e0;
  transition: transform var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
}
.social a:hover { transform: translateY(-3px); color: var(--navy-950); background: var(--gold); border-color: var(--gold); }
.social svg { inline-size: 20px; block-size: 20px; }
.social--ink a { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-deep); }
.social--ink a:hover { background: var(--gold); color: var(--navy-950); border-color: var(--gold); }

/* =============================================================================
   SECTION-SPECIFIC SPACING HELPERS
   ========================================================================== */
.about__title { margin-block: 1rem 1.1rem; }
.about__badge small { display: block; font-size: .56rem; letter-spacing: .1em; font-weight: 600; margin-block-start: 3px; opacity: .85; }

.trendyol__title { margin-block: 1rem 1.1rem; }
.trendyol__cta { margin-block-start: 1.7rem; }

.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-block: 1.6rem; }
.contact__actions .social { margin: 0; }

.eyebrow--center { justify-content: center; }
.cta-band__title { margin-block: 1rem 1.1rem; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-block-start: 2rem; }

/* =============================================================================
   ERROR PAGE
   ========================================================================== */
.error-page {
  min-block-size: 68vh; display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(187, 150, 84, .10), transparent 60%);
}
.error-page__inner { max-inline-size: 52ch; margin-inline: auto; }
.error-page__code {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(4rem, 14vw, 8rem); line-height: 1; letter-spacing: -.03em; margin-block-end: 1rem;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.error-page h1 { margin-block-end: 1rem; }
.error-page .lead { margin-block-end: 1.6rem; }
.error-page__id { font-size: .85rem; color: var(--ink-2); margin-block-end: 1.6rem; }
.error-page__id code { background: var(--gold-soft); padding: .2rem .5rem; border-radius: 6px; color: var(--gold-deep); }

/* RTL: flip only arrows explicitly marked as directional (never brand/external icons) */
[dir="rtl"] .i-arrow { transform: scaleX(-1); }

/* =============================================================================
   MULTI-PAGE COMPONENTS
   (page hero, breadcrumbs, pillars, statement band, product detail,
    contact page, product-card additions, active nav, ghost-dark button)
   ========================================================================== */

/* ---- Active nav state (persistent underline for the current page) -------- */
.nav a.is-active { color: #fff; }
.nav a.is-active::after { transform: scaleX(1); }
.mobile-menu nav a.is-active { color: var(--gold-2); }

/* ---- Ghost button on LIGHT backgrounds ----------------------------------- */
.btn--ghost-dark { --_bg: transparent; --_fg: var(--ink); border-color: var(--line); }
.btn--ghost-dark:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); box-shadow: none; }

/* ---- Section-head inline CTA (view-all link) ----------------------------- */
.sec-head__cta {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--line);
  font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: border-color var(--tr), color var(--tr), background var(--tr), gap var(--tr);
}
.sec-head__cta:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); gap: .8rem; }
.sec-head__cta svg { inline-size: 1.05em; block-size: 1.05em; transition: transform var(--tr); }
[dir="rtl"] .sec-head__cta svg { transform: scaleX(-1); }
.dark .sec-head__cta, .dark-950 .sec-head__cta { color: #eef2f7; border-color: rgba(255, 255, 255, .22); }
.dark .sec-head__cta:hover, .dark-950 .sec-head__cta:hover { color: var(--gold-2); border-color: var(--gold-2); background: rgba(255, 255, 255, .05); }

/* ---- Product-card additions (code + "view details" affordance) ----------- */
.pcard__code {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .1em;
  color: #fff; background: rgba(0, 16, 31, .58); backdrop-filter: blur(4px);
  border: 1px solid rgba(217, 184, 119, .42); padding: .32rem .62rem; border-radius: 999px;
}
[lang="ar"] .pcard__code { letter-spacing: .02em; }
.pcard__more {
  margin-block-start: 1rem; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--gold-deep);
  transition: gap var(--tr), color var(--tr);
}
.pcard:hover .pcard__more { gap: .8rem; color: var(--gold); }
.pcard__more svg { inline-size: 1em; block-size: 1em; transition: transform var(--tr); }
[dir="rtl"] .pcard__more svg { transform: scaleX(-1); }

/* ---- Product placeholder tiles (products without a photo) ----------------- */
.pph {
  position: relative; inline-size: 100%; block-size: 100%; min-block-size: 100%;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: var(--gold-2);
}
.pph--printed    { background: linear-gradient(150deg, #17426a, #00162b); }
.pph--electrical { background: linear-gradient(150deg, #0a2c4d, #00101f); }
.pph--stretch    { background: linear-gradient(150deg, #14324f, #001d39); }
.pph__weave {
  position: absolute; inset: 0; opacity: .55;
  background:
    repeating-linear-gradient(45deg, rgba(217, 184, 119, .09) 0 11px, transparent 11px 22px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 11px, transparent 11px 22px);
}
.pph__ic { position: relative; z-index: 1; inline-size: 38%; max-inline-size: 92px; opacity: .92; }
.pph__ic svg { inline-size: 100%; block-size: auto; }

/* ---- Inner-page hero band ------------------------------------------------ */
.page-hero {
  position: relative; overflow: clip; isolation: isolate; text-align: center;
  background: linear-gradient(160deg, var(--navy-900), var(--navy) 58%, var(--navy-950));
  color: #eef2f7;
  padding-block: calc(var(--header-h) + clamp(2.2rem, 6vw, 4rem)) clamp(3.6rem, 7vw, 5.6rem);
}
.page-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 60% at 50% -8%, rgba(217, 184, 119, .22), transparent 62%),
    radial-gradient(46% 52% at 88% 8%, rgba(20, 58, 94, .55), transparent 60%);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask: linear-gradient(180deg, #000, transparent 78%);
  mask: linear-gradient(180deg, #000, transparent 78%);
}
.page-hero__inner { position: relative; z-index: 1; max-inline-size: 62ch; margin-inline: auto; }
.page-hero .eyebrow { color: var(--gold-2); }
.page-hero__title { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.06; color: #fff; margin-block: .5rem .9rem; }
.page-hero__body { margin-inline: auto; max-inline-size: 56ch; color: #b9c6d5; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

/* ---- Breadcrumbs --------------------------------------------------------- */
.crumbs { font-size: .85rem; font-weight: 600; }
.crumbs__sep { margin-inline: .5rem; opacity: .55; }
.page-hero .crumbs { margin-block-end: 1.2rem; }
.page-hero .crumbs a { color: #cbd6e2; transition: color var(--tr); }
.page-hero .crumbs a:hover { color: var(--gold-2); }
.page-hero .crumbs span[aria-current] { color: var(--gold-2); }
/* Standalone breadcrumb bar (product detail — sits directly under the header) */
.crumbs--page {
  margin-block-start: var(--header-h); padding-block: .9rem 1rem;
  border-block-end: 1px solid var(--line); background: #fff;
}
.crumbs--page a { color: var(--ink-2); transition: color var(--tr); }
.crumbs--page a:hover { color: var(--gold-deep); }
.crumbs--page span[aria-current] { color: var(--ink); font-weight: 700; }
.crumbs--page .crumbs__sep { color: var(--ink-2); }

/* ---- Pillars ------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.pillar {
  position: relative; padding: 1.9rem 1.7rem; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.pillar:hover { transform: translateY(-6px); border-color: var(--gold-line); box-shadow: var(--shadow-md); }
.pillar__ic {
  inline-size: 56px; block-size: 56px; border-radius: 15px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--gold-line); margin-block-end: 1.2rem;
}
.pillar__ic svg { inline-size: 26px; block-size: 26px; }
.pillar__num {
  position: absolute; inset-block-start: 1.3rem; inset-inline-end: 1.5rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1;
  letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.3px var(--gold-line);
}
.pillar h3 { font-size: 1.2rem; margin-block-end: .5rem; }
.pillar p { color: var(--ink-2); font-size: .96rem; }

/* ---- Global / compliance statement band ---------------------------------- */
.global-band { position: relative; overflow: hidden; text-align: center; }
.global-band__ring {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: min(720px, 128%); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px dashed var(--gold-line); opacity: .4; pointer-events: none;
}
.global-band__ring::before {
  content: ""; position: absolute; inset: 13%; border-radius: 50%;
  border: 1px dashed rgba(217, 184, 119, .16);
}
.global-band__inner { position: relative; z-index: 1; max-inline-size: 62ch; margin-inline: auto; }
.global-band__mark {
  inline-size: 72px; block-size: 72px; border-radius: 50%; margin: 0 auto 1.4rem;
  display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-2);
  border: 1px solid var(--gold-line);
}
.global-band__mark svg { inline-size: 34px; block-size: 34px; }
.global-band__title { margin-block: 1rem 1.1rem; color: #fff; }

/* ---- Products page: count badge + custom-size callout -------------------- */
.products-count { display: flex; justify-content: center; margin-block-end: clamp(2rem, 4vw, 3rem); }
.products-count__badge {
  display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.3rem; border-radius: 999px;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-deep);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.products-count__badge::before {
  content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft);
}
.custom-note {
  display: flex; align-items: center; gap: 1rem; text-align: start;
  margin-block-start: clamp(2rem, 4vw, 3rem); padding: 1.3rem 1.6rem; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--gold-soft), transparent 80%); border: 1px dashed var(--gold-line);
}
.custom-note__ic {
  flex: none; inline-size: 48px; block-size: 48px; border-radius: 13px; display: grid; place-items: center;
  background: #fff; color: var(--gold-deep); border: 1px solid var(--gold-line);
}
.custom-note__ic svg { inline-size: 24px; block-size: 24px; }
.custom-note p { font-weight: 600; color: var(--ink); }

/* ---- Product detail ------------------------------------------------------ */
.pdetail__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.pdetail__main {
  display: block; inline-size: 100%; aspect-ratio: 4 / 3; cursor: zoom-in;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); background: var(--paper-2);
}
.pdetail__main img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pdetail__main:hover img { transform: scale(1.05); }
.pdetail__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-block-start: .8rem; }
.pdetail__thumb {
  aspect-ratio: 1; cursor: zoom-in; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
  transition: border-color var(--tr), transform var(--tr);
}
.pdetail__thumb:hover { border-color: var(--gold); transform: translateY(-3px); }
.pdetail__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pdetail__ph {
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.pdetail__tag { position: static; display: inline-flex; box-shadow: none; margin-block-end: 1rem; }
.pdetail__title { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; margin-block-end: .6rem; }
.pdetail__code {
  display: inline-flex; align-items: center; gap: .5rem; margin-block-end: 1.2rem;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .04em;
  color: var(--gold-deep); background: var(--gold-soft); border: 1px solid var(--gold-line);
  padding: .35rem .85rem; border-radius: 999px;
}
[lang="ar"] .pdetail__code { letter-spacing: 0; }
.pdetail__long { margin-block-end: 1.5rem; }
.pdetail__spec {
  display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .95rem;
}
.pdetail__spec svg { color: var(--gold-deep); inline-size: 1.3rem; flex: none; }
.pdetail__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-block-start: 1.8rem; }

.pdetail__info { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
.pinfo-card {
  padding: clamp(1.6rem, 3vw, 2.2rem); border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.pinfo-card__title { margin-block-end: 1.3rem; }
.points--feat { margin-block: 0; }

.spec-table { inline-size: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: .85rem 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-block-end: 0; }
.spec-table th {
  inline-size: 42%; padding-inline-end: 1rem; font-family: var(--font-body); font-weight: 700;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
[lang="ar"] .spec-table th { letter-spacing: 0; }
.spec-table td { font-weight: 600; color: var(--ink); }
.spec-table__note { display: flex; align-items: center; gap: .5rem; margin-block-start: 1.2rem; font-size: .85rem; color: var(--ink-2); }
.spec-table__note svg { color: var(--gold-deep); flex: none; }

/* ---- Contact page (panel + map) ------------------------------------------ */
.contact__cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-block-start: 1.8rem; }
.contact-card {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: var(--shadow-md); }
.contact-card__ic {
  flex: none; inline-size: 50px; block-size: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--gold-line);
}
.contact-card__ic svg { inline-size: 23px; block-size: 23px; }
.contact-card__meta { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.contact-card__label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
[lang="ar"] .contact-card__label { letter-spacing: 0; }
.contact-card__value { font-weight: 700; color: var(--ink); font-size: 1.02rem; word-break: break-word; }
.contact-card:hover .contact-card__value { color: var(--gold-deep); }

.contact__map {
  position: relative; min-block-size: 360px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--gold-soft), #ece3d2);
}
.contact__map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; filter: saturate(.92); }
.contact__map-cta {
  position: absolute; inset-block-end: 16px; inset-inline-start: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px;
  background: rgba(0, 20, 39, .9); color: #fff; font-weight: 700; font-size: .85rem;
  border: 1px solid var(--gold-line); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm);
  transition: background var(--tr), color var(--tr);
}
.contact__map-cta:hover { background: var(--gold); color: var(--navy-950); }
.contact__map-cta svg { color: var(--gold-2); }
.contact__map-cta:hover svg { color: var(--navy-950); }

/* ---- Multi-page responsive tweaks ---------------------------------------- */
@media (min-width: 760px) {
  .custom-note { padding: 1.5rem 2rem; }
}
@media (min-width: 960px) {
  /* Two-column detail layout. These MUST live after the base single-column
     .pdetail__grid / .pdetail__info rules (≈L1010 / L1048) so source order lets
     them win. Otherwise the grid collapses to one full-width column and the
     image below — which is position:sticky and taller than the viewport —
     pins on scroll while the title + CTA buttons paint over it (the reported
     "overlap"). minmax(0,1fr) stops long content from blowing the tracks out. */
  .pdetail__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pdetail__info { grid-template-columns: 1fr 1fr; }
  .pdetail__media { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
}

/* =============================================================================
   FACTORY FILM  (About page — cinematic intro video band)
   ========================================================================== */
.vfilm { position: relative; overflow: hidden; }
.vfilm__aura {
  position: absolute; inset-block-start: -22%; inset-inline-start: 50%;
  inline-size: min(920px, 120%); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(187, 150, 84, .18), transparent 62%);
  filter: blur(6px); pointer-events: none; z-index: 0;
}
.vfilm__inner { position: relative; z-index: 1; }
.vfilm__head { max-inline-size: 64ch; margin-inline: auto; text-align: center; }
.vfilm__title { color: #fff; margin-block: 1rem .9rem; }
.vfilm__lead { margin-inline: auto; }

.vfilm__frame {
  position: relative; margin: clamp(2.2rem, 4vw, 3.4rem) auto 0;
  max-inline-size: 1040px; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #000; border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-lg);
}
.vfilm__video {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; display: block; background: #000;
}
/* cinematic scrim over the poster — dissolves once playing */
.vfilm__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 42%, transparent 42%, rgba(0, 16, 31, .5) 100%),
    linear-gradient(180deg, rgba(0, 16, 31, .12), rgba(0, 16, 31, .5));
  transition: opacity .5s var(--ease);
}
.vfilm__frame.is-playing::after { opacity: 0; }

/* full-frame click target with a centred gold play badge */
.vfilm__play {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  transition: opacity .4s var(--ease);
}
.vfilm__play-ring {
  position: relative; inline-size: 92px; block-size: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(187, 150, 84, .95); color: var(--navy-950);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.vfilm__play-ring svg { inline-size: 30px; block-size: 30px; margin-left: 4px; }
.vfilm__play-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(217, 184, 119, .6);
  animation: vfilmPulse 2.6s var(--ease) infinite;
}
.vfilm__play:hover .vfilm__play-ring { transform: scale(1.07); background: var(--gold-2); }
.vfilm__play:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 4px; }
.vfilm__frame.is-playing .vfilm__play { opacity: 0; pointer-events: none; }

/* runtime chip */
.vfilm__tag {
  position: absolute; z-index: 3; inset-block-end: 16px; inset-inline-start: 16px;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(0, 16, 31, .62); backdrop-filter: blur(6px);
  border: 1px solid var(--gold-line); color: #eef2f7;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  transition: opacity .4s var(--ease);
}
.vfilm__tag svg { inline-size: 16px; block-size: 16px; color: var(--gold-2); }
.vfilm__frame.is-playing .vfilm__tag { opacity: 0; pointer-events: none; }

@keyframes vfilmPulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (max-width: 560px) {
  .vfilm__play-ring { inline-size: 72px; block-size: 72px; }
  .vfilm__play-ring svg { inline-size: 24px; block-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .vfilm__play-ring::before { animation: none; }
}