/* LA FAIM — Premium Design System 2026 */

/* =========================================================================
   0. FONTS — self-hosted (every page gets the real type, zero 3rd-party
   request, faster LCP). latin + latin-ext so RO diacritics (ă â î ș ț) render
   in the brand font, not a system fallback.
   ========================================================================= */
/* Space Grotesk — variable (display) */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/fonts/space-grotesk-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Space Mono — 400 + 700 (body / forensic mono) */
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/space-mono-400-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/space-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/space-mono-700-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================================
   0b. ON:R MOVEMENT neon — light-up bloom layer
   The wall images carry two orange "ON:R MOVEMENT" neon signs. The page layer
   dims+desaturates the whole wall, so we lay a SECOND copy of the same image on
   top, screen-blended + orange-boosted: only the bright neon survives the blend
   (dark concrete adds ~nothing), so the signs GLOW — perfectly registered at any
   viewport because it's the same image/position. A realistic neon flicker drives it.
   ========================================================================= */
/* `.lf-neon` a fost eliminat complet — vezi lafaim-anim.js. Anima un strat gol. */
/* Mostly-steady warm glow with brief neon "buzz" dips — never a strobe (a11y). */
/* One-time "power-on" ignite when the page loads (rapid stutter → settle). */
.lf-neon@keyframes lf-neon-ignite {
  0% { opacity: 0; } 6% { opacity: 0.55; } 8% { opacity: 0.04; } 14% { opacity: 0.6; }
  17% { opacity: 0.08; } 22% { opacity: 0.42; } 26% { opacity: 0.12; } 32% { opacity: 0.68; }
  38% { opacity: 0.3; } 46% { opacity: 0.64; } 60% { opacity: 0.5; } 100% { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-neon, .lf-neon}

/* =========================================================================
   1. TOKENS & VARIABLES
   ========================================================================= */
/* ---------------------------------------------------------------------------
   FALLBACK-URI CU METRICI POTRIVITE — reparația pentru saltul de text (FOUT).
   `font-display: swap` desenează întâi cu fontul de sistem și abia apoi cu al
   nostru; dacă cele două au lățimi și înălțimi de rând diferite, tot textul sare.
   Măsurat pe /press.html (pagina cu cel mai mult text curgător): CLS 0.1513,
   dintr-o singură deplasare la 121 ms — peste pragul „bun" de 0,1.
   Cifrele de mai jos NU sunt ghicite. Măsurate în Chromium, la 100px, pe același
   șir, cu `TextMetrics` (tools/_fontmetrics.mjs):
     Space Mono     lățime 4773,60 · ascendent 112 · descendent 36
     Courier New    lățime 4680,76 · ascendent  83 · descendent 30
     Space Grotesk  lățime 3904,87 · ascendent  98 · descendent 29
     Arial          lățime 3635,45 · ascendent  91 · descendent 21
   size-adjust = lățime_țintă / lățime_fallback; ascendentul și descendentul se
   raportează la em-ul DEJA scalat, de aceea se împart la size-adjust.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono");
  size-adjust: 101.98%; ascent-override: 109.8%; descent-override: 35.3%; line-gap-override: 0%;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.41%; ascent-override: 91.2%; descent-override: 27%; line-gap-override: 0%;
}

:root {
  /* Colors - Obsidian Void Theme */
  --color-void:         #06090D; /* Vantanoir — banlieue-night blue-black void */
  --color-surface:      #0B1016; /* dossier panel, raised from the void */
  --color-surface-deep: #121A22; /* inputs + the generator "lab" well */
  --color-border:       #1E2A33; /* hairlines, crosshair, frame markers */
  --color-border-mid:   #314250; /* dashed dossier dividers */
  
  /* Text */
  --color-text:         #E9EEF2; /* 17.1:1 on void — interrogation-light chalk */
  --color-text-sub:     #9DAAB4; /*  8.4:1 */
  --color-text-muted:   #717E88; /*  4.8:1 — AA (fixes old 3.4:1 fail) */
  --color-text-dim:     #3C474F; /* decorative only */
  --color-text-ghost:   #232E35; /* ghost numerals / watermarks */

  /* THE SIGNAL — jumpsuit orange (fixed brand signature) */
  --color-orange:       #FF4D00; /* 6.0:1 — the human / action colour */
  --color-orange-dim:   rgba(255,77,0,0.08);

  /* RARE PRIMARY — "Bleu Cyanotype": blueprint / CCTV phosphor / surveillance */
  --color-cyan:         #45B6D6; /* 8.5:1 — links, scan, the cold machine */
  --color-cyan-dim:     rgba(69,182,214,0.08);
  --color-prussian:     #12384A; /* "Bleu de Prusse" — deep ink / fill */

  /* RARE SECONDARY — "Vert-de-Gris" patina (live / processing) */
  --color-verdigris:    #2FA39A; /* 6.5:1 */

  /* ALERT / FORENSIC */
  --color-forensic:     #E5484D; /* errors · REJECTED — 5.1:1 */
  --color-oxblood:      #5A1418; /* Sang-de-Bœuf — deep stamp fill */
  --color-chromatic:    #E5484D; /* back-compat alias (.error-banner) */

  /* Signature gradients */
  --grad-interro: radial-gradient(120% 85% at 50% 0%, rgba(69,182,214,0.10) 0%, rgba(18,56,74,0.05) 38%, var(--color-void) 72%);
  --grad-ember:   radial-gradient(70% 55% at 50% 100%, rgba(255,77,0,0.14), transparent 60%);
  --grad-scan:    linear-gradient(180deg, transparent, rgba(69,182,214,0.55), transparent);
  --grad-dossier: linear-gradient(100deg, var(--color-orange) 0%, #ff4d00 28%, var(--color-cyan) 100%);

  /* Spacing (Base 4) */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-8: 48px;  --space-10: 64px;

  /* Typography */
  --font-disp: "Space Grotesk", "Space Grotesk Fallback", "Arial Narrow", sans-serif;
  --font-mono: "Space Mono", "Space Mono Fallback", "JetBrains Mono", monospace;
  
  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0.02em;
  --tracking-wide:   0.1em;
  --tracking-max:    0.2em;

  /* Motion — CENTURION R2 system */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);    /* signature decelerate-and-stop */
  --ease-glide:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1); /* tactile overshoot — tags/stamps */
  --ease-slam:   cubic-bezier(0.72, 0, 0.30, 1);    /* hard mechanical — shutter/wipe */
  --ease-inout:  cubic-bezier(0.83, 0, 0.17, 1);    /* big symmetric moves */
  --ease-line:   linear;                            /* marquee / scanline / grain only */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* alias → settle */

  --dur-1: 120ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 700ms; --dur-5: 1100ms;
  --dur-fast: 120ms; --dur-mid: 240ms; --dur-slow: 700ms; /* back-compat aliases */

  --i: 0; /* stagger index — set per child, capped at 6 */
  --glow-orange:      0 0 24px rgba(255,77,0,.45);
  --glow-orange-soft: 0 0 60px rgba(255,77,0,.16);
  --glow-cyan:        0 0 22px rgba(69,182,214,.40);
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--color-void);
  color: var(--color-text);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100vh; height: 100dvh; }
body.pg-site { background: var(--color-void); }
/* Page atmosphere: the interrogation photo, cooled + darkened to a neutral texture
   so it sits UNDER the Dossier Nocturne palette instead of fighting it (it's warm). */
body.pg-site::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,9,13,0.66), rgba(6,9,13,0.88)),
    url("/img/room-real.webp") top center/cover no-repeat;
  filter: grayscale(0.72) brightness(0.5) saturate(0.5) contrast(1.06);
}
/* Pe ecran lat, cadrul lat: aceeași cameră, compoziție potrivită formatului. */
@media (min-width: 900px) {
  body.pg-site::before {
    background:
      linear-gradient(180deg, rgba(6,9,13,0.66), rgba(6,9,13,0.88)),
      url("/img/room-wide.webp") center 40%/cover no-repeat;
  }
}

