/* ============================================================
   Site PlantEye — același sistem de design ca aplicația.

   Tokenii de mai jos sînt copiați din `src/index.css` al aplicației
   (sistemul „editorial botanic": smarald profund + hârtie caldă + serif de
   afișaj). Nu sînt o paletă „apropiată" — sînt exact valorile aplicației, iar
   `verify-site.mjs` compară cele două fișiere token cu token, ca să nu poată
   diverge în tăcere.

   Fără webfonturi, deliberat: aplicația folosește stive de fonturi de sistem,
   iar site-ul folosește aceleași, deci arată ca aplicația fără să descarce
   nimic. Verificarea aserționează că nu există `@font-face` aici.
   ============================================================ */

:root {
  color-scheme: light;

  /* Hârtie și cerneală */
  --paper: #f4f1e9;
  --paper-deep: #ece7da;
  --card: #fffefb;
  --ink: #1f2b24;
  --ink-muted: #66756b;
  --hairline: #e4ded0;

  /* Brand */
  --primary: #2f5d44;
  --primary-strong: #214b33;
  --primary-soft: rgba(47, 93, 68, 0.1);
  --accent: #7fa98a;

  /* Semnale — aceleași trei culori pe care aplicația le folosește pentru
     „ritmul" de udare. Le folosim ca să ARĂTĂM diferența, nu s-o povestim. */
  --overdue: #c45b48;
  --due: #c0832e;
  --ok: #5d7d66;

  /* Traseul inelului de ritm — exact valoarea din `src/index.css` al aplicației,
     ca inelul din hero să fie componenta aplicației, nu o imitație a ei. */
  --ring-track: rgba(124, 148, 132, 0.24);

  /* Placa de ierbar: suprafața deschisă pe care stă o plantă. Rămîne deschisă
     și în secțiunile întunecate — într-un ierbar, planta stă pe hîrtie albă
     indiferent cît de întunecată e masa. Token separat de `--card` tocmai
     pentru că `--card` se întoarce cu secțiunea, iar placa nu. */
  --plate: #fffefb;
  --plate-ink: #1f2b24;

  /* O singură curbă pentru tot ce intră în scenă. `ease-out` obișnuit pornește
     prea lin și se termină prea brusc; asta frînează la sfîrșit, ca un obiect
     care se așază. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --radius: 18px;
  --radius-lg: 26px;
  --shadow-card: 0 1px 2px rgba(31, 43, 36, 0.05), 0 12px 30px rgba(31, 43, 36, 0.06);

  --serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --wrap: 1120px;
  --gutter: 20px;
}

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

html {
  scroll-behavior: smooth;
  /*
    Pagina derulează doar sus-jos, niciodată lateral.

    Nu e o măsură de siguranță luată pe ghicite: un element decorativ care iese
    din cutie — o pată de lumină, o bandă care se derulează — lărgește TOT
    documentul, iar pagina de prezentare a avut exact defectul acesta. S-a
    reparat la sursă, dar o linie aici garantează că nu se poate întoarce pe
    tăcute, oricînd s-ar adăuga altceva.

    `clip`, nu `hidden`. `hidden` pe elementul rădăcină face din pagină un
    container care derulează, ceea ce strică `position: sticky` pe antet; `clip`
    taie la fel, fără să creeze containerul acela. Iar `animation-timeline:
    scroll(root)` folosită de bara de descărcare are nevoie de rădăcină ca
    derulare, deci diferența contează și aici.

    Unde `clip` nu e cunoscut (browsere mai vechi de 2022), linia se ignoră
    simplu, iar pagina revine la comportamentul de dinainte — fără să se strice
    nimic altceva.
  */
  overflow-x: clip;
}

/* Cine a cerut mai puțină mișcare o primește — inclusiv la derularea lină. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  /* Grila de puncte din aplicație, la aceeași măsură (22px). */
  background-image: radial-gradient(rgba(31, 43, 36, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--primary);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--primary-strong);
  }
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  /*
    Marginea laterală ține cont de crestătură.

    Cu `viewport-fit=cover` (pus în șabloane), pagina se întinde sub crestătură
    și sub colțurile rotunjite — ceea ce e corect, dar în landscape, pe un
    telefon cu crestătură, primele ~44px din stînga sînt acoperite de ea. Deci
    marginea e max(20px, zona sigură): în portret, unde zona e 0, rămîne exact
    20px ca înainte; în landscape se lărgește singură.

    `max()` în loc de simpla adunare, fiindcă adunarea ar da 20+44=64px și ar
    îngusta vizibil coloana de text pe ecranele mici, exact acolo unde nu-și
    permite.
  */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Sare la conținut: invizibil pînă primește focus de la tastatură. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}

.skip:focus {
  left: 0;
}

/* ---------- Tipografie ---------- */

/*
  Tipografia de titlu: spațierea și interlinia se schimbă cu MĂRIMEA.

  Un singur `letter-spacing` pentru toate titlurile e greșit undeva, prin
  construcție: literele par să se depărteze pe măsură ce cresc, deci textul mare
  cere spațiere negativă, iar cel mic cere una ușor pozitivă, ca să nu se
  lipească. La fel interlinia: strînsă la titluri mari, mai aerisită la text.

  Valorile de mai jos cresc în negativ odată cu scara: h3 e aproape neutru, h2
  strînge puțin, h1 mult. `.serif` rămîne neutru, fiindcă se folosește la
  mărimi mici (nume de plante în carduri, citate), unde strîngerea ar dăuna.
*/
h1,
h2,
h3,
.serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}

h1 {
  letter-spacing: -0.028em;
  line-height: 1.04;
}

h2 {
  letter-spacing: -0.018em;
  line-height: 1.1;
}

h3 {
  letter-spacing: -0.008em;
  line-height: 1.22;
}

h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.25rem);
  margin: 0 0 0.6em;
}

h3 {
  font-size: 1.15rem;
  margin: 0 0 0.35em;
}

p {
  margin: 0 0 1em;
}

.lead {
  font-size: clamp(1.06rem, 2.1vw, 1.28rem);
  color: var(--ink-muted);
  max-width: 62ch;
}

.eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.1em;
}

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

