/* ==========================================================================
   CARBONIX — Design System  v3
   --------------------------------------------------------------------------
   Three rules this revision is built on:

   1. TYPE IS A SCALE, NOT A PILE OF CLAMPS.
      Seven roles, one ratio, explicit line-height and weight per role, and a
      separate Persian tuning block. Display sizes came down (they were
      shouting), body sizes went up (they were whispering).

   2. SPACE IS A SYSTEM.
      One 4px-based ladder. Sections, grids and stacks all draw from it, so
      vertical rhythm repeats instead of being improvised per component.

   3. STRUCTURE OVER DECORATION.
      Numbered section badges, uniform card grids and identical section
      rhythm are what make a layout read as generated. Cards now carry a real
      classification tag, sections alternate their structure, and the
      technology block is a stack of full-screen panels, not another grid.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* surfaces */
  --bg:            #141515;
  --bg-1:          #191A1A;
  --bg-2:          #1E1F1F;
  --bg-3:          #262727;
  --bg-inset:      #101111;
  --bg-glass:      rgba(20,21,21,.74);

  /* ---------- GLASS ----------
     Three depths, and the depth is chosen by how far the panel floats above
     the page, not by how important it is:

       glass-1  resting on the page   cards, spec panels
       glass-2  floating over it      header, tags, accordion heads
       glass-3  detached from it      dropdowns, mobile menu, lightbox, FABs

     Glass only earns its cost on things that OVERLAP other content. Frosting
     a panel that sits on flat background is a blur with nothing behind it —
     it costs a compositor layer and returns a slightly lighter rectangle.
     Sections 11 and 18 stay flat for exactly that reason.

     The border is two-tone on purpose: a bright top edge and a dim bottom
     one. That single detail is what reads as "pane of glass catching a light
     source" rather than "div with opacity". */
  --glass-1:       rgba(244,241,235,.055);
  --glass-2:       rgba(244,241,235,.085);
  --glass-3:       rgba(22,23,23,.55);
  --glass-brd:     rgba(244,241,235,.14);
  --glass-brd-hi:  rgba(244,241,235,.30);
  --glass-blur:    18px;
  --glass-blur-lg: 28px;
  --glass-sat:     150%;
  --glass-shadow:  0 16px 44px -20px rgba(0,0,0,.72);
  /* the light catching the top edge of every glass panel */
  --glass-sheen:   linear-gradient(180deg, var(--glass-brd-hi), transparent 62%);

  /* ---------- LIGHT FIELDS ----------
     Glass is invisible without something luminous behind it. These are the
     light sources: two warm (the brand copper) and one cool, so a panel
     dragged across the page picks up a hue shift instead of staying grey.
     Kept low in opacity — they should read as a lit room, not as a gradient
     someone was proud of. */
  --glow-warm:     rgba(206,110,54,.30);
  --glow-gold:     rgba(230,203,177,.17);
  --glow-cool:     rgba(64,124,140,.26);

  /* The blueprint rule. Brighter than --line, which is a divider and has to
     stay invisible; this one is meant to be seen. */
  --vector-line:   rgba(230,203,177,.11);

  /* type colours */
  --fg:            #F4F1EB;
  --fg-dim:        #B0ABA2;
  --fg-mute:       #8B857E;
  --fg-faint:      #56524D;

  /* brand */
  --gold:          #E6CBB1;
  --gold-hi:       #F4DFC8;
  --gold-dim:      #A88C6E;
  --copper-1:      #7A4426;
  --copper-2:      #C1652F;
  --copper-3:      #E8935A;
  --copper-grad:   linear-gradient(100deg, var(--copper-1), var(--copper-2) 45%, var(--copper-3));

  --ok:            #8FBF9F;
  --err:           #E08159;

  --line:          rgba(244,241,235,.09);
  --line-2:        rgba(244,241,235,.16);
  --line-3:        rgba(244,241,235,.30);

  /* One soft shadow and one deep one. Glass panels carry their own
     --glass-shadow; these are for the few opaque things left. */
  --shadow-1:      0 2px 12px rgba(0,0,0,.3);
  --shadow-2:      0 20px 52px -14px rgba(0,0,0,.66);

  /* motion */
  --e-out:         cubic-bezier(.16,.84,.44,1);
  --e-io:          cubic-bezier(.66,0,.34,1);
  --e-spring:      cubic-bezier(.34,1.4,.64,1);
  --t-fast:        .25s;
  --t-mid:         .45s;
  --t-slow:        .8s;

  /* ---------- SPACE LADDER (4px base) ---------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 40px;  --s-8: 56px;
  --s-9: 80px;   --s-10: 112px; --s-11: 152px;

  /* the only two fluid spacing values, both derived from the ladder */
  --gap:      clamp(var(--s-5), 2.2vw, var(--s-7));   /* grid + stack gaps  */
  --sec-y:    clamp(var(--s-9), 8vw, var(--s-11));    /* section padding    */
  --sec-y-sm: clamp(var(--s-8), 5vw, var(--s-9));

  --gutter:   clamp(20px, 4vw, 72px);
  --wrap:       min(1480px, calc(100vw - var(--gutter) * 2));
  --wrap-tight: min(1080px, calc(100vw - var(--gutter) * 2));
  --wrap-read:  min(720px,  calc(100vw - var(--gutter) * 2));

  --header-h:  76px;

  /* Three radii, no more. The old 4px was a hairline chamfer that read as an
     accident next to a 14px card; glass in particular needs a radius big
     enough for the blurred edge to show its curve. */
  --radius:    10px;
  --radius-lg: 20px;
  --radius-pill: 100px;
  --tap: 44px;

  /* ---------- TYPE SCALE ----------
     Latin defaults. The jump from body to display is deliberately large: a
     product page has exactly one voice that should carry across the room
     (the hero line) and everything else supports it. Anything in between
     reads as timid. Body never drops below 17px.

     Each role uses a ~1.33 ratio at the top end:
       17 → 21 → 27 → 36 → 56 → 88 → 136                                    */
  --fs-display: clamp(3.4rem,  9.4vw, 8.5rem);   /* hero line only       */
  --fs-h1:      clamp(2.5rem,  5.6vw, 4.75rem);  /* page + section title */
  --fs-h2:      clamp(1.95rem, 3.6vw, 3.1rem);   /* block title          */
  --fs-h3:      clamp(1.32rem, 1.75vw,1.72rem);  /* card title           */
  --fs-h4:      clamp(1.1rem,  1.2vw, 1.25rem);  /* small heading        */
  --fs-lead:    clamp(1.14rem, 1.3vw, 1.4rem);   /* intro paragraph      */
  --fs-body:    1.0625rem;                       /* body copy — 17px     */
  --fs-small:   .9375rem;                        /* meta, captions       */
  --fs-label:   .8125rem;                        /* eyebrows, tags       */

  --lh-display: .98;
  --lh-head:    1.1;
  --lh-lead:    1.6;
  --lh-body:    1.72;

  --w-display: 700;
  --w-head:    600;
  --w-body:    300;
  --w-strong:  500;

  --track-display: -.03em;
  --track-head:    -.02em;
  --track-label:   .2em;
  --upper: uppercase;

  --ff-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-accent:  'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-mono:    ui-monospace, 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
}

/* ---------- Persian tuning ----------
   NOTE the |= selector. The document is served as lang="fa-IR", so the exact
   selector html[lang="fa"] matched nothing and this entire block was dead —
   which is why Persian was rendering in the Latin display face's fallback
   with Latin line-heights. [lang|="fa"] matches "fa" and any "fa-*".

   Sizes are measured, not guessed. In IRANYekanWeb the alef is 0.648em tall against
   Inter's 0.727em cap height, so Persian set at the same font-size looks
   about 10% smaller than the Latin next to it. The Persian scale is therefore
   set slightly ABOVE the Latin one — the opposite of the usual instinct.

   Everything else follows from the script: no uppercase, no tracking, heavier
   weights to hold colour, and more leading because the descenders are deep. */
