/* ============================================================================
   TEZVPS — DIGITAL SOVEREIGNTY DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Digital brutalism x cyber-luxury x futurist terminal.
   Rules of the system:
     - border-radius is ALWAYS 0. Corners are marked, never rounded.
     - Borders are hairlines (1px, low alpha). Weight comes from contrast, not size.
     - Phosphor green is a scalpel, not a paintbrush. Glow only on interactive state.
     - Motion is ease-out only. No bounce, no elastic, no spring.
     - Everything uses CSS logical properties so RTL (fa / ur) mirrors natively.
   ========================================================================== */

/* ---------------------------------------------------------------- 01. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-block-size: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, canvas, video { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; inline-size: 100%; }
summary::-webkit-details-marker { display: none; }
::selection { background: var(--phos); color: #000; }

/* --------------------------------------------------------------- 02. TOKENS */
:root {
  /* Surfaces — absolute black to graphite */
  --void:        #050505;
  --void-2:      #080a0c;
  --graphite:    #0f1115;
  --graphite-2:  #14171c;
  --graphite-3:  #1a1e24;

  /* Accents — used sparingly, by contract */
  --phos:        #00ff9c;
  --phos-dim:    #00b86f;
  --phos-a8:     rgba(0, 255, 156, .08);
  --phos-a16:    rgba(0, 255, 156, .16);
  --phos-a32:    rgba(0, 255, 156, .32);
  --ice:         #00e5ff;
  --ice-a12:     rgba(0, 229, 255, .12);
  --ice-a28:     rgba(0, 229, 255, .28);
  --amber:       #ffb340;
  --danger:      #ff4d5e;

  /* Type colour — off-white to cold grey */
  --text:        #e9edeb;
  --text-2:      #9aa4a8;
  --muted:       #6d787e;
  --dim:         #454e55;

  /* Hairlines */
  --line:        rgba(255, 255, 255, .07);
  --line-2:      rgba(255, 255, 255, .12);
  --line-3:      rgba(255, 255, 255, .20);
  --line-phos:   rgba(0, 255, 156, .22);

  /* Type families — overridden per-locale further down */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "Space Grotesk", "JetBrains Mono", sans-serif;
  --font-num:     "JetBrains Mono", ui-monospace, monospace;

  /* Fluid type scale */
  --fs-micro:  11px;
  --fs-xs:     12px;
  --fs-sm:     13.5px;
  --fs-base:   15.5px;
  --fs-md:     17px;
  --fs-lg:     clamp(19px, 1.5vw, 22px);
  --fs-h3:     clamp(21px, 2vw, 27px);
  --fs-h2:     clamp(28px, 3.6vw, 46px);
  --fs-h1:     clamp(32px, 4.8vw, 64px);
  --fs-display:clamp(36px, 5.6vw, 82px);

  /* Tracking */
  --tr-label:  .3em;
  --tr-tight:  -.02em;
  --tr-tighter:-.035em;

  /* Rhythm */
  --gut:       clamp(20px, 4vw, 40px);
  --sec:       clamp(72px, 11vw, 168px);
  --shell:     1360px;
  --nav-h:     70px;

  /* Motion — ease-out only, no overshoot */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-2:    cubic-bezier(.25, .8, .25, 1);
  --t-fast:    .22s;
  --t:         .42s;
  --t-slow:    .72s;

  /* Elevation is light, never shadow-blur mush */
  --glow-phos: 0 0 0 1px var(--phos-a32), 0 0 28px -8px rgba(0,255,156,.45);
  --glow-ice:  0 0 0 1px var(--ice-a28),  0 0 28px -8px rgba(0,229,255,.40);
}

/* Per-locale typography. Latin keeps the mono signature; complex scripts get
   script-native faces, but numerals stay mono via .num for a constant technical
   texture across all 6 locales. */
