/* ============================================================
   NIKSEN — Built to perform.
   Design system: ivoriu cald / cerneală / verde pin.
   Pereche tipografică: Playfair Display (titluri de impact) +
   Poppins (text, UI). Playfair Italic = ecoul lui „n" din logo.
   ============================================================ */

/* ---------- Fonturi (locale, self-hosted — fără CDN Google) ---------- */
/* Poppins — text, UI, subtitluri */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-latinext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500-latinext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600-latinext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display — titluri de impact + italic pentru accente/citate */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-600-700-latin.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-600-700-latinext.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-italic-600-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-italic-600-latinext.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --ivory: #FAF8F4;
  --ivory-deep: #F3F0E9;
  --ink: #1A1A18;
  --ink-soft: #45443F;
  --ink-mute: #6E6C64;
  --pine: #1F3D33;
  --pine-deep: #163028;
  --pine-tint: #E8EEEB;
  --line: rgba(26, 26, 24, 0.10);
  --line-soft: rgba(26, 26, 24, 0.06);

  --font-sans: 'Poppins', 'Segoe UI', -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-accent: 'Playfair Display', Georgia, serif;

  --text-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);
  --text-h1: clamp(2.5rem, 1.4rem + 5.4vw, 5rem);
  --text-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-kicker: 0.8125rem;

  --space-section: clamp(6rem, 4rem + 9vw, 11rem);
  --space-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  --radius: 18px;
  --radius-lg: 26px;
  --shadow-soft: 0 1px 2px rgba(26,26,24,0.04), 0 12px 40px -12px rgba(26,26,24,0.10);
  --shadow-lift: 0 2px 4px rgba(26,26,24,0.05), 0 24px 56px -16px rgba(31,61,51,0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--pine); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--pine); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 4px; }

/* grăunte discret — căldură de hârtie, nu ecran plat */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Tipografie ---------- */
/* Poppins 600 pentru subtitluri; Playfair rezervat titlurilor de impact (H1). */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
/* Titlu principal — Playfair Display, contrast editorial, line-height strâns */
h1, .h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.07;
}
.h-display { font-size: var(--text-h1); }
h1 { font-size: var(--text-h1); }
h2, .h-2 { font-size: var(--text-h2); }
h3, .h-3 { font-size: var(--text-h3); }
p { max-width: 62ch; }
.lead { font-size: var(--text-lead); line-height: 1.6; color: var(--ink-soft); font-weight: 400; }
.muted { color: var(--ink-mute); }
strong { font-weight: 600; color: var(--ink); }

/* cuvântul-accent — Playfair italic, ecoul lui „n" cursiv din logo */
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pine);
}

.kicker {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: var(--text-kicker);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
}
.kicker::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: var(--pine);
  opacity: 0.7;
}

/* lockup de divizie: n cursiv + nume */
.division-mark { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.division-mark .n {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  margin-right: 0.02em;
}

/* ---------- Layout ---------- */
.container {
  /* 71.25rem = 1140px, lățimea de bază a conținutului pe tot site-ul —
     vezi și --film-inset, care își calculează marginea din aceeași valoare. */
  width: min(100% - 2.5rem, 71.25rem);
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 47rem); }
.section { padding-block: calc(var(--space-section) / 2); }
.section:first-of-type { padding-top: 0; }
.section.lineup:first-of-type { padding-top: clamp(4.5rem, 3.5rem + 4vw, 6.5rem); }
main > .section:last-child { padding-bottom: var(--space-section); }
.section-head { max-width: 44rem; margin-bottom: var(--space-block); }
.section-head p { margin-top: 1.25rem; }
.center { text-align: center; }
.center p, .center .kicker { margin-inline: auto; }

/* ---------- Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.25s ease, color 0.25s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--pine); color: #FDFCFA;
  box-shadow: 0 1px 2px rgba(22,48,40,0.25), 0 10px 28px -10px rgba(31,61,51,0.45);
}
.btn--primary:hover { background: var(--pine-deep); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(22,48,40,0.2), 0 16px 36px -10px rgba(31,61,51,0.5); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255,255,255,0.5);
}
.btn--ghost:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.btn--text {
  padding: 0.4rem 0.1rem;
  color: var(--pine);
  font-weight: 500;
  border-radius: 4px;
}
.btn--text .arrow { transition: transform 0.3s var(--ease-out); }
.btn--text:hover .arrow { transform: translateX(4px); }
.btn--lg { padding: 1.1rem 2.3rem; font-size: 1.125rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }

.arrow { display: inline-block; }

/* ---------- Navigație (bară subțire, stil Apple) ----------
   Bară joasă, permanent translucidă, tipografie mică și uniformă,
   totul centrat pe un singur rând. Fără CTA colorat în bară.
   ------------------------------------------------------------ */
.nav {
  position: static;
  z-index: 100;
  height: 2.75rem;
  background: rgba(250, 248, 244, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
/* backdrop-filter creează un stacking context nou — .nav__panel (copil DOM al
   .nav) rămâne prizonier în el, izolat de .nav__scrim (sibling, în afara .nav),
   ceea ce face ca ordinea de compositing să nu mai respecte z-index-ul și
   submeniul ajunge afectat de blur-ul menit doar fundalului. Îl eliminăm cât
   timp un panou e deschis, la fel ca fix-ul deja existent pentru mobil (.nav--open). */
body.has-open-panel .nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* .nav e static în mod normal (scrollează cu pagina, cerut explicit). Dar cât
   timp un submeniu e deschis, bara trebuie să rămână lipită sus împreună cu
   .nav__panel (deja position: fixed) — altfel bara "dispare" sub scroll în timp
   ce panoul rămâne plutind acolo unde era ea, ducând la comportament haotic.
   position: fixed o scoate din flow, deci compensăm cu padding-top pe body
   exact cât înălțimea barei (2.75rem), altfel pagina sare brusc în sus. */
body.has-open-panel .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body.has-open-panel { padding-top: 2.75rem; }
.nav__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 2.25rem;
  height: 2.75rem;
  width: min(100% - 2.5rem, 62rem);
}
.nav__logo {
  display: inline-flex; align-items: baseline; gap: -0.08em;
  font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 0.5rem;
}
.nav__logo:hover { text-decoration: none; opacity: 0.7; }
.nav__logo .n {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: 1.28em; line-height: 1; color: var(--ink);
  margin-right: 0;
}
.nav__links {
  display: flex; align-items: center; gap: 2.25rem;
  list-style: none;
  flex: 1;
}
.nav__links a:not(.nav__lead-title) {
  color: var(--ink-soft); font-size: 0.75rem; font-weight: 400;
  letter-spacing: -0.005em;
  transition: color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.nav__links a:hover:not(.nav__lead-title) { color: var(--ink); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ---------- Submeniu (megamenu stil Apple) ----------
   Panou full-width care coboară de sub bară la hover/focus.
   ------------------------------------------------------ */
.nav__item { position: static; }
.nav__item > a { display: inline-flex; align-items: center; }

/* Blurează restul paginii cât timp un submeniu e deschis */
.nav__scrim {
  position: fixed; inset: 2.75rem 0 0 0;
  background: rgba(20, 18, 14, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
  z-index: 97;
  pointer-events: none;
}
body.has-open-panel .nav__scrim { opacity: 1; visibility: visible; }
body.nav-scroll-fading .nav__scrim { opacity: var(--nav-panel-fade, 1); transition: opacity 0.5s ease; }

.nav__panel {
  position: fixed; left: 0; right: 0; top: 2.75rem;
  background: var(--ivory);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.32s var(--ease-out), transform 0.38s var(--ease-out), visibility 0.32s;
  transform-origin: top center;
  z-index: 99;
  overflow: hidden;
}
.nav__item.is-open > .nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
@media (min-width: 861px) {
  .nav__item:hover > .nav__panel,
  .nav__item:focus-within > .nav__panel {
    opacity: 1; visibility: visible; transform: none;
  }
  /* la scroll, panoul rămâne fix sus (position: fixed, nu se mișcă) dar se
     estompează gradual — JS calculează --nav-panel-fade proporțional cu
     distanța derulată și-l scade spre 0; tranziția de opacity de mai jos
     transformă fiecare pas într-un fade continuu, nu un salt brusc */
  body.nav-scroll-fading .nav__item:hover > .nav__panel,
  body.nav-scroll-fading .nav__item:focus-within > .nav__panel {
    opacity: var(--nav-panel-fade, 1);
    transform: none;
    transition: opacity 0.5s ease;
  }
}
.nav__panel-inner {
  width: min(100% - 2.5rem, 62rem);
  margin: 0 auto;
  display: flex; gap: 4.5rem;
  padding: 2.25rem 0 2.75rem;
}
.nav__col { min-width: 0; }
.nav__col h3,
.nav__col li,
.nav__compare {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
  transition-delay: 0.03s;
}
.nav__item:hover > .nav__panel h3,
.nav__item:hover > .nav__panel li,
.nav__item:hover > .nav__panel .nav__compare,
.nav__item:focus-within > .nav__panel h3,
.nav__item:focus-within > .nav__panel li,
.nav__item:focus-within > .nav__panel .nav__compare,
.nav__item.is-open > .nav__panel h3,
.nav__item.is-open > .nav__panel li,
.nav__item.is-open > .nav__panel .nav__compare {
  opacity: 1; transform: none;
}
.nav__col--lead li:nth-child(1) { transition-delay: 0.06s; }
.nav__col--lead li:nth-child(2) { transition-delay: 0.1s; }
.nav__col--lead li:nth-child(3) { transition-delay: 0.14s; }
.nav__col--lead li:nth-child(4) { transition-delay: 0.18s; }
.nav__compare { transition-delay: 0.22s; }
.nav__col--links li:nth-child(1) { transition-delay: 0.08s; }
.nav__col--links li:nth-child(2) { transition-delay: 0.12s; }
.nav__col--links li:nth-child(3) { transition-delay: 0.16s; }
.nav__col--links li:nth-child(4) { transition-delay: 0.2s; }
.nav__col h3 {
  font-family: var(--font-sans);
  font-size: 0.75rem; font-weight: 400; letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.nav__lead-title {
  display: block;
  color: inherit;
  margin: 0;
  padding: 0;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}
.nav__lead-title:hover, .nav__lead-title:active { text-decoration: none; }
.nav__col ul { list-style: none; margin: 0; padding: 0; }
.nav__col li + li { margin-top: 0.55rem; }
.nav__col a:not(.nav__lead-title) {
  color: var(--ink);
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.nav__col a:hover:not(.nav__lead-title) { opacity: 0.6; text-decoration: none; }
.nav__col--lead li + li { margin-top: 0.35rem; }
.nav__col--lead a:not(.nav__compare):not(.nav__lead-title) {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.35;
}
.nav__col--links a { font-size: 0.8125rem; }
a.nav__compare {
  display: block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink);
  transition: opacity 0.2s ease;
}
.nav__compare:hover { opacity: 0.6; text-decoration: none; }

.nav__toggle {
  display: none;
  background: none; border: 0;
  width: 2.25rem; height: 2.25rem;
  position: relative;
  margin-left: auto;
}
.nav__toggle span {
  position: absolute; left: 50%; top: 50%;
  width: 1.0625rem; height: 1.2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out), opacity 0.2s ease;
}
.nav__toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 3.5px)); }
.nav__toggle span:nth-child(2) { transform: translate(-50%, calc(-50% + 3.5px)); }
.nav--open .nav__toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__inner { justify-content: space-between; gap: 0; }
  .nav__toggle { display: block; z-index: 2; }
  /* Elimină backdrop-filter cât meniul e deschis: altfel .nav devine containing
     block pentru copiii position:fixed, iar .nav__panel s-ar întinde doar pe
     înălțimea barei (2.75rem) în loc de tot ecranul. */
  .nav--open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ivory); }

  /* Ecran nivel 1: lista principală, full-screen, ca la Apple */
  .nav__links {
    position: fixed; inset: 0 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory);
    padding: calc(2.75rem + 0.5rem) 1.25rem 1.5rem;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0.3s;
    overflow-y: auto;
    z-index: 1;
  }
  .nav--open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links a:not(.nav__lead-title) { display: block; padding: 0.6rem 0.25rem; font-size: 1.75rem; font-weight: 600; color: var(--ink); }
  .nav__links a[aria-current="page"] { font-weight: 600; }
  .nav__item > a { justify-content: flex-start; }
  .nav__item > a .nav__caret { display: none; }

  /* Fiecare rând din lista principală apare eșalonat la deschidere */
  .nav__links > li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s ease, transform 0.4s var(--ease-out);
    transition-delay: 0s;
  }
  .nav--open .nav__links > li { opacity: 1; transform: none; }
  .nav--open .nav__links > li:nth-child(1) { transition-delay: 0.05s; }
  .nav--open .nav__links > li:nth-child(2) { transition-delay: 0.09s; }
  .nav--open .nav__links > li:nth-child(3) { transition-delay: 0.13s; }
  .nav--open .nav__links > li:nth-child(4) { transition-delay: 0.17s; }
  .nav--open .nav__links > li:nth-child(5) { transition-delay: 0.21s; }
  .nav--open .nav__links > li:nth-child(6) { transition-delay: 0.25s; }

  /* Ecran nivel 2: submeniul intră cu slide din dreapta, peste nivelul 1 */
  .nav__panel {
    position: fixed; inset: 0 0 0 0; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--ivory);
    border-bottom: 0;
    opacity: 1; visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.38s var(--ease-out), visibility 0.38s;
    overflow-y: auto;
    padding: calc(2.75rem + 0.5rem) 1.25rem 1.5rem;
    z-index: 2;
  }
  .nav__item.is-open > .nav__panel { visibility: visible; transform: translateX(0); }
  .nav__panel-back {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; left: 1.25rem;
    width: 2.25rem; height: 2.75rem;
    background: none; border: 0; padding: 0;
    margin: 0;
  }
  .nav__panel-back .nav__caret {
    display: block; margin-right: 0; transform: rotate(135deg);
    width: 0.625rem; height: 0.625rem;
    border-right-width: 1.625px; border-bottom-width: 1.625px;
    border-color: var(--ink);
  }
  .nav__panel-inner {
    width: auto; flex-direction: column; gap: 1.75rem;
    padding: 0 0 0 0.75rem;
  }

  /* Titlurile și linkurile din submeniu apar eșalonat când panoul se deschide */
  .nav__col h3,
  .nav__col li,
  .nav__compare {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.38s var(--ease-out);
    transition-delay: 0s;
  }
  .nav__item.is-open .nav__col h3,
  .nav__item.is-open .nav__col li,
  .nav__item.is-open .nav__compare {
    opacity: 1; transform: none;
  }
  .nav__item.is-open .nav__col--lead h3 { transition-delay: 0.08s; }
  .nav__item.is-open .nav__col--lead li:nth-child(1) { transition-delay: 0.12s; }
  .nav__item.is-open .nav__col--lead li:nth-child(2) { transition-delay: 0.16s; }
  .nav__item.is-open .nav__col--lead li:nth-child(3) { transition-delay: 0.2s; }
  .nav__item.is-open .nav__col--lead li:nth-child(4) { transition-delay: 0.24s; }
  .nav__item.is-open .nav__compare { transition-delay: 0.28s; }
  .nav__item.is-open .nav__col--links h3 { transition-delay: 0.32s; }
  .nav__item.is-open .nav__col--links li:nth-child(1) { transition-delay: 0.36s; }
  .nav__item.is-open .nav__col--links li:nth-child(2) { transition-delay: 0.4s; }
  .nav__item.is-open .nav__col--links li:nth-child(3) { transition-delay: 0.44s; }
  .nav__item.is-open .nav__col--links li:nth-child(4) { transition-delay: 0.48s; }
  .nav__col--lead h3 {
    margin-bottom: 0.375rem; padding: 0.5rem 0.25rem 0;
    font-size: 1.4375rem; font-weight: 600; color: var(--ink);
  }
  .nav__col--lead h3:has(.nav__lead-title) { padding-left: 0; }
  .nav__lead-title {
    padding: 0 0.25rem;
    font-size: 1.75rem; font-weight: 600; color: var(--ink);
    pointer-events: auto;
    cursor: pointer;
  }
  .nav__lead-title:active { opacity: 0.6; }
  .nav__col--links h3 { margin-bottom: 0.9rem; padding: 0 0.25rem; font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
  .nav__scrim { display: none; }
  .nav__col a:not(.nav__lead-title) { padding: 0.5rem 0.25rem; font-size: 1.375rem; font-weight: 600; color: var(--ink); }
  .nav__col--lead a:not(.nav__compare):not(.nav__lead-title) { font-size: 1.75rem; font-weight: 600; }
  .nav__col--links h3 { margin-top: 0.5rem; }
  .nav__col--links a:not(.nav__lead-title) { font-size: 1rem; font-weight: 600; color: var(--ink); padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .nav__col--links li + li { margin-top: 0.15rem; }
  a.nav__compare:not(.nav__lead-title) { display: none; }
  .nav__caret {
    width: 0.5rem; height: 0.5rem;
    border-right: 1.5px solid var(--ink-soft);
    border-bottom: 1.5px solid var(--ink-soft);
    transform: rotate(45deg);
    transition: transform 0.3s var(--ease-out);
    margin-right: 0.35rem;
  }
}
.nav__caret { display: none; }
.nav__panel-back { display: none; }
@media (max-width: 860px) {
  .nav__caret { display: block; }
  .nav__panel-back { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--space-section) / 2);
  padding-bottom: calc(var(--space-section) / 2);
}
.hero--home { min-height: 88svh; display: flex; align-items: center; padding-bottom: 4rem; }
/* fără min-height: rezerva de 88svh lăsa ~450px de gol mort sub paragraf,
   pentru un conținut care ocupă ~240px — secțiunea următoare urcă lângă hero */