/* =========================================================================
   FIECARE FILĂ, ALT LOC DIN ACEEAȘI CAMERĂ
   Cinci fundaluri, toate decupate din aceleași fotografii reale ale filmării
   (Principiul 1 — zero text-to-image) și trecute prin ACELAȘI tratament:
   saturație 36%, contrast +21, luminozitate −15. Se schimbă subiectul, nu
   limbajul — de acolo vine armonia. Fiecare pagină primește locul care i se
   potrivește: unde te măsoară, unde aștepți, unde stau ceilalți, unde se
   citesc actele, unde te întreabă.
   Art direction, nu redimensionare: pe telefon cadru vertical, pe ecran lat
   cadru orizontal — compoziții diferite, aceeași lume.
   ========================================================================= */
body.pg-generator::before { background-image: linear-gradient(180deg, rgba(6,9,13,.54), rgba(6,9,13,.84)), url("/img/bg/generator-m.webp"); }
body.pg-about::before     { background-image: linear-gradient(180deg, rgba(6,9,13,.54), rgba(6,9,13,.84)), url("/img/bg/album-m.webp"); }
body.pg-complici::before  { background-image: linear-gradient(180deg, rgba(6,9,13,.54), rgba(6,9,13,.84)), url("/img/bg/complici-m.webp"); }
body.pg-press::before     { background-image: linear-gradient(180deg, rgba(6,9,13,.54), rgba(6,9,13,.84)), url("/img/bg/press-m.webp"); }
body.pg-legal::before     { background-image: linear-gradient(180deg, rgba(6,9,13,.54), rgba(6,9,13,.84)), url("/img/bg/legal-m.webp"); }
body.pg-faq::before       { background-image: linear-gradient(180deg, rgba(6,9,13,.54), rgba(6,9,13,.84)), url("/img/bg/faq-m.webp"); }

/* Filtrul de pe `body.pg-site::before` — brightness(0.5) — se aplica PESTE gradientul
   fiecarei file, deci tratamentul se aplica de doua ori. Masurat pe stratul izolat, la
   390px: luminanta medie 4,8–10,1 din 255, amplitudine 20–26 niveluri. Adica cinci
   decupaje diferite, alese cu grija, aratau toate identic: negru. Imaginile sunt DEJA
   tratate la generare (saturatie 36%, contrast +21, luminozitate -15), asa ca aici
   ridicam tratamentul in loc sa-l dublam. Textul e #E9EEF2: chiar si la o luminanta de
   fundal de 50/255 raportul ramane ~11:1, mult peste AA — limita e estetica, nu de
   contrast, si o tinem jos ca sa fie camera, nu tapet. */
body.pg-generator::before, body.pg-about::before, body.pg-complici::before,
body.pg-press::before, body.pg-legal::before, body.pg-faq::before {
  filter: grayscale(0.68) brightness(0.92) saturate(0.5) contrast(1.05);
}

@media (min-width: 900px) {
  body.pg-generator::before { background-image: linear-gradient(180deg, rgba(6,9,13,.52), rgba(6,9,13,.84)), url("/img/bg/generator-w.webp"); background-position: center 46%; }
  body.pg-about::before     { background-image: linear-gradient(180deg, rgba(6,9,13,.52), rgba(6,9,13,.84)), url("/img/bg/album-w.webp");     background-position: center 38%; }
  body.pg-complici::before  { background-image: linear-gradient(180deg, rgba(6,9,13,.52), rgba(6,9,13,.84)), url("/img/bg/complici-w.webp");  background-position: center 40%; }
  body.pg-press::before     { background-image: linear-gradient(180deg, rgba(6,9,13,.52), rgba(6,9,13,.84)), url("/img/bg/press-w.webp");     background-position: center 50%; }
  body.pg-legal::before     { background-image: linear-gradient(180deg, rgba(6,9,13,.52), rgba(6,9,13,.84)), url("/img/bg/legal-w.webp");     background-position: center 42%; }
  body.pg-faq::before       { background-image: linear-gradient(180deg, rgba(6,9,13,.52), rgba(6,9,13,.84)), url("/img/bg/faq-w.webp");       background-position: center 46%; }
}
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
img, video, canvas { display: block; max-width: 100%; }

/* Accessibility — visible keyboard focus (CENTURION R5; was entirely missing) */
:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--color-orange); color: var(--color-void); }

/* Skip-link (WCAG 2.4.1 Level A) — hidden until keyboard-focused */
.skip-link { position: fixed; left: 8px; top: -56px; z-index: 200; background: var(--color-orange); color: var(--color-void); padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: top var(--dur-2) var(--ease-glide); }
.skip-link:focus { top: 8px; }

/* =========================================================================
   3. BACKGROUND NOISE & CINEMATIC EFFECTS
   ========================================================================= */
.lf-grain {
  position: fixed; inset: -50%; z-index: 9998; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.04; mix-blend-mode: overlay;
  animation: lf-grain 1.2s steps(3) infinite;
}
@keyframes lf-grain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 2%); }
  66% { transform: translate(2%, -2%); }
  100% { transform: translate(-1%, 1%); }
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
              radial-gradient(circle at 50% 0%, rgba(69,182,214,0.05), transparent 60%);
}

/* =========================================================================
   4. TYPOGRAPHY
   ========================================================================= */
.disp {
  font-family: var(--font-disp); font-weight: 700;
  letter-spacing: var(--tracking-tight); line-height: 0.95;
}
.title-accent { color: var(--color-orange); }
/* Two-tone headline: un cuvânt-cheie în accent (device premium à la Nibiru, dar în
   portocaliul nostru pe negru — ridică titlurile fără să atingă estetica noir). */
.hl { color: var(--color-orange); }
/* Signature wordmark glitch — rare RGB-split flicker (CCTV interference). Applied to
   .page-title by lafaim-anim.js. Was wired but undefined → never fired. */
.lf-glitch { animation: lf-titleglitch 8s steps(1, end) infinite; }
@keyframes lf-titleglitch {
  0%, 96.5%, 100% { text-shadow: none; transform: none; }
  97%   { text-shadow: -2px 0 var(--color-forensic), 2px 0 var(--color-cyan); transform: translateX(1px); }
  98%   { text-shadow:  2px 0 var(--color-forensic), -2px 0 var(--color-cyan); transform: translateX(-1px); }
  98.6% { text-shadow: -1px 0 var(--color-forensic), 1px 0 var(--color-cyan); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lf-glitch { animation: none; } }
/* 404 topnav (shared) — were orphaned */
.lf-topnav { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lf-home { font-size: 11px; color: var(--color-text); letter-spacing: var(--tracking-wide); }
.lf-home b { color: var(--color-orange); }
.lf-home:hover { color: var(--color-cyan); }
.lf-pagelbl { font-size: 9px; color: var(--color-cyan); letter-spacing: var(--tracking-max); border: 1px solid rgba(69,182,214,.33); padding: 3px 8px; text-transform: uppercase; }
/* Utility accents (were used across pages but never defined → rendered as plain text) */
.accent { color: var(--color-orange); }
.stamp { display:inline-block; border:1px solid rgba(255,77,0,.35); padding:3px 9px; font-size:9px; letter-spacing:var(--tracking-max); text-transform:uppercase; color:var(--color-orange); }
.stamp.cyan, .stamp.dossier { border-color:rgba(69,182,214,.40); color:var(--color-cyan); }
.lbl-orange {
  font-size: 10px; color: var(--color-orange); letter-spacing: var(--tracking-max);
  text-transform: uppercase; margin-bottom: var(--space-2); display: block;
}
.sub-meta { font-size: 11px; color: var(--color-text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* =========================================================================
   5. LAYOUT & CONTAINERS
   ========================================================================= */
.container {
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 0 max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left));
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) 0; }

/* =========================================================================
   6. COMPONENTS: CARDS & BUTTONS
   ========================================================================= */
.card {
  border: 1px solid var(--color-border); background: var(--color-surface);
  padding: var(--space-6) var(--space-5); position: relative;
  margin-bottom: var(--space-5);
}
.card-label {
  position: absolute; top: -8px; left: 16px; background: var(--color-void);
  padding: 0 8px; font-size: 9px; color: var(--color-orange);
  letter-spacing: var(--tracking-max); text-transform: uppercase;
}
.card h2 { font-family: var(--font-disp); font-size: 24px; margin-bottom: var(--space-3); }
.card p { font-size: 14px; color: var(--color-text-sub); line-height: 1.6; margin-bottom: var(--space-4); }
/* In-body links read as cyan "cross-references" (surveillance accent), never the orange action colour */
.card p a, .bio-block a, .contact-row .value a { color: var(--color-cyan); border-bottom: 1px solid rgba(69,182,214,.3); transition: border-color var(--dur-2) var(--ease-glide); }
.card p a:hover, .bio-block a:hover, .contact-row .value a:hover { border-bottom-color: var(--color-cyan); }

.btn {
  display: block; width: 100%; text-align: center;
  padding: 16px var(--space-5); background: var(--color-orange); color: var(--color-void);
  border: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-slam), filter var(--dur-fast) var(--ease-out);
}
.btn:hover { filter: brightness(1.15); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn[disabled] { background: var(--color-text-ghost); color: var(--color-text-dim); cursor: not-allowed; pointer-events: none; }

.btn-ghost {
  background: transparent; color: var(--color-text); border: 1px solid var(--color-border-mid);
}
.btn-ghost:hover { border-color: var(--color-orange); color: var(--color-orange); }

.btn-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media(min-width: 500px) { .btn-row.dual { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   7. HEADER & NAVIGATION
   ========================================================================= */
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) 0; border-bottom: 1px dashed var(--color-border-mid);
  margin-bottom: var(--space-6);
}
.nav-brand { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-wide); }
.nav-brand b { color: var(--color-orange); }
.nav-lbl { font-size: 10px; color: var(--color-cyan); border: 1px solid rgba(69,182,214,0.32); padding: 4px 8px; letter-spacing: var(--tracking-max); }

