/* ══════════════════════════════════════════════════════════════
   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,.62);
  --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;

  --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,.62); --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;
  --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: #8f6100;
  --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;
  --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);
}

/* ─── 2. Bază ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* fără scroll-behavior: smooth — s-ar bate cu inerția din app.js */

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;
}
body.cursor-propriu { cursor: none; }
body.cursor-propriu a, body.cursor-propriu button { cursor: none; }

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; }

.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;
  animation: grainSalt 1s steps(1) infinite;
}
@keyframes grainSalt {
  0%   { transform: translate(0,0); }
  12%  { transform: translate(-7px,4px); }
  25%  { transform: translate(5px,-8px); }
  37%  { transform: translate(-9px,-3px); }
  50%  { transform: translate(8px,6px); }
  62%  { transform: translate(-4px,9px); }
  75%  { transform: translate(6px,-5px); }
  87%  { transform: translate(-8px,2px); }
}

/* ─── 4. Cursor ──────────────────────────────────────────────── */
.cursor-punct, .cursor-inel {
  position: fixed; top: 0; left: 0;
  z-index: 120; pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}
.cursor-punct {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
  transition: opacity .3s ease, width .25s ease, height .25s ease;
}
.cursor-inel {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid var(--accent-line);
  transition: opacity .3s ease, width .32s cubic-bezier(.2,.9,.3,1),
              height .32s cubic-bezier(.2,.9,.3,1), margin .32s cubic-bezier(.2,.9,.3,1),
              background .32s ease, border-color .32s ease;
}
.cursor-activ .cursor-punct, .cursor-activ .cursor-inel { opacity: 1; }
/* pe ecrane tactile nu există cursor de urmărit: le scoatem de tot,
   ca să nu rămână două elemente invizibile agățate în colțul paginii */
@media (hover: none), (pointer: coarse) {
  .cursor-punct, .cursor-inel { display: none; }
}
/* Inelul crește peste elementele active, dar rămâne DOAR contur. Cu
   fundal, un cerc de 58px desenat deasupra literelor tăia titlurile de
   49px pe verticală de fiecare dată când treceai peste ele — cursorul
   propriu ajungea să acopere exact ce voiai să citești. */
.cursor-peste .cursor-inel {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: transparent;
  border-color: var(--accent);
}
.cursor-peste .cursor-punct { width: 0; height: 0; margin: 0; }
.cursor-apasat .cursor-inel { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* ─── 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 .34s ease, border-color .34s ease, transform .42s cubic-bezier(.3,.9,.3,1);
}
.hdr.lipit {
  background: var(--g2);
  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 .45s cubic-bezier(.2,.9,.3,1), filter .45s 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(--t3); display: block; line-height: 1.2;
}

.nav { display: flex; gap: 2px; margin: 0 auto; }
.nav a {
  font-size: 13.5px; font-weight: 500; color: var(--t2);
  padding: 8px 12px; border-radius: 9px;
  transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}
.nav a:hover, .nav a.activ { color: var(--t1); background: var(--fill); opacity: 1; }
.hdr-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* Butoanele NU urmăresc cursorul. Ridicare la hover, atât — un buton
   care fuge de sub deget e greu de apăsat și arată neserios. */
.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;
  transition: box-shadow .22s ease, transform .22s cubic-bezier(.2,.9,.3,1),
              background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover { opacity: 1; transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }
.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); }
.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 .2s ease, box-shadow .22s ease, border-color .22s ease,
              transform .22s cubic-bezier(.2,.9,.3,1);
}
.icon-btn:hover { color: var(--t1); box-shadow: var(--shHi); border-color: var(--accent-line); transform: translateY(-2px); }
.icon-btn:active { transform: translateY(0); transition-duration: .06s; }
.icon-btn svg { width: 17px; height: 17px; }

/* meniu pe ecrane mici */
.doar-mic { display: none; }
.doar-ingust { display: none; }
.ico-inchide { display: none; }
.hdr.meniu .ico-menu { display: none; }
.hdr.meniu .ico-inchide { display: block; }
.nav-mic {
  display: none; overflow: hidden;
  max-height: 0; transition: max-height .38s cubic-bezier(.3,.9,.3,1);
}
.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. Luna apare doar când tema deschisă e deja activă. */
.ico-moon, .et-luna { display: none; }
.ico-sun { display: block; }
.et-soare { display: inline; }
:root[data-theme="light"] .ico-moon { display: block; }
:root[data-theme="light"] .et-luna { display: inline; }
:root[data-theme="light"] .ico-sun, :root[data-theme="light"] .et-soare { display: none; }

