/* ============================================================
   CHIRIVO — landing page
   ------------------------------------------------------------
   Cuprins:
   1.  Variabile (teme light/dark)
   2.  Reset + baze
   3.  Tipografie
   4.  Utilitare (container, eyebrow, accesibilitate)
   5.  Butoane + focus
   6.  Preloader
   7.  Header + switch temă
   8.  Hero
   9.  Imagini (cadru cu fallback)
   10. Problema (carduri)
   11. Cum funcționează (pași + flow de status)
   12. Diferențiator + Pentru cine
   13. Waitlist + formular
   14. Footer
   15. Breakpoints (768px tabletă, 1024px+ desktop)
   16. prefers-reduced-motion
   ------------------------------------------------------------
   Notă despre culori: fiecare variabilă e declarată de două ori —
   întâi hex (fallback pentru browsere vechi), apoi oklch. Browserul
   care înțelege oklch o folosește pe a doua; restul rămân pe hex.
   ============================================================ */


/* ============================================================
   1. VARIABILE — TEMA LIGHT (implicită)
   ============================================================ */
:root {
  /* --- culori de brand (identice în ambele teme) --- */
  --brand:            #3B6FCC;
  --brand:            oklch(58% 0.14 240);   /* albastru principal (accente, borduri, logo) */
  --on-brand:         #F4F6FA;
  --on-brand:         oklch(97% 0.006 240);  /* text pe albastru */

  /* Albastrul de UMPLERE (butoane, bulinele cu numărul pașilor).
     E cu două trepte mai închis decât --brand pentru că are text alb
     deasupra: la 58% contrastul e 3.8:1 (sub AA), la 52% urcă la 4.9:1.
     Aceeași nuanță de brand, doar suficient de închisă cât să fie lizibilă. */
  --brand-solid:      #2F5AA6;
  --brand-solid:      oklch(52% 0.14 240);
  --brand-solid-hover:#264A8A;
  --brand-solid-hover:oklch(46% 0.14 240);

  --green:            #1F9E6B;
  --green:            oklch(58% 0.14 155);   /* verde secundar */
  --green-light:      #5FDCA5;
  --green-light:      oklch(80% 0.14 155);   /* verde deschis, pt. fundal închis */

  /* --- suprafețe și text (se schimbă între teme) --- */
  --bg:               #F4F6FA;
  --bg:               oklch(97% 0.006 240);  /* aproape-alb */
  --bg-alt:           #EAEEF6;
  --bg-alt:           oklch(94% 0.008 240);  /* bandă de secțiune */
  --surface:          #FFFFFF;
  --surface:          oklch(100% 0 0);       /* carduri */
  --ink:              #151B26;
  --ink:              oklch(20% 0.02 240);   /* text principal */
  --ink-muted:        #4F5967;
  --ink-muted:        oklch(48% 0.02 240);   /* text secundar (AA pe --bg) */
  --line:             #DCE2ED;
  --line:             oklch(90% 0.01 240);   /* borduri decorative (carduri, separatoare) */
  /* bordura controalelor (input, buton temă) — trebuie să atingă 3:1
     față de fundal ca să se vadă unde poți da click */
  --line-control:     #7D8794;
  --line-control:     oklch(62% 0.02 240);

  /* accent-ul folosit ca TEXT are nevoie de mai mult contrast
     decât cel folosit ca fundal — de aici variantele „-text" */
  --brand-text:       #2C55A0;
  --brand-text:       oklch(46% 0.14 260);
  --green-text:       #167A52;
  --green-text:       oklch(45% 0.12 155);

  /* --- culori de status (plătit / în așteptare / restant) --- */
  --status-paid:      #1F9E6B;
  --status-paid:      oklch(58% 0.14 155);
  --status-pending:   #B58200;
  --status-pending:   oklch(62% 0.14 85);   /* galben închis: 3.4:1 pe fundal deschis */
  --status-late:      #CC4A44;
  --status-late:      oklch(58% 0.17 25);

  /* --- constante de layout --- */
  --preloader-bg:     #0C1017;
  --preloader-bg:     oklch(14% 0.014 240);  /* mereu închis, în ambele teme */
  --radius:           14px;
  --radius-lg:        22px;
  --shadow:           0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .14);
  --wrap:             1200px;
  --pad-x:            20px;

  color-scheme: light;
}

/* ============================================================
   1b. VARIABILE — TEMA DARK
   Nu inversăm mecanic: fundalurile urcă puțin în luminozitate
   pentru carduri, iar accentele devin mai deschise ca să treacă AA.
   ============================================================ */
