/* ══════════════════════════════════════════════════════════════
   LUMEN — pagina de prezentare
   Paleta e moștenită din lumen-frontend/src/index.css: perete
   aurora, panouri de sticlă, accent #30b0c7. Derularea e timp:
   scenele fixate avansează povestea.
   ══════════════════════════════════════════════════════════════ */

@property --p { syntax: '<number>'; initial-value: 0; inherits: true; }

/* ─── 0. Fonturi ────────────────────────────────────────────────
   Variabile, servite local. Cele două subseturi se completează:
   „latin" aduce Â/Î, „latin-ext" aduce Ș/Ț/Ă cu virgulă dedesubt
   (U+0218–U+021B) — forma corectă în română, nu sedila.        */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-ext.038d84e9.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
  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: "Fraunces";
  src: url("../fonts/fraunces-latin.af2119a6.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.a9a94325.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  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: "Manrope";
  src: url("../fonts/manrope-latin.785877a0.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── 1. Jetoane ─────────────────────────────────────────────── */
/* Baza e tema ÎNCHISĂ, indiferent de preferința sistemului. Povestea
   se petrece seara, într-o clinică goală, iar peretele aurora arată
   acolo cum trebuie. Tema deschisă rămâne, dar numai la comutare
   explicită — de asta nu există un bloc „prefers-color-scheme: dark". */
:root {
  --accent: #4cc6dc;
  --accent-lo: #6fd8e8;
  --accent-hi: #2b9fb3;
  --accent-soft: rgba(76,198,220,.15);
  --accent-line: rgba(76,198,220,.32);
  --accent-glow: rgba(76,198,220,.50);

  /* Accentul ca TEXT e alt jeton decât accentul ca suprafață. Pe închis
     ies identice — cyan deschis pe aproape-negru trece lejer de 4.5:1.
     Pe deschis, exact același cyan pe alb dă 2.3:1, deci tema deschisă
     îl închide separat. Regula: fundal, ramă, bară, punct → --accent;
     literă sau glifă → --accent-txt. La fel pentru --ok și --warn. */
  --accent-txt: #4cc6dc;
  --cta: linear-gradient(155deg, var(--accent-lo) 0%, var(--accent-hi) 100%);
  /* Butonul primar e cel mai luminos lucru de pe o pagină întunecată, și
     asta e intenția — produsul se numește Lumen. Albul pe el dădea însă
     1,7:1: eticheta cea mai importantă din pagină era cea mai greu de
     citit. Cerneala întunecată păstrează lumina butonului și urcă la
     9,5:1 la capătul deschis al degradeului, 5,0:1 la cel închis. */
  --cta-txt: #00272f;

  --ok: #4bc48d;   --ok-bg: rgba(75,196,141,.14);   --ok-txt: #4bc48d;
  --warn: #e0b055; --warn-bg: rgba(224,176,85,.14); --warn-txt: #e0b055;

  --wall:
    radial-gradient(46% 40% at 8% 2%,   #1c3f70 0%, rgba(28,63,112,0) 64%),
    radial-gradient(40% 36% at 92% 0%,  #4d1f45 0%, rgba(77,31,69,0) 64%),
    radial-gradient(44% 42% at 78% 96%, #0f4038 0%, rgba(15,64,56,0) 64%),
    radial-gradient(36% 34% at 26% 92%, #47340f 0%, rgba(71,52,15,0) 66%),
    linear-gradient(175deg, #0c0e13 0%, #07080c 100%);

  --blur: blur(40px) saturate(180%) brightness(.94);
  --g1: rgba(20,22,28,.44);
  --g2: rgba(26,28,35,.52);
  --g3: rgba(40,43,53,.60);
  --panel: rgba(28,30,38,.97);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 36%, rgba(255,255,255,0) 64%);
  --stroke: rgba(255,255,255,.12);
  --hair: rgba(255,255,255,.10);

  --t1: rgba(255,255,255,.94);
  --t2: rgba(235,235,245,.68);
  --t3: rgba(235,235,245,.56);

  --fill: rgba(140,144,160,.16);
  --fill2: rgba(140,144,160,.28);

  --sh: 0 1px 1px rgba(0,0,0,.30), 0 12px 34px rgba(0,0,0,.44),
        inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.03);
  --shHi: 0 2px 4px rgba(0,0,0,.36), 0 26px 70px rgba(0,0,0,.56),
          inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.04);
  --sh3d: 0 40px 110px rgba(0,0,0,.66), 0 10px 30px rgba(0,0,0,.40),
          inset 0 1px 0 rgba(255,255,255,.13);

  --bubble-in: rgba(255,255,255,.10);
  --bubble-out: linear-gradient(155deg, #2b9fb3 0%, #1d7286 100%);
  --mote: rgba(120,215,235,.60);
  --grain-op: .042;
  --reflexie: rgba(120,215,235,.10);

  --au1: #1c3f70; --au2: #4d1f45; --au3: #0f4038; --au4: #47340f;
  --au-b1: #0c0e13; --au-b2: #07080c;

  /* rama telefonului: titan periat, cu muchiile prinse de lumină */
  --ti: linear-gradient(148deg,#4b515a 0%,#848b96 11%,#4f555e 29%,#31363d 47%,#6a7079 67%,#3d424a 85%,#5a616a 100%);
  --ti-in: rgba(255,255,255,.16);

  /* un singur punct de comutare pentru direcția tipografică */
  --f-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --f-body: "Manrope", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --rad: 20px;
  --maxw: 1180px;
}

:root[data-theme="dark"] {
  --accent: #4cc6dc; --accent-lo: #6fd8e8; --accent-hi: #2b9fb3;
  --accent-soft: rgba(76,198,220,.15); --accent-line: rgba(76,198,220,.32);
  --accent-glow: rgba(76,198,220,.50);
  --accent-txt: #4cc6dc;
  --cta: linear-gradient(155deg, var(--accent-lo) 0%, var(--accent-hi) 100%);
  --cta-txt: #00272f;
  --ok: #4bc48d; --ok-bg: rgba(75,196,141,.14); --ok-txt: #4bc48d;
  --warn: #e0b055; --warn-bg: rgba(224,176,85,.14); --warn-txt: #e0b055;
  --wall:
    radial-gradient(46% 40% at 8% 2%,   #1c3f70 0%, rgba(28,63,112,0) 64%),
    radial-gradient(40% 36% at 92% 0%,  #4d1f45 0%, rgba(77,31,69,0) 64%),
    radial-gradient(44% 42% at 78% 96%, #0f4038 0%, rgba(15,64,56,0) 64%),
    radial-gradient(36% 34% at 26% 92%, #47340f 0%, rgba(71,52,15,0) 66%),
    linear-gradient(175deg, #0c0e13 0%, #07080c 100%);
  --blur: blur(40px) saturate(180%) brightness(.94);
  --g1: rgba(20,22,28,.44); --g2: rgba(26,28,35,.52); --g3: rgba(40,43,53,.60);
  --panel: rgba(28,30,38,.97);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 36%, rgba(255,255,255,0) 64%);
  --stroke: rgba(255,255,255,.12); --hair: rgba(255,255,255,.10);
  --t1: rgba(255,255,255,.94); --t2: rgba(235,235,245,.68); --t3: rgba(235,235,245,.56);
  --fill: rgba(140,144,160,.16); --fill2: rgba(140,144,160,.28);
  --sh: 0 1px 1px rgba(0,0,0,.30), 0 12px 34px rgba(0,0,0,.44),
        inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.03);
  --shHi: 0 2px 4px rgba(0,0,0,.36), 0 26px 70px rgba(0,0,0,.56),
          inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.04);
  --sh3d: 0 40px 110px rgba(0,0,0,.66), 0 10px 30px rgba(0,0,0,.40),
          inset 0 1px 0 rgba(255,255,255,.13);
  --bubble-in: rgba(255,255,255,.10);
  --bubble-out: linear-gradient(155deg, #2b9fb3 0%, #1d7286 100%);
  --mote: rgba(120,215,235,.60);
  --grain-op: .042;
  --reflexie: rgba(120,215,235,.10);
  --au1: #1c3f70; --au2: #4d1f45; --au3: #0f4038; --au4: #47340f;
  --au-b1: #0c0e13; --au-b2: #07080c;
  --ti: linear-gradient(148deg,#4b515a 0%,#848b96 11%,#4f555e 29%,#31363d 47%,#6a7079 67%,#3d424a 85%,#5a616a 100%);
  --ti-in: rgba(255,255,255,.16);
}
:root[data-theme="light"] {
  --accent: #30b0c7; --accent-lo: #5cc6d8; --accent-hi: #248b9c;
  --accent-soft: rgba(48,176,199,.14); --accent-line: rgba(48,176,199,.34);
  --accent-glow: rgba(48,176,199,.42);
  /* Supratitlurile stau direct pe perete, nu pe card, deci contează
     pata cea mai luminoasă din aurora, nu albul. #0e6675 dădea 6.6:1 pe
     alb, dar cobora la 4.28:1 peste pata galbenă de la 1440 — sub prag,
     măsurat pe pixeli. #0b5b68 ține 4.6:1 și acolo. #248b9c (accent-hi)
     ar da 4.0:1 — prea puțin pentru 10-11px. */
  --accent-txt: #0b5b68;
  /* Butonul primar poartă text alb, deci capătul DESCHIS al degradeului
     e cel care decide: alb pe #1b8296 = 4.5:1, pe #5cc6d8 ar fi 2.0:1. */
  --cta: linear-gradient(155deg, #1b8296 0%, #0d6272 100%);
  /* Aici invers: pe o pagină deschisă, butonul se vede pentru că e
     ÎNTUNECAT, deci poartă alb. Fiecare temă își alege cerneala după
     propriul fundal — nu e o inconsecvență, e aceeași regulă aplicată
     la două lumini diferite. */
  --cta-txt: #fff;
  --ok: #2f9e6e; --ok-bg: rgba(47,158,110,.13); --ok-txt: #15754b;
  --warn: #c98a1c; --warn-bg: rgba(217,154,43,.15); --warn-txt: #7a5200;
  --wall:
    radial-gradient(46% 40% at 8% 2%,   #9fc2ff 0%, rgba(159,194,255,0) 64%),
    radial-gradient(40% 36% at 92% 0%,  #ffc0da 0%, rgba(255,192,218,0) 64%),
    radial-gradient(44% 42% at 78% 96%, #a8f0d6 0%, rgba(168,240,214,0) 64%),
    radial-gradient(36% 34% at 26% 92%, #ffe1a8 0%, rgba(255,225,168,0) 66%),
    linear-gradient(175deg, #f1f3f8 0%, #e7e9f0 100%);
  --blur: blur(36px) saturate(190%) brightness(1.04);
  --g1: rgba(255,255,255,.32); --g2: rgba(255,255,255,.46); --g3: rgba(255,255,255,.64);
  --panel: rgba(252,253,255,.96);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 36%, rgba(255,255,255,0) 64%);
  /* Rama de sticlă era albă și pe închis, și pe deschis. Pe închis
     desenează muchia; pe deschis e alb pe alb, iar cardurile din
     conductă se topeau în perete. Muchia devine o linie întunecată
     foarte slabă — lumina de sus vine oricum din „inset" din --sh. */
  --stroke: rgba(24,28,48,.11); --hair: rgba(24,28,48,.10);
  /* --t3 e text mărunt — subtitluri de bară, note, etichete de 10-11px.
     La .78 pe fundalul deschis dădea 4.41:1; la mărimea aia nu e loc de
     rotunjit în jos. */
  --t1: rgba(22,24,30,.94); --t2: rgba(56,58,68,.82); --t3: rgba(46,48,58,.88);
  --fill: rgba(120,124,140,.12); --fill2: rgba(120,124,140,.20);
  --sh: 0 1px 1px rgba(24,28,48,.04), 0 10px 30px rgba(24,28,48,.10),
        inset 0 1px 0 rgba(255,255,255,.66), inset 0 -1px 0 rgba(255,255,255,.20);
  --shHi: 0 2px 3px rgba(24,28,48,.06), 0 22px 60px rgba(24,28,48,.16),
          inset 0 1px 0 rgba(255,255,255,.74), inset 0 -1px 0 rgba(255,255,255,.24);
  --sh3d: 0 30px 90px rgba(24,28,48,.22), 0 8px 26px rgba(24,28,48,.10),
          inset 0 1px 0 rgba(255,255,255,.70);
  --bubble-in: rgba(255,255,255,.86);
  --bubble-out: linear-gradient(155deg, #5cc6d8 0%, #248b9c 100%);
  --mote: rgba(48,176,199,.55);
  --grain-op: .030;
  --reflexie: rgba(255,255,255,.55);
  --au1: #9fc2ff; --au2: #ffc0da; --au3: #a8f0d6; --au4: #ffe1a8;
  --au-b1: #f1f3f8; --au-b2: #e7e9f0;
  --ti: linear-gradient(148deg,#9aa1aa 0%,#d5dae0 11%,#98a0a9 29%,#727984 47%,#b6bcc4 67%,#7e8590 85%,#a3aab3 100%);
  --ti-in: rgba(255,255,255,.46);
}

/* ─── 1b. Mișcarea ──────────────────────────────────────────────
   Aceleași în ambele teme. Singura sursă pentru durate și curbe — și
   pentru app: scripturile le citesc prin Lumen.jeton(). Regulile din
   spatele lor sunt în README, capitolul „Mișcarea".                */
:root {
  --d-apasare: 100ms;  /* feedback la apăsare */
  --d-hover:   160ms;  /* reacții la cursor */
  --d-ui:      240ms;  /* meniu, comutatoare, schimbări mici de stare */
  --d-panou:   400ms;  /* panouri, deplasări mari, schimbări de ecran */
  --d-intrare: 560ms;  /* apariția secțiunilor */
  --d-poveste: 900ms;  /* momentele care spun povestea */

  --e-iesire-din-repaus: cubic-bezier(.16, 1, .3, 1);   /* intrări, apariții */
  --e-hover:             cubic-bezier(.23, 1, .32, 1);  /* reacții */
  --e-mutare:            cubic-bezier(.65, 0, .35, 1);  /* deplasări pe ecran */
  --e-plecare:           cubic-bezier(.7, 0, .84, 0);   /* ieșiri */
  --e-lumina:            cubic-bezier(.37, 0, .63, 1);  /* aprinderi, stingeri */
  /* arcul: generat de scripts/arc_css.js (durata 0,5 s, bounce 0,08) — nu se editează de mână */
  --d-arc: 560ms;
  --e-arc: linear(0, 0.006 1.5%, 0.023 3.2%, 0.051 5.0%, 0.091 7.0%, 0.177 10.5%, 0.475 21.7%, 0.563 25.4%, 0.639 29.1%, 0.703 32.6%, 0.758 36.1%, 0.805 39.6%, 0.847 43.4%, 0.888 48.0%, 0.921 52.9%, 0.947 58.4%, 0.967 64.4%, 0.982 71.0%, 0.991 78.7%, 0.997 87.9%, 1);

  /* arcul viu: obiecte mici atinse de om (B2 §2) — depășire 2,8%; generat: node scripts/arc_css.js --durata .35 --bounce .25 --nume arc-viu */
  --d-arc-viu: 484ms;
  --e-arc-viu: linear(0, 0.007 1.3%, 0.027 2.8%, 0.060 4.3%, 0.106 6.0%, 0.207 9.0%, 0.560 18.5%, 0.661 21.6%, 0.745 24.6%, 0.816 27.6%, 0.875 30.6%, 0.922 33.7%, 0.960 36.9%, 0.988 40.2%, 1.008 43.8%, 1.021 47.7%, 1.027 52.2%, 1.026 59.4%, 1.005 83.0%, 1);

  --decalaj: 45ms;      /* elementele unui grup */
  --decalaj-cuv: 32ms;  /* cuvintele unui titlu */
  --urcare: 18px;       /* distanța unei apariții */
}

/* ─── 2. Bază ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Derularea e a browserului. Ancorele alunecă, dar nu la mișcare redusă. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--f-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--t1);
  background: var(--wall);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--f-display);
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 620;
  font-variation-settings: "opsz" 132, "SOFT" 34;
}
h2 {
  font-size: clamp(1.95rem, 4vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
  font-weight: 620;
  font-variation-settings: "opsz" 96, "SOFT" 34;
}
h3 {
  font-size: 1.08rem;
  line-height: 1.32;
  letter-spacing: -0.012em;
  font-weight: 640;
  font-variation-settings: "opsz" 20, "SOFT" 46;
}

.lead { font-size: 1.14rem; line-height: 1.6; color: var(--t2); max-width: 62ch; }
.fine { font-size: .84rem; line-height: 1.55; color: var(--t3); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-txt);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ""; width: 20px; height: 1.5px;
  background: currentColor; opacity: .55; border-radius: 1px;
}

a { color: var(--accent-txt); text-decoration: none; }
a:hover { opacity: .75; }
:focus-visible {
  outline: 2px solid var(--accent-txt); outline-offset: 3px; border-radius: 6px;
  box-shadow: 0 0 0 6px var(--accent-glow);
  transition: outline-offset var(--d-ui) var(--e-arc-viu), box-shadow var(--d-ui) var(--e-hover);
}

.sar-peste {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--panel); color: var(--t1);
  padding: 10px 18px; border-radius: 11px;
  border: .5px solid var(--hair); box-shadow: var(--shHi);
  font-size: 14px; font-weight: 600;
  transition: top .22s ease;
}
.sar-peste:focus { top: 12px; opacity: 1; }

.glass {
  background: var(--sheen), var(--g1);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: .5px solid var(--stroke); box-shadow: var(--sh);
}
.glass-hi {
  background: var(--sheen), var(--g2);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: .5px solid var(--stroke); box-shadow: var(--shHi);
}

/* ─── 3. Straturi de atmosferă ───────────────────────────────── */
/* Peretele CSS: rezerva. Rămâne singurul strat dacă WebGL lipsește. */
.aurora {
  position: fixed; inset: -20%;
  background: var(--wall);
  opacity: .50; filter: blur(34px);
  z-index: -3; pointer-events: none;
  transform: translate3d(0,0,0);
  transition: opacity .6s ease;
}
/* Peretele în WebGL: îl acoperă complet și îl preia. Clasa se pune din
   JS abia după ce contextul și shaderul au reușit. */
#aurora-gl {
  position: fixed; inset: 0;
  z-index: -2; pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
}
.are-aurora-gl #aurora-gl { opacity: 1; }
.are-aurora-gl .aurora { opacity: 0; }

#motes { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* grain de film: o dală de zgomot generată o dată în canvas, apoi
   mutată în trepte — mult mai ieftin decât feTurbulence animat */
.grain {
  position: fixed; inset: -50px;
  z-index: 3; pointer-events: none;
  opacity: var(--grain-op);
  mix-blend-mode: overlay;
  background-repeat: repeat;
}

/* ─── 5. Antet ───────────────────────────────────────────────── */
.progres {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
  box-shadow: 0 0 12px var(--accent-glow);
}

.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 13px 0;
  border-bottom: .5px solid transparent;
  transition: background var(--d-ui) ease, border-color var(--d-ui) ease, transform var(--d-panou) var(--e-mutare);
}
/* fără JavaScript nu pune nimeni „lipit", iar un antet transparent lasă
   textul paginii să treacă pe sub meniu — sonda de contrast l-a prins */
.hdr.lipit, html:not(.js) .hdr {
  /* --g3, nu --g2: sub antet trec acum telefonul și cardurile luminoase,
     iar sigla de 9px cădea la 3,2:1 peste ele (capturile din 03.10) */
  background: var(--g3);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom-color: var(--hair);
}
/* Meniul deschis ține antetul pe loc și îi dă un fundal OPAC. Sticla
   translucidă e frumoasă pe o bară de 60 de pixeli, dar sub un panou
   de meniu lasă textul paginii să se vadă prin el și nu se mai citește
   niciunul din cele două. */
.hdr.meniu {
  transform: none !important;
  /* panoul de 96% peste culoarea de bază a peretelui = complet opac,
     în ambele teme, fără să inventăm o culoare nouă */
  background-color: var(--au-b1);
  background-image: linear-gradient(var(--panel), var(--panel));
  border-bottom-color: var(--hair);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hdr.ascuns { transform: translateY(-110%); }
.hdr-in { display: flex; align-items: center; gap: 20px; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand:hover { opacity: 1; }
.mark {
  width: 38px; height: 38px; flex-shrink: 0;
  display: block; line-height: 0;
  filter: drop-shadow(0 3px 12px var(--accent-glow));
  transition: transform var(--d-ui) var(--e-hover), filter var(--d-ui) ease;
}
.mark svg { width: 100%; height: 100%; display: block; }
.brand:hover .mark { transform: scale(1.06); filter: drop-shadow(0 4px 18px var(--accent-glow)); }
.brand-tx { display: flex; flex-direction: column; gap: 1px; }
.brand-nm {
  font-family: var(--f-display); font-size: 19px; font-weight: 700;
  font-variation-settings: "opsz" 24, "SOFT" 30;
  letter-spacing: -0.024em; color: var(--t1); display: block; line-height: 1.05;
}
.brand-sub {
  font-family: var(--f-mono); font-size: 8.6px; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--t2); display: block; line-height: 1.2;
}
/* sub sticla antetului trec cardurile luminoase; la 9px, gri-ul secundar
   cobora la 4,0:1 peste tabloul de bord */
.hdr.lipit .brand-sub { color: var(--t1); }

.nav { display: flex; gap: 2px; margin: 0 auto; position: relative; }
.nav a {
  position: relative; z-index: 1;
  font-size: 13.5px; font-weight: 500; color: var(--t2);
  padding: 8px 12px; border-radius: 9px;
  transition: color var(--d-hover) var(--e-hover);
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--t1); opacity: 1; }
/* Pastila e un singur fundal care alunecă între legături (lumina.js).
   Fără JavaScript, pagina curentă își poartă singură fundalul. */
.nav-pastila {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--fill); border-radius: 9px;
  clip-path: inset(0 100% 0 0 round 9px); opacity: 0;
}
html:not(.js) .nav a[aria-current="page"] { background: var(--fill); }
.hdr-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* Butoanele: hover — ridicare de 1 px; apăsare — scale(.97) în 100 ms,
   apoi revenire pe arcul viu. Butonul principal e magnetic pe desktop
   (lumina.js, proprietatea „translate", cel mult 6 px spre cursor —
   se apropie de deget, nu fuge de el). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  letter-spacing: -0.004em; line-height: 20px;
  padding: 9px 18px; border-radius: 11px;
  border: .5px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative;
  transition: box-shadow var(--d-hover) var(--e-hover), transform var(--d-arc-viu) var(--e-arc-viu),
              background var(--d-hover) ease, color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.btn:hover { opacity: 1; transform: translateY(-1px); }
.btn:active { transform: scale(.97); transition-duration: var(--d-apasare); }
.btn-pri {
  background: var(--cta);
  color: var(--cta-txt);
  box-shadow: 0 3px 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-pri:hover { box-shadow: 0 10px 28px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.30); }
.btn-gho {
  background: var(--g3); color: var(--t1);
  border-color: var(--stroke); box-shadow: var(--sh);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.btn-gho:hover { box-shadow: var(--shHi); border-color: var(--accent-line); }
/* rama se aprinde dinspre punctul pe unde a intrat cursorul (lumina.js
   scrie --mx/--my); doar rama — interiorul e decupat cu mască */
.btn-gho::after {
  content: ""; position: absolute; inset: -.5px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(70px circle at var(--mx, 50%) var(--my, 50%), var(--accent-txt), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--d-hover) var(--e-hover);
}
.btn-gho.lumina::after { opacity: 1; }
@media (hover: none) { .btn-gho::after { display: none; } }
.btn-pri.revine { transition-property: box-shadow, transform, background, color, border-color, translate; transition-duration: var(--d-hover), var(--d-arc-viu), var(--d-hover), var(--d-hover), var(--d-hover), var(--d-arc-viu); transition-timing-function: var(--e-hover), var(--e-arc-viu), ease, ease, ease, var(--e-arc-viu); }

/* legăturile din text: sublinierea se desenează de la stânga și se
   retrage spre dreapta */
main :is(p, li) a:not(.btn) { position: relative; }
main :is(p, li) a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--d-ui) var(--e-mutare);
}
main :is(p, li) a:not(.btn):is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left; }
.btn-lg { font-size: 15px; padding: 12px 25px; border-radius: 13px; line-height: 22px; }

/* aceeași înălțime, aceeași rază și același fundal ca .btn-gho —
   comutatorul de temă și butonul de acțiune trebuie să pară o pereche */
.icon-btn {
  width: 40px; height: 40px; border-radius: 11px;
  border: .5px solid var(--stroke); background: var(--g3); color: var(--t2);
  box-shadow: var(--sh);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  display: grid; place-items: center; cursor: pointer;
  transition: color var(--d-hover) ease, box-shadow var(--d-hover) var(--e-hover), border-color var(--d-hover) ease, transform var(--d-hover) var(--e-hover);
}
.icon-btn:hover { color: var(--t1); box-shadow: var(--shHi); border-color: var(--accent-line); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.97); transition-duration: var(--d-apasare); }
.icon-btn svg { width: 17px; height: 17px; }

/* meniu pe ecrane mici */
.doar-mic { display: none; }
.doar-ingust { display: none; }
/* meniul: ☰ se rotește și dispare, × intră din rotație — pe arcul viu */
#meniu > svg { grid-area: 1 / 1; transition: opacity var(--d-ui) var(--e-hover), transform var(--d-arc-viu) var(--e-arc-viu); }
.ico-inchide { opacity: 0; transform: rotate(-90deg) scale(.6); }
.hdr.meniu .ico-menu { opacity: 0; transform: rotate(90deg) scale(.6); }
.hdr.meniu .ico-inchide { opacity: 1; transform: none; }
/* Panou sub bara antetului, poziționat absolut: nu împinge nimic.
   Se deschide prin clip-path, iar închis e „visibility: hidden", ca
   legăturile lui să nu primească focus de la tastatură. */
.nav-mic {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background-color: var(--au-b1); background-image: linear-gradient(var(--panel), var(--panel));
  border-bottom: .5px solid var(--hair); box-shadow: 0 18px 40px rgba(0,0,0,.14);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path var(--d-ui) var(--e-mutare), visibility 0s linear var(--d-ui);
}
.hdr.meniu .nav-mic { clip-path: inset(0); visibility: visible; transition: clip-path var(--d-ui) var(--e-iesire-din-repaus), visibility 0s; }
.nav-mic-in > * { opacity: 0; transform: translateY(-6px); transition: opacity var(--d-hover) ease, transform var(--d-ui) var(--e-iesire-din-repaus); }
.hdr.meniu .nav-mic-in > * { opacity: 1; transform: none; }
.hdr.meniu .nav-mic-in > :nth-child(2) { transition-delay: calc(1 * var(--decalaj)); }
.hdr.meniu .nav-mic-in > :nth-child(3) { transition-delay: calc(2 * var(--decalaj)); }
.hdr.meniu .nav-mic-in > :nth-child(4) { transition-delay: calc(3 * var(--decalaj)); }
.hdr.meniu .nav-mic-in > :nth-child(5) { transition-delay: calc(4 * var(--decalaj)); }
.hdr.meniu .nav-mic-in > :nth-child(6) { transition-delay: calc(5 * var(--decalaj)); }
.hdr.meniu .nav-mic-in > :nth-child(7) { transition-delay: calc(6 * var(--decalaj)); }
.nav-mic-in { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 14px; }
.nav-mic a, .nav-mic-tema {
  font-family: var(--f-body); font-size: 15.5px; font-weight: 550;
  color: var(--t1); text-align: left;
  padding: 13px 4px; border-bottom: .5px solid var(--hair);
}
.nav-mic-tema {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border-width: 0 0 .5px 0; border-style: solid; border-color: var(--hair);
  cursor: pointer; width: 100%;
}
.nav-mic-tema svg { width: 17px; height: 17px; color: var(--t2); flex-shrink: 0; }
.nav-mic a:last-child, .nav-mic-tema:last-child { border-bottom: none; }

/* Implicit suntem pe tema închisă, deci butonul oferă trecerea la cea
   deschisă: soare. Cele două pictograme stau una peste alta: la comutare,
   soarele se rotește și se strânge, luna intră din rotație — pe arcul
   viu. Etichetele din meniul mic se schimbă pe loc. */
.et-luna { display: none; }
.et-soare { display: inline; }
:root[data-theme="light"] .et-luna { display: inline; }
:root[data-theme="light"] .et-soare { display: none; }
[data-tema] > svg { grid-area: 1 / 1; transition: opacity var(--d-ui) var(--e-hover), transform var(--d-arc-viu) var(--e-arc-viu); }
.nav-mic-tema > span { grid-area: 1 / 1; }
.nav-mic-tema > svg { grid-area: 1 / 2; }
.ico-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
.ico-sun  { opacity: 1; transform: none; }
:root[data-theme="light"] .ico-moon { opacity: 1; transform: none; }
:root[data-theme="light"] .ico-sun  { opacity: 0; transform: rotate(90deg) scale(.5); }

/* ─── 6. Secțiuni și apariții ────────────────────────────────── */
/* „padding-block", nu „padding: 104px 0". Secțiunile sunt „wrap sec",
   iar prescurtarea ștergea padding-ul orizontal moștenit din .wrap —
   pe desktop nu se vedea, fiindcă max-width lăsa oricum margini, dar
   pe telefon tot textul ajungea lipit de marginea ecranului. */
.sec { padding-block: 84px; }
.sec-head {
  display: flex; flex-direction: column; gap: 15px;
  margin-bottom: 48px; max-width: 68ch;
}
.sec-head.fara-jos { margin-bottom: 0; }
.sec-head.strans { margin-bottom: 12px; }

/* Aparițiile. Starea ascunsă există doar sub html.js. Ordinea vine din
   --pas (pus de aparitii.js în ordinea din pagină): supratitlu, titlu,
   paragraf, conținut. */
html.js .apare {
  opacity: 0; transform: translateY(var(--urcare));
  transition: opacity var(--d-intrare) var(--e-iesire-din-repaus), transform var(--d-intrare) var(--e-iesire-din-repaus);
  transition-delay: calc(var(--pas, 0) * var(--decalaj));
}
html.js .apare.vazut { opacity: 1; transform: none; }

/* Titlurile: fiecare cuvânt urcă din mască. Titlul principal al paginii
   (h1, apare la încărcare) se și „limpezește" pe axa SOFT a fontului
   Fraunces — din rotunjit în desenul final. Doar el: axa recalculează
   textul la fiecare cadru, iar pe titlurile care apar în timpul derulării
   a dus p95 de la 9 la 34 ms la procesor ÷4 (măsurat 03.10). */
html.js [data-split]:not(.taiat) { opacity: 0; }
[data-split] .wr > i {
  display: inline-block; font-style: inherit;
  transition-property: opacity, transform;
  transition-duration: 300ms, var(--d-intrare);
  transition-timing-function: var(--e-iesire-din-repaus), var(--e-iesire-din-repaus);
  transition-delay: calc(var(--pas, 0) * var(--decalaj) + var(--i, 0) * var(--decalaj-cuv));
}
html.js [data-split]:not(.vazut) .wr > i { opacity: 0; transform: translateY(126%) rotate(3deg); }
h1[data-split] .wr > i {
  transition-property: opacity, transform, font-variation-settings;
  transition-duration: 300ms, var(--d-intrare), var(--d-poveste);
  transition-timing-function: var(--e-iesire-din-repaus), var(--e-iesire-din-repaus), var(--e-lumina);
}
html.js h1[data-split]:not(.vazut) .wr > i { font-variation-settings: "opsz" 72, "SOFT" 100; }

/* Masca de dezvăluire pe cuvinte. Padding-ul lărgește zona de tăiere
   ca să încapă descendentele — fără el, „g" din „programare" dispărea
   sub marginea măștii. Marginea negativă anulează efectul în așezare. */
.wr {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  /* doar pe verticală: pe orizontală, marginea negativă scotea primul
     cuvânt al fiecărui titlu cu 2px în afara coloanei de text */
  padding: .10em 0 .20em;
  margin: -.10em 0 -.20em;
}

/* ─── 7. Eroul — stă în scena serii ─────────────────────────────── */
.erou-text {
  position: absolute; z-index: 2; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.erou-text > * { max-width: min(560px, 50%); }
.erou-text h1 { max-width: min(15ch, 50%); --pas: 0; }
.intro-cta { display: flex; gap: 11px; flex-wrap: wrap; padding-top: 4px; }
/* Pe lat, eroul se centrează în spațiul de sub antet (67 px), iar titlul
   ține cont și de înălțimea ecranului: pe un laptop de 1366×657 eroul ieșea
   pe sus, peste siglă, în scena fixată unde nu se mai poate derula spre el. */
@media (min-width: 901px) {
  .erou-text { top: calc(50% + 34px); }
  .erou-text h1 { font-size: clamp(2.3rem, min(6.2vw, 8.4vh), 4.6rem); }
}
@media (min-width: 901px) and (max-height: 780px) {
  .erou-text { gap: 14px; }
  .erou-text .dovezi { display: none; }
}
@media (min-width: 901px) and (max-height: 640px) {
  .erou-text .clock { display: none; }
  .erou-text .lead { font-size: 1rem; }
}

.clock {
  --puls: var(--accent); --puls-ring: var(--accent-glow);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--t2);
  background: var(--g3); border: .5px solid var(--stroke);
  border-radius: 999px; padding: 6px 15px 6px 12px;
  box-shadow: var(--sh);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--puls); position: relative; }
/* Inel desenat cu transform și opacitate, deci pe placa video. Pe
   box-shadow, pulsul recalcula stilul la fiecare cadru — singur făcea un
   sfert din consumul paginii în repaus. Trei pulsuri, apoi liniște: ce se
   repetă la nesfârșit încetează să mai fie văzut. */
.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--puls-ring);
  animation: pulsInel 2.6s var(--e-iesire-din-repaus) 3;
}
@keyframes pulsInel { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

.dovezi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 24px; }
.dovezi li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t2); }
.dovezi svg { width: 13px; height: 13px; color: var(--accent-txt); flex-shrink: 0; }

.canale-erou { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.canale-erou li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--t2);
  padding: 5px 11px 5px 6px; border-radius: 999px;
  background: var(--g3); border: .5px solid var(--stroke);
}
.canale-erou .bx { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.canale-erou .bx svg { width: 12px; height: 12px; }
.bx-tel { background: var(--accent-hi); }

/* ─── 8. Scene fixate ────────────────────────────────────────── */
.scena { position: relative; }
.pin {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; display: grid; place-items: center;
}

.rig {
  perspective: 1500px; perspective-origin: 50% 46%;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.stage {
  transform-style: preserve-3d; position: relative;
  width: min(1080px, 92vw); height: min(620px, 76vh);
  will-change: transform;
}
.stage > * { position: absolute; transform-style: preserve-3d; }

/* Telefonul e desenat pe proporțiile reale ale unui iPhone Pro:
   71,5 × 149,6 mm, colț de 12,5 mm, ramă de titan, Dynamic Island.
   Toate măsurile dinăuntru sunt în „cqw" — procent din lățimea
   telefonului — ca aparatul să rămână corect la orice dimensiune,
   nu doar la cea la care a fost desenat. */
.phone {
  width: min(300px, 68vw, 31vh);
  aspect-ratio: 71.5 / 149.6;
  left: 50%; top: 50%;
  container-type: inline-size;
  /* rază eliptică aleasă anume: 17,5% din lățime pe orizontală și
     8,36% din înălțime pe verticală dau exact același număr de pixeli,
     deci un colț rotund adevărat la orice scară */
  border-radius: 17.5% / 8.36%;
  background: var(--ti);
  box-shadow:
    inset 0 0 0 1px var(--ti-in),
    inset 0 1.5px 0 rgba(255,255,255,.34),
    inset 0 -1.5px 0 rgba(0,0,0,.22),
    var(--sh3d);
  will-change: transform;
}
/* sticla neagră de sub ecran — rama de afișaj */
.phone::before {
  content: ""; position: absolute; inset: 2cqw;
  border-radius: 15.5cqw; background: #05070a;
}

.ph-buton {
  position: absolute; width: 1.3cqw; border-radius: .7cqw;
  background: var(--ti);
  box-shadow: inset 0 0 0 .25cqw rgba(0,0,0,.20);
}
.ph-actiune { left: -1cqw; top: 16.5%; height: 5.2%; }
.ph-vol-sus { left: -1cqw; top: 25.5%; height: 8.4%; }
.ph-vol-jos { left: -1cqw; top: 35.8%; height: 8.4%; }
.ph-pornire { right: -1cqw; top: 28.5%; height: 12.4%; }

.di {
  position: absolute; left: 50%; top: 6cqw;
  transform: translateX(-50%);
  width: 30cqw; aspect-ratio: 125 / 36;
  background: #05070a; border-radius: 999px;
  box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.05);
}
/* pastila rămâne curată: decupajul de cameră, la dimensiunea asta, nu
   citește ca o lentilă, ci ca un defect de desen */

.screen {
  position: absolute; inset: 3.4cqw;
  border-radius: 14.1cqw; overflow: hidden;
  background: var(--panel);
  display: flex; flex-direction: column;
}

/* bara de stare: ora e centrată pe Dynamic Island, ca pe aparat */
.ios-stare {
  display: flex; align-items: center; justify-content: space-between;
  height: 13.9cqw; padding: 0 6.2cqw; flex-shrink: 0;
  color: var(--t1);
}
.ios-ora {
  font-size: 4.3cqw; font-weight: 680; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.ios-dr { display: inline-flex; align-items: center; gap: 1.7cqw; }
.ios-i { display: block; height: 3.1cqw; width: auto; }
.i-sem { width: 4.6cqw; }
.i-wf  { width: 4.1cqw; }
.i-bat { width: 6.9cqw; }

.ios-home {
  position: absolute; left: 50%; bottom: 2.1cqw;
  transform: translateX(-50%);
  width: 36%; height: 1.3cqw; border-radius: 999px;
  background: var(--t1); opacity: .26;
}

.scr-bar {
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2.6cqw 4cqw; flex-shrink: 0;
  border-bottom: .5px solid var(--hair); background: var(--g3);
}
.scr-inapoi { width: 3.6cqw; height: 3.6cqw; color: var(--accent-txt); flex-shrink: 0; }
.scr-bar .chan-dot { width: 7.2cqw; height: 7.2cqw; border-radius: 2.3cqw; }
.scr-bar .chan-dot svg { width: 4.3cqw; height: 4.3cqw; }
.scr-bar .ttl { font-size: 4cqw; font-weight: 650; letter-spacing: -0.01em; display: block; line-height: 1.2; }
.scr-bar .sub { font-size: 3.2cqw; color: var(--t3); display: block; line-height: 1.3; }

.chan-dot {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: #25d366; color: #fff; flex-shrink: 0;
}
.chan-dot svg { width: 13px; height: 13px; }
.dot-accent { background: var(--accent); }
.dot-warn { background: var(--warn); }

/* Firul se poartă ca un chat adevărat: stiva e ancorată de jos, iar
   JS o translatează astfel încât ultimul pas apărut să stea pe linia
   de bază. Pașii următori rămân dedesubt, tăiați — de asta thread-ul
   are overflow ascuns și poziționare. */
/* Firul e ancorat de jos, ca într-o conversație adevărată, deci la
   începutul poveștii jumătatea de sus e goală. Un tapet de chat o face
   să arate ca un ecran, nu ca un panou nescris. */
.thread {
  flex: 1; padding: 3.8cqw; overflow: hidden; position: relative;
  background:
    radial-gradient(130% 70% at 50% 0%, var(--accent-soft) 0%, transparent 62%),
    var(--fill);
}
.thread::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(currentColor .8px, transparent .8px);
  background-size: 5.4cqw 5.4cqw;
  opacity: .055;
}
.stiva {
  position: absolute; z-index: 1;
  left: 3.8cqw; right: 3.8cqw; bottom: 6.6cqw;
  display: flex; flex-direction: column; gap: 2.3cqw;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
/* stările de pornire ale poveștii — doar cât rulează mișcarea */
html.anim .stiva .msg { opacity: 0; }
html.anim .stiva .msg.pornit { opacity: 1; }
html.anim .tool { opacity: 0; transform: translateX(-10px);
  transition: opacity var(--d-ui) ease, transform var(--d-panou) var(--e-iesire-din-repaus); }
html.anim .tool.pornit { opacity: 1; transform: none; }
html.anim .tool:not(.gata) .bifa { display: none; }
html.anim .tool.pornit:not(.gata) .sp {
  display: block; width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  border: .5cqw solid var(--accent-txt); border-right-color: transparent;
  animation: spin .72s linear infinite;
}
html.anim .cal { opacity: 0; will-change: transform, opacity; }
html.anim .ev-nou { opacity: 0; transform: translateX(-14px) scale(.94); box-shadow: none;
  transition: opacity var(--d-panou) ease, transform var(--d-intrare) var(--e-iesire-din-repaus), box-shadow var(--d-intrare) ease; }
html.anim .ev-nou.pornit { opacity: 1; transform: none; box-shadow: 0 3px 20px var(--accent-glow); }
html.anim .cap p { opacity: 0; transform: translateY(16px);
  transition: opacity var(--d-panou) ease, transform var(--d-intrare) var(--e-iesire-din-repaus); }
html.anim .cap p.pornit { opacity: 1; transform: none; }
.msg { max-width: 86%; padding: 2.6cqw 3.9cqw; font-size: 4.05cqw; line-height: 1.45; border-radius: 4.6cqw; }
.msg .tm { display: block; font-family: var(--f-mono); font-size: 2.9cqw; letter-spacing: .04em; margin-top: 1cqw; opacity: .5; }
.msg b { font-weight: 700; }
.msg i { font-style: italic; opacity: .92; }
.m-in { align-self: flex-start; background: var(--bubble-in); border: .5px solid var(--hair); border-bottom-left-radius: 1.3cqw; }
.m-out { align-self: flex-end; background: var(--bubble-out); color: #fff; border-bottom-right-radius: 1.3cqw; box-shadow: 0 2px 12px var(--accent-glow); }

.tool {
  display: inline-flex; align-items: center; gap: 2.2cqw; align-self: flex-start;
  /* --t1, nu --t2: chipsul de unealtă e scris la 9px pe ecranul
     telefonului, iar la mărimea aia gri-ul secundar cădea la 3,6:1.
     Nu e text decorativ — spune ce a căutat agentul. */
  font-family: var(--f-mono); font-size: 3.1cqw; color: var(--t1);
  background: var(--accent-soft); border: .5px solid var(--accent-line);
  border-radius: 2.3cqw; padding: 1.3cqw 2.9cqw;
}
.tool em { font-style: normal; color: var(--accent-txt); font-weight: 700; }
.tool .sp { display: none; }
.tool .bifa { width: 2.9cqw; height: 2.9cqw; flex-shrink: 0; fill: none; stroke: var(--ok-txt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool .bifa path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ios-ora .min { display: inline-grid; overflow: hidden; height: 1.2em; line-height: 1.2em; vertical-align: bottom; }
.ios-ora .min > span { grid-area: 1 / 1; }
.ios-ora .min > span + span { transform: translateY(100%); }
.ios-ora.trecut .min > span:first-child, html:not(.anim) .ios-ora .min > span:first-child { transform: translateY(-100%); }
.ios-ora.trecut .min > span + span, html:not(.anim) .ios-ora .min > span + span { transform: none; }
.fir-programare { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; opacity: 0; }
.fir-programare path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.scanteie {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--accent) 55%, transparent 72%);
  box-shadow: 0 0 22px 6px var(--accent-glow);
}
@keyframes spin { to { transform: rotate(360deg); } }

.cal {
  width: min(430px, 84vw); left: 50%; top: 50%;
  border-radius: var(--rad); overflow: hidden;
  background: var(--sheen), var(--g2);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: .5px solid var(--stroke); box-shadow: var(--sh3d);
}
.cal-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-bottom: .5px solid var(--hair); background: var(--g3);
}
.cal-bar .ttl { font-size: 12.5px; font-weight: 650; display: block; line-height: 1.2; }
.cal-bar .sub { font-size: 10px; color: var(--t3); display: block; }

.slot {
  display: grid; grid-template-columns: 54px 1fr;
  align-items: center; gap: 11px;
  min-height: 50px; padding: 0 15px;
  border-bottom: .5px solid var(--hair);
}
.slot:last-child { border-bottom: none; }
.slot .hr { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--t3); }
.ev { border-radius: 10px; padding: 6px 11px; border-left: 2.5px solid var(--fill2); background: var(--fill); }
.ev .nm { font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em; display: block; line-height: 1.25; }
.ev .dt { font-size: 11px; color: var(--t2); display: block; }
.prin { color: var(--accent-txt); font-weight: 650; }
.free { border-top: 1px dashed var(--hair); height: 1px; }

.ev-nou {
  border-left-color: var(--accent);
  background: linear-gradient(100deg, var(--accent-soft) 0%, var(--fill) 100%);
  box-shadow: 0 3px 20px var(--accent-glow);
}

.cap {
  position: absolute; bottom: 5vh; left: 50%;
  transform: translateX(-50%);
  width: min(620px, 88vw); text-align: center; pointer-events: none;
}
.cap p {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--f-display);
  font-size: clamp(1.08rem, 2.2vw, 1.5rem);
  font-weight: 600; letter-spacing: -0.018em; line-height: 1.34;
  font-variation-settings: "opsz" 48, "SOFT" 40;
}
.cap .sm {
  display: block; font-family: var(--f-body);
  font-size: .84rem; font-weight: 400; color: var(--t2);
  letter-spacing: 0; margin-top: 5px;
}

/* ─── Intrarea eroului ───────────────────────────────────────────
   Pe <html>, „intrare" e pusă în <head> și scoasă de scena-seara.js
   după 1,8 s sau imediat, dacă pagina s-a încărcat derulată. Textul se
   poate citi de la început: titlul apare cuvânt cu cuvânt prin
   aparitii.js, restul intră pe rând. Apoi sfera din siglă se aprinde, iar
   telefonul urcă în coloana din dreapta. */
@keyframes intrareSus { from { opacity: 0; transform: translateY(10px); } }
@keyframes ridicare { from { opacity: 0; translate: 0 40px; transform: perspective(1400px) rotateX(18deg) rotateY(-16deg) scale(.96); } }
@keyframes aprindere {
  0%   { filter: drop-shadow(0 3px 12px var(--accent-glow)) brightness(.55); }
  60%  { filter: drop-shadow(0 0 22px var(--accent-glow)) brightness(1.3); }
  100% { filter: drop-shadow(0 3px 12px var(--accent-glow)) brightness(1); }
}
html.anim.intrare .erou-text .clock        { animation: intrareSus var(--d-panou)   var(--e-iesire-din-repaus) 120ms both; }
html.anim.intrare .erou-text .lead         { animation: intrareSus var(--d-intrare) var(--e-iesire-din-repaus) 450ms both; }
html.anim.intrare .erou-text .canale-erou  { animation: intrareSus var(--d-intrare) var(--e-iesire-din-repaus) 520ms both; }
html.anim.intrare .erou-text .intro-cta    { animation: intrareSus var(--d-intrare) var(--e-iesire-din-repaus) 600ms both; }
html.anim.intrare .erou-text .dovezi       { animation: intrareSus var(--d-intrare) var(--e-iesire-din-repaus) 645ms both; }
html.anim.intrare:not(.cu-luna) .hdr .mark { animation: aprindere  var(--d-panou)   var(--e-lumina)            900ms both; }
html.anim.intrare .scena-erou .rig         { animation: ridicare   var(--d-arc)     var(--e-arc)              1000ms both; }

/* lumina trece o dată peste titlu, după ce s-a limpezit (B2 §5): un
   strat cu același text, transparent, prin care trece o bandă de lumină
   decupată pe litere; există doar cât ține intrarea */
/* turcoazul mărcii, nu alb: pe tema închisă textul e deja alb */
:root { --titlu-lumina: #9ff0ff; }
:root[data-theme="light"] { --titlu-lumina: #30b0c7; }
h1[data-split] { position: relative; }
html.anim.intrare h1[data-split].taiat::after {
  content: attr(aria-label); position: absolute; inset: 0; pointer-events: none;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, transparent 38%, var(--titlu-lumina) 50%, transparent 62%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: titluLumina var(--d-poveste) var(--e-lumina) 1000ms both;
}
html.anim.intrare.cu-luna h1[data-split].taiat::after { animation-delay: calc(var(--t0) + 800ms); }
@keyframes titluLumina { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* bulele cresc din colțul lor, nu din centru */
.m-in  { transform-origin: 0 100%; }
.m-out { transform-origin: 100% 100%; }
html.anim .stiva .msg { transform: scale(.92); transition: opacity var(--d-ui) var(--e-iesire-din-repaus), transform var(--d-arc) var(--e-arc); }
html.anim .stiva .msg.pornit { transform: none; }

/* bifa uneltei se desenează când unealta termină */
@keyframes deseneaza { from { stroke-dashoffset: 1; } }
html.anim .tool.gata .bifa path { animation: deseneaza var(--d-ui) var(--e-iesire-din-repaus) both; }

/* ceasul: cifra minutelor se rotește în sus */
.ios-ora .min > span { transition: transform var(--d-ui) var(--e-mutare); }

.fir-programare.activ { opacity: 1; }

/* ─── 9. Cum funcționează ────────────────────────────────────────
   Plăci fixe și un fir. --p (0…1, înregistrat ca număr cu @property
   la începutul fișierului) duce lumina pe fir și aprinde plăcile;
   îl animă derularea (Taskul 14). Fără animație, --p rămâne 1. */
.pasi { position: relative; --p: 1; }
.pasi-lista {
  list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.pas { border-radius: 17px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.pas .no { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--accent-txt); font-weight: 700; }
.pas h3 { font-size: .97rem; }
.pas p { font-size: 13px; line-height: 1.5; color: var(--t2); }
.pas .ic {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-txt); border: .5px solid var(--accent-line);
}
.pas .ic svg { width: 15px; height: 15px; }
.fir {
  position: absolute; left: 12.5%; right: 12.5%; top: -18px; height: 1.5px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  container-type: inline-size; pointer-events: none;
}
.fir-lumina {
  position: absolute; left: -6px; top: -6px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--accent) 55%, transparent 72%);
  box-shadow: 0 0 22px 6px var(--accent-glow);
  transform: translateX(calc(var(--p) * 100cqw));
}
.pasi-nota { margin: 22px auto 0; max-width: 56ch; }

/* Cu mișcare: --p pornește de la 0 și îl animă derularea, între 30% și
   70% din traversarea ecranului. Unde nu există suport, fir.js scrie
   același --p din aceeași fereastră. Fiecare placă se aprinde când lumina
   ajunge în dreptul ei: pragurile .02/.33/.66/.98 sunt centrele celor
   patru coloane pe fir. */
html.anim .pasi { --p: 0; }
@keyframes firParcurs { from { --p: 0; } to { --p: 1; } }
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  html.anim .pasi { animation: firParcurs linear both; animation-timeline: view(); animation-range: cover 30% cover 70%; }
}
.pas::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--accent-line), 0 16px 50px var(--accent-glow);
  opacity: var(--aprins, 1);
}
.pasi-lista > .pas:nth-child(1) { --aprins: clamp(0, (var(--p) - .02) * 12, 1); }
.pasi-lista > .pas:nth-child(2) { --aprins: clamp(0, (var(--p) - .33) * 12, 1); }
.pasi-lista > .pas:nth-child(3) { --aprins: clamp(0, (var(--p) - .66) * 12, 1); }
.pasi-lista > .pas:nth-child(4) { --aprins: clamp(0, (var(--p) - .98) * 12, 1); }

/* ─── 10. Grile și carduri ───────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.aliniat { gap: 54px; align-items: center; }
.sus-aliniat { gap: 54px; align-items: start; }
/* titlul însoțește lista lungă din dreapta, în loc să lase un gol sub el */
@media (min-width: 901px) { .sus-aliniat > .sec-head { position: sticky; top: 104px; } }
.lista-canale, .lista-sig { gap: 12px; }

.tile {
  border-radius: var(--rad); padding: 23px;
  display: flex; flex-direction: column; gap: 9px;
  transition: box-shadow var(--d-hover) var(--e-hover);
}
.tile:hover { box-shadow: var(--shHi); }
.tile.strimt { padding: 19px; }
.tile p { font-size: 14px; line-height: 1.55; color: var(--t2); }
.tile .ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-txt);
  border: .5px solid var(--accent-line);
  margin-bottom: 3px;
}
.tile .ico svg { width: 17px; height: 17px; }
/* Gesturile pictogramelor (B2 §4): fiecare desen își are mișcarea lui,
   jucată o dată la intrarea cursorului (lumina.js pune .ico-joaca și o
   scoate la final). Gestul se termină singur — tăiat la jumătate ar arăta
   stricat — și durează sub 600 ms. */
.ico svg, .bx svg { transform-box: fill-box; transform-origin: 50% 50%; }
.ico-joaca :is(.ico, .bx) svg { animation: icoPuls var(--d-arc) var(--e-arc-viu); }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-cal"])   { animation: icoFoaie 520ms var(--e-mutare); }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-clock"]) { animation: icoTura 560ms var(--e-mutare); }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-swap"])  { animation: icoSchimb 480ms var(--e-mutare); }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-x"])     { animation: icoTura 420ms var(--e-mutare); }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-list"])  { animation: icoLista 460ms var(--e-arc-viu); }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-tag"])   { animation: icoLeagan 560ms var(--e-mutare); transform-origin: 20% 20%; }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-users"]),
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-user"])  { animation: icoSalt 460ms var(--e-arc-viu); }
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-tel"]),
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-wa"]),
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-mes"]),
.ico-joaca :is(.ico, .bx) svg:has(use[href="#i-ig"])    { animation: icoVibreaza 420ms linear; }
@keyframes icoPuls     { 40% { transform: scale(1.16); } }
@keyframes icoFoaie    { 50% { transform: perspective(60px) rotateX(-180deg); } 100% { transform: perspective(60px) rotateX(-360deg); } }
@keyframes icoTura     { to { transform: rotate(360deg); } }
@keyframes icoSchimb   { 35% { transform: translateX(2.5px); } 70% { transform: translateX(-1.5px); } }
@keyframes icoLista    { 40% { transform: scaleY(.82); } }
@keyframes icoLeagan   { 25% { transform: rotate(-14deg); } 55% { transform: rotate(8deg); } 80% { transform: rotate(-3deg); } }
@keyframes icoSalt     { 40% { transform: translateY(-3px); } }
@keyframes icoVibreaza { 15%, 45%, 75% { transform: rotate(-11deg); } 30%, 60%, 90% { transform: rotate(11deg); } }