/* ─── 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: 104px; }
.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; }

.rise {
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 34px, -70px) rotateX(7deg);
  transition: opacity .8s cubic-bezier(.2,.9,.3,1), transform .9s cubic-bezier(.2,.9,.3,1);
}
.rise.vazut { opacity: 1; transform: perspective(1000px) translate3d(0,0,0) rotateX(0deg); }

/* 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;
}
.wr > i {
  display: inline-block; font-style: inherit;
  transform: translateY(126%) rotate(3deg); opacity: 0;
  transition: transform .82s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.wr.vazut > i { transform: none; opacity: 1; }

/* ─── 7. Intro ───────────────────────────────────────────────── */
.intro {
  min-height: 94vh;
  display: flex; align-items: center;
  padding-block: 124px 44px;   /* vezi nota de la .sec */
  position: relative;
}
.intro-in { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.intro h1 { max-width: 15ch; }
.intro .lead { max-width: 52ch; }
.intro-cta { display: flex; gap: 11px; flex-wrap: wrap; padding-top: 8px; }

.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);
  animation: pulseDot 2.6s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 var(--puls-ring); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.dovezi {
  list-style: none; margin: 4px 0 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; }

/* Centrat jos, nu lipit de marginea coloanei. La dreapta ajungea la
   marginea lui .wrap — pe un ecran de 1920 asta înseamnă x≈1490, cu
   nimic în jur: nici pe margine, nici centrat, doar plutind. În stânga
   se amesteca cu dovezile de sub butoane. Centrul e singurul loc unde
   un indicator de derulare arată ales. */
.hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t3);
}
.hint .ln {
  width: 1px; height: 34px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, transparent, var(--accent));
}
.hint .ln::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  animation: slideDown 2.1s ease-in-out infinite;
}
@keyframes slideDown { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* ─── 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;
}
.msg {
  max-width: 86%; padding: 2.6cqw 3.9cqw;
  font-size: 4.05cqw; line-height: 1.45; border-radius: 4.6cqw;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .42s ease, transform .52s cubic-bezier(.16,1,.3,1);
}
.msg.pornit { opacity: 1; transform: none; }
.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;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.tool.pornit { opacity: 1; transform: none; }
.tool em { font-style: normal; color: var(--accent-txt); font-weight: 700; }
.tool .sp {
  width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  border: .5cqw solid var(--accent-txt); border-right-color: transparent;
  animation: spin .72s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tool.gata .sp { border: none; width: auto; height: auto; animation: none; color: var(--ok-txt); }
.tool.gata .sp::after { content: "✓"; font-size: 3.3cqw; line-height: 1; }

.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);
  opacity: 0; will-change: transform, opacity;
}
.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%);
  opacity: 0; transform: translateX(-14px) scale(.94);
  transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s ease;
}
.ev-nou.pornit { opacity: 1; transform: none; 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;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.cap p.pornit { opacity: 1; transform: none; }
.cap .sm {
  display: block; font-family: var(--f-body);
  font-size: .84rem; font-weight: 400; color: var(--t2);
  letter-spacing: 0; margin-top: 5px;
}

/* ─── 9. Conducta ────────────────────────────────────────────── */
.pipe-tot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pipe-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pipe-head h2 { max-width: 20ch; }
.pipe-nota { text-align: center; max-width: 56ch; }

.pipe { perspective: 1300px; width: 100%; display: grid; place-items: center; }
.pipe-in {
  transform-style: preserve-3d; position: relative;
  width: min(1000px, 92vw); height: min(440px, 56vh);
  will-change: transform;
}
.slab {
  position: absolute; top: 50%; left: 50%;
  width: 212px; border-radius: 17px; padding: 18px 17px;
  background: var(--sheen), var(--g2);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: .5px solid var(--stroke); box-shadow: var(--sh);
  display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow .5s ease, border-color .5s ease;
  will-change: transform;
}
.slab.aprins {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), 0 16px 50px var(--accent-glow);
}
.slab .no { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--accent-txt); font-weight: 700; }
.slab h3 { font-size: .97rem; }
.slab p { font-size: 12.4px; line-height: 1.5; color: var(--t2); }
.slab .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);
}
.slab .ic svg { width: 15px; height: 15px; }

.packet {
  position: absolute; top: 50%; left: 50%;
  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);
  will-change: transform; pointer-events: none;
}
.trail {
  position: absolute; top: 50%; left: 50%;
  height: 1.5px; margin-top: -.75px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  pointer-events: none;
}

/* ─── 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; }
.lista-canale, .lista-sig { gap: 12px; }

.tilt3d { perspective: 900px; }
/* Cât timp cursorul e deasupra, înclinarea trebuie să răspundă pe loc.
   Cu tranziția de transform pornită, cardul rămâne în urma cursorului
   cu o jumătate de secundă și exact asta se simte ca „lipicios".
   La ieșire clasa cade, tranziția revine și cardul se așază lin. */
