/* ==========================================================================
   Font — Geologica, auto-găzduit local (nu de pe Google Fonts CDN).
   Motiv: încărcarea directă de pe fonts.googleapis.com/fonts.gstatic.com trimite IP-ul
   vizitatorului către Google fără consimțământ (problemă GDPR reală, confirmată juridic —
   hotărârea instanței din München, 2022). Fișiere variable font (susțin greutățile 100-900
   dintr-un singur fișier per subset), descărcate din Google Fonts și servite din
   assets/fonts/. Cerere explicită Adriana, 2026-07-11.
   ========================================================================== */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/geologica-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: 'Geologica';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/geologica-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;
}

/* ==========================================================================
   Design tokens (sursă: ../03_design/tokens.json)
   ========================================================================== */
:root {
  --color-bg-light: #F2F3F5;
  --color-bg-dark: #14161C;
  --color-bg-offwhite: #F2F3F5; /* aceeași culoare ca textul "adriana aurel" din hero */
  --color-text-primary: #171A21;
  --color-text-secondary: #565B66;
  --color-text-inverse: #F2F3F5;
  --color-text-inverse-secondary: #A6ABB5;
  --color-accent-600: #B8502F;
  --color-accent-700: #96401F;
  --color-border-light: #E4E5E8;
  --color-border-dark: #2A2D36;
  /* Audit a11y, 2026-07-28: accent-600 ca text pică sub 4.5:1 AA pe offwhite (4.475:1) și
     pe dark (3.64:1) — variante dedicate doar pt. text (eyebrow, timeline-year), fundalurile/
     border-urile/butoanele rămân pe accent-600 (acolo pragul e 3:1, deja trecut). */
  --color-accent-text: #B44E2E; /* 5.16:1 pe alb, 4.65:1 pe offwhite */
  --color-accent-on-dark: #D16A49; /* 5.05:1 pe bg-dark */

  --font-heading: 'Geologica', Helvetica, Arial, sans-serif;
  --font-body: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.25rem;
  --space-6b: 5rem; /* 80px — outlier între space-6 (64px) și space-7 (100px); folosit pt. padding lateral #intro și padding-block .section (excl. hero) */
  --space-4b: 2rem; /* 32px — valoare standard descriere → conținut, aplicată sitewide (2026-07-21); folosită și pt. buton → carusel #photography */
  --space-5b: 3rem; /* 48px — outlier între space-5 (40px) și space-6 (64px); padding-block .section pe mobil/tabletă */

  --radius-sm: 2px;
  --radius-md: 4px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden; /* siguranță pt. tehnica full-bleed 100vw din .photo-carousel */
  font-family: var(--font-body);
  font-weight: 300; /* light — fallback general; descrierile (<p>) coboară la 200 mai jos */
  font-size: 1rem; /* 16px — unic, peste tot */
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-light);
}
/* Toate descrierile (paragrafe) la 200 (Extra Light), nu 300 — consecvent cu .text-body /
   .text-body-l, care erau deja 200. Nu afectează nav-link, butoane sau input-uri (nu sunt <p>),
   nici clasele cu font-weight propriu (ex. .text-body-small, câștigă prin specificitate).
   Cerere explicită Adriana, 2026-07-09. */
p { font-weight: 200; }

img { max-width: 100%; display: block; }

/* Toate iconițele Phosphor (.ph) — SVG inline (nu font extern), dimensiunea vine tot
   din font-size (20px peste tot), svg-ul intern ia 1em ca să respecte aceeași mărime. */
.ph { font-size: 1.25rem; }
.ph svg { width: 1em; height: 1em; display: block; }

.container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 2rem; /* 32px — grid NEXTlevel Design System, edge-to-edge până la 1440px */
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent-600);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* Focus visibile — WCAG 2.4.7 / 2.4.13 */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Secțiuni alternante light/dark
   ========================================================================== */
.section { padding-block: var(--space-6b); }
.section-light { background: var(--color-bg-light); color: var(--color-text-primary); }
.section-dark { background: var(--color-bg-dark); color: var(--color-text-inverse); }
/* #FFFFFF pe accent.600 = 4.97:1 (WCAG AA normal text) — var(--color-text-inverse) (#F2F3F5)
   nu trece (≈4.47:1), de-aia folosim alb pur aici, la fel ca pe .btn-primary */
.section-accent { background: var(--color-accent-600); color: #fff; }
/* .eyebrow e implicit accent-600 (aceeași culoare ca fundalul) — invizibil aici fără override. */
.section-accent .eyebrow { color: #fff; }
.section-offwhite { background: var(--color-bg-offwhite); color: var(--color-text-primary); }

/* #services (2026-07-03) — fundal identic cu hero-ul, text alb pur (culoarea textului de pe
   .btn-primary), nu var(--color-text-inverse) — cerere explicită a Adrianei, distinctă de
   restul secțiunilor dark ale site-ului. */
#services { color: #fff; }
/* Spacing consistent cu #intro (Secțiunea 1): eyebrow→titlu 16px (deja implicit din .eyebrow),
   titlu→descriere 16px, descriere→conținut 32px — aceleași valori, aplicate la fel. */
#services h2.h2 { margin-bottom: var(--space-3); }
#services .pillars-grid {
  margin-top: var(--space-4b);
  align-items: stretch; /* 4 carduri, 2026-07-03: toate egale cu cel mai înalt, view echilibrat */
}
#services .pillar-card:hover {
  border-color: var(--color-border-dark); /* fără hover — cardurile nu duc nicăieri, 2026-07-03 */
  transform: none;
  box-shadow: none;
}

.text-secondary { color: var(--color-text-secondary); }
.text-inverse { color: var(--color-text-inverse); }
/* #fff, nu var(--color-text-inverse-secondary) (#A6ABB5) — deși griul are deja contrast bun
   (7.85:1) pe fundal închis solid, Adriana preferă alb pur peste tot unde apare, inclusiv
   footer și etichete mici. Cerere explicită, 2026-07-11 (extinde decizia din 07-09/07-10,
   inițial doar pe hero-uri cu canvas de particule, acum sitewide). */
.text-inverse-secondary { color: #fff; }
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}
/* Fără acest override, eyebrow-urile din secțiunile dark cădeau la 3.64:1 (accent-600 pe
   bg-dark) — sub pragul WCAG 1.4.3 AA de 4.5:1. Găsit în audit a11y, 2026-07-28. */
.section-dark .eyebrow { color: var(--color-accent-on-dark); }
/* După .eyebrow, ca să câștige pe fundal accent — aceeași specificitate, ordinea decide */
.eyebrow-on-accent { color: #fff; }

/* ==========================================================================
   Tipografie
   ========================================================================== */
/* Fără cuvinte/rânduri orfane — progressive enhancement, fallback e wrap normal
   pe browsere fără suport (regulă design-quality.md, 2026-07-05). */
h1, h2, h3, h4, h5, h6, blockquote { text-wrap: balance; }
p, li { text-wrap: pretty; }

h1, h2, h3, .display, .h2, .h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  /* 1.6, nu 1.4: Geologica nu are desenată o variantă de majusculă pt. virgula de sub
     Ț/Ș și circumflexul de pe Î — semnul rămâne cât la minuscule și "plutește" prea sus,
     lovindu-se de rândul anterior la text uppercase pe mai multe rânduri (RO: „ÎN”,
     „EXPERIENȚE” etc. — semnalat de Adriana pe #intro, 2026-07-08). Line-height mai mare
     dă loc semnului să plutească fără să atingă rândul de deasupra. */
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.display { font-size: 2.5rem; }
.h2 { font-size: 1.75rem; font-weight: 700; } /* bold, UPPERCASE moștenit din regula de mai sus — 2026-07-03 */
.h3 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; }

/* Secțiunea "Turning clunky interfaces..." — conținut centrat. Titlul folosește
   .text-display-xl (cel mai mare token din typescale, 2026-07-03) — rămâne UPPERCASE
   prin regula globală h1,h2,h3 (nimic din .text-display-xl nu o suprascrie), deci
   consistent cu restul titlurilor de pe site. */
#intro { text-align: center; }
/* text-h5 (24px), nu text-display-xl (56px) — hero-ul rămâne singura secțiune cu titlul cel
   mai mare din pagină, #intro trebuie să fie vizibil mai mic. Cerere explicită Adriana,
   2026-07-11. */
/* max-width mărit (26ch → 42ch) — era prea îngust, text înghesuit pe multe rânduri când
   avem loc din belșug în stânga-dreapta. Cerere explicită Adriana, 2026-07-11. */
#intro .text-h5 { max-width: 42ch; margin-inline: auto; margin-bottom: var(--space-3); } /* 16px titlu → descriere */
#intro .body-lg { margin-inline: auto; }
#intro .hero-actions { justify-content: center; margin-top: var(--space-4b); } /* 32px descriere → buton */

/* About — #about-photography, centrat la fel ca #intro de pe Home (cerere Adriana
   2026-07-07: titlu, descriere și buton centrate, consistent cu restul site-ului). */
#about-photography { text-align: center; }
#about-photography h2.h2 { max-width: 26ch; margin-inline: auto; }
#about-photography .body-lg { max-width: 56ch; margin-inline: auto; }
#about-photography .hero-actions { justify-content: center; margin-top: var(--space-4b); } /* 32px descriere → buton */

/* Padding 80px + gap-urile de mai sus: doar pe desktop ("website") — pe tabletă/mobil
   se respectă breakpoint-urile standard ale site-ului (32px / 16px, din .container). */
@media (min-width: 769px) {
  #intro .container { padding-inline: var(--space-6b); }
}

/* .body-lg: doar lățime de citire (64ch) — tipografia vine din .text-body-l (typescale) */
.body-lg { max-width: 64ch; }

/* ==========================================================================
   Typescale (2026-07-03) — sistem nou de tokens, clase .text-*
   Separat de stilurile existente (.display, .h2, .h3 — thin/uppercase, neatinse).
   Line-height e unitless (raport font-size, nu px) — se recalculează automat
   la fiecare breakpoint, păstrând exact raportul din tabelul desktop.
   ========================================================================== */
.text-display-xl, .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
  font-family: var(--font-heading);
  margin: 0;
}
.text-body-l, .text-body, .text-body-small {
  font-family: var(--font-body);
  margin: 0;
}

.text-display-xl { font-size: 3.5rem; line-height: 1.143; font-weight: 700; } /* 56/64 */
.text-h1 { font-size: 3rem; line-height: 1.167; font-weight: 700; }           /* 48/56 */
.text-h2 { font-size: 2.5rem; line-height: 1.2; font-weight: 700; }           /* 40/48 */
.text-h3 { font-size: 2rem; line-height: 1.25; font-weight: 700; }            /* 32/40 */
.text-h4 { font-size: 1.75rem; line-height: 1.286; font-weight: 600; }        /* 28/36 */
.text-h5 { font-size: 1.5rem; line-height: 1.333; font-weight: 600; }         /* 24/32 */
.text-h6 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; }          /* 20/28 */
.text-body-l { font-size: 1.125rem; line-height: 1.556; font-weight: 200; }   /* 18/28 — Extra Light */
.text-body { font-size: 1rem; line-height: 1.5; font-weight: 200; }           /* 16/24 — Extra Light */
.text-body-small { font-size: 0.875rem; line-height: 1.429; font-weight: 400; } /* 14/20 */