/* unda la atingere (ecrane tactile): pornește din deget, se stinge */
.unda { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.unda > i {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--accent-glow); opacity: 0;
}

.chan {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: 14px;
  transition: transform var(--d-hover) var(--e-hover), box-shadow var(--d-hover) var(--e-hover);
}
.chan:hover { transform: translateX(3px); }
.chan .bx {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.chan .bx svg { width: 19px; height: 19px; }
.bx-wa { background: #25d366; }
.bx-mes { background: linear-gradient(155deg, #00b2ff, #006aff); }
.bx-ig { background: linear-gradient(155deg, #f9ce34, #ee2a7b 48%, #6228d7); }
.bx-om { background: var(--fill2); color: var(--t2); }
.chan .nm { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; display: block; line-height: 1.25; }
.chan .rl { font-size: 12.5px; color: var(--t2); display: block; }

.feats { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; }
.feat { display: flex; gap: 11px; align-items: flex-start; font-size: 14.2px; line-height: 1.5; color: var(--t2); }
.feat .ck { color: var(--accent-txt); flex-shrink: 0; margin-top: 3px; }
.feat .ck svg { width: 14px; height: 14px; display: block; }
.feat b { color: var(--t1); font-weight: 650; }

.limits {
  border-radius: 26px; padding: 48px;
  background: var(--panel); border: .5px solid var(--hair); box-shadow: var(--shHi);
}
.limit { display: flex; gap: 15px; padding: 19px 0; border-bottom: .5px solid var(--hair); }
.limit:last-child { border-bottom: none; }
.limit .x {
  width: 25px; height: 25px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--fill); color: var(--t3);
  flex-shrink: 0; margin-top: 1px;
}
.limit .x svg { width: 12px; height: 12px; }
.limit .tx h3 { margin-bottom: 4px; }
.limit .tx p { font-size: 14px; color: var(--t2); line-height: 1.55; }
.limite-grila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
/* ultimul rând nu are linie dedesubt: o pereche când numărul e par,
   un singur element (pe toată lățimea) când e impar */
.limite-grila .limit:last-child, .limite-grila .limit:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.limite-grila .limit:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* escaladări */
.card-esc { border-radius: var(--rad); overflow: hidden; }
.esc-rand { padding: 14px 17px; border-bottom: .5px solid var(--hair); }
.esc-rand.fara-linie { border-bottom: none; }
.esc-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esc-nm { font-size: 13.5px; font-weight: 650; }
.esc-ora { margin-left: auto; font-size: 11px; color: var(--t3); }
.esc-tx { font-size: 12.8px; color: var(--t2); margin-top: 4px; }

/* tablou de bord */
.sub-mock { margin-bottom: 11px; }
.sub-nota { margin-bottom: 30px; }
.mock { border-radius: var(--rad); overflow: hidden; }
.mock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 17px; border-bottom: .5px solid var(--hair); background: var(--g3);
}
.mock-bar .ttl { font-size: 13px; font-weight: 650; }
.mock-bar .ttl.bl { display: block; line-height: 1.2; }
.mock-bar .sub { font-size: 11.5px; color: var(--t3); }
.la-dreapta { margin-left: auto; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: .5px solid var(--hair); }
.kpi { padding: 17px 18px; border-right: .5px solid var(--hair); }
.kpi:last-child { border-right: none; }
.kpi .lb { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); font-weight: 650; display: block; }
.kpi .vl {
  font-family: var(--f-display); font-size: 30px; font-weight: 640;
  letter-spacing: -0.028em; line-height: 1.2; margin-top: 3px;
  font-variant-numeric: tabular-nums; display: block;
  font-variation-settings: "opsz" 72, "SOFT" 30;
}
.kpi .vl.accent { color: var(--accent-txt); }
.kpi .dl { font-size: 11.5px; color: var(--t2); display: block; }

.chart { padding: 20px 18px 16px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 112px; }
/* Fără spațiu între segmente: cu el, griul și cyanul citeau ca două
   bare separate care se întâmplă să stea una peste alta. Lipite, coloana
   e un întreg — totalul programărilor din ziua aia — din care partea
   cyan e cât a făcut Lumen. Asta e afirmația graficului. */
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar .fillbar {
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, var(--accent-lo), var(--accent-hi));
  transform-origin: bottom; transform: scaleY(0);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.bar .restbar {
  border-radius: 5px 5px 0 0; background: var(--fill2);
  transform-origin: bottom; transform: scaleY(0);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.mock.vazut .fillbar, .mock.vazut .restbar { transform: scaleY(1); }
.bar .fillbar, .bar .restbar { transition-delay: calc(var(--i, 0) * var(--decalaj)); }
html:not(.js) .bar .fillbar, html:not(.js) .bar .restbar { transform: scaleY(1); }
.bar .lb { font-family: var(--f-mono); font-size: 10px; color: var(--t3); text-align: center; margin-top: 6px; }
.legend { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; }
.lg-ai { background: linear-gradient(180deg, var(--accent-lo), var(--accent-hi)); }
.lg-om { background: var(--fill2); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 650;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.tag-ai { background: var(--accent-soft); color: var(--accent-txt); border: .5px solid var(--accent-line); }
.tag-ok { background: var(--ok-bg); color: var(--ok-txt); }
.tag-wr { background: var(--warn-bg); color: var(--warn-txt); }

/* ─── 11. Preț și contact ────────────────────────────────────── */
.price {
  border-radius: 28px; padding: 48px;
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 48px; align-items: center;
}
.price-st { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* mai mic decât un h2 de secțiune: aici stă într-o coloană de card, nu
   pe toată lățimea paginii */
.price-st h2 { font-size: clamp(1.7rem, 2.7vw, 2.35rem); max-width: 15ch; }
.price-nota { font-size: 15px; line-height: 1.6; color: var(--t2); max-width: 46ch; }
.price-cta { align-self: flex-start; margin-top: 8px; }

/* auto-fit, ca să arate corect și cu două carduri, și cu trei */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ccard {
  border-radius: var(--rad); padding: 25px;
  display: flex; flex-direction: column; gap: 7px;
  transition: transform var(--d-hover) var(--e-hover), box-shadow var(--d-hover) var(--e-hover);
}
.ccard:hover { box-shadow: var(--shHi); opacity: 1; }
.ccard .lb { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); font-weight: 650; }
.ccard .vl {
  font-family: var(--f-display); font-size: 1.2rem; font-weight: 640;
  letter-spacing: -0.018em; color: var(--t1);
  font-variation-settings: "opsz" 30, "SOFT" 40;
}
.ccard:hover .vl { color: var(--accent-txt); }
.ccard .nt { font-size: 12.5px; color: var(--t2); }

.foot { padding: 42px 0 58px; border-top: .5px solid var(--hair); margin-top: 34px; }
.foot-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-lk { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
/* padding vertical, nu doar text: fără el legătura are exact înălțimea
   rândului — 21px — iar WCAG 2.5.8 cere 24 chiar și pe indicator fin.
   Pe telefon urcă la 44 din regula de la 760. */
.foot-lk a { font-size: 13px; color: var(--t2); padding-block: 3px; }
.foot-lk a:hover { color: var(--accent-txt); opacity: 1; }
.foot-cr { margin-top: 20px; }

/* ─── 12. Adaptare ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .nav { display: none; }
  .doar-mic { display: grid; }
  .nav-mic { display: block; }
  /* .g3 NU trece aici pe două coloane: nouă carduri în două coloane dau
     patru rânduri pline și unul singur la final, iar golul de lângă el e
     ultimul lucru pe care-l vezi din secțiune. Rămân trei coloane până
     la 900, unde devin bandă. */
  .price { grid-template-columns: 1fr; gap: 34px; padding: 34px; }
  .aliniat, .sus-aliniat { gap: 38px; }
}

/* ── Pragul îngust: 900, nu 760 ──────────────────────────────────
   Conducta trecea pe bandă la 900, dar restul aspectului abia la 760.
   Între ele, la 768, pagina era jumătate telefon și jumătate desktop:
   „Siguranță" și „Predarea către om" stăteau pe două coloane de 340px
   — titlu de 34px și paragrafe de cinci cuvinte pe rând — iar grilele
   de carduri lăsau câte un card orfan lângă un gol de aceeași mărime.
   Un singur prag pentru tot ce ține de așezare; la 760 rămâne doar ce
   ține de telefonul propriu-zis: mărimea textului, lungimea scenelor,
   țintele de atins, straturile care costă bateria. */
@media (max-width: 900px) {
  /* 60, nu 66: momentele din B2 adaugă conținut pe telefon, iar Acasă trebuie să rămână ≤ 10 ecrane */
  .sec { padding-block: 60px; }


  .g2, .contact { grid-template-columns: 1fr; }
  .limits { padding: 28px; border-radius: 20px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2) { border-right: none; }
  .kpi:nth-child(1), .kpi:nth-child(2) { border-bottom: .5px solid var(--hair); }

  /* Grilele de carduri devin benzi cu prindere, nu teancuri. Nouă
     carduri unul sub altul înseamnă nouă ecrane de derulat și senzația
     că pagina n-are structură; pe orizontală rămân un singur ecran, iar
     cardul următor se vede pe jumătate, ceea ce spune singur că se
     poate glisa. */
  .g3, .lista-sig {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 290px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    /* ies din coloană ca banda să atingă marginile ecranului, dar
       primul card rămâne aliniat cu textul de deasupra */
    margin-inline: -24px;
    padding-inline: 24px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .g3::-webkit-scrollbar, .lista-sig::-webkit-scrollbar { display: none; }
  .g3 > *, .lista-sig > * { scroll-snap-align: start; }
  .tile { height: 100%; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  /* Povestea are aceleași bătăi, dar pe telefon nu se derulează cu
     rotița. Nouă ecrane de deget pentru două scene sunt prea multe:
     tăiate aproape la jumătate, ritmul rămâne, oboseala nu. */
  #seara { height: 220vh !important; }
  /* Ținte de atins: 44px, măsura pe care o cere Apple pentru deget.
     Erau 42 la butoane și 39 la subsol — destul cât să nu sară în ochi,
     puțin cât să rateze. Cutiile cresc, desenul dinăuntru nu. */
  .icon-btn { width: 44px; height: 44px; }
  .hdr-act .btn { padding: 12px 14px; }
  .foot-lk { gap: 4px 20px; }
  .foot-lk a { padding: 12px 2px; }
  .btn { min-height: 44px; }
  .cap { bottom: 3vh; }
  .grain { display: none; }   /* pe mobil costă mai mult decât aduce */
}
@media (max-width: 620px) {
  /* Antetul nu are loc pentru patru lucruri. Rămân marca, acțiunea
     principală și meniul; comutatorul de temă coboară în meniu, iar
     eticheta butonului se scurtează. */
  .brand-sub { display: none; }
  .brand-nm { font-size: 17.5px; }
  .mark { width: 36px; height: 36px; }
  /* marca rămâne desenată la 36px, dar e o legătură către începutul
     paginii: cutia ei urcă la 44 din padding, fără să se vadă */
  .brand { padding-block: 4px; }
  .fara-mic { display: none; }
  .nav-mic-tema { display: grid; grid-template-columns: 1fr auto; }
  .doar-lat { display: none; }
  .doar-ingust { display: inline; }
  .hdr-act { gap: 7px; }
  /* rămân 44px: regula asta e mai jos decât cea de la 760 și ar
     anula-o dacă ar scrie altceva */
  .hdr-act .btn { padding: 12px 14px; font-size: 13.5px; }
  .icon-btn { width: 44px; height: 44px; }
  .dovezi { gap: 7px 18px; }
  .dovezi li { font-size: 12.5px; }

  /* Antetul tabloului de bord nu are loc pentru trei lucruri pe un rând
     de 345px: „Tablou de / bord" se rupea în două, „· august / 2026" la
     fel, cu punctul rămas orfan pe primul rând, iar insigna verde
     stătea centrată vertical lângă două elemente aliniate sus. Titlul
     și luna rămân împreună, insigna coboară pe rândul ei. */
  .mock-bar { flex-wrap: wrap; align-items: baseline; row-gap: 7px; }
  .mock-bar .ttl, .mock-bar .sub { white-space: nowrap; }
  /* Ruptura o face un element gol de lățime plină, nu insigna însăși:
     cu „flex-basis: 100%" pe insignă, pastila se întindea cât bara. */
  .mock-bar::before { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .mock-bar .la-dreapta { margin-left: 0; order: 3; }
}

/* Scena I e momentul care vinde pagina — conversația adevărată. Pe un
   ecran de 1920×1080 telefonul avea 300px într-un cadru de 1080×620,
   adică un obiect mic în mult negru. Plafoanele urcă doar când ecranul
   chiar are loc; decalajele din app.js rămân valabile, fiindcă distanța
   dintre telefon și agendă crește mai încet decât lățimile lor. */
@media (min-width: 1560px) and (min-height: 940px) {
  .stage { width: min(1240px, 92vw); height: min(700px, 76vh); }
  .phone { width: min(340px, 68vw, 33vh); }
  .cal { width: min(480px, 84vw); }
}

/* ─── 13. Mișcare redusă ──────────────────────────────────────────
   Altă coregrafie, nu oprirea timpului. Nicio deplasare, nicio scalare,
   nicio paralaxă; aparițiile devin estompări scurte. Scenele sunt deja
   statice (pe <html> lipsește „anim" — secțiunea 16), aurora nu
   pornește (atmosfera.js), tema și paginile se schimbă pe loc (baza.js,
   secțiunea 17). Fără regula globală „animation-duration: .001ms”: face
   unele animații mai bruște, nu mai blânde. */
@media (prefers-reduced-motion: reduce) {
  html.js .apare { transform: none; transition: opacity var(--d-ui) linear; transition-delay: 0s; }
  html.js [data-split]:not(.vazut) .wr > i { transform: none; font-variation-settings: inherit; }
  [data-split] .wr > i { transition: opacity var(--d-ui) linear; transition-delay: 0s; }
  .btn:hover, .icon-btn:hover, .card-ce:hover, .chan:hover { transform: none; }
  .btn:active, .icon-btn:active, .card-ce:active, .ccard:active, .mai-departe a:active { transform: none; }
  .btn-pri::before { display: none; }
  .grain { display: none; }
  .pulse::after { animation: none; display: none; }
  .mock .fillbar, .mock .restbar { transform: scaleY(1); transition: none; }
  .faq summary::after { transition: none; }
  .nav-pastila.gata { transition: opacity var(--d-hover) linear; }
  .nav-mic, .hdr.meniu .nav-mic { transition: none; }
  .nav-mic-in > *, .hdr.meniu .nav-mic-in > * { transition: none; transform: none; opacity: 1; }
  .hdr { transition: background var(--d-ui) linear, border-color var(--d-ui) linear; }
  .hdr.ascuns { transform: none; }
}

/* ─── 14. Pagini de document ─────────────────────────────────────
   Confidențialitate, termeni, ștergerea datelor. Sunt pagini de
   citit, nu de privit: fără scene, fără WebGL, fără app.js.

   De aici două reguli care nu se văd din CSS, dar se plătesc scump
   dacă se uită:
   • Starea ascunsă a aparițiilor (.apare) există doar sub html.js, pe
     care paginile astea nu-l pun — n-au scripturi. Un .apare copiat
     aici rămâne deci vizibil; o stare ascunsă scrisă simplu, fără
     html.js, ar lăsa textul invizibil pentru recenzorul Meta.
   • Antetul primește „lipit" direct în HTML. Clasa e pusă din JS la
     derulare pe pagina principală; aici n-are cine s-o pună, iar un
     antet fix și transparent lasă textul să treacă pe sub el.
   ──────────────────────────────────────────────────────────────── */

/* Antetul devine opac pe paginile de document. Pe pagina principală e
   sticlă, și acolo e efectul dorit: secțiunile au aer, iar ce trece pe
   sub el e decor. Într-un text juridic curge proză deasă, iar sonda de
   contrast a prins-o exact în starea proastă — un rând de 16px ajuns la
   y=13, sub sticlă, măsura 3,30:1 pe un fundal de rgb(44,99,119). Opac,
   textul trece pe dedesubt ascuns, nu mânjit. */
.pagina-doc .hdr.lipit {
  /* același tipar ca la antetul cu meniul deschis: panoul peste culoarea
     de bază a peretelui = complet opac, în ambele teme, fără culoare nouă.
     „--panel" singur lasă 3% să treacă, iar la captură se vedea proza
     fantomă pe sub siglă. */
  background-color: var(--au-b1);
  background-image: linear-gradient(var(--panel), var(--panel));
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

.doc { max-width: 74ch; margin: 0 auto; padding-block: 128px 8px; }

.doc-cap { margin-bottom: 40px; }
.doc-cap h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.12; margin: 14px 0 0; }
.doc-cap .lead { margin-top: 14px; }

/* Data actualizării e informație juridică, nu decor: stă sus, lângă
   titlu, fiindcă de ea depinde ce versiune a angajamentului citești. */
.doc-data {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 6px 12px;
  border: .5px solid var(--hair); border-radius: 999px;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--t2);
}

/* Cuprinsul e singurul mod în care cineva găsește repede secțiunea
   care îl interesează într-un text lung. Numerele vin din același
   contor ca titlurile, deci nu se pot desincroniza. */
.doc-cuprins { margin: 0 0 48px; padding: 22px 24px; border-radius: var(--rad); }
.doc-cuprins h2 {
  font-family: var(--f-mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--t3);
  margin: 0 0 12px;
}
.doc-cuprins h2::before { content: none; }        /* nu intră în numerotare */
.doc-cuprins ol { counter-reset: cup; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-cuprins li { counter-increment: cup; margin: 0; padding: 0; }
.doc-cuprins li::before { content: none; }
/* Indentul agățat ține rândul al doilea aliniat sub text, nu sub număr:
   „Transferuri în afara Spațiului Economic European" se rupe pe telefon,
   iar fără el continuarea pornea de la marginea numărului. */
.doc-cuprins a {
  display: block; padding-block: 5px; font-size: .92rem;
  padding-left: 2.1em; text-indent: -2.1em;
  color: var(--t2); text-decoration: none;
}
.doc-cuprins a::before {
  content: counter(cup) "."; display: inline-block;
  width: 2.1em; text-indent: 0;
  color: var(--t3); font-family: var(--f-mono); font-size: .82em;
}
.doc-cuprins a:hover { color: var(--t1); }

/* Numerotarea automată a secțiunilor: un text juridic se citează pe
   numere („conform secțiunii 7"), iar numerele scrise de mână se
   desincronizează la prima secțiune inserată la mijloc. */
.doc-corp { counter-reset: sec; }
.doc-corp h2 {
  counter-increment: sec;
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.42rem);
  line-height: 1.28; margin: 52px 0 14px;
  scroll-margin-top: 96px;
}
.doc-corp h2::before {
  content: counter(sec) ". ";
  color: var(--accent-txt); font-family: var(--f-mono); font-size: .82em;
}
.doc-corp h3 {
  font-family: var(--f-body); font-weight: 650;
  font-size: 1.02rem; line-height: 1.4; margin: 30px 0 8px;
}

/* Proza juridică se citește integral, nu se scanează: textul de bază
   stă pe --t1, nu pe --t2. Gri-ul secundar e pentru note, nu pentru
   rânduri pe care cineva chiar trebuie să le înțeleagă. */
.doc-corp p, .doc-corp li { color: var(--t1); }
.doc-corp p { margin: 0 0 14px; }
.doc-corp ul, .doc-corp ol { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.doc-corp li { position: relative; padding-left: 22px; }
.doc-corp ul > li::before {
  content: ""; position: absolute; left: 4px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.doc-corp ol { counter-reset: pct; }
.doc-corp ol > li { counter-increment: pct; }
.doc-corp ol > li::before {
  content: counter(pct) ")"; position: absolute; left: 0; top: 0;
  color: var(--t3); font-family: var(--f-mono); font-size: .8em;
}
.doc-corp a { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 3px; }
.doc-corp strong { font-weight: 650; }

/* Caseta de esențial: ce trebuie înțeles chiar dacă nimeni nu citește
   secțiunea până la capăt. */
.doc-esential { padding: 18px 20px; border-radius: 14px; border-left: 2px solid var(--accent); margin: 0 0 20px; }
.doc-esential p:last-child { margin-bottom: 0; }

/* Tabelul de subîmputerniciți depășește lățimea coloanei pe telefon,
   deci derulează în propriul recipient — pagina nu se lățește. */
.doc-tabel { overflow-x: auto; margin: 0 0 20px; border-radius: 14px; border: .5px solid var(--hair); }
.doc-tabel table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 480px; }
.doc-tabel th, .doc-tabel td { text-align: left; padding: 11px 14px; border-bottom: .5px solid var(--hair); vertical-align: top; }
.doc-tabel th { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); font-weight: 650; }
.doc-tabel tr:last-child td { border-bottom: 0; }

/* Blocul de identificare a firmei, în subsol, pe toate paginile. */
.foot-jur { margin-top: 18px; display: grid; gap: 4px; }
.foot-jur .fine { margin: 0; }
/* --t2, nu --t3: peste aurora luminoasă, punctul cobora la 3,2:1 */
.foot-jur .sep { color: var(--t2); padding: 0 6px; }

@media (max-width: 760px) {
  .doc { padding-block: 104px 4px; }
  .doc-corp h2 { margin-top: 40px; }
  .doc-cuprins { padding: 18px 18px; }
  /* Pe deget, nu pe maus. 10px dădea 43,99 — afișat „44", respins de
     prag, fiindcă înălțimea de rând iese fracționară. 11 nu e cochetărie. */
  .doc-cuprins a { padding-block: 11px; }
}

/* ─── 15. Pagini de detaliu și componente comune ────────────────── */
[id] { scroll-margin-top: 84px; }
.sec-head.centrat { align-items: center; text-align: center; margin-inline: auto; }
.centrat { text-align: center; }
.erou-pagina { padding-block: 132px 24px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.erou-pagina h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); max-width: 20ch; }
.erou-pagina .lead { max-width: 62ch; }
.pagina-detaliu .sec { padding-block: 72px; }
.sec-scurt { padding-block: 24px 72px; }

.card-ce { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--rad); color: var(--t1);
  transition: box-shadow var(--d-hover) var(--e-hover), transform var(--d-hover) var(--e-hover); }
.card-ce:hover { opacity: 1; box-shadow: var(--shHi); transform: translateY(-2px); }
.card-ce .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-txt); border: .5px solid var(--accent-line); }
.card-ce .ico svg { width: 18px; height: 18px; }
.card-ce h3 { font-size: 1.35rem; }
.card-ce p { font-size: 14.5px; color: var(--t2); line-height: 1.55; }
.card-ce .mai { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 650; color: var(--accent-txt); }
.loc-clip:empty { display: none; }

.rand-sig { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rand-sig li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--t1); }
.rand-sig svg { width: 16px; height: 16px; color: var(--accent-txt); flex-shrink: 0; margin-top: 4px; }

.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border-radius: 16px; padding: 0 20px; background: var(--sheen), var(--g1); border: .5px solid var(--stroke); }
.faq summary {
  cursor: pointer; list-style: none; position: relative; padding: 18px 30px 18px 0;
  font-family: var(--f-display); font-weight: 640; font-size: 1.04rem; line-height: 1.35;
  font-variation-settings: "opsz" 20, "SOFT" 46;
}
.faq summary::-webkit-details-marker { display: none; }
/* răspunsul la hover: întrebarea și săgeata trec pe culoarea accentului */
.faq summary { transition: color var(--d-hover) var(--e-hover); }
.faq summary:hover { color: var(--accent-txt); }
.faq summary:hover::after { border-color: var(--accent-txt); }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px;
  border-right: 1.6px solid var(--t2); border-bottom: 1.6px solid var(--t2);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--d-arc-viu) var(--e-arc-viu), border-color var(--d-hover) var(--e-hover);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .raspuns { padding: 0 0 18px; color: var(--t2); font-size: 14.5px; line-height: 1.6; max-width: 68ch; }