html[lang|="fa"] {
  --ff-display: 'IRANYekan', 'IRANYekanX', 'Vazirmatn', Tahoma, system-ui, sans-serif;
  --ff-body:    'IRANYekan', 'IRANYekanX', 'Vazirmatn', Tahoma, system-ui, sans-serif;
  --ff-accent:  'IRANYekan', 'IRANYekanX', 'Vazirmatn', Tahoma, sans-serif;

  --fs-display: clamp(3.5rem,  9.8vw, 9rem);
  --fs-h1:      clamp(2.5rem,  5.6vw, 4.9rem);
  --fs-h2:      clamp(1.95rem, 3.6vw, 3.15rem);
  --fs-h3:      clamp(1.34rem, 1.8vw, 1.78rem);
  --fs-h4:      clamp(1.12rem, 1.2vw, 1.28rem);
  --fs-lead:    clamp(1.16rem, 1.35vw,1.44rem);
  --fs-body:    1.09rem;
  --fs-small:   .97rem;
  --fs-label:   .86rem;

  --lh-display: 1.16;
  --lh-head:    1.34;
  --lh-lead:    1.82;
  --lh-body:    1.9;

  --w-display: 700;   /* Bold is the heaviest real file — no faux weights */
  --w-head:    700;
  --w-body:    400;
  --w-strong:  500;

  --track-display: 0;
  --track-head:    0;
  --track-label:   .02em;
  --upper: none;
}

html[lang|="ar"] {
  --ff-display: 'Cairo', 'Noto Kufi Arabic', Tahoma, system-ui, sans-serif;
  --ff-body:    'Cairo', 'Noto Kufi Arabic', Tahoma, system-ui, sans-serif;
  --ff-accent:  'Cairo', Tahoma, sans-serif;

  --fs-display: clamp(3.2rem,  8.8vw, 8rem);
  --fs-h1:      clamp(2.35rem, 5.2vw, 4.4rem);
  --fs-h2:      clamp(1.85rem, 3.4vw, 2.9rem);
  --fs-h3:      clamp(1.3rem,  1.72vw,1.7rem);
  --fs-h4:      clamp(1.1rem,  1.18vw,1.24rem);
  --fs-lead:    clamp(1.14rem, 1.3vw, 1.4rem);
  --fs-body:    1.06rem;
  --fs-small:   .95rem;
  --fs-label:   .84rem;

  --lh-display: 1.24;
  --lh-head:    1.4;
  --lh-lead:    1.84;
  --lh-body:    1.92;

  --w-display: 700;
  --w-head:    700;
  --w-body:    400;
  --w-strong:  600;

  --track-display: 0;
  --track-head:    0;
  --track-label:   .01em;
  --upper: none;
}

/* No synthesised weights: only the three real IRANYekan files are used. */
html[lang|="fa"] body { font-synthesis: none; }

@media (min-width: 2200px) { :root { --wrap: 1680px; --gutter: 96px; } }

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--fg-faint) var(--bg);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* The lit room the glass sits in.

   Four soft radial fields, fixed to the viewport so they stay put while the
   page scrolls past them — a panel moving up the screen therefore travels
   across a changing light source and shifts hue as it goes, which is the
   whole reason the glass reads as glass.

   `background-attachment: fixed` is the cheap way to pin them (no extra
   element, no scroll listener), but iOS Safari has never handled it on a
   scrolling body, so the mobile block below drops back to a static paint. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(58vw 46vw at 78% -6%,  var(--glow-warm), transparent 62%),
    radial-gradient(46vw 42vw at 4% 22%,   var(--glow-cool), transparent 60%),
    radial-gradient(52vw 40vw at 92% 68%,  var(--glow-gold), transparent 64%),
    radial-gradient(64vw 48vw at 18% 104%, var(--glow-warm), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* iOS Safari: a fixed-attachment background on a scrolling body either
   judders or is dropped outright. Paint the fields once instead — they are
   ambient, so losing the parallax costs nothing legible. */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; }
}

img, svg, video, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--gold); color: var(--bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb { background: var(--fg-faint); border-radius: 10px; border: 2px solid var(--bg-inset); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius); }

/* ---------- 3. Typographic roles ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  font-weight: var(--w-head);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}

.t-display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: var(--upper);
}
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: var(--fs-h4); }

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-body);
  color: var(--fg-dim);
  text-wrap: pretty;
}
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-dim); }
.t-small { font-size: var(--fs-small); line-height: 1.6; }
.t-label {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: var(--upper);
  line-height: 1.4;
}

/* legacy aliases so existing markup keeps working */
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-dim); font-weight: var(--w-body); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.6; }
.micro { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: var(--upper); line-height: 1.4; }

.dim { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }
.gold { color: var(--gold); }
.num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
html[lang|="fa"] .num, html[lang|="ar"] .num { font-family: var(--ff-body); }

.accent-it { font-family: var(--ff-accent); font-style: italic; font-weight: 400; color: var(--gold-hi); }
html[lang|="fa"] .accent-it, html[lang|="ar"] .accent-it { font-style: normal; }

.grad-text {
  background: var(--copper-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* If background-clip:text is unavailable the headline must not vanish. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--gold); }
}

/* Section eyebrow — a label, never a number. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: var(--upper);
  color: var(--gold); line-height: 1.4;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; flex: none; background: var(--copper-grad); }
.eyebrow.no-rule::before { display: none; }

.skip-link {
  position: fixed; top: var(--s-2); inset-inline-start: var(--s-2); z-index: 10001;
  background: var(--gold); color: var(--bg); padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600;
  transform: translateY(-250%); transition: transform .3s var(--e-out);
}
.skip-link:focus { transform: translateY(0); }

.sr-only, .a11y-live {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- 4. Layout ---------- */
.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-tight { width: var(--wrap-tight); margin-inline: auto; }
.wrap-read { width: var(--wrap-read); margin-inline: auto; }