.hero--center {
  display: flex;
  align-items: flex-start;
  text-align: center;
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-bottom: calc(var(--space-block) * 0.6);
}
.hero--center .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero--center h1 {
  max-width: 56rem;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero__glow::before {
  content: '';
  position: absolute;
  top: -28%; right: -18%;
  width: 62vw; height: 62vw;
  max-width: 880px; max-height: 880px;
  background: radial-gradient(circle at center, rgba(31,61,51,0.07), transparent 62%);
}
.hero__glow::after {
  content: 'n';
  position: absolute;
  right: -4rem; bottom: -30%;
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(24rem, 46vw, 44rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.026;
  pointer-events: none;
}
.hero .lead { margin-top: 1.75rem; max-width: 34rem; }
.hero .btn-row { margin-top: 2.75rem; }
/* hero centrat: paragraful e intenționat mai lat decât titlul — trebuie declarat
   după .hero .lead de mai sus, altfel acela (aceeași specificitate) câștigă. */
.hero--center .lead { width: 74rem; max-width: 100%; margin-top: 1.5rem; text-align: center; }
@media (max-width: 680px) {
  .hero--center {
    min-height: auto;
    text-align: left;
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }
  .hero--center .container {
    align-items: flex-start;
  }
  .hero--center h1 {
    max-width: 100%;
    font-size: clamp(2rem, 1.5rem + 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: left;
  }
  .hero--center .lead {
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
    font-size: 1.15rem;
    line-height: 1.6;
    text-align: left;
  }
}

/* ---------- Reveal la scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { --reveal-delay: 0.08s; }
.reveal[data-delay="2"] { --reveal-delay: 0.16s; }
.reveal[data-delay="3"] { --reveal-delay: 0.24s; }
.reveal[data-delay="4"] { --reveal-delay: 0.32s; }

.why__card.reveal[data-delay="1"],
.know-card.reveal[data-delay="1"] { --reveal-delay: 0s; }
.why__card.reveal[data-delay="2"],
.know-card.reveal[data-delay="2"] { --reveal-delay: 0.12s; }
.why__card.reveal[data-delay="3"],
.know-card.reveal[data-delay="3"] { --reveal-delay: 0.24s; }
.why__card.reveal[data-delay="4"],
.know-card.reveal[data-delay="4"] { --reveal-delay: 0.36s; }
.why__card.reveal[data-delay="5"],
.know-card.reveal[data-delay="5"] { --reveal-delay: 0.48s; }
.why__card.reveal[data-delay="6"],
.know-card.reveal[data-delay="6"] { --reveal-delay: 0.6s; }

/* ---------- Statistici mari ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem 2rem;
}
.stat__number {
  font-size: clamp(2.6rem, 2rem + 3.4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__number .unit { font-size: 0.5em; font-weight: 500; color: var(--pine); margin-left: 0.1em; }
.stat__label { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink-mute); max-width: 16rem; }

/* ---------- Carduri ---------- */
.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* 4 carduri: 2×2 pe desktop, nu 3+1 */
@media (min-width: 861px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s ease;
}
a.card { color: inherit; }
a.card:hover { text-decoration: none; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(31,61,51,0.16); }
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: 1rem; }
.card .btn--text { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* card de serviciu cu preț */
.card--service .card__price { margin: 1.5rem 0 0.25rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.card__price .full { font-size: 1.75rem; font-weight: 630; letter-spacing: -0.03em; color: var(--ink); }
.card__price .monthly { font-size: 0.9375rem; color: var(--ink-mute); }
.card__tag {
  align-self: flex-start;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pine);
  background: var(--pine-tint);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.25rem;
}

/* ---------- Liste cu marcaj propriu ---------- */
.list { list-style: none; display: grid; gap: 0.9rem; }
.list li { position: relative; padding-left: 1.75rem; }
.list li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 0.95rem; height: 1px;
  background: var(--pine);
}

/* ---------- Pași (proces) ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.5rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-accent); font-style: italic;
  font-size: 2rem; line-height: 1.1;
  color: var(--pine);
  opacity: 0.85;
}
.step h3 { margin-bottom: 0.4rem; }
.step .muted { font-size: 0.9375rem; margin-top: 0.6rem; }
@media (max-width: 560px) {
  .step { grid-template-columns: 3rem 1fr; gap: 1rem; }
}

/* ---------- Mockup-uri device (CSS pur) ---------- */
.mockup-laptop {
  position: relative;
  border-radius: 14px;
  background: #10100F;
  padding: 1.4% 1.4% 2.6%;
  box-shadow: var(--shadow-lift);
}
.mockup-laptop::after {
  content: '';
  position: absolute; left: 50%; bottom: -2.5%;
  transform: translateX(-50%);
  width: 116%; height: 3.2%;
  background: linear-gradient(#252420, #111);
  border-radius: 0 0 14px 14px;
}
.mockup-laptop img { border-radius: 6px; width: 100%; }

.mockup-phone {
  border-radius: clamp(18px, 7%, 34px);
  background: #10100F;
  padding: 2.8%;
  box-shadow: var(--shadow-lift);
}
.mockup-phone img { border-radius: clamp(12px, 5%, 26px); width: 100%; }

/* compoziție laptop + telefon suprapus */
.device-duo { position: relative; }
.device-duo .mockup-laptop { width: 88%; }
.device-duo .mockup-phone {
  position: absolute;
  right: 0; bottom: -6%;
  width: 24%;
  z-index: 2;
}

/* ---------- Studii de caz ---------- */
.case-tile {
  display: grid;
  gap: var(--space-block);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 861px) {
  .case-tile { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .case-tile--flip .case-tile__media { order: 2; }
}
.case-tile__media { padding: 6% 6% 8%; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--ivory-deep), #ECE8DF); }
.case-tile__stats { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.case-tile__stats .stat__number { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem); }

/* citat */
.quote {
  border-left: 2px solid var(--pine);
  padding-left: 1.5rem;
  margin-top: 2.5rem;
}
.quote p { font-family: var(--font-accent); font-style: italic; font-size: 1.35rem; line-height: 1.45; color: var(--ink); }
.quote footer { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--ink-mute); }

/* ---------- Bandă CTA finală ---------- */
.cta-band {
  background: var(--pine);
  border-radius: var(--radius-lg);
  color: rgba(253, 252, 250, 0.85);
  padding: clamp(3rem, 2.5rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: 'n';
  position: absolute;
  right: -2rem; top: -45%;
  font-family: var(--font-accent); font-style: italic;
  font-size: 22rem; line-height: 1;
  color: #fff; opacity: 0.045;
}
.cta-band h2 { color: #FDFCFA; max-width: 26ch; }
.cta-band p { margin-top: 1.25rem; max-width: 52ch; }
.cta-band .btn-row { margin-top: 2.25rem; }
.cta-band .btn--primary { background: #FDFCFA; color: var(--pine-deep); box-shadow: none; }
.cta-band .btn--primary:hover { background: #fff; }
.cta-band .btn--ghost { color: #FDFCFA; border-color: rgba(253,252,250,0.35); background: transparent; }
.cta-band .btn--ghost:hover { border-color: rgba(253,252,250,0.7); }
.cta-band a:not(.btn) { color: #FDFCFA; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: 4rem 0 2.5rem;
  margin-top: var(--space-section);
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: 3rem;
}
.footer--deep { border-top: none; margin-top: 0; padding-top: 2rem; padding-bottom: 2rem; }
.footer--deep .footer__grid { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.footer--deep .footer__group { margin-top: 1.75rem; }
.footer__more {
  display: block;
  width: 100%;
  max-width: none;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
.footer__more a { color: var(--ink-soft); text-decoration: underline; }
.footer__more a:hover { color: var(--ink); }
.footer__brand { max-width: 18rem; }
/* logo-ul din footer nu e legat de bara subțire — are scara lui */
.footer__brand .nav__logo { margin-bottom: 0.75rem; font-size: 1.5rem; margin-right: 0; }
.footer h4 { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 1rem; }
.footer--deep h4 {
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer ul { list-style: none; display: grid; gap: 0.6rem; }
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--ink); }
.footer__legal {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.875rem;
}
.footer--deep .footer__legal { border-top: none; padding-top: 0; }

/* ---------- Footer accordion (mobil, stil Apple footer) ---------- */
.footer__accordion { display: none; }
@media (max-width: 720px) {
  .footer--deep .footer__grid { display: none; }
  .footer__accordion {
    display: block;
    margin-top: -1.5rem;
    margin-bottom: 1.75rem;
  }
  .footer__acc-item { border-bottom: 1px solid var(--line-soft); }
  .footer__acc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
  }
  .footer__acc-chevron {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--ink-mute);
    transition: transform 0.35s var(--ease-out);
  }
  .footer__acc-item.is-open .footer__acc-chevron { transform: rotate(180deg); }
  .footer__acc-panel {
    height: 0;
    overflow: hidden;
    transition: height 0.4s var(--ease-out);
  }
  .footer__acc-panel ul { list-style: none; display: grid; gap: 0; padding: 0 0 1rem; margin: 0; }
  .footer__acc-panel li + li { margin-top: 0; }
  .footer__acc-panel a { display: block; padding: 0.4rem 0; color: var(--ink-soft); font-size: 0.8125rem; }
  .footer__acc-panel a:hover { color: var(--ink); }
  .footer__more { white-space: normal; font-size: 0.8125rem; }
  .footer--deep .footer__legal { font-size: 0.8125rem; }
}

/* ---------- Tabel comparație servicii ---------- */
.compare { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.5); }
.compare table { width: 100%; border-collapse: collapse; font-size: 0.9688rem; }
.compare th, .compare td { padding: 1.1rem 1.25rem; text-align: left; border-top: 1px solid var(--line-soft); vertical-align: top; }
.compare thead th { border-top: 0; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.compare tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 0.25rem;
  font-weight: 500; color: var(--ink); font-size: 1.0625rem;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.5rem; font-weight: 300; color: var(--pine);
  transition: transform 0.3s var(--ease-out);
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0.25rem 1.5rem; max-width: 58ch; }

/* ---------- Formular wizard ---------- */
.wizard {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.wizard__progress {
  display: flex; gap: 0.5rem;
  margin-bottom: 2.25rem;
}
.wizard__progress span {
  height: 3px; flex: 1;
  background: var(--line);
  border-radius: 99px;
  transition: background-color 0.4s ease;
}
.wizard__progress span.is-done { background: var(--pine); }
.wizard__step { display: none; }
.wizard__step.is-active { display: block; animation: stepIn 0.45s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wizard__step > legend, .wizard__q {
  font-size: var(--text-h3);
  font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.wizard__hint { font-size: 0.9375rem; color: var(--ink-mute); margin-bottom: 1.75rem; }
.wizard fieldset { border: 0; }

.choice-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  top: 1rem; left: 1rem;
  pointer-events: none;
}
.choice label {
  display: block;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.choice label strong { display: block; font-size: 1.0313rem; }
.choice label small { color: var(--ink-mute); font-size: 0.875rem; }
.choice label:hover { border-color: var(--ink-mute); transform: translateY(-1px); }
.choice input:checked + label {
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine), 0 10px 24px -12px rgba(31,61,51,0.35);
}
.choice input:focus-visible + label { outline: 2px solid var(--pine); outline-offset: 2px; }

.field { margin-bottom: 1.4rem; }
.field label { display: block; font-size: 0.9375rem; font-weight: 500; color: var(--ink); margin-bottom: 0.5rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field .error { display: none; font-size: 0.875rem; color: #A3372B; margin-top: 0.4rem; }
.field.has-error input, .field.has-error textarea { border-color: #A3372B; }
.field.has-error .error { display: block; }

.wizard__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.wizard__back { background: none; border: 0; color: var(--ink-mute); font-weight: 500; padding: 0.5rem 0.25rem; border-radius: 4px; }
.wizard__back:hover { color: var(--ink); }
.wizard__back[hidden] { display: none; }

/* ---------- Diverse ---------- */
.breadcrumbs { font-size: 0.875rem; color: var(--ink-mute); margin-bottom: 1.75rem; }
.breadcrumbs a { color: var(--ink-mute); }
.breadcrumbs a:hover { color: var(--ink); }

/* ---------- Page bar (bandă sub header, gen Apple Trade In) ---------- */
.page-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 244, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.page-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* poziție/lățime de bază (fallback dacă JS nu rulează) — aceeași cutie
     ca .nav__inner. syncPageBarOffset (main.js) o suprascrie cu marginLeft/
     width exacte, aliniate la logo/ultimul link, după ce fontul s-a încărcat */
  width: min(100% - 2.5rem, 62rem);
  margin-inline: auto;
  padding: 0.75rem 0 0.5rem;
}
/* ascunsă până JS aliniază precis banda — evită flash-ul vizibil al
   benzii "neondej aliniate" înainte ca fontul logo-ului să se încarce */
.page-bar__inner--pending { visibility: hidden; }
.page-bar__title {
  font-size: 1.375rem; font-weight: 600; color: var(--ink); margin: 0;
  text-decoration: none;
}
.page-bar__title:hover { text-decoration: none; color: var(--ink); }
.page-bar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: none;
  background: var(--pine);
  color: #FDFCFA;
  font-family: inherit;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.page-bar__btn:hover { background: var(--pine-deep); }
@media (max-width: 680px) {
  .page-bar__inner { flex-wrap: wrap; padding: 0.75rem 0 0.5rem; }
  .page-bar__title { font-size: 1.1875rem; }
  .page-bar__btn { margin-right: 0.5rem; }
}

/* ---------- Service picker (pop-up "Găsește-ți serviciul") ---------- */
.service-picker__title {
  font-size: clamp(2rem, 1.7rem + 1.3vw, 2.5rem);
  margin: 0 0 3.75rem;
  padding-right: 3rem;
}
.service-picker__list { display: flex; flex-direction: column; gap: 0.75rem; }
.service-picker__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transform: none;
}
.service-picker__item,
.service-picker__item:hover,
.service-picker__item:focus,
.service-picker__item:active {
  text-decoration-line: none;
  text-underline-offset: initial;
  transform: none;
  animation: none;
}
.service-picker__name,
.service-picker__price { line-height: 1.3; }
.service-picker__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--pine);
}
.service-picker__icon svg { width: 2.625rem; height: 2.625rem; display: block; }
.service-picker__name { font-weight: 600; font-size: 0.9375rem; }
.service-picker__price { margin-left: auto; color: var(--ink-mute); font-weight: 300; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 680px) {
  .service-picker__title { font-size: 1.75rem; padding-right: 0.5rem; margin-bottom: 5rem; }
  .service-picker__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1.1rem;
    padding: 1.25rem 1.25rem;
  }
  .service-picker__icon { grid-row: 1 / 3; }
  .service-picker__icon svg { width: 2.75rem; height: 2.75rem; }
  .service-picker__name { grid-column: 2; grid-row: 1; line-height: 1.1; }
  .service-picker__price { grid-column: 2; grid-row: 2; margin-left: 0; margin-top: -0.9rem; line-height: 1.1; font-size: 0.875rem; }
}

.note {
  background: var(--pine-tint);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--pine-deep);
}

.prose h2 { margin-top: 3rem; margin-bottom: 1rem; font-size: 1.5rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }

.divider { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* logo-lockup pe pagini divizii */
.division-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.division-head .division-mark { font-size: 1.6rem; }

/* ---------- Motion: respectă preferința utilizatorului ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Lineup de servicii (pagina /servicii/) ---------- */
.lineup__head {
  margin-bottom: var(--space-block);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.lineup__head h2 {
  margin: 0;
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
}
.lineup__compare {
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--pine);
  white-space: nowrap;
}
.lineup__compare .arrow {
  font-size: 1.6em;
  transform: none !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  top: -0.05em;
  margin-left: 0.15em;
}
.lineup__compare .tile__link-label {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.lineup__compare:hover .tile__link-label { text-decoration-color: currentColor; }

@media (max-width: 640px) {
  .lineup__head { display: block; }
  .lineup__compare { display: inline-flex; align-items: center; margin-top: 0.5rem; }
}

.lineup__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.tile { display: flex; flex-direction: column; text-align: center; }
.tile__media {
  display: block;
  border-radius: var(--radius);
  background: var(--ivory-deep);
  transition: transform 0.6s var(--ease-out);
}
.tile__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}
.tile__media:hover { transform: scale(1.012); }

.tile__name {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  margin: 1.75rem 0 0.75rem;
}
.tile__line { font-size: 1rem; color: var(--ink-soft); margin: 0; }
.tile__price {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.tile__price strong { font-weight: 600; }
.tile__price span { font-weight: 600; }
.tile__price br { display: none; }
.tile__price span::before { content: " "; }
.tile__actions {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.tile__actions .btn--primary {
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5rem;
  box-shadow: none;
}
.tile__actions .btn--primary:hover { box-shadow: none; transform: none; }
.tile__actions .btn--text {
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--pine);
}
.tile__actions .btn--text .arrow {
  font-size: 1.6em;
  transform: none !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  top: -0.05em;
  margin-left: -0.2em;
}
.tile__actions .btn--text .tile__link-label {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.tile__actions .btn--text:hover .tile__link-label { text-decoration-color: currentColor; }

/* mobil: carusel orizontal cu scroll-snap, ca la Apple */
@media (max-width: 860px) {
  .lineup__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 20rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.25rem;
    padding-bottom: 0.5rem;
    /* lasă cardurile să respire pe marginile ecranului */
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1.25rem, calc(50vw - 50%));
    scrollbar-width: none;
  }
  .lineup__track::-webkit-scrollbar { display: none; }
  .tile {
    scroll-snap-align: start;
    text-align: left;
    /* caruselul se descoperă prin scroll orizontal, nu vertical —
       animația reveal-la-scroll nu se aplică aici, ca să nu pară că
       cardurile "cad" în fundal la fiecare scroll al paginii */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tile__actions { justify-content: flex-start; }
  .tile__actions .btn--primary { padding: 0.35rem 0.85rem; }
}

/* ---------- Card lat de showcase (Magazin Online) ---------- */
.showcase {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  /* raportul imaginii, ca wireframe-ul din dreapta să se vadă întreg */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  transition: transform 0.6s var(--ease-out);
  cursor: pointer;
}
.showcase:hover { transform: scale(1.006); }
.showcase__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.showcase::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(48, 40, 35, 0.92) 0%,
    rgba(48, 40, 35, 0.80) 28%,
    rgba(48, 40, 35, 0.30) 46%,
    rgba(48, 40, 35, 0) 58%);
}
.showcase__body {
  position: relative;
  z-index: 2;
  max-width: 26rem;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  color: #fff;
}
.showcase__body h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  margin: 0 0 0.875rem;
  color: #fff;
  white-space: nowrap;
}
.showcase__body > p { color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; font-weight: 300; }
p.showcase__price {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
}
.showcase__price strong { font-weight: 600; color: #fff; }
.showcase__price span {
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.showcase__actions {
  margin-top: 1.25rem;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.showcase .btn--primary {
  background: #fff; color: var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5rem;
  box-shadow: none;
}
.showcase .btn--primary:hover { background: var(--ivory); box-shadow: none; transform: none; }
.showcase .btn--text {
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: #fff;
}
.showcase .btn--text .arrow {
  font-size: 1.6em;
  transform: none !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  top: -0.05em;
  margin-left: -0.2em;
}
.showcase .btn--text .tile__link-label {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.showcase .btn--text:hover .tile__link-label { text-decoration-color: currentColor; }

/* mobil: imaginea coboară, textul stă deasupra ei */
@media (max-width: 720px) {
  .showcase {
    display: flex; flex-direction: column-reverse;
    align-items: stretch;
    aspect-ratio: auto;
  }
  .showcase__bg {
    position: relative; inset: auto;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    z-index: 0;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .showcase::before { content: none; }
  .showcase__body {
    max-width: none;
    position: relative;
    z-index: 2;
    background: #302823;
  }
  .showcase__body::after {
    /* tranziție lină între fundalul textului și imaginea de dedesubt */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6rem;
    height: 6rem;
    background: linear-gradient(180deg,
      #302823 0%,
      rgba(48,40,35,0.85) 20%,
      rgba(48,40,35,0.55) 45%,
      rgba(48,40,35,0.25) 70%,
      rgba(48,40,35,0) 100%);
    pointer-events: none;
  }
  .showcase .btn--primary { padding: 0.35rem 0.85rem; }
}

/* ---------- Divizii Niksen (pagina /servicii/, stil Apple "Explore the lineup") ---------- */
.divisions-section { padding-top: 0; margin-top: calc(-0.6 * var(--space-block)); }
.divisions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  text-align: center;
}
.divisions__item .division-mark {
  display: block;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
  margin-bottom: 0.875rem;
}
.divisions__item p {
  font-size: 1rem;
  color: var(--ink);
  margin: 0 auto 1.5rem;
  max-width: 19rem;
}
.divisions__item .btn--primary {
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 400;
  box-shadow: none;
  margin-bottom: 0.9rem;
}
.divisions__item .btn--primary:hover { box-shadow: none; transform: none; }
.divisions__item .btn--text {
  display: block;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--pine);
}
.divisions__item .btn--text .arrow {
  font-size: 1.6em;
  transform: none !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  top: -0.05em;
  margin-left: 0.15em;
}
.divisions__item .btn--text .tile__link-label {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.divisions__item .btn--text:hover .tile__link-label { text-decoration-color: currentColor; }

@media (max-width: 720px) {
  .divisions { grid-template-columns: 1fr; gap: 3rem; }
  .divisions__item .btn--primary { padding: 0.4rem 1rem; margin-bottom: 0; }
  .divisions__actions { display: flex; align-items: center; justify-content: center; gap: 1rem; }
  .divisions__item .btn--text { display: inline-block; }
  .divisions__item p { margin-bottom: 1rem; }
}

/* ---------- "De ce Niksen" (stil Apple "Why Apple is the best place to shop") ---------- */
.why__head {
  margin-bottom: var(--space-block);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media (min-width: 861px) {
  .why__head { margin-bottom: calc(var(--space-block) * 0.55); }
}
.why__head h2 {
  margin: 0;
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
}
/* carusel orizontal la toate dimensiunile, ca la Apple */
.why__track {
  display: grid;
  grid-auto-flow: column;
  /* carduri mai late: ~3,3 în container */
  grid-auto-columns: calc((100% - 3 * 1.25rem) / 3.3);
  gap: 1.25rem;
  align-items: stretch;
  overflow-x: auto;
  /* fără scroll-snap: intră în conflict cu animația proprie de glisare
     și trage caruselul din poziție la încărcare */
  scroll-snap-type: none;
  /* iese din ecran în ambele părți; primul card se aliniază cu titlul
     prin padding, nu prin poziția containerului */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - 50%));
  padding-block: 0.5rem;
  scrollbar-width: none;
}
.why__track::-webkit-scrollbar { display: none; }
.why__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  cursor: pointer;
  padding: 1.75rem 1.75rem 0;
  overflow: hidden;
  /* animație de hover pe tot cardul, ca la .tile__media din „Explorează serviciile" —
     proprietăți separate (nu shorthand) ca să nu suprascrie transition-delay de la .reveal;
     opacity rămâne listată ca să nu piardă tranziția de la .reveal (fade la scroll) */
  transition-property: transform, opacity;
  transition-duration: 0.6s, 0.9s;
  transition-timing-function: var(--ease-out);
  /* înălțime fixă: imaginea crește în interior, nu împinge cardul mai jos */
  height: 29rem;
}
.why__kicker {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.why__card h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  line-height: 1.22;
  margin: 0 0 0.75rem;
  text-wrap: wrap;
  max-width: none;
}
.why__text {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0;
}
.why__img {
  width: 88%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto auto 0;
  padding-top: 1rem;
  flex-shrink: 1;
  min-height: 0;
}
/* întregul card crește ușor la hover, ca la .tile__media din „Explorează serviciile" */
.why__card:hover { transform: scale(1.012); }

/* butoanele de navigare, aliniate dreapta sub carusel — ca la Apple */
.why__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.why__arrow {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(26, 26, 24, 0.06);
  color: var(--ink);
  padding: 0;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}
.why__arrow svg { width: 1.15rem; height: 1.15rem; display: block; }
.why__arrow:hover:not(:disabled) { background: rgba(26, 26, 24, 0.12); }
.why__arrow:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 1020px) {
  .why__track { grid-auto-columns: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 680px) {
  .why__track { grid-auto-columns: min(78%, 20rem); }
  .why__head { display: block; margin-bottom: calc(var(--space-block) - 1rem); }
  .why__head h2 { font-size: clamp(1.625rem, 1.4rem + 1.1vw, 1.875rem); }
  .why__head .lineup__compare { display: inline-flex; align-items: center; font-size: 0.875rem; margin-top: 0.5rem; }
  .why__card { padding: 1.25rem 0.5rem 0; height: 27rem; }
  .why__kicker { font-size: 0.8125rem; margin-bottom: 0.5rem; margin-left: 0.75rem; }
  .why__card h3 { font-size: 1.3125rem; margin-bottom: 0.5rem; margin-left: 0.75rem; }
  .why__text { font-size: 0.8125rem; margin-left: 0.75rem; margin-right: 0.25rem; }
  .why__more { width: 1.875rem; height: 1.875rem; right: 1.5rem; bottom: 1rem; }
  .why__more svg { width: 0.75rem; height: 0.75rem; }
  .why__img { width: 100%; padding-bottom: 1.5rem; }
  .why__nav { gap: 0.5rem; margin-top: 1rem; }
  .why__arrow { width: 2.25rem; height: 2.25rem; }
  .why__arrow svg { width: 0.9rem; height: 0.9rem; }
  .section.why:not(.why--know) { padding-bottom: calc(var(--space-section) / 4); }
}

/* ---------- Buton „+" pe cardurile „De ce Niksen" ---------- */
.why__card { position: relative; }
.why__more {
  position: absolute;
  right: 1.25rem; bottom: 1.25rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  /* SVG în loc de glif: se centrează optic perfect, indiferent de font */
  padding: 0;
  transition: transform 0.35s var(--ease-out), background-color 0.25s ease;
}
.why__more svg { width: 0.9rem; height: 0.9rem; display: block; }
.why__more:hover { background: var(--pine); transform: scale(1.1); }
.why__more:active { transform: scale(0.94); }
/* imaginea nu trebuie să treacă pe sub buton */
.why__img { padding-bottom: 3.25rem; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0;
  z-index: 200;
  /* pe desktop panoul nu se mai mișcă la scroll — dacă nu încape, doar
     conținutul lui derulează intern (vezi .modal__panel max-height mai jos).
     Pe mobil (media query) rămâne overflow-y: auto, ca bottom sheet-ul
     full-height să poată fi parcurs cu tot cu padding-ul de scroll. */
  overflow-y: hidden;
  padding: clamp(2rem, 6vh, 6rem) 1.5rem;
}
/* varianta simplă (secțiunea „De ce Niksen"): panou centrat vertical.
   Varianta „rich" (secțiunea „Cunoaște Niksen") rămâne aliniată sus,
   ca design-ul original — nu se centrează. */
.modal:not(.modal--rich) {
  display: flex;
  align-items: center;
  min-height: 100%;
}
.modal[hidden] { display: none; }
.modal__scrim {
  position: fixed; inset: 0;
  z-index: -1;
  /* aceeași densitate de blur ca .nav__scrim din submeniul header-ului */
  background: rgba(20, 18, 14, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: modal-fade 0.45s var(--ease-out);
}
.modal__panel {
  position: relative;
  width: min(100%, 52rem);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  box-shadow: 0 24px 80px -20px rgba(26,26,24,0.35);
  animation: modal-rise 0.55s var(--ease-out);
  /* panoul rămâne fix în centru și NU derulează el însuși — derulează
     .modal__scroll din interior, ca „×"/săgeata (absolute față de panou)
     să rămână pe loc, iar scrollbar-ul să nu taie colțurile rotunjite */
  max-height: calc(100vh - 2 * clamp(2rem, 6vh, 6rem));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* fără min-height: 0 un copil flex refuză să scadă sub înălțimea
     conținutului, deci overflow-y n-ar declanșa niciodată scroll-ul */
  min-height: 0;
}
/* varianta „rich", doar pentru cardurile „Cunoaște Niksen": panou lat,
   padding generos, ca la Apple cu imagine mare în modal */
.modal--rich .modal__panel {
  width: min(100%, 78rem);
  padding: clamp(3rem, 2.2rem + 4vw, 5.5rem);
}

/* pop-up-ul "Găsește-ți serviciul": panou mai înalt, mult mai mult aer
   pe lateral și pe verticală decât varianta simplă.
   Quiz-ul „Găsește-ți site-ul" folosește exact același shell, ca cele
   două pop-up-uri de pe Filozofia să arate identic. */
#service-picker-modal .modal__panel,
#quiz-modal .modal__panel {
  width: min(100%, 49rem);
  padding: clamp(6rem, 5rem + 5.5vw, 8rem);
}
/* la quiz padding-ul trece pe zona care derulează, altfel conținutul s-ar
   opri vizual la 128px de margine în loc să ajungă la marginea panoului */
#quiz-modal .modal__panel { padding: 0; }
#quiz-modal .modal__scroll {
  padding: clamp(5rem, 4rem + 3.5vw, 5.75rem) clamp(6rem, 5rem + 5.5vw, 8rem);
}
/* conținutul (titlu + listă) intră cu propriul fade-in + slide-up,
   ușor decalat față de urcarea panoului, pentru un efect mai lin */
#service-picker-modal .service-picker__title,
#service-picker-modal .service-picker__list,
#quiz-modal .quiz {
  animation: service-picker-content-in 0.5s var(--ease-out) both;
}
#service-picker-modal .service-picker__title { animation-delay: 0.05s; }
#service-picker-modal .service-picker__list { animation-delay: 0.12s; }
#quiz-modal .quiz { animation-delay: 0.08s; }
@keyframes service-picker-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 680px) {
  /* pe mobil modalul redevine bottom sheet full-height: aici chiar vrem
     ca .modal să deruleze (nu doar panoul), ca să nu rămână blocat la
     dimensiunea ecranului cu conținut lung */
  .modal { overflow-y: auto; }
  #service-picker-modal.modal,
  #quiz-modal.modal { padding: 1.5rem 0 0; align-items: flex-end; }
  #service-picker-modal .modal__panel,
  #quiz-modal .modal__panel {
    width: 100%;
    min-height: calc(100dvh - 1.5rem);
    max-height: none;
    overflow-y: visible;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 6rem 1.25rem 2rem;
  }
  /* pe mobil derulează .modal, nu zona interioară — altfel ar apărea
     un al doilea scroll în interiorul bottom sheet-ului */
  #quiz-modal .modal__panel { padding: 0; }
  #quiz-modal .modal__scroll {
    overflow-y: visible;
    padding: 6rem 1.25rem 2rem;
  }
  #quiz-modal .quiz__bar { margin-bottom: 2.75rem; }
}

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* keyframe-uri explicite pentru ieșire — cu „from”/„to” complete, ca nu
   mai depindem de „animation-direction: reverse” (se comporta ambiguu
   combinat cu „both” pe un keyframe care nu avea „to” explicit) */
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-sink {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(20px) scale(0.97); }
}

