/* Nadia Domeniu — „Confesiune la lumânare"
   Paletă derivată din cadrele video ale Nadiei:
   negru cald cu tentă prună, alamă/chihlimbar, vin, fildeș.
   --hot e rezervat EXCLUSIV urgenței: ceasul și bara lipită. */

:root {
  --ink-0: #0e0809;
  --ink-1: #150d10;
  --ink-2: #1e1216;
  --ink-3: #2a1a1f;

  --wine: #4d1526;
  --wine-lo: #3a0f1d;

  --metal: #8c5f33;
  --metal-soft: #c79357;
  --metal-hi: #e9bd80;

  --bone: #f7ece0;
  --bone-2: #ddccbe;
  --bone-3: #a8938c;

  --hot: #d94a5c;
  --hot-lo: #8e2532;

  --col: 620px;
  --pad: 20px;
  --r: 4px;

  --e-out: cubic-bezier(.2, .7, .2, 1);
  --e-pop: cubic-bezier(.3, 1.4, .4, 1);

  interpolate-size: allow-keywords;

  --display: Fraunces, Georgia, serif;
  --prose: Newsreader, Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--bone);
  font-family: var(--prose);
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lumina din spate — aceeași în toate paginile, ca să se lege între ele. */
body::before {
  content: "";
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 70vh;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(233, 189, 128, .13), transparent 70%),
    radial-gradient(45% 40% at 78% 12%, rgba(122, 37, 64, .16), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--metal-hi);
  outline-offset: 2px;
}

h1, h2, h3, .pret__now {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ─────────────────────────── dezvăluire la scroll ─────────────────────────── */
/* Fără gardă de prefers-reduced-motion: Windows raportează fals „reduce" și
   pagina rămâne moartă. Mișcarea e ținută mică în loc. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: opacity .7s var(--e-out) var(--d, 0s),
              transform .7s var(--e-out) var(--d, 0s),
              filter .7s var(--e-out) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ═══════════════════════════ ACASĂ ═══════════════════════════ */

.bio {
  padding: 46px 0 8px;
  text-align: center;
}

.bio__face {
  width: 108px;
  height: 108px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid rgba(233, 189, 128, .3);
  box-shadow: 0 0 0 6px rgba(14, 8, 9, .9), 0 18px 44px rgba(0, 0, 0, .6);
}

.bio__name {
  font-size: clamp(28px, 7.6vw, 36px);
  margin-bottom: 8px;
}

.bio__line {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--bone-2);
  max-width: 30ch;
  margin: 0 auto;
}

/* ─────────────────────────── dipticul ───────────────────────────
   Cele două coperți, două jumătăți ale aceluiași obiect.
   O linie de alamă între ele; una în lumină, cealaltă în umbră.
   Fiecare jumătate e o zonă de atingere întreagă. */

.diptic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  background: linear-gradient(170deg, var(--ink-2), var(--ink-1));
  border: 1px solid rgba(233, 189, 128, .2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .55);
}

.diptic__half {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 14px 24px;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s;
}

/* linia de alamă dintre jumătăți */
.diptic__half + .diptic__half { border-left: 1px solid var(--metal); }

.diptic__half img {
  width: min(118px, 34vw);
  aspect-ratio: 5 / 8;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .6);
  margin-bottom: 8px;
  transition: filter .3s;
}

/* lumina și umbra — discret, nu efect */
.diptic__half--lumina {
  background: radial-gradient(80% 60% at 50% 0%, rgba(233, 189, 128, .09), transparent 75%);
}
.diptic__half--umbra {
  background: linear-gradient(190deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .12));
}
.diptic__half--umbra img { filter: brightness(.78) saturate(.9); }

.diptic__half:active { background-color: rgba(233, 189, 128, .08); }
.diptic__half:active img { filter: none; }

.diptic__for {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--metal-soft);
}

.diptic__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--bone);
  text-wrap: balance;
}

.diptic__go {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--metal-hi);
}

.diptic__motto {
  font-size: 17.5px;
  font-style: italic;
  color: var(--bone-2);
  text-align: center;
  margin: 22px 0 0;
}

.gratis-link {
  display: block;
  width: fit-content;
  margin: 26px auto 0;
  padding: 12px 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--bone-3);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gratis-link:hover { color: var(--metal-hi); }

/* ═══════════════════════════ PAGINĂ DE PRODUS ═══════════════════════════ */

.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 4px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--bone-3);
  text-decoration: none;
}
.top:hover { color: var(--metal-hi); }

.hero { padding: 6px 0 30px; text-align: center; }

.hero__for {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--metal-soft);
  margin-bottom: 12px;
}

.hero h1 {
  font-size: clamp(29px, 8.4vw, 44px);
  margin-bottom: 14px;
}

.hero__sub {
  font-size: 17.5px;
  color: var(--bone-2);
  max-width: 34ch;
  margin: 0 auto 24px;
}