.sec { padding-block: var(--sec-y); position: relative; }
.sec-sm { padding-block: var(--sec-y-sm); }
.sec-hairline { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g12 { grid-template-columns: repeat(12, 1fr); }
/* Five products do not divide into four columns. auto-fit lets the row find
   its own count — five across on a wide desktop, then four, three, two, one —
   without a special case per breakpoint or an orphan card at the end. */
.g-auto { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }
@media (max-width: 560px) { .g-auto { grid-template-columns: 1fr; } }
.grid > *, .stack > *, .tabs > *, .showcase-row > * { min-width: 0; }

@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) { .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  {
  .g12 { grid-template-columns: 1fr; }
  .g12 > * { grid-column: 1 / -1 !important; }
  .sticky-top, .toc { position: static; }
}
@media (max-width: 768px) { .g2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .g3, .g4 { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; }
.gap-xs { gap: var(--s-2); }
.gap-sm { gap: var(--s-4); }
.gap-md { gap: var(--s-5); }
.gap-lg { gap: var(--s-7); }
.gap-xl { gap: var(--s-9); }
.row { display: flex; align-items: center; }
.wrapf { flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt-a { margin-top: auto; }
.hr { height: 1px; background: var(--line); border: 0; }
.center { text-align: center; }
.maxw-60 { max-width: 60ch; } .maxw-70 { max-width: 70ch; }
.sticky-top { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
[hidden] { display: none !important; }

/* Section header: title block on one side, action on the other. */
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-8);
}
.sec-head .stack { gap: var(--s-4); }
@media (max-width: 620px) { .sec-head { margin-bottom: var(--s-6); } .sec-head .btn { width: 100%; } }

/* ---------- 5. Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-3) var(--s-6);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: var(--upper); line-height: 1.2;
  isolation: isolate; overflow: hidden; text-align: center;
  transition: color var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
  will-change: transform;
}
.btn::before {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  border-radius: inherit; transform: translateY(101%); z-index: -1;
  transition: transform var(--t-mid) var(--e-out);
}
.btn:hover, .btn:focus-visible { color: var(--bg); border-color: var(--gold); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(.975); }
.btn .ico { transition: transform var(--t-mid) var(--e-out); flex: none; }
.btn:hover .ico { transform: translate(3px, -3px); }
[dir="rtl"] .btn .ico { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ico { transform: scaleX(-1) translate(3px, -3px); }
.btn[disabled], .btn.is-busy { opacity: .5; pointer-events: none; }

.btn-solid { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn-solid::before { background: var(--fg); }
.btn-solid:hover, .btn-solid:focus-visible { color: var(--bg); border-color: var(--fg); }
.btn-sm { padding: var(--s-2) var(--s-5); min-height: 38px; }
.btn-lg { padding: var(--s-4) var(--s-7); }

.link-u {
  display: inline-flex; align-items: center; gap: var(--s-2); position: relative;
  font-size: var(--fs-small); font-weight: var(--w-strong); color: var(--fg);
  padding-block: 6px 5px;
}
.link-u::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 3px;
  width: 100%; height: 1px; background: var(--gold); transform: scaleX(0);
  transition: transform var(--t-mid) var(--e-out);
}
[dir="ltr"] .link-u::after { transform-origin: right; }
[dir="rtl"] .link-u::after { transform-origin: left; }
.link-u:hover::after, .card:hover .link-u::after { transform: scaleX(1); }
[dir="ltr"] :is(.link-u:hover, .card:hover .link-u)::after { transform-origin: left; }
[dir="rtl"] :is(.link-u:hover, .card:hover .link-u)::after { transform-origin: right; }
.link-u .ico { transition: transform var(--t-mid) var(--e-out); }
.link-u:hover .ico, .card:hover .link-u .ico { transform: translateX(4px); }
[dir="rtl"] .link-u .ico { transform: scaleX(-1); }
[dir="rtl"] :is(.link-u:hover, .card:hover .link-u) .ico { transform: scaleX(-1) translateX(4px); }

/* ---------- 6. Overlays ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9996; pointer-events: none;
  opacity: .03; mix-blend-mode: overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; }
.cursor { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translate(-50%,-50%); mix-blend-mode: difference; transition: opacity .3s; }
.cursor-ring {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(244,241,235,.4);
  transform: translate(-50%,-50%); z-index: 9998;
  transition: width .4s var(--e-spring), height .4s var(--e-spring),
              border-color .3s var(--e-out), background .3s var(--e-out), opacity .3s;
  display: grid; place-items: center;
  font-size: 9px; letter-spacing: .1em; color: transparent; text-transform: uppercase; font-weight: 600;
}
body.cursor-ready .cursor, body.cursor-ready .cursor-ring { opacity: 1; }
.cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--gold); }
.cursor-ring.is-label { width: 84px; height: 84px; background: rgba(230,203,177,.12); border-color: var(--gold); color: var(--gold); }
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .cursor, .cursor-ring { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}

.preloader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: grid; place-items: center; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); }
.preloader-mark { width: 44px; color: var(--gold); }
.preloader-mark svg { width: 100%; height: auto; }
.preloader-bar { width: min(220px, 50vw); height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.preloader-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--gold); display: block; }
.preloader-pct { font-size: var(--fs-label); letter-spacing: .2em; color: var(--fg-mute); }
.preloader.is-done { pointer-events: none; }

.curtain { position: fixed; inset: 0; z-index: 9990; background: var(--bg-inset); transform: scaleY(0); transform-origin: bottom; pointer-events: none; display: grid; place-items: center; }
.curtain span { color: var(--gold); opacity: 0; width: 40px; }
.curtain svg { width: 100%; height: auto; }

.progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 9995; background: var(--copper-grad); transform: scaleX(0); }
[dir="ltr"] .progress { transform-origin: left; }
[dir="rtl"] .progress { transform-origin: right; }

/* ---------- 7. Header ---------- */
.hdr {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: padding var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
}
.hdr.is-stuck {
  padding-block: var(--s-3); background: var(--bg-glass);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.hdr.is-hidden { transform: translateY(-102%); }
body.menu-open .hdr { background: transparent; border-bottom-color: transparent; backdrop-filter: none; transform: none; }

.brand { display: flex; align-items: center; gap: var(--s-3); color: var(--gold); flex: none; padding-block: var(--s-3); }
.brand svg { height: 26px; width: auto; transition: height var(--t-mid) var(--e-out); }
.hdr.is-stuck .brand svg { height: 23px; }
.brand:hover { color: var(--gold-hi); }
@media (max-width: 480px) { .brand svg { height: 21px; } }

.nav { display: flex; align-items: center; gap: clamp(var(--s-3), 1.5vw, var(--s-7)); }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: var(--w-strong);
  letter-spacing: var(--track-label); text-transform: var(--upper);
  color: var(--fg-dim); padding-block: var(--s-3); white-space: nowrap;
  transition: color var(--t-fast) var(--e-out);
}
.nav-link::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 6px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0);
  transition: transform var(--t-mid) var(--e-out);
}
[dir="ltr"] .nav-link::after { transform-origin: right; }
[dir="rtl"] .nav-link::after { transform-origin: left; }
.nav-link:hover, .nav-link[aria-current], .nav-item.is-open .nav-link { color: var(--fg); }
.nav-link:hover::after, .nav-item.is-open .nav-link::after { transform: scaleX(1); }
[dir="ltr"] :is(.nav-link:hover, .nav-item.is-open .nav-link)::after { transform-origin: left; }
[dir="rtl"] :is(.nav-link:hover, .nav-item.is-open .nav-link)::after { transform-origin: right; }
.nav-link[aria-current]::after { transform: scaleX(1); background: var(--gold-dim); }
.nav-link .caret { transition: transform var(--t-fast) var(--e-out); opacity: .7; }
.nav-item.is-open .caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute; inset-block-start: calc(100% + 10px);
  left: 50%; transform: translateX(-50%) translateY(-8px);
  width: max-content; min-width: 320px; max-width: min(380px, calc(100vw - 32px));
  padding: var(--s-2);
  background: rgba(25,26,26,.94); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--e-out), transform .32s var(--e-out), visibility .28s;
}
.nav-item.is-open .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop.align-start { left: 0; transform: translateX(0) translateY(-8px); }
.nav-item.is-open .nav-drop.align-start { transform: translateX(0) translateY(0); }
.nav-drop.align-end { left: auto; right: 0; transform: translateX(0) translateY(-8px); }
.nav-item.is-open .nav-drop.align-end { transform: translateX(0) translateY(0); }
.nav-drop::before { content: ''; position: absolute; inset-block-start: -12px; inset-inline: 0; height: 12px; }
.nav-drop a {
  display: block; padding: var(--s-3) var(--s-4); border-radius: 10px; color: var(--fg-dim);
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.nav-drop a:hover, .nav-drop a:focus-visible { background: var(--bg-3); color: var(--fg); }
.nav-drop .t { font-size: var(--fs-small); font-weight: var(--w-strong); display: block; }
.nav-drop .d { font-size: var(--fs-label); color: var(--fg-mute); display: block; margin-top: 2px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.nav-drop-all { border-top: 1px solid var(--line); margin-top: var(--s-1); padding-top: var(--s-1); }
.nav-drop-all .t { color: var(--gold); }

.hdr-right { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.langsw { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 3px; }
.langsw a {
  font-family: var(--ff-body); font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  padding: 0 var(--s-3); border-radius: var(--radius-pill); color: var(--fg-mute); line-height: 1;
  min-width: 34px; min-height: 32px; display: inline-grid; place-items: center;
  transition: all var(--t-fast) var(--e-out);
}
.langsw a[aria-current] { background: var(--gold); color: var(--bg); }
.langsw a:not([aria-current]):hover { color: var(--fg); background: var(--bg-3); }

.burger { display: none; width: var(--tap); height: var(--tap); place-items: center; position: relative; z-index: 950; }
.burger i { display: block; width: 22px; height: 1.5px; background: var(--fg); position: absolute; border-radius: 2px; transition: transform .42s var(--e-out), width .3s var(--e-out); }
.burger i:nth-child(1) { transform: translateY(-4px); }
.burger i:nth-child(2) { transform: translateY(4px); }
.burger:hover i:nth-child(1) { width: 16px; }
body.menu-open .burger i:nth-child(1) { transform: rotate(45deg); width: 22px; }
body.menu-open .burger i:nth-child(2) { transform: rotate(-45deg); }
@media (max-width: 1180px) { .nav, .hdr-right > .btn { display: none; } .burger { display: grid; } }
/* Below ~360px the brand + language pill + burger no longer fit on one line.
   The language switch is repeated inside the mobile menu, so drop it here
   rather than letting the header push the document wider than the screen. */
@media (max-width: 380px) { .hdr > .hdr-right > .langsw { display: none; } }

.menu {
  position: fixed; inset: 0; z-index: 940; background: var(--bg-1);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-7);
  clip-path: inset(0 0 100% 0); transition: clip-path .72s var(--e-io);
  overflow-y: auto; overscroll-behavior: contain;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(193,101,47,.13), transparent 65%); }
.menu nav { position: relative; }
.menu-link {
  display: block; font-family: var(--ff-display);
  font-size: clamp(1.5rem, 5.6vw, 2.6rem); font-weight: var(--w-head);
  line-height: var(--lh-head);
  padding-block: clamp(var(--s-2), 1.4vw, var(--s-4));
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(24px);
  transition: color var(--t-fast) var(--e-out), padding-inline-start var(--t-mid) var(--e-out);
}
.menu-link:hover { color: var(--gold); padding-inline-start: var(--s-2); }
body.menu-open .menu-link { animation: menuIn .65s var(--e-out) forwards; }
@keyframes menuIn { to { opacity: 1; transform: none; } }
.menu-foot { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; position: relative; opacity: 0; transform: translateY(20px); }
body.menu-open .menu-foot { animation: menuIn .65s var(--e-out) .45s forwards; }
.menu-foot .btn { flex: 1 1 220px; }
.menu-foot a.h4, .menu-foot a.t-h4 { padding-block: var(--s-2); display: inline-block; }
.menu-foot a.small { padding-block: 7px; display: inline-block; }

/* ---------- 8. Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; background: #000; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 116%; object-fit: cover; object-position: 58% 42%; will-change: transform; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.62) 0%, rgba(10,9,8,.16) 28%, rgba(12,11,10,.58) 64%, rgba(20,21,21,.99) 100%),
    radial-gradient(ellipse 70% 60% at 18% 26%, rgba(230,203,177,.15), transparent 62%);
}
.hero-body { position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter) var(--s-9); }
.hero-tags { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.pill-gold {
  font-family: var(--ff-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bg); background: var(--gold);
  padding: 8px var(--s-4); border-radius: var(--radius-pill); line-height: 1.4;
}
/* The one line that has to carry across the room. */
.hero h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: var(--upper);
  text-wrap: nowrap;
}
@media (max-width: 620px) { .hero h1 { text-wrap: balance; } }

