/* Conexa Remote marketing site
   O singură familie (Poppins, ca în fișele de brand: geometric, rotund, cald).
   Paletă: navy / frunză / lămâie. Vezi ../../DESIGN.md pentru roluri și contraste;
   sursa vizuală e în assets/img/brand/. Galbenul e ACCENT, legat de adresa de 9 cifre. */

:root {
  /* ── Paleta de brand, canonică ─────────────────────────────────────────── */
  --navy: oklch(0.181 0.033 257);        /* #081220 — pământul: hero, antet, footer */
  --navy-2: oklch(0.223 0.036 252);      /* #0D1B2A — panouri pe navy: mock, carduri */
  --leaf: oklch(0.319 0.047 160);        /* #1B3A2A — încrederea: banda de securitate */
  --leaf-mid: oklch(0.501 0.090 135);    /* #4C6F39 — secundarul: iconițe, borduri */
  --lemon-leaf: oklch(0.807 0.147 131);  /* #9ED36A — acțiunea: buton primar, accent */
  --lemon: oklch(0.840 0.160 89);        /* #F4C430 — identitatea: adresa de 9 cifre */
  --pulp: oklch(0.979 0.031 93);         /* #FFF8E1 — hârtia caldă */

  /* ── Scara de neutre (fișa 14, N50…N900) — virată spre navy, nu gri generic ─ */
  /* Scara întreagă e declarată intenționat: e o riglă, nu un set de tokeni ad-hoc.
     Treptele nefolosite azi există ca să nu se inventeze valori noi mâine. */
  --n900: oklch(0.181 0.033 257);   /* #081220 */
  --n800: oklch(0.240 0.031 255);   /* #15202E */
  --n700: oklch(0.306 0.035 257);   /* #243041 */
  --n600: oklch(0.387 0.033 257);   /* #394556 */
  --n500: oklch(0.484 0.029 252);   /* #53606F */
  --n400: oklch(0.565 0.027 254);   /* #6B7786 */
  --n300: oklch(0.737 0.018 251);   /* #A2ABB5 */
  --n200: oklch(0.877 0.012 252);   /* #D1D7DE */
  --n100: oklch(0.941 0.006 240);   /* #E8ECEF */
  --n50:  oklch(0.972 0.003 248);   /* #F4F6F8 */

  /* ── Suprafețe (fișa 14 § 4) ────────────────────────────────────────────── */
  --surface-1: oklch(0.994 0.002 130);  /* bază: fișa spune #FFFFFF; aici alb virat spre verde */
  --surface-2: var(--pulp);             /* ridicat, cald */
  --surface-3: oklch(0.977 0.006 129);  /* #F6F8F4 — fundalul paginii */
  --surface-4: oklch(0.956 0.009 135);  /* #EEF2EC — strat */
  --surface-5: oklch(0.925 0.011 137);  /* #E3E8E1 — puternic */
  --surface-dark: var(--navy);          /* carcasa aplicației */

  /* ── Suprafețe închise, treptele intermediare ───────────────────────────── */
  --surface-dark-1: var(--n800);        /* bare: antetul și piciorul mock-ului */
  --surface-dark-2: oklch(0.272 0.033 256);  /* ridicat: element activ, câmp */

  /* ── Borduri (fișa 14 § 4) — virate spre verde, spre deosebire de text ──── */
  --border-subtle: oklch(0.956 0.009 135);   /* #EEF2EC — 1.06 pe pagină: separator în card, nu linie */
  --border-default: oklch(0.925 0.011 137);  /* #E3E8E1 — 1.16: la fel, prea slab ca linie de sine stătătoare */
  --border-medium: oklch(0.863 0.014 156);   /* #CBD5CE */
  --border-strong: oklch(0.745 0.037 147);   /* #9EB39F */
  --border-focus: var(--lemon-leaf);         /* #9ED36A */
  --surface-line-dark: oklch(0.342 0.049 154); /* #23402D — bordura pe închis */

  /* ── Text pe închis (toate AA pe navy ȘI pe navy-2) ────────────────────── */
  --on-dark: var(--pulp);                     /* principal — 17.70 / 16.18 */
  --on-dark-2: oklch(0.800 0.018 120);        /* secundar  — 10.10 /  9.23 */
  --on-dark-3: oklch(0.640 0.016 240);        /* stins     —  5.60 /  5.12 */

  /* ── Suprafețe deschise, numele vechi ──────────────────────────────────── */
  --paper: var(--surface-3);
  --paper-2: var(--surface-2);

  /* ── Text pe deschis ───────────────────────────────────────────────────── */
  --ink: var(--n900);                  /* 18.79 pe alb */
  --ink-2: var(--n600);                /*  9.10 */
  --muted: var(--n500);                /*  6.01 — fișa ar zice N400, dar acela dă 4.26 pe crem */

  /* ── Borduri, numele vechi ─────────────────────────────────────────────── */
  --line: var(--border-medium);        /* 1.41 pe pagină — default și subtle sunt sub 1.2, invizibile */
  --line-strong: var(--border-strong); /* 2.09 */

  /* ── Stări semantice, virate spre paletă (nu roșu/verde generic) ───────── */
  --success: oklch(0.560 0.140 150);
  --success-tint: oklch(0.955 0.030 150);
  --success-ink: oklch(0.400 0.100 155);      /* 7.77 pe tint */
  --warning: oklch(0.800 0.150 80);
  --warning-tint: oklch(0.965 0.045 90);
  --warning-ink: oklch(0.470 0.105 72);       /* 6.30 pe tint */
  --danger: oklch(0.560 0.180 26);            /* 4.80 cu text pulp — buton „End session" */
  --danger-tint: oklch(0.955 0.028 25);
  --danger-ink: oklch(0.430 0.150 27);        /* 7.55 pe tint */

  /* ── Nume vechi, păstrate ca alias ca să nu se rescrie 200 de utilizări ── */
  --green: var(--leaf-mid);
  --green-bright: var(--lemon-leaf);
  --green-deep: var(--leaf);
  --green-ink: var(--navy);
  --green-tint: oklch(0.972 0.017 120);
  --green-tint-2: oklch(0.925 0.045 128);
  --on-green: var(--pulp);
  --amber: var(--lemon);
  --amber-ink: var(--warning-ink);
  --red: var(--danger);

  --font: 'Poppins', 'Poppins Fallback', "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.84rem, 0.80rem + 0.2vw, 0.92rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
  --step-4: clamp(2.8rem, 2rem + 4vw, 5.2rem);

  /* ── Scara de spațiere (fișa 13): multipli de 4px, ca în „Spacing usage guide" ── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px — gutter de grilă */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px — padding de secțiune */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ── Raze (fișa 13, § 3) ────────────────────────────────────────────────── */
  --radius-xs: 4px;     /* badge-uri, elemente mici */
  --radius-sm: 8px;     /* câmpuri, butoane */
  --radius-md: 12px;    /* carduri, dialoguri */
  --radius-lg: 16px;    /* containere de imagine */
  --radius-xl: 24px;    /* carduri speciale, accente */
  --radius-full: 999px; /* pastile, avataruri */

  /* ── Umbre (fișa 13, § 4), în navy-ul paletei, nu într-un gri neutru ────── */
  --shadow-xs: 0 1px 2px oklch(0.181 0.033 257 / 0.05);
  --shadow-sm: 0 2px 6px oklch(0.181 0.033 257 / 0.07);
  --shadow-md: 0 6px 16px oklch(0.181 0.033 257 / 0.10);
  --shadow-lg: 0 12px 24px oklch(0.181 0.033 257 / 0.14);
  --shadow-xl: 0 20px 40px oklch(0.181 0.033 257 / 0.18);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 66ch;
  --radius: 8px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* WCAG 2.2 SC 2.4.11 (Focus Not Obscured): antetul e sticky, 72px pe desktop —
     tinta unei ancore sau elementul focalizat cu Tab nu mai ajunge sub el. T61/R1. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-variation-settings: "wdth" 100;
}

/* Controalele de formular nu moștenesc fontul în Chrome/Safari: butoanele de pachet din
   checkout ieșeau în Arial (cr-5, 15.09.2026). Stă devreme, ca regulile de clasă să-l poată schimba. */
button,
input,
select,
textarea {
  font: inherit;
}

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

a {
  color: var(--green-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--green-ink);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
}

h4 {
  font-size: var(--step-0);
}

p {
  margin: 0;
  max-width: var(--measure);
}

p + p {
  margin-top: 0.85em;
}

ul,
ol {
  margin: 0;
  padding-left: 1.2em;
}

li + li {
  margin-top: 0.35em;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

kbd {
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  background: var(--paper);
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1280px);   /* fișa 13: container max-width 1280px */
  margin-inline: auto;
}

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.9rem;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 34em;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--step--1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip-link: prima oprire a tastaturii, ca sa nu treci prin cele 6 linkuri de
   navigatie pe fiecare pagina. Sta pe `.visually-hidden` de mai sus cat timp
   n-are focus, deci ramane ascuns si daca browserul are inca in cache un CSS
   fara regula asta (site.css e cachat 7 zile, .htaccess). Regula de aici il
   scoate la iveala cand ajungi pe el cu Tab si anuleaza exact cele cinci
   proprietati cu care `.visually-hidden` ascunde.
   z-index 9999 fiindca antetul e sticky pe 50 (.site-header). Inelul de focus
   vine din regula globala `:focus-visible`, mai jos. */
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--pulp);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

/* Un selector cu − și + rămâne pe un rând și pe telefon. Regula generală de sub 900 px pune
   `.field-row-inline` pe coloană, ceea ce e corect pentru „CUI + caută la ANAF", dar aici
   ar fi dat trei casete late una sub alta: nu mai arată a selector, ci a trei câmpuri. */
.field-row-inline.stepper {
  flex-direction: row;
  align-items: center;
}

.field-row-inline.stepper .btn {
  flex: 0 0 auto;
}

/* Un buton dezactivat arăta exact ca unul activ: aceeași culoare, același cursor. Checkout-ul
   dezactiva deja butoane cât timp se trimite comanda, deci omul apăsa într-un buton care nu
   răspundea și nu avea de unde ști de ce. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Fișa de butoane (assets/img/brand/05-brand.png): primarul e verde MEDIU cu text deschis.
   Abatere deliberată de la fișă: acolo hover-ul e mai DESCHIS, ceea ce cu text deschis dă 4.30
   (sub AA). Aici hover-ul se închide și primește un inel verde-lămâie — aceeași senzație de
   „se aprinde", 11.75 contrast. Măsurat, nu presupus. */
.btn-primary {
  background: var(--leaf-mid);
  color: var(--pulp);
}

.btn-primary:hover {
  background: var(--leaf);
  color: var(--pulp);
  box-shadow: 0 0 0 3px oklch(0.807 0.147 131 / 0.30);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

/* Butonul conturat pe orice fundal închis. `.btn-outline` are `color: var(--ink)`,
   adică text închis: pe închis devine invizibil, cum s-a întâmplat în banda
   „Other ways to connect" de pe download. Erau două excepții punctuale, pentru
   hero și cardul final; orice secțiune închisă nouă rămânea pe dinafară.
   Enumerarea de mai jos e singurul loc unde se adaugă un context nou. */
.hero-actions .btn-outline,
.closing-card .btn-outline,
.section-dark .btn-outline,
.section-green .btn-outline,
.site-footer .btn-outline,
.panel-dark .btn-outline {
  color: var(--pulp);
  border-color: oklch(0.979 0.031 93 / 0.35);
}

.hero-actions .btn-outline:hover,
.closing-card .btn-outline:hover,
.section-dark .btn-outline:hover,
.section-green .btn-outline:hover,
.site-footer .btn-outline:hover,
.panel-dark .btn-outline:hover {
  color: var(--pulp);
  border-color: var(--pulp);
  background: oklch(0.979 0.031 93 / 0.06);
}

.btn-outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-on-green {
  background: var(--on-green);
  color: var(--green-ink);
}

.btn-on-green:hover {
  background: oklch(0.93 0.03 142);
  color: var(--green-ink);
}

.btn-ghost-on-green {
  background: transparent;
  color: var(--on-green);
  border-color: oklch(0.985 0.012 142 / 0.45);
}

.btn-ghost-on-green:hover {
  border-color: var(--on-green);
  color: var(--on-green);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
}

/* ---------- Header ---------- */

/* Antetul, după fișa assets/img/brand/03-brand.png: închis în capul paginii,
   deschis după derulare. Înălțimi din fișă: 72px desktop, 64px mobil. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: var(--pulp);
  border-bottom: 1px solid oklch(0.979 0.031 93 / 0.10);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.site-header.is-scrolled {
  background: oklch(0.988 0.006 150 / 0.92);
  backdrop-filter: saturate(1.2) blur(10px);
  color: var(--ink);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px oklch(0.08 0.02 257 / 0.6);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
}

/* Mărimea mărcii NU se stabilește aici. Regula asta a existat până azi ca
   `.brand img { 30px }`, dar n-a avut niciodată efect: `.brand .mark` (mai jos,
   la secțiunea „Marca") are specificitate mai mare și toate cele 10 pagini scriu
   `<img class="mark">`. Era cod mort care arăta o mărime falsă oricui îl citea. */

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a {
  color: oklch(0.979 0.031 93 / 0.72);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step-0);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--lemon-leaf);
  border-bottom-color: var(--lemon-leaf);
}
.is-scrolled .nav a {
  color: var(--ink-2);
}
.is-scrolled .nav a:hover,
.is-scrolled .nav a[aria-current="page"] {
  color: var(--leaf);
  border-bottom-color: var(--leaf-mid);
}
.nav a.btn,
.nav a.btn:hover,
.is-scrolled .nav a.btn {
  color: var(--pulp);
  border-bottom-color: transparent;
}