[data-theme="dark"] {
  --bg:               #0C1017;
  --bg:               oklch(14% 0.014 240);  /* aproape-negru */
  --bg-alt:           #11161F;
  --bg-alt:           oklch(17% 0.016 240);
  --surface:          #161C27;
  --surface:          oklch(20% 0.018 240);
  --ink:              #EDF0F6;
  --ink:              oklch(95% 0.006 240);
  --ink-muted:        #A8B2C1;
  --ink-muted:        oklch(75% 0.015 240);
  --line:             #2A3241;
  --line:             oklch(29% 0.02 240);
  --line-control:     #5F6B74;
  --line-control:     oklch(52% 0.02 240);

  --brand-text:       #8FB2F0;
  --brand-text:       oklch(78% 0.11 250);
  --green-text:       #5FDCA5;
  --green-text:       oklch(80% 0.14 155);   /* verdele deschis din paletă */

  --status-paid:      #5FDCA5;
  --status-paid:      oklch(80% 0.14 155);
  --status-pending:   #E3B341;
  --status-pending:   oklch(82% 0.13 85);
  --status-late:      #F08A84;
  --status-late:      oklch(74% 0.13 25);

  --shadow:           0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);

  color-scheme: dark;
}


/* ============================================================
   2. RESET + BAZE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* blochează scroll-ul cât timp preloader-ul e vizibil */
body.is-loading { overflow: hidden; }

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

/* Atributul [hidden] trebuie să bată orice `display` pus de noi.
   Fără asta, formularul (care e display:flex) rămâne vizibil
   după ce JS-ul îi pune hidden = true la trimiterea cu succes. */
[hidden] { display: none !important; }


/* ============================================================
   3. TIPOGRAFIE
   Space Grotesk — titluri, wordmark, butoane, eyebrow.
   IBM Plex Sans — text curent.
   ============================================================ */
h1, h2, h3, .btn, .logo__word, .eyebrow, .step__num {
  font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  /* 1.16 nu 1.0 — diacriticele românești (ț, ș coborâtoare și î, ă, â
     cu semne deasupra) au nevoie de spațiu între rânduri */
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; }

/* text mare de introducere */
.lead {
  font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.section__title {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  margin-bottom: 20px;
}
.section__title--center { text-align: center; }


/* ============================================================
   4. UTILITARE
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 820px; }

.section { padding-block: clamp(64px, 9vw, 128px); }

/* eticheta mică de deasupra titlurilor */
.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: 16px;
}

/* text doar pentru cititoarele de ecran */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* link „sari la conținut" — apare doar la focus cu tastatura */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--brand-solid);
  color: var(--on-brand);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0; }


/* ============================================================
   5. BUTOANE + FOCUS VIZIBIL
   Stările de focus sunt obligatorii pe TOT ce e interactiv.
   ============================================================ */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-text);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn--primary {
  background-color: var(--brand-solid);
  color: var(--on-brand);
}
.btn--primary:hover { background-color: var(--brand-solid-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }


/* ============================================================
   6. PRELOADER
   Fundal ÎNTOTDEAUNA închis (--preloader-bg), indiferent de temă.
   Iconița albă se desenează: întâi casa, apoi bifa.
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--preloader-bg);
  color: #FFFFFF;
  transition: opacity .45s ease, visibility .45s ease;
}

/* clasa adăugată din JS când animația s-a terminat */
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark {
  width: clamp(84px, 22vw, 128px);
  height: auto;
  color: #FFFFFF;   /* monocrom: iconița e albă pe fundal închis */
}

/* Tehnica de desenare: conturul e „ascuns" printr-un dash offset egal
   cu lungimea liniei, apoi offset-ul e animat spre 0.
   Valorile sunt în unitățile viewBox-ului (24x24), nu în pixeli. */
.preloader__mark .house {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: draw .8s ease-out .1s forwards;
}
.preloader__mark .check {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: draw .4s ease-out .7s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }


/* ============================================================
   7. HEADER + SWITCH TEMĂ
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

/* --- logo (iconiță + wordmark), monocrom --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--brand-text);   /* o singură culoare pentru tot logo-ul */
}
.logo__mark { width: 30px; height: 30px; }
.logo__word {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.logo--sm .logo__mark { width: 24px; height: 24px; }
.logo--sm .logo__word { font-size: 1.12rem; }

/* --- switch temă --- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.theme-toggle:hover { border-color: var(--brand); }
.theme-toggle__icon { width: 21px; height: 21px; grid-area: 1 / 1; }

/* în light se vede luna („treci pe dark"), în dark se vede soarele */
.theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }


/* ============================================================
   8. HERO
   ============================================================ */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(48px, 6vw, 80px); }

.hero__grid {
  display: grid;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.4rem, 1.5rem + 4.6vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.hero__sub { max-width: 56ch; margin-bottom: 32px; }


/* ============================================================
   9. IMAGINI — cadru cu fallback
   Cadrul are propriul background din paletă. Dacă poza lipsește
   (nu e încă în images/), JS-ul marchează cadrul cu .is-empty și
   ascunde <img>, ca layout-ul să rămână intact.
   ============================================================ */
.media-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--brand) 12%, var(--bg-alt));
  box-shadow: var(--shadow);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame--hero { aspect-ratio: 4 / 3; }
.media-frame--problema { aspect-ratio: 4 / 3; }

/* starea „poza încă nu e pusă" — discretă, nu strică secțiunea */
.media-frame.is-empty img { display: none; }
.media-frame.is-empty::after {
  content: attr(data-empty-label);
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 16px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}


/* ============================================================
   10. PROBLEMA — titlu + poza2 + 3 carduri
   ============================================================ */
.problema__head {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.cards {
  display: grid;
  gap: 20px;
}

.card {
  padding: 30px 26px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow);
}
/* linie subțire de accent în capul cardului */
.card__title {
  position: relative;
  font-size: 1.32rem;
  padding-top: 18px;
  margin-bottom: 12px;
}
.card__title::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--brand);
}
.card__text { color: var(--ink-muted); }


/* ============================================================
   11. CUM FUNCȚIONEAZĂ — 4 pași + schema de status
   ============================================================ */
.cum { background-color: var(--bg-alt); }
.cum .eyebrow { text-align: center; }