/* animație de ieșire — durata (0.3s) trebuie să corespundă cu timeout-ul
   din JS (320ms) înainte ca modalul să primească display:none */
.modal.is-closing .modal__scrim { animation: modal-fade-out 0.3s var(--ease-out) both; }
.modal.is-closing .modal__panel { animation: modal-sink 0.3s var(--ease-out) both; }

.modal__close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(26, 26, 24, 0.06);
  color: var(--ink);
  padding: 0;
  transition: background-color 0.25s ease;
}
.modal__close svg { width: 1rem; height: 1rem; display: block; }
.modal__close:hover { background: rgba(26, 26, 24, 0.12); }

.modal__kicker {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.875rem;
  padding-right: 3rem;
}
.modal__title {
  font-size: clamp(2.5rem, 1.9rem + 2.8vw, 3.75rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
  padding-right: 3rem;
  text-wrap: wrap;
}
.modal--rich .modal__title { margin: 0 0 4rem; }
.modal--rich .modal__cta { display: none; }

/* dreptunghi gri unic: text sus, imagine alipită dedesubt — stil Apple.
   Doar în varianta „rich" (cardurile „Cunoaște Niksen"); „De ce Niksen"
   rămâne text simplu pe fundal alb, ca design-ul original aprobat. */
.modal__block { margin: 0 0 2rem; }
.modal--rich .modal__block {
  background: var(--ivory-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.modal__body {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  max-width: none;
}
.modal--rich .modal__body {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  line-height: 1.5;
  color: var(--ink-mute);
  margin: 0;
  padding: clamp(2.75rem, 2rem + 3.5vw, 4rem) clamp(4.5rem, 3rem + 6.5vw, 7.5rem);
}
.modal__body strong,
.modal__body b { color: var(--ink); font-weight: 700; }
/* același link cu underline la hover ca în restul paginii */
.modal__cta {
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--pine);
}
.modal__cta .arrow {
  font-size: 1.6em;
  transform: none !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  top: -0.05em;
  margin-left: 0.15em;
}
.modal__cta .tile__link-label {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.modal__cta:hover .tile__link-label { text-decoration-color: currentColor; }

@media (max-width: 680px) {
  .modal:not(.modal--rich) .modal__panel { padding: 1.75rem 1.75rem 2.75rem; }
  .modal:not(.modal--rich) .modal__title { font-size: 1.75rem; margin-bottom: 1rem; }
  .modal:not(.modal--rich) .modal__kicker { margin-top: 1.75rem; margin-bottom: 0.625rem; }
  .modal:not(.modal--rich) .modal__body { font-size: 1rem; margin-bottom: 1.5rem; }

  .modal--rich .modal__panel { padding: 1.75rem; }
  .modal--rich .modal__kicker { margin-top: 1.75rem; margin-bottom: 0.625rem; }
  .modal--rich .modal__title { font-size: 2rem; margin-bottom: 3rem; }
  .modal--rich .modal__body { padding: 3.75rem 1.5rem 2.5rem; font-size: 1.125rem; line-height: 1.5; }
}

/* blochează scroll-ul paginii cât timp modalul e deschis */
body.is-modal-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  /* top e setat din JS (compensează scroll-ul curent, ca pagina să nu sară) */
}

/* ---------- "Cunoaște Niksen" — carduri cu imagine de fundal, stil Apple ---------- */
.know-card {
  position: relative;
  isolation: isolate;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  /* raportul imaginilor sursă (896×1200) — evită orice decupare sau
     padding de culoare aproximată care nu se potrivea exact */
  aspect-ratio: 3 / 4;
  /* animație de hover pe tot cardul, ca la .tile__media din „Explorează serviciile" —
     proprietăți separate (nu shorthand) ca să nu suprascrie transition-delay de la .reveal;
     opacity rămâne listată ca să nu piardă tranziția de la .reveal (fade la scroll) */
  transition-property: transform, opacity;
  transition-duration: 0.6s, 0.9s;
  transition-timing-function: var(--ease-out);
}
.know-card:hover { transform: scale(1.012); }
.know-card__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.know-card__text {
  position: relative;
  z-index: 1;
  padding: 1.75rem 1.75rem 0;
}
.know-card__kicker {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.know-card__text h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  line-height: 1.22;
  margin: 0;
  text-wrap: wrap;
  max-width: none;
}
/* text alb pe fundal închis, cerneală pe fundal deschis */
.know-card--dark .know-card__kicker,
.know-card--dark .know-card__text h3 { color: #fff; }
.know-card--light .know-card__kicker,
.know-card--light .know-card__text h3 { color: var(--ink); }

.know-card__more {
  position: absolute;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 2;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: none;
  border-radius: 999px;
  padding: 0;
  transition: transform 0.35s var(--ease-out), background-color 0.25s ease;
}
.know-card__more svg { width: 0.9rem; height: 0.9rem; display: block; }
.know-card--dark .know-card__more { background: rgba(255,255,255,0.92); color: var(--ink); }
.know-card--light .know-card__more { background: var(--ink); color: #fff; }
.know-card__more:hover { transform: scale(1.1); }
.know-card__more:active { transform: scale(0.94); }

/* caruselul reutilizează .why__track, dar cardurile au altă proporție */
.why--know {
  /* fundal mai deschis decât ivoriul paginii, ca la cardurile din
     „De ce Niksen e alegerea corectă." */
  background: #fff;
}
.why--know .why__track { align-items: start; }

/* imaginea din modal (doar cardurile „Cunoaște Niksen") — alipită de
   blocul gri .modal__block, fără colțuri sau margine proprii */
.modal__img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.modal__img[hidden] { display: none; }

/* ---------- Promisiuni către client (portare „People" de la apple.com/supply-chain) ---------- */

/* Bloc izolat, cu prefix propriu: NU reutilizează .know-card (care e carusel cu
   aspect-ratio fix) și NU atinge .modal (consumat deja de trei modale). Aici
   avem nevoie de un grid de 12 coloane cu span-uri inegale și de un modal
   full-screen — cerințe opuse celor existente. */
.promise { background: #fff; }

.promise__head { max-width: 44rem; margin-bottom: var(--space-block); }
.promise__head h2 { margin: 0; font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); }
.promise__head .lead { margin-top: 1.25rem; }

/* 12 coloane fixe, ca la Apple: fiecare card primește un span diferit, deci
   rândurile ies 8+4, 4+8, 6+6. Un grid „auto-fit" n-ar putea produce asta. */
.promise__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.pcard--w8 { grid-column: span 8; }
.pcard--w6 { grid-column: span 6; }
.pcard--w4 { grid-column: span 4; }

.pcard {
  position: relative;
  isolation: isolate;
  /* clip-path în loc de overflow:hidden — nu creează containing block pentru
     descendenți position:fixed, iar rotunjirea e identică */
  clip-path: inset(0 round var(--radius-lg));
  min-height: 452px;
  display: flex;
  /* proprietăți separate, nu shorthand: altfel s-ar suprascrie
     transition-delay pus de .reveal (aceeași capcană ca la .know-card) */
  transition-property: transform, opacity;
  transition-duration: 0.6s, 0.9s;
  transition-timing-function: var(--ease-out);
  --pcard-pad-x: 32px;
  --pcard-pad-top: 32px;
  /* cât de departe coboară scrimul sub text; mai mic decât la Apple pentru că
     acolo textul stă peste video în mișcare, aici peste o imagine fixă */
  --pcard-legibility: 3.5em;
  --pcard-scrim: 0.55;
}

.pcard__media { position: absolute; inset: 0; z-index: 0; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Butonul acoperă tot cardul și stă SUB conținut în stivă. Funcționează pentru
   că .pcard__content are pointer-events:none — clicul trece prin text direct
   la buton, deci orice punct al cardului deschide modalul (ca la Apple). */
.pcard__button {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
/* offset negativ: unul pozitiv ar fi tăiat de clip-path */
.pcard__button:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

.pcard__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  color: #fff;
  /* umbră difuză, nu contur: ține literele lizibile chiar și acolo unde
     imaginea de dedesubt e deschisă, fără să se vadă ca efect */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Scrim de lizibilitate sus: opac pe prima jumătate, apoi se topește. Fără el,
   un titlu alb peste o imagine deschisă devine ilizibil. */
.pcard__copy {
  position: relative;
  padding: var(--pcard-pad-top) var(--pcard-pad-x) var(--pcard-legibility);
}
/* Gradientul se topește treptat, nu în trepte: o bandă opacă până la 50% ar
   tăia cardul în două vizibil. Lizibilitatea vine din scrim PLUS umbra de pe
   text (mai jos) — scrimul singur ar trebui atât de opac încât să înece poza. */
.pcard__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, var(--pcard-scrim)) 0%,
    rgba(0, 0, 0, calc(var(--pcard-scrim) * 0.55)) 55%,
    transparent 100%);
}
.pcard__eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.625rem;
}
.pcard__title {
  /* explicit, nu moștenit: regula globală `h1, h2, h3, h4 { color: var(--ink) }`
     e un selector de element și bate moștenirea de la .pcard__content */
  color: #fff;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  max-width: 22ch;
}
/* cardurile înguste (span 4) au ~350px lățime: titlul mare s-ar rupe urât */
.pcard--w4 .pcard__title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem); }

/* Piciorul cardului: caption stânga, „+" dreapta, cu gradient invers ca textul
   de jos să rămână lizibil peste o imagine deschisă în partea inferioară. */
.pcard__foot {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: var(--pcard-legibility) var(--pcard-pad-x) 20px;
}
.pcard__foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, var(--pcard-scrim)), transparent);
}
.pcard__caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0;
  max-width: 24ch;
  opacity: 0.9;
}
.pcard__cta {
  margin-left: auto;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  transition: opacity 0.25s ease;
}
.pcard__cta svg { width: 0.85rem; height: 0.85rem; display: block; }

/* hover doar pe dispozitive cu mouse. :has() e progressive enhancement —
   unde lipsește, butonul pur și simplu nu reacționează. */
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { transform: scale(1.008); }
  .pcard:has(.pcard__button:hover) .pcard__cta { opacity: 0.75; }
}

@media (max-width: 1020px) {
  .pcard--w8, .pcard--w6, .pcard--w4 { grid-column: span 6; }
  .pcard {
    min-height: 416px;
    --pcard-pad-x: 24px;
    --pcard-pad-top: 28px;
    --pcard-legibility: 3em;
  }
}
@media (max-width: 680px) {
  .promise__grid { gap: 1rem; }
  .pcard--w8, .pcard--w6, .pcard--w4 { grid-column: span 12; }
  .pcard { min-height: 480px; --pcard-legibility: 2.5em; }
  .pcard--w4 .pcard__title { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); }
}
@media (max-width: 374px) {
  .pcard { --pcard-pad-x: 20px; }
}

/* ---------- Modalul promisiunilor ---------- */

/* Panou centrat cu margini, colțuri rotunjite și perdea blurată în spate —
   geometria măsurată din CSS-ul Apple (`.modal.sc-card-back` + `.modal-page-overlay`):
   lățime 1260px, margini 40px sus/jos, rază 18px, scrim rgba(232,232,237,0.48)
   peste blur(20px). Derularea se face pe .pmodal (containerul), nu pe panou:
   așa panoul crește natural cu conținutul, ca la ei, iar perdeaua rămâne fixă.
   z-index 210, peste cele trei .modal existente (200). */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 210;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block: 40px;
  --pmodal-radius: 18px;
  --pmodal-width: 1260px;
  /* marginea laterală a textului din panou: la Apple calc(50% - 490px),
     adică o coloană de 980px centrată în panoul de 1260px */
  --pmodal-gutter: calc(50% - 490px);
}
.pmodal[hidden] { display: none; }

/* perdeaua stă fixă în spatele panoului, nu derulează cu el */
.pmodal__scrim {
  position: fixed;
  inset: 0;
  background: rgba(232, 232, 237, 0.48);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* perdeaua intră puțin înaintea panoului: blur-ul apucă să se așeze, deci
     panoul aterizează pe un fundal deja liniștit */
  animation: pmodal-fade 0.4s ease both;
}