[data-tilt].se-inclina { transition: box-shadow .5s ease, opacity .7s ease; }
.tile {
  border-radius: var(--rad); padding: 23px;
  display: flex; flex-direction: column; gap: 9px;
  transform-style: preserve-3d;
  /* opacity trebuie inclusă aici: altfel această regulă anulează
     tranziția din .rise și cardurile apar brusc */
  transition: transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .5s ease, opacity .7s ease;
  will-change: transform;
}
.tile:hover { box-shadow: var(--shHi); }
.tile.strimt { padding: 19px; }
.tile p { font-size: 14px; line-height: 1.55; color: var(--t2); }
.tile h3 { transform: translateZ(14px); }
.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; transform: translateZ(24px);
}
.tile .ico svg { width: 17px; height: 17px; }

.chan {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: 14px;
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
.chan:hover { transform: translateX(5px) scale(1.015); }
.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; }

/* 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; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.9,.3,1); will-change: transform; }
.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 .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;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .45s ease;
  will-change: transform;
}
.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); transform: translateZ(20px);
  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; }
  .hdr.meniu .nav-mic { max-height: 420px; }
  /* .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) {
  .sec { padding-block: 66px; }

  /* pe bandă plăcile nu mai sunt micșorate, deci pot fi mai late și
     textul din ele respiră */
  .slab { width: 248px; padding: 20px 18px; }
  .slab p { font-size: 13px; }

  .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; }
  /* fără perspectivă și fără deplasare pe Z într-un container care se
     derulează: ar mări lățimea de derulare cu ce iese din cutie */
  .g3.tilt3d, .lista-sig.tilt3d { perspective: none; }
  .g3 > .rise, .lista-sig > .rise { transform: translate3d(0, 26px, 0); }
  .g3 > .rise.vazut, .lista-sig > .rise.vazut { transform: none; }
  .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: 300vh !important; }
  #conducta { height: 250vh !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 0; }
  .cap { bottom: 3vh; }
  .hint { display: none; }
  .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: flex; }
  .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; }
}

/* Pe ecrane foarte late coloana eroului rămânea cât era desenată, iar
   dreapta ei se golea: la 1920, text până la x≈1000 și 500px de nimic
   până la marginea coloanei. Titlul și textul cresc proporțional, deci
   compoziția rămâne aceeași — doar la scara ecranului. */
@media (min-width: 1560px) {
  .intro h1 { max-width: 17ch; font-size: clamp(2.5rem, 6.2vw, 5.3rem); }
  .intro .lead { max-width: 58ch; font-size: 1.2rem; }
}

/* 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ă ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rise, .wr > i { opacity: 1 !important; transform: none !important; }
  .mock .fillbar, .mock .restbar { transform: scaleY(1); }
  .grain, .packet, .trail, .cursor-punct, .cursor-inel { display: none; }
  /* scenele au înălțimea de derulare pusă inline — fără asta ar
     rămâne câteva ecrane goale când animația e oprită */
  .scena { height: auto !important; }
  .pin { position: relative; height: auto; padding: 60px 0; overflow: visible; }
  .stage { height: auto; display: flex; flex-direction: column; gap: 20px; align-items: center; }
  .stage > * { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; }
  .msg, .tool, .ev-nou, .cap p { opacity: 1 !important; transform: none !important; }
  /* firul nu mai are nevoie de ancorare când nu se animă nimic */
  .thread { overflow: visible; }
  .stiva { position: static; }
  /* aparatul se desface: fără ramă absolută, ecranul curge normal */
  .phone {
    width: min(320px, 86vw); height: auto; aspect-ratio: auto;
    border-radius: 26px; padding: 2.6cqw;
  }
  .phone::before, .di, .ph-buton, .ios-stare, .ios-home { display: none; }
  .screen { position: static; inset: auto; border-radius: 20px; }
  .cap { position: relative; bottom: auto; left: auto; transform: none; margin-top: 24px; }
  .cap p { position: relative; }
  .cap p:not(:last-child) { display: none; }
  .pipe-in { height: auto; display: grid; gap: 14px; }
  .slab { position: relative; top: auto; left: auto; width: auto; transform: none !important; opacity: 1 !important; }
}

/* ─── 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ă:
   • Niciun element din paginile astea nu poartă „.rise". Clasa începe
     la „opacity: 0" și e trezită de observatorul din app.js — pe o
     pagină care nu-l încarcă, textul ar rămâne invizibil pentru
     totdeauna, iar recenzorul Meta ar vedea o pagină goală.
   • 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; }
.foot-jur .sep { color: var(--t3); 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; }
}