html[lang="fa"] { --font-display: "Vazirmatn", "Noto Sans Arabic", sans-serif; --font-body: "Vazirmatn", "Noto Sans Arabic", sans-serif; --font-mono: "JetBrains Mono", "Vazirmatn", "Noto Sans Arabic", sans-serif; --tr-tight: 0; --tr-tighter: 0; --tr-label: .12em; }
html[lang="ur"] { --font-display: "Noto Nastaliq Urdu", "Noto Sans Arabic", serif; --font-body: "Noto Sans Arabic", sans-serif; --font-mono: "JetBrains Mono", "Noto Sans Arabic", sans-serif; --tr-tight: 0; --tr-tighter: 0; --tr-label: .1em; }
html[lang="bn"] { --font-display: "Hind Siliguri", "Noto Sans Bengali", sans-serif; --font-body: "Hind Siliguri", "Noto Sans Bengali", sans-serif; --font-mono: "JetBrains Mono", "Hind Siliguri", "Noto Sans Bengali", sans-serif; --tr-tight: 0; --tr-tighter: 0; --tr-label: .1em; }
html[lang="hi"] { --font-display: "Hind", "Noto Sans Devanagari", sans-serif; --font-body: "Hind", "Noto Sans Devanagari", sans-serif; --font-mono: "JetBrains Mono", "Hind", "Noto Sans Devanagari", sans-serif; --tr-tight: 0; --tr-tighter: 0; --tr-label: .1em; }
html[lang="ur"] :is(h1, h2, .display, .hero__title) { line-height: 1.9; }
html[lang="bn"] :is(h1,h2,h3), html[lang="hi"] :is(h1,h2,h3) { font-weight: 600; }

/* ----------------------------------------------------------------- 03. BASE */
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
}

/* Structural background: a faint architectural grid + a slow phosphor bloom.
   Fixed, so content scrolls across a static lattice — the "control room" floor. */
.substrate { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.substrate::before {
  content: ""; position: absolute; inset: -1px;
  background-image:
    linear-gradient(to right,  var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .40;
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 5%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 5%, transparent 78%);
}
.substrate::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: -10%;
  block-size: 70vh;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,255,156,.055), transparent 70%);
}

/* Scanlines — 1px every 3px, whisper-level alpha, drifting imperceptibly. */
.scan { position: fixed; inset: 0; z-index: 9998; pointer-events: none; mix-blend-mode: overlay; opacity: .5; }
.scan::before {
  content: ""; position: absolute; inset: -100% 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  animation: drift 16s linear infinite;
}
@keyframes drift { to { transform: translate3d(0, 3px, 0); } }

/* Film grain: kills banding on the near-black gradients. */
.grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045; }
.grain::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------- 04. LAYOUT SHELL */
.shell { inline-size: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; }
.shell--wide { inline-size: min(100% - (var(--gut) * 2), 1600px); }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.section + .section { border-block-start: 1px solid var(--line); }