.nav a.btn {
  padding: 0.6rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--on-green);
  border-bottom: 1px solid transparent;
}

.nav a.btn:hover {
  color: var(--on-green);
  border-bottom-color: transparent;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid oklch(0.979 0.031 93 / 0.28);
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-2);
    border-bottom: 1px solid var(--surface-line-dark);
    padding: 0.5rem var(--gutter) 1rem;
    box-shadow: var(--shadow-xl);
  }

  .nav.is-open {
    display: flex;
  }

  .site-header .wrap {
    min-height: 64px;
  }

  .nav a,
  .is-scrolled .nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid oklch(0.979 0.031 93 / 0.12);
    font-size: var(--step-0);
    color: var(--pulp);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Chevron pe fiecare rând, ca în fișă. Butonul nu-l primește. */
  .nav a:not(.btn)::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
  }

  .nav a.btn {
    margin-top: 0.75rem;
    justify-content: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid transparent;
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(var(--space-8), 8vw, var(--space-9));
}

.section-tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head {
  max-width: 44em;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head h2 {
  margin-bottom: 0.75rem;
}

.section-green {
  background: var(--leaf);
  color: var(--pulp);
  /* Aceeași redefinire locală ca la `.section-dark`, din același motiv: tokenurile de
     text sunt calibrate pe hârtie deschisă, iar `--ink-2` pe verde-închis dădea 1,6:1.
     Lipsa lor de aici a fost o capcană reală — orice component care folosește tokenurile
     (`.sec-item`, `.step`) ieșea gri-închis pe verde-închis, descoperit pe `about.html`.
     Redefinite aici, orice pagină viitoare rămâne lizibilă fără o regulă per component. */
  --ink: var(--pulp);
  --ink-2: oklch(0.979 0.031 93 / 0.78);
  --muted: oklch(0.979 0.031 93 / 0.62);
  --green-deep: var(--lemon-leaf);
}

.section-green .eyebrow {
  color: var(--green-bright);
}

.section-green .lede,
.section-green .muted {
  color: oklch(0.985 0.012 142 / 0.72);
}

.section-green a:not(.btn) {
  color: var(--on-green);
}

.section-tint {
  background: var(--green-tint);
}

.section-paper-2 {
  background: var(--paper-2);
}

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

/* ---------- Hero ---------- */

.hero {
  background: var(--navy);
  color: var(--pulp);
  /* Trebuie să încapă într-un viewport real: pe un laptop de 900px înălțime
     rămân ~750px utili după bara browserului. Padding-ul de 128/96px plus un
     titlu Poppins de trei rânduri îl scotea din ecran. */
  padding-block: clamp(var(--space-5), 3.4vh, var(--space-7)) clamp(var(--space-5), 3.4vh, var(--space-7));
  min-height: min(30rem, 72vh);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* O coloană: mock-ul a coborât în #workspace, ca în fișa 01, unde hero-ul e
   text la stânga și fotografie la dreapta, fără interfață peste ea. Textul se
   oprește înainte de fotografie, ca să nu intre peste lămâi. */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero .wrap > div {
  /* Poppins e sensibil mai lat decât Archivo: la 34rem titlul se rupea în patru
     rânduri, cu un „a" agățat la capăt. */
  max-width: 42rem;
}

/* Eyebrow-ul devine pastilă, ca în fișa de hero (assets/img/brand/04-brand.png). */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--lemon-leaf);
  border: 1px solid oklch(0.807 0.147 131 / 0.32);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem;
  background: oklch(0.807 0.147 131 / 0.08);
}
.hero .eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--lemon-leaf);
}

.hero h1 {
  max-width: 12ch;
}

.hero .lede {
  color: oklch(0.979 0.031 93 / 0.78);
  margin-top: 1.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Pe navy, primarul rămâne același verde: un singur buton primar în tot site-ul. */
.hero-actions .btn-primary:hover {
  box-shadow: 0 0 0 3px oklch(0.807 0.147 131 / 0.45);
}

.hero-note {
  margin-top: 1.25rem;
  font-size: var(--step--1);
  color: oklch(0.979 0.031 93 / 0.62);
}

@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    max-width: 14ch;
  }
}

/* Session mock: a small piece of the product drawn in HTML. */

.session-mock {
  background: var(--navy-2);
  color: var(--on-green);
  border-radius: 10px;
  padding: 0.75rem;
  box-shadow: 0 30px 60px -30px oklch(0.2 0.08 144 / 0.7);
  font-size: 0.9rem;
  transform: rotate(-1deg);
}

.session-mock .titlebar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem 0.75rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

.session-mock .titlebar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(0.985 0.012 142 / 0.3);
}

.session-mock .titlebar .dot:first-child {
  background: var(--lemon-leaf);
}

.session-mock .titlebar .title {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.session-mock .screen {
  background: oklch(0.30 0.03 144);
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(oklch(0.985 0.012 142 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.985 0.012 142 / 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.session-mock .taskbar {
  position: absolute;
  inset: auto 0 0 0;
  height: 9%;
  background: oklch(0.22 0.03 144);
}

.session-mock .window {
  position: absolute;
  left: 8%;
  top: 10%;
  width: 54%;
  height: 58%;
  background: oklch(0.96 0.005 142);
  border-radius: var(--radius-xs);
  color: var(--ink);
}

.session-mock .window::before {
  content: "";
  display: block;
  height: 14%;
  background: oklch(0.90 0.006 142);
  border-radius: var(--radius-xs) 4px 0 0;
}

.session-mock .window i {
  display: block;
  height: 5%;
  margin: 8% 10% 0;
  background: oklch(0.82 0.006 142);
  border-radius: 2px;
}

.session-mock .window i:nth-child(2) {
  width: 55%;
}

.session-mock .window i:nth-child(3) {
  width: 70%;
}

.session-mock .cursor {
  position: absolute;
  left: 44%;
  top: 42%;
  width: 14px;
  height: 20px;
  fill: var(--on-green);
  filter: drop-shadow(0 1px 1px oklch(0.2 0.02 144 / 0.6));
  animation: cursor-to-accept 9s var(--ease) infinite;
}


.session-mock .consent {
  position: absolute;
  right: 6%;
  bottom: 16%;
  width: 46%;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 14px 30px -12px oklch(0.2 0.02 144 / 0.8);
  font-size: 0.72rem;
  line-height: 1.35;
}

.session-mock .consent strong {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.session-mock .consent .row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.session-mock .consent .row span {
  flex: 1;
  text-align: center;
  padding: 0.35rem 0;
  border-radius: var(--radius-xs);
  font-weight: 600;
  border: 1px solid var(--line-strong);
}

.session-mock .consent .row span.ok {
  background: var(--lemon-leaf);
  border-color: var(--lemon-leaf);
  color: var(--navy);
}

.session-mock .statusbar {
  display: flex;
  gap: 1rem;
  padding: 0.7rem 0.5rem 0.2rem;
  font-size: 0.75rem;
  color: oklch(0.985 0.012 142 / 0.85);
  flex-wrap: wrap;
}

.session-mock .statusbar b {
  color: var(--green-bright);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .session-mock .cursor {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: step;
}

.step {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--green-deep);
  line-height: 1;
  margin-bottom: 1rem;
}

.step h3 {
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--ink-2);
}

.step .addr {
  display: inline-block;
  margin-top: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  color: var(--ink);
}

@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ---------- Feature blocks (alternating) ---------- */

/* Proporția urmează CONȚINUTUL, nu poziția. Coloana de text (titlu + paragraf +
   3–4 puncte) primește mereu 7fr, cardul mereu 5fr.
   Până azi grila era fixă `5fr 7fr`, iar `.flip` muta doar textul, cu `order`.
   Efect: în blocurile fără `flip` cardul nimerea în coloana de 7fr și umplea 32–44%
   din ea, în timp ce blocurile cu `flip` — aceeași grilă, pe dos — umpleau 93–99%.
   Jumătate din blocuri arătau deja corect; asta le aliniază pe celelalte la ele.

   ⚠️ Proporția se scrie prin variabile, nu printr-o a doua regulă `.feature.flip`
   cu `grid-template-columns`. Aceea ar avea specificitate 0-2-0 și ar învinge
   `@media (max-width: 800px) { .feature { grid-template-columns: 1fr } }` de mai jos,
   care are 0-1-0 — adică ar ține două coloane pe telefon. Probat: cardul ajunge la
   160px și dă pe dinafară cu 208px la 390px. Aici `grid-template-columns` e declarat
   o singură dată, la 0-1-0, deci media query-ul îl bate curat. */
.feature {
  --col-1: 7fr;   /* prima celulă: text, sau card la .flip */
  --col-2: 5fr;   /* a doua celulă: card, sau text la .flip */
  display: grid;
  grid-template-columns: minmax(0, var(--col-1)) minmax(0, var(--col-2));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}

/* La .flip textul e mutat în celula 2 (vezi `.feature.flip .text { order: 2 }`),
   deci acolo trebuie cei 7fr. */
.feature.flip {
  --col-1: 5fr;
  --col-2: 7fr;
}

.feature:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Panoul-dovadă de lângă fiecare bloc de funcții. Istoric: n-avea niciun stil, apoi
   a devenit card centrat pe verticală (`align-self: center`).
   Centrarea a fost pasul greșit: ea împarte diferența de înălțime în două goluri
   egale, unul deasupra cardului și unul sub el — la blocul 1, 180px de fiecare parte.
   De acolo venea impresia că panoul „plutește".
   Acum cardul ocupă înălțimea rândului, cu conținutul centrat înăuntru. Aerul nu
   dispare — trece în interiorul chenarului, unde se citește ca panou generos, nu ca
   o cutie rătăcită — iar cele două coloane încep și se termină pe aceeași linie.
   Blocul cu `.uac` n-are card (vezi `:has(> .uac)` mai jos), deci acolo `stretch`
   nu se vede: rămâne doar centrarea, adică exact comportamentul de până acum. */
.feature .art {
  align-self: stretch;
  display: grid;
  align-content: center;
  background: var(--surface-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.section-dark .feature .art,
.section-green .feature .art {
  background: oklch(0.979 0.031 93 / 0.05);
  border-color: oklch(0.979 0.031 93 / 0.14);
}

/* Panourile care își aduc propriul fundal nu au nevoie de cardul de sub ele. */
.feature .art:has(> .uac) {
  background: none;
  border: 0;
  padding: 0;
}

.feature h3 {
  font-size: var(--step-2);
  margin-bottom: 0.75rem;
}

/* ── Marcaj „în curând” ───────────────────────────────────────────────────────
   Pentru funcțiile anunțate care nu sunt încă în buildurile publicate. Ton de
   informație, nu de reclamă: chenar, fără fundal plin, ca să nu concureze cu
   badge-ul „Most chosen" de pe pachete. Se scoate odată cu livrarea funcției. */
.soon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.55em;
  padding: 0.12em 0.6em;
  border: 1px solid var(--leaf-mid);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--leaf-mid);
  /* Nu moștenește line-height-ul unui titlu mare, altfel umflă rândul. */
  line-height: 1.5;
}

.section-dark .soon,
.section-green .soon {
  border-color: oklch(0.979 0.031 93 / 0.45);
  color: oklch(0.979 0.031 93 / 0.82);
}

/* În listele de funcții marcajul stă la finalul rândului, nu lipit de text. */
.check-list .soon,
.plan-features .soon {
  font-size: 0.72em;
  margin-left: 0.4em;
}

/* Nota de secțiune: un rând întreg, pentru blocurile care descriu în întregime
   o funcție nelivrată (ghidul, pagina de securitate). */
.soon-note {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  margin-bottom: 1.1rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--leaf-mid);
  background: var(--paper-2);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.soon-note strong {
  color: var(--leaf-mid);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.85em;
  white-space: nowrap;
}

.feature .text p {
  color: var(--ink-2);
}

.feature ul {
  margin-top: 1rem;
  padding-left: 0;
  list-style: none;
}

.feature li {
  padding-left: 1.4em;
  position: relative;
  color: var(--ink-2);
}

/* Bifă verde în locul liniuței (user, 08.09.2026).
   Desenată din două linii cu border, nu emoji: ✅ se randează altfel pe fiecare
   sistem (Apple, Windows, Android) și vine cu pătrat verde propriu, care se bate
   cu paleta. Așa avem exact verdele mărcii și aceeași formă peste tot. */
.feature li::before {
  content: "";
  position: absolute;
  left: 0.05em;
  top: 0.42em;
  width: 0.34em;
  height: 0.62em;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.feature.flip .text {
  order: 2;
}

@media (max-width: 800px) {
  .feature {
    grid-template-columns: 1fr;
  }

  .feature.flip .text {
    order: 0;
  }
}

/* Panels used inside feature blocks: drawn UI fragments, not photos. */

.panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  font-size: 0.9rem;
}

.panel-dark {
  background: var(--green-ink);
  color: var(--on-green);
  border-color: transparent;
}

/* Perechile etichetă/valoare din panourile de funcții. Fiecare `<div>` (dt + dd) e
   o celulă, deci grila așază 6–7 perechi pe două coloane.
   Era `max-content 1fr`: coloana de max-content NU se strânge niciodată, deci pe
   lățime mică textul ieșea din cutie — măsurat, blocul 2 depășea cu 44px la 1024px
   și mai mult sub el. `auto-fit` dă două coloane egale cât încap și trece singur pe
   una când nu mai încap.
   9rem nu e ales la ochi: e cea mai mare valoare care ține DOUĂ coloane și la 1024px
   (2×144px + 20px gap = 308px ≤ 324px utili în card). Peste ea, 1024px ar cădea pe o
   coloană și cardul ar rămâne pe jumătate gol. */
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.45rem 1.25rem;
  font-size: 0.9rem;
}

.kv dt {
  color: var(--muted);
  margin: 0;
}

.kv dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.panel-dark .kv dt {
  color: oklch(0.985 0.012 142 / 0.6);
}

.transfer {
  display: grid;
  gap: 0.7rem;
}

.transfer .file {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.transfer .file .name {
  font-weight: 600;
}

.transfer .file .size {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.transfer .bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.transfer .bar i {
  display: block;
  height: 100%;
  background: var(--green);
}

.participants {
  display: grid;
  gap: 0.6rem;
}

.participants .p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: oklch(0.985 0.012 142 / 0.06);
}

/* Numele deasupra, starea dedesubt. Fără asta cele două <span>-uri curgeau
   unul în celălalt: „Maria IonescuCamera on · controlling". */
.participants .p > div {
  display: grid;
  gap: 0.1rem;
  line-height: 1.25;
}
.participants .p > div span {
  font-size: 0.78rem;
  opacity: 0.75;
}

.participants .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--lemon-leaf);
  color: var(--navy);
  flex: none;
}

.participants .avatar.alt {
  background: oklch(0.985 0.012 142 / 0.18);
  color: var(--on-green);
}

.participants .role {
  margin-left: auto;
  font-size: 0.78rem;
  opacity: 0.75;
}

.participants .p.has-control {
  outline: 1px solid var(--green);
}

.participants .p.has-control .role {
  color: var(--green-bright);
  opacity: 1;
}

.uac {
  background: oklch(0.30 0.03 144);
  border-radius: 6px;
  padding: 1.25rem;
  color: var(--on-green);
}

.uac .dialog {
  background: oklch(0.96 0.005 142);
  color: var(--ink);
  border-radius: var(--radius-xs);
  padding: 0.9rem 1rem;
  max-width: 26rem;
  font-size: 0.85rem;
}

.uac .dialog .bar {
  height: 6px;
  background: var(--amber);
  border-radius: var(--radius-xs) 4px 0 0;
  margin: -0.9rem -1rem 0.8rem;
}

.uac .dialog strong {
  display: block;
  margin-bottom: 0.3rem;
}

.uac .dialog .row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.8rem;
}

.uac .dialog .row span {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-weight: 600;
}

.uac .dialog .row span:first-child {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.uac .tag {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--green-bright);
  font-weight: 600;
}

/* ---------- Inline list of smaller features ---------- */

.also {
  columns: 3;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
}

.also li {
  break-inside: avoid;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.also li strong {
  display: block;
  font-weight: 600;
}

.also li span {
  color: var(--ink-2);
  font-size: var(--step--1);
}

@media (max-width: 900px) {
  .also {
    columns: 2;
  }
}

@media (max-width: 560px) {
  .also {
    columns: 1;
  }
}

/* ---------- Tables ---------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.table th,
.table td {
  text-align: left;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table thead th {
  border-bottom-color: var(--line-strong);
}

.table td:first-child {
  font-weight: 600;
}

.table .yes {
  color: var(--green-deep);
  font-weight: 600;
}

.table .no {
  color: var(--muted);
}

.table-scroll {
  overflow-x: auto;
}

/* ---------- CTA band ---------- */

.cta-band .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}

.cta-band h2 {
  max-width: 18ch;
}

.cta-band .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 760px) {
  .cta-band .wrap {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */

/* Footerul, după fișa assets/img/brand/12-brand.png: panou închis, nu hârtie.
   Coloanele, lista de funcții din prima coloană și bara de jos vin de acolo;
   newsletterul, rețelele sociale și selectorul de limbă NU — vezi
   ../../stare-proiect/BRAND-FISE-APLICARE.md. */
.site-footer {
  background: var(--navy);
  color: oklch(0.979 0.031 93 / 0.72);
  border-top: 0;
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--step--1);
  position: relative;
  overflow: hidden;
}
.site-footer::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -46%;
  width: min(34vw, 420px);
  aspect-ratio: 1000 / 1005;
  /* Masca liniară lăsa o tăietură dreaptă exact pe marginea de jos a subsolului,
     iar fotografia trecea pe sub rândul de asigurări. Masca radială o stinge pe
     toate laturile, deci n-are cum să rămână o muchie. */
  /* Era un decupaj șters din aceeași fișă generată: la 0,5 opacitate se citea ca o pată
     brună, nu ca o lămâie. Acum e `lamaie-01.png` (felie în unghi, cu floare, pe negru),
     scoasă la 560×560 webp = 19 KB, față de 45 KB cât avea jpeg-ul.
     ⚠️ Încadrarea contează aici, nu doar fișierul. Cu `right bottom` se vedea doar marginea
     lămâii, tăiată drept de colțul paginii — o pană galbenă fără explicație. Probat pe
     pagină cu trei fotografii: `center` aduce felia întreagă în zona pe care o lasă masca,
     deci se stinge din toate părțile. Nu schimba în `right bottom` fără să te uiți. */
  /* 08.09.2026: `citrus-dark.webp` (lamaie-01, felie în unghi) se tăia drept de marginea
     paginii — se vedea o pană galbenă, nu o lămâie. Cauza nu era masca, ci `cover`:
     tăia fotografia ca să umple subsolul, iar ce rămânea la 78% era chiar muchia.
     Acum `citrus-round.webp` (lamaie-03, felie rotundă, centrată pe negru) cu `contain`:
     felia intră întreagă, iar masca o stinge din toate părțile. Imaginea e folosită
     o singură dată — celelalte trei citrus-* sunt alte fotografii. */
  background: url("../img/citrus-round.webp") center / contain no-repeat;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(closest-side at 72% 42%, #000 22%, transparent 78%);
  mask-image: radial-gradient(closest-side at 72% 42%, #000 22%, transparent 78%);
  pointer-events: none;
}
.site-footer .wrap {
  position: relative;
  z-index: 1;
}
.site-footer .brand {
  color: var(--pulp);
}

.site-footer .cols {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);   /* marcă + Product · Resources · Company · Legal */
  gap: 2rem;
}

/* Titlurile de coloană din subsol erau `h4` după `h2`/`h3` și săreau niveluri (Lighthouse
   `heading-order`, cr-5). Acum sunt `p.footer-title`; stilul rămâne cel al vechiului `h4`. */
.site-footer h4,
.site-footer .footer-title {
  margin-top: 0;
  line-height: 1.08;
  margin-bottom: var(--space-3);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pulp);
  font-weight: 700;
}