.note {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* ---------- Antet ---------- */

/*
  Antetul: un material translucid prin care conținutul trece pe dedesubt.

  Fără `border-bottom` și fără dungă de trecere. O linie tare sub un antet
  lipicios se citește ca o cusătură, iar o dungă care să o înlocuiască n-a ieșit
  destul de curată ca să merite codul ei: CSS-ul poate stinge o CULOARE treptat,
  dar nu și o ÎNCEȚOȘARE (`mask-image` lasă `backdrop-filter` la putere maximă
  pînă la capăt, măsurat), iar orice aproximare cu benzi se vede ca benzi.

  Deci muchia de jos e curată. Separarea o face chiar încețoșarea: ce trece pe
  sub antet e spălat, ce e dedesubt e limpede, iar diferența se citește singură.
*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 241, 233, 0.72);
  backdrop-filter: saturate(180%) blur(12px);
}

/*
  Pe pagina de prezentare, antetul plutește PESTE hero, iar verdele urcă pînă sus.

  `fixed`, nu `sticky`: un element lipicios stă în flux și împinge conținutul
  după el, deci hero-ul ar începe sub antet, nu de la marginea de sus a ecranului.
  Fixat iese din flux, iar pagina începe de la zero — și nu e nevoie să ghicesc
  înălțimea antetului ca s-o scad din vreo margine.

  Se aplică DOAR pe `.home`. Restul paginilor — catalogul, cele 2114 fișiere de
  specii, suportul, textele juridice — n-au hero întunecat, deci acolo antetul
  rămîne lipicios și își ține locul în flux, cum era.
*/
.home .site-header {
  position: fixed;
  left: 0;
  right: 0;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding-block: 9px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.brand svg {
  width: 26px;
  height: 26px;
  flex: none;
}

/* Navigația stă pe al doilea rînd pe telefon, ca o bandă derulabilă lateral —
   altfel ar rămîne doar în subsol, iar cine intră pe pagina de confidențialitate
   n-ar avea cum să ajungă înapoi la prezentare fără să deruleze pînă jos. */
.site-nav {
  order: 3;
  flex: 0 0 100%;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 3px;
  margin: 0 calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a {
  /*
    `--ink`, nu `--ink-muted`.

    Un gri de mijloc stă bine pe hîrtie cînd ai loc, dar antetul de pe pagina de
    prezentare e translucid peste verdele închis al hero-ului, deci fundalul lui
    coboară la un verde-cenușiu. Măsurat: legăturile de meniu ajungeau la 2,57:1
    acolo — cu mult sub pragul de 4,5:1 — și chiar și pe hîrtie erau la 4,31:1,
    adică sub prag oricum, de dinainte.

    Cu cerneala întreagă: 7,78:1 peste hero, 13,02:1 pe hîrtie. Meniul devine
    puțin mai prezent, ceea ce pe o pagină care vinde e un cîștig, nu o pierdere.
  */
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: var(--primary);
  }
}

@media (min-width: 860px) {
  .site-nav {
    order: 0;
    flex: 0 1 auto;
    overflow: visible;
    margin: 0;
    padding-inline: 0;
    gap: 22px;
  }

  .site-nav a {
    font-size: 0.95rem;
  }
}

/* Selectorul de limbă e un `<details>`, nu un `<select>`: un select are nevoie
   de JavaScript ca să navigheze, iar site-ul n-are niciun script. Așa merge
   pentru toată lumea, inclusiv cu scripturile oprite. */
.lang {
  position: relative;
}

.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 12px;
}

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

.lang summary::after {
  content: '\25BE';
  font-size: 0.62rem;
  color: var(--ink-muted);
}

.lang[open] summary {
  border-color: var(--accent);
}

.lang svg {
  width: 15px;
  height: 15px;
  color: var(--ink-muted);
}

.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.lang ul a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.93rem;
}

@media (hover: hover) and (pointer: fine) {
  .lang ul a:hover {
    background: var(--primary-soft);
    color: var(--primary-strong);
  }
}

.lang ul a[aria-current='page'] {
  font-weight: 600;
  color: var(--primary-strong);
}

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

/*
  Hero-ul stă pe verde închis — o masă de ierbar, nu o pagină de hîrtie.
  Nu e altă identitate: aceleași două tonuri de smarald din aplicație, doar
  inversate. Iar `--plate` rămîne deschis, fiindcă planta stă pe hîrtie albă
  oricît de întunecat ar fi fundalul.
*/
.hero {
  position: relative;
  isolation: isolate;
  /*
    Marginea de sus ține cont de antetul care plutește peste hero.

    Antetul e `fixed` pe pagina asta (vezi `.home .site-header`), deci nu mai
    împinge conținutul — iar fără o margine mai generoasă, titlul ar intra sub el.
    Antetul are două înălțimi, după cum navigația stă pe al doilea rînd sau nu:
    85px sub 860px, 54px peste. Marginea de aici e aleasă să treacă peste amîndouă
    cu loc destul: 23px de aer pe telefon, 74px pe desktop.

    Nu e nevoie de o variabilă cu înălțimea antetului: cele două valori nu depind
    de limbă — pe telefon navigația derulează lateral, nu se rupe pe rînduri, deci
    antetul n-are cum să crească la o traducere mai lungă.
  */
  padding: clamp(108px, 10vw, 148px) 0 clamp(46px, 7vw, 96px);
}

/*
  Lumina care se plimbă prin scenă. Două pete, la viteze și în direcții
  diferite, ca să nu se poată citi ca un singur gradient care pulsează.

  `inset: 0` — cutia petelor e EXACT cutia secțiunii, iar petele sînt tăiate de
  `overflow: hidden` de aici. Nu e un detaliu: prima versiune avea
  `inset: -20% -10%`, deci cutia ieșea 10% în afara secțiunii pe fiecare latură
  — 128px pe un ecran de 1280 — și împingea TOT documentul. Pagina căpăta bară
  de derulare orizontală, exact ce nu trebuie să aibă o pagină care se citește
  pe verticală.

  `overflow: clip` pus pe secțiune nu a rezolvat-o: măsurat, secțiunea avea tot
  `scrollWidth` 1408 cu `overflow-x: clip`. Deci nu tăierea contează aici, ci să
  nu iasă nimic din cutie de la început.

  Petele ies oricum din cutie, fiindcă așa sînt așezate (`top: -34%`,
  `right: -14%`), dar se termină în transparență, iar tăierea cade exact pe
  partea nevăzută a gradientului — nu se vede nicio muchie.
*/
.aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aura::before,
.aura::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(10px);
}

.aura::before {
  width: 78%;
  top: -34%;
  left: -12%;
  background: radial-gradient(circle, rgba(140, 196, 166, 0.26), transparent 64%);
  animation: aura-drift 30s ease-in-out infinite alternate;
}

.aura::after {
  width: 62%;
  right: -14%;
  bottom: -30%;
  background: radial-gradient(circle, rgba(127, 169, 138, 0.2), transparent 66%);
  animation: aura-drift 38s ease-in-out infinite alternate-reverse;
}

.aura-soft::before,
.aura-soft::after {
  opacity: 0.6;
}

@keyframes aura-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(9%, 7%, 0) scale(1.14);
  }
}

.hero-grid {
  display: grid;
  gap: clamp(34px, 5vw, 20px);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(30px, 4vw, 60px);
  }
}

.hero-copy {
  min-width: 0;
}

.hero h1 {
  font-size: clamp(2.35rem, 6.2vw, 4.15rem);
  margin: 0 0 0.5em;
}

/* „PlantEye" urcă deasupra titlului ca o casetă de titlu de revistă: mic,
   spațiat, fără serif. Titlul rămîne piesa mare, iar numele aplicației nu-l
   concurează — îl anunță. */
.hero .h1-mark {
  display: block;
  font-family: var(--sans);
  font-size: 0.29em;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.62em;
}

.hero h1 em {
  display: block;
  font-style: italic;
  color: var(--primary);
}

/* Cuvintele titlului urcă unul cîte unul. `--i` nu se poate scrie din generator
   (atributele `style` sînt interzise de CSP), deci întîrzierea vine din poziție
   — iar pozițiile sînt destule: niciuna dintre cele 7 limbi nu are titluri atît
   de lungi încît să rămînă cuvinte fără regulă. */
.hero h1 .w {
  display: inline-block;
  animation: word-in 0.85s var(--ease-out) both;
  animation-delay: 0.9s;
}

.hero h1 .w:nth-child(1) { animation-delay: 0.24s; }
.hero h1 .w:nth-child(2) { animation-delay: 0.32s; }
.hero h1 .w:nth-child(3) { animation-delay: 0.4s; }
.hero h1 .w:nth-child(4) { animation-delay: 0.48s; }
.hero h1 .w:nth-child(5) { animation-delay: 0.56s; }
.hero h1 .w:nth-child(6) { animation-delay: 0.64s; }
.hero h1 .w:nth-child(7) { animation-delay: 0.72s; }
.hero h1 .w:nth-child(8) { animation-delay: 0.8s; }
.hero h1 .w:nth-child(n + 9) { animation-delay: 0.88s; }

@keyframes word-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.42em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .lead {
  font-size: clamp(1.08rem, 2.3vw, 1.32rem);
  color: var(--ink);
  max-width: 52ch;
  animation: word-in 0.9s var(--ease-out) 0.62s both;
}