.hero-header { text-align: left; margin-bottom: var(--space-4); }
.hero-title { font-size: clamp(48px, 12vw, 84px); margin: var(--space-3) 0 var(--space-1); letter-spacing: -0.04em; }
.page-title { font-size: clamp(32px, 8vw, 42px); margin: 0 0 var(--space-1); letter-spacing: -0.02em; }
.hero-sub { color: var(--color-text-muted); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.hero-meta { display: flex; justify-content: space-between; margin-top: var(--space-3); border-top: 1px dashed var(--color-border-mid); padding-top: var(--space-2); }
/* `--color-text-dim` e marcat în paletă „decorative only" (2.1:1). Aici span-ul poartă
   text informativ real („ALBUM / SORTIE 2026"), deci trece pe `muted` (4.8:1, AA). */
.hero-meta span { font-size: 10px; color: var(--color-text-muted); }
/* Ștampilele din hero-meta (RECHERCHÉ, DOSSIER N° 239) își păstrează culoarea proprie.
   `.hero-meta span` (0,1,1) bătea `.stamp`/`.accent` (0,1,0) și le stingea în gri —
   contrast 2.1:1, sub pragul AA. Regulile de mai jos (0,2,0) restaurează intenția. */
.hero-meta .accent { color: var(--color-orange); }
.hero-meta .stamp { color: var(--color-orange); }
.hero-meta .stamp.cyan, .hero-meta .stamp.dossier { color: var(--color-cyan); }

/* Overlay Menu */
.menu-btn { background: none; border: 1px solid var(--color-text); color: var(--color-text); padding: 8px 14px; font-size: 11px; cursor: pointer; transition: all 0.2s; }
.menu-btn:hover { border-color: var(--color-orange); color: var(--color-orange); }
.overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--color-void);
  display: flex; flex-direction: column; justify-content: center; padding: 10vw;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-mid) var(--ease-out);
}
.overlay.open { opacity: 1; visibility: visible; }
.overlay a {
  display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border);
  font-family: var(--font-disp); font-size: clamp(32px, 6vw, 64px); transition: padding-left 0.2s, color 0.2s;
}
.overlay a:hover { color: var(--color-orange); padding-left: 16px; }
.overlay a .num { font-family: var(--font-mono); font-size: 12px; color: var(--color-orange); }
.overlay .close-btn, .overlay .close { position: absolute; top: 24px; right: 24px; background: none; border: 1px solid var(--color-text); color: var(--color-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); padding: 8px 14px; cursor: pointer; transition: border-color var(--dur-2) var(--ease-glide), color var(--dur-2) var(--ease-glide); }
.overlay .close-btn:hover, .overlay .close:hover { border-color: var(--color-orange); color: var(--color-orange); }
.overlay .ovfoot { margin-top: 6vh; font-size: 10px; letter-spacing: var(--tracking-max); color: var(--color-text-muted); }

/* =========================================================================
   8. FOOTER
   ========================================================================= */
.site-footer {
  border-top: 1px dashed var(--color-border-mid);
  padding: var(--space-6) 0 var(--space-4); margin-top: auto;
  text-align: center; font-size: 10px; color: var(--color-text-muted); line-height: 2;
}
/* inline-block + 24px box = WCAG 2.5.8 target size on the footer links */
.site-footer a { color: var(--color-text-sub); display: inline-block; min-height: 24px; line-height: 24px; padding: 0 6px; }
.site-footer a:hover { color: var(--color-cyan); }
.soc-links a + a::before { content: " · "; color: var(--color-text-ghost); margin-right: var(--space-2); }

/* =========================================================================
   9. GENERATOR SPECIFICS
   ========================================================================= */
input[type="text"] {
  width: 100%; padding: 16px 14px; background: var(--color-surface-deep);
  border: 1px solid var(--color-border); color: var(--color-text);
  font-family: var(--font-mono); font-size: 16px; letter-spacing: var(--tracking-wide);
   transition: border-color 0.2s;
}
input[type="text"]:focus { border-color: var(--color-orange); }
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; }

.media-frame {
  /* Portret generos (4:5) — cadru „de dosar" mare pe mobil, nu o fâșie îngustă. La
     cameră, aspect-ratio e suprascris inline la aspectul REAL al senzorului DAR
     CLAMP-at la o fereastră portret (vezi generator.html): senzorii portret își
     păstrează raportul (fără zoom), cei landscape/4:3 primesc o fereastră înaltă
     centrată în loc de o bandă turtită. dvh = corect pe mobil (fără saltul barei). */
  aspect-ratio: 4/5; background: #000; position: relative; overflow: hidden;
  border: 1px solid var(--color-border); margin-bottom: var(--space-4);
  width: 100%; max-width: 460px; max-height: 74vh; max-height: 74dvh; margin-inline: auto;
}
.media-frame video, .media-frame canvas, .media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame video#cam { transform: scaleX(-1); }
/* Rezultatul e LANDSCAPE 16:9 (siluetele noi păstrează fundalul complet cu numerele
   pe margini) → cadrul rezultatului iese din 9:16-ul camerei și devine 16:9. */
.media-frame.mugshot-frame { aspect-ratio: 16 / 9; max-height: none; max-width: none; }

/* The generator's primary actions are classless <button>s (the refactor dropped the base
   button style). Style them as the primary CTA, scoped to the generator so nav/menu/toggle
   buttons elsewhere are never affected. Ghost + toggle keep their own styles.
   Excluse și butoanele bannerului de consimțământ (.cc-yes/.cc-no): altfel regula asta,
   mai specifică, făcea „DOAR STRICTUL NECESAR" să arate ca acțiunea principală. */