/* Deschiderea: înălțimea pe arc, unde există interpolate-size
   (Chrome 129+); răspunsul urcă 8 px și se aprinde. Închiderea e mai
   scurtă decât deschiderea. Fără interpolate-size, răspunsul doar urcă. */
.faq .raspuns { transition: opacity var(--d-panou) var(--e-iesire-din-repaus), transform var(--d-panou) var(--e-iesire-din-repaus); }
@starting-style { .faq details[open] .raspuns { opacity: 0; transform: translateY(8px); } }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0; overflow: clip;
    transition: height var(--d-ui) var(--e-mutare), content-visibility var(--d-ui) allow-discrete;
  }
  .faq details[open]::details-content {
    height: auto;
    transition: height var(--d-arc) var(--e-arc), content-visibility var(--d-arc) allow-discrete;
  }
}
.faq-grup + .faq-grup { margin-top: 44px; }
.faq-grup > h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 14px; }
.contact-mai { margin-top: 20px; font-size: 14px; font-weight: 600; }

.banda-demo { padding: 34px; border-radius: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.banda-demo h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 24ch; }
.mai-departe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mai-departe a { padding: 22px 24px; border-radius: var(--rad); color: var(--t1); display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow var(--d-hover) var(--e-hover); }
.mai-departe a:hover { opacity: 1; box-shadow: var(--shHi); }
.mai-departe .lb { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-txt); }
.mai-departe .ttl { font-family: var(--f-display); font-size: 1.15rem; font-weight: 640; }

