/* ============================================================================
   VOICEKOD — landing RU
   ----------------------------------------------------------------------------
   Toate valorile vin din tokens.css. Daca ai nevoie de o culoare care nu e
   acolo, nu o inventa aici — se masoara in brand/palette-extraction.py.

   Structura fisierului:
     1. baza si tipografie      5. sectiuni
     2. layout si container     6. formular
     3. componente de brand     7. footer
     4. header si navigatie     8. miscare, responsive, print
   ============================================================================ */

/* ============================================================ 1. BAZA */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--vk-bg);
  color: var(--vk-text);
  font-family: var(--vk-font-body);
  font-size: var(--vk-text-base);
  line-height: var(--vk-leading-body);
  letter-spacing: var(--vk-tracking-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--vk-font-display);
  font-weight: 300;
  line-height: var(--vk-leading-heading);
  margin: 0;
  color: var(--vk-heading);
}
p { margin: 0 0 var(--vk-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--vk-gold-300); text-decoration: none; }
a:hover { color: var(--vk-gold-100); }

:focus-visible {
  outline: 2px solid var(--vk-gold-300);
  outline-offset: 3px;
  border-radius: var(--vk-radius-sm);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--vk-gold-500); color: var(--vk-on-accent);
  padding: var(--vk-space-3) var(--vk-space-6); font-weight: 500;
}
.skip:focus { left: var(--vk-space-4); top: var(--vk-space-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==================================================== 2. LAYOUT */

.container {
  width: min(100% - 2.5rem, var(--vk-container));
  margin-inline: auto;
}

/* Implicit, un copil de grid are min-width:auto — adica nu coboara sub
   latimea continutului lui. Un singur cuvant lung sau o eticheta cu nowrap
   umfla atunci tot randul peste latimea ecranului, iar containerul centrat
   iese in afara si taie textul in stanga. */
.hero__grid > *, .about__grid > *, .contact__grid > *,
.steps > *, .packs > *, .reasons > *, .reviews > *, .footer__grid > * {
  min-width: 0;
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section--deep { background: var(--vk-bg-deep); }
.section--alt { background: var(--vk-bg-alt); }
.section--radial { background: var(--vk-green-radial); }

/* Singura sectiune deschisa din pagina. Textul trece pe scara light din
   tokens: aurul de actiune NU are contrast pe ivoire. */
.section--light {
  background: var(--vk-light-bg);
  color: var(--vk-light-text);
}
.section--light h2, .section--light h3 { color: var(--vk-light-accent); }
.section--light .eyebrow { color: var(--vk-gold-800); }
.section--light .lead { color: var(--vk-light-text); }
.section--light .muted { color: var(--vk-light-text-dim); }
.section--light .rule::before,
.section--light .rule::after { background: var(--vk-gold-800); opacity: 0.45; }
.section--light .rule i { background: var(--vk-gold-800); }

.stack > * + * { margin-top: var(--vk-space-4); }
.lead { font-size: var(--vk-text-lg); color: var(--vk-text); }
.muted { color: var(--vk-text-dim); }
.small { font-size: var(--vk-text-sm); }

/* ========================================== 3. COMPONENTE DE BRAND */

/* Eticheta de sectiune: linie — bulina — TEXT — bulina — linie.
   E separatorul din logo, nu un ornament inventat. */
.rule {
  display: flex; align-items: center; justify-content: center;
  gap: var(--vk-space-4);
  font-family: var(--vk-font-body);
  font-size: var(--vk-text-xs);
  letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase;
  color: var(--vk-gold-300);
  margin: 0 0 var(--vk-space-4);
}
.rule::before, .rule::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 8rem;
  background: var(--vk-gold-500); opacity: 0.5;
}
.rule i { width: 5px; height: 5px; border-radius: 50%; background: var(--vk-gold-500); flex: none; }

.eyebrow {
  font-size: var(--vk-text-xs);
  letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase;
  color: var(--vk-gold-500);
  margin: 0 0 var(--vk-space-3);
}

.section-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--vk-text-3xl); }
.section-head p { margin-top: var(--vk-space-4); }
.section-head .lead { margin-inline: auto; max-width: 60ch; }

/* Axa de puncte din logo: cresc pana la al cincilea, apoi descresc.
   Razele sunt cele masurate in brand/logo/geometry.json. */