.pg-generator button:not(.btn-ghost):not(.toggle-btn):not(.cc-yes):not(.cc-no) {
  display: block; width: 100%; text-align: center;
  padding: 16px var(--space-5); margin-top: var(--space-4);
  background: var(--color-orange); color: var(--color-void);
  border: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-snap), filter var(--dur-2) var(--ease-glide), box-shadow var(--dur-2) var(--ease-glide);
}
.pg-generator button:not(.btn-ghost):not(.toggle-btn):not(.cc-yes):not(.cc-no):hover { filter: brightness(1.1); box-shadow: var(--glow-orange-soft); }
.pg-generator button:not(.btn-ghost):not(.toggle-btn):not(.cc-yes):not(.cc-no):active { transform: scale(.98); }
.pg-generator button:not(.btn-ghost):not(.toggle-btn):not(.cc-yes):not(.cc-no):disabled { background: var(--color-text-ghost); color: var(--color-text-dim); cursor: not-allowed; box-shadow: none; filter: none; }

/* Generator header bits + form hint (were orphaned → rendered as plain body text) */
.case-no { font-size: 11px; color: var(--color-text-muted); letter-spacing: var(--tracking-wide); }
.case-no span { color: var(--color-cyan); }
.input-hint { font-size: 11px; color: var(--color-text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: 6px 0 14px; }
/* GDPR consent — opt-in pt galeria publică (pasul 1). */
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 12px; color: var(--color-text-sub); line-height: 1.5; cursor: pointer; }
.consent-row input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; accent-color: var(--color-orange); cursor: pointer; }
.consent-row strong { color: var(--color-cyan); }
.consent-row small { display: block; color: var(--color-text-muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }

.step-ind { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-muted); margin-bottom: var(--space-4); letter-spacing: var(--tracking-wide); }
.step-ind .bars { display: flex; gap: 4px; }
.step-ind .bars i { width: 16px; height: 2px; background: var(--color-border-mid); }
.step-ind .bars i.on { background: var(--color-orange); }

[data-step] { display: none; }
[data-step].active { display: block; animation: stepFadeIn 0.3s cubic-bezier(0.4, 0, 0, 1); }
/* Pașii au înălțimi foarte diferite (măsurat la 390px: pasul 4 = 304px, pasul 2 = 937px).
   Când se schimbă pasul, documentul își schimbă înălțimea și SUBSOLUL — care era vizibil —
   se mută cu ~286px. Aia e deplasarea de layout numărată: CLS 0.249 la trecerea 4 → 5.
   Rezervăm pașilor cel puțin un ecran (minus antetul), ca subsolul să rămână MEREU sub
   fold: o deplasare în afara ecranului nu se numără și, mai important, nu se vede.
   Cardul se centrează pe verticală în spațiul rezervat — pe pasul 4 (laboratorul, unde
   aștepți) asta nu e un gol, e camera goală în care aștepți. */
.pg-generator main > section[data-step].active {
  min-height: calc(100svh - 150px);
  display: flex; flex-direction: column; justify-content: center;
}
@keyframes stepFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   10. UTIL: ALERTS, ANIMATIONS, FORMS
   ========================================================================= */
.error-banner {
  background: #1f0b0b; border-left: 4px solid var(--color-chromatic); color: #ffa0a0;
  padding: 12px; font-size: 12px; margin-top: var(--space-3); display: none;
}
.error-banner.show { display: block; animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* Definiția reală a revelării trăiește în secțiunea 12 (MOTION) — filă pusă pe masă,
   cu rotateX și decalaj pe --i. Cele trei reguli de aici erau o versiune veche, moartă:
   aceeași specificitate, mai sus în fișier, deci suprascrisă integral. Un singur loc
   pentru mișcare, altfel „armonia" se rupe la prima editare. */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

.file-meta { width: 100%; font-size: 11px; color: var(--color-text-muted); margin-top: var(--space-3); border-collapse: collapse; }
.file-meta td { padding: 4px 0; border-bottom: 1px solid var(--color-border-mid); }
.file-meta td:first-child { width: 40%; }
.file-meta td:last-child { color: var(--color-text); text-align: right; }

.track { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border-mid); }
.track:last-child { border-bottom: 0; }
/* Numerele de pistă sunt CONȚINUT (01, 02, …), nu decor → text-dim (2:1) pica
   la contrast. Muted = 4.8:1, AA, fără să schimbe ierarhia vizuală. */
.track-no { font-size: 11px; color: var(--color-text-muted); }
.track-title { font-size: 14px; color: var(--color-text); }
.track-title small { display: block; color: var(--color-text-muted); font-size: 10px; margin-top: 2px; }
/* Statusul pistei („draft"/„mix") e informație reală → muted (AA), nu dim. */
.track-meta { font-size: 9.5px; letter-spacing: var(--tracking-wide); white-space: nowrap; color: var(--color-text-muted); text-align: right; }
.status-mst { color: var(--color-orange); }
/* Feature credits (DAEMON / MAYA MUSAT) — were orphaned → rendered as flat text */
.feat { color: var(--color-text-muted); font-style: italic; }
.feat-name { color: var(--color-cyan); font-style: normal; }

.link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.link-card {
  display: block; padding: 14px 12px; border: 1px solid var(--color-border); background: var(--color-surface-deep);
  font-size: 11px; color: var(--color-text); text-align: center; transition: all 0.2s;
}
.link-card:hover { border-color: var(--color-cyan); color: var(--color-cyan); box-shadow: var(--glow-cyan); }

.lf-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; min-height: 96px; align-content: start; }
.lf-gal figure { border: 1px solid var(--color-border); aspect-ratio: 16/9; overflow: hidden; position: relative; }
/* Umple chenarul 16:9 IDENTIC pentru fiecare intrare (ca DARIA), indiferent de raportul
   nativ: mugshot-urile 16:9 nu se cropează, iar orice intrare veche non-16:9 se încadrează
   centrat cover în loc să debordeze (frunte/tăiat). object-position ușor spre sus = fața
   (care stă în treimea superioară) rămâne mereu vizibilă. */
.lf-gal figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); transition: filter 0.3s; }
.lf-gal figure:hover img { filter: none; }
.lf-gal figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.8); padding: 4px; font-size: 9px; }
.lf-gal-item { margin: 0; }
/* Gallery empty-state — launch-day visitors + every shared /dosar see this */
.lf-gal-empty {
  grid-column: 1 / -1; text-align: center; padding: 28px 18px;
  border: 1px dashed var(--color-border-mid); color: var(--color-text-muted);
  font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  line-height: 2.2;
}
/* Ținta de atins ≥24px (WCAG 2.5.8) — linkul e singurul lucru de făcut aici. */
.lf-gal-empty a {
  display: inline-block; margin-top: 6px; padding: 6px 2px; min-height: 24px;
  color: var(--color-orange); border-bottom: 1px solid rgba(255,77,0,.4);
  transition: border-color var(--dur-2) var(--ease-glide);
}
.lf-gal-empty a:hover { border-bottom-color: var(--color-orange); }

.toggle-group { display: flex; gap: 0; }
.toggle-btn {
  flex: 1; padding: 12px 0; background: var(--color-surface-deep); color: var(--color-text-sub);
  border: 1px solid var(--color-border); cursor: pointer;
}
.toggle-btn.active { background: var(--color-orange); color: var(--color-void); border-color: var(--color-orange); }

.crosshair { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(69,182,214,0.30) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(69,182,214,0.30) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
/* Ghid de încadrare a feței pe camera live — elipsă outline cyan (familia crosshair). PUR
   vizual: snapshot() desenează DOAR <video>, deci ghidul NU intră în captură. Gated pe
   .cam-ready (apare doar când stream-ul e live). Există doar în cadrul pasului 2. */
.media-frame .face-guide { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-2) var(--ease-glide); }
.media-frame.cam-ready .face-guide { opacity: 0.7; }
.media-frame .face-guide svg { width: 100%; height: 100%; }
.media-frame .face-guide ellipse { fill: none; stroke: var(--color-cyan); stroke-width: 0.7; stroke-dasharray: 3.5 2.5; }
.pg-generator .face-guide-hint { font-size: 11px; color: var(--color-cyan); text-align: center; letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: -6px 0 14px; opacity: 0.85; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .media-frame .face-guide { transition: none; } }