.roluri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pasi-scurti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pasi-scurti.trei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pasi-scurti li { border-radius: 17px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.pasi-scurti .no { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--accent-txt); font-weight: 700; }
.pasi-scurti h3 { font-size: 1rem; }
.pasi-scurti p { font-size: 13.5px; line-height: 1.55; color: var(--t2); }
.exemplu-mesaj { border-radius: var(--rad); padding: 22px; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.bula { align-self: flex-end; max-width: 92%; padding: 11px 15px; border-radius: 18px; border-bottom-right-radius: 5px;
  background: var(--bubble-out); color: #fff; font-size: 14.5px; line-height: 1.45; box-shadow: 0 2px 12px var(--accent-glow); }
.foot-lk-jur { margin-left: 0; margin-bottom: 6px; }

@media (max-width: 900px) {
  .roluri, .mai-departe, .pasi-scurti, .pasi-scurti.trei, .limite-grila { grid-template-columns: 1fr; }
  .limite-grila .limit:nth-last-child(2):nth-child(odd) { border-bottom: .5px solid var(--hair); }
  .pasi-lista { grid-template-columns: 1fr; }
  .fir { left: -13px; right: auto; top: 24px; bottom: 24px; width: 1.5px; height: auto;
    background: linear-gradient(180deg, transparent, var(--accent-line), transparent); container-type: size; }
  .fir-lumina { left: -6px; top: -6px; transform: translateY(calc(var(--p) * 100cqh)); }
  .pas { padding-left: 64px; }
  .pas .ic { position: absolute; left: 18px; top: 18px; }
  .banda-demo { padding: 26px; }
  .erou-pagina { padding-block: 108px 16px; }
  .pagina-detaliu .sec { padding-block: 52px; }
  .erou-text { top: 92px; transform: none; gap: 16px; }
  .erou-text > *, .erou-text h1 { max-width: none; }
}

.card-ce:active, .ccard:active, .mai-departe a:active { transform: scale(.985); transition-duration: var(--d-apasare); }
/* Cursorul e o sursă de lumină: pe cardurile de sticlă apare o reflexie
   acolo unde e el (lumina.js scrie --mx/--my). Înlocuiește cursorul
   propriu și înclinarea 3D; cursorul sistemului rămâne neatins. */
.reflexie { position: relative; isolation: isolate; }
.reflexie::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--reflexie), transparent 62%);
  opacity: 0; transition: opacity var(--d-hover) var(--e-hover);
}
.reflexie.lumina::after { opacity: 1; }
@media (hover: none) { .reflexie::after { display: none; } }
.nav-pastila.gata { transition: clip-path var(--d-arc-viu) var(--e-arc-viu), opacity var(--d-hover) var(--e-hover); }
.btn-pri { position: relative; overflow: hidden; }
.btn-pri::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover: hover) { .btn-pri:hover::before { transform: translateX(120%); transition: transform var(--d-panou) var(--e-mutare); } }