.site-footer ul {
  list-style: none;
  padding: 0;
}

.site-footer a {
  color: oklch(0.979 0.031 93 / 0.72);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-footer li {
  margin-bottom: 0.45rem;
}

.site-footer a:hover {
  color: var(--lemon-leaf);
  text-decoration: none;
}

.site-footer .legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid oklch(0.979 0.031 93 / 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--space-6);
  color: oklch(0.979 0.031 93 / 0.55);
  font-size: 0.8rem;
}
.site-footer .legal .spacer {
  margin-left: auto;
}
.site-footer .legal .mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.site-footer .legal .mark::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px 5px 2px 5px;
  background: var(--lemon-leaf);
}
@media (max-width: 760px) {
  .site-footer .legal .spacer { margin-left: 0; }
}

@media (max-width: 1040px) {
  .site-footer .cols {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .site-footer .cols > :first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .site-footer .cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Page header (inner pages) ---------- */

.page-head {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
/* Motivul de citrice pe capul paginilor secundare.
   Era felia vectorială `lemon-slice.svg`, aleasă anume ca să nu poată rămâne cu o
   muchie tăiată. Userul a cerut o fotografie de-a lui în locul desenului, deci acum
   e `citrus-slice.webp` — și grija despre muchie rămâne rezolvată, dar altfel:
   fotografia are fundalul negru SCOS (canal alfa extras din luminanță, vezi nota de
   la fișier), deci n-are pătrat și n-are muchie. Nu o înlocui cu un webp obișnuit
   scos direct din `lamaie-03.png`: acolo unde fundalul paginii e deschis — aici și
   la `.sour-card` — s-ar vedea un pătrat negru.
   Stă în fundal: textul e deasupra, niciodată peste ea. */
.page-head::after {
  content: "";
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(28vw, 300px);
  aspect-ratio: 1;
  background: url("../img/citrus-slice.webp") center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.page-head > .wrap {
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  /* Pe mobil textul ocupă toată lățimea, deci felia ar trece pe sub el. */
  .page-head::after { opacity: 0.1; width: 46vw; right: -12%; }
}

.page-head h1 {
  font-size: var(--step-3);
  max-width: 20ch;
}

.page-head .lede {
  margin-top: 1rem;
}

/* ---------- Download ---------- */

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.dl {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}

.dl h2 {
  font-size: var(--step-2);
}

.dl .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--step--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dl .btn {
  justify-self: start;
}

/* Mac-ul primul cand vizitatorul e pe Mac — clasa vine din os-first.js inainte de pictare,
   deci nu exista shift (T75/R2). `.dl .meta` are inaltime rezervata. */
.is-mac #dl-mac { order: -1; }
.dl .meta { min-height: 1.6em; }

/* Pe telefon/tabletă (clasa `is-mobile` din os-first.js, înainte de pictare): nu se instalează
   nimic, deci primul lucru e mesajul că aplicația e pentru calculator (cr-4, 15.09.2026). */
.dl-mobile-note { display: none; margin-bottom: 1.5rem; }
.is-mobile .dl-mobile-note { display: block; }

/* Pe pricing, descărcarea și planul plătit în primul ecran (cr-1, 15.09.2026). */
/* Nu folosește `.hero-actions`: acolo `.btn-outline` e stilizat pentru fundal închis. */
.page-head .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
@media (max-width: 480px) {
  .page-head .page-actions { display: grid; gap: var(--space-3); }
  .page-head .page-actions .btn { width: 100%; justify-content: center; }
}

/* Checkout: un singur pachet ⇒ tablist-ul cu un singur tab nu e o alegere; numele planului
   apare oricum în fișa de sub el (cr-5, 15.09.2026). */
.tier-tabs:has(> .tier-tab:only-child) { display: none; }

/* Formularul de contact: detaliile optionale pliate (T75/R3). */
.more-details { margin: 0.25rem 0 1.25rem; }
.more-details summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: 0.4rem 0; }
.more-details summary:hover { color: var(--ink); }
.more-details[open] summary { margin-bottom: 0.75rem; }

.dl-other {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.dl-other > div {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.dl-other h3 {
  margin-bottom: 0.5rem;
}

@media (max-width: 760px) {
  .dl-grid,
  .dl-other {
    grid-template-columns: 1fr;
  }
}

.notice {
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  background: var(--paper-2);
  font-size: var(--step--1);
  max-width: var(--measure);
}

.notice-amber {
  background: var(--warning-tint);
  border-color: var(--warning);
  color: var(--warning-ink);
}

/* ---------- Install steps (ordered, two columns) ---------- */

.install {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}

.install ol {
  padding-left: 0;
  list-style: none;
  counter-reset: inst;
  margin-top: 1rem;
}

.install ol li {
  counter-increment: inst;
  position: relative;
  padding-left: 2.4rem;
  margin-top: 0.85rem;
  color: var(--ink-2);
}

.install ol li::before {
  content: counter(inst);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--green-tint-2);
  color: var(--green-ink);
}

@media (max-width: 760px) {
  .install {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  border: none;
  overflow: visible;
  padding: 1.25rem 0.25rem 2.25rem;
  margin-bottom: 1.5rem;
}

.plan {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface-1);
  box-shadow: 0 4px 20px rgba(8, 18, 32, 0.04);
  position: relative;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(8, 18, 32, 0.08);
}

.plan:first-child {
  border-left: 1px solid var(--line-strong);
}

.plan.featured {
  background: linear-gradient(165deg, #091726 0%, #112e1f 100%);
  color: #ffffff;
  border: 2px solid #9ED36A;
  border-radius: 22px;
  box-shadow: 0 20px 48px -10px rgba(8, 18, 32, 0.5), 0 0 25px rgba(158, 211, 106, 0.2);
  transform: translateY(-8px) scale(1.02);
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.plan.featured:hover {
  transform: translateY(-12px) scale(1.025);
  box-shadow: 0 26px 54px -10px rgba(8, 18, 32, 0.55), 0 0 35px rgba(158, 211, 106, 0.3);
}

/* Border beam laser animation for featured plan */
@keyframes border-beam-remote {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.plan.featured::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 280deg, #F4C430 325deg, #9ED36A 360deg);
  animation: border-beam-remote 5s linear infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}

.plan.featured::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: linear-gradient(165deg, #091726 0%, #112e1f 100%);
  border-radius: 20px;
  z-index: 1;
  pointer-events: none;
}

.plan.featured > * {
  position: relative;
  z-index: 2;
}

.plan.featured .plan-badge {
  background: var(--lemon);
  color: var(--navy);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(244, 196, 48, 0.4);
}

.plan.featured h2 {
  color: #ffffff;
}

.plan.featured .price {
  color: #ffffff;
}

.plan.featured .price small {
  color: rgba(255, 255, 255, 0.75);
}

.plan.featured .muted {
  color: rgba(255, 255, 255, 0.82);
}

.plan.featured li {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.plan.featured li::before {
  content: "✓";
  color: #9ED36A;
  font-weight: 800;
  font-size: 0.95em;
  flex-shrink: 0;
}

.plan.featured .btn-on-green {
  background: #9ED36A;
  color: #081220;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(158, 211, 106, 0.35);
  border: none;
  width: 100%;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.plan.featured .btn-on-green:hover {
  background: #b4e883;
  color: #050e18;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(158, 211, 106, 0.5);
}

.plan h2 {
  font-size: var(--step-1);
}

.plan .price {
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan .price small {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 0.25rem;
}

.plan ul {
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
  flex-grow: 1;
}

.plan li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}

.plan .btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

@media (max-width: 860px) {
  .plans {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0.5rem 0;
  }

  .plan.featured {
    transform: none;
  }

  .plan.featured:hover {
    transform: none;
  }
}

/* ---------- Docs ---------- */

.docs {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.toc {
  position: sticky;
  top: 84px;
  font-size: var(--step--1);
}

.toc ul {
  list-style: none;
  padding: 0;
}

.toc li {
  margin: 0;
}

.toc a {
  display: block;
  padding: 0.4rem 0;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--line);
  padding-left: 0.9rem;
}

.toc a:hover {
  color: var(--ink);
  border-left-color: var(--line-strong);
}

.toc .group {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.doc-body h2 {
  font-size: var(--step-2);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.doc-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc-body h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.doc-body p,
.doc-body ul,
.doc-body ol {
  margin-top: 0.75rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

.doc-body li {
  margin-top: 0.4rem;
}

.doc-body table {
  margin-top: 1rem;
}

details {
  border-top: 1px solid var(--line);
}

details:last-of-type {
  border-bottom: 1px solid var(--line);
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2.5rem 1rem 0;
  font-weight: 600;
  position: relative;
  color: var(--ink);
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.85rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--green-deep);
  transition: transform 0.25s var(--ease);
}

details[open] summary::after {
  transform: rotate(45deg);
}

details > div {
  padding: 0 0 1.25rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

@media (max-width: 860px) {
  .docs {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;
  }
}

/* ---------- Security ---------- */

.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem);
}

.sec-item {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
}

.sec-item h3 {
  margin-bottom: 0.6rem;
}

.sec-item p,
.sec-item li {
  color: var(--ink-2);
}

.sec-item ul {
  margin-top: 0.75rem;
}

/* Varianta pe o coloană. Coloana „cum e aici" a fost scoasă din #why: cele cinci
   rânduri ale ei erau un cuprins al paginii, livrat pe larg de pașii sesiunii și
   de blocurile de funcții. Lista rămasă curge în două coloane, ca rândurile să nu
   se lungească pe toată lățimea. */
.sec-grid--single {
  grid-template-columns: minmax(0, 1fr);
}
.sec-grid--single ul {
  columns: 2;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.sec-grid--single li {
  break-inside: avoid;
}

@media (max-width: 760px) {
  .sec-grid {
    grid-template-columns: 1fr;
  }
  .sec-grid--single ul {
    columns: 1;
  }
}

.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  counter-reset: flow;
  margin-top: 2rem;
}

.flow > div {
  counter-increment: flow;
  padding: 1rem;
  border: 1px solid oklch(0.985 0.012 142 / 0.2);
  border-radius: 6px;
  font-size: var(--step--1);
  min-height: 9rem;
}

.flow > div::before {
  content: counter(flow);
  display: block;
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--green-bright);
  margin-bottom: 0.5rem;
}

.flow strong {
  display: block;
  margin-bottom: 0.3rem;
}

@media (max-width: 900px) {
  .flow {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .flow {
    grid-template-columns: 1fr;
  }
}

/* ---------- Legal / prose pages ---------- */

.prose {
  max-width: var(--measure);
}

.prose h2 {
  font-size: var(--step-1);
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

.prose ul {
  margin-top: 0.5rem;
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.contact > div {
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
}

.contact h3,
.contact .h3-look {
  margin-bottom: 0.5rem;
}
/* 404: titlurile de card sunt `h2` (după `h1`, fără salt de nivel), cu mărimea unui `h3`. */
.contact .h3-look {
  font-size: var(--step-1);
}

.contact a.big {
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}

@media (max-width: 760px) {
  .contact {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reveal on scroll (brand permission: one orchestrated entrance) ---------- */

/* 0,7s + un stagger de până la 480ms însemna 1,18s până apărea ultimul frate.
   La derulare normală depășeai animația și vedeai secțiuni goale. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
}

/* ---------- Pricing: interval toggle and plan badge ---------- */

.interval-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 1.5rem;
  background: var(--paper);
}

.interval-btn {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.55rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.interval-btn.active {
  background: var(--green-ink);
  color: var(--on-green);
}

.save-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--green-tint-2);
  color: var(--green-ink);
  font-style: normal;
}

.interval-btn.active .save-badge {
  background: oklch(0.985 0.012 142 / 0.18);
  color: var(--on-green);
}

.plan-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--amber);
  color: var(--amber-ink);
  margin-bottom: 0.6rem;
}

/* ---------- Checkout ---------- */

.co-steps {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  flex-wrap: wrap;
}

.co-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.co-steps li + li::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--line-strong);
  margin-right: 0.5rem;
}

.co-steps li span {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-grid;
  place-items: center;
  font-size: 0.78rem;
  background: var(--paper);
}

.co-steps li.active {
  color: var(--ink);
}

.co-steps li.active span {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: var(--on-green);
}

.co-steps li.done span {
  background: var(--green-tint-2);
  border-color: var(--green-tint-2);
  color: var(--green-ink);
}

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}

.checkout-side {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 5rem;
}

.checkout-main .panel {
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--step-0);
}

.checkout-main .panel > h2 {
  font-size: var(--step-1);
  margin-bottom: 0.3rem;
}

.checkout-main .panel > .muted.small {
  margin-bottom: 1.5rem;
}

.panel-quiet {
  background: transparent;
}

.side-h {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.tier-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.tier-tab {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
  color: var(--ink);
}

.tier-tab span {
  font-size: 0.8rem;
  color: var(--muted);
}

.tier-tab.active {
  border-color: var(--green-deep);
  background: var(--green-tint);
  box-shadow: inset 0 0 0 1px var(--green-deep);
}

.plan-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--paper-2);
}

.plan-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.plan-detail-price {
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.plan-detail-price small {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.25rem;
}

.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.check-list li {
  padding-left: 1.4rem;
  position: relative;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-deep);
  font-weight: 700;
}

/* ---------- Add-on Section (inspired by conexa.software) ---------- */
.addon-section {
  margin-bottom: 1.25rem;
}

.addon-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  gap: 1rem;
}

.addon-info {
  font-size: var(--step--1);
}

.addon-info strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.addon-info small {
  color: var(--muted);
  font-size: 0.82rem;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.qty-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.15s ease;
  line-height: 1;
}

.qty-btn:hover:not(:disabled) {
  border-color: var(--green-deep);
  color: var(--green-deep);
  background: var(--green-tint);
}

.qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.qty-count {
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 2.2rem;
  text-align: center;
  color: var(--ink);
}

.addon-summary-note {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.45rem;
  line-height: 1.4;
}

.interval-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  background: var(--paper-2);
}

.interval-row .active {
  color: var(--ink);
}

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: background 0.2s;
}

.switch-track::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform 0.2s;
}