.steps {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

.step {
  position: relative;
  padding: 28px 24px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.step__num {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 18px;
  border-radius: 999px;
  background-color: var(--brand-solid);
  color: var(--on-brand);
  font-size: .98rem;
  font-weight: 700;
}

.step__icon {
  position: absolute;
  top: 28px; right: 24px;
  width: 30px; height: 30px;
  color: var(--brand-text);
  opacity: .9;
}

.step__title { font-size: 1.22rem; margin-bottom: 10px; }
.step__text { color: var(--ink-muted); font-size: .98rem; }

/* --- mini-flow: dovadă încărcată → verificare → plătit --- */
.flow {
  max-width: 780px;            /* nu lăsăm schema să se întindă pe tot ecranul */
  margin-top: clamp(40px, 5vw, 60px);
  margin-inline: auto;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

/* pe mobil: coloană (nod → săgeată în jos → nod).
   de la 768px devine rând orizontal — vezi breakpoints. */
.flow__track {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.flow__node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .92rem;
  color: var(--ink);
}
.flow__icon { width: 20px; height: 20px; color: var(--ink-muted); }

/* ultimul nod = plătit, deci primește verdele de status */
.flow__node:last-child { border-color: var(--status-paid); }
.flow__node:last-child .flow__icon { color: var(--status-paid); }

.flow__arrow { display: flex; }
.flow__arrow svg {
  width: 26px;
  height: 12px;
  color: var(--ink-muted);
  opacity: .55;
  transform: rotate(90deg);   /* pe mobil săgeata arată în jos */
}

/* --- legenda celor 3 stări --- */
.legend {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  font-size: .9rem;
  color: var(--ink-muted);
}
.legend__item { display: inline-flex; align-items: center; gap: 9px; }

.dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  flex: none;
}
.dot--paid    { background-color: var(--status-paid); }
.dot--pending { background-color: var(--status-pending); }
.dot--late    { background-color: var(--status-late); }


/* ============================================================
   12. DIFERENȚIATOR + PENTRU CINE
   ============================================================ */
.statement {
  font-size: clamp(1.12rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
  padding-left: 22px;
  border-left: 3px solid var(--green);
}

[data-theme="dark"] .statement { border-left-color: var(--green-light); }

.pentru-cine { background-color: var(--bg-alt); }


/* ============================================================
   13. WAITLIST + FORMULAR
   ============================================================ */
.waitlist__inner { text-align: center; }
.waitlist__text { margin: 0 auto 34px; max-width: 58ch; }

.signup { max-width: 520px; }
.signup--center { margin-inline: auto; }

.signup__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signup__input {
  flex: 1;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
.signup__input::placeholder { color: var(--ink-muted); opacity: .8; }
.signup__input:hover { border-color: var(--brand); }

/* stare de eroare la validare (adăugată din JS) */
.signup__input.has-error { border-color: var(--status-late); }

.signup__note {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--ink-muted);
}

/* mesajele de după trimitere */
.signup__msg {
  margin-top: 14px;
  font-size: .98rem;
  font-weight: 500;
}
.signup__msg--ok   { color: var(--green-text); }
.signup__msg--err  { color: var(--status-late); }


/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 48px 40px;
}
.site-footer__inner {
  display: grid;
  gap: 22px;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.site-footer__social a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .96rem;
}
.site-footer__social a:hover { color: var(--brand-text); }
.site-footer__social .handle { color: var(--ink-muted); font-weight: 400; }

.site-footer__contact a {
  color: var(--brand-text);
  font-weight: 500;
  text-decoration: none;
}
.site-footer__contact a:hover { text-decoration: underline; }

.site-footer__fine {
  font-size: .86rem;
  color: var(--ink-muted);
}


/* ============================================================
   15. BREAKPOINTS
   Mobil întâi (regulile de mai sus). Aici doar creștem layout-ul.
   ============================================================ */

/* --- tabletă: de la 768px --- */
@media (min-width: 768px) {
  :root { --pad-x: 32px; }

  .cards { grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* titlul primește ceva mai mult loc decât poza pe tabletă */
  .problema__head { grid-template-columns: 1.15fr 0.85fr; }

  /* formularul devine o singură linie: input + buton */
  .signup__form { flex-direction: row; align-items: center; }
  .signup__form .btn { flex: none; }

  /* pe ecran lat fluxul devine orizontal */
  .flow__track { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .flow__arrow svg { transform: none; width: 40px; }
  .flow__node { padding-inline: 14px 18px; }

  .site-footer__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 26px;
  }
  .site-footer__social { justify-content: flex-end; }
  .site-footer__contact { grid-column: 1; }
  .site-footer__fine { grid-column: 2; text-align: right; }
}

/* --- desktop: de la 1024px --- */
@media (min-width: 1024px) {
  body { font-size: 18px; }

  /* hero pe două coloane: text + poză */
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .media-frame--hero { aspect-ratio: 5 / 6; }

  .problema__head { grid-template-columns: 1fr 1fr; }

  .steps { grid-template-columns: repeat(4, 1fr); }
  .step { padding: 30px 24px 34px; }
  .step__icon { position: static; margin-bottom: 16px; }
  .step__num { position: absolute; top: 30px; right: 24px; margin-bottom: 0; }

  .flow { padding: 34px 32px; }
  .statement { padding-left: 30px; }
}

/* --- ecrane foarte late: de la 1440px --- */
@media (min-width: 1440px) {
  :root { --pad-x: 48px; }
  .hero__grid { gap: 80px; }
}


/* ============================================================
   16. prefers-reduced-motion
   Fără animații, fără scroll animat, fără desenarea iconiței.
   (Preloader-ul e ascuns imediat din script.js.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .preloader__mark .house,
  .preloader__mark .check {
    stroke-dashoffset: 0;
    animation: none;
  }
}


/* ============================================================
   17. CONSIMȚĂMÂNT (GDPR) — casetă mică, colț dreapta-jos
   Nu blochează pagina; doar informează + link spre confidențialitate.
   ============================================================ */
.consent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  max-width: 320px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.consent.is-visible { opacity: 1; transform: translateY(0); }

.consent__text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.consent__text a {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent__accept {
  align-self: flex-end;
  padding: 10px 20px;
  font-size: 0.92rem;
}

@media (max-width: 480px) {
  /* variantă compactă, ca bară — nu card înalt — ca să nu acopere
     formularul din Hero, care e sus de tot pe ecrane mici */
  .consent {
    left: 10px; right: 10px; bottom: 10px; max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
  }
  .consent__text { font-size: 0.76rem; line-height: 1.3; }
  .consent__accept {
    align-self: center;
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 0.78rem;
  }
}

/* pe ecrane foarte scunde (telefoane mici), scurtăm și mai mult textul,
   ca banda să rămână sub 60px înălțime */
@media (max-width: 480px) and (max-height: 700px) {
  .consent__text .consent__text--long { display: none; }
}

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