/* ─── 16. Scenele fără animație ─────────────────────────────────
   Fără JavaScript sau cu mișcare redusă (pe <html> lipsește „anim"),
   povestea se desface în starea ei finală, una sub alta. Înălțimea
   scenei e pusă inline (260vh), deci se readuce la auto — altfel ar
   rămâne ecrane goale. */
html:not(.anim) .scena { height: auto !important; }
html:not(.anim) .pin { position: relative; height: auto; overflow: visible; display: block; padding-bottom: 40px; }
html:not(.anim) .erou-text { position: relative; top: auto; transform: none; padding-block: 128px 40px; }
html:not(.anim) .erou-text > *, html:not(.anim) .erou-text h1 { max-width: 640px; }
html:not(.anim) .rig { perspective: none; height: auto; display: block; }
html:not(.anim) .stage { width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px; transform: none !important; }
html:not(.anim) .stage > * { position: relative; left: auto; top: auto; transform: none !important; }
html:not(.anim) .thread { overflow: visible; }
html:not(.anim) .stiva { position: static; transform: none !important; }
html:not(.anim) .phone { width: min(320px, 86vw); height: auto; aspect-ratio: auto; border-radius: 26px; padding: 2.6cqw; }
html:not(.anim) .phone::before, html:not(.anim) .di, html:not(.anim) .ph-buton,
html:not(.anim) .ios-stare, html:not(.anim) .ios-home { display: none; }
html:not(.anim) .screen { position: static; inset: auto; border-radius: 20px; }
html:not(.anim) .cap { position: relative; bottom: auto; left: auto; transform: none; margin: 28px auto 0; }
html:not(.anim) .cap p { position: relative; }
html:not(.anim) .cap p:not(:last-child) { display: none; }
html:not(.anim) .fir-programare, html:not(.anim) .scanteie { display: none; }