.switch input:checked + .switch-track {
  background: var(--green-deep);
}

.switch input:checked + .switch-track::before {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
}

.step-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.step-nav .btn-primary {
  flex: 1;
  justify-content: center;
}

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.field label b {
  color: var(--red);
  font-weight: 700;
}

.field small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  min-height: 44px;
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px var(--green-tint-2);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-row-inline {
  display: flex;
  gap: 0.5rem;
}

.field-row-inline input {
  flex: 1;
}

.field-row-inline .btn {
  white-space: nowrap;
  font-size: var(--step--1);
}

.field-status {
  display: block;
  font-size: 0.8rem;
  min-height: 1.2em;
  margin-top: 0.3rem;
}

.field-status.ok { color: var(--success-ink); }
.field-status.err { color: var(--danger-ink); }
.field-status.loading { color: var(--muted); }

/* ── Erori de formular ────────────────────────────────────────────────────────
   Înlocuiesc alert(): fereastra de sistem bloca pagina, nu spunea care câmp e
   greșit decât prin text și dispărea la prima atingere pe telefon. Mesajul stă
   sub câmpul vinovat, iar câmpul primește aria-invalid, deci și un cititor de
   ecran ajunge la el. */
.field-error {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--danger-ink);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.check-line input[aria-invalid="true"],
.field-row-inline input[aria-invalid="true"] {
  border-color: var(--danger-ink);
  /* Culoarea singură nu e suficientă: conturul îngroșat marchează câmpul și
     pentru cine nu distinge roșul. */
  box-shadow: inset 0 0 0 1px var(--danger-ink);
}

/* ── Pagina de contact ────────────────────────────────────────────────────────
   Formularul e drumul principal; adresele de email rămân alături, ca alternativă
   pentru cine preferă clientul lui de mail (și ca singur drum corect pentru
   raportarea unei vulnerabilități). Pe telefon se așază unul sub altul. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.contact-form {
  min-width: 0;
}

.contact-aside .contact {
  /* `.contact` e o grilă de trei coloane pe lățimea paginii; într-o coloană laterală
     asta rupea adresele de email în două. Aici cele trei cartonașe se așază unul sub altul. */
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* O adresă lungă își caută singură un loc de rupere în loc să iasă din cartonaș. */
.contact-aside .big {
  overflow-wrap: anywhere;
}

/* O bifă cu textul ei: caseta nu se micșorează când textul curge pe mai multe
   rânduri, iar toată linia e zonă de clic pentru că e un <label>. */
.check-line {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
  font-size: var(--step--1);
  line-height: 1.5;
  cursor: pointer;
}

.check-line input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--green-deep);
}

.check-line.consent {
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.check-line b {
  color: var(--red);
  font-weight: 700;
}

/* Capcana pentru roboți: scoasă din pagină fără `display:none`, pe care unele
   roboți îl citesc și îl ocolesc. Un om nu ajunge la ea nici cu Tab. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Eroarea de pas: cererea către server a eșuat, nu un câmp anume. */
.form-error {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--danger-ink);
  background: var(--danger-tint);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.form-error strong {
  display: block;
  color: var(--danger-ink);
  margin-bottom: 0.15rem;
}

.confirm-h {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.25rem 0 0.6rem;
}

.confirm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.confirm-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.confirm-table td:last-child {
  text-align: right;
  font-weight: 600;
}

.confirm-table tr.total td {
  border-bottom: 0;
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--green-ink);
}

.confirm-billing {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.center { text-align: center; }

.link-btn {
  background: none;
  border: 0;
  color: var(--green-deep);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.result {
  text-align: center;
  padding: 3rem 1.5rem !important;
}

.result-mark {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--ink-2);
  margin-bottom: 1rem;
}

.result-mark.ok {
  background: var(--green-tint-2);
  color: var(--green-ink);
}

.result .actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--step--1);
  margin-bottom: 0.45rem;
}

.sum-row.total {
  font-size: var(--step-0);
  font-weight: 700;
}

.sum-row .good { color: var(--green-deep); }

.sum-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0.75rem 0;
}

@media (max-width: 900px) {
  .checkout {
    grid-template-columns: 1fr;
  }
  .checkout-side {
    position: static;
  }
}

.checkout [hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .tier-tabs,
  .field-grid {
    grid-template-columns: 1fr;
  }
  .field-row-inline {
    flex-direction: column;
  }
  .plan-detail-head {
    flex-direction: column;
    gap: 0.5rem;
  }
  .co-steps li {
    font-size: 0.8rem;
  }
}