.spine {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding-block: var(--vk-space-8);
}
.spine span { border-radius: 50%; background: var(--vk-gold-500); opacity: 0.75; }
.spine span:nth-child(1) { width: 3px;  height: 3px; }
.spine span:nth-child(2) { width: 4px;  height: 4px; }
.spine span:nth-child(3) { width: 6px;  height: 6px; }
.spine span:nth-child(4) { width: 7px;  height: 7px; }
.spine span:nth-child(5) { width: 8px;  height: 8px; background: var(--vk-gold-300); }
.spine span:nth-child(6) { width: 7px;  height: 7px; }
.spine span:nth-child(7) { width: 5px;  height: 5px; }
.spine span:nth-child(8) { width: 4px;  height: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--vk-space-2);
  font-family: var(--vk-font-body);
  font-size: var(--vk-text-sm); font-weight: 500;
  letter-spacing: var(--vk-tracking-caps); text-transform: uppercase;
  padding: 0.9rem 1.6rem; border-radius: var(--vk-radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--vk-duration-fast) var(--vk-ease),
              color var(--vk-duration-fast) var(--vk-ease),
              border-color var(--vk-duration-fast) var(--vk-ease),
              transform var(--vk-duration-fast) var(--vk-ease);
}
.btn--gold {
  background: var(--vk-gold-500); color: var(--vk-on-accent);
  box-shadow: var(--vk-shadow-sm);
}
.btn--gold:hover { background: var(--vk-gold-300); color: var(--vk-on-accent); transform: translateY(-1px); }
.btn--ghost { border-color: var(--vk-border-gold); color: var(--vk-gold-300); }
.btn--ghost:hover { border-color: var(--vk-gold-300); background: rgba(220, 200, 141, 0.08); color: var(--vk-gold-100); }
.btn--block { width: 100%; }

.card {
  background: var(--vk-surface);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ================================================ 4. HEADER */

.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-block: var(--vk-space-4);
  transition: background var(--vk-duration) var(--vk-ease),
              box-shadow var(--vk-duration) var(--vk-ease),
              padding var(--vk-duration) var(--vk-ease);
}
.header.is-stuck {
  background: rgba(0, 25, 16, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--vk-shadow);
  padding-block: var(--vk-space-2);
}
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--vk-space-6); }
.header__logo img { height: clamp(34px, 4vw, 44px); width: auto; transition: height var(--vk-duration) var(--vk-ease); }
.header.is-stuck .header__logo img { height: 32px; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-size: var(--vk-text-xs); letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase; color: var(--vk-text);
  padding-block: var(--vk-space-2); position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--vk-gold-300); transition: right var(--vk-duration-fast) var(--vk-ease);
}
.nav a:hover { color: var(--vk-gold-300); }
.nav a:hover::after { right: 0; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: var(--vk-space-2); width: 44px; height: 44px;
}
.burger span { display: block; height: 1.5px; background: var(--vk-gold-300); margin: 5px 0; transition: transform var(--vk-duration-fast) var(--vk-ease), opacity var(--vk-duration-fast); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ================================================ 5. HERO */

.hero {
  position: relative;
  padding-block: clamp(7rem, 14vw, 10rem) clamp(3rem, 6vw, 5rem);
  background: var(--vk-green-radial);
  overflow: hidden;
}
/* Ecoul cercului din emblema — singura forma decorativa din pagina. */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  width: min(52rem, 90vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(220, 200, 141, 0.12);
  right: -14rem; top: -10rem;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1.05fr 0.95fr; align-items: center;
}
.hero h1 {
  font-size: var(--vk-text-4xl);
  line-height: 1.06;
  margin-bottom: var(--vk-space-6);
  background: var(--vk-gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) { .hero h1 { color: var(--vk-gold-300); } }

.hero__kicker {
  font-size: var(--vk-text-xs); letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase; color: var(--vk-gold-500);
  margin-bottom: var(--vk-space-6);
}
.hero__kicker span { color: var(--vk-text-dim); }
.hero p { max-width: 46ch; }
.hero__sign {
  font-family: var(--vk-font-display); font-style: italic;
  font-size: var(--vk-text-xl); color: var(--vk-gold-300);
  margin-block: var(--vk-space-6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--vk-space-4); margin-top: var(--vk-space-8); }

/* Portretul e decupat din fundal (vezi site/cutout.py), deci nu mai are nevoie
   de ramă: stă direct pe verde, cu un halou cald în spate ca să nu plutească. */
.hero__photo { position: relative; justify-self: center; width: min(100%, 27rem); }
.hero__photo figure { margin: 0; position: relative; }
.hero__photo figure::before {
  content: ""; position: absolute; inset: 6% -12% 2% -12%; z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 44%,
    rgba(21, 54, 34, 0.95) 0%, rgba(10, 34, 20, 0.55) 52%,
    rgba(0, 31, 23, 0) 78%);
}
.hero__photo img {
  position: relative; z-index: 1; width: 100%;
  filter: drop-shadow(0 26px 42px rgba(0, 12, 8, 0.55));
  /* Fotografia originala e taiata de marginea cadrului, deci decupajul se
     termina cu o linie dreapta. Pe verde plat linia se vede; masca o topeste. */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 99%);
  mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 99%);
}
.hero__badge {
  position: absolute; left: 50%; bottom: -1.25rem; transform: translateX(-50%);
  max-width: 100%; white-space: nowrap;
  background: var(--vk-green-950); border: 1px solid var(--vk-border-gold);
  border-radius: var(--vk-radius-pill);
  padding: var(--vk-space-3) var(--vk-space-8);
  text-align: center;
}
.hero__badge b {
  display: block; font-family: var(--vk-font-display); font-weight: 400;
  font-size: var(--vk-text-lg); color: var(--vk-gold-300); line-height: 1.2;
}
.hero__badge span {
  font-size: 0.6875rem; letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase; color: var(--vk-text-dim);
}