.pmodal__panel {
  position: relative;
  width: min(var(--pmodal-width), 100% - 2.5rem);
  margin-inline: auto;
  background: #fff;
  border-radius: var(--pmodal-radius);
  /* clip-path în loc de overflow:hidden — nu creează containing block pentru
     butonul de închidere, care e position:sticky */
  clip-path: inset(0 round var(--pmodal-radius));
  /* două straturi: un contur apropiat care desprinde panoul de perdea, plus o
     umbră largă și difuză care îi dă înălțime — o singură umbră ar arăta fie
     murdară, fie inexistentă peste un fundal deja blurat */
  box-shadow:
    0 2px 8px rgba(26, 26, 24, 0.08),
    0 32px 100px -24px rgba(26, 26, 24, 0.42);
  animation: pmodal-rise 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pmodal__panel:focus { outline: none; }

.pmodal__scroll { transition: opacity 0.22s ease; }
/* schimbarea temei din banda de jos: un fade scurt, altfel înlocuirea a trei
   paragrafe dintr-o dată e un flash brutal */
.pmodal__scroll.is-swapping { opacity: 0; }

/* sticky, nu fixed: butonul rămâne în colțul panoului cât derulezi, dar se
   oprește la marginile lui — exact comportamentul de la Apple (44px, offset 16px) */
.pmodal__close {
  position: sticky;
  top: 16px;
  z-index: 3;
  float: right;
  margin: 16px 16px calc(-44px - 16px) 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgb(51, 51, 54);
  color: #fff;
  padding: 0;
  transition: background-color 0.25s ease;
}
.pmodal__close:hover { background: #37373a; }
.pmodal__close:active { background: #2f2f32; }
.pmodal__close svg { width: 1.125rem; height: 1.125rem; display: block; }

/* Hero: imaginea și textul ocupă aceeași celulă de grid, cu textul ancorat jos.
   Grid în loc de position:absolute — înălțimea rămâne corectă automat. */
.pmodal__hero {
  display: grid;
  grid-template-areas: "stack";
  align-items: end;
}
/* stretch explicit: fără el, copiii stivei primesc lățimea conținutului și se
   lipesc de marginea din stânga, deci text-align:center n-ar avea ce centra */
.pmodal__hero > * { grid-area: stack; justify-self: stretch; }
.pmodal__hero-img {
  width: 100%;
  height: clamp(20rem, 42vw, 30rem);
  object-fit: cover;
  display: block;
}
.pmodal__hero-content {
  position: relative;
  text-align: center;
  color: #fff;
  padding-block: 10em 80px;
  padding-inline: 1.25rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);
}
.pmodal__eyebrow {
  /* regula globală `p { max-width: 62ch }` îl îngustează și îl lasă lipit de
     stânga, deci text-align:center al părintelui n-ar avea ce centra */
  max-width: none;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.pmodal__headline {
  /* explicit, ca la .pcard__title: h2 e prins de regula globală de culoare */
  color: #fff;
  font-size: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  line-height: 1.08;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}
.pmodal__hero-caption {
  /* aceeași coloană ca paragrafele (62ch centrate), nu marginea panoului:
     altfel caption-ul atârnă singur la stânga, departe de textul cu care ține */
  margin: 1rem var(--pmodal-gutter) 0;
  max-width: none;
  font-size: 0.8125rem;
  color: var(--ink-mute);
}
.pmodal__hero-caption span {
  display: block;
  max-width: var(--pmodal-measure);
  margin-inline: auto;
}

/* lățimea coloanei de lectură, fixă în px: `62ch` s-ar calcula pe fontul
   fiecărui element, deci caption-ul (13px) și paragrafele (17px) ar ieși la
   lățimi diferite și nu s-ar mai alinia între ele */
.pmodal { --pmodal-measure: 42rem; }

.pmodal__body {
  margin: var(--space-block) var(--pmodal-gutter) 0;
}
.pmodal__body p {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: var(--pmodal-measure);
  /* auto pe laterale: fără el ar rămâne lipite de stânga coloanei */
  margin: 0 auto 1.5rem;
}
.pmodal__body p:last-child { margin-bottom: 0; }
.pmodal__body strong { color: var(--ink); font-weight: 600; }

.pmodal__stats {
  margin: var(--space-block) var(--pmodal-gutter) 0;
  padding: 0;
  list-style: none;
  /* una sub alta, ca la Apple (flex column, gap 60px) — nu trei coloane:
     pe verticală fiecare cifră are spațiu să respire și textul de sub ea
     poate fi citit pe o lățime normală */
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.pmodal__stats li { margin: 0; max-width: var(--pmodal-measure); margin-inline: auto; width: 100%; }
.pmodal__stat {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.0714;
  color: var(--ink);
  /* cifre de aceeași lățime: coloanele rămân aliniate optic */
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.pmodal__stat + p {
  margin-block-start: 12px;
  margin-inline: 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}

/* Banda de jos: reciclează celelalte trei teme ca miniaturi clicabile. */
.pmodal__router {
  background: #fafafc;
  margin-block-start: 24px;
  padding-block: 60px;
}
.pmodal__router-title {
  margin: 0 var(--pmodal-gutter) 2.5rem;
  max-width: none;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  letter-spacing: -0.01em;
}
.pmodal__router-grid {
  margin-inline: var(--pmodal-gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.pmodal__router-item {
  position: relative;
  isolation: isolate;
  clip-path: inset(0 round 20px);
  min-height: 20rem;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: #fff;
  display: flex;
  font: inherit;
  transition: transform 0.35s var(--ease-out);
}
.pmodal__router-item img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pmodal__router-item-content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 20px;
}
/* mai mult aer între titlu și caption, ca blocul de jos să nu pară înghesuit
   sub el — la Apple conținutul are 280px lățime fixă și aceeași respirație */
.pmodal__router-foot { padding-block-start: 0.125rem; }
.pmodal__router-item-content::before,
.pmodal__router-item-content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.pmodal__router-item-content::before {
  /* proporțiile Apple: banda de sus e scurtă (23%), cea de jos înaltă (80%),
     pentru că acolo stau două rânduri de text peste imagine */
  height: 23%;
  inset: 0 0 auto;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}
.pmodal__router-item-content::after {
  height: 80%;
  inset: auto 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
/* dimensiunile Apple: eyebrow = typography-intro (24px),
   titlu = typography-callout (32px) */
.pmodal__router-eyebrow {
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.375rem);
  font-weight: 600;
  margin: 0;
}
.pmodal__router-name {
  font-size: clamp(1.5rem, 1.2rem + 1.15vw, 2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.pmodal__router-caption {
  font-size: 0.8125rem;
  line-height: 1.35;
  margin: 0;
  opacity: 0.92;
}
/* textul lasă loc butonului din colț prin padding, nu stând lângă el:
   așa caption-ul poate ocupa toată lățimea și nu se rupe în coloană îngustă */
.pmodal__router-foot { padding-inline-end: calc(36px + 8px); }
.pmodal__router-cta {
  position: absolute;
  inset: auto 20px 18px auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  transition: opacity 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pmodal__router-item:hover .pmodal__router-cta { opacity: 0.75; }
}
.pmodal__router-cta svg { width: 0.85rem; height: 0.85rem; display: block; }

@media (hover: hover) and (pointer: fine) {
  .pmodal__router-item:hover { transform: scale(1.012); }
}

@keyframes pmodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmodal-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* Intrarea: opacitatea urcă în prima treime, apoi mișcarea se așază lent pe
   ease-out — ochiul vede panoul „aterizând", nu apărând brusc. Ieșirea e mai
   scurtă și pe o curbă care pleacă repede: un obiect care dispare nu are
   nevoie de aceeași grijă ca unul care se prezintă. */
@keyframes pmodal-rise {
  0%   { opacity: 0; transform: translateY(32px) scale(0.97); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pmodal-sink {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(12px) scale(0.985); }
}
/* durata (0.3s) TREBUIE să corespundă cu timeout-ul de 320ms din JS,
   altfel modalul dispare înainte să termine animația */
.pmodal.is-closing .pmodal__scrim { animation: pmodal-fade-out 0.3s ease both; }
.pmodal.is-closing .pmodal__panel { animation: pmodal-sink 0.3s cubic-bezier(0.4, 0, 0.6, 1) both; }
/* fundalul nu mai primește clicuri cât panoul iese — altfel un al doilea clic
   în timpul animației ar redeschide sau ar bloca starea */
.pmodal.is-closing { pointer-events: none; }

/* sub lățimea panoului, marginea interioară devine procentuală (ca la Apple:
   8% pe tabletă, 6.25vw pe telefon) — calc(50% - 490px) ar deveni negativ */
@media (max-width: 1340px) {
  .pmodal { --pmodal-gutter: 8%; }
  .pmodal__hero-content { padding-block: 4em 40px; }
}
@media (max-width: 680px) {
  /* panoul se lipește de marginile ecranului și pierde rotunjirea de jos,
     ca la Apple sub 480px: pe telefon un card plutitor ar irosi lățime */
  .pmodal { padding-block: 0; --pmodal-gutter: 6.25vw; }
  .pmodal__panel {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
  }
  .pmodal__hero-img { height: clamp(16rem, 60vw, 22rem); }
  .pmodal__headline { font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem); }
  .pmodal__stats { grid-template-columns: 1fr; gap: 2.5rem; }
  .pmodal__router-grid { grid-template-columns: 1fr; }
  .pmodal__router { padding-block: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard { transition: none; }
  .pcard:hover, .pmodal__router-item:hover { transform: none; }
  .pmodal__scrim,
  .pmodal__panel,
  .pmodal.is-closing .pmodal__scrim,
  .pmodal.is-closing .pmodal__panel { animation: none; }
  .pmodal__scroll { transition: none; }
  .pmodal__scroll.is-swapping { opacity: 1; }
}

/* ---------- FAQ ---------- */
.faq { background: #fff; padding-bottom: calc(var(--space-section) / 2 + 1.5rem); }

.faq__list {
  max-width: 74rem;
  background: var(--ivory);
  border-radius: var(--radius-lg);
  padding: 8rem 5rem 6rem;
}

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: none; }

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0.25rem;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: clamp(1.3rem, 1.2rem + 0.4vw, 1.5875rem);
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.faq__chevron {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--ink-mute);
  transition: transform 0.4s var(--ease-out);
}
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }

.faq__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.7s var(--ease-out);
}
.faq__answer-inner { padding: 0 0.25rem 2rem; }
.faq__answer-inner p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.faq__item.is-open .faq__answer-inner p { opacity: 1; transition-delay: 0.15s; }

.faq .section-head h2 { font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem); }

@media (max-width: 720px) {
  .faq { padding-top: calc(var(--space-section) / 4); }
  .faq .section-head h2 { font-size: clamp(1.625rem, 1.4rem + 1.1vw, 1.875rem); }
  .faq__list { padding: 3.5rem 1.5rem; }
  .faq__question { padding: 1rem 0.1rem; font-size: 1.3rem; gap: 2.25rem; }
  .faq__chevron { width: 2.125rem; height: 2.125rem; }
  .faq__answer-inner { padding-left: 0.1rem; padding-right: 0.1rem; }
  .faq__answer-inner p { font-size: 0.9375rem; max-width: 17rem; }
}

/* ---------- Sitemap footer (Apple-style, per pagină) ---------- */
main > .section.sitemap:last-child {
  padding-top: calc(var(--space-section) / 2);
  padding-bottom: 5rem;
}
.footer--deep { background: var(--ivory-deep); }
.sitemap__title {
  font-size: clamp(2.5rem, 2.1rem + 1.9vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 2.5rem;
}
.sitemap__grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 3.5rem;
  justify-content: start;
}
.sitemap__label {
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.sitemap__link { display: block; text-decoration: none; }
.sitemap__link--main {
  padding: 0.35rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}
.sitemap__link--sub {
  padding: 0.3rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.sitemap__link:hover { text-decoration: none; }
.sitemap__group { margin-top: 1.5rem; }

@media (max-width: 720px) {
  .sitemap__title { font-size: 1.75rem; margin-bottom: 1.5rem; }
  .sitemap__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .sitemap__label { font-size: 0.8125rem; margin-bottom: 0.25rem; }
  .sitemap__link--main { font-size: 1.0625rem; padding: 0.2rem 0; }
  .sitemap__link--sub { font-size: 0.8125rem; padding: 0.2rem 0; }
  .sitemap__group { margin-top: 0.5rem; }
}

/* ---------- Chooser (Filozofia — bară de tipuri + card, gen Apple Trade In) ---------- */
.chooser { padding-top: 0; }

/* Secțiune Viziune — bandă full-bleed, titlu mare centrat (gen Apple Trade In) */
.section--tinted {
  background: var(--ivory-deep);
  /* iese din container ca banda de culoare să atingă marginile ecranului */
  margin-inline: calc(50% - 50vw);
  padding-inline: 1.25rem;
}
.vision__title {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 1.6rem + 3.1vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  /* depășește lățimea containerului îngust ca titlul să încapă pe un rând,
     dar niciodată peste lățimea utilă a ecranului */
  width: max-content;
  max-width: min(100%, calc(100vw - 2.5rem));
  margin-inline: auto;
  text-wrap: balance;
}
/* pe desktop titlul poate depăși containerul îngust; pe mobil rămâne în ecran */
@media (min-width: 861px) {
  .vision__title { max-width: calc(100vw - 2.5rem); }
}
.vision__text {
  max-width: 54ch;
  margin-inline: auto;
  margin-top: 1.5rem;
  /* rânduri egale, fără cuvânt orfan pe ultimul rând */
  text-wrap: balance;
}
@media (max-width: 680px) {
  .vision__text { max-width: 30ch; }
  .vision__title { font-size: clamp(1.75rem, 1.3rem + 3vw, 2.25rem); }
}

/* Secțiunea „Ce ne diferențiază" — 3 carduri cu imagine bleed, gen Apple Trade In */
/* cele două blocuri bej alăturate arată ca o singură bandă continuă */
.section--tinted.diff__lead { padding-bottom: 0; }
.diff { padding-top: calc(var(--space-section) * 0.55); }

.diff__title {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 var(--space-block);
}

/* 3 coloane egale pe desktop; se strâng singure pe ecrane mici */
.diff__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: stretch;
}
@media (min-width: 861px) {
  .diff__grid { grid-template-columns: repeat(3, 1fr); }
}

.diff__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  /* fără padding pe card: imaginea trebuie să atingă marginile de sus, ca la Apple */
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 26, 24, 0.04);
  /* proprietăți separate, nu shorthand, ca să nu suprascrie transition-delay de la .reveal */
  transition-property: transform, opacity;
  transition-duration: 0.6s, 0.9s;
  transition-timing-function: var(--ease-out);
}
.diff__card:hover { transform: scale(1.012); }

/* imaginea umple tot capul cardului, colț la colț */
.diff__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.diff__body { padding: 1.75rem; }
.diff__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
}
.diff__card h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  max-width: none;
}
.diff__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Carusel recenzii (pagina Filozofia) ---------- */
/* banda bej continuă: .diff se termină fără padding-bottom, recenziile îl preiau */
.section--tinted.diff { padding-bottom: 0; }
.reviews { padding-top: calc(var(--space-section) * 0.55); }

.reviews__title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 1rem;
}

/* fereastra taie slide-urile; pe verticală rămâne loc pentru avatarul ieșit din card */
.reviews__viewport { overflow: hidden; padding-top: 2.25rem; }

.reviews__track {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.85s cubic-bezier(0.32, 0.72, 0, 1);
}
/* slide-ul întinde cardul: toate cardurile au înălțimea celui mai înalt */
.reviews__slide { flex: 0 0 100%; min-width: 0; display: flex; }

.review-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem 2rem 2rem;
  width: min(100%, 44rem);
  margin-inline: auto;
}
.review-card__q {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.3;
  margin: 0 0 3.5rem;
  max-width: none;
}

/* avatarul se suprapune peste colțul de sus al blocului gri, ca la Apple */
.review-card__body {
  position: relative;
  flex: 1;
  background: var(--ivory);
  border-radius: var(--radius);
  padding: 3rem 1.5rem 1.5rem;
}
.review-card__avatar {
  position: absolute;
  top: -2.25rem;
  left: 1.5rem;
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pine-tint);
  color: var(--pine);
  border: 3px solid #fff;
}
.review-card__avatar svg { width: 2.5rem; height: 2.5rem; display: block; }

/* ultimul card: invitație la recenzie, conținut centrat pe toată înălțimea */
.review-card--cta {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
}
.review-card__cta-q {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.review-card__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--pine);
  font-size: 0.9375rem;
  text-decoration: none;
}
.review-card__cta-link:hover { text-decoration: underline; }
.review-card__cta-link svg { width: 0.7rem; height: 0.7rem; }

.review-card__quote { margin: 0; }
.review-card__quote p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}
.review-card__author {
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 1rem 0 0;
  max-width: none;
}

/* aceeași lățime ca .review-card, ca bulinele și săgețile să cadă exact pe colțurile lui */
.reviews__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 44rem);
  margin: 2rem auto 0;
}

.reviews__dots { display: flex; align-items: center; gap: 0.5rem; }
.reviews__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(26, 26, 24, 0.18);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.reviews__dot.is-active { background: var(--ink); }

.reviews__arrows { display: flex; gap: 0.5rem; }
.reviews__arrow {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(26, 26, 24, 0.06);
  color: var(--ink);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
}
.reviews__arrow svg { width: 1.15rem; height: 1.15rem; display: block; }
.reviews__arrow:hover { background: rgba(26, 26, 24, 0.12); }
/* săgeata stânga lipsește la început, dar își păstrează spațiul ca să nu sară layoutul */
.reviews__arrow.is-hidden { visibility: hidden; opacity: 0; }

@media (max-width: 680px) {
  /* cât se vede din cardul vecin de fiecare parte */
  .reviews { --peek: 1.75rem; padding-bottom: calc(var(--space-section) * 0.85); }
  .reviews__title { font-size: 1.375rem; }

  /* full-bleed; slide-ul e mai îngust decât ecranul, deci se văd colțurile
     cardului anterior și următor. Track-ul e decalat cu jumătate din diferență
     ca să rămână cardul activ centrat, iar pasul JS (-i * 100%) rămâne exact. */
  .reviews__viewport { margin-inline: calc(50% - 50vw); }
  .reviews__track { width: calc(100% - 2 * var(--peek)); margin-inline: var(--peek); }
  .reviews__slide { padding-inline: 0.5rem; }
  .review-card { width: 100%; padding: 1.25rem 1.25rem 1.5rem; }

  /* spațiu mare între întrebare și iconul de pe blocul bej */
  .review-card__q { margin-bottom: 4.5rem; }
  /* autorul coboară fix la baza blocului bej, indiferent de lungimea citatului */
  .review-card__body { display: flex; flex-direction: column; padding: 2.5rem 1.125rem 1.25rem; }
  .review-card__author { margin-top: auto; }

  .review-card__avatar { width: 3.75rem; height: 3.75rem; top: -1.875rem; }
  .review-card__avatar svg { width: 2rem; height: 2rem; }

  /* fără săgeți; bulinele se întind pe toată lățimea cardului */
  .reviews__arrows { display: none; }
  /* cardul începe la --peek + 0.5rem de marginea ecranului, .container inset 1.25rem */
  .reviews__nav { width: 100%; padding-inline: calc(var(--peek) + 0.5rem - 1.25rem); }
  .reviews__dots { flex: 1; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__track { transition: none; }
}

/* bara de taburi: iconuri deasupra etichetei, tabul activ subliniat.
   Pe ecrane mici devine un rând scrollabil orizontal, fără scrollbar. */
.chooser__tabs {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 0.4rem + 3vw, 3.5rem);
  /* lățime cât grupul de taburi, nu cât containerul — linia gri se oprește
     exact la marginea primului și ultimului icon, ca la Apple */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.chooser__tabs::-webkit-scrollbar { display: none; }
.chooser__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.25rem 0.9rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--ink-mute);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease;
}
.chooser__tab-icon {
  display: block;
  color: currentColor;
  transition: transform 0.35s var(--ease-out);
}
.chooser__tab-icon svg { display: block; width: 2.75rem; height: 2.75rem; }
/* linia de sub tabul activ crește din centru, nu apare brusc */
.chooser__tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ink);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-out);
}
.chooser__tab:hover:not(.is-active) { color: var(--ink-soft); }
.chooser__tab:hover:not(.is-active) .chooser__tab-icon { transform: translateY(-2px); }
.chooser__tab.is-active { color: var(--ink); font-weight: 500; }
.chooser__tab.is-active::after { transform: scaleX(1); }
.chooser__tab:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 6px; }

/* cardul: înălțimea e animată din JS ca schimbarea panoului să nu „sară" */
.chooser__card {
  position: relative;
  background: var(--ivory-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  overflow: hidden;
  transition: height 0.45s var(--ease-out);
}
.chooser__panel { display: none; }
.chooser__panel.is-active,
.chooser__panel.is-leaving {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
/* panoul care iese e scos din flux ca să nu împingă înălțimea în timpul
   tranziției — cele două panouri se suprapun pentru ~0.28s */
.chooser__panel.is-leaving {
  position: absolute;
  top: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  left: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  right: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  pointer-events: none;
  animation: chooser-out 0.28s var(--ease-out) both;
}
@keyframes chooser-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes chooser-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-8px); }
}
/* conținutul intră eșalonat, ca la pop-up-ul „Găsește-ți serviciul" */
.chooser__panel.is-active .chooser__title,
.chooser__panel.is-active .chooser__desc,
.chooser__panel.is-active .chooser__facts,
.chooser__panel.is-active .chooser__actions {
  animation: chooser-in 0.5s var(--ease-out) both;
}
.chooser__panel.is-active .chooser__title { animation-delay: 0.04s; }
.chooser__panel.is-active .chooser__desc { animation-delay: 0.08s; }
.chooser__panel.is-active .chooser__facts { animation-delay: 0.12s; }
.chooser__panel.is-active .chooser__actions { animation-delay: 0.16s; }
.chooser__panel.is-active .chooser__media { animation: chooser-media-in 0.6s var(--ease-out) 0.06s both; }
@keyframes chooser-media-in {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: none; }
}

.chooser__title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-mute);
  margin: 0 0 1rem;
}
.chooser__title strong { font-weight: 600; color: var(--ink); }
.chooser__desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.chooser__facts { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.chooser__facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem;
}
.chooser__facts li:first-child { border-top: 1px solid var(--line-soft); }
.chooser__facts span { color: var(--ink-mute); }
.chooser__facts strong { font-weight: 500; color: var(--ink); text-align: right; }
.chooser__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
/* butonul verde e discret: mic, text normal, iar la hover se schimbă doar
   nuanța — fără ridicare și fără umbră (ca .tile__actions .btn--primary) */
.chooser__actions .btn--primary {
  align-self: flex-start;
  padding: 0.6rem 1.35rem;
  font-size: 0.9375rem;
  font-weight: 400;
  box-shadow: none;
}
.chooser__actions .btn--primary:hover {
  background: var(--pine-deep);
  transform: none;
  box-shadow: none;
}
.chooser__actions .btn--primary:active { transform: none; }

/* „Vezi toate serviciile ⊕" — underline doar pe text, iconul nu se mișcă */
.chooser__all {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--pine);
  white-space: nowrap;
}
.chooser__all,
.chooser__all:hover,
.chooser__all:focus,
.chooser__all:active { text-decoration: none; }
.chooser__all .tile__link-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.chooser__all:hover .tile__link-label { text-decoration-color: currentColor; }
.chooser__all-icon {
  width: 1.05em; height: 1.05em;
  flex: 0 0 auto;
  margin-left: 0.4em;
}
.chooser__all:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 4px; }

/* `contain`, nu `cover`: sursele sunt deja 4:3, deci nu se pierde nimic,
   dar orice imagine viitoare de alt raport se vede întreagă, nu decupată */
.chooser__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--ivory);
  border-radius: var(--radius);
}

/* `p { max-width: 62ch }` (global) îngustează paragraful la ~623px, iar
   `text-align: center` îl centra în cutia îngustă, nu în card — de aici
   `margin-inline: auto`, care centrează cutia însăși */