.session-mock .cam {
  position: absolute;
  left: 8%;
  bottom: 14%;
  width: 26%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: linear-gradient(160deg, oklch(0.52 0.05 200), oklch(0.34 0.04 230));
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.4rem 0.45rem;
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--on-green);
}
.session-mock .cam b {
  font-weight: 600;
}
.session-mock .cam span {
  opacity: 0.75;
}
.session-mock .cam::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--green-bright);
}
@media (max-width: 900px) {
  .session-mock .cam { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mișcare — cele șapte direcții din stare-proiect/COMPARATIE-ANYDESK.md §10.
   Regula peste tot: mișcarea explică ceva (ordinea de citire, ce e apăsabil,
   ce se întâmplă într-o sesiune). Nimic decorativ care se mișcă singur în gol.
   Totul se stinge la prefers-reduced-motion, la finalul secțiunii.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero: intrare în cascadă, în ordinea în care se citește ───────────── */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .hero-actions,
.hero .hero-note,
.hero .session-mock {
  animation: hero-in 0.75s var(--ease) backwards;
}
.hero .eyebrow      { animation-delay: 0.05s; }
.hero h1            { animation-delay: 0.14s; }
.hero .lede         { animation-delay: 0.26s; }
.hero .hero-actions { animation-delay: 0.38s; }
.hero .hero-note    { animation-delay: 0.48s; }
.hero .session-mock { animation-delay: 0.30s; animation-duration: 0.9s; }

/* ── 6. Fundalul hero: o singură pată de lumină, foarte lentă ─────────────── */
/* Metafora „gustului acru", folosită selectiv: o singură apariție pe pagină, în spatele
   produsului, niciodată lângă o afirmație tehnică. Vezi ../../DESIGN.md.
   SUBSTITUENTUL A FOST ÎNLOCUIT. Până acum era un decupaj din fișa generată
   assets/img/brand/04-brand.png — la rezoluție mică și înmuiat, cu avertisment în cod
   să fie schimbat înainte de publicare. Acum e fotografia proprie
   `_lucru/imagini-sursa/elemente-grafice/lamaie-05.png` (1536×1024), decupată pătrat pe
   lămâie și scoasă la 1024×1024 webp: 52 KB față de 213 KB cât avea jpeg-ul înmuiat. */
.hero::after {
  content: "";
  position: absolute;
  /* Fișa 01: fotografia ocupă jumătatea dreaptă întreagă, până în marginile
     ecranului, la opacitate plină. Masca dizolvă doar muchia dinspre text,
     ca titlul să nu se sprijine pe o tăietură dreaptă. */
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(38%, 46vw, 54%);
  /* Încadrarea nu se mai corectează din CSS: decupajul pe lămâie e făcut la export,
     deci fișierul e deja centrat pe subiect. Vechiul `26% center` compensa faptul că
     substituentul avea lămâia clară în stânga cadrului. */
  background: url("../img/citrus-hero.webp") center / cover no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 22%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 22%, #000 52%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  /* Pe mobil fotografia trece în spatele textului, deci se stinge ca să nu
     îngroape titlul.
     0,24 și nu 0,3: fotografia nouă are lămâia mare și luminoasă exact în spatele
     paragraful, unde cea veche avea frunze închise. Măsurat pe pagină, pe pixelul
     cel mai deschis din spatele fiecărui bloc de text:
       veche @0,30 → titlu 5,54  paragraf 5,10  notă 6,02
       nouă  @0,30 → titlu 6,16  paragraf 4,23 ✗  notă 4,87
       nouă  @0,24 → titlu 7,59  paragraf 5,15  notă 5,78
     Paragraful e 20,35px la greutate 400, deci NU e „text mare": pragul e 4,5:1, iar
     4,23 cădea sub el. La 0,24 trece, și trece peste unde era înainte. */
  .hero::after {
    width: 100%;
    opacity: 0.24;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 780px;
  max-height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.45 0.12 145 / 0.55), transparent 64%);
  pointer-events: none;
  animation: hero-glow 22s ease-in-out infinite alternate;
}
.hero { position: relative; }
.hero .wrap { position: relative; z-index: 1; }
@keyframes hero-glow {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  to   { transform: translate3d(-4%, 5%, 0) scale(1.12); opacity: 1; }
}

/* ── 3. Mock-ul plutește, iar umbra respiră odată cu el ───────────────────── */
.session-mock {
  animation: mock-float 9s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mock-float {
  from { transform: rotate(-1deg) translateY(0); box-shadow: 0 30px 60px -30px oklch(0.2 0.08 144 / 0.7); }
  to   { transform: rotate(-0.6deg) translateY(-10px); box-shadow: 0 44px 76px -32px oklch(0.2 0.08 144 / 0.85); }
}

/* ── 2. Mock-ul ca mini-demo: cursorul merge spre Accept, care pulsează ───── */
@keyframes cursor-to-accept {
  0%,  8%   { left: 44%; top: 42%; }
  26%, 34%  { left: 62%; top: 76%; }   /* deasupra butonului Accept */
  38%       { left: 62.5%; top: 76.5%; }
  60%, 100% { left: 44%; top: 42%; }
}
.session-mock .consent {
  animation: consent-attention 9s var(--ease) infinite;
}
@keyframes consent-attention {
  0%, 22%   { box-shadow: 0 14px 30px -12px oklch(0.2 0.02 144 / 0.8); }
  32%, 44%  { box-shadow: 0 14px 30px -12px oklch(0.2 0.02 144 / 0.8), 0 0 0 3px oklch(0.74 0.19 142 / 0.55); }
  56%, 100% { box-shadow: 0 14px 30px -12px oklch(0.2 0.02 144 / 0.8); }
}
.session-mock .consent .row span.ok {
  animation: accept-press 9s var(--ease) infinite;
}
@keyframes accept-press {
  0%, 34%   { transform: none; }
  40%       { transform: scale(0.94); }
  48%, 100% { transform: none; }
}

/* ── 4. Hover: ce e apăsabil se ridică, ce e text nu se mișcă ─────────────── */
.plan,
.sec-item,
.dl,
.step {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.plan:hover,
.dl:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.step:hover,
.sec-item:hover {
  border-top-color: var(--green);
}
.also li {
  transition: border-top-color 0.25s var(--ease);
}
.also li:hover {
  border-top-color: var(--green);
}
.feature .art {
  transition: transform 0.35s var(--ease);
}
.feature:hover .art {
  transform: translateY(-3px);
}
.btn:hover {
  transform: translateY(-1px);
}

/* ── 5. Stagger la reveal: 80 ms între frații din același grup ────────────── */
.reveal[style*="--d"] {
  transition-delay: var(--d);
}

/* ── 7. Prețuri: cifra se schimbă cu o tranziție, nu prin salt ────────────── */
.plan .price {
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.plans.is-switching .price {
  opacity: 0;
  transform: translateY(-4px);
}
.interval-btn {
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* ── Stingerea completă ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero h1,
  .hero .lede,
  .hero .hero-actions,
  .hero .hero-note,
  .hero .session-mock,
  .hero::before,
  .session-mock,
  .session-mock .cursor,
  .session-mock .consent,
  .session-mock .consent .row span.ok {
    animation: none;
  }
  .session-mock { transform: rotate(-1deg); }
  .plan:hover,
  .dl:hover,
  .feature:hover .art,
  .btn:hover,
  .btn:active {
    transform: none;
  }
  .reveal[style*="--d"] { transition-delay: 0s; }
  .plans.is-switching .price { opacity: 1; transform: none; }
}

/* ── Configuratorul de pachet (pricing.html) ──────────────────────────────── */
.chooser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.chooser fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-4);
}
.chooser legend {
  padding: 0;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.chooser .opts {
  display: grid;
  gap: var(--space-1);
}
.chooser label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.chooser label:hover {
  border-color: var(--green-deep);
}
.chooser label:has(input:checked) {
  border-color: var(--green-deep);
  background: var(--green-tint);
}
.chooser label:focus-within {
  outline: 2px solid var(--green-deep);
  outline-offset: 2px;
}
.chooser-out {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 10px;
  background: var(--green-ink);
  color: var(--on-green);
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}
.chooser-out .chooser-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-bright);
}
.chooser-out strong {
  font-size: var(--step-2);
  line-height: 1.1;
}
.chooser-out p {
  color: oklch(0.985 0.012 142 / 0.85);
  margin: 0;
  max-width: 52ch;
}
.chooser-out .btn {
  margin-top: 0.6rem;
  background: var(--on-green);
  border-color: var(--on-green);
  color: var(--green-ink);
}
@media (max-width: 900px) {
  .chooser { grid-template-columns: 1fr; }
}

/* ── Linia-accent din titlul hero (fișele de brand: a doua linie în verde) ─── */
.hero h1 .accent {
  color: var(--lemon-leaf);
}

/* ── Taglineul de brand din footer ──────────────────────────────────────────
   „Support, without the sour." — completează mesajul funcțional, nu-l înlocuiește. */
.site-footer .tagline {
  display: block;
  color: var(--lemon);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* ── Cardul cu adresa dispozitivului ────────────────────────────────────────
   Fișa 04-cards: fiecare cifră în plăcuța ei, pe fundal închis. Aici trăiește
   GALBENUL — accentul e legat de obiectul-semnătură al produsului, adresa
   permanentă, nu împrăștiat prin pagină. Vezi ../../DESIGN.md. */
.session-code {
  margin-top: var(--space-4);
  display: inline-grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--pulp);
}
.session-code-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.979 0.031 93 / 0.55);
}
.session-code .digits {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.session-code .digits b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--lemon);
  background: oklch(0.244 0.038 252);
  border-radius: 7px;
  padding: 0.42rem 0.5rem;
  min-width: 1.75rem;
  text-align: center;
}
.session-code .digits i {
  width: 0.35rem;
}
.session-code-note {
  font-size: 0.78rem;
  color: oklch(0.979 0.031 93 / 0.6);
}
@media (max-width: 460px) {
  .session-code .digits b { font-size: 1.05rem; min-width: 1.4rem; padding: 0.35rem 0.35rem; }
}

/* ── Badge-ul planului preferat: galben cu text navy (11.4:1), ca în fișa 04 ── */
.plan-badge {
  background: var(--lemon);
  color: var(--navy);
}

/* ── Titluri în două tonuri: a doua parte în verde (fișele 04 și 08) ───────── */
.accent {
  color: var(--leaf-mid);
}
.hero .accent,
.section-green .accent,
.section-dark .accent {
  color: var(--lemon-leaf);
}

/* ── Secțiune închisă, pentru ritmul alternant din fișa 08 ─────────────────── */
.section-dark {
  background: var(--surface-dark);
  color: var(--pulp);
  /* Tokenurile de text sunt calibrate pe hârtie deschisă: --ink-2 pe navy dă
     1,93:1, sub pragul AA de 4,5:1. Se redefinesc local, deci orice descendent
     care le folosește rămâne lizibil fără o regulă separată pentru fiecare. */
  --ink: var(--pulp);
  --ink-2: oklch(0.979 0.031 93 / 0.78);
  --muted: oklch(0.979 0.031 93 / 0.62);
  --green-deep: var(--lemon-leaf);
}

/* ── Motivul de citrice din „Who it is for" ───────────────────────────────────
   Secțiunea are șase fișe scurte pe trei coloane și rămâne cu un sfert de lățime
   gol în dreapta capului de secțiune — măsurat, nu bănuit. Aici intră fotografia,
   după regula deja stabilită în fișier: citricele stau ÎN SPATE, șterse, cu
   marginile dizolvate de mască, niciodată ca element de prim-plan.

   O singură secțiune primește motivul, nu amândouă cele închise: `#how` e plină
   (șase pași plus plăcuța cu adresa) și a doua lămâie la trei ecrane distanță de
   prima ar fi repetiție, nu ritm.

   Selectorul e pe id fiindcă `#for` există numai în index.html — motivul e legat
   de conținutul acelei secțiuni, nu de clasa `.section-dark`, pe care o poartă și
   `#how`. Sub 900px dispare: acolo coloanele se string și fotografia ar ajunge sub
   text, exact ca fotografia din hero, care se stinge la același prag. */
#for {
  position: relative;
  overflow: hidden;
}

#for::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -2%;
  width: min(38vw, 520px);
  aspect-ratio: 3 / 2;
  background: url("../img/citrus-for.webp") center / contain no-repeat;
  opacity: 0.45;
  /* Mască radială, nu liniară: stinge fotografia pe toate laturile, deci n-are cum
     să rămână o muchie dreaptă pe marginea secțiunii. */
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 42%, transparent 88%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 42%, transparent 88%);
  pointer-events: none;
  z-index: 0;
}

/* Conținutul trece deasupra motivului. */
#for > .wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  #for::after { display: none; }
}
.section-dark .lede,
.section-dark .muted,
.section-dark .also li span {
  color: oklch(0.979 0.031 93 / 0.72);
}
.section-dark .eyebrow {
  color: var(--lemon-leaf);
}
.section-dark .also li,
.section-dark .step,
.section-dark .sec-item,
.section-green .step,
.section-green .sec-item {
  border-top-color: oklch(0.979 0.031 93 / 0.16);
}
.section-dark .also li:hover,
.section-dark .step:hover,
.section-dark .sec-item:hover,
.section-green .step:hover,
.section-green .sec-item:hover {
  border-top-color: var(--lemon-leaf);
}
.section-dark a:not(.btn) {
  color: var(--lemon-leaf);
}

/* ── Note și angajamente comerciale (pricing.html) ────────────────────────── */
.pricing-intro-banner {
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: var(--paper-2);
  font-size: var(--step--1);
  max-width: 100%;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pricing-intro-banner strong {
  color: var(--ink);
}

.pricing-notes {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.4rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.pricing-notes p {
  margin: 0;
}

.commitments-box {
  margin-top: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: 0 4px 20px rgba(8, 18, 32, 0.04);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}

.commitments-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.commitments-head strong {
  display: block;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.commitments-date {
  display: block;
  font-size: var(--step--2);
  color: var(--muted);
  margin-top: 0.2rem;
}

.commitments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.commitment-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.commitment-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--leaf);
  background: var(--pulp);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  align-self: flex-start;
  border: 1px solid var(--lemon-leaf);
}

.commitment-item h4 {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.commitment-item p {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 860px) {
  .commitments-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ── Cardul-tagline de pe pagina de prețuri (fișa 08, secțiunea 06) ────────── */
.sour-card {
  margin-top: var(--space-6);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--pulp);
  border: 1px solid var(--green-tint-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.sour-card::after {
  content: "";
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(28%, 240px);
  aspect-ratio: 1;
  background: url("../img/citrus-slice.webp") center / contain no-repeat;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.sour-card > * {
  position: relative;
  z-index: 1;
}

.sour-card-text {
  display: grid;
  gap: 0.4rem;
  max-width: 48ch;
}

.sour-tag {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
}

.sour-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--step-0);
}

.sour-card .btn {
  margin-top: 0;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mock-ul spațiului de lucru din hero — după fișa assets/img/brand/07-brand.png.
   Nu e o captură: e HTML, deci se traduce, se scalează și nu se învechește.
   Toate suprafețele vin din scara navy de mai jos, nu din griuri de nicăieri.
   ═══════════════════════════════════════════════════════════════════════════ */
.app-mock {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-2);
  border: 1px solid var(--surface-line-dark);
  box-shadow: 0 34px 70px -34px oklch(0.08 0.02 257 / 0.85);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--on-dark);
  animation: mock-float 9s ease-in-out infinite alternate;
  will-change: transform;
}

.app-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.85rem;
  background: var(--surface-dark-1);
  border-bottom: 1px solid var(--surface-line-dark);
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.app-brand i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px 6px 2px 6px;
  background: var(--lemon-leaf);
}
.app-sep {
  width: 1px;
  height: 0.9rem;
  background: var(--surface-line-dark);
}
.app-meta {
  color: var(--on-dark-2);
}
.app-meta b {
  color: var(--lemon);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.app-time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.app-conn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--lemon-leaf);
}
.app-conn::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--lemon-leaf);
}
.app-lock svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--on-dark-3);
  display: block;
}

.app-body {
  display: grid;
  grid-template-columns: 6.8rem minmax(0, 1fr) 12.5rem;
  min-height: clamp(26rem, 42vw, 34rem);
}
.app-side {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.75rem 0.5rem;
  border-right: 1px solid var(--surface-line-dark);
}
.app-side span {
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  color: var(--on-dark-2);
  font-size: 0.76rem;
}
.app-side .on {
  background: var(--surface-dark-2);
  color: var(--pulp);
  box-shadow: inset 2px 0 0 var(--lemon-leaf);
}