/* ─── 17. Tranziții între pagini și temă ──────────────────────────
   Antetul stă pe loc, conținutul vechi se stinge în 160 ms, cel nou
   intră în 240 ms. Unde nu e suport, pagina se schimbă normal. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hdr { view-transition-name: antet; }
  .titlu-pagina { view-transition-name: titlu-pagina; }
  ::view-transition-old(root) { animation: vtIese 160ms var(--e-plecare) both; }
  ::view-transition-new(root) { animation: vtIntra 240ms var(--e-iesire-din-repaus) both; }
  ::view-transition-group(titlu-pagina) { animation-duration: var(--d-panou); animation-timing-function: var(--e-mutare); }
}
@keyframes vtIese { to { opacity: 0; } }
@keyframes vtIntra { from { opacity: 0; transform: translateY(9px); } }
.vt-tema::view-transition-old(root), .vt-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ─── 18. Intrarea: luna devine sigla (B2 §5.0) ─────────────────
   html.luna — vălul e activ (îl scoate luna.js la aterizare);
   html.cu-luna — încărcarea asta a pornit cu luna: restul eroului
   intră odată cu zborul (--t0), nu sub văl. Titlul rămâne pe timpii
   lui: e desenat sub văl din primul cadru, deci LCP nu se mută.
   Plasa: vălul și ascunderea antetului sunt animații CSS de 2,6 s —
   dacă luna.js nu rulează, la 2,6 s pagina e descoperită oricum. */
