/*
Theme Name: CNARNN INFONOT
Theme URI: https://infonot.ro/
Author: CNARNN-INFONOT
Description: Tema oficiala a Centrului National de Administrare a Registrelor Nationale Notariale. Tema clasica, fara page builder, fara dependinte externe.
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: cnarnn
*/

/* ==========================================================================
   Sistem de design CNARNN-INFONOT - "Amurg"

   Sediul din Bd. Theodor Pallady 40G este un perete-cortina: o retea de
   montanti si de ochiuri de sticla. Un registru are aceeasi forma - o grila
   liniata. Cele doua se suprapun, si de acolo vine tot situl.

   Ora este aleasa, nu intamplatoare. Ziua, o fereastra nu se distinge de
   vecina ei. La amurg, o fereastra aprinsa se vede de la distanta - asa ca
   cele zece registre pot fi zece ferestre care se aprind, una cate una, in
   propria lor cladire. Metafora cere intunericul: de aceea fotografiile sunt
   gradate la crepuscul si de aceea paleta pune cald peste rece.

   Cerneala emblemei - vulturul heraldic in indigo-violet - ramane culoarea
   institutiei pe hartie, acolo unde se citeste text lung.
   ========================================================================== */

/* ---------------------------------------------------------------- fonturi --
   Fonturi variabile, gazduite local (fostul css/fonts.css, mutat aici ca
   pagina sa astepte un singur fisier CSS, nu doua). Archivo - afisaj,
   Onest - text curent, Spline Sans Mono - coduri si cifre, Schibsted
   Grotesk - benzile de text lung. Subsetul latin-ext aduce diacriticele
   romanesti cu virgula dedesubt. */

/* ---- Archivo (afisaj, variabil pe wght + wdth) ---- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Onest (text curent, variabil pe wght) ---- */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/onest-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/onest-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Spline Sans Mono (date, variabil pe wght) ---- */

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/spline-sans-mono-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/spline-sans-mono-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Schibsted Grotesk (benzile de text lung, variabil pe wght) ----
   SIL Open Font License 1.1 - Copyright 2023 The Schibsted-Grotesk Project
   Authors (https://github.com/schibsted/schibsted-grotesk). ---- */

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens, reset, base, layout, components, utilities;

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  /* Doua teme. Implicit urmeaza setarea dispozitivului; butonul din antet
     o fixeaza prin [data-theme] (pus inainte de pictare de js/theme.js).
     Tema intunecata este amurgul, mai luminos decat noaptea de dinainte;
     tema deschisa este hartie alb-crem, cu cerneala indigo a emblemei. */
  :root {
    color-scheme: dark;
    /* Amurgul si sticla */
    --night:      #131b30;  /* cerul dupa apus: antet, subsol, benzi */
    --deep:       #1a2340;  /* fundalul paginii */
    --glass:      #263a63;  /* sticla fatadei */
    --glass-hi:   #31497a;  /* ochiul care prinde cerul */
    --mullion:    #3d5587;  /* rama de aluminiu */
    --surface:    #212c4b;  /* fise si carduri din benzile de text */
    --surface-2:  #283556;

    /* Lumina din fereastra. Singura culoare calda din sistem. */
    --lumen:      #ffc46b;
    --lumen-hot:  #ffe2b0;
    --on-accent:  #131b30;  /* text pe butonul principal */
    --glow-rgb:   255 196 107;

    /* Text */
    --pale:       #eef2fa;  /* text principal */
    --vapor:      #b2c2da;  /* text secundar */

    /* Voalul de peste fotografii (canalele lui --deep si --night) */
    --scrim-deep:  26 35 64;
    --scrim-night: 19 27 48;
    --wall-opacity: 0.22;

    --tint:       rgb(255 255 255 / 0.045);  /* carduri pe fundal */
    --hover-tint: rgb(255 255 255 / 0.08);
    --shadow-rgb: 0 0 0;

    /* Banda de document. Pastreaza numele vechi, dar ia culorile temei. */
    --paper:      var(--surface);
    --paper-2:    var(--surface-2);
    --ink:        var(--pale);
    --ink-2:      var(--vapor);
    --indigo:     var(--lumen);

    --line-deep:  rgb(178 194 218 / 0.17);
    --line-paper: var(--line-deep);

    --focus: var(--lumen);
    --muted-color: var(--vapor);

    /* Tipografie.
       Archivo are axa de latime intre 62% si 125%. Titlurile stau la capatul
       lat - aceeasi grotesca plata si intinsa ca literele "AUDITORIUM PALLADY"
       montate pe fatada. */
    --font-display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --font-body: "Onest", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --font-mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    /* Benzile de text lung: o grotesca moderna, curata, fara axa de latime. */
    --font-prose: "Schibsted Grotesk", "Onest", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

    --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --t-sm:   clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
    --t-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
    --t-lg:   clamp(1.16rem, 1.09rem + 0.34vw, 1.35rem);
    --t-xl:   clamp(1.42rem, 1.28rem + 0.68vw, 1.85rem);
    --t-2xl:  clamp(1.80rem, 1.52rem + 1.35vw, 2.65rem);
    --t-3xl:  clamp(2.60rem, 1.60rem + 4.60vw, 6.40rem);
    --t-mega: clamp(2.4rem, 13vw, 11rem);

    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
    --sp-9: 6rem;

    --measure: 68ch;
    --shell: 78rem;
    --cols: 12;
    --radius: 14px;
    --radius-sm: 8px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);  /* hover-uri lungi, fara smucituri */
    --ease-glide: cubic-bezier(0.45, 0.05, 0.25, 1);  /* porneste si se opreste lin, in ambele sensuri */
    /* Arc amortizat (depasire ~3%): ajunge la 95% in primul sfert al duratei,
       deci se simte iute, apoi se aseaza fara sa tremure. Fara linear(),
       o curba cubica cu o depasire asemanatoare. */
    --ease-spring: cubic-bezier(0.3, 1.2, 0.5, 1);
    --dur-spring: 0.52s;

    /* Inaltimea benzii utilitare plus a antetului, scazuta din erou ca fatada
       si titlul sa incapa impreuna intr-un singur ecran. Bara utilitara isi
       rupea randurile pe latimi mici; pe telefon a devenit un singur rand
       care curge orizontal, deci estimarea e una singura. Estimata generos:
       mai bine cu un deget prea putin decat cu titlul impins sub prag. */
    --chrome: 6.5rem;
  }
  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --ease-spring: linear(0, 0.0484 3.8%, 0.1626 7.7%, 0.3066 11.5%, 0.4557 15.4%, 0.5947 19.2%,
        0.715 23.1%, 0.8134 26.9%, 0.8897 30.8%, 0.9458 34.6%, 0.9846 38.5%, 1.0095 42.3%,
        1.0237 46.2%, 1.0302 50%, 1.0315 53.8%, 1.0294 57.7%, 1.0256 61.5%, 1.0209 65.4%,
        1.0163 69.2%, 1.012 73.1%, 1.0083 76.9%, 1.0053 80.8%, 1.0031 84.6%, 1.0014 88.5%, 1);
    }
  }
  @media (min-width: 46rem) { :root { --chrome: 7.25rem; } }
  @media (min-width: 62rem) { :root { --chrome: 6.75rem; } }

  /* Tema deschisa: alb-crem, cerneala indigo in locul luminii calde. */
  :root[data-theme="light"] {
    color-scheme: light;
    --night:      #ece7dc;
    --deep:       #f6f3ec;
    --glass:      #efeae0;
    --glass-hi:   #fcfaf6;
    --mullion:    #dcd4c5;
    --surface:    #fcfaf6;
    --surface-2:  #efeae0;
    --lumen:      #2f34a8;
    --lumen-hot:  #474cc8;
    --on-accent:  #fcfaf6;
    --glow-rgb:   47 52 168;
    --pale:       #1c2233;
    --vapor:      #566073;
    --scrim-deep:  246 243 236;
    --scrim-night: 236 231 220;
    --wall-opacity: 0.1;
    --tint:       rgb(255 255 255 / 0.6);
    --hover-tint: rgb(28 34 51 / 0.06);
    --shadow-rgb: 70 58 36;
    --line-deep:  rgb(28 34 51 / 0.12);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      color-scheme: light;
      --night:      #ece7dc;
      --deep:       #f6f3ec;
      --glass:      #efeae0;
      --glass-hi:   #fcfaf6;
      --mullion:    #dcd4c5;
      --surface:    #fcfaf6;
      --surface-2:  #efeae0;
      --lumen:      #2f34a8;
      --lumen-hot:  #474cc8;
      --on-accent:  #fcfaf6;
      --glow-rgb:   47 52 168;
      --pale:       #1c2233;
      --vapor:      #566073;
      --scrim-deep:  246 243 236;
      --scrim-night: 236 231 220;
      --wall-opacity: 0.1;
      --tint:       rgb(255 255 255 / 0.6);
      --hover-tint: rgb(28 34 51 / 0.06);
      --shadow-rgb: 70 58 36;
      --line-deep:  rgb(28 34 51 / 0.12);
    }
  }
}

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  table { border-collapse: collapse; width: 100%; }
  :target { scroll-margin-top: 7rem; }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  html { scroll-behavior: smooth; background: var(--deep); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Cardurile cu .card-hover sunt scutite: ridicarea lor la hover e mica,
       pornita de utilizator, si fara tranzitie ar sari brusc. Excluderea
       sta aici, nu langa .card-hover: !important dintr-un layer anterior
       bate orice !important din layerele de dupa, oricat de specific.
       Tot pe aceeasi logica raman vii antetul cu navigatia, sertarul,
       tooltipurile si lumina de sosire dintr-o ancora: miscari mici, pornite
       de utilizator. Acolo, in loc de arc, se folosesc curbe fara depasire,
       iar sertarul doar se estompeaza (vezi sectiunea navigatiei). */
    :not(.card-hover, .card-hover *, .pill-hover, .pill-hover *, .site-head, .site-head *, .drawer, .drawer *, .tip-wrap, .tip-wrap *, .is-arrived, .is-arrived *),
    :not(.card-hover, .card-hover *, .pill-hover, .pill-hover *, .site-head, .site-head *, .drawer, .drawer *, .tip-wrap, .tip-wrap *, .is-arrived, .is-arrived *)::before,
    :not(.card-hover, .card-hover *, .pill-hover, .pill-hover *, .site-head, .site-head *, .drawer, .drawer *, .tip-wrap, .tip-wrap *, .is-arrived, .is-arrived *)::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--pale);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Grila de montanti, fixa in spatele paginii. Benzile de document o
     acopera, exact ca un panou plin intr-un perete-cortina. */
  body::before {
    content: "";
    position: fixed;
    inset-block: 0;
    inset-inline: 0;
    z-index: -2;
    pointer-events: none;
    width: min(100% - 2.5rem, var(--shell));
    margin-inline: auto;
    opacity: 0.5;
    background: repeating-linear-gradient(
      90deg,
      var(--line-deep) 0 1px,
      transparent 1px calc(100% / var(--cols))
    );
  }
  @media (min-width: 60rem) {
    body::before { width: min(100% - 5rem, var(--shell)); }
  }

  /* Granulatie: opreste banding-ul pe suprafetele intunecate mari. */
  body::after {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 112, "wght" 640;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--pale);
  }

  p, li { text-wrap: pretty; }

  a { color: var(--pale); text-underline-offset: 0.18em; }
  a:hover { color: var(--lumen); }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 3px;
  }
  /* Sectiunile la care duce o ancora primesc focus din JS doar ca tastatura
     sa continue de acolo; sosirea are deja propria lumina, deci fara contur. */
  [data-anchor-target]:focus { outline: none; }

  ::selection { background: var(--lumen); color: var(--night); }

  .num, time, .win__code, .win__year { font-variant-numeric: tabular-nums; }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .shell {
    width: min(100% - 2.5rem, var(--shell));
    margin-inline: auto;
  }
  @media (min-width: 60rem) { .shell { width: min(100% - 5rem, var(--shell)); } }

  .band { padding-block: var(--sp-8); position: relative; }
  .band--tight { padding-block: var(--sp-7); }
  .band--night { background: var(--night); }

  /* Banda de document: textul lung. Nu mai e o foaie alba lipita peste
     pagina - sta pe fundalul temei si se distinge prin litera, nu prin culoare. */
  .band--paper {
    background: var(--deep);  /* acopera grila de montanti, ca textul sa stea curat */
    color: var(--pale);
    font-family: var(--font-prose);
    letter-spacing: -0.006em;
    --muted-color: var(--vapor);
  }
  .band--paper h1, .band--paper h2, .band--paper h3, .band--paper h4 {
    font-family: var(--font-prose);
    font-variation-settings: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--pale);
  }
  .band--paper .prose h2 { font-size: var(--t-2xl); margin-block-start: var(--sp-8); }
  .band--paper .prose h2:first-child { margin-block-start: 0; }
  .band--paper .prose h3 { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; color: var(--lumen); }
  .band--paper .prose h2 + p, .band--paper .prose h3 + p { margin-block-start: var(--sp-3); }
  .band--paper .prose p { line-height: 1.72; }
  .band--paper a { color: var(--lumen); }
  .band--paper a:hover { color: var(--pale); text-decoration-color: var(--lumen); }

  .prose { max-width: var(--measure); overflow-wrap: break-word; }
  .prose > * + * { margin-block-start: var(--sp-4); }
  .prose h2 { font-size: var(--t-xl); margin-block-start: var(--sp-7); }
  .prose h3 { font-size: var(--t-lg); margin-block-start: var(--sp-6); }
  .prose ul, .prose ol { padding-inline-start: 1.35em; }
  .prose li + li { margin-block-start: var(--sp-2); }
  .prose li::marker { color: var(--lumen); }

  .stack > * + * { margin-block-start: var(--sp-4); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--lumen); color: var(--night);
    padding: var(--sp-3) var(--sp-4); font-weight: 600;
  }
  .skip-link:focus { left: var(--sp-4); top: var(--sp-4); }
}