/* Column rails: the vertical hairlines that make the page feel drafted, not designed. */
.rails { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rails i { position: absolute; inset-block: 0; inline-size: 1px; background: var(--line); opacity: .55; }
.rails i:nth-child(1) { inset-inline-start: 16.66%; }
.rails i:nth-child(2) { inset-inline-start: 50%; }
.rails i:nth-child(3) { inset-inline-start: 83.33%; }
@media (max-width: 860px) { .rails i:nth-child(1), .rails i:nth-child(3) { display: none; } }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
/* Span is set on grid-column-END only. The `grid-column: span N` shorthand also
   writes grid-column-end:auto, so a later `.off-N { grid-column-start: N }`
   would silently collapse the item to a single track. */
.c-2 { grid-column-end: span 2; } .c-3 { grid-column-end: span 3; } .c-4 { grid-column-end: span 4; }
.c-5 { grid-column-end: span 5; } .c-6 { grid-column-end: span 6; } .c-7 { grid-column-end: span 7; }
.c-8 { grid-column-end: span 8; } .c-9 { grid-column-end: span 9; } .c-12 { grid-column-end: span 12; }
/* Offsets are extra breathing room, NOT a column skip. An explicit
   grid-column-start would collide with the preceding item and push the block
   onto its own row — silently turning every two-column layout into a stack. */
.off-1 { margin-inline-start: clamp(12px, 2.2vw, 34px); }
.off-2 { margin-inline-start: clamp(20px, 4vw, 64px); }
@media (max-width: 1024px) { .c-2,.c-3,.c-4 { grid-column-end: span 6; } .c-5,.c-7,.c-8,.c-9 { grid-column-end: span 12; } .off-1,.off-2 { margin-inline-start: 0; } }
@media (max-width: 680px)  { .grid > * { grid-column-start: auto; grid-column-end: span 12; } }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.wrap    { flex-wrap: wrap; }
.between { justify-content: space-between; }
.start   { align-items: flex-start; }
.end     { justify-content: flex-end; }
.gap-1 { gap: 8px; } .gap-2 { gap: 14px; } .gap-3 { gap: 22px; } .gap-4 { gap: 34px; } .gap-5 { gap: 52px; }
.mt-1 { margin-block-start: 10px; } .mt-2 { margin-block-start: 18px; } .mt-3 { margin-block-start: 28px; }
.mt-4 { margin-block-start: 44px; } .mt-5 { margin-block-start: 68px; } .mt-6 { margin-block-start: 96px; }

/* ------------------------------------------------------------- 05. TYPOGRAPHY */
.display, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: var(--tr-tighter); }
.display { font-size: var(--fs-display); }
h1, .h1  { font-size: var(--fs-h1); }
h2, .h2  { font-size: var(--fs-h2); line-height: 1.06; }
h3, .h3  { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: var(--tr-tight); }
h4, .h4  { font-size: var(--fs-md); line-height: 1.3; letter-spacing: var(--tr-tight); font-weight: 600; }

.lede { font-size: var(--fs-lg); line-height: 1.56; color: var(--text-2); font-weight: 300; max-inline-size: 62ch; }
.body-2 { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7; }
.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.phos  { color: var(--phos); }
.ice   { color: var(--ice); }
.num   { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
.mono  { font-family: var(--font-mono); }
.up    { text-transform: uppercase; }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* The eyebrow: mono micro-label preceded by a lit rule. The system's signature. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--phos);
  line-height: 1;
}
.eyebrow::before { content: ""; inline-size: 26px; block-size: 1px; background: currentColor; opacity: .55; flex: none; }
.eyebrow--ice { color: var(--ice); }
.eyebrow--muted { color: var(--muted); }
.eyebrow--bare::before { display: none; }

/* Section index numerals — the drafted-blueprint tell. */
.idx { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .2em; color: var(--dim); }

.rule { block-size: 1px; background: var(--line); border: 0; inline-size: 100%; position: relative; }
.rule::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 42px; block-size: 1px; background: var(--phos); opacity: .8; }
.rule--plain::after { display: none; }

/* ---------------------------------------------------------------- 06. BUTTONS */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  block-size: 50px; padding-inline: 26px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text);
  border: 1px solid var(--line-2); background: transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t-fast) var(--ease);
  overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn::before { /* fill wipe, inline-start -> inline-end, mirrors in RTL */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--phos); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t) var(--ease);
}
[dir="rtl"] .btn::before { transform-origin: right center; }
.btn:hover { color: #050505; border-color: var(--phos); box-shadow: var(--glow-phos); }
.btn:hover::before { transform: scaleX(1); }
.btn:focus-visible { outline: 1px solid var(--phos); outline-offset: 3px; }
.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }

.btn--primary { color: #050505; border-color: var(--phos); background: var(--phos); }
.btn--primary::before { background: #050505; }
.btn--primary:hover { color: var(--phos); box-shadow: var(--glow-phos); }
.btn--ice { border-color: var(--ice-a28); color: var(--ice); }
.btn--ice::before { background: var(--ice); }
.btn--ice:hover { color: #050505; border-color: var(--ice); box-shadow: var(--glow-ice); }
.btn--sm { block-size: 40px; padding-inline: 18px; font-size: var(--fs-micro); letter-spacing: .14em; }
.btn--lg { block-size: 58px; padding-inline: 34px; }
.btn--block { inline-size: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* Text link with an underline that draws itself. */
.link {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-2); transition: color var(--t-fast) var(--ease); padding-block-end: 4px;
}
.link::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; block-size: 1px; background: var(--phos); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
[dir="rtl"] .link::after { transform-origin: right; }
.link:hover { color: var(--phos); }
.link:hover::after { transform: scaleX(1); }

/* ------------------------------------------------- 07. PANELS & CORNER MARKS */
/* Corners are never rounded — they are bracketed. Brackets ignite on hover. */
.panel {
  position: relative; background: linear-gradient(180deg, rgba(15,17,21,.72), rgba(8,10,12,.55));
  border: 1px solid var(--line); backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.panel--flat { background: var(--graphite); backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel--void { background: rgba(5,5,5,.6); }

.bracket { position: absolute; inline-size: 9px; block-size: 9px; pointer-events: none; opacity: 0; transition: opacity var(--t) var(--ease); }
.bracket::before, .bracket::after { content: ""; position: absolute; background: var(--phos); }
.bracket::before { inline-size: 100%; block-size: 1px; inset-block-start: 0; inset-inline-start: 0; }
.bracket::after  { inline-size: 1px; block-size: 100%; inset-block-start: 0; inset-inline-start: 0; }
.bracket.tl { inset-block-start: -1px; inset-inline-start: -1px; }
.bracket.tr { inset-block-start: -1px; inset-inline-end: -1px; transform: scaleX(-1); }
.bracket.bl { inset-block-end: -1px; inset-inline-start: -1px; transform: scaleY(-1); }
.bracket.br { inset-block-end: -1px; inset-inline-end: -1px; transform: scale(-1); }
.has-brackets:hover .bracket, .has-brackets:focus-within .bracket, .is-active .bracket { opacity: 1; }

/* Border that redraws itself on hover: top from start, bottom from end. */
.draw { position: relative; }
.draw::before, .draw::after { content: ""; position: absolute; background: var(--phos); pointer-events: none; }
.draw::before { inset-block-start: -1px; inset-inline-start: -1px; block-size: 1px; inline-size: calc(100% + 2px); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.draw::after  { inset-block-end: -1px; inset-inline-end: -1px; block-size: 1px; inline-size: calc(100% + 2px); transform: scaleX(0); transform-origin: right; transition: transform var(--t) var(--ease) .06s; }
[dir="rtl"] .draw::before { transform-origin: right; }
[dir="rtl"] .draw::after  { transform-origin: left; }
.draw:hover::before, .draw:hover::after { transform: scaleX(1); }

/* --------------------------------------------------- 08. TERMINAL WINDOW CARD */
.term { position: relative; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(15,17,21,.88), rgba(5,5,5,.82)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.term__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; block-size: 38px; padding-inline: 14px; border-block-end: 1px solid var(--line); background: rgba(255,255,255,.018); }
.term__path { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.term__path b { color: var(--text-2); font-weight: 500; }
.term__ctl { display: flex; gap: 6px; flex: none; }
.term__ctl i { inline-size: 7px; block-size: 7px; border: 1px solid var(--line-3); display: block; }
.term__ctl i:last-child { border-color: var(--line-2); }
.term__body { padding: clamp(20px, 2.4vw, 30px); }
.term__foot { border-block-start: 1px solid var(--line); padding: 16px clamp(20px, 2.4vw, 30px); }
.term:hover { border-color: var(--line-3); }
.term.is-featured { border-color: var(--phos-a32); }
.term.is-featured .term__bar { background: var(--phos-a8); border-block-end-color: var(--phos-a16); }
.term.is-featured .term__ctl i { border-color: var(--phos-a32); }

/* Live status dot */
/* inline-block, not inline: a bare <span> ignores inline-size/block-size. */
.dot { display: inline-block; vertical-align: middle; inline-size: 6px; block-size: 6px; background: var(--phos); flex: none; position: relative; }
.dot::after { content: ""; position: absolute; inset: -3px; border: 1px solid var(--phos); opacity: 0; animation: ping 2.6s var(--ease) infinite; }
.dot--ice { background: var(--ice); } .dot--ice::after { border-color: var(--ice); }
.dot--amber { background: var(--amber); } .dot--amber::after { border-color: var(--amber); }
.dot--off { background: var(--dim); } .dot--off::after { display: none; }
@keyframes ping { 0% { opacity: .9; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(1.7); } }

/* ------------------------------------------------------------- 09. DATA PARTS */
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-block: 11px; border-block-end: 1px solid var(--line); }
.kv:last-child { border-block-end: 0; }
.kv__k { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.kv__v { font-family: var(--font-num); font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex; align-items: center; gap: 7px; block-size: 24px; padding-inline: 9px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap;
}
.badge--phos { border-color: var(--phos-a32); color: var(--phos); background: var(--phos-a8); }
.badge--ice  { border-color: var(--ice-a28);  color: var(--ice);  background: var(--ice-a12); }
.badge--amber{ border-color: rgba(255,179,64,.3); color: var(--amber); background: rgba(255,179,64,.07); }

.stat__num { font-family: var(--font-num); font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; letter-spacing: var(--tr-tighter); line-height: 1; color: var(--text); }
.stat__lbl { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .22em; color: var(--muted); margin-block-start: 12px; }

.table { font-size: var(--fs-sm); }
.table th { text-align: start; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); padding: 14px 16px; border-block-end: 1px solid var(--line-2); white-space: nowrap; }
.table td { padding: 15px 16px; border-block-end: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table tbody tr:hover { background: rgba(255,255,255,.022); }
.table tbody tr:hover td { color: var(--text); }
.table td:first-child { color: var(--text); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); scrollbar-width: thin; }
.table-wrap::-webkit-scrollbar { block-size: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-3); }

/* Inline code / shell prompt */
.code { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--phos); background: var(--phos-a8); padding: 2px 7px; border: 1px solid var(--phos-a16); direction: ltr; unicode-bidi: embed; display: inline-block; }
.pre { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.85; color: var(--text-2); direction: ltr; unicode-bidi: embed; text-align: left; white-space: pre; overflow-x: auto; }
.pre .c { color: var(--dim); unicode-bidi: isolate; } .pre .g { color: var(--phos); } .pre .b { color: var(--ice); } .pre .w { color: var(--text); }

/* ------------------------------------------------------------------ 10. FORMS */
.field { display: flex; flex-direction: column; gap: 9px; }
.label { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.input, .select, .textarea {
  block-size: 48px; padding-inline: 15px; inline-size: 100%;
  background: rgba(255,255,255,.022); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t-fast) var(--ease);
}
.textarea { block-size: auto; min-block-size: 140px; padding-block: 14px; resize: vertical; line-height: 1.65; }
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--phos); box-shadow: 0 0 0 1px var(--phos-a32), 0 0 24px -10px rgba(0,255,156,.5); background: rgba(0,255,156,.035); }
.select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .select { background-position: left 13px center, left 18px center; }
.select option { background: var(--graphite); color: var(--text); }
.help { font-size: var(--fs-xs); color: var(--dim); line-height: 1.55; }

/* Selectable tile (radio/checkbox replacement) */
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.pick__box { border: 1px solid var(--line-2); padding: 15px 17px; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); background: rgba(255,255,255,.012); block-size: 100%; }
.pick:hover .pick__box { border-color: var(--line-3); background: rgba(255,255,255,.03); }
.pick input:checked + .pick__box { border-color: var(--phos); background: var(--phos-a8); box-shadow: inset 0 0 30px -18px rgba(0,255,156,.7); }
.pick input:focus-visible + .pick__box { outline: 1px solid var(--phos); outline-offset: 2px; }

/* Segmented switch */
.seg { display: inline-flex; border: 1px solid var(--line-2); padding: 3px; gap: 3px; background: rgba(255,255,255,.015); }
.seg button {
  block-size: 34px; padding-inline: 16px; font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] { background: var(--phos); color: #050505; font-weight: 700; }

/* --------------------------------------------------------------- 11. MOTION */
/* Reveal: opacity + lift + a clip wipe. Ease-out, staggered, once.
   Gated on html.js so the page is fully readable with scripting off — an
   ungated opacity:0 would hide the entire site from a text browser. */
.reveal { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), clip-path var(--t-slow) var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal { opacity: 0; transform: translate3d(0, 16px, 0); clip-path: inset(0 0 100% 0); }
.js .reveal.is-in { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
.js .reveal--x { transform: translate3d(-20px, 0, 0); clip-path: none; }
.js[dir="rtl"] .reveal--x { transform: translate3d(20px, 0, 0); }
.js .reveal--x.is-in { transform: none; }

/* Pointer micro-parallax, driven by JS custom props. */
.par { transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0); transition: transform .8s var(--ease); will-change: transform; }

/* Character-decode text (hero headline only). */
.decode .scr { color: var(--phos); opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms; }
  .reveal { opacity: 1; transform: none; clip-path: none; }
  .scan, .grain { display: none; }
}

/* ------------------------------------------------------------- 12. NAVIGATION */
.nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 900; block-size: var(--nav-h); border-block-end: 1px solid transparent; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.nav.is-stuck { background: rgba(5,5,5,.78); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); border-block-end-color: var(--line); }
.nav__in { block-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand svg { inline-size: 22px; block-size: 22px; color: var(--phos); transition: transform var(--t-slow) var(--ease); }
.brand:hover svg { transform: rotate(90deg); }
.brand__txt { font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--text); direction: ltr; }
.brand__txt i { color: var(--phos); font-style: normal; font-weight: 400; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav__link { position: relative; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); padding-block: 8px; transition: color var(--t-fast) var(--ease); white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: 1px; inline-size: 100%; background: var(--phos); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
[dir="rtl"] .nav__link::after { transform-origin: right; }
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--phos); }
.nav__side { display: flex; align-items: center; gap: 14px; flex: none; }