.corner-marker { position: absolute; width: 18px; height: 18px; border: 1px solid var(--color-cyan); }
/* Live REC + timecode on the camera (bodycam authenticity — orange = the live signal) */
.media-frame .cam-rec { position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--color-text); text-shadow: 0 1px 4px rgba(0,0,0,.85); pointer-events: none; }
.media-frame .cam-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-orange); box-shadow: var(--glow-orange); animation: cam-rec-blink 1.4s steps(1, end) infinite; }
.media-frame .cam-rec .tc { color: var(--color-text-sub); }
@keyframes cam-rec-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .media-frame .cam-rec::before { animation: none; } }
.corner-marker.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.corner-marker.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.corner-marker.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.corner-marker.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.loading-status { font-size: 12px; color: var(--color-cyan); min-height: 18px; margin: 8px 0; letter-spacing: var(--tracking-wide); }
.progress-track { height: 2px; background: var(--color-border-mid); overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--color-prussian), var(--color-cyan)); width: 0%; transition: none; box-shadow: var(--glow-cyan); }
.pulse { animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.blur-locked { filter: blur(14px) brightness(0.7); }

.countdown { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-family: var(--font-disp); font-size: 96px; font-weight: 700; color: #fff; z-index: 5; text-shadow: 0 0 34px rgba(0,0,0,.85); background: rgba(0,0,0,.18); }
.countdown.on { display: flex; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }
.cam-flash.go { animation: camflash 0.45s ease; }
@keyframes camflash { 0% { opacity: 0; } 10% { opacity: 0.95; } 100% { opacity: 0; } }

/* =========================================================================
   11. PRESS KIT SPECIFICS
   ========================================================================= */
.bio-block { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-mid); }
.bio-block:last-child { border-bottom: 0; }
.bio-lang { font-size: 10px; color: var(--color-orange); letter-spacing: var(--tracking-max); margin-bottom: var(--space-2); }
.contact-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: var(--space-2) 0; font-size: 12px; border-bottom: 1px solid var(--color-border-mid); }
.contact-row:last-child { border-bottom: 0; }
.contact-row .label { color: var(--color-text-muted); letter-spacing: var(--tracking-wide); }
.contact-row .value { color: var(--color-text); }

/* Team Members Layout */
.team-member {
  border-bottom: 1px dashed var(--color-border-mid);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}
.team-member:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--space-4);
}
.member-name {
  font-family: var(--font-disp);
  font-size: 18px;
  color: var(--color-orange);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.member-role {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}
.member-bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-sub);
}

/* =========================================================================
   12. MOTION — CENTURION R2 (case-file reveal · tag snap · CCTV scanline)
   ========================================================================= */
main { perspective: 1400px; }

/* The dossier sections settle in like a sheet laid on the desk (translateY + slight rotateX),
   staggered by --i (set in lafaim-anim.js, capped at 6). */
.reveal {
  opacity: 0; transform: translateY(26px) rotateX(5deg); transform-origin: top center;
  transition: opacity var(--dur-4) var(--ease-settle), transform var(--dur-4) var(--ease-settle);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal.is-in, .reveal.in { opacity: 1; transform: none; }

/* Conținutul unei file intră în trepte după ce fila s-a așezat — foi răsfirate, nu un
   bloc care apare dintr-odată. `--j` e pus pe primii 5 copii direcți (vezi index.html);
   fără el regula e inertă, deci nu afectează paginile care nu-l setează. */
.reveal > * { opacity: 0; transform: translateY(9px); }
.reveal.is-in > *, .reveal.in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-settle), transform var(--dur-3) var(--ease-settle);
  transition-delay: calc(var(--i, 0) * 60ms + var(--j, 0) * 70ms + 90ms);
}
/* Fără `--j` (restul paginilor) copiii nu au ce aștepta: rămân vizibili din start. */
.reveal:not([style*="--i"]) > * { opacity: 1; transform: none; }

/* Evidence-tag snap on the file labels as their card arrives */
.reveal.is-in .card-label, .reveal.in .card-label { animation: lfTagSnap var(--dur-2) var(--ease-snap) both; }
@keyframes lfTagSnap { from { opacity: 0; transform: scale(.6) rotate(-5deg); } to { opacity: 1; transform: none; } }

/* CCTV surveillance scanline — cyan, only while the camera is live (one instance) */
.media-frame.cam-ready::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
  box-shadow: 0 0 14px rgba(69,182,214,.55);
  animation: lfScanY 3s var(--ease-line) infinite;
}
@keyframes lfScanY { from { top: -2px; } to { top: 100%; } }

/* Gallery: a cyan evidence-frame draws in on hover */
.lf-gal figure { isolation: isolate; }
.lf-gal figure::after {
  content: ""; position: absolute; inset: 6px; z-index: 2; pointer-events: none;
  border: 1px solid transparent; transition: border-color var(--dur-2) var(--ease-glide);
}
.lf-gal figure:hover::after { border-color: var(--color-cyan); }
/* …plus a one-shot cyan scan sweep on hover/focus — "scanning the evidence". */
.lf-gal figure::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(69,182,214,.5), transparent);
  background-size: 100% 40%; background-repeat: no-repeat; background-position: 0 -45%; opacity: 0;
}
.lf-gal figure:hover::before, .lf-gal figure:focus-visible::before { opacity: 1; animation: lf-tile-scan 1s var(--ease-glide) 1; }
@keyframes lf-tile-scan { from { background-position: 0 -45%; } to { background-position: 0 145%; } }
@media (prefers-reduced-motion: reduce) { .lf-gal figure::before { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal.is-in .card-label, .reveal.in .card-label { animation: none !important; }
  .media-frame.cam-ready::after { display: none !important; }
}

/* /dosar share landing — the mugshot "develops" ONCE on load: unsealed top→down
   + grayscale-blur → sharp colour. First impression of every shared link.
   (Was applied in api/dosar.js but undefined → a dead orphan.) */
.lf-reveal-mugshot { animation: lf-mugDevelop 1.5s var(--ease-glide) both; will-change: filter, clip-path; }
@keyframes lf-mugDevelop {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); filter: grayscale(1) brightness(1.5) contrast(1.3) blur(7px); }
  12%  { opacity: 1; }
  55%  { clip-path: inset(0 0 0 0); filter: grayscale(.45) brightness(1.05) contrast(1.12) blur(1.2px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}
@media (prefers-reduced-motion: reduce) { .lf-reveal-mugshot { animation: none; } }

/* =========================================================================
   13. MUGSHOT REVEAL — the centerpiece (CENTURION R2 · E11)
   The JS (generator showResult) adds these classes; the refactor had left
   them all undefined → the payoff moment did nothing. Restored + upgraded.
   Gating-safe: the bail blur (.blur-locked) stays on the img until unlock;
   removing it transitions blur+grayscale → sharp colour = the "develop" payoff.
   ========================================================================= */
.mugshot-reveal-wrap { position: relative; overflow: hidden; }
.mugshot-reveal-wrap.revealed { box-shadow: inset 0 0 0 1px rgba(69,182,214,.35); }

/* The gated preview: blurred, cool, desaturated. The transition lives on the IMG
   (NOT on .blur-locked) so that removing the class on unlock ANIMATES blur+grayscale
   → sharp colour = the "develop" payoff. (If the transition were on the class, it
   would vanish with the class and the change would snap instantly.) */
#result-img { transition: filter var(--dur-5) var(--ease-glide); }
.blur-locked { filter: blur(14px) brightness(0.7) grayscale(0.4); }

/* Image entrance — evidence bag unsealed top→bottom + settle (clip/transform only;
   never touches `filter`, so it can't break the gating blur) */
.mugshot-in { animation: mugUnseal var(--dur-4) var(--ease-settle) both; }
@keyframes mugUnseal {
  0%   { clip-path: inset(0 0 100% 0); transform: scale(1.05); }
  18%  { clip-path: inset(0 0 82% 0); }
  100% { clip-path: inset(0 0 0 0); transform: none; }
}

/* ACT 1 — police shutter flash */
.mugshot-flash { position: absolute; inset: 0; z-index: 6; background: #fff; pointer-events: none; animation: mugFlash 0.6s var(--ease-slam) forwards; }
@keyframes mugFlash { 0% { opacity: 0; } 12% { opacity: 0.9; } 100% { opacity: 0; } }

/* ACT 2 — one CCTV scan-confirm pass (cyan = the machine reads the evidence) */
.mugshot-scanline { position: absolute; left: 0; right: 0; top: -3px; height: 3px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--color-cyan), #fff, var(--color-cyan), transparent);
  box-shadow: 0 0 18px rgba(69,182,214,.7); animation: mugScan 0.9s var(--ease-glide) forwards; }
@keyframes mugScan { from { top: -3px; } to { top: 100%; } }

/* ACT 4 — the SCELLÉ rubber-stamp slam (forensic red ink + a single orange glow beat) */
.lf-stamp {
  position: absolute; z-index: 7; pointer-events: none;
  width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--font-mono); font-size: 9px; line-height: 1.25;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 8px;
  color: var(--color-forensic); border: 2px solid var(--color-forensic); border-radius: 50%;
  mix-blend-mode: screen; opacity: 0; transform: rotate(-14deg) scale(1.9);
}
.lf-stamp::before { content: attr(data-stamp); white-space: pre; }
.lf-stamp.is-stamped { animation: lfStampSlam 0.55s var(--ease-snap) forwards; }
@keyframes lfStampSlam {
  0%   { opacity: 0; transform: rotate(-14deg) scale(1.9); }
  55%  { opacity: 0.95; transform: rotate(-14deg) scale(0.9); box-shadow: var(--glow-orange); }
  72%  { transform: rotate(-14deg) scale(1.04); }
  100% { opacity: 0.85; transform: rotate(-14deg) scale(1); box-shadow: none; }
}