@media (max-width: 768px) {
  .text-display-xl { font-size: 3rem; }    /* 48px */
  .text-h1 { font-size: 2.5rem; }          /* 40px */
  .text-h2 { font-size: 2.25rem; }         /* 36px */
  .text-h3 { font-size: 1.875rem; }        /* 30px */
  .text-h4 { font-size: 1.625rem; }        /* 26px */
  .text-h5 { font-size: 1.375rem; }        /* 22px */
  /* H6, Body L, Body, Body Small — identice cu desktop pe tablet */
}

/* De ce 767px, nu 375px: 375 e lățimea de referință la care se face design/testare
   pentru mobil (design-quality.md), nu pragul de cod. Cu query-ul limitat la 375px,
   telefoane reale mai late (ex: Samsung S24+, ~384px) cădeau în golul dintre 375 și
   768 și primeau stilurile de tabletă (typescale mai mare, grid pe 2 coloane, margine
   32px) — cerere Adriana 2026-07-09, confirmat pe device real. Acum tot ce e sub 768
   (pragul de tabletă) primește stilurile de mobil, fără prag intermediar ambiguu. */
@media (max-width: 767px) {
  .text-display-xl { font-size: 2.5rem; }  /* 40px */
  .text-h1 { font-size: 2.25rem; }         /* 36px */
  .text-h2 { font-size: 2rem; }            /* 32px */
  .text-h3 { font-size: 1.75rem; }         /* 28px */
  .text-h4 { font-size: 1.5rem; }          /* 24px */
  .text-h5 { font-size: 1.25rem; }         /* 20px */
  .text-h6 { font-size: 1.125rem; }        /* 18px */
  .text-body-l { font-size: 1rem; }        /* 16px — Body L coboară la 16px pe mobil */
  /* Body, Body Small — identice cu desktop pe mobil */

  /* Titlul-propoziție din hero e text lung, nu un cuvânt scurt ca "About" — la 40px
     (Display XL) ocupă prea mult pe mobil. Coboară la varianta H3 (28px), una dintre
     variantele existente din typescale, nu o mărime inventată. #intro nu mai are nevoie de
     override aici — folosește .text-h5, care are deja 20px pe mobil din regula de mai sus.
     Cerere explicită Adriana, 2026-07-11. */
  #hero .hero-headline {
    font-size: 1.75rem;
  }
}

/* Titlul cover-ului fiecărei pagini interioare (nu Home, care are propria regulă de hero) —
   48px (nu 56px/Display XL ca înainte), doar pe web și tabletă (min-width 768px). Cerere
   explicită Adriana, 2026-07-11. Titlurile de secțiune de sub cover NU mai au excepție proprie
   aici (40px) — folosesc direct .text-h5 (24px) în HTML, aceeași regulă ca pe Home, pe toate
   breakpoint-urile ei existente. Corectat pentru consistență sitewide, cerere explicită
   Adriana, 2026-07-21. */
@media (min-width: 768px) {
  .about-hero-title,
  .case-study-hero-title,
  #services-hero h1,
  #contact-hero h2,
  #ux-audit-hero h1,
  #check-hero h1 {
    font-size: 3rem;
  }
}

.quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0;
  border-left: 2px solid var(--color-accent-600);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
}
/* Pe fundal accent, bordura implicită (aceeași culoare cu fundalul) ar deveni
   invizibilă — o schimbăm în alb, ca la #about-intro. */
.section-accent .quote { border-left-color: #fff; }
.section-accent .certification { border-top-color: rgba(255, 255, 255, 0.3); }

/* Outcome (Airline Booking, secțiunea 12) — cele două rezultate ca două carduri bifate,
   cu ilustrații line-art în stilul iconografiei Phosphor. Pe fundal accent, cardurile
   folosesc alb translucid, ca .certification de mai sus. */
.outcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-4);
}
.outcome-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.outcome-illustration {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 120px;
  margin: 0 auto var(--space-4);
  color: #fff;
}
.outcome-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.outcome-card-title .outcome-check { font-size: 1.5rem; flex-shrink: 0; }
@media (max-width: 768px) {
  .outcome-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-6);
}
.hero .container { position: relative; z-index: 2; }
#hero .container { text-align: center; }
/* margin-block: auto într-un flex column centrează pe verticală doar #hero — nu atinge
   .hero de bază (folosită și de #about-hero, #check-hero, cu propriul justify-content). */
#hero .container { margin-block: auto; }
/* Hero Home — badge + titlu-propoziție + descriere (cerere explicită Adriana, 2026-07-11,
   înlocuiește vechea variantă cu numele mare "Adriana Aurel" + etichetă; fără buton CTA,
   scos la cererea Adrianei). Spacing pe aceeași regulă folosită la #intro/#services/
   case-study-hero: badge→titlu 16px, titlu→descriere 16px. */
/* Padding redus (nu doar font-size — fontul rămâne 14px, cel mai mic permis din typescale)
   — pill-ul se apropia ca înălțime de un buton real (44px) și se confunda cu unul, mai ales
   pe mobil. Cerere explicită Adriana, 2026-07-12. */
.hero-badge {
  display: inline-block;
  background: var(--color-accent-600);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02rem;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
@media (max-width: 767px) {
  /* Font rămâne 14px (cel mai mic token din typescale) — doar padding-ul scade și mai mult. */
  .hero-badge { padding: 0.2em 0.6em; }
}
/* Fără buton CTA aici (cerere explicită Adriana, 2026-07-11). Titlul lăsat să respire —
   max-width mărit ca textul să se întindă mai mult spre stânga/dreapta, nu îngrămădit pe
   multe rânduri înguste. */
.hero-headline { max-width: 34ch; margin-inline: auto; }
/* #fff, nu .text-inverse-secondary — fundalul e canvas cu particule în mișcare, nu un dark
   solid static; aceeași decizie de accesibilitate ca pe About/Airline Booking. */
.hero-subtitle { max-width: 56ch; margin-inline: auto; margin-top: var(--space-3); color: #fff; }
/* Hero de pagină interioară (About) — înălțime fixă 480px pe orice ecran, imagine
   full-bleed pe lățime (cerere Adriana 2026-07-08, revizuit din 768px). Secțiunea nu
   e în .container, deci e deja full-width — doar imaginea trebuie poziționată absolut. */
.about-hero {
  height: 480px;
  min-height: 0;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Titlu + descriere centrate, consistent cu #intro (Home) și #about-photography
   (cerere Adriana 2026-07-08). Poza + scrim înlocuite cu efectul de particule
   (js/hero-particles.js) — fundal negru simplu, cerere Adriana 2026-07-10. */
#about-hero .container { text-align: center; }
#about-hero p.text-body-l { margin-inline: auto; }
/* .text-display-xl (56px/64px) dă deja size/line-height/weight — aici doar culoarea,
   consistent cu Home #intro. Cerere explicită Adriana, 2026-07-11. */
.about-hero-title { color: #fff; }
/* #fff, nu .text-inverse-secondary (#A6ABB5) — fundalul e acum canvas cu particule în
   mișcare, nu un dark solid static; cerere explicită Adriana 2026-07-10, accesibilitate. */
.about-hero-subtitle { color: #fff; }

/* Hero — particule pe canvas, reutilizat pe #hero (Home) și #about-hero (About),
   vezi js/hero-particles.js */
.hero-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Utilitate accesibilitate — text real pentru screen reader, invizibil vizual
   (canvas-ul e decorativ/aria-hidden, dar numele+rolul trebuie să existe ca text real) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Header / Navigare
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  /* 110, nu 50: header-ul creează propriul stacking context, iar meniul mobil deschis
     (.primary-nav.is-open, z-index:100) e descendentul lui — dacă header-ul are un
     z-index mai mic decât .nav-overlay (90), overlay-ul pictează peste tot header-ul,
     inclusiv peste meniul deschis, indiferent de z-index-ul intern al meniului. */
  z-index: 110;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border-light);
}
/* Flex, nu grid — logo/nav/header-actions pe aceeași axă Y, garantat (grid cu coloane
   auto-generate risca să pună elementele pe rânduri separate în anumite condiții).
   .lang-switcher e acum copil direct al .container (nu mai e în interiorul <nav>, cerere
   explicită Adriana, 2026-07-05) — cu 4 elemente în loc de 3, centrarea prin flex:1 simetric
   nu mai ține, deci nav-ul e centrat explicit prin poziționare absolută (robust indiferent
   de ce e pe margini); logo + header-actions + lang-switcher curg normal, cu margin-left:auto
   pe header-actions ca să împingă grupul din dreapta (header-actions + lang-switcher) la capăt. */
.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 64px; /* fix, nu min-height — elemente cu înălțimi diferite (buton rotund 24px vs
                   text) nu mai pot "împinge" rândul și strica alinierea logo/nav */
}
.logo {
  font-family: var(--font-heading);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-primary);
  letter-spacing: 0;
}
.primary-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* Bloc contact + social — doar în meniul mobil/tabletă deschis, cf. regula din @media 768px. */
.primary-nav-contact { display: none; }
.nav-link {
  position: relative;
  color: var(--color-text-primary);
  text-decoration-line: none;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px; /* lipit de text, indiferent de înălțimea cutiei-părinte (44px
                                  în footer) — nu mai depinde de un ::after poziționat absolut;
                                  8px cerut explicit de Adriana (era 4px), 2026-07-05 */
  font-size: 0.875rem;
}
.nav-link:hover { color: var(--color-accent-600); text-decoration-line: underline; }
.nav-link:active { color: var(--color-accent-700); }
/* Stare activă (pagina curentă) — doar în header (.primary-nav), cu linie permanentă.
   În footer, linia rămâne strict la :hover (web) — pe mobil nu există hover deloc, deci
   nicio linie. Cerere explicită Adriana, 2026-07-05, după verificare live. */
.primary-nav .nav-link.is-active { color: var(--color-accent-600); text-decoration-line: underline; }
.section-dark .nav-link,
.text-inverse.nav-link { color: var(--color-text-inverse); }

/* Dropdown-uri navigare — Services, Use Cases, Language */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit; /* butoanele nu moștenesc font-weight din body ca <a> — bug fix 2026-07-03 */
  font-size: 0.875rem;
  color: var(--color-text-primary);
  padding: 0;
}
.nav-dropdown-toggle:hover { color: var(--color-accent-600); }
.nav-dropdown-toggle i { transition: transform 0.2s ease; }
.nav-dropdown.is-open .nav-dropdown-toggle i { transform: rotate(180deg); }
/* Web only (cerere explicită Adriana, 2026-07-09): opțiunile cu subpagină (dropdown) nu
   primesc linia de hover ca restul din .primary-nav — doar fundalul se colorează, identic
   cu hover-ul din interiorul meniului (var(--color-border-light)). Padding + margin negativ
   egal, ca fundalul să aibă respirație fără să deplaseze restul elementelor din header. */
@media (min-width: 769px) {
  .nav-dropdown-toggle {
    padding: var(--space-2) var(--space-3);
    margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
    border-radius: var(--radius-sm);
  }
  .nav-dropdown-toggle:hover { background: var(--color-border-light); }
}
.section-dark .nav-dropdown-toggle,
.text-inverse .nav-dropdown-toggle { color: var(--color-text-inverse); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-bg-light); /* identic cu .site-header — cerere explicită Adriana */
  z-index: 60;
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-menu li + li { margin-top: var(--space-1); }
.nav-dropdown-menu a,
.nav-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--color-text-primary);
  text-decoration: none;
  font-family: inherit;
  font-weight: inherit; /* butoanele nu moștenesc font-weight din body ca <a> — bug fix 2026-07-03 */
  font-size: 0.875rem;
  cursor: pointer;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible,
.nav-dropdown-menu button:hover,
.nav-dropdown-menu button:focus-visible {
  background: var(--color-border-light);
  color: var(--color-accent-600);
  outline: none;
}
.nav-dropdown-menu button[aria-pressed="true"] { color: var(--color-accent-600); font-weight: 500; }