.hero-note {
  font-size: 0.92rem;
  color: var(--ink-muted);
  margin: 0 0 1.7em;
  animation: word-in 0.9s var(--ease-out) 0.72s both;
}

.hero .cta-row {
  animation: word-in 0.9s var(--ease-out) 0.82s both;
}

.hero .eyebrow {
  animation: word-in 0.9s var(--ease-out) 0.14s both;
}

/* ---------- Scena din hero: inelul de ritm, la scară mare ---------- */

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  animation: word-in 1.1s var(--ease-out) 0.3s both;
}

.rhythm-figure {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
}

.rhythm-caption {
  display: grid;
  gap: 1px;
  text-align: center;
}

.rhythm-caption b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--ink);
}

.rhythm-caption span {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/*
  Inelul e componenta din aplicație (`HealthRing`), nu o imitație: aceeași
  coroană `conic-gradient`, același traseu, același raport umplut/scor. Pe site
  nu are un scor de arătat — e decorativ — dar pornind de la 0 și oprindu-se
  la 74% spune lucrul pe care îl spune și în aplicație: ritmul se calculează.
*/
.rhythm {
  --band: clamp(9px, 1.6vw, 15px);
  --ring-p: 0;
  position: relative;
  width: clamp(196px, 40vw, 336px);
  aspect-ratio: 1;
}

.rhythm-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ok) calc(var(--ring-p) * 1%), var(--ring-track) 0);
  animation: ring-fill 2.1s var(--ease-out) 0.55s both;
}

/* Traseul inelului pe fundal întunecat: valoarea din aplicație e calculată
   pentru hîrtie caldă, unde un verde stins se vede; pe smarald închis aproape
   dispare, iar inelul nemaifiind inel. */
.on-dark .rhythm-ring {
  --ring-track: rgba(233, 240, 234, 0.13);
}

@keyframes ring-fill {
  from {
    --ring-p: 0;
  }
  to {
    --ring-p: 74;
  }
}

.rhythm-core {
  position: absolute;
  inset: var(--band);
  border-radius: 50%;
  overflow: hidden;
  background: var(--plate);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

.rhythm-core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Picătura care înconjoară inelul: un singur element care se rotește, cu
   picătura lipită în dreptul orei 12. Mai simplu decît un `offset-path` și
   merge peste tot, fiindcă nu e nimic de interpolat — doar o rotație. */
.rhythm-drop {
  position: absolute;
  inset: 0;
  animation: orbit 11s linear infinite;
}

@keyframes orbit {
  to {
    transform: rotate(1turn);
  }
}

.rhythm-drop svg {
  position: absolute;
  left: 50%;
  top: calc(var(--band) / 2);
  width: clamp(15px, 2.2vw, 21px);
  height: clamp(15px, 2.2vw, 21px);
  transform: translate(-50%, -50%);
  color: var(--ok);
  filter: drop-shadow(0 0 7px rgba(140, 196, 166, 0.7));
}

/* Plăcile care plutesc în jurul inelului. */
.specimen {
  position: absolute;
  width: clamp(84px, 13vw, 128px);
  margin: 0;
  padding: 7px 7px 5px;
  background: var(--plate);
  color: var(--plate-ink);
  border-radius: 13px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.24), 0 22px 42px rgba(0, 0, 0, 0.42);
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translate3d(0, -7px, 0);
  }
  50% {
    transform: translate3d(0, 8px, 0);
  }
}

.specimen img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.specimen figcaption {
  margin-top: 6px;
  font-size: 0.66rem;
  line-height: 1.28;
}

.specimen b {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specimen i {
  display: block;
  font-style: normal;
  color: #66756b;
}

.specimen.s1 {
  top: 4%;
  left: 0;
  rotate: -7deg;
  animation-delay: -2.6s;
}

.specimen.s2 {
  right: 1%;
  bottom: 5%;
  rotate: 6deg;
  animation-delay: -5.4s;
}

@media (min-width: 1000px) {
  .specimen.s1 {
    left: -3%;
  }
  .specimen.s2 {
    right: -4%;
  }
}

/* Pe ecranele mici, a doua placă ar împinge inelul într-un colț: două plăci
   de 84px lîngă un inel de 196px nu încap fără să se calce. Rămîne una. */
@media (max-width: 559px) {
  .specimen.s2 {
    display: none;
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn {
  display: inline-block;
  font-size: 0.98rem;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.btn-primary {
  background: var(--primary);
  color: #fffefb;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--primary-strong);
    color: #fffefb;
  }
}

.btn-ghost {
  border-color: var(--hairline);
  background: var(--card);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover {
    border-color: var(--accent);
    color: var(--primary-strong);
  }
}

/* ---------- Secțiuni ---------- */

section {
  padding: clamp(38px, 6vw, 74px) 0;
  border-top: 1px solid var(--hairline);
}

section:first-of-type {
  border-top: 0;
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(26px, 4vw, 44px);
}

/* ---------- Funcții ---------- */

/*
  Un „bento", nu un rînd de carduri egale.

  Rîndul de trei coloane identice e cea mai recunoscută semnătură de șablon, și
  aici ar spune și un lucru neadevărat: că toate cinci funcțiile cîntăresc la
  fel. Nu cîntăresc — prima e cea care se vede pe ecranul principal al
  aplicației, iar celelalte o susțin. Așezarea o spune acum, iar ochiul are unde
  să se oprească.

  Grila are 6 coloane, iar cele cinci carduri se împart 4+2 / 2+2+2. Se umple
  exact, fără celule goale, la orice lățime de la 1000px în sus.
*/
.bento {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }

  .bento .card {
    grid-column: span 2;
  }

  /* Cardul mare ia 4 din 6 coloane, iar celelalte patru se așază 1+3 pe două
     rînduri: rîndul întîi 4+2, al doilea 2+2+2. Se umple exact — o grilă cu o
     celulă goală într-un colț arăta ca o eroare de așezare, nu ca o alegere. */
  .bento .card.is-lead {
    grid-column: span 4;
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px;
}

.card h3 {
  color: var(--primary-strong);
}

.card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.96rem;
}

/* Cardul mare poartă tipografia mare: titlul lui se citește de la distanță, ca
   un titlu de secțiune, iar celelalte rămîn etichete. */
.card.is-lead {
  background: linear-gradient(158deg, var(--card), var(--paper-deep));
  padding: clamp(24px, 3vw, 34px);
}

.card.is-lead h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  max-width: 22ch;
}

.card.is-lead p {
  font-size: 1.02rem;
  max-width: 46ch;
}

/* Fără chenar pe carduri: o suprafață care își schimbă tonul la hover se simte
   vie prin culoare, nu prin contur. Chenarul rămîne doar pe cardul mare, unde
   separă două suprafețe care altfel s-ar topi una într-alta. */
.bento .card:not(.is-lead) {
  border-color: transparent;
  background: var(--paper-deep);
}

@media (hover: hover) and (pointer: fine) {
  .bento .card:not(.is-lead):hover {
    border-color: var(--hairline);
    background: var(--card);
  }
}

/* ---------- Cum se calculează programul ---------- */

/*
  Cutia întunecată din mijlocul paginii.

  E singura suprafață închisă din corpul paginii și e o CUTIE, nu o bandă: stă
  în coloana de text, cu colțuri rotunjite. O bandă care ar tăia pagina de la o
  margine la alta ar arăta ca o greșeală de copiere — exact avertismentul pe care
  îl dă orice manual de design despre secțiunile întunecate căzute în mijlocul
  unei pagini deschise. O cutie, în schimb, arată ca un obiect așezat acolo.
*/
.panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(233, 240, 234, 0.09);
  box-shadow: 0 2px 4px rgba(31, 43, 36, 0.14), 0 28px 60px rgba(31, 43, 36, 0.22);
}