:root {
  --t0: 1000ms;               /* când pleacă luna și pornește eroul */
  --luna-aprindere: 700ms;
  --luna-zbor: 800ms;
  --luna-d: min(92vmin, 880px);
  --luna-noapte: rgba(6, 8, 13, .95);
}
:root[data-theme="light"] { --luna-noapte: rgba(226, 233, 244, .95); }
@media (max-width: 900px) {
  :root { --t0: 800ms; --luna-aprindere: 500ms; --luna-zbor: 600ms; --luna-d: 96vw; }
}

.luna-scena { display: none; }
html.luna .luna-scena {
  display: block; position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden;
  animation: lunaPlasa 2.6s linear forwards;
}
@keyframes lunaPlasa { 0%, 99.9% { visibility: visible; } 100% { visibility: hidden; } }

/* vălul: partea opacă începe la marginea de sus a ecranului, cu o margine
   moale deasupra; coborât cu 160vh, descoperă pagina de sus în jos */
.luna-noapte {
  position: absolute; left: 0; right: 0; top: -60vh; height: 160vh;
  background: linear-gradient(to bottom, transparent 0, var(--luna-noapte) 37.5%, var(--luna-noapte) 100%);
}
.luna-x, .luna-y { position: absolute; width: 0; height: 0; }
.luna-x { left: 50%; top: 50%; }
.luna-y { left: 0; top: 0; }
.luna-corp {
  position: absolute; width: var(--luna-d); height: var(--luna-d);
  left: calc(var(--luna-d) / -2); top: calc(var(--luna-d) / -2);
  animation: lunaAprinde var(--luna-aprindere) var(--e-lumina) both;
}
.luna-corp svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.luna-halou {
  position: absolute; inset: -55%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  animation: lunaRespira calc(var(--t0) - var(--luna-aprindere)) var(--e-lumina) var(--luna-aprindere) both;
}
.luna-relief { opacity: .9; }
.luna-contur { stroke-dasharray: 1; animation: lunaContur var(--luna-aprindere) var(--e-iesire-din-repaus) both; }
@keyframes lunaAprinde { from { opacity: 0; transform: scale(.94); } }
@keyframes lunaRespira { 50% { opacity: .75; transform: scale(1.06); } }
@keyframes lunaContur { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* antetul așteaptă luna: ascuns cel mult 2,6 s, fără clasă de scos */
@keyframes lunaAscuns { from, to { opacity: 0; } }
html.luna .hdr .mark, html.luna .hdr .brand-tx, html.luna .hdr .nav, html.luna .hdr .hdr-act { animation: lunaAscuns 2.6s linear; }

/* aterizarea: inelul pleacă din siglă, numele iese de sub ea */
.hdr .mark { position: relative; }
html.luna-aterizare .hdr .mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--accent-txt);
  animation: lunaInel 700ms var(--e-iesire-din-repaus) both;
}
@keyframes lunaInel { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(2.4); } }
html.luna-aterizare .hdr .brand-tx { animation: lunaNume var(--d-intrare) var(--e-iesire-din-repaus) both; }
html.luna-aterizare .hdr .nav      { animation: intrareSus var(--d-intrare) var(--e-iesire-din-repaus) 80ms both; }
html.luna-aterizare .hdr .hdr-act  { animation: intrareSus var(--d-intrare) var(--e-iesire-din-repaus) 140ms both; }
@keyframes lunaNume { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { opacity: 1; clip-path: inset(0); transform: none; } }

/* eroul intră odată cu zborul, nu sub văl; sigla nu se mai „aprinde" —
   aterizează. --t0 îl rescrie luna.js la săritură. */
html.anim.intrare.cu-luna .erou-text .clock       { animation-delay: calc(var(--t0) + 120ms); }
html.anim.intrare.cu-luna .erou-text .lead        { animation-delay: calc(var(--t0) + 450ms); }
html.anim.intrare.cu-luna .erou-text .canale-erou { animation-delay: calc(var(--t0) + 520ms); }
html.anim.intrare.cu-luna .erou-text .intro-cta   { animation-delay: calc(var(--t0) + 600ms); }
html.anim.intrare.cu-luna .erou-text .dovezi      { animation-delay: calc(var(--t0) + 645ms); }
html.anim.intrare.cu-luna .scena-erou .rig        { animation-delay: calc(var(--t0) + 1000ms); }

/* ─── 20a. „Problema" — noaptea (B2 §5) ─────────────────────────
   Starea de bază e finalul: toate mesajele au răspuns. Sub html.gsap,
   momente.js conduce clasele: .vazut — mesajul a sosit (gri, necitit);
   .raspuns — Lumen i-a răspuns (aprins, cu bifă); .noapte.gata — finalul. */
:root { --d-noapte: 4200ms; }
.noapte-scena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-bottom: 40px; }
.noapte-scena .sec-head { margin-bottom: 0; }
.noapte { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.noapte-ceas { display: flex; align-items: baseline; gap: 12px; }
.noapte-ora { font-family: var(--f-display); font-size: 2.6rem; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--t1); }
.noapte-et { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); }
.noapte-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.noapte-msg {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 13px; background: var(--fill); border: .5px solid var(--accent-line);
  transition: opacity var(--d-ui) var(--e-iesire-din-repaus), transform var(--d-arc) var(--e-arc),
              border-color var(--d-panou) var(--e-lumina), background-color var(--d-panou) var(--e-lumina);
}
.noapte-msg .bx { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.noapte-msg .bx svg { width: 15px; height: 15px; }
.noapte-msg .tx { font-size: 13px; line-height: 1.4; color: var(--t1); min-width: 0; }
.noapte-msg .tx b { display: block; font-size: 10.5px; font-weight: 650; color: var(--t2); letter-spacing: .02em; }
.noapte-msg time { font-family: var(--f-mono); font-size: 10.5px; color: var(--t2); }
.noapte-msg .stare { width: 18px; height: 18px; color: var(--ok-txt); transition: opacity var(--d-ui) var(--e-hover), transform var(--d-arc-viu) var(--e-arc-viu); }
.noapte-msg .stare svg { width: 100%; height: 100%; }
.noapte-final { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--accent-txt); transition: opacity var(--d-panou) var(--e-iesire-din-repaus), transform var(--d-panou) var(--e-iesire-din-repaus); }

html.gsap .noapte-msg:not(.vazut) { opacity: 0; transform: translateY(12px) scale(.97); }
html.gsap .noapte-msg:not(.raspuns) { border-color: var(--stroke); background-color: transparent; }
html.gsap .noapte-msg:not(.raspuns) .tx { color: var(--t2); }
html.gsap .noapte-msg:not(.raspuns) .stare { opacity: 0; transform: scale(.4); }
html.gsap .noapte:not(.gata) .noapte-final { opacity: 0; transform: translateY(8px); }

@media (max-width: 900px) {
  /* pe telefon scena nu e fixată, deci stă în lungimea paginii: strânsă */
  .noapte-scena { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 28px; }
  .noapte { padding: 16px; gap: 10px; }
  .noapte-ora { font-size: 2rem; }
  .noapte-lista { gap: 6px; }
  .noapte-msg { padding: 8px 10px; gap: 8px; }
  .noapte-msg .tx { font-size: 12.5px; }
}

/* ─── 20b. „Cum funcționează" — ilustrațiile pașilor (B2 §5) ─────
   Starea de bază: ilustrația terminată. Sub html.gsap, fiecare se joacă
   când pasul primește .aprins (lumina a ajuns la el). .condus: --p vine
   din ScrollTrigger, nu din animația view(). */
html.anim .pasi.condus { animation: none; }
.pas-ilu { margin-top: auto; padding-top: 6px; min-height: 34px; display: flex; align-items: flex-end; }
.pas-ilu > * {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 11.5px; line-height: 1.3; padding: 6px 9px; border-radius: 10px;
  background: var(--fill); border: .5px solid var(--stroke); color: var(--t1);
  transition: opacity var(--d-ui) var(--e-iesire-din-repaus), transform var(--d-arc) var(--e-arc),
              border-color var(--d-panou) var(--e-lumina), box-shadow var(--d-panou) var(--e-lumina);
}
.pas-ilu svg { width: 13px; height: 13px; flex-shrink: 0; }
.pas-ilu .ok { color: var(--ok-txt); }
.ilu-bula { border-bottom-left-radius: 3px; }
.ilu-unealta { font-family: var(--f-mono); font-size: 10.5px; }
.ilu-unealta .sp { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid var(--accent-line); border-top-color: var(--accent-txt); display: none; }
.ilu-slot { border-color: var(--accent-line); box-shadow: 0 2px 14px var(--accent-glow); }
.ilu-slot b { font-family: var(--f-mono); color: var(--accent-txt); }