/* Language switcher — acum copil direct al .container (nu mai e în <nav>). Iconiță Phosphor
   generică (nu steag emoji — inconsecvent cu restul iconițelor de pe site), 20×20px, + numele
   limbii curente lângă ea, 8px gap. Cerere explicită Adriana, 2026-07-05. */
/* display: flex (diagnostic Adriana, 2026-07-13): ca block, wrapper-ul își așază butonul
   pe un line box de text (baseline + strut din line-height), care îl ridică față de centrul
   header-ului. Flex elimină line box-ul: wrapper-ul ia exact înălțimea butonului. */
.lang-switcher { display: flex; align-items: center; }
.lang-switcher .nav-dropdown-menu { min-width: 170px; }
.lang-switcher .nav-dropdown-toggle {
  gap: var(--space-2); /* 8px între iconiță și numele limbii */
  padding: 0;
  /* margin: 0 obligatoriu lângă padding: 0 — regula generică de hover (@media ≥769px,
     2026-07-09) dă padding 8/16px compensat cu margin negativ egal. Aici padding-ul e
     anulat (mai specific), dar margin-ul negativ rămânea moștenit necompensat și trăgea
     butonul cu ~8px deasupra liniei logo-ului. Corectat 2026-07-13. */
  margin: 0;
}
.lang-icon { font-size: 1.25rem; line-height: 1; } /* ~20px, ca restul iconițelor Phosphor inline */
/* Opțiunile de limbă (dropdown web + modal mobil): fără steag emoji — inconsecvent cu restul
   iconițelor site-ului (aceeași decizie ca la .lang-icon, 2026-07-05). Limba activă se
   marchează printr-o singură iconiță de bifare în dreapta, identic pe orice ecran, în loc
   de tratamente diferite (culoare pe web, fill solid pe mobil) — cerere Adriana 2026-07-10. */
.lang-switcher .nav-dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.lang-check { font-size: 1.125rem; flex-shrink: 0; opacity: 0; }
[aria-pressed="true"] .lang-check { opacity: 1; }
/* Numele limbii lângă steag — doar pe web (mobilul are doar cercul). Referința vizuală era
   doar pt. structură (steag în cerc + nume lângă el) — stilul textului rămâne cel normal al
   site-ului (moștenit din .nav-dropdown-toggle: același font, aceeași greutate, ca "Home"/
   "About"), fără italic/bold/uppercase. Corectat 2026-07-05 după clarificare Adriana. */

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-toggle i { transition: none; }
}

/* Wrapper pt. nav-toggle (burger) + butonul de limbă de pe mobil — cele două stau alături,
   ultimul grup din header (dreapta). */
.header-actions {
  margin-left: auto; /* împinge header-actions + tot ce urmează (lang-switcher) în dreapta */
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  color: var(--color-text-primary);
}

/* Butonul rotund de limbă de lângă burger — doar mobil/tabletă (vezi @media 768px mai jos),
   deschide un modal cu cele 2 opțiuni. Pe web, limba se schimbă din dropdown-ul din nav. */
.mobile-lang-fab {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-primary);
}

/* Modal de limbă — mobil/tabletă. Overlay + panou centrat, aceleași convenții ca restul
   suprapunerilor din site (a11y-panel, cookie-notice): z-index, focus, Escape. */
.lang-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 210;
}
.lang-modal-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 211;
  width: min(280px, calc(100vw - 48px));
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: var(--space-4);
}
.lang-modal-title {
  margin: 0 0 var(--space-3);
  font-weight: 500;
  text-align: center;
}
.lang-modal-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.lang-modal-option:last-child { margin-bottom: 0; }
.lang-modal-option:hover { border-color: var(--color-accent-600); }
.lang-modal-option[aria-pressed="true"] {
  border-color: var(--color-accent-600);
  color: var(--color-accent-600);
  font-weight: 500;
}

/* Widget de accesibilitate — buton plutitor rotund + panou cu setări */
.a11y-fab {
  position: fixed;
  /* --a11y-fab-offset: setat din JS la înălțimea cookie-notice + 16px cât timp e vizibil,
     eliminat (revine la fallback 24px) când notice-ul e ascuns. */
  bottom: var(--a11y-fab-offset, 24px);
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 0; /* pătrat, consistent cu .footer-social-link/.footer-email și .btn */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-600);
  color: #fff;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 22, 28, 0.35);
  z-index: 200;
  transition: bottom 0.2s ease;
}
/* :hover scopat la (hover:hover) — aceeași reparație ca la iconițele sociale (consistență
   cerută explicit de Adriana, 2026-07-11), evită starea "blocată" pe touch. */
@media (hover: hover) and (pointer: fine) {
  .a11y-fab:hover { background: var(--color-accent-700); }
}

.a11y-panel {
  position: fixed;
  bottom: calc(var(--a11y-fab-offset, 24px) + 52px);
  right: 24px;
  width: 260px;
  max-width: calc(100vw - 32px);
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 8px 24px rgba(20, 22, 28, 0.25);
  padding: var(--space-4);
  z-index: 200;
  transition: bottom 0.2s ease;
}
.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.a11y-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.a11y-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: none;
  border: 1px solid var(--color-border-light);
  border-radius: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.a11y-option:last-child { margin-bottom: 0; }
.a11y-option:hover { border-color: var(--color-accent-600); }
.a11y-option[aria-pressed="true"] {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: #fff;
}

/* Cookie notice — informativ, nu consent manager: site-ul are doar localStorage funcțional
   (limbă + accesibilitate), fără analytics/marketing, deci nimic de "acceptat" activ. */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 80px (--space-6b, nu --space-4) între text și butoane — cerere explicită Adriana,
     2026-07-16, ca butoanele să nu stea lipite de text. */
  gap: var(--space-6b);
  flex-wrap: wrap;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-dark);
}
.cookie-notice[hidden] { display: none; }
/* nowrap scos — cu link-ul "Learn more" adăugat, textul e mai lung decât încăpea pe un
   rând fix; se înfășoară natural acum, ca pe mobil. Cerere Adriana, 2026-07-11.
   max-width mărit de la 64ch la 85ch, 2026-07-16 — textul se înfășura pe 3 rânduri,
   cerere explicită să încapă pe 2. */
.cookie-notice-text { margin: 0; max-width: 85ch; font-size: 1rem; }
/* Reject + Got it, grupate — cerere explicită Adriana, 2026-07-11 (buton de refuz, chiar
   dacă site-ul nu are ce refuza tehnic: fără cookie-uri/tracking, doar localStorage
   funcțional; adăugat pentru claritate față de vizitator, cf. gdpr-ux.md). */
.cookie-notice-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.cookie-notice-text a { color: inherit; text-decoration-line: underline; text-underline-offset: 3px; }
.cookie-notice-text a:hover { color: var(--color-accent-600); }
@media (max-width: 768px) {
  .cookie-notice { padding: var(--space-4); flex-direction: column; align-items: stretch; text-align: center; }
  /* Butoane full-width pe mobil, ca peste tot pe site (design-quality.md). column-reverse,
     nu column — în DOM, Reject vine înaintea Accept ("Got it"), dar pe mobil Accept trebuie
     să apară primul, deasupra. Cerere explicită Adriana, 2026-07-12. */
  .cookie-notice-actions { display: flex; flex-direction: column-reverse; align-items: stretch; width: 100%; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* centrează conținutul când butonul e mai lat decât textul (ex: full-width pe mobil) */
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: 0; /* margini ascuțite */
  font-family: var(--font-body);
  font-weight: 400; /* regular — butoane, nu bold */
  font-size: 1rem; /* 16px minim — regulă design-quality.md: butoane = font body, niciodată sub 16px */
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(.25,.46,.45,.94),
              border-color 0.3s cubic-bezier(.25,.46,.45,.94),
              color 0.3s cubic-bezier(.25,.46,.45,.94);
}
.btn__inner { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Colțuri animate — inspirat din graffino.com (bracket corners), paletă proprie.
   Excepție documentată la regula "doar transform/opacity" din performanta-web.md:
   elementele sunt position:absolute (în afara fluxului), mici (12px) și decorative —
   nu declanșează reflow în cascadă asupra altor elemente. scale() ar distorsiona
   grosimea bordurii (border 2px scalat la 8% ≈ 0.16px, invizibil) — de aceea width/height. */
.btn::before,
.btn::after,
.btn__inner::before,
.btn__inner::after {
  content: "";
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-color: currentColor;
  transition: width 0.5s cubic-bezier(.25,.46,.45,.94), height 0.5s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}
.btn::before { top: -4px; left: -4px; border-top: 2px solid; border-left: 2px solid; }
.btn::after { top: -4px; right: -4px; border-top: 2px solid; border-right: 2px solid; }
.btn__inner::before { bottom: -4px; left: -4px; border-bottom: 2px solid; border-left: 2px solid; }
.btn__inner::after { bottom: -4px; right: -4px; border-bottom: 2px solid; border-right: 2px solid; }

.btn:hover::before, .btn:hover::after,
.btn:hover .btn__inner::before, .btn:hover .btn__inner::after {
  width: 100%;
  height: 100%;
}

html.a11y-no-fx .btn::before, html.a11y-no-fx .btn::after,
html.a11y-no-fx .btn__inner::before, html.a11y-no-fx .btn__inner::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn::after, .btn__inner::before, .btn__inner::after { transition: none; }
}

/* ==========================================================================
   Setări accesibilitate (widget plutitor) — comutabile manual de utilizator
   ========================================================================== */
html.a11y-reduce-motion,
html.a11y-reduce-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.a11y-large-text { font-size: 118%; }

html.a11y-high-contrast .section-light { background: #fff; color: #000; }
html.a11y-high-contrast .section-dark { background: #000; color: #fff; }
html.a11y-high-contrast .section-offwhite { background: #fff; color: #000; }
html.a11y-high-contrast .text-secondary,
html.a11y-high-contrast .text-inverse-secondary { color: inherit; }
html.a11y-high-contrast .btn-primary { background: #000; color: #fff; border-color: #000; }
html.a11y-high-contrast .btn-secondary { border-color: currentColor; }
html.a11y-high-contrast .pillar-card,
html.a11y-high-contrast .project-card,
html.a11y-high-contrast .checker-card,
html.a11y-high-contrast .tag,
html.a11y-high-contrast .finder-card,
html.a11y-high-contrast .form-field input { border-color: currentColor; }

html.a11y-underline-links a,
html.a11y-underline-links .nav-link { text-decoration: underline !important; }
.btn-primary {
  background: var(--color-accent-600);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-700); transform: translateY(1px); }
.btn-primary:disabled { background: var(--color-border-dark); color: var(--color-text-inverse-secondary); cursor: not-allowed; }

/* Un singur stil secundar, folosit peste tot — border + text preiau automat culoarea de
   text a fundalului curent (currentColor/inherit), fără variante separate per background.
   Hover: fill portocaliu + text alb, aceeași regulă indiferent de fundal. */
.btn-secondary {
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 35%, transparent); /* linie subțire, nu full-contrast */
}
.btn-secondary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600); /* identic cu fill-ul — nicio linie vizibilă la hover */
  color: #fff;
}
/* Excepție necesară: pe fundal deja accent.600 (#about-photography), fill-ul de hover s-ar
   confunda cu propriul fundal — se inversează în alb, păstrând contrastul 4.97:1 AA. */
#about-photography .btn-secondary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-accent-600);
}

/* ==========================================================================
   Despre mine
   ========================================================================== */