.app-screen {
  position: relative;
  padding: 0.75rem;
  background: oklch(0.14 0.03 255);
}
.app-desktop {
  position: relative;
  height: 100%;
  min-height: clamp(24rem, 40vw, 32rem);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, oklch(0.35 0.12 250 / 0.8), transparent 60%),
    linear-gradient(160deg, #11263d 0%, #0c1a29 55%, #060e17 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.app-desktop .win {
  position: absolute;
  left: 5%;
  top: 6%;
  width: 90%;
  height: 84%;
  border-radius: 10px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #1e293b;
}

/* Window Header */
.win-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  user-select: none;
}
.win-controls {
  display: flex;
  gap: 0.35rem;
}
.win-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  display: inline-block;
}
.win-dot.close { background: #ef4444; }
.win-dot.min { background: #f59e0b; }
.win-dot.max { background: #10b981; }

.win-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  flex: 1;
}
.win-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.win-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 50px;
  background: #dcfce7;
  color: #166534;
}

/* Window Subbar */
.win-subbar {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.7rem;
  color: #64748b;
  overflow-x: auto;
}
.win-subbar span {
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.win-subbar span.active {
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 600;
}

/* Window Body & KPIs */
.win-body {
  padding: 0.75rem 0.85rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: #ffffff;
  overflow-y: auto;
}
.win-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.win-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.win-kpi small {
  font-size: 0.62rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.win-kpi strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.win-kpi .trend {
  font-size: 0.62rem;
  color: #16a34a;
  font-weight: 600;
}
.win-kpi .status-ok {
  font-size: 0.62rem;
  color: #0284c7;
  font-weight: 600;
}

/* Window Table */
.win-table {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.68rem;
}
.win-row {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr 1.2fr;
  padding: 0.35rem 0.55rem;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
}
.win-row:last-child {
  border-bottom: 0;
}
.win-row.header {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}
.win-row.active-row {
  background: #f0f9ff;
  border-left: 3px solid #0284c7;
}
.pill-green {
  background: #dcfce7;
  color: #166534;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.6rem;
  display: inline-block;
  width: fit-content;
}
.pill-blue {
  background: #e0f2fe;
  color: #0369a1;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.6rem;
  display: inline-block;
  width: fit-content;
}
.pill-gray {
  background: #f1f5f9;
  color: #475569;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.6rem;
  display: inline-block;
  width: fit-content;
}

.app-desktop .cursor {
  position: absolute;
  left: 58%;
  top: 54%;
  width: 14px;
  height: 20px;
  fill: var(--pulp);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  z-index: 10;
}
.app-desktop .app-taskbar {
  position: absolute;
  inset: auto 0 0 0;
  height: 1.75rem;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  gap: 0.4rem;
  font-size: 0.68rem;
  z-index: 5;
}
.tb-start {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 4px;
  background: var(--lemon-leaf);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tb-start i {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--navy);
  border-radius: 2px;
}
.tb-app {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  cursor: pointer;
}
.tb-app.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--lemon-leaf);
}
.tb-tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.65rem;
}
.app-consent {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  background: var(--leaf);
  color: var(--lemon-leaf);
  box-shadow: var(--shadow-sm);
}

.app-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--surface-line-dark);
}
.app-cam {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.app-cam img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app-live {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-xs);
  background: var(--lemon-leaf);
  color: var(--navy);
}
.app-cam-name {
  position: absolute;
  left: 0.45rem;
  bottom: 0.35rem;
  font-size: 0.66rem;
  color: var(--pulp);
  text-shadow: 0 1px 3px oklch(0.08 0.02 257 / 0.9);
}
.app-chat {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 0.5rem;
  border-top: 1px solid var(--surface-line-dark);
}
.app-chat-head {
  font-weight: 600;
  color: var(--on-dark-2);
  font-size: 0.68rem;
}
.app-chat p {
  margin: 0;
  font-size: 0.66rem;
  color: var(--on-dark-2);
}
.app-chat p b {
  display: block;
  color: var(--pulp);
  font-weight: 600;
}
.app-chat p.me b {
  color: var(--lemon-leaf);
}
.app-chat-input {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  background: var(--surface-dark-2);
  font-size: 0.64rem;
  color: var(--on-dark-3);
}
.app-chat-input i {
  margin-left: auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--lemon-leaf);
  flex: none;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-dark-1);
  border-top: 1px solid var(--surface-line-dark);
  color: var(--on-dark-2);
  font-size: 0.7rem;
}
.app-end {
  margin-left: auto;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  background: var(--danger);
  color: var(--pulp);
  font-weight: 600;
}

@media (max-width: 900px) {
  .app-body { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .app-rail { display: none; }
  .app-mock { animation: none; }
}

/* ── Starea conexiunii (fișa 06-brand): verde conectat, roșu întrerupt ─────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--step--1);
  font-weight: 600;
  border: 1px solid transparent;
}
.status-pill::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.status-pill.is-ok {
  background: var(--success-tint);
  border-color: var(--success);
  color: var(--success-ink);
}
.status-pill.is-down {
  background: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger-ink);
}
.status-pill.is-wait {
  background: var(--warning-tint);
  border-color: var(--warning);
  color: var(--warning-ink);
}

/* ── Banda finală (fișa 12): un card închis, nu o secțiune plină ───────────── */
.closing {
  padding-block: var(--space-8);
}
.closing-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--pulp);
  position: relative;
  overflow: hidden;
}
/* Felia stătea ca fundal al cardului, la 30% lățime, adică un disc galben aprins
   peste care treceau cele trei rânduri de text. Acum e element separat: mică,
   ștearsă, în colț, sub conținut.
   Ăsta e locul din captura userului — de aici a pornit FIX-01: se vedea că felia
   e desenată, nu fotografiată. Acum e fotografie (vezi `.page-head::after`).
   Cardul e închis, deci aici fundalul transparent nu e obligatoriu — dar e același
   fișier pentru toate patru locurile, deci se descarcă o singură dată. */
.closing-card::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -46%;
  width: min(26%, 230px);
  aspect-ratio: 1;
  background: url("../img/citrus-slice.webp") center / contain no-repeat;
  /* 0,35, nu 0,20 cât avea desenul. Singurul din cele patru locuri unde opacitatea
     a trebuit URCATĂ: vectorul era galben plat și aprins, fotografia are umbre și o
     luminanță medie mai mică, deci pe cardul închis la 0,20 aproape dispărea.
     Comparat pe pagină, 0,20 / 0,28 / 0,35, față de captura de dinainte: 0,35 redă
     aceeași prezență pe care o avea desenul.
     Celelalte trei locuri și-au păstrat opacitatea — acolo fundalul e deschis și
     fotografia se citea de la început la fel de bine ca desenul. */
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.closing-card > * {
  position: relative;
  z-index: 1;
}
.closing-card h2 {
  margin: 0;
}
.closing-card .accent {
  color: var(--lemon-leaf);
}
.closing-card .lede {
  color: oklch(0.979 0.031 93 / 0.78);
  margin-top: 0.85rem;
}
.closing-assurances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: oklch(0.979 0.031 93 / 0.82);
}
.closing-assurances li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}
.closing-assurances li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  margin-top: 0.1rem;
  background: var(--lemon-leaf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 74% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 74% no-repeat;
}
@media (max-width: 860px) {
  .closing-card { grid-template-columns: 1fr; background-size: 46%; }
}