/* Language switcher */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 8px; block-size: 36px; padding-inline: 12px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lang__btn:hover, .lang.is-open .lang__btn { border-color: var(--phos-a32); color: var(--phos); }
.lang__btn svg { inline-size: 8px; block-size: 8px; transition: transform var(--t) var(--ease); }
.lang.is-open .lang__btn svg { transform: rotate(180deg); }
.lang__menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; min-inline-size: 200px; background: rgba(10,12,14,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line-2); padding: 5px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t); z-index: 20; }
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; font-size: var(--fs-sm); color: var(--text-2); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lang__item:hover { background: var(--phos-a8); color: var(--phos); }
.lang__item[aria-current="true"] { color: var(--phos); }
.lang__item small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }

/* Mobile drawer */
.burger { display: none; inline-size: 40px; block-size: 40px; border: 1px solid var(--line-2); position: relative; flex: none; }
.burger i { position: absolute; inset-inline: 11px; block-size: 1px; background: var(--text); transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease); }
.burger i:nth-child(1) { inset-block-start: 15px; } .burger i:nth-child(2) { inset-block-start: 20px; } .burger i:nth-child(3) { inset-block-start: 25px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.drawer { position: fixed; inset: var(--nav-h) 0 0; z-index: 890; background: rgba(5,5,5,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 34px var(--gut) var(--gut); display: none; flex-direction: column; gap: 4px; opacity: 0; transition: opacity var(--t) var(--ease); overflow-y: auto; }
.drawer.is-open { opacity: 1; }
.drawer a.nav__link { font-size: 20px; letter-spacing: .06em; padding-block: 17px; border-block-end: 1px solid var(--line); inline-size: 100%; }
.drawer a.nav__link::after { display: none; }
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .drawer { display: flex; }
  .nav__side > .btn { display: none; }
}

/* ------------------------------------------------------------------ 13. HERO */
.hero { position: relative; min-block-size: clamp(640px, 94vh, 1020px); display: flex; align-items: center; padding-block: calc(var(--nav-h) + 60px) 60px; overflow: hidden; }
/* inline-size/block-size are load-bearing: an absolutely positioned REPLACED
   element (canvas) with width:auto takes its intrinsic 300x150, not the inset box. */
.hero__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; opacity: .95; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 66%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 66%, transparent 100%); }
.hero__veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 62% at 22% 46%, rgba(5,5,5,.88), transparent 68%); pointer-events: none; }
[dir="rtl"] .hero__veil { background: radial-gradient(ellipse 70% 62% at 78% 46%, rgba(5,5,5,.88), transparent 68%); }
/* No inline-size here: this element also carries .shell, and an equal-specificity
   rule later in the file would silently cancel the shell gutters. */