/* Body text 16px pe pagina About, cu excepția primei secțiuni (#about-hero, cover-ul),
   care rămâne 18px (.text-body-l implicit). Weight 200 vine din regula globală "p"
   (style.css, lângă body). Cerere explicită Adriana, 2026-07-09, restrânsă 2026-07-12
   să excludă #about-hero. */
#about-intro p,
#about-timeline p,
#about-photography p,
#about-pillars p {
  font-size: 1rem;
}
.about-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.about-content { min-width: 0; } /* aceeași protecție ca la .origin-story-text — grid item nu se blochează la conținut */
.about-photo img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-border-light);
}
.about-links { margin-top: var(--space-4); }

/* #experience „Where It All Started" (2026-07-04) — text stânga, grid 2×2 poze dreapta */
.origin-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.origin-story-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0; /* altfel elementul grid nu se micșorează sub conținutul lui, iese din container */
}
/* h2 are propriul margin-bottom (24px, regula globală) — îl anulăm ca gap-ul de 16px de mai
   sus să fie singura sursă de spațiere titlu → descriere, la fel ca la #intro. */
.origin-story-text h2 { margin-bottom: 0; }
/* gap-ul de mai sus (16px) contribuie deja înaintea butonului; +16px (space-3) = 32px
   total descriere → buton, aceeași regulă ca la #intro (nu se cumulează cu gap-ul). */
.origin-story-text .hero-actions { margin-top: var(--space-3); }
/* Înălțimea fixă de 468px (gândită pt. o variantă viitoare cu 3 logo-uri, niciodată livrată)
   scoasă — cu ilustrația aliniată sus (nu mai centrată), acea înălțime lăsa mult spațiu gol
   sub ea. Acum coloana se mulează pe înălțimea reală a ilustrației. Cerere explicită Adriana,
   2026-07-12. */
.origin-story-photos {
  min-width: 0;
}
.origin-story-photos .media-placeholder { margin-top: 0; }
.logo-sketch-example {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0.75;
}
.logo-sketch-example img { max-width: 88%; width: auto; height: auto; object-fit: contain; }

#leadership h2.h2 { margin-bottom: var(--space-3); } /* 16px titlu → descriere, regula de la #intro */

/* #services-teaser (Home, 2026-07-04, layout revizuit 2026-07-05) — versiune scurtă,
   detaliile complete sunt pe services.html. Fără buton propriu — descrierea e urmată direct
   de carduri, spațiere 32px, aceeași regulă "descriere → conținut" ca pe restul site-ului. */
#services-teaser h2.h2 { margin-bottom: var(--space-3); } /* 16px titlu → descriere */
#about-timeline h2.h2,
#about-pillars h2.h2,
#about-photography h2.h2 { margin-bottom: var(--space-3); } /* 16px titlu → descriere, ca pe Home */
/* Descrierea e mai lungă acum (explică cum poate ajuta) — fără plafonul de 64ch (.body-lg),
   ca textul să se întindă pe toată lățimea containerului, nu doar pe coloana de citire îngustă. */
#services-teaser .body-lg { max-width: none; }
#services-teaser .pillars-grid { grid-template-columns: repeat(4, 1fr); margin-top: var(--space-4b); } /* 32px descriere → carduri, 4 pe rând pe desktop */

/* #leadership — titlu/descriere centrate, aceeași tehnică ca #intro; cifrele sub text,
   centrate, cu font mult mai mare decât titlul (accent vizual pe numere). Fundal accent.600
   (cerere explicită Adriana, 2026-07-20) — text alb pur, nu var(--color-text-inverse)
   (#F2F3F5 cade sub 4.5:1 AA pe accent.600, verificat, ≈4.47:1), aceeași regulă ca #services.
   .text-inverse-secondary e deja alb pur global (decizie 2026-07-11), nu are nevoie de override. */
#leadership { text-align: center; color: #fff; }
#leadership .body-lg { margin-inline: auto; }
#leadership .leadership-stats { margin-top: var(--space-4b); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } /* 32px descriere → cifre */
#leadership .score-row { justify-content: center; margin: 0; } /* anulează margin-ul global (24px sus/jos) — nu se cumulează peste cei 32px de mai sus */
#leadership .score-stat { align-items: center; }
/* Nu suprascriem .score-stat .value global, ca să nu afectăm scorurile din ux-audit.html,
   care au altă ierarhie vizuală — scopat doar la #leadership. Culoare: vezi nota de mai sus. */
#leadership .score-stat .value { font-size: 3.5rem; font-weight: 700; color: #fff; }

/* #photography — carusel orizontal de poze portret, lipite una de alta (2026-07-04).
   Excepție explicită de la paddingurile consistente ale site-ului: caruselul iese din
   .container și se întinde de la un capăt la altul al viewport-ului (full-bleed), doar
   pentru această secțiune — titlul și descrierea rămân în interiorul .container, normal.
   Navigare prin butoane săgeată + dots, nu prin scroll vizibil — scrollbar-ul nativ e
   ascuns, dar scroll-ul rămâne funcțional (swipe pe touch, scroll orizontal pe desktop). */
.photo-carousel-wrapper {
  position: relative;
  margin-top: var(--space-4b); /* 32px buton → carusel */
  width: 100vw; /* full-bleed adevărat, până în capete — neschimbat */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
/* Doar poziția săgeților e plafonată la 1440px (ca .container) — caruselul de poze rămâne
   full-bleed. Rail-ul e invizibil (fără fundal), doar aliniază butoanele la marginea de
   1440px; pointer-events:none îl lasă "transparent" la click, în afară de butoanele înseși. */
.carousel-arrow-rail {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1440px);
  height: 100%;
  pointer-events: none;
}
.carousel-arrow-rail .carousel-arrow { pointer-events: auto; }
.photo-carousel {
  display: flex;
  overflow-x: auto;
  /* mandatory, nu proximity — research MDN (2026-07-12): "proximity" lasă explicit browserul
   * să oprească scroll-ul la mijlocul unei poze dacă te oprești departe de un punct de agățare
   * (exact bug-ul raportat: drag oprit pe jumătate de imagine). "mandatory" garantează că
   * poziția finală e mereu aliniată la o poză, atât la swipe nativ (mobil/tabletă) cât și la
   * scroll-ul de trackpad. Nu intră în conflict cu drag-ul JS de mouse (mousedown/up de mai
   * jos dezactivează explicit scroll-snap-type cât timp utilizatorul trage și la animația de
   * revenire), deci senzația "rigidă" semnalată pe 2026-07-09 (dinainte să existe drag-ul JS)
   * nu ar trebui să mai apară acolo — rămâne un risc doar pe scroll de trackpad, de verificat. */
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  cursor: grab;
}
.photo-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/* Săgeți active → drag dezactivat (JS), cursorul nu mai trebuie să sugereze "grab".
   Cerere explicită Adriana, 2026-07-11. */
html.a11y-carousel-nav .photo-carousel { cursor: default; }
.photo-carousel::-webkit-scrollbar { display: none; } /* Chrome / Safari */
.photo-carousel-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* blochează saltul peste 2-3 poze la un swipe rapid — oprește la fiecare */
  width: 420px;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.photo-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; } /* nu porni drag nativ pe imagine în timpul drag-scroll */
.photo-carousel-item:last-child { border-right: none; }

/* Fill solid accent — pe fundal de fotografie, orice variantă translucidă bazată pe
   currentColor se pierde în culorile pozei; fill opac garantează contrast indiferent de
   conținutul din spate (același stil ca varianta mobil cu a11y-carousel-nav activ). */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 0; /* margini ascuțite — consistent cu restul componentelor site-ului */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid var(--color-accent-600);
  background: var(--color-accent-600);
  font-size: 1.125rem;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease;
}
.carousel-arrow:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.carousel-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.carousel-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.carousel-arrow-prev { left: 24px; }
.carousel-arrow-next { right: 24px; }
/* Ascunse implicit peste tot (web + mobil/tabletă) — navigare prin swipe/dots by default.
   Apar doar dacă userul activează explicit "Show carousel arrows" din panoul de accesibilitate.
   Cerere explicită Adriana, 2026-07-09. */
.carousel-arrow { display: none; }
html.a11y-carousel-nav .carousel-arrow { display: flex; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0; /* butoanele de 24×24 (zonă de click) rămân la minim WCAG, doar gap-ul dintre ele scade */
  margin-top: var(--space-4);
}
.carousel-dot {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.carousel-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%; /* cerc perfect 1:1 în starea inactivă */
  background: rgba(255, 255, 255, 0.4); /* alb explicit — singurul carusel rămas e pe fundal accent */
  transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .carousel-dot:hover::before { background: rgba(255, 255, 255, 0.7); }
}
.carousel-dot.is-active::before { width: 20px; border-radius: 4px; background: #fff; }
.carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-4) 0 0;
}
.tag {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: 0.875rem;
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* cardul cu cel mai mult conținut dă înălțimea — regulă design-quality.md */
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0; /* aceeași protecție ca la .origin-story-text — evită overflow pe grid 1fr mobil */
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar-card h3 { margin-bottom: var(--space-2); } /* selector pe tag, nu clasă — acoperă și .text-h6 */
.pillar-card i { color: var(--color-accent-600); }
.pillar-card:hover {
  border-color: var(--color-accent-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(23, 26, 33, 0.06); /* umbră pt. fundal deschis (about.html) */
}

/* #services (2026-07-03) — fundal dark, deci border + umbră adaptate (border-light ar fi
   invizibil, umbra deschisă nu s-ar vedea pe fundal închis) */
#services .pillar-card { border-color: var(--color-border-dark); }
#services .pillar-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }

/* #services-teaser (Home, secțiunea 05): cardurile sunt strict informative, fără link propriu —
   singura acțiune din secțiune e butonul CTA. Fără hover state, ca să nu sugereze că sunt
   clickabile (nu duc nicăieri). */
/* #about-pillars (About, "How I Work"): aceleași carduri strict informative,
   fără link propriu — nu trebuie să pară clickabile (cf. #services-teaser). */
#about-pillars .pillar-card:hover {
  border-color: var(--color-border-light);
  transform: none;
  box-shadow: none;
}

/* Pattern "closing CTA" (h2 + p + buton, centrat), reutilizat pe Home, About și case study —
   rămăsese pe margin-bottom implicit (24px) în loc de convenția de 16px titlu→descriere
   aplicată deja pe restul site-ului (#intro, #photography, #leadership, #service-finder etc.).
   Corectat pentru consistență sitewide, cerere explicită Adriana, 2026-07-21. Butonul (descriere
   → conținut) e la 32px, setat inline (style="margin-top:var(--space-4b)") în fiecare HTML. */
#closing-cta h2.h2,
#about-closing-cta h2.h2,
#case-study-closing-cta h2.h2 { margin-bottom: var(--space-3); }

/* #service-finder (Home, 05) — quiz "coverflow": 4 situații, fiecare mapată la un serviciu
   existent (#services-teaser, imediat deasupra). Fundal dark, ca #leadership. Cardul activ e
   mare și în față; ceilalți 3, mai mici, în spate (poziții calculate în js/common.js).
   Spacing consistent cu restul site-ului (#intro, #services): eyebrow→titlu 16px (deja
   implicit din .eyebrow), titlu→descriere 16px, descriere→conținut 32px — nu 64px. */
#service-finder h2.h2 { margin-bottom: var(--space-3); }
.finder-browse { margin-top: var(--space-4b); }

/* Full-bleed, ca .photo-carousel-wrapper (about.html) — cardurile laterale se estompează
   spre marginile viewport-ului, nu spre marginea unui container îngust. Aceeași tehnică
   (calc(-50vw + 50%)), acelaşi părinte direct (.container). */
.finder-carousel {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: hidden;
}
.finder-track {
  position: relative;
  height: 320px;
  /* Permite scroll vertical nativ (swipe-ul orizontal e prins de js/common.js, prin
     Pointer Events, nu prin gesturi native) — fără asta, browserul ar putea încerca
     propriul pan orizontal/zoom pe gest, intrând în conflict cu tracking-ul din JS. */
  touch-action: pan-y;
}
/* Layout intern ca #uiux-designer (03 — Process): text stânga (titlu + descriere + CTA),
   ilustrație dreapta — .origin-story-grid aplicat aici la nivel de card, nu de secțiune.
   Card semnificativ mai mare (cerere explicită Adriana, 2026-07-20). */
.finder-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 760px;
  min-height: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  text-align: left;
  padding: var(--space-4); /* 24px peste tot, ca .pillar-card — cerere explicită Adriana */
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.25,.46,.45,.94), opacity 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.finder-card-text { min-width: 0; }
/* Numele serviciului devine o etichetă mică (nu mai e h3 vizual mare) — cerere explicită
   Adriana, 2026-07-20: se repeta aproape identic cu titlul cardului din #services-teaser,
   secțiunea de deasupra. Rămâne <h3> semantic (fiecare card tot despre un serviciu e),
   dar vizual conținutul care contează pe cardul ăsta e situația, nu numele. */