/* Prețul, ca într-o carte: numărul mare în Fraunces, cel tăiat mic lângă el. */
.pret {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pret__now {
  font-size: 54px;
  color: var(--metal-hi);
  text-shadow: 0 0 30px rgba(233, 189, 128, .38);
}
.pret__now small { font-size: .38em; letter-spacing: .02em; margin-left: 3px; }
.pret__old {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--bone-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Butonul principal — cel mai important element după titlu. */
.cta {
  display: block;
  width: 100%;
  padding: 20px 22px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  color: var(--ink-0);
  background: linear-gradient(180deg, var(--metal-hi), var(--metal-soft));
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(200, 145, 80, .26);
  transition: transform .15s var(--e-out), filter .15s;
}
.cta:active { transform: translateY(1px); filter: brightness(1.08); }

.micro {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-3);
  text-align: center;
  margin-top: 12px;
}

/* Ceasul de urgență */
.ceas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--bone-2);
  margin-top: 16px;
}
.ceas b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--bone);
  background: rgba(217, 74, 92, .14);
  border: 1px solid rgba(217, 74, 92, .42);
  border-radius: 5px;
  padding: 3px 8px;
}

/* ─────────────────────────── secțiuni ─────────────────────────── */

.sec { padding: 52px 0; }
.sec--line { border-top: 1px solid rgba(233, 189, 128, .12); }

/* Numeralul de capitol — un semn mic de alamă și o linie de păr,
   ca într-o carte tipărită. */
.num {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--metal-soft);
}
.num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(233, 189, 128, .22);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--metal-soft);
  margin-bottom: 10px;
}

.sec h2 {
  font-size: clamp(25px, 6.8vw, 33px);
  margin-bottom: 18px;
}

.checks { list-style: none; padding: 0; margin: 0 0 4px; }
.checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font-size: 17px;
  color: var(--bone-2);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .58em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--metal-soft);
  box-shadow: 0 0 12px rgba(233, 189, 128, .5);
}

.stack { list-style: none; padding: 0; margin: 0; }
.stack li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(233, 189, 128, .1);
  font-family: var(--sans);
  font-size: 15.5px;
}
.stack li:last-child { border-bottom: 0; }
.stack i { font-style: normal; color: var(--metal-hi); }
.stack b { font-weight: 600; color: var(--bone); }
.stack span { color: var(--bone-3); font-size: 14px; white-space: nowrap; }

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(233, 189, 128, .26);
  font-family: var(--sans);
}
.total__l { font-size: 15px; color: var(--bone-2); }
.total__r { font-size: 15px; color: var(--bone-3); text-decoration: line-through; }
.total--now .total__l { font-size: 17px; font-weight: 600; color: var(--bone); }
.total--now .total__r {
  font-family: var(--display);
  font-size: 28px;
  color: var(--metal-hi);
  text-decoration: none;
  text-shadow: 0 0 22px rgba(233, 189, 128, .32);
}

/* ─────────────────────────── recenzii ─────────────────────────── */

.rev { padding: 20px 0; border-bottom: 1px solid rgba(233, 189, 128, .1); }
.rev:last-of-type { border-bottom: 0; }
.rev__head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.rev__av {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink-3);
  border: 1px solid rgba(233, 189, 128, .2);
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--metal-soft);
}
.rev__who { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--bone); }
.rev__meta { font-family: var(--sans); font-size: 12px; color: var(--bone-3); }
.rev__stars { color: var(--metal-hi); font-size: 13px; letter-spacing: 1px; margin-left: auto; flex: none; }
.rev__q { font-size: 16.5px; color: var(--bone-2); margin: 0; }

/* ─────────────────────────── bump ─────────────────────────── */

.bump {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: linear-gradient(150deg, rgba(122, 37, 64, .3), rgba(30, 18, 22, .8));
  border: 1px dashed rgba(233, 189, 128, .36);
  border-radius: 10px;
  text-decoration: none;
  transition: filter .15s;
}
.bump:active { filter: brightness(1.12); }
.bump img { width: 64px; aspect-ratio: 5/8; object-fit: cover; border-radius: 3px; }
.bump__t { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--metal-hi); margin-bottom: 5px; }
.bump__n { font-family: var(--display); font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.bump__p { font-family: var(--sans); font-size: 13.5px; color: var(--bone-3); }
.bump__p b { color: var(--metal-hi); font-size: 15px; }
.bump__p s { margin-left: 5px; }

/* ─────────────────────────── bară lipită ─────────────────────────── */

.sticky {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px var(--pad) max(11px, env(safe-area-inset-bottom));
  background: rgba(14, 8, 9, .93);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(233, 189, 128, .2);
  transform: translateY(110%);
  transition: transform .45s var(--e-pop);
}
.sticky.on { transform: none; }
.sticky__l { min-width: 0; font-family: var(--sans); }
.sticky__p { font-size: 19px; font-weight: 700; color: var(--metal-hi); }
.sticky__p s { font-size: 13px; font-weight: 400; color: var(--bone-3); margin-left: 6px; }
.sticky__c { font-size: 11.5px; color: var(--bone-3); font-variant-numeric: tabular-nums; }
.sticky__b {
  margin-left: auto;
  flex: none;
  padding: 15px 20px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-0);
  background: linear-gradient(180deg, var(--metal-hi), var(--metal-soft));
  border-radius: 7px;
  text-decoration: none;
}
.sticky__b:active { filter: brightness(1.08); }