.line-mask { overflow: hidden; display: block; padding-bottom: .12em; }
.line-mask > span { display: block; will-change: transform; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-7); flex-wrap: wrap; margin-top: var(--s-6); }
.hero-sub { max-width: 52ch; flex: 1 1 320px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.scroll-cue { display: flex; align-items: center; gap: var(--s-3); color: var(--fg-mute); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); }
.scroll-cue i { width: 1px; height: 44px; background: var(--line-2); position: relative; overflow: hidden; display: block; }
.scroll-cue i::after { content: ''; position: absolute; inset-inline: 0; top: -100%; height: 100%; background: var(--gold); animation: cue 2.4s var(--e-io) infinite; }
@keyframes cue { 0% { top: -100%; } 62% { top: 100%; } 100% { top: 100%; } }
@media (max-width: 768px) { .scroll-cue { display: none; } }
@media (max-width: 620px) {
  .hero { min-height: 92svh; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(10,9,8,.52) 0%, rgba(10,9,8,.08) 24%, rgba(12,11,10,.4) 56%, rgba(20,21,21,.97) 92%),
      radial-gradient(ellipse 90% 50% at 30% 24%, rgba(230,203,177,.16), transparent 66%);
  }
  .hero-tags .micro, .hero-tags .t-label { display: none; }
  .hero-body { padding-bottom: var(--s-7); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
}

.phero { position: relative; padding-block: calc(var(--header-h) + var(--s-9)) var(--s-8); overflow: clip; }
.phero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(193,101,47,.15), transparent 60%); }
.phero h1 { font-size: var(--fs-h1); }
.phero .lead, .phero .t-lead { max-width: 62ch; }

/* ---------- 9. Reveals + media ---------- */
.rv { opacity: 0; transform: translateY(24px); }
.rv-in { opacity: 1; transform: none; transition: opacity .85s var(--e-out), transform .85s var(--e-out); }
.rv-d1 { transition-delay: .06s; } .rv-d2 { transition-delay: .12s; }
.rv-d3 { transition-delay: .18s; } .rv-d4 { transition-delay: .24s; }
.rv-d5 { transition-delay: .3s; }  .rv-d6 { transition-delay: .36s; }

.mask-img { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--radius); }
.mask-img picture { display: block; width: 100%; height: 100%; }
.mask-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus, 50%); will-change: transform; }
.mask-img::after { content: ''; position: absolute; inset: 0; background: var(--bg-inset); transform-origin: bottom; transition: transform 1.05s var(--e-io); }
.mask-img.rv-in::after { transform: scaleY(0); }
.ratio-4-5 { aspect-ratio: 4/5; }
.ratio-3-4 { aspect-ratio: 3/4; }
.ratio-1-1 { aspect-ratio: 1/1; }
.ratio-16-9 { aspect-ratio: 16/9; }
.ratio-3-2 { aspect-ratio: 3/2; }
.ratio-4-3 { aspect-ratio: 4/3; }   /* the one card ratio */
@media (max-width: 620px) { .ratio-16-9 { aspect-ratio: 4/3; } }

.zoom-hover { overflow: hidden; }
.zoom-hover img { transition: transform 1.05s var(--e-out); }
.zoom-hover:hover img, .card:hover .zoom-hover img { transform: scale(1.05); }

/* ---------- 11. Cards ----------
   One card, four uses. The rules that make a set of cards read as designed
   rather than assembled:

   • ONE aspect ratio everywhere (4:3). Mixing 4:5 and 3:2 in the same scroll
     is the single loudest "assembled from parts" signal.
   • The tag sits at the bottom of the image, not the top. The bottom of a
     photograph is where the scrim is darkest, so the chip is legible on every
     image without a per-image adjustment.
   • One action affordance — the circle at the foot — and it is the same
     object on every card. Hovering the card fills it.
   • The body is a fixed rhythm: title, one spec line, description, rule,
     foot. Cards in a row therefore align at the rule even when the text
     lengths differ, because the description takes the slack.                */
.card {
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out),
              transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.card:hover { border-color: rgba(230,203,177,.34); background: var(--bg-2); transform: translateY(-6px); box-shadow: var(--shadow-2); }
.card:has(.stretch:focus-visible) { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.card .stretch:focus-visible { outline: none; }

.card-media { position: relative; overflow: hidden; }
.card-media .mask-img { border-radius: 0; }
/* scrim under the tag so the chip never fights the photograph */
.card-media::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(12,13,13,.72));
  pointer-events: none; z-index: 1;
  transition: opacity var(--t-mid) var(--e-out);
}
.card:hover .card-media::after { opacity: .85; }
.card-media .tag { position: absolute; inset-block-end: var(--s-4); inset-inline-start: var(--s-4); z-index: 2; }

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px var(--s-4) 7px var(--s-3);
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: var(--upper); line-height: 1.3;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: rgba(14,15,15,.72); color: var(--gold);
  border: 1px solid rgba(230,203,177,.24);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out);
}
[dir="rtl"] .tag { padding: 7px var(--s-3) 7px var(--s-4); }
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--copper-3); flex: none; transition: background var(--t-mid) var(--e-out); }
.card:hover .tag { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.card:hover .tag::before { background: var(--copper-1); }

.card-body {
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3); flex: 1;
}
/* Two lines is the common case for these titles. Reserving that height is
   what makes the descriptions in a row start on the same line instead of
   stair-stepping — the detail that separates a card grid from a list of
   boxes. Longer titles still grow; they just do not pull the row apart. */
.card-body h3 {
  font-size: var(--fs-h3); line-height: var(--lh-head);
  min-height: calc(2em * var(--lh-head));
  transition: color var(--t-mid) var(--e-out);
}
@media (max-width: 620px) { .card-body h3 { min-height: 0; } }
.card:hover .card-body h3 { color: var(--gold); }
.card-body > p:last-of-type { flex: 1; }        /* description absorbs the slack */
.card-desc { color: var(--fg-dim); font-size: var(--fs-small); line-height: 1.68; }

.card-foot {
  margin-top: var(--s-5); padding-top: var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  border-top: 1px solid var(--line);
  transition: border-color var(--t-mid) var(--e-out);
}
.card:hover .card-foot { border-color: rgba(230,203,177,.22); }
.card-spec {
  font-size: var(--fs-label); color: var(--fg-mute); letter-spacing: 0; text-transform: none;
  line-height: 1.45; min-width: 0; overflow-wrap: anywhere;
}
/* the single action affordance, identical on every card */
.card-go {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--fg-mute);
  transition: background var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-spring);
}
[dir="rtl"] .card-go svg { transform: scaleX(-1); }
.card:hover .card-go { background: var(--gold); border-color: var(--gold); color: var(--bg); transform: scale(1.08); }