.hero__in { position: relative; z-index: 2; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: .96; letter-spacing: var(--tr-tighter); }
.hero__title em { font-style: normal; color: var(--phos); }
.hero__title .thin { font-weight: 200; color: var(--text-2); }

/* Hero stat rail: the divider has to disappear once the row wraps, otherwise a
   hanging rule is left in front of the item that dropped to the next line. */
.hero__stat { border-inline-start: 1px solid var(--line); padding-inline-start: 34px; }
@media (max-width: 620px) { .hero__stat { border-inline-start: 0; padding-inline-start: 0; } }

/* Horizon line under the hero */
.horizon { position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 1px; background: linear-gradient(90deg, transparent, var(--phos-a32) 30%, var(--phos-a32) 70%, transparent); z-index: 3; }

/* Telemetry marquee */
.marquee { display: flex; overflow: hidden; border-block: 1px solid var(--line); background: rgba(255,255,255,.012); }
.marquee__track { display: flex; flex: none; animation: slide 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 11px; padding: 13px 26px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; border-inline-end: 1px solid var(--line); direction: ltr; }
.marquee__item b { color: var(--text-2); font-weight: 500; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- 14. ACCORDION */
.acc { border-block-start: 1px solid var(--line); }
.acc__item { border-block-end: 1px solid var(--line); }
/* The question is a real <h3> so the page has a hierarchy and each answer can be
   linked to. The wrapper must carry none of the heading scale — .acc__q still
   owns the look, and the button stays the full-width hit area. */
.acc__h { font: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; }
.acc__head { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; text-align: start; }
.acc__q { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tr-tight); line-height: 1.35; color: var(--text); transition: color var(--t-fast) var(--ease); }
.acc__head:hover .acc__q { color: var(--phos); }
.acc__sign { position: relative; inline-size: 13px; block-size: 13px; flex: none; }
.acc__sign::before, .acc__sign::after { content: ""; position: absolute; background: var(--muted); transition: transform var(--t) var(--ease), background-color var(--t-fast) var(--ease); }
.acc__sign::before { inset-block-start: 6px; inset-inline-start: 0; inline-size: 13px; block-size: 1px; }
.acc__sign::after  { inset-inline-start: 6px; inset-block-start: 0; inline-size: 1px; block-size: 13px; }
.acc__head:hover .acc__sign::before, .acc__head:hover .acc__sign::after { background: var(--phos); }
.acc__item.is-open .acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign::before, .acc__item.is-open .acc__sign::after { background: var(--phos); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__body { padding-block-end: 28px; max-inline-size: 76ch; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.78; }
.acc__body p + p { margin-block-start: 14px; }

/* ------------------------------------------------------------------ 15. TABS */
.tabs { display: flex; border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 15px 22px; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); white-space: nowrap; transition: color var(--t-fast) var(--ease); }
.tab::after { content: ""; position: absolute; inset-block-end: -1px; inset-inline-start: 0; inline-size: 100%; block-size: 1px; background: var(--phos); transform: scaleX(0); transition: transform var(--t) var(--ease); }
.tab:hover { color: var(--text-2); }
.tab[aria-selected="true"] { color: var(--phos); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabpanel[hidden] { display: none; }

/* ------------------------------------------------------------- 16. UTILITIES */
.hairline { border: 1px solid var(--line); }
.hairline-t { border-block-start: 1px solid var(--line); }
.hairline-b { border-block-end: 1px solid var(--line); }
.hairline-s { border-inline-start: 1px solid var(--line); }
.pad { padding: clamp(22px, 2.6vw, 36px); }
.pad-lg { padding: clamp(30px, 4vw, 60px); }
.center { text-align: center; }
.rel { position: relative; }
.flex-1 { flex: 1; }
.nowrap { white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: embed; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-block-start: -100px; inset-inline-start: var(--gut); z-index: 1000; background: var(--phos); color: #050505; padding: 12px 20px; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .16em; transition: inset-block-start var(--t) var(--ease); }
.skip:focus { inset-block-start: 12px; }
:focus-visible { outline: 1px solid var(--phos); outline-offset: 3px; }

/* Scrollbar */
html { scrollbar-color: #21262c var(--void); scrollbar-width: thin; }
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #21262c; border: 3px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--phos-dim); }

/* ---------------------------------------------------------------- 17. FOOTER */
.foot { border-block-start: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px) 0; position: relative; background: linear-gradient(180deg, transparent, rgba(0,255,156,.018)); }
.foot__col h4 { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .22em; color: var(--muted); font-weight: 500; margin-block-end: 20px; }
.foot__col a { display: block; font-size: var(--fs-sm); color: var(--text-2); padding-block: 7px; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.foot__col a:hover { color: var(--phos); transform: translateX(3px); }
[dir="rtl"] .foot__col a:hover { transform: translateX(-3px); }
.foot__bar { margin-block-start: clamp(48px, 6vw, 76px); border-block-start: 1px solid var(--line); padding-block: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot__meta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; color: var(--dim); }

/* ============================================================ 18. SCRIPT FIXES
   Tracking is a Latin device. In Arabic and Nastaliq it prises apart letters
   that must stay joined; in Devanagari and Bengali it cuts the shirorekha and
   detaches matras. The whole micro-label vocabulary of this design system is
   tracked, so it has to be neutralised wholesale for those four locales and
   then handed back only to the components that carry Latin text (site codes,
   tickers, prices, shell output).
   `:is([class])` keeps this at (0,2,0) so it outranks every single-class rule.
   ========================================================================== */
html[lang="fa"] :is([class]),
html[lang="ur"] :is([class]),
html[lang="bn"] :is([class]),
html[lang="hi"] :is([class]) { letter-spacing: 0; }

html[lang="fa"] :is(.ltr, .num, .mono, .code, .pre, .fp, .term__path, .plan__sku, .plan__note, .node__lbl, .coin__net, .coin__tick, .marquee__item, .brand__txt, .qr__stamp, .tl__y, .loc__code, .loc__cc, .idx, .step__n),
html[lang="ur"] :is(.ltr, .num, .mono, .code, .pre, .fp, .term__path, .plan__sku, .plan__note, .node__lbl, .coin__net, .coin__tick, .marquee__item, .brand__txt, .qr__stamp, .tl__y, .loc__code, .loc__cc, .idx, .step__n),
html[lang="bn"] :is(.ltr, .num, .mono, .code, .pre, .fp, .term__path, .plan__sku, .plan__note, .node__lbl, .coin__net, .coin__tick, .marquee__item, .brand__txt, .qr__stamp, .tl__y, .loc__code, .loc__cc, .idx, .step__n),
html[lang="hi"] :is(.ltr, .num, .mono, .code, .pre, .fp, .term__path, .plan__sku, .plan__note, .node__lbl, .coin__net, .coin__tick, .marquee__item, .brand__txt, .qr__stamp, .tl__y, .loc__code, .loc__cc, .idx, .step__n) { letter-spacing: .06em; }

/* Nastaliq needs vertical room or descenders collide with the line below. */
html[lang="ur"] { line-height: 1.95; }
html[lang="ur"] :is(.btn, .badge, .tab, .seg button, .nav__link, .chip, .stepper__i) { line-height: 1.4; }
html[lang="ur"] .acc__q { line-height: 1.9; }
html[lang="ur"] :is(.body-2, .lede, p) { line-height: 2.05; }

/* Bengali and Devanagari sit lower on the line than Latin at the same size. */
html[lang="bn"] :is(.body-2, .lede, p),
html[lang="hi"] :is(.body-2, .lede, p) { line-height: 1.85; }