.panel .quote {
  margin-bottom: 26px;
}

.quote {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.42;
  max-width: 46ch;
  margin: 0 0 30px;
  color: var(--primary-strong);
}

.chips {
  display: grid;
  gap: 12px;
}

@media (min-width: 760px) {
  .chips {
    grid-template-columns: repeat(3, 1fr);
  }
}

.chip {
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.95rem;
  border: 1px solid var(--hairline);
  background: var(--card);
  border-left-width: 4px;
}

/* Culoarea de semnal e cea din aplicație: verde = ritm bun, portocaliu = prea
   multă apă, roșu = prea puțină. Conținutul spune același lucru, deci culoarea
   e un adaos, nu singurul purtător de sens. */
.chip.is-ok {
  border-left-color: var(--ok);
}
.chip.is-more {
  border-left-color: var(--due);
}
.chip.is-less {
  border-left-color: var(--overdue);
}

/* ---------- De ce e altfel ---------- */

.reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

@media (min-width: 860px) {
  .reasons {
    grid-template-columns: repeat(2, 1fr);
  }
}

.reasons li {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 20px 18px 46px;
  position: relative;
  font-size: 0.96rem;
}

.reasons li::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Pentru cine e ---------- */

.audience {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
  max-width: 52ch;
  color: var(--primary-strong);
  margin: 0;
}

/* ---------- Gratuit și Pro ---------- */

.plans {
  display: grid;
  gap: 16px;
}

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

.plan {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.plan.is-pro {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}

.plan h3 {
  font-size: 1.3rem;
  color: var(--primary-strong);
  margin-bottom: 0.2em;
}

.plan .plan-sub {
  color: var(--ink-muted);
  font-size: 0.94rem;
  margin: 0 0 1.1em;
}

.plan ul {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
  display: grid;
  gap: 9px;
}

.plan li {
  padding-left: 26px;
  position: relative;
  font-size: 0.97rem;
}

.plan li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

.plan-option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
}

.plan-option:first-of-type {
  border-top: 0;
}

.plan-option strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.08rem;
}

.plan-option span {
  color: var(--ink-muted);
  font-size: 0.88rem;
  text-align: right;
}

.plan-renew {
  margin-top: 1.1em;
}

/* Fraza despre preț, identică cu cea din termeni — verificată. */
.price-note {
  margin: 24px 0 0;
  padding: 16px 18px;
  background: var(--primary-soft);
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--primary-strong);
  max-width: 70ch;
}

/* ---------- Magazin ---------- */

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

/* Badge-urile pleacă ascunse din generator cît timp magazinul n-are adresă.
   `[hidden]` e pus în HTML, nu de JS, deci e corect și cu JavaScript oprit. */
.badge[hidden] {
  display: none;
}

/*
  Butonul de descărcare.

  Se scrie din tokeni, deci se întoarce singur în secțiunile întunecate: acolo
  `--ink` e deschis și `--paper` e închis, iar butonul devine alb pe verde fără
  nicio regulă în plus. E exact felul în care Apple își pune propriile butoane —
  un dreptunghi deschis, cu sigla la stînga, pe orice fundal.
*/
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 13px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(31, 43, 36, 0.16), 0 8px 20px rgba(31, 43, 36, 0.16);
  /* Aceleași două linii ca la `.btn`, și mai importante aici: acesta e butonul
     pe care vrem să-l apese lumea. Prima versiune le pusese doar pe `.btn`,
     deci exact butonul de descărcare rămăsese cu întîrzierea de 300ms și cu
     fulgerul albastru de atingere. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    translate 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    background-color 0.24s ease,
    color 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .badge:hover {
    color: var(--paper);
    background: var(--primary-strong);
    translate: 0 -2px;
    box-shadow: 0 2px 4px rgba(31, 43, 36, 0.2), 0 14px 28px rgba(31, 43, 36, 0.22);
  }
}

/* Apăsarea, imediată — aceeași regulă ca la `.btn`: 90ms, nu 300. */
.badge:active {
  translate: 0 0;
  transition-duration: 90ms;
}

.badge svg {
  width: 21px;
  height: 21px;
  flex: none;
}

/* Rîndul de butoane din hero: butoanele de magazin sînt mari, fiindcă sînt
   singurul lucru pe care vrem să-l facă cineva care a citit titlul. */
.cta-stores {
  margin-bottom: 1em;
}

.cta-stores .badge {
  padding: 14px 24px;
  font-size: 1rem;
  border-radius: 14px;
}

.cta-stores .badge svg {
  width: 24px;
  height: 24px;
}

.soon {
  background: var(--card);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  max-width: 62ch;
  font-size: 0.96rem;
  margin-top: 22px;
}

.soon strong {
  font-family: var(--serif);
  font-weight: 500;
  display: block;
  margin-bottom: 0.3em;
  color: var(--primary-strong);
}

.soon p {
  margin: 0;
  color: var(--ink-muted);
}

/* ---------- Capturi ---------- */

/*
  Banda de capturi iese din coloana de text și se derulează lateral, cu oprire
  pe fiecare ecran. Pe telefon asta e felul firesc în care se citesc capturile;
  pe desktop, cele 6 ecrane nu încap oricum alături la o mărime la care să se
  mai vadă ceva, iar înghesuite într-un rînd de 6 arată ca un catalog de
  timbre. Aceeași bandă, deci, la toate lățimile.

  Decalajul lateral nu e o lățime de margine: prima și ultima captură trebuie
  să cadă EXACT pe marginea coloanei de text, altfel banda pare lipită peste
  pagină. De aceea marginea se calculează din coloana de text, nu se alege.
*/
.bleed {
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(62%, 250px);
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  padding-block: 4px 18px;
}

.shots::-webkit-scrollbar {
  height: 6px;
}

.shots::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 999px;
}

.shots::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.shot {
  scroll-snap-align: start;
  margin: 0;
  transition: translate 0.4s var(--ease-out);
}

.shot img {
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(31, 43, 36, 0.05), 0 16px 34px rgba(31, 43, 36, 0.09);
}

/* `translate`, nu `transform`: intrarea în scenă animă `transform`, iar o
   animație cu `fill: both` ar înmuia orice valoare de bază scrisă tot acolo.
   Vezi nota de la carduri. */
@media (hover: hover) and (pointer: fine) {
  .shot:hover {
    translate: 0 -5px;
  }
}

.shot figcaption {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 9px;
  line-height: 1.4;
}

/* ---------- Suport / întrebări ---------- */

.faq {
  max-width: 72ch;
}

.faq details {
  border-top: 1px solid var(--hairline);
  padding: 4px 0;
}

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

.faq summary {
  cursor: pointer;
  padding: 15px 30px 15px 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  position: relative;
  list-style: none;
}

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

.faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 13px;
  font-size: 1.3rem;
  color: var(--accent);
}

.faq details[open] summary::after {
  content: '\2212';
}

.faq details p {
  margin: 0 0 16px;
  color: var(--ink-muted);
  font-size: 0.97rem;
}

.contact-box {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 62ch;
}

.contact-box a.mail {
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* ---------- Pagini juridice ---------- */

.prose {
  max-width: 74ch;
}

.prose h2 {
  font-size: 1.3rem;
  margin-top: 2em;
  color: var(--primary-strong);
}

.prose h3 {
  margin-top: 1.5em;
}

.prose ul {
  padding-left: 1.2em;
  margin: 0 0 1.2em;
}

.prose li {
  margin-bottom: 0.4em;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.4em;
  font-size: 0.94rem;
}

.prose th,
.prose td {
  border: 1px solid var(--hairline);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--paper-deep);
  font-weight: 600;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.4em 0;
}