.stretch { position: absolute; inset: 0; z-index: 3; display: block; }

/* showcase rows */
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6), 4vw, var(--s-10)); align-items: center; padding-block: var(--sec-y-sm); border-top: 1px solid var(--line); }
.showcase-row.alt .showcase-media { order: 2; }
@media (max-width: 900px) { .showcase-row { grid-template-columns: 1fr; gap: var(--s-5); } .showcase-row.alt .showcase-media { order: 0; } }
.showcase-txt { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.showcase-txt h2, .showcase-txt h3 { font-size: var(--fs-h2); }

/* feature tiles */
.feat { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); transition: border-color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out); }
.feat:hover { border-color: var(--line-3); background: var(--bg-2); transform: translateY(-3px); }
.feat-ico { width: 30px; height: 30px; color: var(--gold); transition: transform var(--t-mid) var(--e-spring); }
.feat:hover .feat-ico { transform: scale(1.1) rotate(-4deg); }
.feat-ico svg { width: 100%; height: 100%; }
.feat h3 { font-size: var(--fs-h4); }

.checks { display: flex; flex-direction: column; gap: var(--s-3); }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--fg-dim); }
.checks li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: var(--copper-grad); }

/* highlight strip */
.hl-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.hl-strip > div { padding: var(--s-7) var(--s-5); border-inline-start: 1px solid var(--line); transition: background var(--t-mid) var(--e-out); }
.hl-strip > div:first-child { border-inline-start: 0; }
.hl-strip > div:hover { background: var(--bg-1); }
.hl-strip b { display: block; font-family: var(--ff-display); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: var(--w-head); color: var(--gold); letter-spacing: var(--track-head); line-height: 1.2; }
.hl-strip span { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--fg-mute); }
@media (max-width: 768px) {
  .hl-strip { grid-template-columns: repeat(2, 1fr); }
  .hl-strip > div:nth-child(odd) { border-inline-start: 0; }
  .hl-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 380px) {
  .hl-strip { grid-template-columns: 1fr; }
  .hl-strip > div { border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .hl-strip > div:last-child { border-bottom: 0; }
}

/* ---------- 12. Technology — stacked full-screen panels ----------
   What the client asked for: each step is a whole screen, and scrolling
   brings the next screen out from behind the current one and lays it on top.

   The mechanism is `position: sticky` on every panel with the same `top: 0`.
   Panel 1 sticks to the viewport; panel 2 scrolls up over it and sticks in
   turn; and so on. That is the entire covering effect, and it is pure CSS —
   it works with JavaScript disabled, with a blocked CDN, and on any browser
   from the last five years.

   JavaScript only adds the depth cues on top: the covered panel scales down
   and dims a little (so it reads as receding, not just hidden), and the photo
   inside each panel drifts against the scroll. Nothing breaks without it.   */
.stackx { position: relative; }
.stackx-panel {
  position: sticky; top: 0; height: 100svh; min-height: 560px;
  overflow: hidden;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
/* the incoming panel casts onto the one it is covering, so the overlap reads
   as a physical sheet rather than a hard cut */
.stackx-panel + .stackx-panel { box-shadow: 0 -34px 70px -18px rgba(0,0,0,.9); }
/* every panel is opaque, otherwise the one underneath shows through */
.stackx-panel::before { content: ''; position: absolute; inset: 0; background: var(--bg); z-index: 0; }

.stackx-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* <picture> is display:inline by default, so a percentage height on the <img>
   has no definite parent to resolve against and object-fit never runs. */
.stackx-media picture { display: block; width: 100%; height: 100%; }
/* A full-screen landscape crop of a portrait photograph shows one band of it.
   The per-image --focus keeps the tower in a 4:5 card; a 16:9 panel needs to
   sit lower still or the frame is all wall and no product. */
.stackx-media img {
  width: 100%; height: 118%; object-fit: cover;
  object-position: 50% calc(var(--focus, 50%) + 16%);
  will-change: transform;
}
/* The scrim runs from the copy side outward, so the photograph keeps its
   depth on the far side instead of the whole frame going flat black. */
.stackx-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.4) 0%, rgba(10,10,10,.05) 34%, rgba(14,14,14,.66) 100%),
    linear-gradient(to var(--scrim-dir, right),
      rgba(11,12,12,.95) 0%, rgba(11,12,12,.9) 22%, rgba(11,12,12,.62) 44%,
      rgba(11,12,12,.22) 62%, transparent 78%);
}
[dir="rtl"] .stackx-media::after { --scrim-dir: left; }

.stackx-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + var(--s-6)) var(--s-8);
}
.stackx-copy { max-width: 46ch; display: flex; flex-direction: column; gap: var(--s-4); }
.stackx-copy h3 { font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.stackx-copy .stackx-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--gold); }
.stackx-copy p:not(.stackx-lead) { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-dim); }

/* Step counter, set with the copy rather than floated in a corner: it answers
   "where am I in this sequence", which is a reading question, not decoration. */
.stackx-meter { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-1); }
.stackx-meter .bar { width: 56px; height: 2px; background: rgba(244,241,235,.2); position: relative; overflow: hidden; border-radius: 2px; flex: none; }
.stackx-meter .bar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--copper-grad); border-radius: 2px; }
.stackx-meter .lbl { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--gold-dim); font-weight: 600; }
html[lang|="fa"] .stackx-meter .lbl, html[lang|="ar"] .stackx-meter .lbl { font-family: var(--ff-body); }

@media (max-width: 900px) {
  .stackx-panel { height: 100svh; min-height: 520px; }
  .stackx-copy { max-width: none; }
  .stackx-inner { align-items: flex-end; padding-block-end: calc(var(--s-9) + var(--s-5)); }
  /* On a phone the copy sits over the middle of the frame, so the scrim has
     to start climbing well before the text does. */
  .stackx-media::after {
    background: linear-gradient(to bottom,
      rgba(10,10,10,.46) 0%, rgba(10,10,10,.14) 16%, rgba(11,12,12,.6) 36%,
      rgba(12,13,13,.9) 55%, rgba(14,15,15,.96) 78%, rgba(16,17,17,.98) 100%);
  }
}
/* A sticky stack cannot be undone by JS alone, so the reduced-motion and
   no-sticky fallbacks are declared here: plain full-width sections. */
@media (prefers-reduced-motion: reduce) {
  .stackx-panel { position: relative; height: auto; min-height: 0; transform: none !important; opacity: 1 !important; }
  .stackx-inner { padding-block: var(--sec-y-sm); min-height: 62svh; }
}