/* ─────────────────────────── toast de activitate ─────────────────────────── */

.toast {
  position: fixed;
  left: 14px;
  bottom: 90px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(310px, calc(100vw - 28px));
  padding: 10px 12px;
  background: rgba(21, 13, 16, .96);
  border: 1px solid rgba(233, 189, 128, .2);
  border-radius: 9px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--e-out), transform .4s var(--e-out);
  pointer-events: none;
}
.toast.on { opacity: 1; transform: none; pointer-events: auto; }
.toast__av {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--ink-3);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--metal-soft);
}
.toast__t { font-family: var(--sans); font-size: 13px; line-height: 1.35; color: var(--bone-2); }
.toast__t b { color: var(--bone); font-weight: 600; }
.toast__t i { display: block; font-style: normal; font-size: 11px; color: var(--bone-3); margin-top: 2px; }
.toast__x {
  margin-left: auto;
  flex: none;
  width: 24px; height: 24px;
  background: none;
  border: 0;
  color: var(--bone-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ─────────────────────────── subsol ─────────────────────────── */

.foot {
  padding: 40px 0 120px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--bone-3);
  text-align: center;
  border-top: 1px solid rgba(233, 189, 128, .1);
  margin-top: 30px;
}
.foot a { color: var(--bone-2); display: inline-block; padding: 4px 2px; }
.foot nav { margin-bottom: 10px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─────────────────────────── erou compact pe pagina de produs ─────────────────────────── */

.hero--prod { padding: 2px 0 26px; }
.hero--prod h1 { font-size: clamp(26px, 7.2vw, 39px); margin-bottom: 10px; }
.hero--prod .hero__sub { margin-bottom: 0; }

.hero__face {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid rgba(233, 189, 128, .3);
  box-shadow: 0 0 0 5px rgba(14, 8, 9, .9), 0 14px 34px rgba(0, 0, 0, .55);
}

.herobuy {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 18px 0 16px;
}
.herobuy__cover {
  width: 104px;
  aspect-ratio: 5 / 8;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(233, 189, 128, .16);
}
.herobuy__price {
  display: grid;
  gap: 7px;
  justify-items: start;
  text-align: left;
}
.herobuy__price .pret__now { font-size: 46px; line-height: 1; }

/* ─────────────────────────── formular de lead ─────────────────────────── */

.lead {
  padding: 24px 22px;
  background: var(--ink-1);
  border: 1px solid rgba(233, 189, 128, .14);
  border-radius: 10px;
  text-align: center;
}
.lead h3 { font-size: 21px; margin-bottom: 8px; }
.lead p { font-family: var(--sans); font-size: 14.5px; color: var(--bone-3); margin-bottom: 16px; }

.lead-form { display: grid; gap: 10px; margin: 0; }

.lead-carte { display: flex; gap: 10px; }
.lead-carte label {
  flex: 1;
  padding: 13px 10px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--bone-2);
  background: var(--ink-0);
  border: 1px solid rgba(233, 189, 128, .22);
  border-radius: 7px;
  cursor: pointer;
}
.lead-carte input { accent-color: var(--metal-hi); margin-right: 6px; }
.lead-carte label:has(input:checked) {
  border-color: var(--metal-hi);
  color: var(--bone);
  background: rgba(233, 189, 128, .07);
}

.lead-email {
  width: 100%;
  padding: 16px 15px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--bone);
  background: var(--ink-0);
  border: 1px solid rgba(233, 189, 128, .22);
  border-radius: 7px;
}
.lead-email:focus { outline: 2px solid var(--metal-soft); outline-offset: 1px; }

.lead-submit {
  padding: 16px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-0);
  background: var(--bone-2);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.lead-msg {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--metal-hi);
  margin: 0;
  min-height: 1.2em;
}
.lead-msg:empty { display: none; }

/* ─────────────────────────── desktop ─────────────────────────── */

@media (min-width: 760px) {
  :root { --col: 660px; }
  .bio { padding-top: 64px; }
  .bio__face { width: 124px; height: 124px; }
  .diptic__half { padding: 28px 18px 30px; }
  .diptic__half img { width: 138px; }
  .diptic__t { font-size: 18px; }
  .hero__face { width: 92px; height: 92px; }
  .herobuy__cover { width: 128px; }
  .sticky { justify-content: center; }
  .sticky__b { margin-left: 24px; }
  .toast { left: 20px; bottom: 96px; }
}