html.gsap .pas:not(.aprins) .pas-ilu > * { opacity: 0; transform: translateY(8px) scale(.96); }
html.gsap .pas:not(.aprins) .ilu-bula { transform: translateX(-14px); }
html.gsap .pas:not(.aprins) .ilu-fisa .ok, html.gsap .pas:not(.aprins) .ilu-unealta .ok { opacity: 0; }
html.gsap .pas:not(.aprins) .ilu-slot { box-shadow: none; border-color: var(--stroke); }
html.gsap .pas.aprins .ilu-fisa .ok { transition: opacity var(--d-ui) var(--e-hover) var(--d-panou); }
/* unealta: indicatorul se rotește cât „caută", apoi bifa */
html.gsap .pas.aprins .ilu-unealta .sp { display: block; animation: iluCauta 700ms linear forwards; }
html.gsap .pas.aprins .ilu-unealta .ok { animation: iluBifa var(--d-ui) var(--e-arc-viu) 700ms both; }
@keyframes iluCauta { 0% { transform: rotate(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: rotate(720deg); opacity: 0; width: 0; border-width: 0; } }
@keyframes iluBifa { from { opacity: 0; transform: scale(.4); } }
html.gsap .pas.aprins .ilu-slot { transition-delay: 0s, 0s, var(--d-ui), var(--d-ui); }
@media (max-width: 900px) {
  /* pe telefon pașii nu sunt fixați, deci stau în lungimea paginii: strânși */
  .pas { padding-block: 15px; gap: 6px; }
  .pas-ilu { min-height: 0; padding-top: 2px; }
  .pas-ilu > * { padding: 4px 8px; font-size: 11px; }
  .pas p { line-height: 1.45; }
}

/* ─── 20c. „Limite", „Siguranța", „Contact" (B2 §5) ─────────── */
.doar-cititor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* semnele se desenează, unul după altul, când lista intră pe ecran */
.limit .x svg { overflow: visible; }
.limit .x path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d-panou) var(--e-iesire-din-repaus); }
html.momente .limite-grila:not(.semne) .x path { stroke-dashoffset: 1; }
.limite-grila .limit:nth-child(2) path { transition-delay: 120ms; }
.limite-grila .limit:nth-child(3) path { transition-delay: 240ms; }
.limite-grila .limit:nth-child(4) path { transition-delay: 360ms; }
.limite-grila .limit .x path + path { transition-delay: calc(140ms + var(--dl, 0ms)); }
.limite-grila .limit:nth-child(2) .x path + path { --dl: 120ms; }
.limite-grila .limit:nth-child(3) .x path + path { --dl: 240ms; }
.limite-grila .limit:nth-child(4) .x path + path { --dl: 360ms; }

/* bula agentului: se scrie literă cu literă, apoi lacătul se închide */
.col-sig { display: flex; flex-direction: column; gap: 22px; }
.bula-agent { border-radius: 18px 18px 18px 5px; padding: 14px 16px; max-width: 46ch; }
.bula-et { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--t2); margin-bottom: 7px; }
.lacat { width: 14px; height: 14px; fill: none; stroke: var(--accent-txt); stroke-width: 1.8; stroke-linecap: round; }
.lacat-toarta { transition: transform var(--d-arc-viu) var(--e-arc-viu); }
html.momente .bula-agent:not(.gata) .lacat-toarta { transform: translateY(-3px); }
.bula-tx { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t1); }
html.momente .bula-tx .lit:not(.on) { opacity: 0; }

/* contactul: lumina mărcii respiră lent în spatele cardurilor, doar cât
   secțiunea e pe ecran (.respira) */
#contact .contact { position: relative; isolation: isolate; }
#contact .contact::before {
  content: ""; position: absolute; inset: -25% -6%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 72%); opacity: .3;
}
html.momente #contact.respira .contact::before { animation: respira 5200ms var(--e-lumina) infinite alternate; }
@keyframes respira { from { opacity: .22; transform: scale(.95); } to { opacity: .55; transform: scale(1.04); } }
@media (max-width: 900px) {
  /* strâns pe telefon: fiecare rând contează pentru pragul de 10 ecrane */
  .col-sig { gap: 14px; }
  .bula-agent { padding: 11px 13px; }
  .bula-et { margin-bottom: 5px; }
  .bula-tx { font-size: 14px; }
  .noapte-final { margin: 0; font-size: 13px; }
  .pasi-nota { margin-top: 14px; }
}

/* ─── 21. Clipurile (spec C §6, B2 §6) ──────────────────────────
   Clipurile sunt randate pe tema închisă, deci rama lor e închisă în
   ambele teme: pe tema deschisă arată ca un ecran pus pe pagină, pe cea
   închisă se topește în fundal. Jetoanele de mai jos sunt valorile temei
   închise, aplicate doar în interiorul ramei (și agendei din card).
   .clip-erou — clipul complet din eroul paginilor de detaliu;
   .card-media — bucla (sau agenda) din cardurile „Ce face" de pe Acasă. */
.clip-ecran {
  --t1: rgba(255,255,255,.94); --t2: rgba(235,235,245,.68); --t3: rgba(235,235,245,.56);
  --fill: rgba(140,144,160,.16); --fill2: rgba(140,144,160,.28); --hair: rgba(255,255,255,.10);
  --accent-txt: #4cc6dc; --accent-glow: rgba(76,198,220,.50); --accent-line: rgba(76,198,220,.32);
  --clip-fond: #0a0c10;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--clip-fond); color: var(--t1);
  border: .5px solid rgba(255,255,255,.10);
  box-shadow: var(--sh), 0 0 0 1px rgba(76,198,220,.06), 0 18px 60px -24px rgba(76,198,220,.35);
}
.clip-ecran video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--clip-fond); }

/* eroul cu clip: textul la stânga, ecranul la dreapta; pe telefon, ecranul sub buton */
.erou-cu-clip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 24px 64px; align-items: center; }
.erou-stanga { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.clip { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.clip-erou .clip-ecran { aspect-ratio: 4 / 5; border-radius: 26px; }
.clip-eticheta { font-size: 12.5px; line-height: 1.45; color: var(--t2); text-align: center; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .clip-erou .clip-ecran { view-transition-name: clip; }
  ::view-transition-group(clip) { animation-duration: var(--d-panou); animation-timing-function: var(--e-mutare); }
}

/* butonul mare de pornire (apelul; WhatsApp la mișcare redusă) */
.clip-porneste {
  position: absolute; left: 50%; bottom: 6%; translate: -50% 0; z-index: 2; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 13px 14px; border-radius: 999px;
  font: 650 15px/1 var(--f-text, inherit); color: #00272f; background: var(--accent); border: 0; cursor: pointer;
  box-shadow: 0 10px 34px rgba(76,198,220,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--d-hover) var(--e-hover), box-shadow var(--d-hover) var(--e-hover), opacity var(--d-ui) var(--e-lumina);
}
.clip-porneste:hover { transform: translateY(-1px); box-shadow: 0 14px 40px rgba(76,198,220,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.clip-porneste:active { transform: scale(.97); transition-duration: var(--d-apasare); }
.clip-porneste .cerc { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,39,47,.14); }
.clip-porneste svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.clip-porneste .durata { font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; opacity: .72; font-variant-numeric: tabular-nums; }
.clip-porneste[hidden] { display: none; }

/* bara de sub ecran: pornire/oprire, capitolele ca segmente, timpul, subtitrările */
.clip-bara { display: flex; align-items: center; gap: 10px; }
.clip-bara[hidden] { display: none; }
.clip-joc {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--t1); background: var(--sheen), var(--g2); border: .5px solid var(--stroke);
  transition: border-color var(--d-hover) var(--e-hover), transform var(--d-hover) var(--e-hover);
}
.clip-joc:hover { border-color: var(--accent-line); }
.clip-joc:active { transform: scale(.94); transition-duration: var(--d-apasare); }
.clip-joc svg { width: 13px; height: 13px; fill: currentColor; }
.clip-joc .i-oprit { display: none; }
.clip.ruleaza .clip-joc .i-pornit { display: none; }
.clip.ruleaza .clip-joc .i-oprit { display: block; }
.clip-capitole { flex: 1; min-width: 0; display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
/* lățimea pornește de la titlu: „Recapitularea" are nevoie de mai mult loc decât „Agenda" */
.clip-capitole li { flex: 1 1 auto; min-width: 0; }
/* apelul are cinci capitole: pe un rând al lor, butonul și timpul dedesubt */
.clip[data-mod="apel"] .clip-bara { flex-wrap: wrap; row-gap: 4px; }
.clip[data-mod="apel"] .clip-capitole { order: -1; flex-basis: 100%; }
.clip-capitole button {
  width: 100%; display: flex; flex-direction: column; gap: 7px; padding: 8px 2px 4px; cursor: pointer;
  min-height: 40px; background: none; border: 0; color: var(--t2); font: 600 11.5px/1.2 inherit; text-align: left;
  transition: color var(--d-hover) var(--e-hover);
}
.clip-capitole button:hover, .clip-capitole button[aria-current="true"] { color: var(--t1); }
.cap-fir { display: block; height: 3px; border-radius: 2px; background: var(--fill2); overflow: hidden; }
.cap-umplut { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.clip.ruleaza .cap-umplut { transition: transform 300ms linear; }
.clip-capitole.sare .cap-umplut { transition: none; }
.cap-nume { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-timp { flex: none; font: 600 11.5px/1 var(--f-mono); color: var(--t2); font-variant-numeric: tabular-nums; }

/* transcrierea apelului, sub clip (spec C §4) */
.transcriere { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; max-width: 760px; }
.transcriere li { display: grid; grid-template-columns: 52px 128px minmax(0, 1fr); gap: 4px 12px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; font-size: 15px; line-height: 1.5;
  transition: background-color var(--d-ui) var(--e-lumina); }
.transcriere .t { font: 600 12px/1.5 var(--f-mono); color: var(--t3); font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 0; text-align: left; }
button.t { cursor: pointer; color: var(--accent-txt); }
button.t:hover { text-decoration: underline; text-underline-offset: 3px; }
.transcriere .cine { font-size: 12px; font-weight: 650; letter-spacing: .02em; color: var(--t3); }
.transcriere .r-agent .cine { color: var(--accent-txt); }
.transcriere .ce { color: var(--t1); }
.transcriere li.acum { background: var(--accent-soft); }
.transcriere-cutie { max-width: 820px; }
.transcriere-cutie summary { cursor: pointer; font-weight: 650; color: var(--t1); padding-block: 10px; }

/* cardurile „Ce face": bucla sau agenda, ca un ecran mic deasupra textului.
   Tăiat la 16:10 pe momentul care contează (object-position pe fiecare
   buclă): Acasă e la limita de 10 ecrane. Sub 900 px nu apare deloc — pe
   telefon, clipul e la o atingere distanță, în eroul paginii, iar Acasă
   rămâne scurtă și fără video de descărcat. */
.card-media { aspect-ratio: 16 / 10; border-radius: 14px; margin-bottom: 6px; }
/* mărite pe ce contează: mesajele din telefon, unda și prima replică */
.card-media video[data-start="4.5"] { object-position: 50% 80%; scale: 1.5; transform-origin: 50% 74%; }
.card-media video[data-start="3"] { object-position: 50% 54%; scale: 1.1; transform-origin: 50% 60%; }
.card-cap { display: flex; align-items: center; gap: 12px; }
html:not(.js) .card-media { display: none; }
.card-media .eticheta {
  position: absolute; left: 8px; top: 8px; z-index: 1; padding: 4px 9px; border-radius: 999px;
  font-size: 10.5px; line-height: 1.3; color: var(--t1);
  background: rgba(8,10,14,.72); border: .5px solid rgba(255,255,255,.12);
}
.agenda-mini { display: flex; flex-direction: column; padding: 12px 14px 8px; gap: 6px;
  background: radial-gradient(70% 60% at 85% 100%, rgba(15,64,56,.55), transparent 70%),
              radial-gradient(60% 50% at 0% 0%, rgba(28,63,112,.45), transparent 70%), var(--clip-fond); }
.agenda-mini .cap-ag { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.agenda-mini .zi { font-family: var(--f-display); font-size: 1.05rem; font-weight: 640; color: var(--t1); }
.agenda-mini .cab { font: 600 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.agenda-mini .slot { grid-template-columns: 40px 1fr; gap: 9px; min-height: 0; padding: 3px 0; }
.agenda-mini .ev { padding: 3px 10px; }
.agenda-mini .ev-lumen { border-left-color: var(--accent); background: rgba(76,198,220,.12); box-shadow: 0 3px 18px rgba(76,198,220,.28); }
html.anim .agenda-mini .ev-lumen {
  transition: opacity var(--d-panou) var(--e-lumina), box-shadow var(--d-poveste) var(--e-lumina), transform var(--d-arc) var(--e-arc);
}
html.anim .agenda-mini:not(.aprinsa) .ev-lumen { opacity: .35; transform: translateX(-8px); box-shadow: none; }
html.anim .agenda-mini.aprinsa .ev-lumen.doi { transition-delay: 380ms; }

@media (max-width: 900px) {
  .erou-cu-clip { grid-template-columns: minmax(0, 1fr); }
  .clip-erou { width: 100%; max-width: 440px; justify-self: center; }
  .clip-capitole button { font-size: 11px; }
  .card-media { display: none; }
  .transcriere li { grid-template-columns: 44px minmax(0, 1fr); }
  .transcriere .cine { grid-column: 2; }
  .transcriere .ce { grid-column: 2; }
}
/* pe ecranele tactile, ținte de 44 px */
@media (pointer: coarse) {
  .clip-joc { width: 44px; height: 44px; }
  .clip-capitole button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .clip-porneste, .clip-joc, .transcriere li { transition: none; }
  .clip-porneste:hover, .clip-porneste:active { transform: none; }
}

/* ─── 19. Mișcarea redusă pentru B2 ────────────────────────────
   La final, nu în secțiunea 13: regulile de aici trebuie să bată
   regulile B2 de mai sus la specificitate egală. */
@media (prefers-reduced-motion: reduce) {
  .btn { transition-timing-function: ease; }
  .btn-pri { translate: none !important; }
  main :is(p, li) a:not(.btn)::after { transition: none; }
  [data-tema] > svg, #meniu > svg { transition: opacity var(--d-ui) linear; transform: none !important; }
  .pas-ilu > * { transition: none; }
  .ilu-unealta .sp { display: none !important; }
  .limit .x path { transition: none; }
  #contact .contact::before { animation: none !important; }
  .ico-joaca :is(.ico, .bx) svg { animation: none !important; }
  .faq details::details-content { transition: none !important; }
  .faq .raspuns { transform: none !important; }
  .faq summary::after { transition: none; }
}