/* Bara de argumente sub hero */
.trust { border-top: 1px solid var(--vk-border); border-bottom: 1px solid var(--vk-border); background: var(--vk-bg-deep); }
.trust ul {
  list-style: none; margin: 0; padding: var(--vk-space-8) 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vk-space-6);
  text-align: center;
}
.trust li { font-size: var(--vk-text-sm); color: var(--vk-text-dim); }
.trust b {
  display: block; font-family: var(--vk-font-display); font-weight: 400;
  font-size: var(--vk-text-lg); color: var(--vk-gold-300); margin-bottom: var(--vk-space-1);
}

/* ================================================ 6. SECTIUNI */

.about__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Portretul decupat e o siluetă îngustă; halo-ul îi dă masa vizuală
   pe care o avea înainte dreptunghiul fotografiei. */
.about__photo {
  position: relative; justify-self: center; width: min(100%, 22rem);
  background: radial-gradient(ellipse 58% 62% at 52% 52%,
    var(--vk-sand) 0%, rgba(210, 197, 182, 0.45) 55%,
    rgba(225, 214, 203, 0) 76%);
}
.about__photo img {
  filter: drop-shadow(0 18px 30px rgba(120, 100, 76, 0.28));
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
}
.about h2 { font-size: var(--vk-text-3xl); margin-bottom: var(--vk-space-4); }
.about blockquote {
  margin: var(--vk-space-8) 0 0; padding-left: var(--vk-space-6);
  border-left: 2px solid var(--vk-gold-700);
  font-family: var(--vk-font-display); font-size: var(--vk-text-xl);
  color: var(--vk-light-accent); line-height: 1.4;
}
.edu { list-style: none; margin: var(--vk-space-6) 0 0; padding: 0; display: grid; gap: var(--vk-space-3); }
.edu li { position: relative; padding-left: var(--vk-space-8); font-size: var(--vk-text-sm); }
.edu li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--vk-gold-700);
}
.edu li::after {
  content: ""; position: absolute; left: 3px; top: calc(0.55em + 3px);
  width: 4px; height: 4px; border-radius: 50%; background: var(--vk-gold-700);
}

/* Metoda: cinci etape care chiar sunt o secventa, deci sunt numerotate. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--vk-space-6); counter-reset: step; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 1px;
  background: var(--vk-gold-gradient-h); opacity: 0.45;
}
.step { position: relative; text-align: center; }
.step__dot {
  width: 52px; height: 52px; margin: 0 auto var(--vk-space-4);
  border-radius: 50%; background: var(--vk-bg);
  border: 1px solid var(--vk-border-gold);
  display: grid; place-items: center;
  font-family: var(--vk-font-display); font-size: var(--vk-text-lg);
  color: var(--vk-gold-300);
}
.step h3 { font-size: var(--vk-text-lg); margin-bottom: var(--vk-space-2); }
.step p { font-size: var(--vk-text-sm); color: var(--vk-text-dim); }

/* Pachete */
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.pack { position: relative; display: flex; flex-direction: column; height: 100%; }
.pack--vip { border-color: var(--vk-border-gold); background: linear-gradient(180deg, var(--vk-green-700), var(--vk-green-800)); }
.pack__tag {
  display: inline-block; align-self: flex-start; font-size: 0.6875rem; letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase; color: var(--vk-gold-500);
  border: 1px solid var(--vk-border-gold); border-radius: var(--vk-radius-pill);
  padding: 0.25rem 0.9rem; margin-bottom: var(--vk-space-6);
}
.pack h3 { font-size: var(--vk-text-2xl); letter-spacing: 0.02em; }
.pack__price {
  font-family: var(--vk-font-display); font-size: var(--vk-text-3xl);
  color: var(--vk-gold-300); line-height: 1; margin: var(--vk-space-4) 0 var(--vk-space-2);
}
.pack__price small { font-family: var(--vk-font-body); font-size: var(--vk-text-sm); color: var(--vk-text-dim); letter-spacing: 0; }
.pack ul { list-style: none; margin: var(--vk-space-6) 0; padding: 0; display: grid; gap: var(--vk-space-3); }
.pack li { position: relative; padding-left: var(--vk-space-8); font-size: var(--vk-text-sm); }
.pack li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--vk-gold-500); font-size: var(--vk-text-sm);
}
.pack .btn { margin-top: auto; }
.pack__note { font-size: var(--vk-text-xs); color: var(--vk-text-dim); margin-top: var(--vk-space-3); text-align: center; }