/* Lab theatre — looping scan + metadata rows typing in (CENTURION R2 · E10) */
/* A9 / F19 (02.10): linia de scanare se mișcă pe `transform`, nu pe `top`. Animată pe `top`
   era o deplasare de layout la fiecare cadru (0,08–0,12 CLS la fiecare ciclu de 2,2 s, în
   cele ~25 s de laborator) și calcul de layout continuu pe telefoanele slabe. Acum: un strat
   cât cardul, cu `overflow: hidden`, iar linia (::before, cât cardul de înaltă, cu dunga sus)
   alunecă pe compozitor. Arată la fel. */
.scan-line { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.scan-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 100%;
  background:
    linear-gradient(90deg, transparent, var(--color-cyan), transparent) 0 6px / 100% 2px no-repeat,
    linear-gradient(180deg, transparent, rgba(69,182,214,.22) 6px, rgba(69,182,214,.22) 8px, transparent) 0 0 / 100% 14px no-repeat;
  will-change: transform;
  animation: labScan 2.2s var(--ease-line) infinite;
}
@keyframes labScan { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } }
[data-step="4"] .file-meta tr { opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-3) var(--ease-glide), transform var(--dur-3) var(--ease-glide); }
[data-step="4"] .file-meta tr.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mugshot-flash, .mugshot-scanline, .scan-line { display: none !important; }
  .mugshot-in { animation: none !important; }
  #result-img { transition: none !important; }
  .lf-stamp { opacity: 0.85 !important; transform: rotate(-14deg) scale(1) !important; animation: none !important; }
  [data-step="4"] .file-meta tr { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   LEGAL / FAQ — pagini de text lung (confidențialitate, termeni, FAQ).
   Card-ul de bază nu stiliza h3/ul/ol/dl; aici le dăm ritmul dosarului.
   ============================================================ */
.legal h3 {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-cyan);
  margin: var(--space-6) 0 var(--space-3); padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--color-border-mid);
}
.legal h3:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 14px; color: var(--color-text-sub); line-height: 1.7; }
.legal p { margin-bottom: var(--space-4); }
.legal ul, .legal ol { margin: 0 0 var(--space-4) 0; padding-left: var(--space-5); }
.legal li { margin-bottom: var(--space-2); }
.legal ul { list-style: none; padding-left: var(--space-4); }
.legal ul > li { position: relative; padding-left: var(--space-4); }
.legal ul > li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  color: var(--color-orange); font-family: var(--font-mono);
}
.legal ol { list-style: decimal; }
.legal ol > li::marker { color: var(--color-orange); font-family: var(--font-mono); font-size: 12px; }
.legal strong { color: var(--color-text); }
.legal a { color: var(--color-cyan); border-bottom: 1px solid rgba(69,182,214,.3); }
.legal a:hover { border-bottom-color: var(--color-cyan); }
.legal .updated {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-5);
}
.legal table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: 13px; }
.legal table th, .legal table td {
  text-align: left; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border); color: var(--color-text-sub); vertical-align: top;
}
.legal table th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-muted);
}
.legal .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FAQ — acordeon nativ <details>, zero JS */
.faq-item {
  border: 1px solid var(--color-border); border-radius: 2px;
  background: var(--color-surface-deep); margin-bottom: var(--space-3);
}
.faq-item > summary {
  cursor: pointer; list-style: none; padding: var(--space-4);
  font-family: var(--font-disp); font-size: 15px; color: var(--color-text);
  display: flex; align-items: flex-start; gap: var(--space-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: 18px; line-height: 1; color: var(--color-orange);
  transition: transform var(--dur-2, .2s) var(--ease-out);
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--color-orange); }
.faq-item > summary:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; }
.faq-body { padding: 0 var(--space-4) var(--space-4); }
.faq-body p:last-child, .faq-body ul:last-child { margin-bottom: 0; }

/* ============================================================
   CONSIMȚĂMÂNT COOKIE / STOCARE — banner discret, jos, non-blocant
   ============================================================ */
.lf-consent {
  position: fixed; z-index: 90; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin: 0 auto; padding: var(--space-4);
  background: rgba(11,16,22,.96); border: 1px solid var(--color-border-mid);
  border-radius: 2px; box-shadow: 0 18px 48px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(140%); opacity: 0;
  transition: transform .45s var(--ease-settle), opacity .3s var(--ease-out);
}
.lf-consent.is-open { transform: none; opacity: 1; }
.lf-consent .cc-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-max);
  text-transform: uppercase; color: var(--color-orange); display: block; margin-bottom: var(--space-2);
}
.lf-consent p { font-size: 12.5px; line-height: 1.6; color: var(--color-text-sub); margin: 0 0 var(--space-4); }
.lf-consent p a { color: var(--color-cyan); border-bottom: 1px solid rgba(69,182,214,.35); }
.lf-consent .cc-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lf-consent button {
  flex: 1 1 auto; min-height: 44px; padding: 10px 16px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; border-radius: 2px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lf-consent .cc-yes { background: var(--color-orange); color: #06090D; border: 1px solid var(--color-orange); font-weight: 700; }
.lf-consent .cc-yes:hover { background: #ff6a26; }
.lf-consent .cc-no { background: transparent; color: var(--color-text-sub); border: 1px solid var(--color-border-mid); }
.lf-consent .cc-no:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.lf-consent button:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lf-consent { transition: none; }
}

/* ============================================================
   ȚINTE DE ATINS — WCAG 2.2 · 2.5.8 (minim 24×24 CSS px).
   Rândurile de linkuri din subsol/nav sunt navigație, nu text curgător, deci
   NU beneficiază de excepția pentru linkuri „inline". Creștem suprafața de
   atins cu padding, fără să schimbăm ritmul vizual al textului.
   ============================================================ */
.site-footer a,
.soc-links a,
.nav-brand,
.lf-home,
.home-footer .links a {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 24px;
}
.soc-links a { padding-left: 4px; padding-right: 4px; }
/* Linkurile din rândurile de contact (presă) și cel din bannerul de consimțământ
   nu sunt „text curgător", deci nu intră sub excepția pentru linkuri inline —
   le dăm suprafața minimă de atins. Restul linkurilor din paragrafe rămân inline
   (excepția WCAG 2.5.8 pentru ținte în interiorul unei propoziții). */
.contact-row .value a,
.lf-consent p a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
  min-height: 24px;
}
/* Regiunea derulabilă a tabelului e focusabilă (a11y) → îi dăm un inel vizibil. */
.legal .table-scroll:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; }
/* Un item deschis se citește ca deschis și fără mouse deasupra. */
.faq-item[open] { border-color: var(--color-border-mid); }
.faq-item[open] > summary { color: var(--color-orange); }
/* Pe ecran lat bannerul stă în colț, nu peste mijlocul paginii. */
@media (min-width: 860px) {
  .lf-consent { left: auto; right: 24px; bottom: 24px; margin: 0; width: 420px; }
}