/* ---------- 13. Flow steps ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; counter-reset: step; }
@media (max-width: 1024px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .flow { grid-template-columns: 1fr; } }
.flow > li { background: var(--bg-1); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-height: 150px; transition: background var(--t-mid) var(--e-out); }
.flow > li:hover { background: var(--bg-2); }
.flow .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--copper-grad); flex: none; }
.flow p { font-size: var(--fs-small); color: var(--fg-dim); }

/* ---------- 14. Spec table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.spec-table { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; min-width: 260px; }
.spec-table th, .spec-table td { padding: var(--s-4) var(--s-5); text-align: start; border-bottom: 1px solid var(--line); }
.spec-table thead th { background: var(--bg-2); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--gold); font-weight: 600; }
.spec-table tbody tr { transition: background var(--t-fast) var(--e-out); }
.spec-table tbody tr:hover { background: var(--bg-1); }
.spec-table tbody tr:last-child td, .spec-table tbody tr:last-child th { border-bottom: 0; }
.spec-table td:last-child { font-family: var(--ff-mono); color: var(--fg); font-size: var(--fs-small); white-space: nowrap; }

/* ---------- 15. Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; align-items: center; gap: var(--s-5); text-align: start; padding: var(--s-5) 0; min-height: var(--tap); transition: color var(--t-fast) var(--e-out); }
.acc-head h3 { flex: 1; font-size: var(--fs-h4); font-weight: var(--w-head); }
.acc-head:hover { color: var(--gold); }
.acc-sign { flex: none; width: 18px; height: 18px; position: relative; }
.acc-sign::before, .acc-sign::after { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .42s var(--e-out); }
.acc-sign::after { transform: rotate(90deg); }
.acc-item.is-open .acc-sign::after { transform: rotate(0); }
.acc-item.is-open .acc-head { color: var(--gold); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .48s var(--e-io); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { padding-bottom: var(--s-5); max-width: 76ch; color: var(--fg-dim); }

/* ---------- 16. Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-btn {
  padding: var(--s-2) var(--s-5); min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  font-family: var(--ff-body); font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: var(--upper); font-weight: 600; color: var(--fg-mute); white-space: nowrap;
  transition: all var(--t-fast) var(--e-out);
}
.filter-btn:hover { color: var(--fg); border-color: var(--line-3); }
.filter-btn[aria-pressed="true"] { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.filter-item { transition: opacity .4s var(--e-out), transform .4s var(--e-out); }
.filter-item.is-out { opacity: 0; transform: scale(.96); pointer-events: none; position: absolute; visibility: hidden; }
@media (max-width: 620px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .filters::-webkit-scrollbar { display: none; }
}

/* ---------- 17. Article ---------- */
.article-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-dim); }
.article-body > * + * { margin-top: 1.35em; }
.article-body h2 { font-size: var(--fs-h3); color: var(--fg); margin-top: 2em; margin-bottom: .15em; scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
.article-body h3 { font-size: var(--fs-h4); color: var(--fg); margin-top: 1.6em; }
.article-body p { text-wrap: pretty; }
.article-body ul, .article-body ol { display: flex; flex-direction: column; gap: var(--s-3); padding-inline-start: 0; }
.article-body ul li { display: flex; gap: var(--s-3); }
.article-body ul li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .74em; border-radius: 50%; background: var(--copper-grad); }
.article-body blockquote {
  border-inline-start: 2px solid var(--gold); padding-inline-start: var(--s-5);
  margin-block: 2em; font-family: var(--ff-accent); font-style: italic;
  font-size: var(--fs-h3); line-height: 1.5; color: var(--gold-hi);
}
html[lang|="fa"] .article-body blockquote, html[lang|="ar"] .article-body blockquote { font-style: normal; line-height: 1.85; }
.article-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--gold-hi); }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; font-size: var(--fs-small); color: var(--fg-mute); }
.article-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }

.toc { position: sticky; top: calc(var(--header-h) + var(--s-6)); display: flex; flex-direction: column; gap: 2px; }
.toc a { font-size: var(--fs-small); color: var(--fg-mute); padding-inline-start: 15px; padding-block: 6px; position: relative; transition: color var(--t-fast) var(--e-out); line-height: 1.5; }
.toc a::before { content: ''; position: absolute; inset-inline-start: 0; top: 1.05em; width: 7px; height: 1px; background: var(--fg-faint); transition: all var(--t-fast) var(--e-out); }
.toc a:hover, .toc a.is-active { color: var(--gold); }
.toc a.is-active::before { background: var(--gold); width: 11px; }
@media (max-width: 900px) { .toc { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-4) 0; border-block: 1px solid var(--line); } }

/* ---------- 18. Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); position: relative; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--ff-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--fg-mute); font-weight: 600; transition: color var(--t-fast) var(--e-out); }
.field:focus-within label { color: var(--gold); }
.field label .req { color: var(--copper-3); }
.field input, .field select, .field textarea { width: 100%; padding: var(--s-3) 0; min-height: var(--tap); border-bottom: 1px solid var(--line-2); color: var(--fg); font-size: var(--fs-body); transition: border-color var(--t-fast) var(--e-out); }
.field select { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%); background-position: calc(100% - 12px) 22px, calc(100% - 7px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 26px; }
[dir="rtl"] .field select { background-position: 12px 22px, 17px 22px; padding-inline-end: 0; padding-inline-start: 26px; }
.field select option { background: var(--bg-2); color: var(--fg); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: var(--err); }
.field.is-valid input, .field.is-valid select, .field.is-valid textarea { border-bottom-color: rgba(143,191,159,.55); }
.field-msg { font-size: var(--fs-label); color: var(--err); min-height: 1em; letter-spacing: 0; text-transform: none; font-weight: 400; }
.form-note { font-size: var(--fs-small); color: var(--fg-mute); }
.form-status { padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg); font-size: var(--fs-small); }
.form-status[hidden] { display: none; }
.form-status.ok { background: rgba(143,191,159,.1); border: 1px solid rgba(143,191,159,.45); color: #BFE0CB; }
.form-status.err { background: rgba(224,129,89,.11); border: 1px solid rgba(224,129,89,.5); color: var(--copper-3); }

/* ---------- 19. Contact rows ---------- */
.ct-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ct-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); min-height: var(--tap); transition: padding-inline-start var(--t-mid) var(--e-out); }
a.ct-row:hover { padding-inline-start: var(--s-2); }
.ct-row .k { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--fg-mute); min-width: 100px; font-weight: 600; }
.ct-row .v { font-size: var(--fs-h4); color: var(--fg); }
.ct-row .v[dir="ltr"] { font-family: var(--ff-mono); }

/* ---------- 20. Footer ---------- */
.ftr { border-top: 1px solid var(--line); background: var(--bg-inset); padding-block: var(--s-9) var(--s-6); }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); }
@media (max-width: 980px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr-top { grid-template-columns: 1fr; } }
.ftr h4 { font-family: var(--ff-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--gold); margin-bottom: var(--s-4); font-weight: 600; }
.ftr ul { display: flex; flex-direction: column; gap: var(--s-1); }
.ftr ul a, .ftr .ftr-contact a { font-size: var(--fs-small); color: var(--fg-mute); transition: color var(--t-fast) var(--e-out); display: inline-block; padding-block: 7px; }
.ftr ul a:hover, .ftr .ftr-contact a:hover { color: var(--gold); }
.ftr-brand { display: inline-block; padding-block: var(--s-2); }  /* 28px mark + padding = 44px tap target */
.ftr-brand svg { height: 28px; width: auto; color: var(--gold); }
.ftr-wordmark { margin-top: var(--s-8); color: rgba(244,241,235,.045); }
.ftr-wordmark svg { width: 100%; height: auto; display: block; }
@media (max-width: 620px) { .ftr-wordmark { display: none; } }

.ftr-bottom {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-small); color: var(--fg-mute);
}
.ftr-rights { color: var(--fg-mute); }
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.ftr-legal a { color: var(--fg-mute); padding-block: 6px; transition: color var(--t-fast) var(--e-out); }
.ftr-legal a:hover { color: var(--gold); }
.ftr-legal .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); flex: none; }

.ftr-bottom > * { min-width: 0; max-width: 100%; }
.credit { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; padding-block: 6px; color: var(--fg-mute); transition: color var(--t-fast) var(--e-out); }
.credit-txt { white-space: nowrap; }
.credit-heart { width: 13px; height: 13px; color: var(--copper-2); display: inline-flex; flex: none; transition: color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-spring); }
.credit-heart svg { width: 100%; height: 100%; }
.credit-brand { position: relative; color: var(--gold); font-weight: 600; transition: color var(--t-fast) var(--e-out); }
.credit-brand::after { content: ''; position: absolute; inset-inline-start: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transition: transform var(--t-mid) var(--e-out); }
[dir="ltr"] .credit-brand::after { transform-origin: right; }
[dir="rtl"] .credit-brand::after { transform-origin: left; }
.credit:hover { color: var(--fg-dim); }
.credit:hover .credit-brand { color: var(--gold-hi); }
.credit:hover .credit-brand::after { transform: scaleX(1); }
[dir="ltr"] .credit:hover .credit-brand::after { transform-origin: left; }
[dir="rtl"] .credit:hover .credit-brand::after { transform-origin: right; }
.credit:hover .credit-heart { color: var(--copper-3); transform: scale(1.18); }
@media (max-width: 860px) { .ftr-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-4); } }
@media (max-width: 480px) { .ftr-bottom { align-items: center; text-align: center; } .ftr-legal { justify-content: center; } }

/* ---------- 21. CTA band ---------- */
.cta-band { position: relative; overflow: clip; border-top: 1px solid var(--line); }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 90% at 50% 120%, rgba(193,101,47,.22), transparent 65%); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 480px) { .cta-actions .btn { width: 100%; } }