.chooser__foot {
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) auto 0;
  font-size: 1rem;
  color: var(--ink-mute);
  text-align: center;
}
/* doar „Găsește-ți site-ul ›" e verde; restul frazei rămâne gri */
.chooser__foot-link {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--pine);
  cursor: pointer;
  white-space: nowrap;
}
.chooser__foot-link .tile__link-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.chooser__foot-link:hover .tile__link-label { text-decoration-color: currentColor; }
.chooser__foot-link .arrow {
  font-size: 1.15em;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  top: -0.09em;
  margin-left: 0.05em;
  transform: none !important;
}
.chooser__foot-link:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 760px) {
  /* pe telefon: imaginea deasupra textului, ca la Apple */
  .chooser__panel.is-active,
  .chooser__panel.is-leaving {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* miniatură pătrată în colțul de sus, nu bandă full-width. `contain` (cel
     de pe desktop) lasă benzi goale sus/jos într-o cutie 1:1 dintr-o sursă
     4:3 — se văd ca margini drepte, nefinisate, în cutia rotunjită. `cover`
     umple complet pătratul (decupează doar puțin stânga/dreapta), deci
     colțurile rotunjite ale containerului rămân singurele care se văd. */
  .chooser__media { order: -1; justify-self: start; width: 4.5rem; overflow: hidden; border-radius: var(--radius); }
  .chooser__media img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }
  /* pe telefon bara redevine full-width, altfel `fit-content` rupe scrollul */
  .chooser__tabs {
    justify-content: flex-start;
    gap: 1.75rem;
    padding-inline: 0.25rem;
    width: 100%;
  }
  /* tipografia coboară o treaptă: `clamp()` stă deja pe minim la 390px */
  .chooser__title { font-size: 1.375rem; margin-bottom: 0.6rem; }
  .chooser__desc { font-size: 0.9rem; margin-bottom: 1.1rem; }
  .chooser__facts { margin-bottom: 1.25rem; }
  .chooser__facts li { font-size: 0.875rem; padding: 0.6rem 0; }
  .chooser__actions { gap: 3.5rem; }
  .chooser__foot { text-align: center; }
  /* partea verde trece pe rândul următor doar pe telefon — `display: block`
     pe buton, nu `\A` în ::before (un <button> nu-l rupe fiabil pe toate motoarele).
     `block` îl întinde la lățimea părintelui și `text-align` centrează doar
     conținutul lui, nu cutia — `width: fit-content` + `margin-inline: auto`
     centrează cutia însăși în card. */
  .chooser__foot-link { display: block; width: fit-content; margin: 0.05rem auto 0; }
}

/* ---------- Secțiunea „Misiunea" (Filozofia) — două carduri mari, gen Apple Trade In ---------- */
.mission__title {
  font-family: var(--font-sans);
  /* mare, ca fiecare rând să se întindă spre lățimea gridului de dedesubt */
  font-size: clamp(2rem, 1.15rem + 4.2vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  /* lățimea celor două carduri de dedesubt, ca titlul să le încadreze */
  max-width: 62rem;
  margin: 0 auto var(--space-block);
}
@media (max-width: 680px) {
  /* <br>-ul manual e gândit pentru desktop; pe mobil lățimea liniei e alta,
     așa că lăsăm text-wrap: balance să aleagă unde se rupe rândul */
  .mission__title br { display: none; }
}

/* două carduri egale, ca perechea de la Apple */
.mission__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 62rem;
  margin-inline: auto;
}
@media (min-width: 861px) {
  .mission__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  /* mai mult aer între banda bej de recenzii și titlul acestei secțiuni albe */
  .mission { padding-top: calc(var(--space-section) * 0.85); }
}

.mission__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  /* fără padding pe card: ilustrația trebuie să atingă marginile de jos */
  overflow: hidden;
  /* raport înalt: text sus, ilustrație în jumătatea de jos */
  aspect-ratio: 5 / 7;
  color: var(--ivory);
  /* proprietăți separate, nu shorthand, ca să nu suprascrie transition-delay de la .reveal */
  transition-property: transform, opacity;
  transition-duration: 0.6s, 0.9s;
  transition-timing-function: var(--ease-out);
}
.mission__card:hover { transform: scale(1.012); }
.mission__card--pine { background: var(--pine); }
.mission__card--pine-soft { background: #2E5A4B; }

.mission__body { padding: 3rem 2rem 0; }
.mission__card h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1.25rem;
  max-width: none;
  color: var(--ivory);
}
.mission__card p {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
  color: rgba(250, 248, 244, 0.82);
}

/* ilustrația e împinsă în jos și are fundalul cardului, deci se topește în el */
.mission__img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
}

@media (max-width: 860px) {
  /* pe telefon cardul se lasă înălțat de conținut, fără raport forțat */
  .mission__card { aspect-ratio: auto; }
  .mission__body { padding: 2.5rem 1.5rem 0; }
}

/* ---------- Secțiunea „Abordarea" (Filozofia) — intro în stânga, două carduri în dreapta ---------- */
.approach { padding-top: 0; }
.approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-block);
  /* intro-ul rămâne lipit de marginea de sus, la nivelul primului card */
  align-items: start;
}
@media (min-width: 861px) {
  /* coloana de text îngustă, cardurile iau restul — proporția din referință */
  .approach__grid { grid-template-columns: minmax(15rem, 21rem) 1fr; gap: clamp(2.5rem, 5vw, 5.5rem); }
}

.approach__intro h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
.approach__intro p {
  margin: 1.25rem 0 2rem;
  /* mai mic decât textul de body: e text de sprijin, nu mesajul principal */
  font-size: 0.9375rem;
  line-height: 1.6;
  /* linie scurtă, ca textul să nu concureze cu cardurile */
  max-width: 34ch;
}

/* exact butonul „Găsește-ți serviciul" din banda sticky (.page-bar__btn):
   verde plin, fără umbră, fără salt la hover, doar schimbare de fundal.
   Singura diferență: proporțiile de CTA de sine stătător, nu de chip în bară. */
.approach__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: none;
  background: var(--pine);
  color: #FDFCFA;
  font-family: inherit;
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.approach__btn:hover { background: var(--pine-deep); text-decoration: none; color: #FDFCFA; }

.approach__cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 681px) {
  .approach__cards { grid-template-columns: repeat(2, 1fr); }
}

.approach__card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  background: var(--ivory-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}
/* icon mare, centrat orizontal în card, ca în referință — cutie fixă, ca
   ambele desene să ocupe aceeași înălțime și textul să rămână aliniat */
.approach__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(6rem, 4.5rem + 4.5vw, 8.5rem);
  margin-bottom: 0.75rem;
  color: var(--pine);
}
.approach__icon svg {
  display: block;
  width: clamp(6rem, 4.5rem + 4.5vw, 8.5rem);
  height: clamp(6rem, 4.5rem + 4.5vw, 8.5rem);
}
.approach__card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}
.approach__card strong { color: var(--ink); font-weight: 600; }
/* linkul cade la baza cardului, ca perechea să rămână aliniată */
.approach__card .btn--text { margin-top: auto; align-self: start; }
/* exact ca linkurile de la Servicii (.tile__actions .btn--text): underline la hover, săgeata stă pe loc */
.approach__card .btn--text .arrow { transform: none !important; }
.approach__card .btn--text .tile__link-label {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.approach__card .btn--text:hover .tile__link-label { text-decoration-color: currentColor; }

@media (max-width: 680px) {
  /* pe telefon, intro-ul (titlu, text, buton) stă centrat pe mijloc */
  .approach__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .approach__intro p { max-width: 30ch; }
  /* spațiu mult mai mare sub buton, ca să nu se lipească de primul card */
  .approach__btn { margin-bottom: 3rem; }
  /* iconurile din carduri, mult mai mari, ca să domine cardul pe ecran mic */
  .approach__icon { height: clamp(7rem, 3rem + 22vw, 10rem); }
  .approach__icon svg { width: clamp(7rem, 3rem + 22vw, 10rem); height: clamp(7rem, 3rem + 22vw, 10rem); }
}

/* ---------- Quiz „Găsește-ți site-ul" (pop-up Filozofia) ---------- */
/* pașii refolosesc integral clasele .wizard__* și .choice, ca să arate
   identic cu formularul din Contact — aici doar ecranul de rezultat */
/* bară unică, scurtă, care se umple pe măsură ce treci la următoarea
   întrebare — nu segmente separate */
#quiz-modal .quiz__bar {
  width: 11rem;
  max-width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 99px;
  margin: 0 0 clamp(3rem, 2.3rem + 3vw, 3.75rem);
  overflow: hidden;
}
#quiz-modal .quiz__bar[hidden] { display: none; }
#quiz-modal .quiz__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pine);
  border-radius: 99px;
  transition: width 0.45s var(--ease-out);
}

/* întrebarea ține locul titlului — aceleași valori ca .service-picker__title */
#quiz-modal .wizard__q {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.75rem;
  text-wrap: balance;
}
#quiz-modal .wizard__hint { margin-bottom: 2.5rem; }

/* răspunsurile pe un singur rând fiecare, cu descrierea lipită sub titlu */
#quiz-modal .choice-grid { grid-template-columns: 1fr; gap: 0.625rem; }
#quiz-modal .choice label small { display: block; line-height: 1.35; margin-top: 0.05rem; }

/* săgeata Înapoi: același buton rotund ca „×", doar mutat în stânga.
   `.modal__close` are display:grid, deci `hidden` trebuie reafirmat. */
#quiz-modal .quiz__back-btn { right: auto; left: 1.25rem; }
#quiz-modal .quiz__back-btn[hidden] { display: none; }

.quiz__result { animation: chooser-in 0.5s var(--ease-out) both; }
.quiz__result[hidden] { display: none; }
.quiz__result-title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 1rem;
  /* fără padding-right: „×" e deja mult deasupra titlului, iar limitarea
     lățimii ar rupe titlul în prea multe rânduri */
  text-wrap: balance;
}
.quiz__result-sub {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1rem;
}
.quiz__result-sub a { color: inherit; text-decoration: none; }
.quiz__result-sub a .tile__link-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.quiz__result-sub a:hover .tile__link-label { text-decoration-color: currentColor; }
.quiz__result-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
}

/* rândul serviciului: fără card, mic, ca listele de modele de la Apple */
.quiz__pick {
  display: grid;
  grid-template-columns: 3.75rem 1fr auto;
  align-items: center;
  gap: 1rem;
}
.quiz__pick-img {
  width: 3.75rem; height: 3.75rem;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.quiz__pick-name { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.15rem; }
.quiz__pick-price { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }
.quiz__pick-price strong { font-weight: 600; color: var(--ink); }
.quiz__select {
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 400;
  box-shadow: none;
}
.quiz__select:hover {
  background: var(--pine-deep);
  transform: none;
  box-shadow: none;
  text-decoration: none;
}
.quiz__select:active { transform: none; }

/* „Încă te decizi? Vezi toate serviciile ›" — același tipar de link ca
   subsolul cardului: verde doar a doua parte, underline doar pe text */
.quiz__foot {
  margin: 2.5rem 0 0;
  font-size: 1rem;
  color: var(--ink-mute);
  text-align: center;
}
.quiz__foot-link { color: var(--pine); white-space: nowrap; }
.quiz__foot-link,
.quiz__foot-link:hover,
.quiz__foot-link:focus,
.quiz__foot-link:active { text-decoration: none; }
.quiz__foot-link .tile__link-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.quiz__foot-link:hover .tile__link-label { text-decoration-color: currentColor; }
.quiz__foot-link .arrow {
  font-size: 1.15em;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  margin-left: 0.05em;
  transform: none !important;
}
.quiz__foot-link:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 560px) {
  .quiz__pick { grid-template-columns: 3.25rem 1fr; }
  .quiz__pick-img { width: 3.25rem; height: 3.25rem; }
  /* butonul pornește din coloana textului, nu de sub imagine — marginea lui
     stângă coincide cu cea a numelui serviciului */
  .quiz__select { grid-column: 2; justify-self: start; margin-top: 0.75rem; }
}

/* ---------- FAQ Hub (filozofia) — pastile de categorii + acordeon ----------
   Structură inspirată de „More questions? More answers." (Apple), turnată în
   paleta Niksen. Prefix propriu (.faq-hub) ca să nu atingă .faq de pe servicii. */
.faq-hub .section-head--center { max-width: 46rem; margin-inline: auto; text-align: center; }
.faq-hub .section-head--center .kicker { margin-inline: auto; }
.faq-hub .section-head--center h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); }

/* pagini fără CTA band: footerul urmează direct după faq-hub, apropie-l de „Scrie-ne direct" */
main > .faq-hub:last-of-type { padding-bottom: calc(var(--space-section) / 2); }
.faq-hub + .footer { margin-top: 0; }

/* pastilele de filtrare */
.faq-hub__filters {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  max-width: 52rem; margin-inline: auto;
}
.faq-hub__pill {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.faq-hub__pill:hover { border-color: var(--ink); text-decoration: none; }
.faq-hub__pill.is-active {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}

/* grupurile de întrebări */
.faq-hub__groups {
  max-width: 62rem; margin-inline: auto;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.faq-hub__group { margin-top: 3.5rem; }
.faq-hub__group:first-child { margin-top: 0; }
.faq-hub__group.is-hidden { display: none; }
.faq-hub__group-title {
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 600; color: var(--ink);
  margin-bottom: 0.75rem;
}

.faq-hub__item { border-bottom: 1px solid var(--line-soft); }

.faq-hub__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.15rem 0.25rem;
  background: none; border: 0;
  text-align: left;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.45;
  color: var(--ink);
}
.faq-hub__q:hover { color: var(--pine); }
.faq-hub__chevron {
  flex: none;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  color: var(--ink-mute);
  transition: transform .35s var(--ease-out), color .25s var(--ease-out);
}
.faq-hub__chevron svg { width: 100%; height: 100%; }
.faq-hub__q[aria-expanded="true"] .faq-hub__chevron { transform: rotate(180deg); color: var(--ink); }

/* deschidere prin grid-template-rows: fără măsurători de înălțime în JS */
.faq-hub__a {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .4s var(--ease-out);
}
.faq-hub__item.is-open .faq-hub__a { grid-template-rows: 1fr; }
.faq-hub__a-inner { min-height: 0; }
.faq-hub__a-inner p {
  padding: 0 0.25rem 1.5rem;
  max-width: 94ch;
  font-size: 0.875rem;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.faq-hub__item.is-open .faq-hub__a-inner p { opacity: 1; transition-delay: .12s; }

.faq-hub__foot {
  max-width: 62rem; margin-inline: auto;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.faq-hub__foot-link { color: var(--pine); white-space: nowrap; }
.faq-hub__foot-link,
.faq-hub__foot-link:hover,
.faq-hub__foot-link:focus,
.faq-hub__foot-link:active { text-decoration: none; }
.faq-hub__foot-link .tile__link-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease;
}
.faq-hub__foot-link:hover .tile__link-label { text-decoration-color: currentColor; }
.faq-hub__foot-link .arrow {
  font-size: 1.15em;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  margin-left: 0.05em;
  transform: translateY(-0.07em) !important;
}

@media (max-width: 720px) {
  .faq-hub .section-head--center h2 { font-size: clamp(2.125rem, 1.7rem + 2vw, 2.75rem); }
  .faq-hub__filters { justify-content: flex-start; gap: 0.5rem; max-width: 100%; }
  .faq-hub__pill { padding: 0.55rem 1rem; font-size: 0.9375rem; }
  .faq-hub__group { margin-top: 2.75rem; }
  .faq-hub__q { gap: 1.25rem; padding: 1rem 0.1rem; font-size: 1rem; }
  .faq-hub__chevron { width: 1.25rem; height: 1.25rem; }
  .faq-hub__a-inner p { padding-left: 0.1rem; padding-right: 0.1rem; font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-hub__a, .faq-hub__chevron, .faq-hub__a-inner p, .faq-hub__pill { transition: none; }
}

/* ---------- Film hero (Contact) — mecanica de pe apple.com/supply-chain ----------
   Etapele, în ordinea derulării:
     1. video full-bleed; titlul intră la ~2,4 s DUPĂ ce începe redarea
        (animația e „paused" până când JS confirmă evenimentul `playing`)
     2. la scroll, secțiunea se fixează: titlul dispare, videoclipul coboară
        la brightness(0.4) și paragraful urcă peste el
     3. paragraful e un bloc continuu de text care se aprinde cuvânt cu cuvânt,
        ca la Apple: ce-a trecut de capul de citire rămâne alb, restul stă la 0.42
     4. spre final, un clip-path inset strânge cadrul într-un container rotunjit,
        aliniat exact cu cutia .container din restul paginii

   Varianta de bază (fără .has-film pe <html>) e statică și lizibilă: fără JS
   sau cu „prefers-reduced-motion", secțiunea rămâne un video + titlu + paragraf.
   ------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --- varianta statică (fallback) --- */
.filmhero { position: relative; }
.filmhero__stage { position: relative; background: #0C0C0B; }
.filmhero__video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center;
}
.filmhero__intro {
  /* aceeași cutie ca videoclipul (nu toată secțiunea, care include și
     paragraful de dedesubt) ca titlul să cadă centrat peste imagine */
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  margin: 0; padding: 0 1.25rem;
  color: #fff; text-align: center;
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(2.25rem, 1.3rem + 4.4vw, 4.25rem);
  line-height: 1.05; letter-spacing: -0.03em;
  text-wrap: balance;
  /* halou care ține textul lizibil pe cadrele luminoase ale montajului —
     peretele de tencuială și coridorul; pe cerneală e practic invizibil */
  text-shadow: 0 0 30px rgb(0 0 0 / 62%), 0 2px 10px rgb(0 0 0 / 45%);
}
/* bandă difuză sub titlu, ca la Apple: alb pe tencuială luminoasă ar fi
   ilizibil, iar un voal circular s-ar citi ca o pată — banda orizontală
   trece drept cădere naturală de expunere */
.filmhero__intro::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 46%) 50%, rgb(0 0 0 / 0%) 80%);
  pointer-events: none;
}
.filmhero__subhead {
  margin: 0; padding: 2.5rem 1.25rem;
  width: 87.5%; max-width: 24ch; margin-inline: auto;
  color: var(--ink); text-align: center;
  font-weight: 600; line-height: 1.18; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 0.85rem + 2.4vw, 3.25rem);
  text-wrap: pretty;
}
/* frazele curg într-un singur bloc de text; span-urile rămân doar ca structură
   de autor (una per propoziție), nu mai rup rândul */
.filmhero__clause { display: inline; margin: 0; }
.filmhero__ui { position: absolute; right: 0; bottom: 0; z-index: 2; }

/* --- varianta cinematică --- */
.has-film .filmhero {
  height: 340vh;
  /* videoclipul urcă sub BARA DE NAVIGAȚIE ȘI banda sticky (ca la Apple, unde
     hero-ul pornește din marginea de sus a ferestrei), ca scena de 100svh să
     înceapă exact la y=0 — altfel colțul ei de jos, cu butonul play/pause,
     rămâne sub fold. Valoarea exactă o scrie JS după ce măsoară cele două
     bare; aici e doar rezerva anti-flash (2,75rem nav + ~3,5rem bandă) */
  margin-top: -6.25rem;
}

.has-film .filmhero__stage {
  --film-t: 0;        /* 0 → 1: poziția paragrafului, scrisă de JS */
  --film-shrink: 0;   /* 0 → 1: cât de strâns e cadrul, scris de JS */
  /* aceeași cutie ca .container (min(100% - 2.5rem, 71.25rem)), ca marginea
     containerului micșorat să cadă exact peste marginea conținutului paginii */
  --film-inset: max(1.25rem, (100vw - 71.25rem) / 2);

  position: sticky; top: 0;
  height: 100svh; min-height: 25rem;
  display: grid; place-items: center;
  /* OBLIGATORIU minmax(0, 1fr) pe ambele axe, altfel rândul se dimensionează
     după conținut. Videoclipul și titlul au aspect-ratio 16/9 și width: 100%,
     deci pe ecrane late-și-scunde devin mai ÎNALTE decât scena (la 1920x900:
     1080px). Rândul creștea după ele, iar .filmhero__ui, aliniat la baza
     rândului, cobora sub marginea ferestrei — de-aia dispărea butonul de
     play/pause peste ~1600px lățime, deși la 1920x1080 se vedea. Cu track
     definit, height: 100% se rezolvă corect și nimic nu mai umflă rândul. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  /* translateZ promovează stratul pe compositor; clip-path taie și paragraful
     care iese pe sus, nu doar marginile la micșorare */
  transform: translateZ(0);
  clip-path: inset(0 calc(var(--film-inset) * var(--film-shrink))
             round calc(26px * var(--film-shrink)));
}
.has-film .filmhero__stage > * { grid-area: 1 / 1; }

.has-film .filmhero__video {
  place-self: stretch;
  width: 100%; height: 100%; aspect-ratio: auto;
  transition: filter 0.45s var(--ease-out);
}

/* Degradeu în marginea de sus a cadrului, exact ca la Apple: bara de navigație
   și banda „Contact" plutesc transparente peste film, iar montajul trece prin
   cadre foarte luminoase (fereastra, holul) peste care textul alb ar dispărea.
   Se estompează după ce titlul iese, când videoclipul e oricum la brightness(0.4). */