/* Tabelul din politica de confidențialitate, pe telefon: 3 coloane la 360px
   însemnau cuvinte pe verticală și a treia coloană în afara ecranului. Sub 620px
   fiecare rând devine un card, cu eticheta coloanei deasupra valorii. */
@media (max-width: 620px) {
  .legal .table-scroll { overflow-x: visible; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal tbody tr {
    border: 1px solid var(--color-border); border-radius: 2px;
    background: rgba(18,26,34,.5); padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .legal tbody td { border: 0; padding: var(--space-2) 0; }
  .legal tbody td + td { border-top: 1px dashed var(--color-border); }
  .legal tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-max);
    text-transform: uppercase; color: var(--color-orange);
  }
}

/* ============================================================
   REPARAȚII DESKTOP (audit 25 aug)
   ============================================================ */

/* Bannerul de consimțământ stă fix, jos-dreapta pe ecran lat — adică exact peste
   subsolul paginii. Cât timp e deschis, subsolurile își rezervă loc, ca navigarea
   secundară să nu fie invizibilă până când omul apasă un buton. */
.lf-consent-open .site-footer,
.lf-consent-open .home-footer { padding-bottom: 260px; }
@media (max-width: 859px) {
  .lf-consent-open .site-footer,
  .lf-consent-open .home-footer { padding-bottom: 300px; }
}
/* Sub 1366px bannerul de 420px atingea wordmark-ul din hero. */
@media (min-width: 860px) and (max-width: 1366px) {
  .lf-consent { width: 360px; }
}

/* Butonul „SCHIMBĂ-MI OPȚIUNEA" folosește .btn-ghost fără .btn, deci rămânea cu
   padding-ul implicit al browserului și literele atingeau bordura. */
.btn-ghost:not(.btn) {
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
}

/* Un singur link activ în grilă (acum doar YouTube, restul sunt ascunse fiindcă
   n-au URL) arăta ca un buton pe jumătate de rând lângă gol. */
.link-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Paginile de text lung (presă, legale) rămâneau într-o coloană de 640px în
   mijlocul unui monitor de 1920. Restul păstrează lățimea de „dosar". */
@media (min-width: 1200px) {
  .pg-press .container,
  .pg-legal .container { max-width: 860px; }
}

/* Pe desktop, pasul de capturare împingea butonul „DECLANȘEAZĂ" sub marginea
   ecranului (măsurat: 1102px la o fereastră de 800px) — omul vedea camera și
   niciun buton. Chenarul se scurtează, butonul intră în cadru. */
@media (min-width: 1024px) {
  /* Chenarul se dimensionează din ce RĂMÂNE pe ecran, nu dintr-un procent fix:
     deasupra lui stau ~470px de antet + titluri, iar sub el butonul. Cu 46vh
     butonul ieșea tot sub margine la 800 și 900px înălțime. Formula lasă mereu
     loc butonului, pe orice înălțime de fereastră. */
  .pg-generator [data-step="2"] .media-frame {
    max-height: max(220px, calc(100vh - 580px));
    max-width: 340px;
  }
}

/* Titlurile mari se vedeau ca o fantomă pe sub bara de sus (96% opacitate). */
.nav-home.is-stuck::before { background: var(--color-void); }

/* Conturul de focus al butonului de meniu era alb 3px, restul site-ului portocaliu 2px. */
.menu-btn:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; }

/* Singurul câmp text al site-ului (numele de pe placă) avea `outline:none`, deci
   la tastatură nu se vedea NIMIC în afară de o bordură de 1px care schimbă nuanța.
   E pasul 1 al conversiei — trebuie să se vadă unde ești. */
input[type="text"]:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; }

/* Butonul dezactivat avea contrast 1.46:1 — adică text invizibil exact în cele
   30-60s de așteptare, pe telefon, în soare. 2.4:1 rămâne clar „stins", dar lizibil. */
.pg-generator button:not(.btn-ghost):not(.toggle-btn):not(.cc-yes):not(.cc-no):disabled {
  color: var(--color-text-muted);
}

/* ============================================================
   REPARAȚII TELEFON (audit 25 aug)
   ============================================================ */

/* Bannerul avea 222px la 390px lățime și acoperea exact ce trebuie apăsat:
   pe generator ascundea selectorul M/F, bifa de galerie ȘI „PORNEȘTE CAMERA".
   În landscape mânca 57-68% din ecran. Îl compactăm; textul rămâne întreg. */
@media (max-width: 640px) {
  .lf-consent { padding: var(--space-3); }
  /* A7 (02.10): textul consimțământului la 12 px — sub 12 px Lighthouse îl socotește ilizibil
     pe telefon, și e exact textul care contează legal. Interlinia mai strânsă ține bannerul compact. */
  .lf-consent p { font-size: 12px; line-height: 1.4; margin-bottom: var(--space-3); }
  .lf-consent .cc-row { flex-wrap: nowrap; }
  .lf-consent button { font-size: 10px; padding: 10px 8px; }
}
@media (max-height: 480px) {
  .lf-consent { max-height: 46vh; overflow-y: auto; padding: 10px 14px; }
  .lf-consent p { font-size: 12px; line-height: 1.35; margin-bottom: 8px; }
  .lf-consent .cc-label { margin-bottom: 4px; }
}

/* Butonul de meniu: singurul control de navigație al paginii principale, și
   (a) sub pragul de deget, (b) FĂRĂ font-family declarat — butoanele nu moștenesc
   fontul din body, deci ieșea în fontul de sistem: Arial pe Chrome, SF Pro pe
   iPhone, lângă un site scris integral în Space Mono. */
.menu-btn {
  font-family: var(--font-mono);
  padding: 12px 18px;
  line-height: 1;
}

/* Zona de siguranță jos: ultima linie din subsol ajungea sub bara de acasă
   a iPhone-ului (viewport-fit=cover e activ pe toate paginile). */
.site-footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }

/* Ținte de atins mai generoase pe rândurile de linkuri din subsol: cutiile
   rândurilor consecutive se atingeau (0px între ele) → atingeri greșite. */
.site-footer a, .home-footer .links a { padding-top: 8px; padding-bottom: 8px; }

/* ---------------------------------------------------------------------------
   CEI PATRU — fișele de personaj de pe /about.
   Cutia fotografiei are `aspect-ratio` fix, iar <img> are width/height în markup:
   locul e rezervat înainte ca imaginea să ajungă, deci `loading="lazy"` nu poate
   produce nicio deplasare de layout. Cadrul gol al lui Piciente are EXACT aceeași
   cutie ca celelalte — absența ocupă loc, ca într-un dosar adevărat.
   --------------------------------------------------------------------------- */
.dosare-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dosar-card { margin: 0; }
.dosar-foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.dosar-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
/* Absența se scrie cu cretă, nu se ascunde: o fotografie inventată ar fi singurul
   lucru fals de pe pagină (Brand Bible, Principiul 1). */