.finder-card-tag {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: 0.875rem; /* 14px — site-ul nu folosește 12px decât în cazuri strict necesare */
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--color-text-inverse-secondary);
}
/* Descrierea (situația) e acum elementul dominant al cardului — mai mare, alb, nu gri. */
.finder-card-desc { margin: 0; color: var(--color-text-inverse); font-size: 1.125rem; line-height: 1.5; }
/* Buton terțiar (cerere explicită Adriana, 2026-07-20) — text-only, nu .btn (acela e
   plin/border, prea greu pt. o acțiune secundară în interiorul unui card). Portocaliu
   (accent-600), cerere explicită — subliniat permanent, nu doar la hover, ca indicator
   suplimentar față de culoare (accessibility.md: culoarea nu e singurul semnal). NOTĂ:
   accent-600 ca text normal pe fundalul dark al cardului cade sub pragul AA de 4.5:1
   (verificat, ~3.6:1) — semnalat explicit, nerezolvat automat, decizie vizuală asumată. */
.finder-card-cta {
  position: relative; /* ancoră pt. zona invizibilă de click de mai jos */
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  color: var(--color-accent-600);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Zonă de click invizibilă, minim 44px (WCAG 2.5.8) — cerere explicită Adriana, 2026-07-21:
   linkul rămâne text simplu vizual, dar targetul real e cât un buton, nu doar înălțimea
   unei linii de 16-18px. max(100%, 44px) pe lățime — nu îngustează sub textul propriu-zis. */
.finder-card-cta::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px;
}
/* Nu accent-700 la hover: e mai închis decât accent-600, ar scădea și mai mult contrastul
   deja limită de pe fundalul dark. Bold, nu schimbare de culoare, ca indicator de hover. */
.finder-card-cta:hover { font-weight: 600; }
.finder-card-cta:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
/* Doar butonul e cu adevărat acționabil pe cardul activ — restul cardului nu duce nicăieri
   (cerere explicită Adriana, 2026-07-21). Cursor implicit, nu "pointer" moștenit de la
   .finder-card, ca să nu sugereze că tot cardul e clicabil. Cardurile laterale rămân
   "pointer" — pe alea, click oriunde chiar aduce cardul în față. */
.finder-card.is-active { cursor: default; }
.finder-card-illustration { flex-shrink: 0; width: 240px; height: 156px; }
.finder-card:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }

/* Cardul activ (primul, în față) — bordură portocalie permanentă, nu doar la hover
   (cerere explicită Adriana, 2026-07-20): se vede clar care e cardul "curent" dintr-o
   privire, fără să fie nevoie de mouse peste el. */
.finder-card.is-active { transform: translateX(-50%) scale(1); opacity: 1; z-index: 4; border-color: var(--color-accent-600); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
/* Offset redus deliberat (cerere explicită Adriana, 2026-07-20: cardurile laterale ieșeau
   din grid-ul principal al paginii) — cardul lateral stă acum mai mult "în spatele" celui
   activ, doar o fâșie subțire iese vizibil de sub el, nu jumătate de card competând cu
   zona de conținut a secțiunii. */
/* Offset calculat, nu fix (cerere explicită Adriana, 2026-07-20): marginea exterioară a
   cardului lateral se aliniază cu marginea dreaptă/stângă a .container (aceeași margine
   unde se opresc titlul/descrierea de deasupra) — nici mai în interior, nici peste ea.
   min(50vw, 720px) = jumătate din .container (max-width 1440px), minus cei 32px padding
   ai lui, minus jumătate din lățimea cardului lateral (760px × scara 0.85 ÷ 2 = 323px). */
.finder-card.is-prev { transform: translateX(-50%) translateX(calc(-1 * (min(50vw, 720px) - 355px))) scale(0.85); opacity: 0.55; z-index: 3; }
.finder-card.is-next { transform: translateX(-50%) translateX(calc(min(50vw, 720px) - 355px)) scale(0.85); opacity: 0.55; z-index: 3; }
/* Hover pe cardurile din spate (lângă, stânga/dreapta) — semnalează că sunt clicabile
   (aduc cardul în față). is-far rămâne fără hover: are pointer-events:none, e aproape
   invizibil în spatele celui activ. */
.finder-card.is-prev:hover,
.finder-card.is-next:hover { opacity: 0.8; border-color: var(--color-accent-600); }
/* Al 4-lea card (opus celui activ, cu doar 4 carduri totale) — direct în spatele centrului,
   mic și aproape invizibil, doar ca să sugereze că mai există "stivă" acolo. Nu duce nicăieri
   vizibil, deci fără interacțiune de mouse — se ajunge la el doar prin dots/săgeți. */
.finder-card.is-far { transform: translateX(-50%) scale(0.7); opacity: 0.18; z-index: 1; pointer-events: none; }

.finder-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4); /* la fel ca .carousel-dots (about.html) — dots mai aproape de carduri */
}
/* Aceeași paletă/dimensiune ca .carousel-arrow (about.html), în linie cu dots, nu
   suprapuse pe carduri. Vizibilitate identică cu .carousel-arrow (cerere explicită
   Adriana, 2026-07-20): ascunse implicit, apar doar cu "Show carousel arrows" din
   panoul de accesibilitate — navigarea implicită rămâne click pe carduri + dots. */
.finder-carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  border: 1px solid var(--color-accent-600);
  background: var(--color-accent-600);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
html.a11y-carousel-nav .finder-carousel-arrow { display: flex; }
.finder-carousel-arrow:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.finder-carousel-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.finder-carousel-dots { display: flex; gap: 0; }
.finder-carousel-dot {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.finder-carousel-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .finder-carousel-dot:hover::before { background: rgba(255, 255, 255, 0.7); }
}
.finder-carousel-dot.is-active::before { width: 20px; border-radius: 4px; background: #fff; }
.finder-carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

#services-teaser .pillar-card:hover {
  border-color: var(--color-border-light);
  transform: none;
  box-shadow: none;
}

/* #home-faq — <details>/<summary> nativ: focus, tastatură și toggle vin gratis din HTML,
   fără JS suplimentar. Marker implicit ascuns, înlocuit cu +/− generat prin ::after. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Hover — web (mouse). :hover pe touch nu rămâne "blocat" (dispare la ridicarea degetului),
   deci nu intră în conflict cu starea de press de mai jos. */
.faq-item:hover { border-color: var(--color-accent-600); }
/* Press/active — web (mousedown) și touch (tablet/mobil, tapdown), același tratament ca
   .btn-primary:active / .footer-social-link:active (accent-700 + apăsare vizuală 1px). */
.faq-item:has(.faq-question:active) {
  border-color: var(--color-accent-700);
  background: rgba(184, 80, 47, 0.06);
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  .faq-item { transition: none; }
  .faq-item:has(.faq-question:active) { transform: none; }
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  /* Padding mutat aici de pe .faq-item (2026-07-17) — <summary> e elementul nativ clicabil;
     dacă padding-ul stă doar pe părinte, zona de click e mai mică decât rândul vizibil
     (doar textul/iconița răspund la click, nu tot rândul). Acum tot rândul e clicabil. */
  padding: var(--space-3) var(--space-4);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-weight: 400;
  font-size: 1.25em;
  color: var(--color-accent-600);
}
.faq-item[open] .faq-question::after { content: '\2212'; } /* − */
.faq-question:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* #home-faq a schimbat fundal de 3 ori în aceeași sesiune (offwhite → dark → offwhite →
   accent) — regulile de mai sus presupun accent-600 vizibil pe propriul fundal, ceea ce
   nu mai e adevărat pe .section-accent (icon/border/focus s-ar confunda cu fundalul
   portocaliu). Scopat pe clasa secțiunii, nu pe #home-faq direct, ca să se adapteze
   automat dacă fundalul se schimbă din nou, fără să mai umblu manual prin fiecare regulă. */
.section-accent .faq-question::after { color: #fff; }
.section-accent .faq-question:focus-visible { outline-color: #fff; }
.section-accent .faq-item:hover { border-color: #fff; }
.section-accent .faq-item:has(.faq-question:active) {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.section-dark .faq-item { border-color: var(--color-border-dark); }
/* Răspuns tip "chat" (cerere explicită Adriana, 2026-07-20): avatarul ei + o bulă, ca și
   cum ar răspunde live la mesaj. Fade-in la fiecare deschidere; textul din bulă se scrie
   literă cu literă doar prima dată (js/common.js reține asta per item — vezi wireFaqChat),
   la reschideri ulterioare apare direct, complet. */
.faq-answer {
  margin-top: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.faq-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 2px; /* aliniere optică cu prima linie de text din bulă */
}
/* Bulă puțin proeminentă (cerere explicită Adriana, 2026-07-21) — textul rămâne elementul
   dominant, bula e doar o urmă subtilă de grupare (fără bloc plin, fără bordură). Adaptată
   la fundalul secțiunii, ca #home-faq să nu mai ceară ajustări manuale la fiecare schimbare
   de temă (offwhite/dark/accent, toate testate în aceeași sesiune). */
.faq-answer-bubble {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(23, 26, 33, 0.05);
  color: var(--color-text-primary);
  min-height: 1.5em; /* evită o "săritură" de înălțime cât bula e goală, înainte să înceapă scrisul */
}
.section-dark .faq-answer-bubble,
.section-accent .faq-answer-bubble {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
/* Cele 3 puncte "scrie..." — vizibile doar scurt, înainte ca textul să înceapă să apară
   (js/common.js le arată/ascunde), doar la prima deschidere a fiecărui item. */
.faq-typing-dots { display: none; align-items: center; gap: 4px; height: 1.2em; }
.faq-typing-dots.is-visible { display: inline-flex; }
.faq-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  animation: faqTypingDot 1s ease-in-out infinite;
}
.section-dark .faq-typing-dots span,
.section-accent .faq-typing-dots span { background: var(--color-text-inverse-secondary); }
.faq-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.faq-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes faqTypingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-typing-dots span { animation: none; opacity: 0.6; }
}

.certification {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
}
.certification i { color: var(--color-accent-600); }
.certification strong { display: block; }
.certification-badge { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; }

/* ==========================================================================
   Timeline (About — #about-timeline) — layout zigzag, an în stânga/dreapta
   alternativ, linie centrală. Colapsează pe o singură coloană sub 768px
   (regulă design-quality.md: nu sacrifica funcționalitatea pe niciun breakpoint).
   ========================================================================== */
.timeline { position: relative; max-width: 960px; margin: var(--space-5) auto 0; }
/* Linia pornește exact din centrul primului punct (4px top + jumătate din cele 12px ale
   punctului = 10px), nu din marginea de sus a containerului — altfel linia ieșea vizibil
   deasupra primului punct. Cerere explicită Adriana, 2026-07-12. */
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 0; width: 2px;
  background: var(--color-border-light); transform: translateX(-50%);
}
/* Linia de progres (umplere) + bulina care urmărește scroll-ul, peste linia statică de mai
   sus. Înălțimea .timeline-progress-fill și poziția .timeline-progress-dot sunt setate din
   JS (common.js), procentual, pe baza scroll-ului utilizatorului prin secțiune. Fără
   transition pe height/top — actualizarea vine din requestAnimationFrame la fiecare cadru
   de scroll, deja lină, un transition suplimentar ar introduce lag. */
.timeline-progress {
  position: absolute; left: 50%; top: 10px; width: 2px; height: calc(100% - 10px);
  transform: translateX(-50%); pointer-events: none;
}
.timeline-progress-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: var(--color-accent-600);
}
.timeline-progress-dot {
  position: absolute; top: 0; left: 50%; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-accent-600);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(20, 22, 28, 0.3);
}
.timeline-item { position: relative; width: 50%; padding-bottom: var(--space-6); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:nth-child(odd) { left: 0; text-align: right; padding-right: var(--space-5); }
.timeline-item:nth-child(even) { left: 50%; text-align: left; padding-left: var(--space-5); }
.timeline-item::before {
  content: ""; position: absolute; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--color-accent-600);
}
.timeline-item:nth-child(odd)::before { right: -6px; }
.timeline-item:nth-child(even)::before { left: -6px; }
.timeline-year {
  display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}