/* ---------- 22. Breadcrumb / pager ---------- */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-label); color: var(--fg-mute); letter-spacing: .04em; font-weight: 400; }
.crumb a { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 3px; }
.crumb a:hover { color: var(--gold); }
.crumb .sep { color: var(--fg-faint); display: inline-flex; }
[dir="rtl"] .crumb .sep { transform: scaleX(-1); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 620px) { .pager { grid-template-columns: 1fr; } }
.pager a, .pager > span { background: var(--bg); padding: var(--s-7) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); transition: background var(--t-mid) var(--e-out); }
.pager a:hover { background: var(--bg-1); }
.pager .k { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--gold-dim); font-weight: 600; }
.pager .t { font-size: var(--fs-h4); }
.pager a.next { text-align: end; align-items: flex-end; }

/* ---------- 23. Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 9800; background: rgba(10,10,10,.95); backdrop-filter: blur(12px); display: grid; place-items: center; padding: clamp(var(--s-4), 5vw, var(--s-9)); opacity: 0; visibility: hidden; transition: opacity .38s var(--e-out), visibility .38s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb figure { display: grid; place-items: center; max-width: 100%; }
.lb img { max-width: 100%; max-height: 80vh; width: auto; object-fit: contain; border-radius: 4px; transition: opacity .3s var(--e-out); }
.lb.is-loading img { opacity: .35; }
.lb figcaption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fg-mute); text-align: center; }
.lb-close { position: absolute; top: var(--s-5); inset-inline-end: var(--s-5); width: var(--tap); height: var(--tap); border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--fg); transition: all var(--t-fast) var(--e-out); }
.lb-close:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.lb-nav { position: absolute; inset-block: 0; width: 20%; display: grid; place-items: center; }
.lb-nav.prev { inset-inline-start: 0; } .lb-nav.next { inset-inline-end: 0; }
.lb-nav span { width: var(--tap); height: var(--tap); border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; opacity: .5; background: rgba(20,21,21,.5); transition: all var(--t-fast) var(--e-out); }
.lb-nav:hover span { opacity: 1; background: var(--gold); color: var(--bg); border-color: var(--gold); }
.lb-count { position: absolute; bottom: var(--s-5); inset-inline-start: 50%; transform: translateX(-50%); font-family: var(--ff-mono); font-size: var(--fs-label); color: var(--fg-mute); }
@media (max-width: 620px) { .lb-nav { width: 26%; } .lb img { max-height: 68vh; } }

/* ---------- 24. Floating actions ---------- */
.fab-stack { position: fixed; z-index: 880; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); transition: transform var(--t-mid) var(--e-out); }
.fab-stack.is-lifted { transform: translateY(calc(var(--fab-lift, 0px) * -1)); }
.fab { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); min-height: var(--tap); background: var(--gold); color: var(--bg); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(20px) scale(.94); pointer-events: none; transition: opacity .4s var(--e-out), transform .4s var(--e-spring), background .3s; }
.fab.is-in { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { background: var(--gold-hi); }
.fab svg { width: 19px; height: 19px; flex: none; }
.to-top { width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--bg-2); color: var(--gold); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.to-top:hover { background: var(--bg-3); color: var(--gold-hi); }
@media (max-width: 620px) { .fab .lbl { display: none; } .fab { padding: 0; width: var(--tap); justify-content: center; } }

/* ---------- 25. 404 ---------- */
.nf-code { font-family: var(--ff-display); font-size: clamp(4.5rem, 17vw, 13rem); font-weight: var(--w-display); line-height: .9; letter-spacing: -.04em; display: block; }

/* ==========================================================================
   28. VECTOR ART LAYER
   --------------------------------------------------------------------------
   The illustrative language, kept entirely in CSS and one SVG so it applies
   to all 120 pages without touching a single one of them.

   Two motifs, and each has a job:

     bubbles   the product is carbonation. Outlined circles, never filled, so
               they can cross a photograph without hiding it.
     grid      a 48px blueprint rule. This is a company that builds hardware;
               the grid is the drafting table under the marketing.

   Both are painted through `mask-image` rather than dropped in as a coloured
   background. A background-image SVG is stuck with whatever colour is baked
   into the file — `currentColor` resolves to black in that context and
   vanishes on a dark page. Masking the brand gradient instead means one SVG
   serves every tint, and the motif picks up the copper automatically.
   ========================================================================== */

/* The motif layers sit behind copy and in front of photography. Anything
   using them needs a stacking context of its own — the sections below all
   already have `position: relative`. */
.hero::before,
.cta-band::after,
.stackx::before,
.hl-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- carbonation field ---- */
.hero::before,
.cta-band::after {
  z-index: 1;
  background: linear-gradient(118deg, var(--copper-3), var(--gold) 52%, var(--copper-2));
  -webkit-mask-image: url("../img/vector-bubbles.svg");
          mask-image: url("../img/vector-bubbles.svg");
  -webkit-mask-size: cover;   mask-size: cover;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
}
/* Over the hero photograph the field has to stay a suggestion — the h1 is
   the thing that has to carry. Over the flat CTA band it can come up. */
.hero::before    { opacity: .22; }
.cta-band::after { opacity: .52; z-index: 0; }

/* Mirrored for RTL so the composition does not read as a flipped copy of the
   Latin one — the dense corner of the field stays on the reading-in side. */
[dir="rtl"] .hero::before,
[dir="rtl"] .cta-band::after { transform: scaleX(-1); }

/* ---- blueprint grid ----
   NOT applied to .stackx. Every panel in that section paints an opaque
   .stackx-panel::before over its whole area so the panel underneath cannot
   show through, which means a grid on the section behind them is covered
   before it is ever seen — and reaching for it cost the sticky stacking
   (see the note by .hl-strip > div). */
.hl-strip::before {
  z-index: 0;
  background-image:
    linear-gradient(to right,  var(--vector-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--vector-line) 1px, transparent 1px);
  background-size: 48px 48px;
  /* Fade it out at the edges so it reads as a lit patch of drafting paper
     rather than a table that got cropped. */
  -webkit-mask-image: radial-gradient(ellipse 76% 68% at 50% 44%, #000 28%, transparent 78%);
          mask-image: radial-gradient(ellipse 76% 68% at 50% 44%, #000 28%, transparent 78%);
  opacity: .9;
}
.hl-strip { position: relative; }

/* Lift the cells above the grid layer. Scoped to `> div`, which is what the
   cells are, and NOT written as `> *`.

   The `> *` version of this rule is what broke the technology section: the
   panels there are `position: sticky`, a blanket `position: relative` on the
   children turned them static, and the whole front-to-back stacking — each
   panel sliding under the next as it scales and dims — collapsed into a
   plain scroll. Never set position on a descendant set you have not looked
   at one by one. */
.hl-strip > div { position: relative; z-index: 1; }

/* ---- process diagram ----
   The five flow steps were five boxes in a row with a hairline between them.
   Numbered nodes joined by a rule turn the same markup into a drawing of the
   process, which is what the content was describing all along. */
.flow {
  background: transparent;
  border-color: var(--glass-brd);
  gap: 1px;
}
.flow > li {
  position: relative;
  background: var(--glass-1);
  counter-increment: step;
  padding-block-start: var(--s-7);
}
.flow > li:hover { background: var(--glass-2); }

/* the node */
.flow > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-block-start: var(--s-5);
  inset-inline-start: var(--s-5);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--ff-mono);
  font-size: .68rem; font-weight: 600; letter-spacing: 0;
  color: var(--gold);
  border: 1px solid var(--glass-brd-hi);
  border-radius: 50%;
  background: var(--glass-3);
  transition: border-color var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out);
}
/* The node number follows the script. `decimal-leading-zero` renders Latin
   digits, which is the one thing on a Persian page that would give the
   redesign away as translated rather than typeset — the body copy already
   uses Persian numerals throughout. The native counter styles drop the
   leading zero, so the node is sized by its content instead. */
html[lang|="fa"] .flow > li::before,
html[lang|="ar"] .flow > li::before {
  font-family: var(--ff-body);
  min-width: 26px; width: auto; padding-inline: 5px;
}
html[lang|="fa"] .flow > li::before { content: counter(step, persian); }
html[lang|="ar"] .flow > li::before { content: counter(step, arabic-indic); }
.flow > li:hover::before { border-color: var(--gold); color: var(--gold-hi); }