.extras {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px dashed var(--vk-border); border-radius: var(--vk-radius-lg);
  padding: var(--vk-space-6) clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-wrap: wrap; gap: var(--vk-space-6) var(--vk-space-12);
  align-items: center; justify-content: space-between;
}
.extras h3 { font-size: var(--vk-text-lg); }
.extras dl { display: flex; flex-wrap: wrap; gap: var(--vk-space-6) var(--vk-space-8); margin: 0; }
.extras dt { font-size: var(--vk-text-sm); color: var(--vk-text-dim); }
.extras dd { margin: 0; font-family: var(--vk-font-display); font-size: var(--vk-text-xl); color: var(--vk-gold-300); }

/* Motive */
.reasons { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--vk-space-8); text-align: center; }
.reason svg { width: 34px; height: 34px; margin: 0 auto var(--vk-space-4); color: var(--vk-gold-500); }
.reason h3 { font-family: var(--vk-font-body); font-size: var(--vk-text-sm); font-weight: 500; color: var(--vk-text); letter-spacing: var(--vk-tracking-body); }

/* Recenzii */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2rem); }
.review { display: flex; flex-direction: column; }
.review__mark { font-family: var(--vk-font-display); font-size: 3rem; line-height: 0.6; color: var(--vk-gold-700); margin-bottom: var(--vk-space-4); }
.review p { font-size: var(--vk-text-sm); }
.review footer { margin-top: auto; padding-top: var(--vk-space-6); font-size: var(--vk-text-xs); color: var(--vk-text-dim); letter-spacing: var(--vk-tracking-caps); text-transform: uppercase; }

/* Intrebari: <details> nativ — functioneaza si fara JS, si e citibil de crawler
   pentru ca raspunsul e in DOM, nu injectat la click. */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: var(--vk-space-3); }
.faq details {
  border: 1px solid var(--vk-border); border-radius: var(--vk-radius-lg);
  background: var(--vk-surface); padding: var(--vk-space-4) var(--vk-space-6);
  transition: border-color var(--vk-duration-fast) var(--vk-ease);
}
.faq details[open] { border-color: var(--vk-border-gold); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--vk-font-display); font-size: var(--vk-text-lg);
  color: var(--vk-gold-300);
  display: flex; align-items: center; justify-content: space-between; gap: var(--vk-space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--vk-font-body); font-size: var(--vk-text-lg);
  color: var(--vk-gold-500); flex: none; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: var(--vk-space-4); font-size: var(--vk-text-sm); color: var(--vk-text-dim); }

/* ================================================ 7. CONTACT + FORMULAR */

.contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__list { list-style: none; margin: var(--vk-space-8) 0 0; padding: 0; display: grid; gap: var(--vk-space-4); }
.contact__list a { display: inline-flex; align-items: center; gap: var(--vk-space-3); color: var(--vk-text); }
.contact__list a:hover { color: var(--vk-gold-300); }
.contact__list svg { width: 18px; height: 18px; color: var(--vk-gold-500); flex: none; }

.form { display: grid; gap: var(--vk-space-4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vk-space-4); }
.field { display: grid; gap: var(--vk-space-2); }
.field label {
  font-size: var(--vk-text-xs); letter-spacing: var(--vk-tracking-caps);
  text-transform: uppercase; color: var(--vk-text-dim);
}
.field input, .field textarea, .field select {
  font-family: var(--vk-font-body); font-size: var(--vk-text-base);
  color: var(--vk-text); background: var(--vk-green-950);
  border: 1px solid var(--vk-border); border-radius: var(--vk-radius);
  padding: 0.85rem 1rem; width: 100%;
  transition: border-color var(--vk-duration-fast) var(--vk-ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--vk-green-400); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--vk-gold-500); outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C97A6B; }