.has-film .filmhero__stage::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 11rem;
  /* stopul din mijloc cade exact sub bară (~100px): cu un degradeu liniar
     simplu, acolo mai rămâneau ~18% și cadrul cu scara — cel mai luminos din
     montaj — înghițea linkurile mici din nav */
  background: linear-gradient(to bottom,
    rgb(12 18 15 / 58%) 0%, rgb(12 18 15 / 44%) 58%, rgb(12 18 15 / 0%) 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease;
}
.has-film .filmhero__stage.is-past-intro::after { opacity: 0.35; }

/* .filmhero__intro rămâne static: ::before-ul lui (banda difuză de sub titlu) e
   absolut cu inset: 0, deci se raportează la scenă și acoperă tot cadrul. Dacă
   i-am da position: relative, banda s-ar strânge în jurul cutiei titlului, care
   în grid e doar cât textul. Titlul trece peste degradeuri prin span-ul lui,
   care are deja z-index: 1. */
.has-film .filmhero__intro {
  position: static; padding: 0 1.5rem;
  /* fără aspect-ratio: cutia titlului e scena întreagă, nu un 16/9 care pe
     ecrane late ar depăși-o și ar împinge titlul sub centrul ferestrei */
  place-self: stretch; height: 100%; aspect-ratio: auto;
}
.filmhero__intro > span {
  display: inline-block;
  /* peste voalul de mai sus, care e poziționat absolut */
  position: relative; z-index: 1;
  /* pornită abia când JS adaugă .is-playing → cele 2,4 s se numără de la
     primul cadru redat, nu de la încărcarea paginii */
  animation: filmhero-intro 1.8s 2.2s both paused;
}
.has-film .filmhero__stage.is-playing .filmhero__intro > span { animation-play-state: running; }
@keyframes filmhero-intro {
  from { scale: 1.05; opacity: 0; }
  to   { scale: 1;    opacity: 1; }
}

.has-film .filmhero__subhead {
  --film-travel: 50svh;
  /* capul de citire, în indici de cuvânt — scris de JS din poziția scroll-ului */
  --read: 0;
  padding: 0; width: 87.5%;
  color: #fff; opacity: 0;
  /* deasupra degradeului de sus, altfel primele rânduri s-ar întuneca la urcare */
  position: relative; z-index: 1;
  /* centrat în celula de grid: t=0 → intră de jos, t=1 → iese pe sus */
  translate: 0 calc((0.5 - var(--film-t)) * var(--film-travel));
  will-change: translate;
}

/* Aprindere progresivă, cuvânt cu cuvânt (Apple, supply-chain): ce a trecut de
   capul de citire rămâne alb, ce urmează stă la 0.42. Fiecare cuvânt își știe
   indicele din --i (scris o singură dată, la împărțire), iar JS mută pe cadru o
   SINGURĂ proprietate — --read pe paragraf — nu 40 de stiluri individuale.
   Panta de 0.25 dă o pană de ~2,3 cuvinte, cât să nu se vadă praguri.
   Fără JS, var(--read, 9999) lasă tot textul alb. */
.filmhero__word {
  opacity: clamp(0.42, calc(0.42 + (var(--read, 9999) - var(--i, 0)) * 0.25), 1);
}
@media (prefers-reduced-motion: reduce) {
  .filmhero__word { opacity: 1; }
}

/* proprietăți separate (nu shorthand) ca tranzițiile de mai jos să nu se calce */
.has-film .filmhero__intro,
.has-film .filmhero__subhead {
  transition-property: opacity;
  transition-duration: 0.3s;
}
.has-film .filmhero__stage.is-past-intro .filmhero__intro { opacity: 0; }
.has-film .filmhero__stage.is-past-intro .filmhero__subhead { opacity: 1; }
.has-film .filmhero__stage.is-past-intro .filmhero__video { filter: brightness(0.4); }

/* --- butonul play/pause (valorile Apple: pastilă gri translucidă, icoană neagră) --- */
.has-film .filmhero__ui { position: relative; z-index: 2; place-self: end end; }
.filmhero__playpause {
  position: relative;
  display: block; width: 48px; height: 48px; padding: 0;
  /* 32px, nu 20px: la 20px butonul stătea în ultima fâșie a ferestrei — exact
     banda pe care o poate acoperi bara de start dacă fereastra browserului e
     trasă puțin sub marginea ecranului. Apple îl ține la fel de retras. */
  margin: 0 32px 32px 0;
  border-radius: 50%; cursor: pointer;
  /* Inel, ca la Apple: contur alb și interior doar ușor voalat, nu pastilă
     plină. Voalul întunecat din interior nu e decor — montajul trece prin
     cadre crem (coridorul, fereastra, foaia), unde un inel pur alb pe alb ar
     dispărea; pe cerneală voalul e practic invizibil. */
  border: 1.5px solid rgb(255 255 255 / 92%);
  background: rgb(0 0 0 / 30%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgb(0 0 0 / 35%);
  transition: background-color 0.15s linear, transform 0.2s ease;
}
.has-film .filmhero__playpause {
  /* compensează micșorarea: altfel clip-path ar tăia butonul, care trebuie să
     rămână lipit de marginea containerului mic, nu de marginea ecranului */
  margin-right: calc(32px + var(--film-inset, 0px) * var(--film-shrink, 0));
}
/* -webkit-mask e obligatoriu, nu decorativ: fără el, pe Safari și pe Chrome mai
   vechi de 120 declarația `mask` cade și ::after rămâne un pătrat negru peste
   tot butonul, în loc de iconiță. */
.filmhero__playpause::after {
  content: ""; position: absolute; inset: -1.5px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M23.5 12.893v10.214c0 .769-.597 1.393-1.333 1.393h-1.334c-.736 0-1.333-.624-1.333-1.393V12.893c0-.77.597-1.393 1.333-1.393h1.334c.736 0 1.333.624 1.333 1.393zM15.167 11.5h-1.334c-.736 0-1.333.624-1.333 1.393v10.214c0 .769.597 1.393 1.333 1.393h1.334c.736 0 1.333-.624 1.333-1.393V12.893c0-.77-.597-1.393-1.333-1.393z'/%3E%3C/svg%3E") center / cover no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M23.5 12.893v10.214c0 .769-.597 1.393-1.333 1.393h-1.334c-.736 0-1.333-.624-1.333-1.393V12.893c0-.77.597-1.393 1.333-1.393h1.334c.736 0 1.333.624 1.333 1.393zM15.167 11.5h-1.334c-.736 0-1.333.624-1.333 1.393v10.214c0 .769.597 1.393 1.333 1.393h1.334c.736 0 1.333-.624 1.333-1.393V12.893c0-.77-.597-1.393-1.333-1.393z'/%3E%3C/svg%3E") center / cover no-repeat;
}
.filmhero__stage.is-paused .filmhero__playpause::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M14 22.587v-9.168c0-.934.563-1.425 1.26-1.425.386 0 .627.065.967.273l7.468 4.403c.662.39 1.02.707 1.02 1.324 0 .618-.358.935-1.02 1.325l-7.468 4.403c-.34.208-.581.273-.966.273-.698 0-1.261-.473-1.261-1.408'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M14 22.587v-9.168c0-.934.563-1.425 1.26-1.425.386 0 .627.065.967.273l7.468 4.403c.662.39 1.02.707 1.02 1.324 0 .618-.358.935-1.02 1.325l-7.468 4.403c-.34.208-.581.273-.966.273-.698 0-1.261-.473-1.261-1.408'/%3E%3C/svg%3E");
}
.filmhero__playpause:hover { background: rgb(0 0 0 / 48%); }
.filmhero__playpause:active { transform: scale(0.95); }
.filmhero__playpause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Cadrul fix pentru mobil: ascuns implicit, îl aprinde media query-ul de jos.
   Aceeași cutie 16/9 ca videoclipul, ca titlul suprapus să cadă identic. */
.filmhero__still { display: none; }