/* ── Lista scurtă de funcții din prima coloană a footerului (fișa 12) ──────── */
.foot-features {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--step--1);
}
.foot-features li {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}
.foot-features li {
  color: oklch(0.979 0.031 93 / 0.8);
}
.foot-features li::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background: var(--lemon-leaf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Banda de control de pe pagina de securitate (fișa 10) ─────────────────── */
.control-band {
  margin: var(--space-7) 0;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--pulp);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.control-lead h2 {
  margin: 0;
  font-size: var(--step-2);
}
.control-lead p {
  margin-top: 0.7rem;
  color: oklch(0.979 0.031 93 / 0.72);
  font-size: var(--step--1);
}
.control-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}
.control-list li {
  font-size: var(--step--1);
  color: oklch(0.979 0.031 93 / 0.75);
  border-top: 1px solid oklch(0.979 0.031 93 / 0.16);
  padding-top: 0.7rem;
}
.control-list b {
  display: block;
  color: var(--lemon-leaf);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
@media (max-width: 860px) {
  .control-band { grid-template-columns: 1fr; }
  .control-list { grid-template-columns: 1fr; }
}

/* ── Cele trei căi de conectare de pe pagina de download (fișa 11) ─────────── */
.ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ways > div {
  border-top: 1px solid oklch(0.979 0.031 93 / 0.18);
  padding-top: var(--space-4);
  transition: border-top-color 0.25s var(--ease);
}
.ways > div:hover {
  border-top-color: var(--lemon-leaf);
}
.ways h3 {
  margin: 0 0 0.5rem;
  font-size: var(--step-0);
  color: var(--pulp);
}
.ways p {
  color: oklch(0.979 0.031 93 / 0.74);
  font-size: var(--step--1);
}

/* ── Cardul-tagline pe ecran mic: textul nu intră peste imagine ────────────── */
@media (max-width: 640px) {
  .sour-card {
    background-position: right -26% bottom -22%;
    background-size: 58%;
  }
  .sour-tag {
    max-width: 100%;
  }
}

/* ── Butonul pătrat de download din antetul mobil (fișa 03: 36×36, radius 8) ── */
/* 15.09.2026 (cr-1): 44×44, ținta de atingere cerută de fișa 15 § 5 și pe ecranele fără touch. */
.nav-dl {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--leaf-mid);
  color: var(--pulp);
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color 0.2s var(--ease);
}
.nav-dl:hover {
  background: var(--leaf);
}
.nav-dl svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 860px) {
  .nav-dl {
    display: inline-flex;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Focus vizibil — fișa 14 dă o culoare dedicată („Border Focus #9ED36A") și
   nu era folosită nicăieri. Un inel pe fiecare element focusabil, care se vede
   pe ambele fundaluri.
   ═══════════════════════════════════════════════════════════════════════════ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.section-dark :focus-visible,
.section-green :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--lemon);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reguli de mobil — fișa 15 (assets/img/brand/15-brand.png).
   Praguri declarate acolo: mobil 0–480, tabletă 481–1024, desktop 1025+.
   Pragurile de așezare rămân conduse de conținut (860/900px): la 1024px
   meniul de 5 intrări încă încape, iar la 480px cardurile s-ar fi rupt demult.
   Ce se aplică literal e checklistul: ținte de atingere, spațiere, lățimi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ținte de atingere ≥ 44×44px (fișa 15 § 5), inclusiv acolo unde elementul
   desenat e mai mic: butonul de download din antet e 36×36 în fișa 03. */
@media (pointer: coarse) {
  .nav-toggle {
    width: 44px;
    height: 44px;
  }
  .nav-dl {
    position: relative;
  }
  .nav-dl::after {
    content: "";
    position: absolute;
    inset: -4px;
  }
  .nav a:not(.btn),
  .site-footer a,
  .toc a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  :root {
    /* Fișa 15 § 3: page padding 16px, section spacing 32–40px, stack 16px. */
    --gutter: 1rem;
  }

  .section,
  .section-dark,
  .section-tight {
    padding-block: var(--space-6);
  }

  /* Butonul primar pe toată lățimea, restul stivuite (fișa 15 § 4, ultimul rând). */
  .hero-actions,
  .closing-card .hero-actions,
  .cta-band .actions {
    display: grid;
    gap: var(--space-3);
  }
  .hero-actions .btn,
  .closing-card .hero-actions .btn,
  .cta-band .actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Zona sigură de jos, pentru telefoanele cu bară de gesturi. */
  .site-footer {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Marca: strângerea de mână în formă de lămâie, cu frunză (assets/img/mark.png,
   96px pentru 28px afișați, deci curată și pe ecrane 3×).
   ⚠️ E ilustrație cu degradeuri, deci raster: spre deosebire de marca SVG de
   dinainte, NU își schimbă culoarea odată cu antetul. Regulile .mk-a/.mk-b/.mk-c
   și închiderea frunzei pe fundal deschis au dispărut împreună cu SVG-ul.
   ═══════════════════════════════════════════════════════════════════════════ */
.brand .mark {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
  object-fit: contain;
}

/* ── Marca scrisă ─────────────────────────────────────────────────────────────
   Antetul și subsolul nu folosesc un fișier de logo: „ConexaRemote" e text HTML.
   Asta rămâne (se selectează, se citește de un cititor de ecran, nu se pixelează),
   dar litera se apropie de logo-ul de brand:

     · greutatea 800, nu 700 — în logo litera e o grotescă grea, iar Poppins 800 e deja
       încărcat pe fiecare pagină (îl folosesc titlurile), deci nu costă nimic în plus;
     · tracking mai strâns, ca în logo, unde literele aproape se ating;
     · pe „Remote" — textura de frunză, decupată din chiar logo-ul de brand
       (bara literei „R", singura zonă fără fundal negru în ea).

   Litera exactă din logo NU e Poppins, ci o grotescă cu „a" în două etaje. Fișierul
   fontului nu e în brand-assets, deci asta e cel mai aproape fără să cer altceva. */
.wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wordmark b {
  font-weight: 800;
  /* Culoarea rămâne definită: e ce se vede dacă textura nu se încarcă sau dacă
     browserul nu știe `background-clip: text`. Nu e o rezervă teoretică — pe antetul
     navy și pe subsol e exact verdele din logo. */
  color: var(--lemon-leaf);
}
.is-scrolled .wordmark b {
  color: var(--leaf-mid);
}
.site-footer .wordmark b {
  color: var(--lemon-leaf);
}

/* Textura intră doar unde chiar poate fi decupată pe literă. Altfel, `color: transparent`
   ar șterge cuvântul. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* `.is-scrolled .wordmark b` și `.site-footer .wordmark b` sunt mai specifice decât
     `.wordmark b`, deci readuceau culoarea opacă peste textură: frunza se vedea doar pe
     antetul navy, de sus. Le trec și pe ele pe transparent, aici, unde textura chiar există. */
  .wordmark b,
  .is-scrolled .wordmark b,
  .site-footer .wordmark b {
    color: transparent;
  }
  .wordmark b {
    background-image: url('../img/leaf-text.webp');
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
  /* Textura e desenată pentru fundal negru: pe antetul crem, de la scroll, e prea deschisă.
     O închid, dar nu până la verde plat — la 0.58 nervurile dispăreau cu totul și rămânea o
     pată. Măsurat pe pagina randată: la valorile de mai jos litera iese rgb(43,96,27), adică
     6,1:1 față de crem — peste pragul AA de 4,5:1, deși un logotip nici n-ar fi obligat. */
  .is-scrolled .wordmark b {
    filter: brightness(0.82) saturate(1.4) contrast(1.25);
  }
}

/* În modul de contrast forțat, fundalul decupat pe literă nu se desenează, iar un text
   transparent ar dispărea de tot. */
@media (forced-colors: active) {
  .wordmark b {
    background-image: none;
    color: CanvasText;
    filter: none;
  }
}
@media (max-width: 860px) {
  .brand .mark { width: 28px; height: 28px; }   /* fișa 03: logo mai mic pe mobil */
}

/* Pe desktop marca stă mai mare în antet. Motivul e că din `mark.png` (96×96) doar
   79×72 px sunt desenați — restul e transparent — deci la o cutie de 32px marca are
   24px de cerneală și se pierde într-un antet de 72px.
   44px ⇒ 33px desenați: mai înaltă decât cutia de linie a lui „ConexaRemote" (~28px),
   fără să aglomereze. La 48px frunza ajunge prea aproape de marginea antetului.
   Pragul e 861px, adică exact unde nav-ul iese din hamburger — nu unul inventat.
   ⚠️ Antetul NU crește: `.site-header .wrap` are min-height 72px și padding vertical 0,
   deci orice marcă sub 72px îl lasă la 73px. Verificat: 73px la 32, 40, 44 și 48.
   Doar antetul: `.site-footer .brand` rămâne la 32px, n-are aerul care creează problema. */
@media (min-width: 861px) {
  .site-header .brand .mark { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Iconițe — stilul fișelor: 24×24, linie 2px, capete rotunjite.
   Sunt măști CSS, nu SVG în markup: trăiesc într-un singur loc, își iau
   culoarea din `currentColor` și nu adaugă noduri în fiecare pagină.
   Folosire: <span class="ico ico-chat"></span>
   ═══════════════════════════════════════════════════════════════════════════ */
.ico {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.ico-lg { width: 1.6rem; height: 1.6rem; }

/* Plăcuța rotunjită care ține iconița (fișele 06 și 10). */
.ico-chip {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-md);
  background: var(--surface-4);
  color: var(--leaf-mid);
}
.section-dark .ico-chip,
.section-green .ico-chip,
.site-footer .ico-chip {
  background: oklch(0.979 0.031 93 / 0.10);
  color: var(--lemon-leaf);
}


/* Iconițele din listele de tip „also": pe același rând cu titlul. */
.also li strong,
.foot-features li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.also li strong .ico {
  color: var(--leaf-mid);
}
.section-dark .also li strong .ico,
.site-footer .ico {
  color: var(--lemon-leaf);
}
/* Lista din footer nu mai are nevoie de bifa desenată: are acum iconițe proprii. */
.foot-features li::before {
  content: none;
}
.foot-features {
  grid-template-columns: none;
}
.foot-features li {
  grid-template-columns: none;
}

/* Plăcuța stă deasupra titlului, în blocurile de funcții și de securitate. */
.feature .text .ico-chip,
.sec-item .ico-chip,
.ways .ico-chip {
  margin-bottom: 0.85rem;
}

/* Sigle de platformă (fișele 05 și 11): forme pline, nu contururi. */

/* Sigla stă lângă numele platformei, aliniată pe linia de bază a textului. */
.dl h2 .ico,
.table td .ico {
  vertical-align: -0.15em;
  margin-right: 0.5rem;
  color: var(--leaf-mid);
}
.dl h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.btn .ico {
  color: currentColor;
}

/* Felia de lămâie pe pagina de negăsit: un semn, nu un ornament. */
.lost-lemon {
  width: 72px;
  height: 72px;
  display: block;
  margin-bottom: var(--space-4);
  opacity: 0.9;
}

/* ── Detalii de mock aduse din fișa 07 ─────────────────────────────────────── */
.app-tools {
  display: inline-flex;
  gap: 0.5rem;
  color: var(--on-dark-3);
}
.app-tools .ico { width: 0.95rem; height: 0.95rem; }

.app-side span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.app-side .ico { width: 0.9rem; height: 0.9rem; }

.app-chat p {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: start;
}
.app-chat .av {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 700;
  background: var(--surface-dark-2);
  color: var(--on-dark-2);
}
.app-chat .av-me {
  background: var(--lemon-leaf);
  color: var(--navy);
}

.app-bar span {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  font-size: 0.6rem;
}
.app-bar .ico { width: 1rem; height: 1rem; }
.app-end {
  display: block !important;
  font-size: 0.7rem !important;
}

/* ── Cardul cu adresa: eticheta, starea și gestul de copiere ──────────────── */
.session-code-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.session-code-label .ico { width: 0.8rem; height: 0.8rem; opacity: 0.6; }
.session-code-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.session-code-note .code-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: var(--lemon-leaf);
}
.session-code-note .code-state::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--lemon-leaf);
}
.session-code-note .ico {
  margin-left: auto;
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.55;
}

/* ── Pastila de etichetă de la baza blocurilor de securitate (fișa 10) ─────── */
.tag-pill {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--surface-4);
  color: var(--leaf);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Plăcuța de iconiță se inversează la hover, ca în fișa 06 §1 — dar doar ea,
   nu tot blocul: un card de text care se face negru sub cursor e greu de citit. */
.sec-item .ico-chip,
.ways .ico-chip {
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.sec-item:hover .ico-chip {
  background: var(--leaf);
  color: var(--lemon-leaf);
}

/* Rândul cu cele trei stări, în documentație. */
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Controale de formular desenate (fișa 14 §5) ───────────────────────────
   Configuratorul folosea butoanele radio implicite ale browserului. */
.chooser input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin: 0;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chooser input[type="radio"]::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-full);
  background: var(--leaf-mid);
  transform: scale(0);
  transition: transform 0.18s var(--ease);
}
.chooser input[type="radio"]:checked {
  border-color: var(--leaf-mid);
}
.chooser input[type="radio"]:checked::after {
  transform: scale(1);
}
.chooser label:hover input[type="radio"] {
  border-color: var(--leaf-mid);
}

/* Comutatorul lunar/anual: pastilă segmentată, cu indicatorul care alunecă. */
.interval-btn {
  border-radius: var(--radius-full);
}

/* ── Linia punctată care leagă pașii fluxului (fișele 09 și 10) ───────────── */
.flow > div {
  position: relative;
}
.flow > div + div::after {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 2.1rem;
  width: 0.5rem;
  border-top: 2px dashed oklch(0.807 0.147 131 / 0.5);
}
@media (max-width: 900px) {
  .flow > div + div::after { display: none; }
}

/* Aceeași legătură între pașii sesiunii de pe pagina principală. */
.steps .step {
  position: relative;
}
.steps .step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  border-top: 2px dashed var(--border-strong);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.steps .step:hover::after {
  opacity: 0.7;
}

.ico-screen { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v11H3z'/><path d='M9 20h6M12 16v4'/></svg>"); }
.ico-video { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='12' height='12' rx='2'/><path d='M15 10l6-3v10l-6-3z'/></svg>"); }
.ico-chat { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 01-8 8H8l-5 3 1.5-4.5A8 8 0 1121 12z'/></svg>"); }
.ico-file { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z'/><path d='M14 3v5h5'/></svg>"); }
.ico-shield { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 4.5-3.2 8.3-8 9.5C7.2 20.3 4 16.5 4 12V6z'/></svg>"); }
.ico-bolt { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7z'/></svg>"); }
.ico-people { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3 20a6 6 0 0112 0'/><path d='M16 5.5a3.2 3.2 0 010 5M18 20a6 6 0 00-2.5-4.9'/></svg>"); }
.ico-globe { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c2.6 3 2.6 15 0 18M12 3c-2.6 3-2.6 15 0 18'/></svg>"); }
.ico-lock { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 018 0v3'/></svg>"); }
.ico-clock { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3.5 2'/></svg>"); }
.ico-key { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='3.5'/><path d='M10 13L20 3M17 6l2.5 2.5M14.5 8.5L17 11'/></svg>"); }
.ico-server { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='6' rx='1.5'/><rect x='3' y='14' width='18' height='6' rx='1.5'/><path d='M7 7h.01M7 17h.01'/></svg>"); }
.ico-eye { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/><circle cx='12' cy='12' r='2.6'/></svg>"); }
.ico-check { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>"); }
.ico-phone { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2.5' width='12' height='19' rx='2.5'/><path d='M11 18.5h2'/></svg>"); }
.ico-keyboard { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='12' rx='2'/><path d='M6 10h.01M10 10h.01M14 10h.01M18 10h.01M8 14h8'/></svg>"); }
.ico-copy { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='12' height='12' rx='2'/><path d='M5 15H4a1 1 0 01-1-1V4a1 1 0 011-1h10a1 1 0 011 1v1'/></svg>"); }
.ico-info { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 7.5h.01'/></svg>"); }
.ico-expand { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3H3v6M15 3h6v6M9 21H3v-6M15 21h6v-6'/></svg>"); }
.ico-more { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='12' r='1.4'/><circle cx='12' cy='12' r='1.4'/><circle cx='19' cy='12' r='1.4'/></svg>"); }
.ico-gear { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h11M19 7h1M4 12h3M11 12h9M4 17h8M16 17h4'/><circle cx='17' cy='7' r='2'/><circle cx='9' cy='12' r='2'/><circle cx='14' cy='17' r='2'/></svg>"); }
.ico-windows { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5.6l8.2-1.13v7.06H3zM12.4 4.3L21 3.12v8.41h-8.6zM3 12.5h8.2v7.06L3 18.43zM12.4 12.5H21v8.4l-8.6-1.18z'/></svg>"); }
.ico-apple { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M16.1 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.15-2.8.85-3.5.85-.7 0-1.85-.83-3.05-.8-1.55.02-3 .9-3.8 2.3-1.62 2.8-.42 6.95 1.16 9.23.77 1.12 1.7 2.37 2.9 2.33 1.16-.05 1.6-.75 3-.75s1.8.75 3.03.72c1.25-.02 2.04-1.14 2.8-2.26.88-1.3 1.25-2.56 1.27-2.62-.03-.01-2.42-.93-2.44-3.7zM13.9 5.6c.63-.77 1.06-1.83.94-2.9-.9.04-2 .6-2.66 1.36-.58.68-1.1 1.77-.96 2.8 1.01.08 2.04-.5 2.68-1.26z'/></svg>"); }
.ico-linux { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2c-2.2 0-3.4 1.7-3.4 3.9 0 1.5.3 2.2-.3 3.2C7.3 10.9 6 12.6 6 14.6c0 .8.2 1.4-.4 2.2-.6.8-1.1 1.2-1.1 1.9 0 .9 1 1.1 2.2 1.3 1 .2 1.6.6 2.5.9.6.2 1.2-.1 1.4-.6h2.8c.2.5.8.8 1.4.6.9-.3 1.5-.7 2.5-.9 1.2-.2 2.2-.4 2.2-1.3 0-.7-.5-1.1-1.1-1.9-.6-.8-.4-1.4-.4-2.2 0-2-1.3-3.7-2.3-5.5-.6-1-.3-1.7-.3-3.2C15.4 3.7 14.2 2 12 2z'/></svg>"); }
.ico-android { --ico: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.551 0 .9993.4482.9993.9993.0001.5511-.4483.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 00-.1521-.5676.416.416 0 00-.5676.1521l-2.0223 3.503C15.5802 8.4116 13.8444 8.1 12 8.1s-3.5802.3116-5.1368.8497L4.8409 5.4467a.4161.4161 0 00-.5677-.1521.4157.4157 0 00-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3432-4.1021-2.6889-7.5743-6.1185-9.4396'/></svg>"); }

/* ── Corecturi văzute doar pe capturi (proba pe ecran, 04.09) ─────────────── */

/* Numele de sub camera din mock era lipit de marginea plăcii și se citea peste
   linia de chat: primește o umbră de fundal și puțin aer. */
.app-cam::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(transparent, oklch(0.181 0.033 257 / 0.75));
  pointer-events: none;
}
.app-cam-name {
  bottom: 0.5rem;
  z-index: 1;
}

/* Bara de sus a mock-ului se rupea pe două rânduri la 390px: pe ecran îngust
   rămâne ce contează — adresa și starea. */
@media (max-width: 640px) {
  .app-brand span,
  .app-time,
  .app-sep {
    display: none;
  }
  .app-top { gap: var(--space-2); }
  .app-meta { font-size: 0.7rem; }
}

/* Felia de pe cardul-tagline era prea mare și se oprea în marginea cardului:
   iese din card, ca în fișe. */
.sour-card {
  background-position: right -18% center;
  background-size: 38%;
}

/* ── T26 (08.09.2026): prima pagină pe rolul ei ─────────────────────────────
   Capturi reale ale machetei în cardurile `.art` (în locul cutiilor tehnice),
   panoul Files din rail-ul machetei (în locul camerei, nelivrată) și cele două
   puncte de descărcare noi: după pași și sub tabelul de platforme. */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.shot figcaption { margin-top: 0.7rem; font-size: var(--step--1); color: var(--muted); }

/* ---------- Workspace (2-Column Desktop Split) ---------- */
.workspace-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.workspace-content {
  display: flex;
  flex-direction: column;
}

.workspace-content .eyebrow {
  margin-bottom: 0.75rem;
}

.workspace-content h2 {
  margin: 0 0 1rem 0;
  line-height: 1.15;
  font-size: clamp(1.85rem, 2.6vw, 2.5rem);
  max-width: none;
}

.workspace-content .lede {
  margin: 0 0 1.75rem 0;
  color: var(--ink-2);
  line-height: 1.55;
}

.workspace-points {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-point {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.workspace-point-ico {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--green-tint);
  border: 1px solid var(--line);
  color: var(--leaf);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}

.workspace-point h3 {
  margin: 0 0 0.2rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.workspace-point p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.45;
}

.workspace-media {
  position: relative;
}

.workspace-media .shot {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #081220;
}

.workspace-media .shot img {
  border-radius: 14px;
}

.workspace-shot-caption {
  text-align: center;
  margin: 0.85rem 0 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}

@media (max-width: 960px) {
  .workspace-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.app-files { border-top: 0; }

.steps-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.steps-cta p { margin: 0; color: var(--muted); font-size: var(--step--1); max-width: 34em; }

.table-cta { margin-top: 1.25rem; }

/* ── Micro-Interactions & Interactive Simulation (Apple / Linear SaaS UX) ── */

/* 1. Interactive Device Address Copy (#how Step 1) */
.session-code {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.session-code:hover {
  transform: translateY(-2px);
}
.session-code-toast {
  position: absolute;
  top: -2.3rem;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--lemon);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  z-index: 10;
}
.session-code-toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.digits b.digit-bounce {
  animation: digit-pulse 0.35s ease-out;
  color: var(--lemon) !important;
  border-color: var(--lemon) !important;
}
@keyframes digit-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* 2. Interactive Workspace Mockup (.app-mock) */
.app-action-toast {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: oklch(0.20 0.05 260 / 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--surface-line-dark);
  color: var(--lemon-leaf);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
  white-space: nowrap;
}
.app-action-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.app-side span {
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  user-select: none;
}
.app-side span:hover:not(.on) {
  background: var(--surface-dark-2);
  color: var(--pulp);
  transform: translateX(2px);
}
.rail-highlight-chat .app-chat,
.rail-highlight-files .app-files {
  outline: 2px solid var(--lemon-leaf);
  outline-offset: -2px;
  background: oklch(0.26 0.04 255 / 0.95);
  transition: outline 0.2s ease, background 0.2s ease;
}
.app-end {
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.app-end:hover {
  transform: translateY(-1px);
  background: oklch(0.62 0.20 26);
}

/* 3. Interactive Feature Demonstrations (#features) */
.transfer .file {
  transition: background-color 0.2s ease, transform 0.18s ease;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}
.transfer .file:hover {
  background: var(--surface-4);
  transform: translateX(2px);
}
.transfer-done {
  background: oklch(0.96 0.03 140 / 0.4) !important;
}
.participants .p {
  transition: background-color 0.2s ease, transform 0.18s ease;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}
.participants .p:hover {
  background: var(--surface-4);
  transform: translateX(2px);
}
.operator-switched {
  animation: digit-pulse 0.4s ease;
}
.uac .dialog .ok {
  transition: transform 0.15s ease, filter 0.15s ease;
}
.uac .dialog .ok:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
}
.tag-success-pulse {
  animation: digit-pulse 0.4s ease;
}

/* 4. Fluid FAQ Details Accordion */
details summary {
  user-select: none;
}
details > div {
  will-change: height, opacity;
}

/* 5. Real Screens & Large UI Showcase */
.feature--wide-media {
  --col-1: 4.5fr;
  --col-2: 7.5fr;
}
.feature--wide-media.flip {
  --col-1: 7.5fr;
  --col-2: 4.5fr;
}

/* Elevated UI Graphics: File Transfer */
.transfer {
  display: grid;
  gap: 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 12px 35px -10px rgba(8, 18, 32, 0.08);
}
.transfer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.transfer-speed {
  font-size: 0.72rem;
  color: var(--green-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.transfer-speed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}
.transfer .file {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem 0.85rem;
  padding: 0.75rem 0.95rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.transfer .file:hover {
  transform: translateY(-2px);
  border-color: var(--leaf-mid);
  background: var(--surface-3);
}
.transfer-file-ico {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: oklch(0.92 0.03 140 / 0.8);
  display: grid;
  place-items: center;
  color: var(--leaf-mid);
  font-weight: 700;
  font-size: 0.72rem;
}
.transfer .file .name {
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer .file .size {
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.transfer .bar {
  grid-column: 1 / -1;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.transfer .bar i {
  display: block;
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--leaf-mid) 0%, var(--lemon-leaf) 100%);
  transition: width 0.3s ease;
}

/* Elevated UI Graphics: Multi-Operator Roster */
.participants {
  display: grid;
  gap: 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 12px 35px -10px rgba(8, 18, 32, 0.08);
}
.participants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.participants-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--leaf-mid);
  background: rgba(46, 125, 50, 0.1);
  padding: 0.15rem 0.55rem;
  border-radius: 50px;
  border: 1px solid rgba(46, 125, 50, 0.2);
}
.participants .p {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.participants .p:hover {
  transform: translateY(-2px);
  border-color: var(--leaf-mid);
}
.participants .p.has-control {
  border-color: var(--leaf-mid);
  background: oklch(0.97 0.02 140 / 0.5);
  box-shadow: 0 4px 15px -3px rgba(46, 125, 50, 0.15);
}
.participants .role {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--ink-2);
}
.participants .p.has-control .role {
  background: var(--leaf-mid);
  color: #ffffff;
}

/* Elevated UI Graphics: Windows 11 Fluent UAC */
.uac {
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #09121f 100%);
  border-radius: 14px;
  padding: 1.4rem;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.uac::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b 0%, #3b82f6 100%);
}
.uac .dialog {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #0f172a;
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.uac-dialog-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}
.uac-shield {
  width: 22px;
  height: 22px;
  color: #f59e0b;
  flex-shrink: 0;
}
.uac .dialog strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.uac .dialog p {
  font-size: 0.82rem;
  color: #334155;
  margin-bottom: 0.6rem;
}
.uac-app-name {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  background: #f1f5f9;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.75rem;
}
.uac-meta {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 0.9rem;
}
.uac .dialog .row {
  display: flex;
  gap: 0.65rem;
  justify-content: flex-end;
}
.uac .dialog .row span {
  padding: 0.4rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.uac .dialog .row span.ok {
  background: #0284c7;
  color: #ffffff;
  border: 1px solid #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}
.uac .dialog .row span.ok:hover {
  background: #0369a1;
  transform: translateY(-1px);
}
.uac .dialog .row span.no {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.uac-banner {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--lemon-leaf);
  font-weight: 600;
}

/* 6. Real Application Screens Showcase Gallery */
.showcase-hero {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.mac-window {
  border-radius: 14px;
  background: #0f172a;
  box-shadow: 0 25px 65px -15px rgba(8, 18, 32, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.mac-window:hover {
  transform: translateY(-4px);
  box-shadow: 0 35px 80px -15px rgba(8, 18, 32, 0.45), 0 0 0 1px var(--leaf-mid);
}
.mac-window--sm {
  border-radius: 10px;
}
.mac-window-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: linear-gradient(180deg, #243042 0%, #16202f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
}
.mac-window-dots {
  display: flex;
  gap: 0.4rem;
}
.mac-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
}
.mac-dot.close { background: #ff5f56; box-shadow: 0 0 0 1px #e0443e; }
.mac-dot.min { background: #ffbd2e; box-shadow: 0 0 0 1px #dea123; }
.mac-dot.max { background: #27c93f; box-shadow: 0 0 0 1px #1aab29; }
.mac-window-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mac-window-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--lemon-leaf);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(158, 211, 106, 0.12);
  padding: 0.15rem 0.55rem;
  border-radius: 50px;
  border: 1px solid rgba(158, 211, 106, 0.25);
  white-space: nowrap;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.mac-window-content img {
  display: block;
  width: 100%;
  height: auto;
}
.mac-window--sm img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (max-width: 800px) {
  .showcase-badges {
    grid-template-columns: 1fr;
  }
}
.sc-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 15px -3px rgba(8, 18, 32, 0.05);
}
.sc-badge-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(158, 211, 106, 0.15);
  color: var(--leaf-mid);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sc-badge div {
  display: grid;
  gap: 0.2rem;
}
.sc-badge strong {
  font-size: 0.88rem;
  color: var(--ink);
}
.sc-badge span {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.showcase-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 900px) {
  .showcase-grid-2 {
    grid-template-columns: 1fr;
  }
}
.showcase-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 8px 30px -8px rgba(8, 18, 32, 0.06);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px -12px rgba(8, 18, 32, 0.12);
  border-color: var(--leaf-mid);
}
.showcase-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.showcase-card-head .ico-chip {
  flex-shrink: 0;
}
.showcase-card-head div {
  display: grid;
  gap: 0.25rem;
}
.showcase-card-head h3 {
  font-size: 1.05rem;
  margin: 0;
}
.showcase-card-head p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.tablet-window {
  border-radius: 20px;
  background: #0f172a;
  padding: 10px;
  box-shadow: 0 25px 65px -15px rgba(8, 18, 32, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.tablet-window:hover {
  transform: translateY(-4px);
  box-shadow: 0 35px 80px -15px rgba(8, 18, 32, 0.45), 0 0 0 2px var(--leaf-mid);
}
.tablet-window-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.55rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
}
.tablet-camera {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #334155;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.tablet-window img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  max-height: 480px;
  object-fit: cover;
  object-position: top;
}

/* ── Hero Smart 1-Click Download & Reassurance ────────────────────── */
.hero-btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.4rem;
  text-align: left;
  line-height: 1.25;
}
.hero-btn-dl .ico {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.hero-btn-text {
  display: flex;
  flex-direction: column;
}
.hero-btn-sub {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.88;
  margin-top: 0.15rem;
  letter-spacing: 0.01em;
}

/* OS Switcher via os-first.js classes on <html> */
/* Default is Windows Desktop */
.hero-btn-win { display: inline-flex; }
.hero-btn-mac { display: none; }
.hero-btn-mobile { display: none; }

/* macOS Desktop */
.is-mac .hero-btn-win { display: none; }
.is-mac .hero-btn-mac { display: inline-flex; }
.is-mac .hero-btn-mobile { display: none; }

/* Mobile (iOS / Android) */
.is-mobile .hero-btn-win { display: none; }
.is-mobile .hero-btn-mac { display: none; }
.is-mobile .hero-btn-mobile { display: inline-flex; }

/* Secondary OS Switcher Links */
.hero-other-os {
  margin-top: 0.65rem;
  font-size: 0.84rem;
  color: var(--muted, #64748b);
}
.hero-other-os a {
  color: var(--accent, #1f8f3a);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.is-mac-only { display: none; }
.is-win-only { display: inline; }
.is-mac .is-mac-only { display: inline; }
.is-mac .is-win-only { display: none; }
.is-mobile .is-mac-only { display: none; }
.is-mobile .is-win-only { display: none; }

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.15rem;
  font-size: 0.9rem;
}

/* Trust Bar */
.hero-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1.35rem;
  font-size: var(--step--1);
  color: oklch(0.979 0.031 93 / 0.82);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.trust-check {
  width: 1rem;
  height: 1rem;
  color: var(--lemon-leaf);
  flex-shrink: 0;
}

/* Mobile helper notice */
.hero-mobile-helper {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-size: var(--step--1);
  color: #bae6fd;
  max-width: 42rem;
}
.hero-mobile-helper .ico {
  color: #38bdf8;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}
.is-mobile .hero-mobile-helper {
  display: flex;
}

/* ── Global Download Warning & Guidance Modal ─────────────────────── */
.dl-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  box-sizing: border-box;
}
.dl-modal-backdrop.open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-modal {
  background: #ffffff;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  position: relative;
  margin: auto;
  box-sizing: border-box;
}
.dl-modal-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
  padding-right: 2rem;
  flex-shrink: 0;
}
.dl-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.dl-modal-icon.win { background: #e0f2fe; }
.dl-modal-icon.mac { background: #f1f5f9; }
.dl-modal h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  line-height: 1.35;
}
.dl-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 0.35rem;
  margin-bottom: 0.75rem;
}
.dl-modal-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.dl-modal ol {
  padding-left: 1.25rem;
  margin: 0.5rem 0 0.85rem;
  line-height: 1.55;
  font-size: 0.88rem;
  color: #334155;
}
.dl-modal ol li {
  margin-bottom: 0.45rem;
}
.dl-modal ol li em {
  font-style: normal;
  font-weight: 600;
  background: #f1f5f9;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
  color: #0f172a;
}
.dl-modal-note {
  font-size: 0.8rem;
  color: #713f12;
  margin: 0.75rem 0 0;
  line-height: 1.45;
  padding: 0.6rem 0.75rem;
  background: #fefce8;
  border-radius: 8px;
  border-left: 3px solid #eab308;
}
.dl-modal-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e8f0;
}
.dl-modal-actions .btn-go {
  flex: 1;
  background: #1f8f3a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}
.dl-modal-actions .btn-go:hover {
  background: #177a30;
}
.dl-modal-actions .btn-cancel {
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  cursor: pointer;
  color: #475569;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.dl-modal-actions .btn-cancel:hover {
  background: #f8fafc;
  color: #0f172a;
}
.dl-modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  color: #64748b;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.dl-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}