.timeline-title { margin: 0 0 var(--space-2); }
.timeline-body { color: var(--color-text-secondary); margin: 0; }

@media (max-width: 768px) {
  .timeline { padding-left: 24px; }
  .timeline::before { left: 4px; transform: none; }
  .timeline-progress { left: 4px; transform: none; }
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    width: 100%; left: 0; text-align: left; padding-left: 8px; padding-right: 0;
  }
  .timeline-item:nth-child(odd)::before,
  .timeline-item:nth-child(even)::before { left: -25px; right: auto; } /* centrat pe linie (linie la 4px+1px centru, cerc 12px lățime) */
}

/* ==========================================================================
   Skills marquee (About — #about-skills) — bandă full-bleed cu skill-uri care
   derulează continuu; conținutul vizual e duplicat pt. buclă fără sudură și
   marcat aria-hidden, cititorii de ecran primesc o singură listă statică
   (sr-only) — regulă accessibility.md, nicio informație doar pt. văzători.
   ========================================================================== */
.skills-marquee {
  width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
  overflow: hidden;
  border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
  padding-block: var(--space-4);
}
.skills-marquee-track { display: flex; width: max-content; animation: skills-scroll 70s linear infinite; }
.skills-marquee:hover .skills-marquee-track { animation-play-state: paused; }
.skills-marquee-item {
  display: flex; align-items: center;
  /* 300 (Light), nu 400 — restul site-ului e light/extra-light; 400 ieșea prea "solid"
     lângă tot restul tipografiei. Cerere explicită Adriana, 2026-07-09. */
  font-family: var(--font-heading); font-weight: 300; font-size: 1.05rem;
  color: var(--color-text-secondary); white-space: nowrap;
}
/* Element de separare între skill-uri — caracter static, nu iconiță de font,
   ca să nu depindă de încărcarea fontului Phosphor (randare garantată).
   margin-inline egal pe ambele părți ca punctul să fie centrat între cuvinte. */
.skills-marquee-item::after {
  content: "•"; color: var(--color-accent-600); font-weight: 700; margin-inline: var(--space-4);
}
@keyframes skills-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .skills-marquee-track { animation: none; overflow-x: auto; }
}

/* ==========================================================================
   Proiecte
   ========================================================================== */
.project-card {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.score-row { display: flex; gap: var(--space-6); margin: var(--space-4) 0; }
.score-stat { display: flex; flex-direction: column; }
.score-stat .value {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.75rem;
  color: var(--color-text-inverse);
}
.findings-list { padding-left: var(--space-4); }
.findings-list li { margin-bottom: var(--space-2); }

/* Case study — pași de proces (secțiune dedicată de proiect, ex: airline-booking.html) */
.case-study-body { display: flex; flex-direction: column; gap: var(--space-7); }
.case-step .eyebrow { margin-top: 0; }
.case-step .h2 { margin-bottom: var(--space-3); }
/* Fără marginea implicită de browser (~1em) între paragrafele unui pas — textele pe mai
   multe paragrafe (Wireframes, HI-FI etc.) trebuie să curgă continuu, fără spațiu vizibil
   între ele, nu ca blocuri separate. Cerere explicită Adriana, 2026-07-11. */
.case-step p { margin: 0; }

/* .case-step-split — variantă text/imagine alăturate (nu unul sub altul), reutilizabilă pe
   orice pas viitor care are nevoie de acest layout (cerere explicită Adriana, 2026-07-09,
   pt. #case-study-usability-test). */
.case-step-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.case-step-split-text { min-width: 0; }
.case-step-split-media { min-width: 0; }
/* fără border/radius aici — imaginea e un decupaj cu fundal transparent (laptop mockup),
   nu un screenshot dreptunghiular; un chenar ar desena un dreptunghi vizibil în jurul formei. */
.case-step-split-media .case-step-media { margin-top: 0; border: none; border-radius: 0; }

/* #case-study-hero — text stânga, video de prezentare dreapta (cerere explicită Adriana,
   2026-07-07). Aspect-ratio 16:9 rezervat explicit pe coloana video — layout-ul nu sare
   (CLS) când placeholder-ul devine <video> real. */
/* Padding-top redus (32px în loc de 80px moștenit din .section) — cerere explicită Adriana,
   2026-07-09; padding-bottom rămâne 80px (var(--space-6b), neschimbat). */
#case-study-hero { padding-top: var(--space-4b); }
/* Textele din hero la 16px (nu 18px, cât dă implicit .text-body-l) — cerere explicită
   Adriana, 2026-07-09. */
#case-study-hero .text-body-l { font-size: 1rem; }
/* Link-ul „Back to homepage" — înălțime fixă 56px, font 16px (nu 14px ca restul .nav-link —
   cerere explicită Adriana, 2026-07-09, nu e caz de excepție), gap 8px între iconiță și text.
   Ascuns (nu șters din HTML) pe pagina asta — aici nu are rost, dar componenta rămâne pentru
   reutilizare pe alte pagini pe viitor. Cerere explicită Adriana, 2026-07-11. */
#case-study-hero .nav-link {
  display: none;
  align-items: center;
  gap: var(--space-2);
  height: 56px;
  font-size: 1rem;
}
/* Hover: textul se îndepărtează de iconiță; pressed: revine imediat lângă ea. Doar transform,
   cf. regula de performanță (animă exclusiv transform/opacity). */
#case-study-hero .nav-link span {
  display: inline-block;
  transition: transform 0.2s ease;
}
#case-study-hero .nav-link:hover span { transform: translateX(4px); }
#case-study-hero .nav-link:active span { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  #case-study-hero .nav-link span { transition: none; }
}
/* .case-study-hero-stack — titlu mare centrat, descriere dedesubt, apoi video mare pe toată
   lățimea (cerere explicită Adriana, 2026-07-11 — înlocuiește layout-ul anterior text/video
   alăturate). Centrat la fel ca #about-hero .container, pentru consistență între pagini. */
/* Fără gap uniform — spacing pe fiecare element, ca să respecte regula standard din site
   (#intro, #services): eyebrow→titlu 16px, titlu→descriere 16px, descriere→conținut 32px.
   Cerere explicită Adriana, 2026-07-11 — un gap uniform de 40px lăsa eyebrow-ul prea departe
   de titlu. */
.case-study-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-5);
  text-align: center;
}
/* Titlul folosește .text-display-xl (56px/64px) — același token ca #intro (Home) și
   .about-hero-title, nu o mărime proprie. Se întinde pe tot containerul de text (fără
   max-width), centrat. Eyebrow→titlu = 16px, deja implicit din .eyebrow margin-bottom. */
.case-study-hero-title { max-width: none; margin-top: 0; }
/* Titlu → descriere: 16px. Fără gap între subtitlu și paragraful de motivație — cele 2
   propoziții curg direct, fără spațiu vizibil între ele (paragrafele își pierd și marginea
   implicită de browser). Cerere explicită Adriana, 2026-07-11. */
.case-study-hero-text {
  display: flex;
  flex-direction: column;
  max-width: 64ch;
  margin-top: var(--space-3);
}
.case-study-hero-text p { margin: 0; }
/* Video mare, cât permite secțiunea (max 80vh înălțime, ca să nu domine toată fereastra pe
   ecrane late) — width calculat din acea înălțime maximă via aspect-ratio, nu invers, ca să
   nu se ajungă la cropping. aspect-ratio = raportul real al video-ului (1208×872).
   border-radius + overflow:hidden pe container (nu doar pe <video>) — clipping robust
   cross-browser, altfel colțurile pot arăta ca și cum ceva se vede în spatele lor. */
.case-study-hero-video {
  min-width: 0;
  aspect-ratio: 1208 / 872;
  width: min(100%, 110.8vh);
  margin-inline: auto;
  margin-top: var(--space-4b);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.case-study-hero-media {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Placeholder pentru imagini/machete care urmează să fie adăugate — folosește currentColor,
   deci se adaptează automat la fundal deschis/închis fără variante separate */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 240px;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed currentColor;
  border-radius: var(--radius-md);
  opacity: 0.55;
  text-align: center;
}
.media-placeholder span { display: block; font-size: 0.875rem; }

/* Imagini reale de proces, înlocuiesc .media-placeholder pas cu pas pe măsură ce Adriana
   urcă materialul (ex: airline-booking.html) — aceleași proporții/spacing ca placeholder-ul. */
.case-step-media {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-4);
  border-radius: var(--radius-md);
}
.case-step-media-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.case-step-media-figure { flex: 1 1 320px; margin: 0; }
.case-step-media-group .case-step-media { margin-top: 0; }
/* Video-ul din grup — container rotunjit cu overflow:hidden (nu doar border-radius pe
   <video>), ca să nu para că se vede ceva colțuros în spatele colțurilor rotunjite.
   Cerere explicită Adriana, 2026-07-11. */
.case-step-media-figure:has(video) {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.case-step-media-figure:has(video) .case-step-media { border-radius: 0; }
.case-step-media-caption {
  display: block;
  font-size: 0.875rem;
  text-align: center;
  margin-top: var(--space-2);
}

/* ==========================================================================
   Formular — Verifică-ți site-ul
   ========================================================================== */
.checker-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-width: 480px;
}
.form-field { margin-bottom: var(--space-4); }
/* Grup vizual Nume+Email (contact.html) — rămân unul sub altul (nu pe același rând,
   corectat 2026-07-20: nu a fost cerută o coloană dublă), doar cu gap mai mic între ele
   decât între celelalte câmpuri, ca să se simtă vizual grupate. Marginea de grup stă pe
   wrapper; cele 2 .form-field din interior au gap redus, ultimul fără margine (evită
   dublarea spațiului înainte de marginea de grup). */