@media (max-width: 680px) {
  .has-film .filmhero { height: 300vh; }
  .has-film .filmhero__subhead { --film-travel: 56svh; width: 90%; }
  .filmhero__playpause { width: 44px; height: 44px; margin: 0 22px 22px 0; }
  .has-film .filmhero__playpause {
    margin-right: calc(22px + var(--film-inset, 0px) * var(--film-shrink, 0));
  }

  /* ---- hero static pe telefon (ca la Apple pe mobil) ----
     Sub 681px inline script-ul nu mai pune .has-film, deci rămâne varianta
     statică. Ca la Apple: media ține TOT ecranul (100svh, nu 16/9), iar bara
     de navigație plutește transparentă peste ea, la y=0. Paragraful vine
     dedesubt, pe ivoriu. */
  .filmhero__still {
    display: block;
    width: 100%; height: 100svh;
    aspect-ratio: auto;
    object-fit: cover; object-position: center;
  }
  /* videoclipul și butonul lui nu mai au ce căuta: nu mai rulează nimic */
  .filmhero__video,
  .filmhero__ui { display: none; }
  /* scena nu mai e „sala de cinema": sub imagine urmează pagina normală, deci
     fundalul negru ar lăsa o bandă neagră în spatele paragrafului */
  .filmhero__stage { background: transparent; }

  /* Imaginea urcă sub nav ȘI sub bandă, ca scena să înceapă la y=0 (exact ce
     face .has-film pe desktop, dar acolo valoarea o scrie JS). Aici barele au
     înălțime fixă pe mobil — 44px nav + 53px bandă — deci marginea negativă e
     scrisă direct. */
  .filmhero { margin-top: calc(-1 * (var(--nav-h, 44px) + var(--bar-h, 53px))); }
  /* Nav-ul e static (pleacă odată cu pagina), deci plutește transparent cu text
     alb peste imagine. Banda „Contact" trece prin aceleași trei stări ca pe
     desktop — transparentă sus, voal întunecat la scroll, ivoriu sub hero —
     din regulile [data-bar] de mai jos, care nu mai sunt scopate pe .has-film.
     JS-ul întreține atributul și în varianta statică. */
  .nav { position: relative; z-index: 100; background: transparent;
         -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav__logo, .nav__logo .n { color: #fff; }
  .nav__toggle span { background: #fff; }
  .nav__logo { text-shadow: 0 1px 3px rgb(0 0 0 / 70%); }
  /* Partea de sus a cadrului e tencuială luminoasă: logo-ul alb s-ar pierde pe
     ea. Un voal întunecat doar în banda de sus, ca la Apple — nu peste tot
     cadrul, care e deja bine expus mai jos. */
  .filmhero__stage::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 190px;
    background: linear-gradient(to bottom, rgb(0 0 0 / 42%), rgb(0 0 0 / 0%));
    z-index: 1; pointer-events: none;
  }
  /* cu meniul deschis panoul e ivoriu plin: bara trebuie să redevină opacă */
  body.has-open-panel .nav { background: rgba(250, 248, 244, 0.98); }
  body.has-open-panel .nav__logo,
  body.has-open-panel .nav__logo .n { color: var(--ink); }
  body.has-open-panel .nav__toggle span { background: var(--ink); }
  body.has-open-panel .nav__logo { text-shadow: none; }

  /* Titlul e centrat pe înălțimea imaginii, dar împins puțin sub centru:
     padding-ul de sus mărește cutia de grid doar deasupra, deci place-items:
     center îl așază mai jos. Rămâne peste zona verde-închis din mijlocul
     spiralei, unde albul are contrast. */
  .filmhero__intro {
    height: 100svh; aspect-ratio: auto;
    font-size: clamp(2.5rem, 1.5rem + 5.2vw, 3.25rem);
    padding: 7rem 1rem 0;
  }
  /* paragraful coboară sub imagine, pe ivoriu — mare, e al doilea lucru pe
     care îl vezi după titlu, nu o notă de subsol */
  .filmhero__subhead {
    position: static; opacity: 1; transform: none;
    color: var(--ink);
    font-size: clamp(1.5rem, 1.05rem + 2.3vw, 2rem);
    font-weight: 600; line-height: 1.24; letter-spacing: -0.02em;
    max-width: 22ch; padding: 5rem 1.25rem 0;
  }
  /* cuvintele sunt aprinse una câte una doar în varianta cinematică; aici
     JS-ul nici nu rulează, deci trebuie să fie toate vizibile din start */
  .filmhero__word, .filmhero__clause { opacity: 1; }
  /* la fel titlul: animația lui pornește `paused` și e dezghețată de JS abia
     la evenimentul `playing` al videoclipului — care pe mobil nu vine
     niciodată, deci titlul ar rămâne invizibil */
  .filmhero__intro > span { animation: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .filmhero__intro > span { animation: none; }
  .filmhero__clause { opacity: 1; }
}

/* ---------- Barele peste film (doar /contact) — apple.com/supply-chain ----------
   Sus de tot, bara de navigație și banda „Contact" plutesc TRANSPARENTE peste
   videoclip, cu text alb. La scroll, nav-ul pleacă odată cu pagina (e static,
   ca la Apple) și rămâne doar banda, care se întunecă. Când filmul iese din
   cadru, banda revine la ivoriu peste conținutul normal al paginii.

   Totul e scopat pe html.has-film — clasă pusă doar pe /contact și doar când
   mișcarea e permisă. Celelalte pagini și varianta reduced-motion nu se ating,
   iar pe /filozofia banda rămâne exact cum era.
   -------------------------------------------------------------------------- */
.has-film .nav {
  /* OBLIGATORIU relative: .nav e static, iar pe un element static z-index-ul
     e inert. Cât timp filmul urca doar sub bandă nu se vedea, dar acum urcă și
     sub nav — iar videoclipul, venind mai târziu în DOM, s-ar picta PESTE bară
     și i-ar fura și clicurile. `relative` activează z-index: 100 fără s-o scoată
     din flow, deci bara tot pleacă la scroll. Aceeași stivuire pe care o are
     deja bara când e deschis un submeniu (unde devine fixed). */
  position: relative;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Halou discret pe textul mic: degradeul singur nu ajunge peste cadrul cu scara,
   iar întunecarea lui suplimentară ar fi apăsat prea tare cadrul cu cerneală,
   care e deja închis. Umbra costă zero contrast pe fundalurile întunecate. */
.has-film .nav__logo,
.has-film .nav__links a:not(.nav__lead-title) {
  text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}
.page-bar[data-bar="clear"] .page-bar__title {
  text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}
.has-film .nav__logo,
.has-film .nav__logo .n { color: #fff; }
.has-film .nav__links a:not(.nav__lead-title) { color: rgb(255 255 255 / 88%); }
.has-film .nav__links a:hover:not(.nav__lead-title),
.has-film .nav__links a[aria-current="page"] { color: #fff; }
.has-film .nav__toggle span { background: #fff; }

/* Cu un submeniu deschis, bara trebuie să redevină opacă: .nav__panel e ivoriu
   plin și fixat imediat sub ea, iar o bară transparentă lipită deasupra lui ar
   arăta ca o bucată ruptă din pagină. */
.has-film body.has-open-panel .nav {
  background: rgba(250, 248, 244, 0.98);
}
.has-film body.has-open-panel .nav__logo,
.has-film body.has-open-panel .nav__logo .n,
.has-film body.has-open-panel .nav__links a:hover:not(.nav__lead-title),
.has-film body.has-open-panel .nav__links a[aria-current="page"] { color: var(--ink); }
.has-film body.has-open-panel .nav__links a:not(.nav__lead-title) { color: var(--ink-soft); }
.has-film body.has-open-panel .nav__logo,
.has-film body.has-open-panel .nav__links a:not(.nav__lead-title) { text-shadow: none; }
.has-film body.has-open-panel .nav__toggle span { background: var(--ink); }

/* Cele trei stări ale benzii. Atributul îl scrie JS; fără el (hero ieșit din
   cadru, JS oprit) rămân regulile de bază, ivoriu cu text închis.
   NU sunt scopate pe .has-film: aceleași trei stări trebuie să funcționeze și
   pe mobil, unde hero-ul e o imagine statică, nu film. Condiția e prezența
   atributului data-bar, pe care JS-ul îl întreține în ambele variante. */
.page-bar {
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.page-bar[data-bar="clear"] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-bar[data-bar="solid"] {
  background: rgba(16, 24, 20, 0.72);
}
/* Hairline-ul alb NU merge pe toată lățimea ferestrei: la Apple linia ține exact
   cât conținutul barei. Peste film o mut de pe .page-bar (care e lată cât
   ecranul) pe .page-bar__inner — aceeași cutie ca .nav__inner, aliniată de
   syncPageBarOffset la logo, deci începe fix la „C"-ul din Contact și se termină
   la marginea din dreapta a butonului. Cum __inner n-are padding orizontal, iar
   padding-ul lui de jos e în interiorul cutiei, linia cade la aceeași înălțime
   ca înainte. Sub film revine bordura lată de pe .page-bar, ca pe restul site-ului. */
.page-bar[data-bar] { border-bottom-color: transparent; }
.page-bar[data-bar] .page-bar__inner {
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease;
}
.page-bar[data-bar="clear"] .page-bar__inner {
  border-bottom-color: rgb(255 255 255 / 14%);
}
.page-bar[data-bar="solid"] .page-bar__inner {
  border-bottom-color: rgb(255 255 255 / 10%);
}
.page-bar[data-bar="clear"] .page-bar__title,
.page-bar[data-bar="solid"] .page-bar__title { color: #fff; }
.page-bar[data-bar="clear"] .page-bar__title:hover,
.page-bar[data-bar="solid"] .page-bar__title:hover { color: #fff; }

/* Butonul rămâne plin și contrastant, ca pastila colorată a Apple — dar verdele
   pin pe cadrul de cerneală (tot verde-închis) ar dispărea, așa că peste film se
   inversează: pastilă ivorie cu text pin. Sub film revine la verde pe ivoriu. */
.page-bar[data-bar="clear"] .page-bar__btn,
.page-bar[data-bar="solid"] .page-bar__btn {
  background: rgba(250, 248, 244, 0.95);
  color: var(--pine);
}
.page-bar[data-bar="clear"] .page-bar__btn:hover,
.page-bar[data-bar="solid"] .page-bar__btn:hover { background: #fff; }

/* ---------- Repere (pagina Contact) ----------
   Refolosește mecanica de carusel .why (JS + săgeți). Cardul diferă: fără
   imagine, cu o cifră în locul titlului. Dimensiunile urmăresc caruselul
   Highlights de la Apple, măsurat direct în pagina lor: card 372x268,
   radius 28, gap 20, cifră 28px/600 în aceeași sans ca restul textului
   (nu în display serif — cifrele în Playfair citeau ca un font străin
   lipit peste identitatea Poppins). */
.why--stats .why__track {
  /* lățime fixă ca la Apple, nu fracțiune din container: cardul rămâne
     372px pe orice ecran, iar câte încap se decide singur */
  grid-auto-columns: 372px;
  gap: 20px;
  align-items: stretch;
}
.why--stats .why__card {
  height: auto;
  min-height: 268px;
  background: var(--ivory-deep);
  border-radius: 28px;
  cursor: default;
  padding: 2rem;
}
/* fără hover-ul de card apăsabil: reperele nu duc nicăieri */
.why--stats .why__card:hover { transform: none; }
.stat-card__icon {
  width: 2rem;
  height: 2rem;
  color: var(--pine);
  margin-bottom: 2.25rem;
  flex-shrink: 0;
}
.stat-card__num {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: 0.007em;
  color: var(--ink);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.stat-card__text {
  font-size: 1.0625rem;
  line-height: 1.47;
  color: var(--ink-soft);
  margin: 0;
}
/* titlul secțiunii: mai subțire și mai jos, ca să respire față de hero */
.why--stats { padding-top: calc(var(--space-section) * 1.15); }
.why--stats .why__head { margin-bottom: 2.5rem; }
.why--stats .why__head h2 {
  font-weight: 500;
  letter-spacing: -0.02em;
}
.why--stats .why__nav {
  margin-top: 1.75rem;
  justify-content: flex-end;
}

/* Pe telefon Apple micșorează cardul la 260x265 și scade tipografia: cifra
   21px, textul 17/25, padding 24. Card mai mic = se vede marginea celui
   următor, ceea ce spune „se trage lateral" fără niciun indiciu explicit. */
@media (max-width: 700px) {
  .why--stats .why__track {
    grid-auto-columns: 260px;
    gap: 16px;
  }
  .why--stats .why__card {
    /* înapoi la cardul de la Apple: 260x265, padding 24 */
    min-height: 265px;
    padding: 1.5rem;
    border-radius: 24px;
  }
  .stat-card__icon {
    width: 1.75rem; height: 1.75rem;
    /* cifra stă lipită de icon: grupul icon+cifră citește ca o unitate, iar
       spațiul mai mare rămâne între cifră și textul explicativ */
    margin-bottom: 0.75rem;
  }
  .stat-card__num { font-size: 1.1875rem; line-height: 1.4375rem; margin-bottom: 0.4375rem; }
  .stat-card__text { font-size: 0.875rem; line-height: 1.45; }
  /* titlul secțiunii, invers: mai mare pe telefon decât era */
  .why--stats .why__head h2 { font-size: clamp(2rem, 1.4rem + 3vw, 2.5rem); }
}


/* ---------- Cycle: „Ciclul Niksen" (pagina Contact) ----------
   Diagramă circulară cu două stări. Idle = cercul complet, cu toate cele
   cinci grupuri vizibile. Deschis = inelul se rotește până când grupul activ
   ajunge sus, grupul crește, restul dispare.

   Toată coregrafia stă aici, în CSS. JS-ul atinge doar trei lucruri:
   clasa .is-open pe panou, variabila --active pe inel, și textul din centru.
   Așa nu se pot desincroniza niciodată între ele. */

/* Intro-ul e mai mic decat un .lead obisnuit: aici greutatea vizuala trebuie
   sa stea pe titlu si pe roata, nu pe paragraful explicativ. */
/* Variabilele de timp stau pe sectiune, ca sa fie vizibile si pastilelor
   (care nu sunt descendenti ai inelului). */
.cycle {
  /* spring-ul Apple pentru bule: exponentul 2 trece de tinta si revine */
  --cy-spring: cubic-bezier(0.3, 2, 0.5, 1);
}

.cycle .section-head .lead {
  font-size: 1.1875rem;
  max-width: 42rem;
}

.cycle__panel {
  position: relative;
  background: var(--ivory-deep);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 4rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  /* containment: rotația inelului nu trebuie să scoată noduri în afara
     panoului în timpul tranziției */
  overflow: hidden;
}

/* --- Coloana stângă: controalele --- */

.cycle__controls { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }

.cycle__item { position: relative; }

.cycle__open {
  display: inline-flex; align-items: center; gap: 0.8125rem;
  padding: 0.9375rem 1.75rem 0.9375rem 1rem;
  border: 0; border-radius: 999px;
  background: rgba(26,26,24,0.05);
  color: var(--ink);
  font: inherit; font-size: 1.0625rem; font-weight: 600;
  text-align: left; cursor: pointer;
  /* Curba de „bulă": exponentul 2 din cubic-bezier trece de ținta și revine,
     de unde senzația de bulă care se așază. E curba lor, luată din
     overview.built.css: cubic-bezier(0.3, 2, 0.5, 1), 400ms, cu stagger de
     50ms per element (--aap-stagger-fast). */
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out),
              opacity 400ms var(--cy-spring) var(--cy-stagger, 0ms),
              transform 400ms var(--cy-spring) var(--cy-stagger, 0ms);
  /* transform-origin: bottom center, ca la ei — bula creste din marginea de
     jos, nu din centru; asa pare ca se ridica, nu ca se umfla pe loc */
  transform-origin: bottom center;
}

/* Bula: pornim de la mic si transparent si lasam o animatie (nu o tranzitie)
   sa aduca pastila la marime. Cu tranzitie, schimbarea de clasa si pornirea
   animatiei se bat cap in cap — masurat: pastilele sareau direct la scale 1,
   fara stagger. Animatia are propriul delay per element si nu depinde de
   momentul in care browserul observa schimbarea. */
.cycle__controls.is-popping .cycle__open {
  animation: cycle-pop 400ms var(--cy-spring) var(--cy-stagger, 0ms) both;
}

@keyframes cycle-pop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
.cycle__open:hover { background: rgba(26,26,24,0.09); color: var(--ink); }
.cycle__open:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }

.cycle__plus { display: block; flex: 0 0 auto; color: var(--ink-soft); }
.cycle__plus svg { display: block; width: 1.625rem; height: 1.625rem; }
.cycle__open:hover .cycle__plus { color: var(--pine); }

.cycle__label { display: block; }

/* Cardul de text al etapei. Închis are înălțime zero, deschis se desfășoară —
   folosim grid-template-rows 0fr/1fr ca să animăm spre înălțimea reală a
   conținutului fără să o măsurăm din JS. */
.cycle__content {
  display: grid; grid-template-rows: 0fr;
  background: rgba(26,26,24,0.05);
  border-radius: var(--radius);
  opacity: 0;
  transition: grid-template-rows 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.cycle__content > * { overflow: hidden; }
.cycle__body {
  margin: 0; padding: 0 1.875rem;
  font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft);
  max-width: 34rem;
  transition: padding 0.5s var(--ease-out);
}
.cycle__body strong { color: var(--ink); font-weight: 600; }

.cycle__item.is-active .cycle__content { grid-template-rows: 1fr; opacity: 1; }
.cycle__item.is-active .cycle__body { padding: 1.875rem; }

/* Pastila etapei active dispare — cardul de text îi ia locul, exact ca la
   Apple. Restul pastilelor rămân pe loc. */
.cycle__item.is-active .cycle__open {
  opacity: 0; transform: scale(0.94);
  /* scoasa din flux ca sa nu lase gol, dar si din calea mouse-ului:
     altfel acopera pastilele de sub ea si le blocheaza click-ul */
  position: absolute; left: 0; top: 0;
  pointer-events: none; visibility: hidden;
}

/* --- Paddlenav: apare doar în starea deschisă --- */

.cycle__nav {
  display: flex; flex-direction: column; gap: 0.5rem;
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.cycle__panel.is-open .cycle__nav { opacity: 1; pointer-events: auto; }

.cycle__paddle {
  width: 2.375rem; height: 2.375rem; display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(26,26,24,0.06); color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out),
              opacity 0.25s var(--ease-out);
}
.cycle__paddle svg { width: 1rem; height: 1rem; display: block; }
.cycle__paddle:hover:not(:disabled) { background: rgba(26,26,24,0.12); }
.cycle__paddle:active:not(:disabled) { transform: scale(0.92); }
/* capetele listei: nu e o bucla, deci la prima si la ultima etapa sageata
   corespunzatoare se stinge si nu mai raspunde nici la click, nici la tastatura */
.cycle__paddle:disabled { opacity: 0.25; cursor: default; }
.cycle__paddle:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }

/* --- Butonul de închidere --- */

.cycle__close {
  position: absolute; top: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(26,26,24,0.06); color: var(--ink-soft);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out), background 0.25s var(--ease-out),
              transform 0.25s var(--ease-out);
}
.cycle__close svg { width: 0.75rem; height: 0.75rem; display: block; }
.cycle__close:hover { background: rgba(26,26,24,0.12); }
.cycle__close:active { transform: scale(0.92); }
.cycle__close:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.cycle__panel.is-open .cycle__close { opacity: 1; pointer-events: auto; }

/* --- Roata --- */

.cycle__viewer {
  position: relative;
  /* lățime explicită: nu ne bazăm pe stretch-ul grid-ului, altfel
     aspect-ratio de mai jos poate colapsa pe ecrane late */
  width: min(100%, 40rem);
  justify-self: center;
  /* containerul de referinta pentru raza cercului (--r in cqw) */
  container-type: inline-size;
}

.cycle__ring {
  position: relative; aspect-ratio: 1; width: 100%;
  /* pozitia verticala a grupului deschis si distanta sagetilor fata de el */
  --gy: -5.75rem; --gap: 10.75rem;
  /* Raza trebuie sa fie o lungime absoluta: procentele dintr-un translate se
     raporteaza la elementul translatat (nodul de 3.5rem), nu la inel. O legam
     de latimea containerului cu cqw, cu fallback pentru browsere fara
     container queries. */
  --r: 12rem;
  --active: 0;        /* indexul grupului deschis; scris de JS */
  /* Sistemul de timp e luat din CSS-ul real al Apple (overview.built.css,
     secțiunea „Innovation. Everywhere."). Ideea centrală: ieșirea și intrarea
     NU au aceeași durată, iar intrarea așteaptă ca ieșirea să se termine.
     Așa nu se suprapun niciodată două stări — de aici senzația de „clean".
       exit  200ms  (--content-offset-o-duration-exit)
       enter 420ms  (--content-offset-o-duration-enter)
       delay 200ms  (--content-offset-o-delay) = exact cât durează ieșirea
     Curba e a lor: cubic-bezier(0.66, 0, 0.1, 1) — cea mai folosită în fișier. */
  --cy-ease: cubic-bezier(0.66, 0, 0.1, 1);
  --cy-exit: 200ms;
  --cy-enter: 420ms;
  --cy-delay: 200ms;
  /* deplasarea pe verticală la intrare/ieșire (--card-content-y-anim-amount) */
  --cy-shift: 1.25rem;
  transition: transform var(--cy-enter) var(--cy-ease);
}
@supports (width: 1cqw) {
  .cycle__ring { --r: 37cqw; }
}

/* 10 poziții x 36 grade. Rotim raza, apoi contra-rotim conținutul ca iconul
   să rămână drept — trucul standard de așezare pe cerc, fără trigonometrie
   în JS. --i vine inline din HTML, deci ordinea se schimbă fără CSS nou. */
.cycle__node,
.cycle__link {
  position: absolute; inset: 0; margin: auto;
  /* latime fixa, centrata pe pozitia de pe cerc: inset+margin:auto pune
     elementul in centrul inelului, iar transform-ul il duce pe circumferinta */
  width: 10.5rem; height: 6rem;
  display: flex; align-items: center; justify-content: center;
  transform:
    rotate(calc(var(--i) * 36deg))
    translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * -36deg));
  transition: opacity var(--cy-enter) var(--cy-ease),
              transform var(--cy-enter) var(--cy-ease);
  /* cascadă la reveal: nodurile se aprind în ordinea de pe cerc */
  transition-delay: calc(var(--i) * 0.045s);
}

/* Perechea de iconuri a unei etape: usor suprapuse si decalate pe verticala,
   ca la Apple — citesc ca un grup, nu ca doua pictograme alaturate. */
.cycle__node { color: var(--pine); gap: 0.375rem; }
.cycle__node svg { display: block; width: 4.5rem; height: 4.5rem; flex: 0 0 auto; }
.cycle__node svg:first-child { transform: translateY(-0.1875rem) rotate(-4deg); }
.cycle__node svg:last-child  { transform: translateY(0.1875rem) rotate(4deg); }

/* Sagetile sunt drepte, desenate cu varful in sus, si se rotesc ca sa arate
   spre elementul urmator de pe cerc. Pe pozitia --i tangenta in sens orar e
   la --i*36deg + 90deg. Iconurile se contra-rotesc (trebuie sa stea drepte),
   sagetile NU: orientarea lor E informatia. */
.cycle__link { color: var(--ink-mute); opacity: 0.55; }
/* Orientarea sagetii sta pe SVG, nu pe wrapper. Wrapper-ul se ocupa doar de
   pozitie; asa cele doua nu se mai amesteca si starea deschisa poate pune
   sageata vertical fara sa refaca tot lantul de rotatii. */
.cycle__link svg {
  display: block; width: 3.5rem; height: 3.5rem;
  transform: rotate(calc(var(--i) * 36deg + 90deg));
  /* fara tranzitie pe rotatie: intre tangenta (idle) si vertical (deschis)
     sunt pana la 126 de grade, iar interpolarea se vedea ca o rotire.
     Schimbarea are loc instant, in timp ce sageata e oricum invizibila. */
  transition: none;
}

/* Textul din centru */
.cycle__center {
  /* ancorat pe inel (care e patrat), nu pe viewer: altfel centrul textului
     nu coincide cu centrul geometric al cercului */
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(1.375rem, 1.05rem + 1.05vw, 2rem);
  line-height: 1.25; letter-spacing: -0.018em;
  color: var(--ink);
  pointer-events: none;
  /* eticheta are la Apple track propriu: --label-offset-o/t 300ms, delay 200ms */
  transition: opacity 300ms var(--cy-ease), transform 300ms var(--cy-ease);
}
/* JS-ul pune .is-swapping pe durata schimbarii textului: iese in jos, intra
   de jos. Asa citirea e „a alunecat altul in loc", nu „s-a stins si aprins". */
.cycle__center.is-swapping {
  opacity: 0;
  /* nu suprascrie pozitia: adauga deplasarea peste ea */
  --cy-ty: calc(var(--cy-shift) * 0.6);
  transition-duration: var(--cy-exit);
}

/* --- Starea deschisă: cercul se sparge --- */

/* Inelul sta pe loc in starea deschisa. Il roteam ca sa aduca grupul activ sus,
   dar la schimbarea de etapa rotatia tara dupa ea grupul si sagetile pe un arc
   larg (masurat: ~200px lateral), ceea ce se citea ca o miscare dezordonata.
   Acum grupul activ si sagetile se aseaza direct la pozitia finala, iar
   schimbarea intre etape e doar fade — nimic nu mai zboara prin ecran. */
.cycle__panel.is-open .cycle__ring { transform: none; }

/* Nodurile inactive dispar. Important: raman la pozitia centrala, NU se intorc
   pe cerc — altfel cel care tocmai a fost activ sare inapoi pe circumferinta in
   timp ce se stinge, ceea ce se vedea ca un salt lateral de ~170px. */
.cycle__panel.is-open .cycle__node,
.cycle__panel.is-open .cycle__link {
  opacity: 0;
  /* pozitia de „plecat": sub locul final. Cel care iese coboara spre ea,
     cel care intra urca din ea. */
  --cy-y: var(--cy-shift);
  transform: translateY(calc(var(--gy) + var(--cy-y))) scale(2.4);
}
.cycle__panel.is-open .cycle__link {
  transform: translateY(calc(var(--up, -13rem) + var(--cy-y))) scale(1.75);
  /* Iese rapid (200ms) si coboara putin, exact ca la Apple: continutul nu
     „se stinge pe loc", ci pleaca. Fara delay — ecranul trebuie sa fie liber
     inainte sa inceapa intrarea. */
  transition: opacity var(--cy-exit) var(--cy-ease),
              transform var(--cy-exit) var(--cy-ease);
  transition-delay: 0ms;
}

/* grupul activ rămâne, crește și se contra-rotește ca să stea drept
   indiferent de cât s-a rotit inelul sub el */
/* la scale 2.4 decalajul si rotatia din idle se citesc ca dezaliniere:
   in starea deschisa perechea sta dreapta si aerisita, ca la Apple */
/* Drepte cat timp panoul e deschis — si cele care se sting, nu doar cele
   active: altfel iconul care iese revine la decalajul de ±4deg din idle
   in timp ce e inca vizibil. */
.cycle__panel.is-open .cycle__node svg {
  transform: none;
  transition: none;
}
.cycle__panel.is-open .cycle__node.is-active { gap: 0.75rem; }

.cycle__panel.is-open .cycle__node.is-active {
  opacity: 1;
  /* Intra dupa ce iesirea s-a terminat (delay = durata iesirii), urcand usor
     din pozitia de start. Nu se mai suprapune cu ce pleaca. */
  transition: opacity var(--cy-enter) var(--cy-ease),
              transform var(--cy-enter) var(--cy-ease);
  transition-delay: var(--cy-delay);
  /* cutia nodului e 10.5x6rem; in starea deschisa o strangem pe inaltime la
     iconuri, ca sagetile de sus si de jos sa se poata apropia simetric */
  height: 4.5rem;
  /* pozitie fixa in inel, aceeasi pentru orice etapa: nu mai depinde nici de
     --i, nici de --active, deci la schimbarea etapei nu se mai deplaseaza */
  transform: translateY(calc(var(--gy) + var(--cy-y, 0rem))) scale(2.4);
}
.cycle__panel.is-open .cycle__node.is-active { z-index: 2; }

/* elementele active revin la pozitia finala (--cy-y: 0) */
.cycle__panel.is-open .cycle__node.is-active,
.cycle__panel.is-open .cycle__link.is-adjacent { --cy-y: 0rem; }

/* --up ramane setat si dupa ce sageata pierde .is-adjacent, ca sa se stinga
   acolo unde era, nu sa sara pe pozitia celeilalte */
.cycle__panel.is-open .cycle__link.is-after { --up: 11rem; }

/* săgețile vecine rămân: semnalul vizual că ciclul continuă dincolo de
   etapa deschisă */
/* In starea deschisa nu mai stau pe circumferinta: se aseaza pe axa verticala,
   deasupra si dedesubtul grupului, exact ca in referinta Apple. Contra-rotim
   inelul (--active * 72deg) ca sa ramana drepte, apoi le impingem pe verticala.
   Sageata dinainte (--i impar, inaintea grupului) urca; cea de dupa coboara. */
.cycle__panel.is-open .cycle__link.is-adjacent {
  opacity: 0.55;
  /* Ordinea conteaza: intai anulam rotatia inelului (--active * 72deg), abia
     apoi translatam pe verticala. Invers, contra-rotatia ar roti chiar axa
     translatiei si sagetile ar iesi in diagonala. */
  /* cutia de 10.5rem e mult mai mare decat desenul; o stramtam la dimensiunea
     sagetii, ca distanta fata de grup sa iasa aceeasi la toate etapele */
  width: 4rem; height: 4rem;
  /* Intra ultimele: delay-ul de baza + un pas in plus (--aap-content-delay-slow
     = 150ms la Apple). Asa se citeste cascada grup -> titlu -> sageti. */
  transition: opacity var(--cy-enter) var(--cy-ease),
              transform var(--cy-enter) var(--cy-ease);
  transition-delay: calc(var(--cy-delay) + 150ms);
  /* Ambele arata in sus, ca la Apple: cea de sus duce ciclul mai departe, cea
     de jos aduce etapa anterioara in etapa curenta. Contra-rotim inelul intai
     (ca translatia sa fie pe verticala reala) si inca o data la final (ca
     sageata sa ramana dreapta indiferent cat s-a rotit inelul sub ea). */
  /* Ansamblul nu e simetric fata de --gy: sub grup mai sta si titlul, deci
     sageata de jos are nevoie de mai mult spatiu decat cea de sus. De aceea
     doua distante separate, nu un --gap oglindit. */
  transform: translateY(calc(var(--up) + var(--cy-y, 0rem))) scale(1.75);
}
/* Varful in sus. Sageata sufera doua rotatii mostenite: inelul (-72*active)
   si wrapper-ul, care se roteste cu +72*active ca sa poata translata pe
   verticala ecranului. Suma lor e zero, deci SVG-ul trebuie doar sa NU se
   mai roteasca deloc — tangenta din starea idle se anuleaza. */
/* Verticale cat timp panoul e deschis — inclusiv sagetile care tocmai au
   pierdut .is-adjacent si se sting. Altfel sar inapoi pe tangenta (masurat:
   126deg si -162deg) cat sunt inca vizibile, si exact asta se vedea ca rotire. */
.cycle__panel.is-open .cycle__link svg {
  transform: none;
}
/* sus: deasupra grupului. jos: sub titlu. */
.cycle__panel.is-open .cycle__link.is-adjacent:not(.is-after) { --up: -13rem; }
.cycle__panel.is-open .cycle__link.is-adjacent.is-after { --up: 11rem; }

/* centrul se dă la o parte ca să nu se ciocnească de grupul mărit */
/* Titlul urmeaza grupul de iconuri. Grupul sta la translateY(42%) pe raza,
   adica in jurul lui -0.58r fata de mijloc; asezam titlul imediat sub el,
   printr-un translate fata de centrul inelului — nu cu padding procentual,
   care s-ar raporta la latura patratului si ar lasa un gol mare. */
.cycle__panel.is-open .cycle__center {
  transform: translateY(calc(4.9rem + var(--cy-ty, 0rem)));
}

/* hover pe o pastilă în idle: nodul corespunzător se aprinde — preview
   înainte de click */
.cycle__panel:not(.is-open) .cycle__node.is-preview {
  transform:
    rotate(calc(var(--i) * 36deg))
    translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * -36deg))
    scale(1.18);
  transition-delay: 0s;
}

/* --- Nota de sub panou --- */

.cycle__note {
  margin: var(--space-block) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 0.875rem;
}

/* --- Desktop: două coloane --- */

@media (min-width: 861px) {
  .cycle__panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  /* lăsăm loc la stânga pentru paddlenav */
  .cycle__side { position: relative; padding-left: 3rem; }
}

/* --- Tabletă: o coloană, roata deasupra --- */

@media (max-width: 860px) {
  .cycle__viewer { width: min(100%, 30rem); order: -1; }
  .cycle__side { position: relative; padding-left: 2.75rem; }
}

/* --- Mobil: exact ca la Apple ----------------------------------------
   La ei, sub 734px, `.control-group` trece pe `flex-direction: row`: roata
   ramane sus, iar pastilele devin o banda orizontala cu scroll-snap, care
   pluteste peste continut ca o notificare (backdrop-filter: blur(7px) +
   fundal translucid). Valorile de mai jos sunt luate din CSS-ul lor:
     --aap-contracted-height: 56px      inaltimea pastilei
     --product-viewer-ref-border-radius: 28px
     --aap-blur: 7px
     --aap-bubble-gap: 16px
   Cardul de text apare sub banda, nu in interiorul pastilei. */

@media (max-width: 680px) {
  /* Panoul e full-bleed, deci padding-ul de jos al sectiunii ramanea vizibil
     ca o banda de alta nuanta sub el (masurat: 50px de fundal de pagina).
     Sectiunea nu mai are padding jos pe mobil — panoul ajunge la marginea ei. */
  .cycle { padding-bottom: 0; }

  .cycle__panel {
    /* Full-bleed fara radius, ca la Apple pe mobil. Containerul e
       width: min(100% - 2.5rem, 62rem) centrat, deci sub 62rem lasa exact
       1.25rem pe fiecare parte — atat scoatem inapoi. (translateX(-50%) nu
       merge: panoul e grid item si iesea decalat, masurat left:195px.) */
    border-radius: 0;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 1.75rem 0 1.5rem;
    /* o singura coloana, si — important — coloane care nu pot creste peste
       latimea panoului: fara minmax(0,...) continutul lat (banda de pastile)
       umfla grid-ul si totul iese din ecran */
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    /* clip doar pe orizontala: sagetile de sus/jos ale roatii trebuie sa se
       vada, dar banda nu are voie sa iasa lateral din panou */
    overflow-x: clip;
    overflow-y: visible;
  }

  /* roata ramane vizibila, mai mica, deasupra controalelor */
  .cycle__viewer {
    display: block;
    width: min(100%, 17.5rem);
    order: -1;
    margin: 0 auto 1.25rem;
    justify-self: center;
  }
  .cycle__ring {
    --r: 36cqw;
    /* Roata e ~280px pe mobil fata de ~480px pe desktop. Pozitiile starii
       deschise erau in rem fixe, deci ieseau proportional prea departe:
       le scalam odata cu roata. */
    --gy: -3.25rem;
    --cy-shift: 0.875rem;
  }
  .cycle__node svg { width: 2.5rem; height: 2.5rem; }
  .cycle__link svg { width: 2rem; height: 2rem; }
  .cycle__node, .cycle__link { width: 6rem; height: 3.5rem; }
  .cycle__center { font-size: 1.0625rem; }

  /* grupul si titlul, mai stranse — panoul e mult mai ingust */
  .cycle__panel.is-open .cycle__node.is-active {
    height: 3rem;
    transform: translateY(calc(var(--gy) + var(--cy-y, 0rem))) scale(1.55);
  }
  .cycle__panel.is-open .cycle__center { transform: translateY(2.5rem); }
  .cycle__panel.is-open .cycle__link.is-adjacent { width: 2.5rem; height: 2.5rem; }
  .cycle__panel.is-open .cycle__link.is-adjacent:not(.is-after) { --up: -7.25rem; }
  .cycle__panel.is-open .cycle__link.is-adjacent.is-after { --up: 6rem; }

  /* --- Banda orizontala de pastile --- */
  .cycle__side { padding-left: 0; min-width: 0; max-width: 100%; }
  .cycle__controls {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;                 /* --aap-bubble-gap, scalat */
    overflow-x: auto;
    scroll-snap-type: x mandatory;  /* la fel ca la Apple */
    scroll-padding-left: 1.25rem;
    /* panoul are deja padding orizontal 0, deci banda ajunge singura pana la
       marginile lui — fara margini negative, care umflau grid-ul */
    margin: 0;
    padding: 0.25rem 1.25rem 0.75rem;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cycle__controls::-webkit-scrollbar { display: none; }

  /* position: static anuleaza regula generala: altfel <li>-ul devine ancora
     cardului absolut, iar cardul iese lat cat pastila (masurat: 116px) si se
     duce cu banda la scroll. Ancora trebuie sa fie .cycle__side. */
  .cycle__item { flex: 0 0 auto; scroll-snap-align: center; position: static; }

  /* pastila „liquid": translucida, cu blur in spate, ca o notificare iOS */
  .cycle__open {
    min-height: 3.5rem;              /* --aap-contracted-height: 56px */
    border-radius: 28px;             /* --product-viewer-ref-border-radius */
    padding: 0.875rem 1.375rem 0.875rem 0.875rem;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);      /* --aap-blur: 7px */
    box-shadow: inset 0 0 0.5px 0 rgba(0, 0, 0, 0.11);
    white-space: nowrap;
    transition: background 0.25s linear, color 0.25s linear,
                transform 0.25s var(--cy-ease);
  }
  .cycle__open:active { transform: scale(0.97); }

  /* pastila activa ramane in banda si se coloreaza — nu dispare ca pe desktop */
  .cycle__item.is-active .cycle__open {
    opacity: 1; transform: none; position: static; pointer-events: auto;
    visibility: visible;
    background: var(--pine); color: #fff;
    box-shadow: none;
  }
  .cycle__item.is-active .cycle__plus { color: #fff; }
  .cycle__plus svg { width: 1.5rem; height: 1.5rem; }

  /* --- Cardul de text: sub banda, pe toata latimea --- */
  /* .cycle__side are doua randuri: banda, apoi cardul. Cardul e ancorat de
     .cycle__side (nu de <li>, care s-ar duce cu scroll-ul), dar in randul 2,
     deci panoul creste odata cu el. */
  .cycle__side { position: relative; display: grid; grid-template-rows: auto auto; }
  /* Ancorat sub banda, nu sub .cycle__side: side-ul include deja spatiul
     rezervat cardului, deci un top:100% l-ar impinge exact sub el. */
  .cycle__item .cycle__content {
    position: absolute; left: 1.25rem; right: 1.25rem;
    top: var(--cy-strip-h, 4.75rem);
    width: auto; z-index: 1;
  }
  /* Cand sunt vizibile sagetile laterale, cardul se retrage ca sa le lase loc
     — la Apple ‹ si › stau langa card, nu peste text. */
  .cycle__panel.is-open .cycle__item .cycle__content {
    left: 3.75rem; right: 3.75rem;
  }
  /* randul 2 primeste inaltimea cardului deschis, printr-un element fantoma */
  .cycle__side::after {
    content: ''; display: block;
    height: var(--cy-card-h, 0px);
    transition: height var(--cy-enter) var(--cy-ease);
  }
  .cycle__body { font-size: 1rem; }
  .cycle__item.is-active .cycle__body { padding: 1.25rem; }
  /* Numele etapei ramane si pe mobil, bold la inceputul paragrafului — la
     Apple e la fel („Make. Suppliers help us…"), iar cand banda de pastile
     dispare e singurul loc unde mai scrie in ce etapa esti. */

  /* --- Starea deschisa: banda dispare, raman × si sagetile --------------
     La Apple, `.tour-engaged .control-item-label { opacity: 0 }` — pastilele
     se sting cand o etapa e deschisa; navigarea se face din paddlenav si ×.
     Le tinem in DOM (pentru screen-reader si focus) dar scoase din calea
     mouse-ului, ca sa nu ramana un rand de butoane invizibile clicabile. */
  .cycle__panel.is-open .cycle__item:not(.is-active) .cycle__open {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cy-exit) var(--cy-ease);
  }
  .cycle__panel.is-open .cycle__item.is-active .cycle__open {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
  }
  /* banda se stinge si nu mai ocupa loc: cardul urca sub roata */
  .cycle__panel.is-open .cycle__controls {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    transition: height var(--cy-exit) var(--cy-ease);
  }

  /* × sticky: te urmareste cat timp esti in dreptul rotii, dar se opreste
     cand ajunge la card — la Apple e acelasi mecanism (position: sticky cu
     margin-bottom cat inaltimea cardului). */
  /* ×-ul sta ancorat in coltul dreapta-sus al panoului. Sticky pe un element
     din flux nu functiona: roata are order:-1 si il impingea in dreptul
     cardului (masurat: pornea la 305px). Ramane absolut, iar JS-ul ii da
     clasa .is-stuck cand marginea de sus a panoului trece de bara — atunci
     devine fixed si coboara odata cu scroll-ul. */
  .cycle__close {
    display: grid;
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: auto;
    width: 2.75rem; height: 2.75rem;
    background: rgba(26, 26, 24, 0.08);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    z-index: 3;
  }
  /* cat timp panoul e sub bara, ×-ul coboara cu ecranul */
  .cycle__panel.is-stuck .cycle__close {
    position: fixed;
    top: calc(var(--bar-h, 53px) + 0.75rem);
  }
  .cycle__close svg { width: 1rem; height: 1rem; }

  /* Sagetile: cercuri de 44px, ca la Apple (paddlenav-button), lipite de
     marginea din dreapta a ecranului — pe verticala, in dreptul cardului. */
  /* Sagetile stau pe laterale, lipite de marginile panoului si centrate pe
     verticala fata de card — exact ca la Apple, unde ‹ si › sunt in stanga si
     in dreapta continutului, nu gramada intr-un colt. */
  .cycle__nav {
    display: block;
    position: absolute;
    left: 0; right: 0;
    top: var(--cy-nav-y, 50%);
    bottom: auto;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .cycle__nav .cycle__paddle { position: absolute; pointer-events: auto; }
  /* Semicercuri lipite de marginile ecranului: jumatatea din afara e taiata
     de marginea panoului, deci raman doar arcele dinspre interior. */
  .cycle__paddle[data-cycle-step="-1"] {
    left: 0;
    border-radius: 0 1.75rem 1.75rem 0;
  }
  .cycle__paddle[data-cycle-step="1"] {
    right: 0;
    border-radius: 1.75rem 0 0 1.75rem;
  }
  .cycle__paddle {
    /* semicerc: ingust si inalt, cu doar doua colturi rotunjite (setate mai
       sus, per directie). Latimea = raza, ca arcul sa iasa exact semicerc. */
    width: 1.75rem; height: 3.5rem;
    /* glifa se centreaza in semicerc, nu in cutia dreptunghiulara */
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    background: rgba(26, 26, 24, 0.08);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  .cycle__paddle svg { width: 1rem; height: 1rem; }
  /* Sagetile mobile arata stanga/dreapta. Cele doua SVG-uri sunt chevroni
     desenati in sus (prev) si in jos (next), deci rotatiile au semne opuse —
     acelasi semn le facea pe amandoua sa arate spre stanga. */
  .cycle__paddle[data-cycle-step="-1"] svg { transform: rotate(-90deg); }
  .cycle__paddle[data-cycle-step="1"] svg { transform: rotate(-90deg); }
  /* opacitatea lor pentru dezactivat: --sk-link-disabled-opacity: 0.42 */
  .cycle__paddle:disabled { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  .cycle__ring,
  .cycle__node,
  .cycle__link,
  .cycle__center,
  .cycle__content,
  .cycle__body,
  .cycle__open,
  .cycle__plus { transition: none; }
  /* fără rotații și fără scale: comutăm doar vizibilitatea */
  .cycle__panel.is-open .cycle__ring { transform: none; }
  .cycle__panel.is-open .cycle__node.is-active {
    transform: translateY(var(--gy)) scale(2.4);
  }
  /* fara miscare, dar aceeasi asezare ca in starea normala */
  .cycle__panel.is-open .cycle__link.is-adjacent svg { transform: none; }
  .cycle__link svg,
  .cycle__node svg { transition: none; }
  /* fara bule: pastilele sunt pur si simplu acolo */
  .cycle__controls.is-popping .cycle__open { animation: none; }
  .cycle__panel:not(.is-open) .cycle__node.is-preview { transform:
      rotate(calc(var(--i) * 36deg))
      translateY(calc(var(--r) * -1))
      rotate(calc(var(--i) * -36deg)); }
}

/* ---------- Formular de contact (ritm apple.com/supply-chain) ----------
   Un singur bloc, două coloane: titlu editorial stânga, câmpuri dreapta.
   Etichetele plutesc (float labels) — label-ul stă DUPĂ input în DOM
   tocmai ca să funcționeze `:placeholder-shown + label`; de aceea fiecare
   input are `placeholder=" "` (un spațiu), nu un placeholder real. */
.contactform__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.contactform__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.5rem + 3.1vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.contactform__intro .lead { margin-top: 1.5rem; max-width: 30ch; }

.cform { max-width: 34rem; }

.cfield { position: relative; margin-bottom: 0.875rem; }
.cfield input,
.cfield textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* padding simetric — textul stă exact la mijlocul înălțimii căsuței */
  padding: 1.05rem 1.1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cfield textarea { min-height: 8.5rem; resize: vertical; display: block; }
.cfield label {
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-mute);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.24s var(--ease-out);
}
/* La textarea eticheta stă pe primul rând, nu la mijlocul zonei de scris. */
.cfield--area label { top: 1.05rem; }
.cfield input:focus,
.cfield textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine);
}
/* eticheta urcă la focus ȘI rămâne sus cât timp câmpul are text */
.cfield input:focus + label,
.cfield input:not(:placeholder-shown) + label,
.cfield textarea:focus + label,
.cfield textarea:not(:placeholder-shown) + label {
  opacity: 0;
  transform: translateY(-0.35rem);
}
.cfield input:focus + label,
.cfield textarea:focus + label { color: var(--pine); }

/* Selectul „Despre ce ne scrii" arată exact ca celelalte căsuțe: aceeași
   bordură, aceeași etichetă plutitoare. Eticheta stă permanent sus (un select
   are mereu o valoare, deci n-are stare „gol"), iar săgeata e a noastră —
   `appearance: none` scoate widget-ul nativ, dar rotița de pe mobil rămâne. */
.cfield--select select {
  width: 100%;
  font: inherit;
  line-height: 1.4;
  color: var(--ink);
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 2.75rem 1.05rem 1.1rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cfield--select select:focus {
  outline: none;
  background: #fff;
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine);
}
/* Lista nativă a unui <select> e desenată de sistemul de operare: banda de
   selecție rămâne albastră indiferent ce scriem pe `option`. De aceea pe
   desktop ascundem select-ul și desenăm lista noastră (.cselect), care poate
   fi verde. Select-ul rămâne în DOM: el trimite valoarea și rămâne singura
   variantă pe mobil, unde rotița nativă e mai bună decât orice listă proprie. */
/* când lista proprie e activă, select-ul nativ dispare vizual dar rămâne
   în formular (trimite valoarea) — de aceea opacity, nu display:none */
.cfield--select:has(.cselect:not([hidden])) select { opacity: 0; pointer-events: none; }
.cfield--select:has(.cselect:not([hidden])) > .cfield__caret { display: none; }
.cselect { position: absolute; inset: 0; }
.cselect__trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cselect__trigger:hover { border-color: var(--ink-mute); }
.cselect__trigger:focus-visible,
.cselect.is-open .cselect__trigger {
  outline: none;
  background: #fff;
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine);
}
.cselect__caret {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--ink-mute);
  transition: transform 0.24s var(--ease-out), color 0.24s ease;
}
.cselect__caret svg { display: block; width: 100%; height: 100%; }
.cselect.is-open .cselect__caret { transform: rotate(180deg); color: var(--pine); }

.cselect__list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(26,26,24,0.06), 0 18px 40px -12px rgba(26,26,24,0.28);
  transform-origin: top center;
  animation: cselectIn 0.2s var(--ease-out);
}
@keyframes cselectIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.cselect__option {
  padding: 0.7rem 0.85rem;
  border-radius: calc(var(--radius) - 8px);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
/* aici e verdele cerut, în locul benzii albastre de sistem */
.cselect__option:hover,
.cselect__option.is-active { background: var(--pine-tint); color: var(--pine); }
.cselect__option[aria-selected="true"] { background: var(--pine); color: var(--ivory); font-weight: 500; }
.cselect__option[aria-selected="true"]:hover,
.cselect__option[aria-selected="true"].is-active { background: var(--pine-deep); color: var(--ivory); }

/* starea de eroare se aplică și butonului nostru */
.cfield.has-error .cselect__trigger {
  border-color: #D0342C;
  box-shadow: 0 0 0 1px #D0342C;
  background: #FDF0EF;
  color: #D0342C;
}
.cfield.has-error .cselect__caret { color: #D0342C; }
.cfield.has-error .cselect.is-open .cselect__trigger {
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine);
  background: #fff;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .cselect__list { animation: none; }
  .cselect__trigger, .cselect__caret, .cselect__option { transition: none; }
}
.cfield--select select:hover { border-color: var(--ink-mute); }
/* Selectul își arată singur valoarea, deci eticheta vizuală ar dubla-o.
   O ascundem vizual, dar rămâne pentru cititoarele de ecran. */
.cfield--select label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.cfield__caret {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  color: var(--ink-mute);
  pointer-events: none;
  transition: transform 0.24s var(--ease-out), color 0.24s ease;
}
.cfield__caret svg { display: block; width: 100%; height: 100%; }
.cfield--select select:focus ~ .cfield__caret { color: var(--pine); transform: rotate(180deg); }

.cfield__err {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: #D0342C;
  margin: 0.4rem 0 0 0.25rem;
}
/* cerculețul cu „!" din fața mesajului — desenat în CSS, fără SVG în plus */
.cfield__err::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}
/* Starea de eroare: chenar + fundal roz pal + textul scris tot roșu, exact
   ca pe apple.com/supply-chain. Se aplică și selectului. */
.cfield.has-error input,
.cfield.has-error textarea,
.cfield.has-error select {
  border-color: #D0342C;
  box-shadow: 0 0 0 1px #D0342C;
  background: #FDF0EF;
  color: #D0342C;
}
.cfield.has-error label { color: #D0342C; }
.cfield.has-error .cfield__caret { color: #D0342C; }
.cfield.has-error .cfield__err { display: flex; }
/* focus-ul verde e mai puternic decât roșul: dacă te-ai întors în câmp,
   starea curentă e „scrii acum", nu „ai greșit înainte" */
.cfield.has-error input:focus,
.cfield.has-error textarea:focus,
.cfield.has-error select:focus {
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine);
  background: #fff;
  color: var(--ink);
}
.cfield.is-shaking { animation: cshake 0.36s var(--ease-out); }
@keyframes cshake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-6px); }
  55% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}