/* ----------------------------------------------------------- components -- */
@layer components {

  /* ---- Eticheta de sectiune -------------------------------------------- */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lumen);
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .band--paper .eyebrow { color: var(--ink-2); }
  .eyebrow::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
    opacity: 0.42;
  }

  /* ---- Imagini ---------------------------------------------------------- */
  .ph { display: block; }
  .ph img { width: 100%; height: auto; }
  .ph--plate img {
    border: 1px solid var(--line-deep);
    border-radius: var(--radius-sm);
  }

  /* ---- Bara utilitara + antet ------------------------------------------ */
  .util-bar {
    background: var(--night);
    color: var(--vapor);
    font-size: var(--t-xs);
    position: relative; z-index: 101;
  }
  .util-bar__inner {
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
    padding-block: var(--sp-2);
  }
  .util-bar a { color: inherit; text-decoration: none; }
  .util-bar a:hover { color: var(--lumen); }
  .util-bar__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .util-bar svg { width: 14px; height: 14px; flex: none; opacity: 0.6; }

  .site-head {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in oklab, var(--night) 72%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid var(--line-deep);
    transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .site-head { background: var(--night); }
  }
  .site-head.is-stuck {
    background: color-mix(in oklab, var(--night) 90%, transparent);
    box-shadow: 0 12px 32px -18px rgb(var(--shadow-rgb) / 0.5);
  }
  /* Firul de lumina de sub antet se aprinde cand pagina incepe sa curga. */
  .site-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--lumen) 30%, var(--lumen) 70%, transparent);
    opacity: 0; transform: scaleX(0.4);
    transition: opacity 0.4s var(--ease), transform 0.6s var(--ease-soft);
    pointer-events: none;
  }
  .site-head.is-stuck::after { opacity: 0.55; transform: none; }
  /* Sigla se strange putin la derulare. Doar transform: antetul nu-si
     schimba inaltimea, deci pagina nu sare. */
  .brand__mark { transition: transform 0.35s var(--ease-soft); transform-origin: left center; }
  .site-head.is-stuck .brand__mark { transform: scale(0.88); }

  .site-head__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); padding-block: var(--sp-3);
    min-width: 0;
  }

  .brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; min-width: 0; }
  .brand__mark { width: 46px; height: 46px; flex: none; }
  .brand__text { display: grid; line-height: 1.1; min-width: 0; }
  .brand__name {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 118, "wght" 700;
    font-size: 1.04rem; letter-spacing: 0.01em; color: var(--pale);
  }
  .brand__name em { font-style: normal; color: var(--lumen); }
  .brand__sub {
    font-family: var(--font-mono); font-size: 0.61rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--vapor);
  }
  /* Sub 30rem incap sigla si butonul de meniu, nu si subtitlul. */
  @media (max-width: 30rem) {
    .brand__sub { display: none; }
    .brand__mark { width: 38px; height: 38px; }
    .brand__name { font-size: 0.92rem; font-variation-settings: "wdth" 106, "wght" 700; }
  }
  @media (max-width: 22rem) {
    .brand__name { font-size: 0.74rem; letter-spacing: 0; }
  }

  /* Comutatorul de tema: un intrerupator mic, in coltul antetului. */
  .theme-toggle {
    position: relative; flex: none;
    width: 3.3rem; height: 1.85rem; border-radius: 999px;
    margin-inline-start: auto;
    background: var(--hover-tint);
    box-shadow: inset 0 0 0 1px var(--line-deep);
    color: var(--vapor);
    transition: background-color 0.4s var(--ease-soft);
  }
  .theme-toggle::before {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: calc(1.85rem - 6px); aspect-ratio: 1; border-radius: 50%;
    background: var(--lumen);
    box-shadow: 0 2px 8px rgb(var(--shadow-rgb) / 0.25);
    transition: translate 0.5s var(--ease-soft), background-color 0.4s;
  }
  .theme-toggle svg {
    position: absolute; top: 50%; width: 13px; height: 13px; translate: 0 -50%; z-index: 1;
    transition: color 0.4s, rotate 0.6s var(--ease-soft);
  }
  .theme-toggle__sun { left: 0.5rem; }
  .theme-toggle__moon { right: 0.5rem; }
  .theme-toggle:hover { background: color-mix(in oklab, var(--lumen) 16%, transparent); }
  /* Intunecat: bila e la dreapta, peste luna. */
  .theme-toggle::before { translate: 1.45rem 0; }
  .theme-toggle__moon { color: var(--on-accent); }
  .theme-toggle__sun { rotate: 90deg; }
  :root[data-theme="light"] .theme-toggle::before { translate: 0 0; }
  :root[data-theme="light"] .theme-toggle__sun { color: var(--on-accent); rotate: 0deg; }
  :root[data-theme="light"] .theme-toggle__moon { color: var(--vapor); }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle::before { translate: 0 0; }
    :root:not([data-theme="dark"]) .theme-toggle__sun { color: var(--on-accent); rotate: 0deg; }
    :root:not([data-theme="dark"]) .theme-toggle__moon { color: var(--vapor); }
  }

  /* Pe telefon antetul poarta sigla, comutatorul si meniul: eticheta
     "Meniu" ramane doar pentru cititoarele de ecran, iar comutatorul se
     strange, ca numele sa nu se loveasca de el. */
  @media (max-width: 30rem) {
    #nav-toggle > span:last-child {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
    #nav-toggle { padding: var(--sp-2) 0.6rem; }
    .theme-toggle { width: 2.9rem; height: 1.7rem; }
    .theme-toggle::before { width: calc(1.7rem - 6px); translate: 1.2rem 0; }
    .theme-toggle__sun { left: 0.42rem; }
    .theme-toggle__moon { right: 0.42rem; }
  }

  /* ---- Navigatia principala -------------------------------------------
     O pastila de lumina aluneca sub titlul vizat si se intoarce la pagina
     curenta cand cursorul pleaca. Alunecarile folosesc --ease-spring: pornesc
     pe loc si se aseaza cu o depasire abia vizibila, deci bara raspunde iute
     fara sa para mecanica. Meniurile derulante se deschid imediat si se
     inchid dupa o pauza scurta. */
  /* Antetul si sertarul folosesc acelasi arc, dar mai scurt: bara trebuie
     sa raspunda pe loc, nu sa se legene. */
  .site-head, .drawer { --dur-spring: 0.34s; }

  .nav { display: none; }
  @media (min-width: 62rem) {
    .nav { display: block; margin-inline-start: auto; }
    .theme-toggle { margin-inline-start: var(--sp-3); }
  }
  .nav ul { list-style: none; margin: 0; padding: 0; }
  .nav a, .drawer a, .drawer__sub-toggle { -webkit-tap-highlight-color: transparent; }
  .nav > ul {
    position: relative;
    display: flex; gap: 2px; padding: 4px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--pale) 4%, transparent);
    box-shadow: inset 0 0 0 1px var(--line-deep);
  }
  .nav__pill {
    position: absolute; top: 4px; left: 0; z-index: 0;
    height: calc(100% - 8px); width: 0;
    border-radius: 999px;
    background: color-mix(in oklab, var(--lumen) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lumen) 30%, transparent);
    opacity: 0; pointer-events: none;
    will-change: transform, width;
    transition:
      transform var(--dur-spring) var(--ease-spring),
      width var(--dur-spring) var(--ease-spring),
      opacity 0.18s var(--ease),
      translate var(--lift-dur) var(--ease-soft);
  }
  .nav__pill.is-on { opacity: 1; }
  /* Hover-ul cardurilor, in bara: pastila se aprinde ca un card, dar nu
     urca: ramane centrata pe verticala in bara, cu acelasi spatiu sus si
     jos. --lift-dist ramane reglajul, daca se vrea inapoi ridicarea. */
  .nav { --lift-dist: 0px; --lift-in: 0.3s; --lift-out: 0.45s; --lift-dur: var(--lift-out); }
  .nav > ul:hover, .nav > ul:focus-within { --lift-dur: var(--lift-in); }
  .nav__pill::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(to bottom, rgb(var(--glow-rgb) / 0.26), rgb(var(--glow-rgb) / 0.08));
    box-shadow: inset 0 0 0 1px rgb(var(--glow-rgb) / 0.7), 0 14px 26px -12px rgb(var(--glow-rgb) / 0.55);
    opacity: 0;
    transition: opacity var(--lift-dur) var(--ease-soft);
  }
  .nav > ul:hover > .nav__pill,
  .nav > ul:has(> li > a:focus-visible) > .nav__pill { translate: 0 calc(-1 * var(--lift-dist)); }
  .nav > ul:hover > .nav__pill::before,
  .nav > ul:has(> li > a:focus-visible) > .nav__pill::before { opacity: 1; }
  .nav__pill.no-anim { transition: none; }
  .nav { --nav-px: clamp(0.6rem, 0.2rem + 0.65vw, 0.95rem); }
  .nav > ul > li > a {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem var(--nav-px);
    color: var(--pale); text-decoration: none; white-space: nowrap;
    font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.005em;
    border-radius: 999px;
    transition: color 0.18s var(--ease), scale 0.16s var(--ease-soft),
                translate var(--lift-dur) var(--ease-soft);
  }
  .nav > ul > li:hover > a,
  .nav > ul > li > a:focus-visible { translate: 0 calc(-1 * var(--lift-dist)); }
  .nav > ul > li > a:hover,
  .nav > ul > li.is-open > a { color: var(--lumen); }
  .nav > ul > li > a:active { scale: 0.96; }
  .nav .current-menu-item > a,
  .nav .current_page_ancestor > a { color: var(--lumen); }
  /* Fara JS (deci fara pastila), pagina curenta ramane marcata. */
  .nav:not(.has-pill) > ul > .current-menu-item > a,
  .nav:not(.has-pill) > ul > .current_page_ancestor > a { background: var(--hover-tint); }

  /* Iconitele din bara apar doar de la latimea la care incap langa sigla;
     sub ea bara ramane doar text, ca sa nu se inghesuie. La hover iconita
     creste putin, pe arc, fara sa se inclinte. */
  .nav > ul > li > a > .menu-ico {
    display: none; flex: none;
    width: 1.05rem; height: 1.05rem;
    opacity: 0.62;
    transition: opacity 0.2s var(--ease),
                scale var(--dur-spring) var(--ease-spring);
  }
  @media (min-width: 72rem) { .nav > ul > li > a > .menu-ico { display: block; } }
  .nav > ul > li:hover > a > .menu-ico,
  .nav > ul > li > a:focus-visible > .menu-ico,
  .nav > ul > li.is-open > a > .menu-ico { opacity: 1; scale: 1.12; }
  .nav > ul > .current-menu-item > a > .menu-ico,
  .nav > ul > .current_page_ancestor > a > .menu-ico { opacity: 1; }

  .nav li { position: relative; }
  .nav > ul > .menu-item-has-children > a { padding-inline-end: calc(var(--nav-px) + 0.75rem); }
  .nav > ul > .menu-item-has-children > a::before {
    content: ""; position: absolute; right: var(--nav-px); top: 50%;
    width: 5px; height: 5px; margin-top: -4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    rotate: 45deg; opacity: 0.6;
    transition: rotate var(--dur-spring) var(--ease-spring), margin-top 0.3s var(--ease-soft), opacity 0.2s var(--ease);
  }
  .nav .menu-item-has-children:hover > a::before,
  .nav .menu-item-has-children:focus-within > a::before,
  .nav .menu-item-has-children.is-open > a::before { rotate: 225deg; margin-top: -1px; opacity: 1; }

  .nav .sub-menu {
    position: absolute; top: calc(100% + 0.7rem); left: 50%; z-index: 20;
    display: block; width: max-content; min-width: 18rem; max-width: 28rem;
    padding: 6px;
    background: color-mix(in oklab, var(--night) 97%, transparent);
    border: 1px solid var(--line-deep);
    border-radius: var(--radius);
    box-shadow:
      0 1px 0 0 color-mix(in oklab, var(--pale) 6%, transparent) inset,
      0 28px 56px -20px rgb(var(--shadow-rgb) / 0.55);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, -6px) scale(0.97);
    transform-origin: top center;
    will-change: opacity, transform;
    /* La iesire, meniul asteapta putin: cursorul are timp sa coboare in el
       chiar daca taie un colt. */
    transition: opacity 0.12s var(--ease) 0.03s, transform 0.16s var(--ease-soft) 0.03s, visibility 0s 0.15s;
  }
  /* Registrele au titluri lungi: meniul lor e mai lat si pleaca de la stanga. */
  .nav .menu-item-221 > .sub-menu {
    left: 0; width: 28rem; max-width: 28rem;
    transform: translate(0, -6px) scale(0.97); transform-origin: top left;
  }
  /* Puntea invizibila peste golul dintre titlu si meniu: hover-ul nu se rupe. */
  .nav .sub-menu::before {
    content: ""; position: absolute; left: -0.75rem; right: -0.75rem;
    bottom: 100%; height: calc(0.7rem + 8px);
  }
  .nav li:hover > .sub-menu,
  .nav li:focus-within > .sub-menu,
  .nav li.is-open > .sub-menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
    transition: opacity 0.1s var(--ease), transform var(--dur-spring) var(--ease-spring), visibility 0s;
  }
  .nav .menu-item-221:hover > .sub-menu,
  .nav .menu-item-221:focus-within > .sub-menu,
  .nav .menu-item-221.is-open > .sub-menu { transform: translate(0, 0) scale(1); }
  /* Trecerea pe alt titlu inchide meniul vecin pe loc. */
  .nav > ul:has(> li.is-open) > li:not(.is-open):not(:focus-within) > .sub-menu { transition-delay: 0s; }
  /* Din meniu in meniu: cand unul e deja deschis, vecinul nu mai „cade",
     doar se intrepatrunde prin opacitate cu cel care pleaca. */
  .nav.is-warm .sub-menu { transform: translate(-50%, 0) scale(1); }
  .nav.is-warm .menu-item-221 > .sub-menu { transform: translate(0, 0) scale(1); }
  .nav.is-warm li.is-open > .sub-menu li { transition-delay: 0s; }
  /* Escape inchide meniul chiar daca focusul ramane pe titlu. */
  .nav li.is-closed > .sub-menu { opacity: 0; visibility: hidden; transition: opacity 0.12s var(--ease), visibility 0s 0.12s; }
  .nav .menu-item-has-children.is-closed > a::before { rotate: 45deg; margin-top: -4px; }

  .nav .sub-menu li {
    opacity: 0; transform: translateY(-3px);
    transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
  }
  .nav li:hover > .sub-menu li,
  .nav li:focus-within > .sub-menu li,
  .nav li.is-open > .sub-menu li {
    opacity: 1; transform: none;
    transition: opacity 0.14s var(--ease) calc(var(--i, 0) * 8ms + 8ms),
                transform var(--dur-spring) var(--ease-spring) calc(var(--i, 0) * 8ms + 8ms);
  }
  .nav .sub-menu a {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.45rem 0.85rem 0.45rem 0.45rem;
    border-radius: var(--radius-sm);
    color: var(--vapor); text-decoration: none;
    font-size: var(--t-sm); font-weight: 400; line-height: 1.35; white-space: normal;
    transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
  }
  .nav .sub-menu a:hover,
  .nav .sub-menu a:focus-visible { color: var(--pale); }
  .nav .sub-menu .current-menu-item > a { color: var(--lumen); }
  /* Iconita fiecarui submeniu sta intr-o placuta care se aprinde odata cu
     randul vizat. */
  .nav .sub-menu .menu-ico {
    flex: none; box-sizing: border-box;
    width: 2rem; height: 2rem; padding: 0.42rem;
    border-radius: 9px;
    color: var(--vapor);
    background: var(--hover-tint);
    box-shadow: inset 0 0 0 1px var(--line-deep);
    transition: color 0.18s var(--ease), background-color 0.18s var(--ease),
                box-shadow 0.18s var(--ease), scale var(--dur-spring) var(--ease-spring);
  }
  .nav .sub-menu a:hover .menu-ico,
  .nav .sub-menu a:focus-visible .menu-ico,
  .nav .sub-menu .current-menu-item > a .menu-ico {
    color: var(--lumen);
    background: rgb(var(--glow-rgb) / 0.14);
    box-shadow: inset 0 0 0 1px rgb(var(--glow-rgb) / 0.34);
  }
  .nav .sub-menu a:hover .menu-ico,
  .nav .sub-menu a:focus-visible .menu-ico { scale: 1.07; }
  .nav .sub-menu a:active .menu-ico { scale: 0.94; }
  /* Fara JS, elementul vizat primeste propriul fundal. */
  .nav:not(.has-hl) .sub-menu a:hover,
  .nav:not(.has-hl) .sub-menu a:focus-visible { background-color: var(--hover-tint); }
  /* Cu JS, un singur fundal aluneca de la un element la altul in meniu,
     ca pastila din bara: textul ramane pe loc, doar lumina se muta. */
  .sub-menu__hl {
    position: absolute; top: 0; left: 6px; right: 6px; z-index: 0;
    height: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--lumen) 11%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lumen) 16%, transparent);
    opacity: 0; pointer-events: none;
    will-change: transform, height;
    transition:
      transform var(--dur-spring) var(--ease-spring),
      height var(--dur-spring) var(--ease-spring),
      opacity 0.18s var(--ease);
  }
  .sub-menu__hl.is-on { opacity: 1; }
  .sub-menu__hl.no-anim { transition: opacity 0.18s var(--ease); }

  /* ---- Butonul de meniu (telefon, tableta) ----------------------------- */
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    color: var(--pale); font-size: var(--t-sm); font-weight: 500;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 999px;
    background: var(--hover-tint);
    box-shadow: inset 0 0 0 1px var(--line-deep);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease);
  }
  .nav-toggle:hover { background: color-mix(in oklab, var(--lumen) 16%, transparent); color: var(--lumen); }
  .nav-toggle:active { transform: scale(0.94); }
  @media (min-width: 62rem) { .site-head .nav-toggle { display: none; } }
  .nav-toggle__bars { display: grid; gap: 3px; }
  .nav-toggle__bars i {
    display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
    transform-origin: center;
    transition: width var(--dur-spring) var(--ease-spring),
                transform var(--dur-spring) var(--ease-spring),
                opacity 0.2s var(--ease);
  }
  .nav-toggle__bars i:nth-child(2) { width: 11px; transition-delay: 30ms; }
  .nav-toggle__bars i:nth-child(3) { width: 7px; transition-delay: 60ms; }
  .nav-toggle:hover .nav-toggle__bars i { width: 16px; }
  /* Deschis, cele trei linii devin un X: cele de margine se intalnesc la
     mijloc (3px spatiu + 2px grosime = 5px) si se rotesc, cea din mijloc
     se strange. Acelasi buton inchide meniul. */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i { width: 16px; transition-delay: 0s; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { transform: scaleX(0); opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* ---- Sertarul mobil --------------------------------------------------
     Coboara de sub antet, care ramane pe loc cu sigla, tema si butonul de
     meniu (devenit X). Sticla mata lasa pagina sa se ghiceasca dedesubt.
     --drawer-top vine din JS: marginea de jos a antetului. JS pune
     .is-closing cat dureaza iesirea, apoi il ascunde. */
  .drawer {
    position: fixed; inset: var(--drawer-top, 0) 0 0; z-index: 99;
    background: color-mix(in oklab, var(--night) 86%, transparent);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    color: var(--vapor);
    padding: var(--sp-5) 0 calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; display: none;
    overscroll-behavior: contain;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .drawer { background: var(--night); }
  }
  .drawer.is-open { display: block; animation: drawer-in 0.34s var(--ease-soft) both; }
  .drawer.is-closing { display: block; animation: drawer-out 0.24s var(--ease-glide) 0.03s both; pointer-events: none; }
  @keyframes drawer-in {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes drawer-out {
    from { opacity: 1; clip-path: inset(0 0 0 0); }
    to   { opacity: 0; clip-path: inset(0 0 100% 0); }
  }
  /* Butonul din antet inchide meniul; capul vechi al sertarului ramane doar
     ca structura in HTML. */
  .drawer__head { display: none; }
  .drawer ul { list-style: none; margin: 0; padding: 0; }
  .drawer nav > ul > li { border-bottom: 1px solid var(--line-deep); }
  /* Randurile intra pe rand, de sus, iesind din ceata; la inchidere pleaca
     toate odata, inainte ca panoul sa se stranga. */
  .drawer.is-open nav > ul > li,
  .drawer.is-open .drawer__foot {
    animation: drawer-item 0.42s var(--ease-soft) both;
    animation-delay: calc(var(--i, 0) * 28ms + 40ms);
  }
  .drawer.is-closing nav > ul > li,
  .drawer.is-closing .drawer__foot { animation: drawer-item-out 0.16s var(--ease) both; }
  @keyframes drawer-item {
    from { opacity: 0; transform: translateY(-12px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  @keyframes drawer-item-out {
    to { opacity: 0; transform: translateY(-6px); }
  }
  .drawer a {
    display: block; padding: var(--sp-3) 0; color: var(--pale);
    text-decoration: none; font-size: var(--t-xl);
    font-family: var(--font-display);
    font-variation-settings: "wdth" 106, "wght" 600;
    letter-spacing: -0.015em;
    transition: color 0.15s var(--ease), translate var(--dur-spring) var(--ease-spring), scale 0.14s var(--ease);
  }
  .drawer a:hover { color: var(--lumen); translate: 4px 0; }
  .drawer a:active { scale: 0.985; }
  .drawer .current-menu-item > a { color: var(--lumen); }
  /* Titlurile principale: iconita intr-o placuta, ca in submeniurile din bara. */
  .drawer nav > ul > li > a { display: flex; align-items: center; gap: var(--sp-3); }
  .drawer nav > ul > li > a > .menu-ico {
    flex: none; box-sizing: border-box;
    width: 2.4rem; height: 2.4rem; padding: 0.55rem;
    border-radius: 12px;
    color: var(--vapor);
    background: var(--hover-tint);
    box-shadow: inset 0 0 0 1px var(--line-deep);
    transition: color 0.18s var(--ease), background-color 0.18s var(--ease),
                box-shadow 0.18s var(--ease), scale var(--dur-spring) var(--ease-spring);
  }
  .drawer nav > ul > li > a:hover > .menu-ico,
  .drawer nav > ul > .current-menu-item > a > .menu-ico,
  .drawer nav > ul > .current_page_ancestor > a > .menu-ico {
    color: var(--lumen);
    background: rgb(var(--glow-rgb) / 0.12);
    box-shadow: inset 0 0 0 1px rgb(var(--glow-rgb) / 0.3);
  }
  .drawer .sub-menu {
    padding-block-end: var(--sp-3);
    /* Linia submeniului coboara din mijlocul placutei de deasupra. */
    margin-inline-start: 1.2rem;
  }
  .drawer .sub-menu a {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: var(--t-sm); font-family: var(--font-body);
    font-variation-settings: normal; line-height: 1.4;
    color: var(--vapor); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    border-inline-start: 1px solid var(--line-deep);
  }
  .drawer .sub-menu .menu-ico { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.05rem; opacity: 0.7; transition: opacity 0.15s var(--ease); }
  .drawer .sub-menu a:hover { color: var(--lumen); border-color: var(--lumen); }
  .drawer .sub-menu a:hover .menu-ico,
  .drawer .sub-menu .current-menu-item > a .menu-ico { opacity: 1; }
  .drawer .sub-menu .current-menu-item > a { border-color: var(--lumen); }

  /* Acordeon: doar cand JS l-a armat. Fara JS submeniurile raman deschise. */
  .drawer[data-accordion] .menu-item-has-children {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
  }
  .drawer[data-accordion] .menu-item-has-children > .sub-menu {
    grid-column: 1 / -1;
    overflow: hidden; max-height: 0; visibility: hidden;
    padding-block-end: 0;
    transition: max-height 0.22s var(--ease-soft), visibility 0s 0.22s, padding 0.22s var(--ease-soft);
  }
  .drawer[data-accordion] .menu-item-has-children.is-expanded > .sub-menu {
    visibility: visible; padding-block-end: var(--sp-3);
    transition: max-height 0.28s var(--ease-soft), visibility 0s, padding 0.22s var(--ease-soft);
  }
  .drawer__sub-toggle {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    color: var(--vapor);
    background: var(--hover-tint);
    transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.12s var(--ease);
  }
  .drawer__sub-toggle:hover { color: var(--lumen); }
  .drawer__sub-toggle:active { transform: scale(0.92); }
  .drawer__sub-toggle svg { width: 14px; height: 14px; transition: rotate var(--dur-spring) var(--ease-spring); }
  .is-expanded > .drawer__sub-toggle { color: var(--lumen); background: color-mix(in oklab, var(--lumen) 15%, transparent); }
  .is-expanded > .drawer__sub-toggle svg { rotate: 180deg; }

  /* Miscare redusa: antetul si sertarul raman vii (vezi base), dar fara
     depasirea arcului, iar sertarul si randurile lui doar se estompeaza, fara
     sa alunece. */
  @media (prefers-reduced-motion: reduce) {
    .site-head, .drawer, .tip-wrap { --ease-spring: var(--ease-soft); --dur-spring: 0.32s; }
    .drawer.is-open,
    .drawer.is-open nav > ul > li,
    .drawer.is-open .drawer__foot { animation-name: drawer-fade-in; }
    .drawer.is-closing { animation-name: drawer-fade-out; }
    .drawer.is-closing nav > ul > li,
    .drawer.is-closing .drawer__foot { animation-name: none; }
  }
  @keyframes drawer-fade-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes drawer-fade-out { from { opacity: 1; } to { opacity: 0; } }

  .drawer .nav-toggle { color: var(--vapor); }
  .drawer .nav-toggle:hover { color: var(--lumen); }
  #drawer-close::before {
    content: ""; width: 12px; height: 12px;
    background:
      linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
    transition: rotate 0.3s var(--ease-soft);
  }
  #drawer-close:hover::before { rotate: 90deg; }
  .drawer .brand__name { color: var(--pale); }

  /* Datele de contact din bara utilitara, copiate de JS la baza meniului. */
  .drawer__foot {
    display: grid; gap: var(--sp-3);
    margin-block-start: var(--sp-6); padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius);
    background: var(--hover-tint); box-shadow: inset 0 0 0 1px var(--line-deep);
    font-size: var(--t-sm); color: var(--vapor);
  }
  .drawer .drawer__foot a {
    display: inline-flex; padding: 0; color: inherit;
    font: inherit; font-variation-settings: normal; letter-spacing: normal;
  }
  .drawer__foot .util-bar__item { gap: var(--sp-3); }
  .drawer__foot svg { width: 16px; height: 16px; flex: none; color: var(--lumen); }

  /* Cat meniul e deschis, antetul se uneste cu el: aceeasi sticla, fara
     umbra si fara firul de lumina dintre ele. */
  .site-head.is-menu { background: color-mix(in oklab, var(--night) 92%, transparent); box-shadow: none; }
  .site-head.is-menu::after { opacity: 0; }

  /* ---- EROUL: fatada, la scara intreaga -------------------------------- */
  .hero {
    position: relative;
    min-height: min(calc(100svh - var(--chrome)), 54rem);
    display: grid; align-items: center;
    padding-block: var(--sp-5);
    overflow: hidden;
    isolation: isolate;
  }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 42% 46%;
  }
  /* Voalul: textul trebuie sa stea pe intuneric, nu pe sticla. */
  .hero__scrim {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(to top, var(--deep) 2%, rgb(var(--scrim-deep) / 0.82) 24%, rgb(var(--scrim-deep) / 0.18) 58%, rgb(var(--scrim-night) / 0.34) 100%),
      linear-gradient(to right, rgb(var(--scrim-night) / 0.62), rgb(var(--scrim-night) / 0.04) 58%);
  }
  /* Doua fotografii: fatada la amurg pentru tema intunecata, fatada ziua
     pentru cea deschisa. Cea ascunsa are loading="lazy" si nu se descarca. */
  .hero__day { display: none; }
  :root[data-theme="light"] .hero__day { display: block; height: 100%; }
  :root[data-theme="light"] .hero__night { display: none; }
  :root[data-theme="light"] .hero__scrim {
    background:
      linear-gradient(to top, var(--deep) 2%, rgb(var(--scrim-deep) / 0.86) 26%, rgb(var(--scrim-deep) / 0.3) 62%, rgb(var(--scrim-deep) / 0.2) 100%),
      linear-gradient(to right, rgb(var(--scrim-deep) / 0.88), rgb(var(--scrim-deep) / 0.55) 45%, rgb(var(--scrim-deep) / 0.05) 75%);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .hero__day { display: block; height: 100%; }
    :root:not([data-theme="dark"]) .hero__night { display: none; }
    :root:not([data-theme="dark"]) .hero__scrim {
      background:
        linear-gradient(to top, var(--deep) 2%, rgb(var(--scrim-deep) / 0.86) 26%, rgb(var(--scrim-deep) / 0.3) 62%, rgb(var(--scrim-deep) / 0.2) 100%),
        linear-gradient(to right, rgb(var(--scrim-deep) / 0.88), rgb(var(--scrim-deep) / 0.55) 45%, rgb(var(--scrim-deep) / 0.05) 75%);
    }
  }

  .hero__title {
    font-size: var(--t-3xl);
    font-variation-settings: "wdth" 125, "wght" 780;
    /* Romana are diacritice cu coada dedesubt (t, s). Sub 0.92 coada lui "t"
       din "nationale" ajunge in randul urmator. */
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: var(--pale);
    max-width: 15ch;
    margin-block: var(--sp-4) var(--sp-5);
  }
  /* A doua linie se ingusteaza pe axa de latime a fontului. Contrastul e de
     latime, nu de culoare - lucru pe care doar un font variabil il poate face. */
  .hero__title .accent {
    display: block;
    /* Mai mica decat titlul si cu aer deasupra, ca virgula lui "ț" din
       "naționale" sa nu atinga randul de dedesubt. */
    font-size: 0.6em;
    margin-block-start: 0.42em;
    font-variation-settings: "wdth" 80, "wght" 430;
    letter-spacing: -0.005em;
    color: var(--vapor);
  }
  .hero__lede {
    font-size: var(--t-lg); color: var(--vapor);
    max-width: 46ch; margin-block-end: var(--sp-6);
  }

  /* ---- Butoane ---------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 0.82rem 1.5rem; border-radius: 999px;
    font-weight: 600; font-size: var(--t-sm); text-decoration: none;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
                background 0.18s var(--ease), color 0.18s var(--ease),
                border-color 0.18s var(--ease);
  }
  .btn svg { width: 15px; height: 15px; }

  .btn--primary {
    background: var(--lumen); color: var(--on-accent);
    box-shadow: 0 12px 34px -10px rgb(var(--glow-rgb) / 0.55);
  }
  .btn--primary:hover {
    background: var(--lumen-hot); color: var(--on-accent);
    box-shadow: 0 18px 44px -10px rgb(var(--glow-rgb) / 0.7);
  }
  .btn--ghost { border: 1px solid var(--line-deep); color: var(--pale); }
  .btn--ghost:hover { background: var(--hover-tint); color: var(--pale); border-color: var(--vapor); }

  .band--paper .btn--primary { box-shadow: none; }

  /* Butonul din erou poarta rama si sticla unui ochi de fatada (.win), iar
     hover-ul vine din .card-hover, ca la carduri. */
  .hero__cta {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    padding: 0.95rem 1.5rem;
    font-weight: 600; font-size: var(--t-sm); text-decoration: none;
    color: var(--pale);
    border: 1px solid var(--mullion);
    border-radius: var(--radius-sm);
    background: linear-gradient(to bottom, var(--glass-hi), var(--glass) 46%, var(--night));
  }
  .hero__cta svg {
    width: 15px; height: 15px; color: var(--lumen);
    transition: translate var(--lift-dur, 0.5s) var(--ease-soft);
  }
  .hero__cta:is(:hover, :focus-visible) { color: var(--lumen-hot); }
  .hero__cta:is(:hover, :focus-visible) svg { translate: 3px 0; }
  :root[data-theme="light"] .hero__cta:is(:hover, :focus-visible) { color: var(--lumen); }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .hero__cta:is(:hover, :focus-visible) { color: var(--lumen); }
  }

  /* ---- SEMNATURA: peretele de ferestre --------------------------------- */
  .facade { position: relative; overflow: hidden; }
  /* Fatada reala, foarte stinsa, in spate: da textura, nu concureaza. */
  .facade__wall {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    opacity: var(--wall-opacity);
  }
  .facade__wall img { width: 100%; height: 100%; object-fit: cover; }
  .facade::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, var(--deep), rgb(var(--scrim-deep) / 0.62) 42%, var(--deep));
  }

  /* Ochiurile nu mai stau lipite intr-o singura tabla de sticla: fiecare isi
     poarta rama de aluminiu si respira. */
  .windows {
    display: grid; gap: var(--sp-4);
    grid-template-columns: 1fr;
    margin-block-start: var(--sp-6);
  }
  /* Sub 26rem, doua coloane lasa numelor sub 110px si cuvinte ca
     "Liberalitati" nu mai incap. Un singur ochi pe rand. */
  @media (min-width: 26rem) { .windows { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 46rem) { .windows { grid-template-columns: repeat(3, 1fr); } }
  /* Cinci coloane: zece registre umplu exact doua randuri. */
  @media (min-width: 68rem) { .windows { grid-template-columns: repeat(5, 1fr); } }

  /* Un ochi de fatada. Stins pana cand lumina ajunge la el. */
  .win {
    position: relative;
    display: flex; flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    min-height: 16.5rem;
    padding: var(--sp-4);
    text-decoration: none; color: inherit;
    border: 1px solid var(--mullion);
    border-radius: var(--radius-sm);
    background: linear-gradient(to bottom, var(--glass-hi), var(--glass) 46%, var(--night));
    /* Ridicarea, umbra si lumina de la hover vin din .card-hover (utilities). */
  }
  /* Traversa: fiecare ochi de perete-cortina are una. */
  .win__transom {
    position: absolute; inset-inline: 0; top: 2.9rem;
    height: 1px; background: var(--mullion); opacity: 0.72;
  }

  /* Capul umple exact pana la traversa, ca numele si descrierea sa se
     centreze intre traversa si linia anului (margin auto deasupra numelui
     si deasupra anului imparte spatiul liber in doua). */
  .win__head {
    display: flex; align-items: baseline; gap: var(--sp-3); position: relative;
    min-height: calc(2.9rem - var(--sp-4));
  }
  .win__code {
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: 0.1em; color: var(--lumen);
  }
  .win__name {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 104, "wght" 600;
    font-size: var(--t-lg); line-height: 1.12; letter-spacing: -0.015em;
    color: var(--pale); position: relative;
    margin-block-start: auto; padding-block-start: var(--sp-3);
    transition: color var(--lift-dur, 0.5s) var(--ease-soft);
  }
  .win__what {
    margin-block-end: var(--sp-3);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; position: relative;
    flex: 0 1 auto; min-height: 0;
    font-size: var(--t-sm); line-height: 1.45; color: var(--vapor);
    transition: color var(--lift-dur, 0.5s) var(--ease-soft);
  }
  .win__year {
    margin-block-start: auto;
    font-family: var(--font-mono); font-size: var(--t-xs); position: relative;
    color: var(--vapor); font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--line-deep); padding-block-start: var(--sp-3);
  }

  .win:hover .win__name, .win:focus-visible .win__name { color: var(--lumen-hot); }
  .win:hover .win__what, .win:focus-visible .win__what { color: var(--pale); }
  :root[data-theme="light"] .win:hover .win__name, :root[data-theme="light"] .win:focus-visible .win__name { color: var(--lumen); }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .win:hover .win__name,
    :root:not([data-theme="dark"]) .win:focus-visible .win__name { color: var(--lumen); }
  }

  /* Aprinderea in secventa, cand peretele intra in cadru. Ferestrele se
     ascund abia dupa ce main.js pune [data-armed]: fara JS raman aprinse.
     Fill-mode "backwards", nu "both": dupa aprindere animatia elibereaza
     umbra si opacitatea, ca hover-ul sa le poata anima lin. */
  .windows[data-armed] .win { opacity: 0; }
  .windows[data-armed].is-lit .win {
    opacity: 1;
    animation: window-on 1s var(--ease) calc(var(--i, 0) * 95ms) backwards;
  }
  @keyframes window-on {
    0%   { opacity: 0; }
    38%  { opacity: 1; box-shadow: inset 0 0 0 1px var(--lumen), 0 0 54px -4px rgb(var(--glow-rgb) / 0.6); }
    100% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .windows[data-armed] .win { opacity: 1; animation: none; }
  }

  /* ---- Cifra mare ------------------------------------------------------- */
  .scale__n {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: var(--t-mega);
    line-height: 0.82;
    letter-spacing: -0.045em;
    color: var(--pale);
    font-variant-numeric: tabular-nums;
    margin-block: var(--sp-4) var(--sp-4);
  }
  .scale__label {
    font-family: var(--font-mono); font-size: var(--t-sm);
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--lumen);
  }
  .scale__rail {
    margin-block-start: var(--sp-6); padding-block-start: var(--sp-5);
    border-top: 1px solid var(--line-deep);
    display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8);
  }
  .scale__item { display: grid; gap: var(--sp-1); }
  .scale__item b {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 116, "wght" 700;
    font-size: var(--t-xl); color: var(--pale); font-variant-numeric: tabular-nums;
  }
  .scale__item span { font-size: var(--t-sm); color: var(--vapor); }

  /* ---- Contoare ---------------------------------------------------------
     Numarul curge de la 0 (vezi main.js). Cifrele tabulare tin latimea
     fiecarei cifre fixa, deci numarul nu tremura in timp ce creste. */
  .scale__item .count__n { font-size: inherit; color: inherit; }
  .count__sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  /* ---- Carduri ---------------------------------------------------------- */
  .card {
    background: var(--tint);
    border: 1px solid var(--line-deep);
    border-radius: var(--radius);
    padding: var(--sp-5);
  }
  .card h3 { font-size: var(--t-lg); }
  .card p { font-size: var(--t-sm); color: var(--vapor); }
  .band--paper .card { background: var(--paper); border-color: var(--line-paper); }
  .band--paper .card p { color: var(--ink-2); }

  /* Hover-ul cardurilor-link vine din .card-hover (utilities). */
  .card--link { display: block; text-decoration: none; color: inherit; position: relative; }

  .grid-auto {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  /* Doua coloane fixe: un singur card ocupa jumatate, ca pe pagina-mama. */
  .grid-auto--pair {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(17rem, calc(50% - var(--sp-4) / 2))), 1fr));
  }

  /* ---- Ghid verificare: pasi, iconite si tarife in loc de paragrafe ----- */
  .ghid__part + .ghid__part { margin-block-start: var(--sp-8); }
  .band--paper .ghid__h2 { font-size: var(--t-xl); }
  .ghid__law {
    margin-block-start: var(--sp-4);
    font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.6;
    color: var(--vapor);
  }
  .ico {
    flex: none; display: grid; place-items: center;
    width: 2.75rem; aspect-ratio: 1; border-radius: 12px;
    color: var(--lumen); background: rgb(var(--glow-rgb) / 0.12);
    box-shadow: inset 0 0 0 1px rgb(var(--glow-rgb) / 0.22);
  }
  .ico svg { width: 1.4rem; height: 1.4rem; }
  .ico--lg { width: 3.5rem; border-radius: 16px; }
  .ico--lg svg { width: 1.8rem; height: 1.8rem; }
  .tag {
    align-self: flex-start;
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    color: var(--lumen); border: 1px solid rgb(var(--glow-rgb) / 0.45);
  }

  .who, .steps, .req, .facts, .prices { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
  .who__item, .step, .req__item, .fact, .price {
    background: var(--paper); border: 1px solid var(--line-paper);
    border-radius: var(--radius); padding: var(--sp-5);
  }

  .who { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .who__item { display: flex; flex-direction: column; gap: var(--sp-3); }
  .who__name { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
  .who__note { font-size: var(--t-sm); color: var(--vapor); line-height: 1.5; }

  /* ---- Tooltip pe pastila: nota apare la hover, la focus si la atingere.
     Sta sub pastila, aliniata la stanga ei, ca sa nu iasa din ecran pe
     telefon. Puntea ::after tine hover-ul viu cat cursorul coboara spre
     text, ca tooltipul sa poata fi citit si selectat. */
  .tip-wrap { position: relative; align-self: flex-start; display: inline-flex; }
  .tag--tip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    cursor: help;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .tag--tip svg { width: 0.85rem; height: 0.85rem; opacity: 0.75; transition: opacity 0.2s var(--ease), scale var(--dur-spring) var(--ease-spring); }
  .tip-wrap:hover .tag--tip,
  .tag--tip:focus-visible,
  .tip-wrap.is-open .tag--tip { background: rgb(var(--glow-rgb) / 0.12); border-color: rgb(var(--glow-rgb) / 0.75); }
  .tip-wrap:hover .tag--tip svg,
  .tag--tip:focus-visible svg { opacity: 1; scale: 1.12; }
  .tip {
    position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 30;
    width: min(21rem, calc(100vw - 2.5rem));
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--t-sm); line-height: 1.5; color: var(--pale);
    background: var(--surface);
    border: 1px solid var(--line-deep); border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px -16px rgb(var(--shadow-rgb) / 0.45), 0 2px 6px -2px rgb(var(--shadow-rgb) / 0.2);
    opacity: 0; visibility: hidden;
    translate: 0 -4px; scale: 0.98; transform-origin: 1.5rem top;
    transition: opacity 0.14s var(--ease), translate 0.2s var(--ease), scale 0.2s var(--ease), visibility 0s 0.2s;
  }
  /* Sageata, aliniata cu iconita din pastila. */
  .tip::before {
    content: ""; position: absolute; top: -6px; left: 1.1rem;
    width: 10px; height: 10px; rotate: 45deg;
    background: inherit;
    border-left: 1px solid var(--line-deep); border-top: 1px solid var(--line-deep);
  }
  .tip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.7rem; }
  .tip-wrap:hover .tip,
  .tip-wrap:has(.tag--tip:focus-visible) .tip,
  .tip-wrap.is-open .tip {
    opacity: 1; visibility: visible; translate: 0 0; scale: 1;
    transition: opacity 0.16s var(--ease), translate var(--dur-spring) var(--ease-spring), scale var(--dur-spring) var(--ease-spring), visibility 0s;
  }
  /* Escape il inchide pana cand cursorul sau focusul pleaca. */
  .tip-wrap.is-dismissed .tip { opacity: 0; visibility: hidden; transition: none; }

  .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--sp-4); }
  .step { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
  .step__n {
    position: absolute; top: var(--sp-4); right: var(--sp-5);
    font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1;
    color: rgb(var(--glow-rgb) / 0.22);
  }
  .band--paper .step__title { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; margin-block-start: var(--sp-2); }
  .step__text { font-size: var(--t-base); line-height: 1.55; color: var(--vapor); }
  .step__text strong { color: var(--pale); }

  .dl-label { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--vapor); text-transform: uppercase; letter-spacing: 0.08em; }
  /* O singura coloana; pastilele iau latimea celei mai late, ca marginile sa se alinieze. */
  .dl-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, max-content); gap: var(--sp-2); }
  .dl {
    display: flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em;
    color: var(--ink-2); text-decoration: none;
    border: 1px solid var(--line-paper); border-radius: 999px; padding: 0.3rem 0.8rem;
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
  }
  .dl svg { flex: none; width: 1rem; height: 1rem; }
  .dl:hover, .dl:focus-visible { border-color: var(--indigo); color: var(--indigo); }

  .iban {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
    border: 1px dashed rgb(var(--glow-rgb) / 0.45); background: rgb(var(--glow-rgb) / 0.06);
  }
  .iban__label, .iban__bank { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--vapor); letter-spacing: 0.04em; }
  .iban__label { text-transform: uppercase; letter-spacing: 0.08em; }
  .iban__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  .iban__code { font-family: var(--font-mono); font-size: var(--t-base); font-weight: 600; color: var(--pale); letter-spacing: 0.02em; }

  .hint { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; color: var(--vapor); }
  .hint svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; color: var(--lumen); }

  .ticks { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
  .ticks li { position: relative; padding-inline-start: 1.6rem; font-size: var(--t-base); line-height: 1.45; }
  .ticks li::before {
    content: ""; position: absolute; left: 0; top: 0.2em; width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: rgb(var(--glow-rgb) / 0.16);
  }
  .ticks li::after {
    content: ""; position: absolute; left: 0.38rem; top: calc(0.2em + 0.24rem);
    width: 0.32rem; height: 0.52rem;
    border: solid var(--lumen); border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .ticks .muted { display: block; font-size: var(--t-sm); color: var(--vapor); }

  .req { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .req__item { display: flex; align-items: center; gap: var(--sp-4); }
  .req__body { display: flex; flex-direction: column; gap: 0.2rem; }
  .req__what { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
  .req__for { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--lumen); }
  .ghid abbr { text-decoration: none; cursor: help; }

  .facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .fact { display: flex; flex-direction: column; gap: var(--sp-3); }
  .fact p { font-size: var(--t-base); line-height: 1.55; color: var(--vapor); }
  .fact strong { display: block; color: var(--pale); font-weight: 650; }
  .fact .muted { font-size: var(--t-sm); }

  .prices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .price { display: flex; flex-direction: column; gap: var(--sp-2); }
  .price .ico { margin-block-end: var(--sp-2); }
  .price__label { font-size: var(--t-sm); color: var(--vapor); line-height: 1.4; }
  .price__sum { font-size: var(--t-lg); font-weight: 600; color: var(--pale); }
  .price__sum b { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--lumen); }
  .price__sum small { font-size: var(--t-sm); font-weight: 500; color: var(--vapor); }

  /* ---- Link-uri utile: Uniunea si camerele, fiecare cu sigla ei --------- */
  .links { margin-block-start: var(--sp-8); }
  .band--paper .links__title { font-size: var(--t-2xl); }
  .band--paper .links__sub {
    margin-block-start: var(--sp-7);
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--vapor);
  }
  .inst-grid {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    margin-block-start: var(--sp-5);
  }
  .inst--wide { grid-column: 1 / -1; }
  .inst__card {
    display: flex; align-items: center; gap: var(--sp-4);
    height: 100%; padding: var(--sp-4);
  }
  .band--paper a.inst__card, .band--paper a.inst__card:hover { color: var(--pale); }
  /* Siglele vin pe fond alb, deci stau pe o placa alba in ambele teme,
     ca un sigiliu tiparit. */
  .inst__plate {
    flex: none; width: 4.5rem; aspect-ratio: 1;
    display: grid; place-items: center; overflow: hidden;
    background: #fff; border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgb(28 34 51 / 0.08);
  }
  .inst--wide .inst__plate { width: 5.5rem; }
  .inst__plate img { width: 100%; height: 100%; object-fit: contain; }
  /* Suceava nu publica o sigla utilizabila: monograma intr-un inel. */
  .inst__plate--mono {
    font-family: var(--font-prose); font-weight: 700; font-size: 1.3rem;
    letter-spacing: 0.02em; color: #2f34a8;
    background: radial-gradient(circle, #fff 56%, #2f34a8 57%, #2f34a8 59%, #fff 60%);
  }
  .inst__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
  .inst__kind {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--vapor);
  }
  .inst__name { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
  .inst__url { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--lumen); overflow-wrap: anywhere; }
  /* Pe pagina de contact numele sunt adrese de departament, nu institutii:
     un pas mai mic, ca sa nu concureze cu adresa de email de sub ele. */
  .inst-grid--contact .inst__name { font-size: var(--t-base); line-height: 1.3; }
  .inst__go {
    flex: none; align-self: flex-start; width: 1.1rem; color: var(--vapor);
    transition: transform 0.5s var(--ease-soft), color 0.5s var(--ease-soft);
  }
  .inst__card:hover .inst__go, .inst__card:focus-visible .inst__go { transform: translate(2px, -2px); color: var(--lumen); }

  /* Indexul din capul paginii /registre: doua randuri de cate cinci. Cardurile
     poarta doar codul si numele, deci sunt mici - codul sus, numele jos. */
  .index-reg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  @media (min-width: 40rem) { .index-reg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 62rem) { .index-reg { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .index-reg .card {
    display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--sp-4); min-height: 5.5rem; padding: var(--sp-4);
  }
  .index-reg .card h3 {
    font-size: var(--t-sm); line-height: 1.3; text-wrap: balance;
    margin-block-start: 0;
  }

  .structura { display: grid; gap: var(--sp-6); }
  @media (min-width: 62rem) {
    .structura { grid-template-columns: 1fr 22rem; align-items: start; }
  }
  .structura__cards { display: grid; gap: var(--sp-4); }
  .structura__ph img { border-radius: var(--radius); }

  /* ---- Despre noi (prima pagina): sectiuni numerotate in loc de paragrafe
     Pe ecran lat, titlul fiecarei sectiuni sta lipit in stanga cat timp
     continutul ei curge in dreapta. Iconitele refolosesc .ico, .who, .tag. */
  .about__intro { display: grid; gap: var(--sp-6); align-items: start; }
  @media (min-width: 62rem) {
    .about__intro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-8); }
  }
  .band--paper .about__title {
    margin-block-start: var(--sp-4);
    font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  }
  .about__lead {
    margin-block-start: var(--sp-5); max-width: 46ch;
    font-size: var(--t-lg); line-height: 1.55; color: var(--vapor);
  }
  .about__lead strong { color: var(--pale); font-weight: 650; }

  .about__jump { margin-block-start: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .about__jump a {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.95rem 0.45rem 0.75rem; border-radius: 999px;
    font-size: var(--t-sm); font-weight: 550; text-decoration: none; color: var(--pale);
    background: var(--paper); border: 1px solid var(--line-paper);
    transition: border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
  }
  .about__jump a:hover, .about__jump a:focus-visible {
    color: var(--lumen); border-color: rgb(var(--glow-rgb) / 0.6); background: rgb(var(--glow-rgb) / 0.08);
  }
  .about__jump svg { width: 0.95rem; height: 0.95rem; color: var(--lumen); transition: translate var(--dur-spring) var(--ease-spring); }
  /* Sageata arata incotro pleaca pagina. */
  .about__jump a:hover svg, .about__jump a:focus-visible svg { translate: 0 2px; }
  .about__jump a:active svg { translate: 0 4px; }

  /* Fisa: patru randuri cheie-valoare, ca o inregistrare din registru. */
  .about__facts {
    margin: 0; padding: var(--sp-2) var(--sp-5);
    background: var(--paper); border: 1px solid var(--line-paper); border-radius: var(--radius);
    box-shadow: 0 28px 56px -36px rgb(var(--shadow-rgb) / 0.45);
  }
  .about__fact {
    display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--sp-4);
    align-items: center; padding-block: var(--sp-4);
  }
  .about__fact + .about__fact { border-top: 1px dashed var(--line-paper); }
  .about__fact .ico { grid-row: span 2; }
  .about__fact-k {
    align-self: end;
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--vapor);
  }
  .about__fact-v { align-self: start; font-weight: 650; line-height: 1.35; color: var(--pale); }

  .about__mission {
    margin: var(--sp-8) 0 0; padding: var(--sp-6);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
    border-radius: calc(var(--radius) + 4px);
    border: 1px solid rgb(var(--glow-rgb) / 0.28);
    background:
      radial-gradient(120% 140% at 0% 0%, rgb(var(--glow-rgb) / 0.14), transparent 60%),
      var(--paper);
  }
  .about__mission p {
    flex: 1 1 22rem;
    font-size: var(--t-xl); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
    text-wrap: balance; color: var(--pale);
  }
  .about__mission em { font-style: normal; color: var(--lumen); }

  .about__sec {
    position: relative;
    display: grid; gap: var(--sp-5) var(--sp-8);
    margin-block-start: var(--sp-8); padding-block-start: var(--sp-7);
    border-top: 1px solid var(--line-paper);
  }
  /* Sosirea dintr-o ancora: un fir de lumina trece peste linia de sus a
     sectiunii, iar numarul ei pulseaza o data. JS pune .is-arrived. */
  .about__sec::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: linear-gradient(90deg, var(--lumen), rgb(var(--glow-rgb) / 0.45) 55%, transparent);
    transform: scaleX(0); transform-origin: left center; opacity: 0;
    pointer-events: none;
  }
  .about__sec.is-arrived::before { animation: sec-arrive 1.5s var(--ease-soft) both; }
  .about__sec.is-arrived .about__num { animation: num-arrive 1.1s var(--ease-soft) 0.1s; }
  @keyframes sec-arrive {
    0%   { transform: scaleX(0); opacity: 1; }
    45%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
  }
  @keyframes num-arrive {
    from { box-shadow: 0 0 0 0 rgb(var(--glow-rgb) / 0.55); }
    to   { box-shadow: 0 0 0 10px rgb(var(--glow-rgb) / 0); }
  }
  @media (min-width: 62rem) {
    .about__sec { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
    .about__aside { position: sticky; top: 7rem; align-self: start; }
  }
  .about__num {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
    color: var(--lumen); background: rgb(var(--glow-rgb) / 0.1);
  }
  .band--paper .about__h { margin-block-start: var(--sp-3); font-size: var(--t-2xl); }
  .about__sub { margin-block-start: var(--sp-3); color: var(--vapor); line-height: 1.55; }
  .about__text { max-width: 62ch; line-height: 1.7; }

  .band--paper .about__card h3, .band--paper .about__step h3, .band--paper .about__event h3 {
    font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25;
  }

  /* Ce facem: un card lat pentru registre, apoi patru intr-o grila 2 x 2. */
  .about__grid { display: grid; gap: var(--sp-4); }
  @media (min-width: 40rem) { .about__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .about__card {
    display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-5); border-radius: var(--radius);
    background: var(--paper); border: 1px solid var(--line-paper);
  }
  .about__card p { color: var(--vapor); line-height: 1.6; }
  .about__card--wide {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6);
    background:
      linear-gradient(135deg, rgb(var(--glow-rgb) / 0.12), transparent 55%),
      var(--paper);
  }
  .about__card-body { flex: 1 1 20rem; display: flex; flex-direction: column; gap: var(--sp-3); }
  .about__big {
    font-family: var(--font-display); font-variation-settings: "wdth" 112, "wght" 760;
    font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: 0.85; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums; color: var(--lumen);
  }
  /* Aceeasi pastila ca ancorele de sus; hover-ul comun e la finalul fisierului. */
  .about__more {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
    margin-block-start: var(--sp-2);
    padding: 0.6rem 1.1rem 0.6rem 1.25rem; border-radius: 999px;
    font-size: var(--t-sm); font-weight: 600; text-decoration: none; color: var(--lumen);
    background: var(--paper); border: 1px solid var(--line-paper);
  }
  .about__more:hover, .about__more:focus-visible { color: var(--lumen); }
  .about__more svg { width: 1rem; height: 1rem; transition: translate var(--dur-spring) var(--ease-spring); }
  .about__more:hover svg, .about__more:focus-visible svg { translate: 3px 0; }

  /* Scopul: trei randuri, iconita in stanga. */
  .about__steps { margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
  .about__step {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start;
    padding: var(--sp-5); border-radius: var(--radius);
    background: var(--paper); border: 1px solid var(--line-paper);
  }
  .about__step p { margin-block-start: var(--sp-1); color: var(--vapor); line-height: 1.6; }

  .about__who { margin-block-start: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

  .about__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .about__chips li {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.7rem; border-radius: 999px;
    font-size: var(--t-xs); line-height: 1.5; color: var(--pale);
    background: var(--hover-tint); border: 1px solid var(--line-paper);
  }
  .about__chips b { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; color: var(--lumen); }
  .about__chips svg { width: 0.95rem; height: 0.95rem; color: var(--lumen); }

  /* Istoric: linie verticala care leaga iconitele, de la 2007 pana azi. */
  .about__time { --time-gap: var(--sp-7); display: grid; gap: var(--time-gap); }
  .about__event { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); }
  /* Fiecare eveniment isi trage segmentul pana la iconita urmatoare. */
  .about__event:not(:last-child)::before {
    content: ""; position: absolute; left: calc(1.375rem - 1px);
    top: calc(2.75rem + 0.35rem); bottom: calc(-1 * var(--time-gap) + 0.35rem);
    width: 2px; border-radius: 2px;
    background: linear-gradient(to bottom, var(--lumen), rgb(var(--glow-rgb) / 0.25));
  }
  .about__body { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 62ch; }
  .about__body > .about__when + h3 { margin-block-start: -0.35rem; }
  .about__when {
    font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600;
    letter-spacing: 0.06em; color: var(--lumen); padding-block-start: 0.6rem;
  }
  .about__body p { color: var(--vapor); line-height: 1.7; }
  .about__body strong { color: var(--pale); font-weight: 650; }

  /* ---- Antetul paginilor interioare ------------------------------------- */
  .page-hero {
    padding-block: var(--sp-8) var(--sp-7);
    border-bottom: 1px solid var(--line-deep);
    position: relative;
  }
  .page-hero__title { font-size: var(--t-2xl); max-width: 26ch; }
  .page-hero__code {
    font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500;
    color: var(--lumen); letter-spacing: 0.14em;
    margin-block-end: var(--sp-3); display: inline-block;
  }
  .page-hero__ph { margin-block-start: var(--sp-6); }
  .page-hero__ph img {
    border-radius: var(--radius);
    height: clamp(10rem, 23vw, 18rem);
    object-fit: cover; object-position: center 45%;
  }
  /* Plansele slabe stau mici si prinse de grila: la marimea unui erou, o
     fotografie de stoc din 2013 se vede exact ca atare. */
  .page-hero__ph.ph--inset { max-width: 30rem; }
  .page-hero__ph.ph--inset img { height: clamp(8rem, 15vw, 11rem); }

  /* ---- Fisa registrului ------------------------------------------------- */
  .fisa-wrap { max-width: var(--measure); }
  .fisa {
    font-family: var(--font-prose);
    display: grid; gap: var(--sp-3);
    background: var(--paper); color: var(--ink);
    --muted-color: var(--ink-2);
    border: 1px solid var(--line-paper);
    border-radius: var(--radius);
    padding: var(--sp-5);
  }
  .fisa a { color: var(--indigo); }
  .fisa__row { display: grid; gap: var(--sp-1); }
  @media (min-width: 40rem) {
    .fisa__row { grid-template-columns: 10rem 1fr; gap: var(--sp-4); align-items: baseline; }
  }
  .fisa__k {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-2);
  }
  .fisa__v { font-size: var(--t-sm); }
  .fisa + .fisa { margin-block-start: var(--sp-4); }

  /* ---- Breadcrumbs ------------------------------------------------------ */
  .crumbs {
    font-size: var(--t-xs); font-family: var(--font-mono);
    color: var(--vapor); margin-block-end: var(--sp-4);
  }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
  .crumbs li::after { content: "/"; margin-inline-start: var(--sp-2); opacity: 0.4; }
  .crumbs li:last-child::after { content: ""; }
  .crumbs a { color: inherit; text-decoration: none; }
  .crumbs a:hover { color: var(--lumen); }

  /* ---- Email / copiere -------------------------------------------------- */
  .email-list { display: grid; gap: var(--sp-2); }
  .email-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--tint); border: 1px solid var(--line-deep);
    border-radius: var(--radius-sm);
  }
  .email-row__label { flex: 1; min-width: 14rem; font-size: var(--t-sm); }
  .email-row__addr {
    font-family: var(--font-mono); font-size: var(--t-sm);
    color: var(--lumen); text-decoration: none;
  }
  .band--paper .email-row { background: var(--paper); border-color: var(--line-paper); }
  .band--paper .email-row__addr, .fisa .email-row__addr { color: var(--indigo); }
  .copy-btn {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--vapor); border: 1px solid var(--line-deep);
    border-radius: 999px; padding: 0.28rem 0.72rem;
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
  }
  .copy-btn:hover, .copy-btn[data-copied="1"] { border-color: var(--lumen); color: var(--lumen); }
  .band--paper .copy-btn { color: var(--ink-2); border-color: var(--line-paper); }
  .band--paper .copy-btn:hover,
  .band--paper .copy-btn[data-copied="1"] { border-color: var(--indigo); color: var(--indigo); }

  /* ---- Documente / PDF -------------------------------------------------- */
  .doc-card {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    background: var(--tint); border: 1px solid var(--line-deep);
    border-radius: var(--radius); padding: var(--sp-5);
  }
  .band--paper .doc-card { background: var(--paper); border-color: var(--line-paper); }
  .doc-card__icon { flex: none; width: 40px; height: 40px; color: var(--lumen); }
  .band--paper .doc-card__icon { color: var(--indigo); }
  .doc-card__meta {
    font-family: var(--font-mono); font-size: var(--t-xs);
    color: var(--vapor); text-transform: uppercase; letter-spacing: 0.1em;
  }
  .band--paper .doc-card__meta { color: var(--ink-2); }

  /* ---- Contact si cerere-tip, ca butoane-card -------------------------- */
  .prose > .reg-links { margin-block-start: var(--sp-4); }
  .reg-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .reg-link {
    display: flex; align-items: center; gap: var(--sp-3);
    flex: 1 1 15rem; min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--tint); border: 1px solid var(--line-deep);
    border-radius: var(--radius-sm);
    text-decoration: none; color: inherit;
  }
  .band--paper .reg-link { background: var(--paper); border-color: var(--line-paper); }
  /* In fisa, casetele stau pe aceeasi hartie: un ton mai adanc le desparte. */
  .fisa__links {
    border-top: 1px solid var(--line-paper);
    padding-block-start: var(--sp-4); margin-block-start: var(--sp-1);
  }
  .fisa .reg-link { background: var(--hover-tint); }
  .reg-link__icon { flex: none; width: 22px; height: 22px; color: var(--lumen); }
  .band--paper .reg-link__icon { color: var(--indigo); }
  .reg-link__text { display: grid; gap: 2px; min-width: 0; }
  .reg-link__k {
    font-family: var(--font-mono); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--vapor);
    line-height: 1.35;
  }
  .band--paper .reg-link__k { color: var(--ink-2); }
  .reg-link__v {
    font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500;
    color: var(--lumen); overflow-wrap: anywhere; line-height: 1.4;
  }
  .band--paper .reg-link__v { color: var(--indigo); }
  .reg-link:is(:hover, :focus-visible) .reg-link__v { color: var(--lumen-hot); }
  :root[data-theme="light"] .reg-link:is(:hover, :focus-visible) .reg-link__v { color: var(--lumen); }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .reg-link:is(:hover, :focus-visible) .reg-link__v { color: var(--lumen); }
  }
  .pdf-frame {
    width: 100%; aspect-ratio: 1 / 1.32; max-height: 80svh;
    border: 1px solid var(--line-paper); border-radius: var(--radius);
    background: var(--paper-2);
  }

  /* ---- Harta cu incarcare la cerere ------------------------------------- */
  .map-shell {
    position: relative; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line-deep); background: var(--glass);
    aspect-ratio: 16 / 9;
  }
  .map-shell iframe { width: 100%; height: 100%; border: 0; display: block; }
  .map-consent {
    position: absolute; inset: 0; display: grid; place-content: center;
    gap: var(--sp-3); text-align: center; padding: var(--sp-5);
    background: var(--night); color: var(--vapor);
  }
  .map-consent p { font-size: var(--t-sm); color: var(--vapor); max-width: 40ch; }

  /* ---- Subsol ----------------------------------------------------------- */
  .site-foot {
    background: var(--night); color: var(--vapor);
    padding-block: var(--sp-8) var(--sp-5);
    border-top: 1px solid var(--line-deep);
    position: relative;
  }
  .site-foot h3 {
    font-family: var(--font-mono); font-size: var(--t-xs);
    letter-spacing: 0.17em; text-transform: uppercase;
    color: var(--lumen); margin-block-end: var(--sp-4); font-weight: 500;
    font-variation-settings: normal;
  }
  .site-foot a { color: var(--vapor); text-decoration: none; }
  .site-foot a:hover { color: var(--lumen); }
  .site-foot .brand__name { color: var(--pale); }
  .foot-brand { margin-block-end: var(--sp-4); }
  .foot-name { font-size: var(--t-sm); max-width: 34ch; }
  .foot-p { font-size: var(--t-sm); }
  .foot-grid {
    display: grid; gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
  .phone-list {
    columns: 2; column-gap: var(--sp-4);
  }
  .phone-list a {
    display: block; margin-block-end: var(--sp-1);
    font-family: var(--font-mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums;
  }
  .foot-bottom {
    margin-block-start: var(--sp-7); padding-block-start: var(--sp-4);
    border-top: 1px solid var(--line-deep);
    font-size: var(--t-xs); display: flex; flex-wrap: wrap;
    gap: var(--sp-3); justify-content: space-between;
  }

  /* ---- Aparitie la derulare -------------------------------------------- */
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
  }

  /* ---- Schimbarea temei: noua tema se deschide in cerc din comutator ---- */
  .theme-vt::view-transition-old(root),
  .theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  .theme-vt::view-transition-new(root) { animation: theme-reveal 0.5s cubic-bezier(0.65, 0, 0.35, 1) both; }
  @keyframes theme-reveal {
    from { clip-path: circle(0 at var(--vt-x, 95%) var(--vt-y, 3rem)); }
    to   { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 95%) var(--vt-y, 3rem)); }
  }

  /* ==== Telefon si tableta ==============================================
     Derularea ramane cea nativa a telefonului (inertia lui e cea pe care
     o simte degetul); aici se netezeste tot ce sta in jurul ei. */

  /* Fotografia eroului umple eroul pana jos, nu doar cat ii e raportul. */
  .hero__media picture { height: 100%; }

  /* ---- Antetul se retrage la derulare in jos, revine la orice urcare ---
     JS pune .is-tucked doar sub 62rem. Doar translate: nimic nu se reaseaza. */
  @media (max-width: 61.99rem) {
    .site-head {
      transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease),
                  translate 0.3s var(--ease-soft);
    }
    .site-head.is-tucked { translate: 0 calc(-100% - 2px); box-shadow: none; }
  }

  @media (max-width: 45.99rem) {
    /* Bara utilitara: un singur rand care curge sub deget, nu trei randuri
       care imping eroul in jos. Marginea dreapta se stinge in fundal. */
    .util-bar__inner {
      flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
      scrollbar-width: none;
      width: 100%; padding-inline: 1.25rem;
      mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }
    .util-bar__inner::-webkit-scrollbar { display: none; }
    .util-bar__item { flex: none; white-space: nowrap; }

    .hero { padding-block: var(--sp-6) var(--sp-7); }
    .hero .btn, .hero__cta { padding: 0.95rem 1.6rem; font-size: var(--t-base); }

    /* ---- Caruselul registrelor -------------------------------------------
       Zece ochiuri unul sub altul ar fi zece ecrane de derulat. Pe telefon
       devin o banda orizontala: degetul (sau mouse-ul, prin JS) o trage,
       fiecare ochi se opreste aliniat la marginea grilei, iar urmatorul se
       vede pe jumatate, ca o invitatie. Banda iese din .shell pana la
       marginile ecranului; scroll-padding o aliniaza inapoi la grila. */
    .windows {
      --gutter: 1.25rem;
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: min(80%, 19rem);
      gap: var(--sp-3);
      margin: var(--sp-4) calc(-1 * var(--gutter)) 0;
      padding: var(--sp-2) var(--gutter) var(--sp-5);
      scroll-padding-inline: var(--gutter);
      overflow-x: auto; overflow-y: hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .windows::-webkit-scrollbar { display: none; }
    .windows .win { scroll-snap-align: start; min-height: 15rem; }
    /* Tragerea cu mouse-ul: snap-ul asteapta pana se aseaza banda. */
    .windows.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
    .windows.is-dragging .win { pointer-events: none; }
    @media (pointer: fine) { .windows { cursor: grab; } }

    /* Sina de sub banda: cat din ea se vede si unde esti. */
    .windows__rail {
      align-items: center; gap: var(--sp-4);
      margin-block-start: calc(-1 * var(--sp-1));
    }
    .windows__bar {
      position: relative; flex: 1; height: 2px; border-radius: 2px;
      background: var(--line-deep); overflow: hidden;
    }
    .windows__bar i {
      position: absolute; inset-block: 0; left: 0;
      width: calc(var(--f, 0.3) * 100%); border-radius: inherit;
      background: var(--lumen);
      translate: calc(var(--p, 0) * (1 / var(--f, 0.3) - 1) * 100%) 0;
    }
    .windows__count {
      font-family: var(--font-mono); font-size: var(--t-xs);
      letter-spacing: 0.1em; color: var(--vapor); font-variant-numeric: tabular-nums;
    }
    .windows__count b { font-weight: 500; color: var(--lumen); }
  }
  .windows__rail { display: none; }
  @media (max-width: 45.99rem) { .windows__rail { display: flex; } }
}