.dosar-foto.is-gol { display: grid; place-items: center; border-style: dashed; border-color: var(--color-border-mid); }
.dosar-foto.is-gol::before { content: ""; position: absolute; top: -7px; left: 50%; width: 64px; height: 16px; margin-left: -32px; background: rgba(233,238,242,.13); transform: rotate(-2.4deg); }
.dosar-creta { font-size: 11px; line-height: 1.6; letter-spacing: var(--tracking-wide); text-align: center; text-transform: uppercase; color: var(--color-text-muted); }
.dosar-nume { display: block; margin-top: 10px; font-size: 15px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text); }
.dosar-rol { display: block; margin-top: 2px; font-size: 10px; letter-spacing: var(--tracking-max); text-transform: uppercase; color: var(--color-orange); }
.dosar-linie { margin: 7px 0 0; font-size: 12px; line-height: 1.65; color: var(--color-text-sub); }
/* 2×2 la orice lățime: cardul „about" are ~600px; pe 4 coloane fotografia avea 130px
   și replica se rupea la două cuvinte pe rând. Pe 2 coloane fața se citește. */
@media (min-width: 900px) { .dosare-grid { gap: 22px 20px; } .dosar-linie { font-size: 12.5px; } }
/* Marcajul IA stă PE imagine la cadrele generate (intro, planșe). Excepție de la 09.10:
   fotografiile de dosar de pe „about" nu mai au bandă, pentru că acoperea plăcuța. Portretul
   lui Piciente e semnalat lângă imagine, nu peste ea (vezi regie.css, .dosar-nota). */
/* A7 (02.10): marcajul IA la 12 px (era 9 px; 7–8,5 px pe planșe și pe cadrele din intro).
   AI Act art. 50 cere o informare „clară și distinctă" — la 7 px, pe telefon, nu era. Pe
   rame înguste textul trece pe două rânduri, cu interlinie strânsă, în loc să se micșoreze. */
.dosar-ia { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 6px; font-size: 12px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--color-text); background: rgba(6,9,13,.82); border: 1px solid var(--color-border-mid); }
.dosar-foto .dosar-ia { letter-spacing: 0; }
@media (max-width: 640px) { .dosar-foto .dosar-ia { left: 6px; right: 6px; bottom: 6px; padding: 3px 4px; } }

/* Bannerul de consimțământ e `position:fixed` jos; măsurat pe telefon acoperă
   integral CTA-ul principal: la 360×740 ocupă [12, 534, 336, 194] — 26% din ecran,
   peste „FĂ-ȚI DOSARUL →", „L'ALBUM" și butonul becului. Nu e un bug de layout
   (un banner E un strat peste conținut), dar e exact butonul pentru care există
   site-ul, ascuns în primele secunde ale primei vizite.
   Rezervăm locul din CLASA pusă la încărcare, nu la afișarea bannerului — altfel
   rezervarea ar fi ea însăși o deplasare de layout necauzată de user. Pe ecran lat
   bannerul stă în colț și nu acoperă nimic, deci regula e doar pentru telefon. */
@media (max-width: 899px) {
  html.lf-consent-pending .hero { padding-bottom: calc(7vh + 215px); }
  html.lf-consent-pending .pg-generator main > section[data-step].active { padding-bottom: 215px; }
}

/* Ștampila de presă: pe ecran îngust nu există 131px liberi nicăieri în antet, deci
   orice poziție „fără suprapunere" e o minciună. Măsurat la 390px: cădea peste
   `.bio-block` cu 114×27px de text peste text — exact pe biografia pe care un
   jurnalist o citește prima. Rezolvarea nu e s-o mutăm, e s-o punem UNDE ÎI E LOCUL:
   o ștampilă de cauciuc se aplică PESTE hârtie, sub cerneala tiparului. `z-index:-1`
   o duce în spatele textului, iar la 40% pe `screen` rămâne o urmă de tuș, nu un
   obstacol. Se micșorează, ca să încapă în antet, nu peste el.
   Pe ecran lat rămâne exact cum era: acolo chiar există spațiu liber. */
@media (max-width: 899px) {
  .pg-press .hero-header .lf-stamp {
    top: 64px !important; right: 8px !important;
    box-sizing: border-box;
    width: 88px !important; height: 88px !important;
    font-size: 7.5px !important; letter-spacing: .08em; padding: 6px;
    z-index: -1; opacity: .4;
  }
}

/* Pe generator, antetul de dosar (număr + logo mare + subtitlu) mânca 291px din
   ecranul telefonului, împingând butonul fiecărui pas sub margine. Pe mobil îl
   reducem la strictul necesar — numărul dosarului rămâne, fiindcă el dă tonul.
   Pe desktop rămâne întreg. */
@media (max-width: 640px) {
  .pg-generator .hero-header { margin-bottom: var(--space-3); }
  .pg-generator .hero-header .page-title { font-size: 30px; margin-bottom: 2px; }
  .pg-generator .hero-header .hero-sub { display: none; }
}
@media (max-height: 480px) {
  /* Landscape pe telefon: ecranul e de 390px înălțime, orice antet e prea mult. */
  .pg-generator .hero-header .page-title,
  .pg-generator .hero-header .hero-sub { display: none; }
  .pg-generator .hero-header { margin-bottom: var(--space-2); }
}

/* Chenarul camerei pe telefon: `74dvh` însemna că, adunat cu antetul cardului
   (202px) și cu butonul, declanșatorul cădea cu 15-30px sub marginea ecranului —
   suficient cât să nu-l vezi. Îl dimensionăm din spațiul RĂMAS, ca „DECLANȘEAZĂ"
   să fie mereu în cadru, pe orice înălțime de ecran. */
@media (max-width: 1023px) {
  .pg-generator [data-step="2"] .media-frame {
    max-height: max(260px, calc(100dvh - 340px));
  }
}

/* Text doar pentru cititoarele de ecran și motoarele de căutare (ex. H1-ul propriu al fiecărei
   pagini, sub wordmark-ul LA×FAIM — A10 / F25). Nu ocupă loc și nu se vede. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* ===== v2+ (27.09.2026) ===== */
/* Constituția (pasul 1) se ascunde pentru F — [hidden] trebuie să bată .form-field. */
#build-field[hidden] { display: none !important; }
/* Confirmările de la pasul 3 stau lipite de butonul pe care îl deblochează. */
.lab-consent { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--color-border-mid); }
.lab-consent .consent-row { margin-bottom: 10px; }
.consent-row a { color: var(--color-cyan); text-decoration: underline; text-underline-offset: 3px; }
/* AFLĂ PRIMUL — formularul listei de lansare (home, album, generator). */
.alibi-form { margin-top: var(--space-4); max-width: 520px; }
.alibi-form .alibi-lbl { display: block; font-size: 11px; color: var(--color-text-muted); letter-spacing: var(--tracking-wide); margin-bottom: 6px; }
.alibi-form input[type="text"] { width: 100%; margin-bottom: 14px; }
.alibi-form .btn, .alibi-form button[type="submit"] { width: 100%; text-align: center; cursor: pointer; }
.alibi-form button[disabled] { opacity: .6; cursor: progress; }
.alibi-stare { min-height: 1.5em; margin-top: 10px; font-size: 11px; letter-spacing: var(--tracking-wide); color: var(--color-orange); }
.alibi-stare.err { color: var(--color-forensic); }
.alibi-block { border: 1px solid var(--color-border); background: var(--color-surface); padding: clamp(20px, 4vw, 32px); margin-top: var(--space-5); }
.alibi-block .alibi-kicker { font-size: 10px; letter-spacing: .3em; color: var(--color-orange); text-transform: uppercase; }
.alibi-block h3 { font-family: var(--font-disp); font-weight: 700; font-size: clamp(22px, 3.2vw, 30px); margin: 10px 0 8px; }
.alibi-block p { font-size: 13px; line-height: 1.7; color: var(--color-text-sub); max-width: 52ch; }
.alibi-h { font-family: var(--font-disp); font-weight: 700; font-size: 20px; margin: var(--space-5) 0 8px; padding-top: var(--space-4); border-top: 1px dashed var(--color-border-mid); }
.story-hint { font-size: 12px; line-height: 1.55; color: var(--color-text-muted); margin: 8px 0 14px; }
/* A9 / F21: Blob căzut → dosarul n-are link public; nota explică de ce lipsesc butoanele de link. */
.dosar-offline-note { font-size: 12px; line-height: 1.5; letter-spacing: .1em; color: var(--color-text-sub); margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--color-border-mid); }