.cform__submit {
  position: relative;
  margin-top: 1.25rem;
  padding: 0.65rem 1.6rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ivory);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.2s ease;
}
.cform__submit:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(26,26,24,0.2), 0 16px 36px -10px rgba(26,26,24,0.45);
}
.cform__submit:active { transform: translateY(0); }
.cform__submit:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }

.cform__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(250,248,244,0.3);
  border-top-color: var(--ivory);
  border-radius: 50%;
  opacity: 0;
  animation: cspin 0.7s linear infinite;
}
@keyframes cspin { to { transform: rotate(360deg); } }
.cform__submit.is-sending { pointer-events: none; }
.cform__submit.is-sending .cform__submit-label { opacity: 0; }
.cform__submit.is-sending .cform__spinner { opacity: 1; }

@media (max-width: 900px) {
  .contactform__grid { grid-template-columns: 1fr; }
  .cform { max-width: none; }
  .contactform__intro .lead { max-width: none; }
}


@media (prefers-reduced-motion: reduce) {
  .cfield label,
  .cfield__caret,
  .cform__submit { transition: none; }
  .cfield.is-shaking { animation: none; }
  .cform__spinner { animation-duration: 2s; }
}


/* ---------- Valorile noastre (contact) — după „Our values lead the way" de la Apple ----------
   Reia scheletul .why, deci moștenește caruselul din main.js fără cod nou.
   Trei lucruri se rescriu față de .why: înălțimea fixă de 29rem (cardul Apple
   e mai scund și crește după conținut), cursorul de card-modal, și hover-ul.
   Banda tintă e pe secțiune, iar .why__track îi anulează propriul full-bleed:
   altfel cele două `margin-inline: calc(50% - 50vw)` s-ar aduna și caruselul
   ar ieși din ecran. */
.why--values { background: var(--ivory-deep); }
.why--values .why__track {
  /* lățime fixă, ca la Apple: cardul rămâne 285px, câte încap se decide singur */
  grid-auto-columns: 285px;
  gap: 20px;
  /* banda de culoare vine de la secțiune; track-ul iese doar cât containerul,
     nu încă o dată peste el */
  margin-inline: calc(50% - 50vw + 1.25rem);
  padding-inline: max(0rem, calc(50vw - 50% - 1.25rem));
}
.why--values .why__card {
  height: auto;
  min-height: 300px;
  background: #fff;
  border-radius: 18px;
  padding: 1.75rem;
  cursor: default;
}
/* cardul nu e apăsabil în întregime — linkul din el duce la pagina valorii */
.why--values .why__card:hover { transform: none; }
.vcard__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink);
  margin-bottom: 2rem;
  flex-shrink: 0;
}
.why--values .why__card h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  /* global: h1..h4 primesc text-wrap: balance, care rupe prost titlurile scurte */
  text-wrap: wrap;
  max-width: none;
}
.vcard__text {
  font-size: 1.0625rem;
  line-height: 1.47;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  /* global: p { max-width: 62ch } ar strânge textul mai îngust decât cardul */
  max-width: none;
}
/* linkul se lipește de baza cardului, deci rândul de „Află mai multe" e
   aliniat între carduri chiar dacă titlul curge pe două rânduri */
.vcard__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
  font-size: 1rem;
  color: var(--pine);
  text-decoration: none;
}
.vcard__link svg {
  width: 0.6875rem;
  height: 0.6875rem;
  display: block;
  transition: transform 0.25s var(--ease-out);
}
.vcard__link:hover { text-decoration: underline; }
.vcard__link:hover svg { transform: translateX(2px); }
.why--values .why__head { margin-bottom: 2.5rem; }
.why--values .why__head h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.why--values .why__nav { margin-top: 1.75rem; }

@media (max-width: 700px) {
  .why--values .why__track {
    grid-auto-columns: 260px;
    gap: 16px;
  }
  .why--values .why__card {
    min-height: 280px;
    padding: 1.5rem;
    border-radius: 16px;
  }
  .vcard__icon { width: 2rem; height: 2rem; margin-bottom: 1.25rem; }
  .why--values .why__card h3 { font-size: 1.3125rem; margin-bottom: 0.5rem; }
  .vcard__text { font-size: 0.9375rem; margin-bottom: 1rem; }
  .vcard__link { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vcard__link svg { transition: none; }
}

/* Fiind ultima din <main>, secțiunea primește padding-bottom de secțiune
   întreagă (regula de la linia 208). Pe o bandă colorată golul se vede ca
   atare, nu ca respirație — se scurtează la jumătate. */
main > .why--values.section:last-child { padding-bottom: calc(var(--space-section) / 2); }