/* ------------------------------------------------------------ utilities -- */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .mt-0 { margin-block-start: 0; }
  .mt-2 { margin-block-start: var(--sp-2); }
  .mt-4 { margin-block-start: var(--sp-4); }
  .mt-5 { margin-block-start: var(--sp-5); }
  .mt-6 { margin-block-start: var(--sp-6); }
  .mt-7 { margin-block-start: var(--sp-7); }
  .text-center { text-align: center; }
  .muted { color: var(--muted-color); }

  /* ---- .card-hover: efectul de hover al tuturor cardurilor-link ---------
     Un singur loc pentru tot site-ul. Reglajele sunt cele patru variabile:
       --lift-dist  cat urca cardul
       --lift-in    cat dureaza urcarea (cursorul intra)
       --lift-out   cat dureaza coborarea (cursorul iese)
     Curba e --ease-soft: porneste imediat si aluneca lung spre oprire.

     Se misca doar `translate` si opacitati, pe care browserul le compune pe
     GPU fara sa redeseneze nimic. `translate`, nu `transform`, ca sa nu se
     bata cu .reveal, care isi foloseste transform-ul pentru aparitie.
     Umbra (un blur de 54px redesenat la fiecare cadru ar sacada) si lumina
     dinauntru stau gata desenate in ::before si doar apar.

     Sta in utilities ca sa castige peste stilurile cardurilor din
     components. Cardul trebuie sa nu aiba overflow: hidden, altfel ::before
     isi taie singur umbra. */
  .card-hover {
    --lift-dist: 4px;
    --lift-in: 0.38s;
    --lift-out: 0.5s;
    --lift-dur: var(--lift-out);
    position: relative; isolation: isolate;
    transition:
      translate var(--lift-dur) var(--ease-soft),
      border-color var(--lift-dur) var(--ease-soft);
    will-change: translate;
  }
  .card-hover:hover, .card-hover:focus-visible {
    --lift-dur: var(--lift-in);
    translate: 0 calc(-1 * var(--lift-dist));
    border-color: rgb(var(--glow-rgb) / 0.7);
  }
  /* Umbra de dedesubt si lumina care se aprinde inauntru. Sub continut
     (z-index -1 in contextul creat de isolation), peste fundalul cardului. */
  .card-hover::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    border: 1px solid transparent; border-radius: inherit;
    background: linear-gradient(to bottom,
      rgb(var(--glow-rgb) / 0.26), rgb(var(--glow-rgb) / 0.08) 42%, transparent 78%)
      padding-box;
    box-shadow: 0 30px 54px -26px rgb(var(--glow-rgb) / 0.55), 0 0 0 1px rgb(var(--glow-rgb) / 0.25);
    opacity: 0;
    transition: opacity var(--lift-dur) var(--ease-soft);
  }
  .card-hover:hover::before, .card-hover:focus-visible::before { opacity: 1; }
  /* Cardul ridicat lasa sub el o fasie goala. Daca cursorul sta acolo,
     hover-ul s-ar pierde, cardul ar cobori sub cursor si ar urca din nou: o
     tremuratura fara sfarsit. ::after umple fasia cat timp e ridicat. */
  .card-hover:hover::after {
    content: ""; position: absolute; inset-inline: -1px; top: 100%;
    height: calc(var(--lift-dist) + 1px);
  }
  /* .reveal.is-in isi pune propria tranzitie (aparitia la derulare); aici
     se pastreaza ambele. */
  .card-hover.reveal.is-in {
    transition:
      translate var(--lift-dur) var(--ease-soft),
      border-color var(--lift-dur) var(--ease-soft),
      opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }

  /* ---- Acelasi hover pe pastilele interactive -------------------------
     Butoanele, ancorele „Pe aceasta pagina", copierea si butonul de meniu
     urca si se aprind ca un card, la scara lor: ridicare mai mica, umbra
     mai stransa. Selectorii stau aici, nu in HTML, ca sa prinda toate
     paginile; .pill-hover ramane pentru pastile noi. */
  .pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle {
    --lift-dist: 2px;
    --lift-in: 0.38s;
    --lift-out: 0.5s;
    --lift-dur: var(--lift-out);
    position: relative; isolation: isolate;
    transition:
      translate var(--lift-dur) var(--ease-soft),
      border-color var(--lift-dur) var(--ease-soft),
      color 0.3s var(--ease), background-color 0.3s var(--ease),
      box-shadow 0.3s var(--ease), transform 0.16s var(--ease);
  }
  :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):is(:hover, :focus-visible) {
    --lift-dur: var(--lift-in);
    translate: 0 calc(-1 * var(--lift-dist));
    border-color: rgb(var(--glow-rgb) / 0.7);
  }
  :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle)::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    border: 1px solid transparent; border-radius: inherit;
    background: linear-gradient(to bottom,
      rgb(var(--glow-rgb) / 0.26), rgb(var(--glow-rgb) / 0.08)) padding-box;
    box-shadow: 0 14px 28px -14px rgb(var(--glow-rgb) / 0.6), 0 0 0 1px rgb(var(--glow-rgb) / 0.3);
    opacity: 0;
    transition: opacity var(--lift-dur) var(--ease-soft);
  }
  :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):is(:hover, :focus-visible)::before { opacity: 1; }
  :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):hover::after {
    content: ""; position: absolute; inset-inline: -1px; top: 100%;
    height: calc(var(--lift-dist) + 1px);
  }

  /* ---- Pe ecranele tactile: apasare in loc de hover --------------------
     Un deget nu „trece pe deasupra": dupa o atingere, :hover ramane lipit
     pe card pana la urmatoarea atingere. Aici ridicarea si conturul de
     hover se anuleaza (revert-layer intoarce valorile din components), iar
     atingerea insasi raspunde: cardul se adanceste sub deget si lumina
     dinauntru se aprinde, apoi revine pe arc cand degetul se ridica.
     :active porneste pe iOS doar daca pagina asculta touchstart (main.js). */
  @media (hover: none) {
    .card-hover:is(:hover, :focus-visible),
    :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):is(:hover, :focus-visible) {
      translate: none; border-color: revert-layer;
    }
    .card-hover:is(:hover, :focus-visible)::before,
    :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):is(:hover, :focus-visible)::before { opacity: 0; }
    /* Focusul de la tastatura (tastatura externa pe tableta) ramane vizibil. */
    .card-hover:focus-visible::before,
    :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):focus-visible::before { opacity: 1; }

    .card-hover, .card-hover.reveal.is-in,
    :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle) {
      -webkit-tap-highlight-color: transparent;
      transition:
        scale var(--dur-spring) var(--ease-spring),
        border-color 0.3s var(--ease), color 0.3s var(--ease),
        background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
        opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    .card-hover:active { scale: 0.975; border-color: rgb(var(--glow-rgb) / 0.55); transition-duration: 0.14s; }
    :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):active { scale: 0.95; transition-duration: 0.12s; }
    .card-hover:active::before,
    :is(.pill-hover, .btn, .about__jump a, .about__more, .copy-btn, .nav-toggle):active::before { opacity: 1; transition-duration: 0.12s; }
  }
}

/* ----------------------------------------------------------------- print -- */
@media print {
  .site-head, .util-bar, .site-foot, .nav-toggle, .drawer,
  .hero__media, .hero__scrim, .facade__wall, .card-hover::before,
  .map-shell, .copy-btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before, body::after { display: none; }
  .hero, .facade, .band, .band--night { background: #fff !important; color: #000 !important; }
  .hero__title, .page-hero__title, h1, h2, h3 { color: #000 !important; }
  .card, .fisa, .doc-card, .win { border: 1px solid #999; background: #fff; color: #000; }
  .win { break-inside: avoid; opacity: 1 !important; animation: none !important; min-height: 0; }
  .win__name, .win__code, .win__year, .win__what,
  .scale__n, .scale__label, .scale__item b { color: #000 !important; opacity: 1 !important; }
  a { color: #000; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}