.form-group { margin-bottom: var(--space-4); }
.form-group .form-field { margin-bottom: var(--space-2); }
.form-group .form-field:last-child { margin-bottom: 0; }
/* :not(.checkbox-option) — fără el, această regulă (mai specifică: clasă+tag) câștigă
   peste .checkbox-option (o singură clasă) și îi suprascrie silențios display:flex cu
   block, rupând centrarea bifă↔text și adăugând un margin-bottom de 8px în plus peste
   gap-ul de 8px al .checkbox-group (16px în loc de 8px între opțiuni). Bug găsit și
   corectat 2026-07-21. */
.form-field label:not(.checkbox-option) {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: 0; /* margini ascuțite — consistent cu butoanele */
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-field textarea { resize: vertical; }
.form-field input:hover,
.form-field textarea:hover { border-color: var(--color-text-secondary); }
.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) { border-color: var(--color-accent-600); }
.helper { display: block; font-size: 0.875rem; color: var(--color-text-secondary); margin-top: var(--space-1); }

/* Grup de bife — tip serviciu (contact.html), selecție multiplă, opțional. Etichetă de
   grup (nu e legată de un singur input, deci <span>, nu <label>), stilizată identic cu
   .form-field label (aceeași ierarhie vizuală). */
.form-field-label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.checkbox-group { display: flex; flex-direction: column; gap: var(--space-2); }
/* Toată linia e zona de acțiune (cerere explicită Adriana, 2026-07-20) — <label> nativ,
   deci click/tap oriunde pe rând bifează, nu doar pe pătrățel. width:100% (nu doar
   stretch implicit din .checkbox-group) ca zona clicabilă să meargă până la marginea
   formularului, nu doar până la capătul textului. height (nu min-height): 44px exact pe
   toate opțiunile, indiferent de conținut — asta e targetul WCAG 2.5.8, nu bifa în sine. */
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* 8px între bifă și text */
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 500; /* medium — nu bold, cerere explicită Adriana, 2026-07-21 */
  line-height: 1; /* text aliniat exact pe centrul bifei, nu deplasat de line-height moștenit */
}
.checkbox-option span { display: inline-block; }
/* Selector mai specific decât .form-field input (mai jos) — câștigă indiferent de ordinea
   din fișier, ca bifele să nu moștenească accidental stilul de input text (lățime 100%,
   fundal, bordură groasă). 20×20px — targetul de click rămâne cei 44px ai întregii linii
   de mai sus, nu pătrățelul în sine, deci WCAG 2.5.8 tot respectat. */
.form-field .checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex-shrink: 0;
  accent-color: var(--color-accent-600);
  border-radius: var(--radius-sm);
}
/* Eroare specifică unui câmp (ex: email invalid) — direct sub inputul vinovat, nu
   izolată sub buton. Aceeași culoare ca .form-status.is-error, mai mic (ca .helper),
   nu bold — nu e un status de nivelul întregului formular. Selector :not([hidden]),
   nu regulă necondiționată — altfel display:block suprascrie [hidden] nativ (bug
   identic găsit pe draftul de audit UX, aceeași sesiune, 2026-07-15). Cerere explicită
   Adriana. */
.field-error:not([hidden]) { display: block; font-size: 0.875rem; color: #F87171; margin-top: var(--space-1); }
.form-status[role="status"]:not([hidden]) { margin-top: var(--space-3); font-weight: 600; }
/* Verde/roșu — diferențiere vizuală clară succes vs. eroare, nu doar text. Cerere explicită
   Adriana, 2026-07-12. */
.form-status.is-success { color: #4ADE80; }
.form-status.is-error { color: #F87171; }
/* Notă GDPR lângă formular — scopul colectării declarat vizibil, nu doar în Privacy Policy.
   Cerere explicită Adriana, 2026-07-11. */
/* margin-bottom: 0 pe ultimul câmp — fără asta, marginile colapsează (regulă CSS standard
   între siblings block) și cei 24px de mai jos "înghit" cei 16px de aici, dând tot 24px în
   loc de 16px. Cerere explicită Adriana, 2026-07-12: 16px sus, 24px jos, exact. */
.contact-form .form-field:last-of-type { margin-bottom: 0; }
.form-privacy-note { margin-top: var(--space-3); margin-bottom: var(--space-4); }
.form-privacy-note a { color: inherit; text-decoration-line: underline; text-underline-offset: 3px; }
.form-privacy-note a:hover { color: var(--color-accent-600); }

/* Formular de contact — fără cardul vizual (border/padding/max-width), doar inputurile
   și textele rămân (cerere Adriana 2026-07-08); paleta pe fundal închis rămâne aceeași. */
.contact-form .form-field label { color: var(--color-text-inverse); }
.contact-form .form-field input,
.contact-form .form-field textarea {
  border-color: var(--color-border-dark);
  background: transparent;
  color: var(--color-text-inverse);
}
/* Cerere Adriana 2026-07-07: placeholder vizibil mai șters decât textul real completat de
   user (altfel poate crede că a completat deja) — opacity redusă explicit, font-weight
   confirmat light (nu moștenește accidental un weight mai apăsat). */
.contact-form .form-field input::placeholder,
.contact-form .form-field textarea::placeholder {
  color: var(--color-text-inverse-secondary);
  opacity: 0.6;
  font-weight: 300;
}
/* Cerere Adriana 2026-07-07 + 2026-07-08: hover și focus (pressed) devin portocaliu (accent)
   pe toate cele 3 câmpuri deopotrivă, identic — doar default rămâne gri (border-dark). Fără
   focus-visible separat: same look ca hover, o singură linie, nu conturul nativ + border. */
.contact-form .form-field input:hover,
.contact-form .form-field textarea:hover,
.contact-form .form-field input:focus,
.contact-form .form-field textarea:focus { border-color: var(--color-accent-600); }
.contact-form .form-field input:focus-visible,
.contact-form .form-field textarea:focus-visible { outline: none; }
.contact-form .helper { color: var(--color-text-inverse-secondary); }
.contact-form .form-field-label { color: var(--color-text-inverse); }
/* Excepție pt. bifele de servicii: regula de mai sus scoate outline-ul de pe orice input
   din .form-field la focus-visible (gândită pt. text/email/textarea, care au propriul
   indicator — bordură portocalie). Bifele n-au acel echivalent, au nevoie de outline-ul
   standard, altfel devin invizibile la navigare din tastatură. Selector mai specific
   (.checkbox-group), câștigă indiferent de ordinea din fișier. */
.contact-form .form-field .checkbox-group input:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
}

/* Contact — split layout: foto full-bleed stânga, formular dreapta (2026-07-07,
   referință vizuală + cerere explicită Adriana). Suprascrie .hero (flex, centrat pe
   1 coloană) cu grid pe 2 coloane egale; poza iese din .container ca la
   .photo-carousel-wrapper (edge-to-edge), conținutul din dreapta păstrează padding-ul
   global de pagină pe margine. */
#contact-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
  padding-block: 0;
}
.contact-hero-media { position: relative; overflow: hidden; }
.contact-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6); /* 64px pe toate laturile — stânga era 40px (space-5), acum egal cu restul */
}
/* Cerere Adriana 2026-07-07: formularul umple toată lățimea coloanei din dreapta (nu 480px
   fix), iar butonul de trimitere se aliniază la dreapta pe web — cel mai aproape de unde
   ajunge mâna/mouse-ul după completarea ultimului câmp (Message). Pe mobil rămâne
   full-width prin regula globală .btn (design-quality.md), neschimbată aici. */
.contact-hero-content .contact-form { max-width: none; width: 100%; margin-top: var(--space-5); }
#contact-form button[type="submit"] { display: flex; margin-left: auto; }

@media (max-width: 768px) {
  #contact-hero { grid-template-columns: 1fr; min-height: 0; }
  .contact-hero-media { min-height: 280px; }
  .contact-hero-content { padding: var(--space-5) var(--space-4); }
}
@media (max-width: 767px) {
  .contact-hero-content { padding-inline: 1rem; } /* 16px pe mobil, regulă globală de gutter */
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Footer — logo/identitate + 3 coloane de navigare, apoi bară separată jos
   (copyright + cookie settings), pattern preluat dintr-o referință dată de Adriana. */
.footer-grid {
  display: grid;
  /* 2 coloane: brand + o singură listă de linkuri (Home/About/Contact unite, fără gap grid
     artificial între ele — erau grupate în 2 coloane separate doar din cauza structurii vechi
     cu Services/Use Cases, acum ascunse). Coloana de linkuri e "auto", nu o fracție fixă — se
     lățește exact cât are nevoie ca toate linkurile (inclusiv Airline Booking) să încapă pe un
     singur rând, fără să treacă pe linia următoare. Cerere explicită Adriana, 2026-07-11. Când
     vor exista mai multe pagini de tip case study, linkurile revin stivuite sub formă de listă. */
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  padding-block: var(--space-6);
}
.footer-brand, .footer-nav-col { min-width: 0; }
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.footer-logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-text-inverse);
}
.footer-tagline { margin: 0; }
/* Pe web, cele 3 linkuri (Home/About/Contact) stau în linie, nu într-o coloană — cerere
   explicită Adriana, 2026-07-05. Pe mobil rămân stivuite (vezi @media max-width:768px). */
.footer-nav-col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
}
/* Link-urile din footer (Home/About, Contact): text 16px (nu 14px moștenit de la .nav-link) +
   zonă de click 44px (WCAG 2.5.8), aceeași regulă de înălțime ca restul elementelor interactive
   ale site-ului. Cerere explicită Adriana, 2026-07-05. */
.footer-nav-col .nav-link {
  font-size: 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
/* .footer-email: iconă mail, nu adresa ca text — același tratament ca iconițele sociale
   (buton 44×44, cerință WCAG 2.5.8), doar link mailto diferit. Fundal portocaliu, cerc,
   identic cu butonul de accesibilitate (.a11y-fab) — cerere explicită Adriana, 2026-07-05. */
/* Pătrate (border-radius: 0), nu cercuri — consistent cu restul butoanelor de pe site
   (.btn are aceleași colțuri ascuțite). Cerere explicită Adriana, 2026-07-12. */
.footer-social-link, .footer-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--color-accent-600);
  color: #fff;
  font-size: 1.25rem;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(.25,.46,.45,.94);
}
/* :hover scopat la (hover:hover) — pe touch (mobil/tabletă), :hover rămâne "blocat" pe
   iconiță după tap (nu există un pointer real care să "plece" de pe element), mai ales
   la link-uri către rețele sociale care deschid tab nou și te lasă cu iconița tot
   evidențiată la revenire. Cerere explicită Adriana, 2026-07-11. */
@media (hover: hover) and (pointer: fine) {
  .footer-social-link:hover, .footer-email:hover { background: var(--color-accent-700); }
}
/* Pressed — același tratament ca .btn-primary:active (fundal accent-700 + apăsare 1px).
   Rămâne neconditionat: :active se eliberează corect la touchend, nu se blochează. */
.footer-social-link:active, .footer-email:active { background: var(--color-accent-700); transform: translateY(1px); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
}
/* #fff, nu var(--color-text-inverse-secondary) — cerere Adriana, 2026-07-11 (extinde decizia
   de la .text-inverse-secondary și la acest element, care folosea variabila direct). */
.footer-cookie-settings {
  background: none;
  border: none;
  padding: 0;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-body);
  text-decoration-line: none;
  text-underline-offset: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.3s cubic-bezier(.25,.46,.45,.94);
}
.footer-cookie-settings:hover { color: var(--color-accent-600); text-decoration-line: underline; }
/* Link Privacy Policy + buton Cookies, grupate — pagină nouă, cerere Adriana, 2026-07-11. */
.footer-bottom-links { display: flex; align-items: center; gap: var(--space-4); }