.prose .updated {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

/* Clauza despre versiunea care guvernează — trebuie să fie vizibilă, nu o
   notă de subsol pierdută: e exact textul care spune ce se aplică. */
.governing {
  background: var(--primary-soft);
  border-radius: var(--radius);
  padding: 15px 18px;
  font-size: 0.92rem;
  color: var(--primary-strong);
  margin: 0 0 2em;
}

/* ---------- Subsol ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--paper-deep);
  padding: 40px 0;
  font-size: 0.92rem;
}

/*
  Subsolul de pe pagina de prezentare stă pe întuneric, ca să se lege de
  secțiunea de dinaintea lui, iar pagina să se închidă pe verde în loc să
  revină la hîrtie în ultima clipă.
*/

.footer-grid {
  display: grid;
  gap: 26px;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.site-footer h4 {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.9em;
  font-weight: 600;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

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

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    color: var(--primary);
    text-decoration: underline;
  }
}

.footer-tagline {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--primary-strong);
  margin: 0.6em 0 0;
  max-width: 30ch;
}

.footer-rights {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 0.86rem;
}

/* ---------- Catalogul de specii ---------- */

.crumbs {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-bottom: 1.6em;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: baseline;
}

.crumbs a {
  color: var(--ink-muted);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover {
    color: var(--primary);
    text-decoration: underline;
  }
}

.crumbs span:last-child {
  color: var(--ink);
}

/* Portretul speciei stă la 128px CSS din fișierul de 256 al aplicației, deci
   se vede bine pe ecrane retina. */
.species-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 2.2em;
}

.species-hero img {
  width: 128px;
  height: 128px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--card);
  flex: none;
}

.species-hero h1 {
  margin: 0 0 0.1em;
}

.species-hero .sci {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 1.05rem;
  margin: 0;
}

.species-body {
  max-width: 68ch;
}

/* Faptele de îngrijire: eticheta în stînga, valoarea în dreapta. Aceeași
   așezare ca fișa de îngrijire din aplicație. */
.facts {
  margin: 0 0 1.4em;
  border-top: 1px solid var(--hairline);
}

.facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--hairline);
}

.facts dt {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: right;
}

.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sources a {
  font-size: 0.96rem;
}

.letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2em;
}

.letter-nav a {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 5px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  text-decoration: none;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

@media (hover: hover) and (pointer: fine) {
  .letter-nav a:hover {
    border-color: var(--accent);
    color: var(--primary-strong);
  }
}

.letter-heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--primary-strong);
  margin: 2em 0 0.8em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--hairline);
}

.species-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.species-grid.is-related {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.species-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .species-card:hover {
    border-color: var(--accent);
    color: var(--primary-strong);
  }
}

.species-card img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: none;
  object-fit: cover;
}

/* Speciile fără fotografie (16 din 302) primesc litera inițială în locul
   imaginii — un pătrat verde, nu un spațiu gol care arată ca o eroare. */
.species-card .monogram {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-family: var(--serif);
  font-size: 1.15rem;
}

.species-card .names {
  min-width: 0;
}

.species-card .nm {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.25;
  display: block;
}