.field .err { font-size: var(--vk-text-xs); color: #E3A497; min-height: 1em; }

.consent { display: flex; gap: var(--vk-space-3); align-items: flex-start; font-size: var(--vk-text-xs); color: var(--vk-text-dim); }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vk-gold-500); flex: none; }

/* Capcana pentru roboti — ramane invizibila si pentru cititoarele de ecran. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: var(--vk-text-sm); min-height: 1.5em; }
.form__status[data-state="ok"] { color: var(--vk-gold-300); }
.form__status[data-state="err"] { color: #E3A497; }

/* ================================================ 8. FOOTER */

.footer { background: var(--vk-bg-deep); border-top: 1px solid var(--vk-border); padding-block: var(--vk-space-16) var(--vk-space-8); }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--vk-space-12); }
.footer__logo img { height: 96px; width: auto; }
.footer h4 { font-family: var(--vk-font-body); font-size: var(--vk-text-xs); font-weight: 500; letter-spacing: var(--vk-tracking-caps); text-transform: uppercase; color: var(--vk-gold-500); margin-bottom: var(--vk-space-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vk-space-2); }
.footer a { color: var(--vk-text-dim); font-size: var(--vk-text-sm); }
.footer a:hover { color: var(--vk-gold-300); }
.footer__bottom {
  margin-top: var(--vk-space-12); padding-top: var(--vk-space-6);
  border-top: 1px solid var(--vk-border);
  display: flex; flex-wrap: wrap; gap: var(--vk-space-4); justify-content: space-between;
  font-size: var(--vk-text-xs); color: var(--vk-text-dim);
}
.footer__lotus { margin: 0 auto var(--vk-space-8); width: 84px; opacity: 0.8; }

/* Creditul autorului. Scânteia se rotește încet — semnătura trebuie observată
   a doua oară, nu prima. La hover se aprinde. */
.credit {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--vk-text-xs); color: var(--vk-text-dim);
  letter-spacing: var(--vk-tracking-body);
}
.credit b { font-weight: 500; color: var(--vk-text-dim); transition: color var(--vk-duration-fast) var(--vk-ease); }
.credit:hover { color: var(--vk-gold-300); }
.credit:hover b { color: var(--vk-gold-300); }
.credit__spark {
  width: 1.05em; height: 1.05em; flex: none;
  fill: var(--vk-gold-500);
  animation: vk-spark 9s linear infinite;
  transform-origin: 50% 50%;
}
.credit:hover .credit__spark { animation-duration: 2.4s; fill: var(--vk-gold-300); }
@keyframes vk-spark {
  0%   { transform: rotate(0deg)   scale(0.82); opacity: 0.55; }
  50%  { transform: rotate(180deg) scale(1);    opacity: 1; }
  100% { transform: rotate(360deg) scale(0.82); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .credit__spark, .credit:hover .credit__spark { animation: none; opacity: 0.9; }
}

/* ================================================ 9. MISCARE */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--vk-duration) var(--vk-ease),
              transform var(--vk-duration) var(--vk-ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ================================================ 10. RESPONSIVE */

@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--vk-space-8); }
  .steps::before { display: none; }
  .reasons { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(20rem, 82vw);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--vk-space-6);
    background: var(--vk-green-950); padding: var(--vk-space-16) var(--vk-space-8);
    transform: translateX(100%); transition: transform var(--vk-duration) var(--vk-ease);
    box-shadow: var(--vk-shadow-lg);
  }
  .nav.is-open { transform: none; }
  .nav a { font-size: var(--vk-text-sm); }
  .nav .btn { width: 100%; }

  .hero__grid, .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .hero__photo { order: -1; width: min(100%, 22rem); }
  .hero::before { display: none; }
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .packs { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .extras { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .reasons { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--vk-space-8); }
  .hero__photo figure::before { inset: 10% -6% 2% -6%; }
  .hero__badge {
    position: static; transform: none; display: block;
    margin-top: var(--vk-space-6);
    white-space: normal; padding-inline: var(--vk-space-4);
  }
  .hero__badge span { display: inline-block; line-height: 1.5; }
}

@media print {
  .header, .burger, .hero__cta, .form, .spine { display: none; }
  body { background: #fff; color: #000; }
}