/* Pagină Privacy Policy — conținut simplu, un singur bloc de text/liste centrat, lățime
   redusă pentru lizibilitate. Cerere Adriana, 2026-07-11. */
.legal-content { max-width: 72ch; margin-inline: auto; }
.legal-content h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { margin-bottom: var(--space-3); }
.legal-content a { color: var(--color-accent-600); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  /* Pe mobil/tabletă, linkurile revin stivuite (coloană), lipite fără gap — spațiul orizontal
     e prea puțin pt. 3 linkuri pe un rând lângă restul conținutului footer-ului. */
  .footer-nav-col { flex-direction: column; flex-wrap: nowrap; gap: 0; }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer-brand { grid-column: auto; }
  /* "Toate drepturile rezervate" pe rândul propriu, sub "© 2026 Adriana Aurel." — doar pe
     mobil (cerere explicită Adriana, 2026-07-22); pe tabletă/desktop rămâne o singură
     propoziție continuă, nu se rupe artificial. */
  .footer-rights { display: block; }
}

/* ==========================================================================
   Responsive — hero: 1920 / 1600 / 1440 desktop / 768 tablet / mobil sub 768
   (design/testare la 375px, dar query-ul de cod merge până la 767px — cf.
   nota de mai jos, "de ce 767px, nu 375px").
   ========================================================================== */
@media (min-width: 1920px) {
  .container { max-width: 1280px; } /* grid NEXTlevel: peste 1920px, conținut plafonat, margini mari */
  /* .container e plafonat la 1280px aici (nu 1440px) — formula din #service-finder
     trebuie să folosească aceeași jumătate (640px), altfel cardurile laterale ar depăși
     marginea reală a grid-ului pe ecrane foarte late. */
  .finder-card.is-prev { transform: translateX(-50%) translateX(calc(-1 * (min(50vw, 640px) - 355px))) scale(0.85); }
  .finder-card.is-next { transform: translateX(-50%) translateX(calc(min(50vw, 640px) - 355px)) scale(0.85); }
}

@media (max-width: 768px) {
  /* Padding vertical redus pe mobil/tabletă — 48px sus/jos în loc de 80px (--space-6b),
     de la prima secțiune (hero inclus) în jos. Cerere Adriana 2026-07-05 (inițial 32px,
     mărit ulterior la 48px, tot azi). */
  .section { padding-block: var(--space-5b); }

  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-photo { max-width: none; }
  .origin-story-grid { grid-template-columns: 1fr; }
  /* Pe 1 coloană, gap-ul de 64px (--space-6, gândit ca spațiu ÎNTRE cele 2 coloane pe desktop)
     devine spațiul vertical text→imagine — mult peste cei 24px (--space-4) folosiți peste tot
     în restul case study-ului. Redus explicit aici la aceeași valoare. Cerere Adriana, 2026-07-11. */
  .case-step-split { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .score-row { gap: var(--space-4); flex-wrap: wrap; }
  .pillars-grid { grid-template-columns: 1fr; }
  #services-teaser .pillars-grid { grid-template-columns: 1fr 1fr; } /* 4→2 pe tabletă */

  /* Carusel #service-finder — rămâne text stânga/ilustrație dreapta (destul spațiu pe
     tabletă), doar mai mic. Offset calculat la fel ca pe desktop: marginea cardului
     lateral (560px × 0.85 ÷ 2 = 238px) se aliniază cu marginea .container (50vw − 32px
     padding, sub 1440px nu mai e nevoie de min() — container-ul nu ajunge plafonat aici). */
  .finder-track { height: 300px; }
  .finder-card { width: 560px; min-height: 260px; gap: var(--space-5); padding: var(--space-4); }
  .finder-card-illustration { width: 185px; height: 120px; }
  .finder-card.is-prev { transform: translateX(-50%) translateX(calc(-1 * (50vw - 270px))) scale(0.85); }
  .finder-card.is-next { transform: translateX(-50%) translateX(calc(50vw - 270px)) scale(0.85); }

  .hero { min-height: 80svh; padding-block: var(--space-5b); }
  /* 480px fix, indiferent de ecran — nu moștenește min-height-ul de mai sus (.hero). */
  .about-hero { height: 480px; min-height: 0; }

  /* Hamburger de la tabletă în jos (nu doar sub 375px) — nav-ul complet (6 iteme) nu
     încape pe un rând la 768px fără să împingă logo-ul, deci trece în spatele burger-ului
     pe tot intervalul tabletă + mobil. Logo-ul „Adriana Aurel" rămâne pe stânga. */
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* Dropdown-ul de limbă (acum copil direct al .container, lângă burger) e înlocuit pe
     mobil/tabletă de butonul rotund + modal (.mobile-lang-fab) — cerere explicită Adriana. */
  .site-header .container > .lang-switcher { display: none; }
  .mobile-lang-fab { display: inline-flex; }
  .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2); /* 8px între linkuri/butoane — cerere explicită Adriana, 2026-07-05 */
    position: fixed;
    transform: none; /* anulează translateX(-50%) moștenit de la .primary-nav (centrare web) —
                         altfel panoul deschis pe mobil acoperă doar jumătate din ecran */
    z-index: 100;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100svh - 64px); /* siguranță: scroll intern dacă nu încape (telefon landscape) */
    overflow-y: auto;
    background: var(--color-bg-light);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
  }
  /* Fiecare acțiune (link/dropdown) ocupă toată lățimea panoului, text aliniat la stânga —
     nu doar text centrat/inline, ca pe desktop — și are cutia de 44px (WCAG 2.5.8), aceeași
     tratare ca link-urile din footer. Cerere explicită Adriana, 2026-07-05. */
  .primary-nav.is-open > .nav-link,
  .primary-nav.is-open > .nav-dropdown {
    width: 100%;
    text-align: left;
  }
  .primary-nav.is-open > .nav-link {
    font-size: 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .primary-nav.is-open .nav-dropdown-toggle {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
    justify-content: flex-start;
  }
  .primary-nav.is-open .nav-dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    margin-top: var(--space-1);
    width: 100%;
    text-align: left;
  }
  /* Regula veche viza doar <button> — link-ul "Airline Booking" din submeniul Use Cases e <a>,
     rămăsese la 14px moștenit din regula de bază (.nav-dropdown-menu a), încălcând regula
     "fără 14px pe mobil" (cerere Adriana 2026-07-10) pt. un link de navigare real. */
  .primary-nav.is-open .nav-dropdown-menu a,
  .primary-nav.is-open .nav-dropdown-menu button {
    min-height: 44px;
    font-size: 1rem;
  }
  /* Bloc contact (text + iconițe social) — vizibil doar în meniul mobil/tabletă deschis.
     Reutilizează .footer-social/.footer-social-link/.footer-email (deja 44×44px), dar cu
     culori adaptate la fundalul deschis al panoului (originalele sunt gândite pt. footer-ul
     dark — alb pe alb altfel, aceeași greșeală de evitat ca la fundalul Experience/logo-uri). */
  .primary-nav-contact {
    display: block;
    /* 32px față de Contact (ultimul link vizibil) — peste gap-ul de 8px moștenit de la
       .primary-nav.is-open (8+24=32). Cerere explicită Adriana, 2026-07-05. */
    margin-top: var(--space-4);
  }
  .primary-nav-contact p { margin: 0; }
  /* Titlu, nu text de corp obișnuit — mai mare + bold, ca să se înțeleagă clar că rândul de
     dedesubt (iconițele) e zona de acțiune, nu propoziția în sine. */
  .primary-nav-contact-title {
    font-size: 1.125rem;
    font-weight: 600;
  }
  /* 16px între titlu și iconițe, doar aici — nu 8px, cât are .footer-social implicit
     (folosit și în footer, unde rămâne neschimbat). Cerere explicită Adriana, 2026-07-05. */
  .primary-nav-contact .footer-social { margin-top: var(--space-3); }
  /* Overlay care întunecă restul paginii cât timp meniul e deschis — creat dinamic de
     js/common.js, click pe el închide meniul. Identic pe tabletă și mobil (același breakpoint). */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
  }
  .nav-overlay.is-visible { display: block; }
}

/* Blochează scroll-ul paginii din spatele meniului mobil/tabletă cât timp e deschis.
   overflow:hidden singur nu oprește scroll-ul tactil pe iOS Safari — position:fixed
   pe body e tehnica robustă cross-browser; js/common.js salvează/restaurează scrollY. */
body.nav-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  .container { padding-inline: 1rem; } /* 16px — grid NEXTlevel: margine redusă sub breakpoint mobil */
  .display { font-size: 1.75rem; }
  .h2 { font-size: 1.375rem; }
  #services-teaser .pillars-grid { grid-template-columns: 1fr; } /* 2→1 pe mobil */

  /* Carusel #service-finder — pe 375px nu mai încape text+ilustrație pe același rând
     (layout-ul "03 — Process" e gândit pt. desktop/tabletă) — revine la stivuire pe
     verticală (titlu+descriere+CTA sus, ilustrația dedesubt).
     Card mare, un singur card vizibil pe mobil (cerere explicită Adriana, 2026-07-21):
     cardurile din spate NU se mai văd deloc (nici măcar o fâșie) — navigarea principală
     devine swipe (js/common.js, pointerdown/pointerup pe .finder-track), dots-urile și
     săgețile (din panoul de accesibilitate) rămân disponibile ca alternativă. */
  .finder-track { height: 420px; }
  .finder-card {
    flex-direction: column;
    text-align: center;
    width: min(calc(100vw - 32px), 400px);
    min-height: 380px;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .finder-card-desc { font-size: 1.0625rem; }
  .finder-card.is-prev,
  .finder-card.is-next,
  .finder-card.is-far {
    opacity: 0;
    pointer-events: none; /* niciun click/hover pe cardurile invizibile din spate */
  }
  .finder-card-illustration { width: 220px; height: 143px; }
  /* Ordine cerută explicit (Adriana, 2026-07-21): ilustrație → eyebrow → descriere → buton.
     .finder-card-text nu mai formează o cutie proprie (display:contents) — copiii lui
     (tag/descriere/CTA) devin itemi flex direcți ai .finder-card, alături de ilustrație,
     ca să poată fi reordonați individual, nu doar ca bloc. Fără schimbări în HTML. */
  .finder-card-text { display: contents; }
  .finder-card-illustration { order: 1; }
  .finder-card-tag { order: 2; }
  .finder-card-desc { order: 3; }
  .finder-card-cta { order: 4; }
  .photo-carousel-item { width: 100vw; } /* o singură poză vizibilă per "pagină" de scroll */
  .carousel-arrow-prev { left: 12px; }
  .carousel-arrow-next { right: 12px; }
  /* Cele 3 cifre din Leadership (Home): unu sub altul doar pe mobil — pe tabletă (768px)
     încap pe un singur rând, rămân neschimbate acolo. Scopat pe #leadership, nu global,
     ca scorurile din ux-audit.html să nu fie afectate. */
  #leadership .score-row { flex-direction: column; flex-wrap: nowrap; align-items: center; }

  /* Butoane full-width pe mobil — regulă design-quality.md */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; justify-content: center; }

  .hero { min-height: 70svh; }
  .about-hero { height: 480px; min-height: 0; }
}

/* Reduce motion — respectă preferința utilizatorului (WCAG — animațiile nu blochează utilizarea) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .pillar-card { transition: none; }
  .finder-card { transition: none; }
}