.species-card .sc {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-style: italic;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 404 ---------- */

.nf {
  padding: clamp(50px, 12vh, 130px) 0;
}

.nf h1 {
  margin-bottom: 0.3em;
}

.nf-langs {
  list-style: none;
  padding: 0;
  margin: 1.8em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nf-langs a {
  display: inline-block;
  padding: 9px 17px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  text-decoration: none;
  font-size: 0.95rem;
}

@media (hover: hover) and (pointer: fine) {
  .nf-langs a:hover {
    border-color: var(--accent);
    color: var(--primary-strong);
  }
}

/* ============================================================
   Prezentarea — stratul de scenă

   Tot ce urmează se aplică DOAR paginii de prezentare (`body.home`). Restul
   site-ului — catalogul, cele 2114 pagini de specii, suportul, textele
   juridice — rămîne pe hîrtie caldă, fără mișcare. Acolo lumea citește; aici
   lumea se plimbă. Regula nu e o preferință: paginile de specii se numără cu
   miile, iar o animație de intrare pe fiecare ar fi costat fără să spună nimic.
   ============================================================ */

/*
  Inelul se umple de la 0 la 74%. Un token obișnuit nu se poate anima — CSS
  nu știe să interpoleze „o valoare oarecare". `@property` îi spune că e un
  număr, iar de acolo înainte se animă ca orice altceva.

  Unde `@property` nu există încă, `--ring-p` rămîne 0 și inelul se vede gol:
  traseul e acolo, umplutura lipsește. Se întîmplă pe browsere mai vechi de
  2024; pagina rămîne citibilă, doar inelul e mai sărac.
*/
@property --ring-p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/*
  Suprafața întunecată. Nu e o a doua paletă — sînt ACEIAȘI tokeni, întorși:
  `--paper` devine cerneala, `--ink` devine hîrtia. Fiindcă fiecare componentă
  de pe site se scrie din tokeni, întoarcerea lor aici întoarce toată secțiunea
  — cardurile, pastilele, butoanele — fără ca vreuna să știe că s-a întors.

  `--primary` se luminează deliberat: verdele de brand e calculat să stea pe
  hîrtie caldă, iar pe smarald închis ar cădea sub pragul de contrast. Butonul
  principal își ia culoarea înapoi, mai jos, pentru că acolo verdele deschis
  e FOND, nu text.
*/
.on-dark,
.home .site-footer {
  --paper: #0f1d16;
  --paper-deep: #0a1410;
  --card: rgba(236, 243, 238, 0.055);
  --ink: #e9f0ea;
  --ink-muted: #9cb1a4;
  --hairline: rgba(233, 240, 234, 0.14);
  --primary: #8cc4a6;
  --primary-strong: #c3e0cd;
  --primary-soft: rgba(140, 196, 166, 0.14);
  --accent: #8cc4a6;
  --ok: #8cc4a6;
  --due: #d9b26a;
  --overdue: #e08f78;
  --ring-track: rgba(233, 240, 234, 0.13);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.32);
  /*
    `color` se scrie aici dinadins, nu doar tokenii. Un token se rezolvă la
    elementul care îl DECLARĂ, nu la cel care îl folosește: fără linia asta,
    textul care nu-și ia singur o culoare ar moșteni valoarea deja calculată de
    la `body` — cerneală închisă pe fond închis. Elementele care își pun culoare
    (legăturile, titlurile) ar arăta bine, ceea ce ar face defectul greu de
    observat pînă cînd cineva adaugă un paragraf simplu.
  */
  color: var(--ink);
}

/*
  Petele de lumină ies din secțiune pe ambele laturi — așa se vede că lumina vine
  de undeva, nu că e un dreptunghi colorat. Fără tăiere, ieșirea lor ar lăți TOT
  documentul: pagina ar căpăta o bară de derulare orizontală, iar pe telefon ai
  putea împinge toată pagina în stînga.

  `clip`, nu `hidden`, și diferența contează mai mult decît pare. O cutie cu
  `overflow: hidden` e un container care DERULEAZĂ — nu merge derulată cu
  degetul, dar e unul — iar `animation-timeline: view()` se leagă de cel mai
  apropiat asemenea strămoș, nu de pagină. Pastilele din cutia întunecată s-ar fi
  legat de cutie în loc de pagină, iar cum cutia nu se derulează niciodată,
  animația lor ar fi rămas înghețată la jumătate. Măsurat înainte de reparație:
  opacitate 0,88, nemișcată la orice derulare. `clip` taie la fel, dar nu creează
  container de derulare.

  `hidden` rămîne scris primul, pentru browserele care nu cunosc `clip` (Safari
  sub 16): acolo se taie corect, doar animația se pierde.

  Regula stă aici, pe `.on-dark`, și nu pe `.panel` unde pare că i-ar fi locul:
  `#how` are ambele clase, iar `.on-dark` vine mai jos în fișier, deci la
  specificitate egală cîștigă ea. Scrisă pe `.panel`, s-ar fi pierdut fără ca
  nimic să semnaleze — exact ce s-a și întîmplat prima dată.
*/
.on-dark {
  border-top: 0;
  background-color: var(--paper);
  overflow: hidden;
  overflow: clip;
  /* Aceeași grilă de puncte ca hîrtia, doar cu punctele deschise. Grila e a
     aplicației; dacă ar lipsi aici, secțiunea întunecată ar arăta ca alt site. */
  background-image: radial-gradient(rgba(233, 240, 234, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.hero.on-dark {
  background-image:
    radial-gradient(135% 78% at 50% -6%, rgba(140, 196, 166, 0.16), transparent 62%),
    radial-gradient(rgba(233, 240, 234, 0.05) 1px, transparent 1px);
  background-size: auto, 22px 22px;
}

.on-dark .btn-primary {
  background: var(--primary);
  color: #0b1712;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

@media (hover: hover) and (pointer: fine) {
  .on-dark .btn-primary:hover {
    background: #a5d4bb;
    color: #0b1712;
  }
}

.on-dark .btn-ghost {
  background: rgba(236, 243, 238, 0.05);
  color: var(--ink);
}

/* ---------- Ritmul secțiunilor ---------- */

/* Ritmul vertical al secțiunilor de pe pagina de prezentare stă într-o singură
   regulă, mai jos, în stratul de scenă. Aici era un duplicat care adăuga doar
   confuzie: două reguli identice ca selecție, cu valori diferite, iar cea de-a
   doua cîștiga. */

.home .section-head {
  margin-bottom: clamp(30px, 4.5vw, 52px);
}

.home #audience {
  border-top: 0;
}

/* ---------- Butoanele ---------- */

.btn {
  transition:
    transform 0.3s var(--ease-out),
    background-color 0.24s ease,
    color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.3s var(--ease-out);
  /* `manipulation` scoate întîrzierea de ~300ms pe care browserul de telefon o
     pune ca să vadă dacă urmează un al doilea tap (zoom). Pe un buton, cele
     trei zecimi de secundă se simt ca un buton mort. */
  touch-action: manipulation;
  /* Fără fulgerul albastru de la atingere: avem propriul feedback, iar două
     efecte suprapuse arată ca o eroare. */
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

/*
  Apăsarea răspunde ACUM.

  Feedback-ul la apăsare nu are voie să aștepte: diferența dintre un buton care
  se mișcă în 300ms și unul care se mișcă în 90ms e diferența dintre „a răspuns"
  și „a înghețat". De aceea `:active` rescrie durata pentru TOATE proprietățile,
  nu doar pentru transformare — altfel culoarea ar rămîne în urmă, iar butonul
  ar părea că se desface în două mișcări.
*/
.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 90ms;
}

.btn-primary {
  box-shadow: 0 1px 2px rgba(31, 43, 36, 0.12), 0 10px 22px rgba(47, 93, 68, 0.2);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    box-shadow: 0 2px 4px rgba(31, 43, 36, 0.14), 0 16px 30px rgba(47, 93, 68, 0.28);
  }
}

/* ---------- Cardurile ---------- */

/*
  Mișcarea de ridicare la trecerea cu mouse-ul scrie `translate`, nu
  `transform`. Nu e un moft: intrarea în scenă animă `transform`, iar o
  animație cu `fill: both` bate orice valoare de bază — deci un `:hover` scris
  pe `transform` pur și simplu n-ar avea efect. `translate` e o proprietate
  separată și se compune cu transformarea animată.
*/
.home .card,
.home .reasons li,
.home .plan,
.home .soon {
  transition:
    translate 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home .card:hover,
  .home .reasons li:hover,
  .home .plan:hover {
    translate: 0 -4px;
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
  }
}

/* Firimiturile de la începutul textului din fiecare card: un punct de smarald
   care se aprinde cînd te apropii. Nu poartă sens — cardul se citește la fel
   și fără el. */
.home .card {
  position: relative;
  overflow: hidden;
}

.home .card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home .card:hover::after {
    opacity: 1;
  }
}

/* ---------- Citatul pentru cine e ---------- */

.pull {
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
}

.pull h2 {
  color: var(--ink-muted);
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.4em;
}

.pull .audience {
  margin: 0 auto;
  font-size: clamp(1.35rem, 3.1vw, 1.85rem);
  line-height: 1.36;
}

/* ---------- Benzile de specii ---------- */

/*
  Catalogul se arată, nu se povestește. Fiecare portret e o legătură către
  pagina speciei, iar banda trece pe toată lățimea ecranului, așa că secțiunea
  spune „302 specii" arătîndu-le.

  A doua jumătate a benzii e o copie a primei, lipită în continuare, ca
  derularea să nu aibă cusătură. Copia e `aria-hidden` și scoasă din ordinea de
  tabulare: pentru cine navighează cu tastatura, fiecare specie trebuie să apară
  o dată, nu de două ori.
*/
.ribbons {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  margin: clamp(32px, 5vw, 56px) 0;
}

.ribbon {
  overflow: hidden;
  /* Marginile se topesc: banda pare că vine de undeva, nu că a fost tăiată. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ribbon-track {
  display: flex;
  width: max-content;
  animation: ribbon-run 140s linear infinite;
}

/* Copia care face cusătura invizibilă stă într-un `<span>` (ca să poată fi
   ascunsă de cititoarele de ecran dintr-o bucată). `display: contents` scoate
   span-ul din așezare, iar plăcile lui ajung în rîndul benzii, nu într-o
   singură celulă înaltă. */
.ribbon-copy {
  display: contents;
}

.ribbon.is-reverse .ribbon-track {
  animation-direction: reverse;
}

/* Se oprește cînd cineva vrea să se uite: cu mouse-ul pe bandă sau cu
   tastatura pe o plantă. `animation-play-state`, nu durată schimbată — o
   durată schimbată la mijlocul animației sare. */
@media (hover: hover) and (pointer: fine) {
  .ribbon:hover .ribbon-track {
    animation-play-state: paused;
  }
}

/*
  `:focus-within` NU stă sub aceeași condiție ca `:hover`.

  E o confuzie ușor de făcut cînd se trece tot ce e `:hover` sub o singură
  condiție de capabilitate: `:focus-within` nu are nicio legătură cu mouse-ul,
  ci cu tastatura. Pus sub `(hover: hover)`, ar fi însemnat că pe un ecran mic
  cine navighează cu tastatura exterioară nu mai poate opri banda ca s-o
  citească. Deci stă afară, singur.
*/
.ribbon:focus-within .ribbon-track {
  animation-play-state: paused;
}

/* Jumătate de bandă, exact. `margin-right` pe fiecare element în loc de `gap`
   pe container: cu `gap`, între cele două jumătați ar lipsi o distanță, iar
   `translateX(-50%)` ar sări cu jumătate de spațiu la fiecare rotire. */
@keyframes ribbon-run {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.ribbon-card {
  flex: none;
  width: clamp(74px, 9.5vw, 112px);
  margin-right: clamp(12px, 1.6vw, 18px);
  padding: 6px 6px 5px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 13px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.ribbon-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--plate);
}

.ribbon-card .nm {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .ribbon-card:hover {
    border-color: var(--accent);
    background: var(--primary-soft);
  }
}

@media (hover: hover) and (pointer: fine) {
  .ribbon-card:hover .nm {
    color: var(--ink);
  }
}

.catalogue-cta {
  display: flex;
  justify-content: flex-start;
}

/* ---------- Intrarea în scenă la derulare ---------- */

/*
  `animation-timeline: view()` leagă animația de POZIȚIA elementului în
  fereastră, nu de ceas. Deci nu există niciun script care să asculte
  derularea — nu pentru că n-am vrut, ci pentru că n-avem voie: `_headers`
  are `script-src 'none'`, iar verificatorul apără regula.

  Toate regulile stau în `@supports`. Fără el, un browser care nu cunoaște
  `animation-timeline` ar ignora proprietatea și ar rula animația pe ceas, la
  încărcarea paginii — adică exact pe dos: elementele de jos s-ar fi terminat
  de animat înainte ca cineva să ajungă la ele.

  ATENȚIE la ce se pune în listă. `view()` fără argument se leagă de cel mai
  apropiat strămoș care DERULEAZĂ, nu de pagină. Deci un element care stă
  într-o cutie cu `overflow` pus — banda de capturi, cutia întunecată, orice
  `overflow: hidden` — se leagă de cutia aceea, iar dacă ea nu derulează
  niciodată, animația rămîne pe loc. Măsurat înainte de reparație: pastilele din
  cutia întunecată erau înghețate la opacitate 0,88, iar ecranele din bandă nu
  se animau deloc.

  De aceea banda se animă CA ÎNTREG (`.shots`), nu fiecare captură: containerul
  e cel care se leagă de pagină. Iar cutia întunecată a primit `overflow: clip`
  în loc de `hidden` — vezi nota de acolo.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home .section-head,
    .home .card,
    .home .chip,
    .home .reasons li,
    .home .plan,
    .home .price-note,
    .home .shots,
    .home .ribbons,
    .home .pull {
      animation: rise both linear;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Cine a cerut mai puțină mișcare ---------- */

/*
  `!important` aici e deliberat și e singurul loc din foaie unde e folosit.
  Regulile de mai sus vin cu selecții lungi (`.home .card`), iar o oprire care
  ar pierde lupta de specificitate ar fi mai rea decît nicio oprire: ar părea
  că respectă preferința, dar ar lăsa animația să ruleze.

  Unde animația nu se poate doar opri, i se dă starea finală — un inel oprit
  la 0% ar rămîne gol, ceea ce e mai urît decît inelul care se învîrtește.
*/
@media (prefers-reduced-motion: reduce) {
  .aura::before,
  .aura::after,
  .rhythm-drop,
  .specimen,
  .ribbon-track,
  .home .section-head,
  .home .card,
  .home .chip,
  .home .reasons li,
  .home .plan,
  .home .price-note,
  .home .shots,
  .home .ribbons,
  .home .pull {
    animation: none !important;
  }

  .rhythm-ring {
    animation: none !important;
    background: conic-gradient(var(--ok) 74%, var(--ring-track) 0);
  }

  .hero .eyebrow,
  .hero h1 .w,
  .hero .lead,
  .hero-note,
  .hero .cta-row,
  .hero-stage {
    animation: none !important;
  }

  .btn:hover,
  .panel:hover,
  .home .card:hover,
  .home .reasons li:hover,
  .home .plan:hover {
    translate: none;
    transform: none;
  }
}

/* ============================================================
   Descărcarea — butonul, repetat acolo unde se ia hotărîrea
   ============================================================ */

/*
  Închiderea paginii.

  Cine a ajuns aici a citit tot: funcțiile, dovezile, prețul, condițiile. Ultimul
  lucru pe care îl vede trebuie să fie butonul, nu încă un paragraf. De aceea
  secțiunea nu mai are listă, nici card, nici link secundar — doar titlul, o
  liniștire despre preț și butoanele.
*/
.get-close {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
}

.get-close h2 {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  max-width: 20ch;
  margin-bottom: 0.35em;
}

.get-close .note {
  margin: 0 0 1.6em;
  font-size: 0.98rem;
}

.get-close .store-row {
  justify-content: center;
  margin: 0;
}

/*
  Bara care ține butonul la îndemînă după ce vizitatorul a trecut de hero.

  E cea mai eficientă unealtă de conversie a unei pagini de aplicație: butonul
  apare exact cînd omul a apucat să citească destul cît să se hotărască, fără să
  fure nimic din prima impresie. Fiindcă nu avem scripturi, nu o arată un
  ascultător de derulare, ci `animation-timeline: scroll()` — CSS-ul citește
  singur poziția paginii.

  Tot ce ține de apariție stă în `@supports`: acolo unde `scroll()` nu există,
  bara rămîne în starea de bază — ascunsă. E alegerea corectă, nu o scăpare:
  varianta de rezervă a unei animații de derulare ar fi ca elementul să apară
  imediat și să rămînă permanent peste conținut, ceea ce ar fi mai rău decît
  lipsa lui.
*/
.get-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(244, 241, 233, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--hairline);
  /* Linia de lumină de pe muchia de sus nu e decor: fără ea, o suprafață
     translucidă lipită de marginea ecranului arată ca o bandă de culoare
     aplicată peste pagină. Cu ea, muchia pare șlefuită, iar bara pare sticlă
     așezată deasupra conținutului. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 -8px 26px rgba(31, 43, 36, 0.08);
  opacity: 0;
  translate: 0 100%;
}

.get-bar-text {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.get-bar .badge {
  padding: 9px 16px;
  font-size: 0.9rem;
}

.get-bar .badge svg {
  width: 18px;
  height: 18px;
}

/* Pe telefon, textul din bară ar împinge butonul într-un colț; rămîne doar
   butonul, care oricum spune tot. */
@media (max-width: 559px) {
  .get-bar-text {
    display: none;
  }

  .get-bar .badge {
    padding: 11px 18px;
    font-size: 0.95rem;
  }
}

/*
  Bara se „materializează", nu doar apare.

  Un strat de sticlă care își schimbă doar opacitatea arată ca o imagine care se
  aprinde. Un material adevărat se vede că se așază: împrăștierea (blur-ul) crește
  odată cu opacitatea, deci suprafața pare că se îngroașă sub conținut. E
  diferența dintre „a apărut o bară" și „a coborît o bucată de sticlă".
*/
@keyframes bar-in {
  from {
    opacity: 0;
    translate: 0 100%;
    backdrop-filter: saturate(180%) blur(0px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    backdrop-filter: saturate(180%) blur(14px);
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .get-bar {
      animation: bar-in both linear;
      animation-timeline: scroll(root);
      /* Se arată după ce hero-ul a ieșit din peisaj, nu imediat: altfel bara ar
         concura cu butonul din hero exact în clipa în care acela se vede. */
      animation-range: 85vh 105vh;
    }
  }

  /*
    Cine a cerut mai puțină mișcare primește aceeași bară, doar fără animație.
    A o ascunde ar însemna să-i luăm o unealtă, nu o mișcare.

    Blocul stă ca FRATE al celui de deasupra, nu înăuntrul lui. Prima versiune îl
    avea imbricat în `prefers-reduced-motion: no-preference`, unde condiția nu
    se poate îndeplini niciodată — cele două preferințe se exclud. Deci regula
    arăta corect și nu se aplica niciodată.
  */
  @media (prefers-reduced-motion: reduce) {
    .get-bar {
      opacity: 1;
      translate: 0;
    }
  }

  /*
    Locul rezervat sub bară.

    Se rezervă cît încape bara, nu un număr ales o dată. Pe ecranele mici bara
    se poate rupe pe două rînduri cînd vor exista amîndouă butoanele — două
    pastile late nu încap pe 320px — iar atunci o rezervare de un rînd ar lăsa
    ultima linie a subsolului sub bară. E singurul loc unde bara chiar ar acoperi
    ceva, deci se rezervă cît pentru două rînduri acolo unde se pot rupe.
  */
  .home .site-footer {
    padding-bottom: calc(40px + 120px);
  }

  @media (min-width: 560px) {
    .home .site-footer {
      padding-bottom: calc(40px + 68px);
    }
  }
}

/* ============================================================
   Tipografie — finisajul
   ============================================================ */

/*
  `text-wrap: balance` pe titluri și `pretty` pe paragrafe.

  Prima oprește un cuvînt singur pe ultimul rînd al titlului („orfanul"), care e
  cel mai vizibil defect de tipografie dintr-o pagină mare. A doua face același
  lucru, mai blînd, pentru paragrafe, unde echilibrarea ar scurta prea mult
  rîndurile. Amîndouă sînt ignorate de browserele care nu le știu — nu se
  întîmplă nimic, doar nu se întîmplă nici îmbunătățirea.
*/
h1,
h2,
h3,
.pull .audience {
  text-wrap: balance;
}

p,
li,
.lead {
  text-wrap: pretty;
}

/*
  Numerele din pagină stau în cifre tabulare.

  Fără ele, cifrele au lățimi diferite și „302" lîngă „5" lîngă „3" se așază
  strîmb. Cu ele, se aliniază pe verticală ca într-un tabel — iar pe site-ul
  acesta cifrele chiar sînt date: cîte specii, cîte plante, cîte scanări.
*/
.home {
  font-variant-numeric: tabular-nums;
}

/*
  Corpul de text nu depășește măsura la care se citește confortabil.

  Aproximativ 65 de caractere: dincolo de asta, ochiul pierde rîndul la
  întoarcere. `.wrap` ține lat, fiindcă are și grile în el; limita se pune pe
  paragrafe, nu pe container.
*/
.home .lead,
.home .card p,
.home .reasons li,
.home .plan-sub {
  max-width: 68ch;
}

/*
  Spațiul dintre secțiuni, mărit. Pagina vinde, nu documentează: aerul dintre
  secțiuni e ce o face să pară scumpă.

  `:not(.hero)` nu e un detaliu de curățenie, e o reparație. Selecția asta are
  specificitate mai mare decît `.hero` (0,1,2 față de 0,1,0), deci îi suprascria
  tăcut marginea de sus — iar hero-ul are nevoie de o margine calculată anume, ca
  să nu intre sub antetul care plutește peste el. Cu suprascrierea, titlul cobora
  la 64px în timp ce antetul se termina la 85px: se ascundea sub el.

  S-a văzut doar pentru că am măsurat distanța dintre antet și titlu la șase
  lățimi. CSS-ul „arăta corect" în ambele locuri.
*/
.home > main > section:not(.hero) {
  padding-block: clamp(58px, 8.5vw, 118px);
}

/* ============================================================
   Preferințele de accesibilitate

   Mișcarea redusă era singura tratată pînă acum. Sînt trei semnale
   independente, iar celelalte două erau ignorate complet — deși materialul
   translucid din antet și din bara de jos e exact ce deranjează la ele.
   ============================================================ */

/*
  `prefers-reduced-transparency` — cerut de cine are nevoie de suprafețe solide.

  Transluciditatea costă: contrastul textului scade, iar pentru cine are
  probleme de vedere sau migrene, un fundal care „fierbe" în spatele literei
  face textul greu de citit. Semnalul e explicit, deci se respectă fără
  negocieri: suprafață plină, fără blur.
*/
@media (prefers-reduced-transparency: reduce) {
  .site-header::before,
  .lang ul,
  .shots {
    backdrop-filter: none;
  }

  .site-header::before,
  .get-bar {
    background: var(--paper);
  }

  .on-dark .site-header::before,
  .on-dark .get-bar {
    background: var(--paper-deep);
  }
}

/*
  `prefers-contrast: more` — cerut de cine vede greu.

  Nu e „mai închis la culoare": e contrast real. Deci marginile devin vizibile,
  iar suprafațele translucide devin pline, ca textul să stea pe ceva hotărît.
  Textul secundar urcă spre cerneală, fiindcă griul de mijloc e primul care
  dispare pentru cine are nevoie de semnalul acesta.
*/
@media (prefers-contrast: more) {
  :root {
    --ink-muted: #3f4c44;
    --hairline: #8d8a7e;
  }

  .site-header,
  .get-bar {
    background: var(--paper);
    backdrop-filter: none;
  }

  .badge,
  .btn-primary {
    border: 1px solid currentColor;
  }

  .site-footer a {
    text-decoration: underline;
  }
}

/*
  `prefers-reduced-motion` — partea rămasă neacoperită.

  Regula de mai sus oprește animațiile de intrare în scenă, dar nu spunea nimic
  despre tranzițiile de pe butoane și carduri. Reducerea mișcării nu înseamnă
  „fără feedback": înseamnă fără deplasare. Deci transformările se scot, iar
  schimbările de culoare și de umbră rămîn — ele spun același lucru fără să
  miște nimic pe ecran.
*/
@media (prefers-reduced-motion: reduce) {
  .btn,
  .badge,
  .shot,
  .home .card,
  .home .reasons li,
  .home .plan {
    transition-property: background-color, color, border-color, box-shadow;
  }

  .btn:hover,
  .btn:active,
  .badge:hover,
  .badge:active {
    transform: none;
    translate: none;
  }
}

/* ============================================================
   Stratul de platformă, pe telefon

   Ce desparte „un site văzut în browser" de „o aplicație instalată" nu ține de
   animații, ci de o mână de declarații despre atingere, derulare și zone
   sigure. Toate se aplică pe capabilitate (`hover`, `pointer`), niciodată după
   tipul dispozitivului: un iPad cu trackpad are și una, și alta.
   ============================================================ */

html {
  -webkit-tap-highlight-color: transparent;
  /* Fără umflarea fontului în landscape. Browserul de telefon mărește singur
     textul cînd ecranul se întoarce, ca să compenseze lățimea mai mică în
     înălțime — pe o pagină așezată deja pe grilă, asta rupe rîndurile.
     Ambele forme: Safari și Chrome cer prefixul, specificația nouă nu. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
  Tot ce se apasă: fără întîrziere, fără selecție, fără meniu de copiere.

  `touch-action: manipulation` scoate întîrzierea de ~300ms pe care browserul o
  pune ca să vadă dacă urmează un al doilea tap. `user-select: none` oprește
  selectarea etichetei la o apăsare lungă — un buton nativ nu face asta.
  Se aplică pe elementele care SÎNT controale, nu pe tot textul: cineva care
  copiază un nume de plantă sau o adresă de e-mail trebuie să poată.
*/
a,
button,
[role='button'],
summary,
label {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/*
  Meniul de apăsare lungă rămîne pe linkurile obișnuite.

  `-webkit-touch-callout: none` ar scoate meniul „Deschide în filă nouă / Copiază
  linkul". Pe un site cu 2114 pagini de specii, meniul acela e chiar folositor —
  cine vrea să compare două plante își deschide a doua într-o filă nouă. Se
  scoate doar unde linkul arată ca un buton, iar meniul ar fi zgomot.
*/
.btn,
.badge,
.ribbon-card,
.species-card,
.lang summary,
.get-bar .badge {
  -webkit-touch-callout: none;
}

/*
  Derularea laterală din bandă nu are voie să tragă pagina cu ea.

  `overscroll-behavior-x: contain` oprește lanțul: cînd banda ajunge la capăt,
  gestul nu mai trece în pagina de dedesubt. Fără el, un swipe la capătul benzii
  împinge toată pagina, iar omul crede că i-a fugit ecranul.
*/
.shots {
  overscroll-behavior-x: contain;
}