/* the connector — drawn from each node to the next, stopping at the last */
.flow > li::after {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--s-5) + 13px);
  inset-inline-start: calc(var(--s-5) + 26px);
  inset-inline-end: 0;
  height: 1px;
  background: linear-gradient(to right, var(--glass-brd-hi), transparent);
  pointer-events: none;
}
[dir="rtl"] .flow > li::after { background: linear-gradient(to left, var(--glass-brd-hi), transparent); }
.flow > li:last-child::after { display: none; }
/* Once the grid wraps, the connector would point at nothing. */
@media (max-width: 1024px) { .flow > li:nth-child(2n)::after { display: none; } }
@media (max-width: 560px)  { .flow > li::after { display: none; } }

.flow .step-dot { display: none; }   /* the numbered node replaces it */

/* ==========================================================================
   29. GLASS
   --------------------------------------------------------------------------
   Applied only to surfaces that overlap other content — see the note on the
   --glass-* tokens. Everything here is a re-skin of a rule defined earlier;
   nothing new is introduced, so removing this whole section returns the site
   to flat panels rather than breaking it.
   ========================================================================== */

/* The sheen needs a positioned ancestor. Most of these already have one and
   MUST keep it — .hdr is fixed, .nav-drop is absolute, .card is relative —
   so only the two that are genuinely static are touched here. Do not widen
   this selector: blanket-setting `position: relative` on the list below drops
   the fixed header and the absolute dropdown into normal flow. */
.flow, .spec-table { position: relative; }

.hdr.is-stuck::after, .nav-drop::after, .card::after,
.acc-item::after, .flow::after {
  content: '';
  position: absolute;
  inset-block-start: 0; inset-inline: 0;
  height: 1px;
  background: var(--glass-sheen);
  pointer-events: none;
  z-index: 3;
}

/* ---- header ---- */
.hdr.is-stuck {
  background: var(--glass-3);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  border-bottom-color: var(--glass-brd);
}

/* ---- dropdown + mobile menu: fully detached, so the deepest blur ---- */
.nav-drop {
  background: var(--glass-3);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  border-color: var(--glass-brd);
  box-shadow: var(--glass-shadow);
}

/* ---- cards ----
   Cards rest on the page rather than float over it, so they take the
   lightest tint and no blur at all: 78 blurred panels on one scroll is a
   compositor bill for an effect nobody can see behind an opaque photograph.
   What they take from the glass system is the border and the sheen. */
.card {
  background: var(--glass-1);
  border-color: var(--glass-brd);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card:hover {
  background: var(--glass-2);
  border-color: var(--glass-brd-hi);
  box-shadow: var(--glass-shadow);
}

/* ---- chips, floating buttons, lightbox chrome: these genuinely float ---- */
.tag {
  background: var(--glass-3);
  border-color: var(--glass-brd-hi);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
/* .fab is deliberately NOT in this list. It is the WhatsApp button: solid
   gold with `color: var(--bg)`, i.e. near-black text. Swapping its
   background for dark glass while that colour stayed put left black text on
   a dark translucent pill — the label vanished. It is also the one control
   on the page that has to be found instantly, which is the opposite of what
   a frosted panel does. It keeps the solid fill. */
.to-top, .lb-count {
  background: var(--glass-3);
  border: 1px solid var(--glass-brd-hi);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ---- panels that sit on the page: tint and border only ---- */
.acc-item, .spec-table {
  background: var(--glass-1);
  border-color: var(--glass-brd);
}
.acc-item:hover { background: var(--glass-2); }

/* ---- mobile menu: a full-screen pane over the page it came from ----
   The clip-path reveal is what makes this one worth blurring — the page
   stays visible underneath through the whole wipe. */
.menu {
  background: var(--glass-3);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
}

/* ---- outline buttons ----
   The ghost button sat on nothing. The glass tint gives it a body, so it
   reads as a control at rest instead of a label with a ring drawn round it.
   The fill-up hover is untouched: ::before still slides the gold over.

   Tint and border only — no blur. A page can carry twenty of these, and a
   button in a flat section has nothing behind it worth frosting; twenty
   compositor layers for an invisible effect is the exact trade the note at
   the top of this section warns about. The two places a button really does
   sit over a photograph opt in below. */
.btn:not(.btn-solid) {
  background: var(--glass-1);
  border-color: var(--glass-brd-hi);
}
.hero .btn:not(.btn-solid),
.card .btn:not(.btn-solid) {
  background: var(--glass-3);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ---- no backdrop-filter (older Firefox, and anything with the feature
        switched off): fall back to an opaque panel. A translucent panel
        without the blur is just unreadable text on top of a photograph. ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr.is-stuck, .nav-drop, .menu, .tag, .to-top, .lb-count {
    background: var(--bg-1);
  }
  .card, .acc-item, .spec-table, .flow > li { background: var(--bg-1); }
}

/* ==========================================================================
   30. MINIMALISM PASS
   --------------------------------------------------------------------------
   The subtractive half of the redesign. Glass and vector art are additions;
   without this section they would land on top of a page that already had
   plenty going on, and the result reads as busier, not cleaner.

   Everything here removes or quiets something. Nothing here adds.
   ========================================================================== */

/* Air. The single most effective minimalist move and the one most often
   skipped, because it costs scroll length.

   The growth is in the viewport-relative middle of the clamp, not the floor.
   A 180px section edge reads as confidence on a desktop; the same 180px on a
   375px phone is two thirds of the screen's width in dead space, and the
   reader just scrolls past emptiness looking for the next thing. So the
   floor moves only slightly (80 → 88) and the ceiling moves a lot
   (152 → 180). */
:root {
  --sec-y:      clamp(88px, 9vw, 180px);
  --sec-y-sm:   clamp(var(--s-9), 6.5vw, var(--s-10));
  --wrap-read:  min(660px, calc(100vw - var(--gutter) * 2));
}

/* The film-grain overlay fought the glass: a noise texture at 9996 sits on
   TOP of every frosted panel, so the blur it was meant to flatter came out
   speckled. Minimalism has no use for simulated dirt either. */
.grain { display: none; }

/* One DIVIDER weight, not two. A card edge and a table rule carrying
   different hairlines is a distinction the reader has to absorb for no
   information.

   --line-3 is deliberately left alone: it is not a divider, it is the hover
   border on .feat and .filter-btn. Flattening it too would have made those
   two controls stop responding visibly to the pointer, which is affordance
   feedback rather than ornament — not something the minimalism pass gets to
   take. Focus rings use --gold at 2px and are untouched throughout. */
:root { --line-2: rgba(244,241,235,.13); }

/* The copper gradient is now a brand accent used once per screen, not a
   default fill. It stays on the progress bar and the primary button, and
   comes off everything decorative. */
.tag::before { background: var(--gold); }

/* The cursor ring was a 38px circle chasing the pointer with a spring. Kept,
   because removing an interaction people use is not a style decision, but
   reduced to a hairline that does not compete with the glass edges. */
.cursor-ring { width: 30px; height: 30px; border-color: rgba(244,241,235,.26); }
.cursor-ring.is-hover { width: 44px; height: 44px; }
.cursor-ring.is-label { width: 76px; height: 76px; background: rgba(230,203,177,.10); }

/* Cards lifted 6px and grew a 52px shadow on hover — two signals for one
   state change. The border and tint already say "this is the one you are
   pointing at", so the lift comes down to a hint and the shadow goes. */
.card:hover { transform: translateY(-2px); }

/* ---------- bidi: Latin identifiers inside Persian and Arabic ----------
   An Instagram handle is written @carbonix.group, but "@" is bidi-neutral, so
   in an RTL paragraph it reorders to the trailing edge and the handle renders
   as "carbonix.group@". Same class of bug for an email or a phone number
   sitting in Persian copy.

   There is deliberately NO rule here. The first attempt selected the links by
   href and set direction: ltr on the element — but some of those links are
   layout containers rather than text runs. .ct-row on the contact page is a
   flex row holding a label and a value, and flipping its direction moved the
   label to the wrong side of every row except the one that is not a link.

   The isolation belongs on the text, so it lives in the markup instead:
   dir="ltr" on elements whose entire content is a Latin identifier, written
   in by scripts/fix-bidi at build time. A selector that infers an element's
   role from its href cannot tell copy from layout. */

/* ---------- 26. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
  .mask-img::after { display: none; }
  .cursor, .cursor-ring { display: none; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  .preloader { display: none; }
}

/* ---------- 27. Print ---------- */
@media print {
  .hdr, .ftr, .fab-stack, .grain, .cursor, .cursor-ring, .preloader, .progress, .curtain, .menu { display: none !important; }
  body { background: #fff; color: #000; }
  .rv { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}