/* Sassy Salon – Bridal Guide 2027
   Brand: prună (principal) + auriu ca accent, Playfair Display + Alex Brush. */

@font-face { font-family: "Playfair"; src: url("/fonts/playfair.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair"; src: url("/fonts/playfair-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Alex Brush"; src: url("/fonts/alexbrush.woff2") format("woff2"); font-display: swap; }

:root {
  --plum-950: #1c0d0f;
  --plum-900: #2b1518;
  --plum-800: #4e2022;
  --plum-700: #593134;
  --plum-600: #6e3e44;
  --rose: #85575b; /* puțin mai închis decât #926468, pentru text mic (AA) */
  --rose-300: #d4979a;
  --blush: #ebe2e3;
  --blush-50: #f3e9e9;
  --ivory: #f8f0ef; /* roz-pal din brand (site: #EBE2E3), nu crem */
  --gold: #c99a6a;
  --gold-hi: #ecc9a0;
  --gold-ink: #8a5d33; /* auriu închis pentru text pe fundal deschis (contrast AA) */
  --gold-grad: linear-gradient(100deg, #a87149 0%, #d39a6d 28%, #f1d2a8 50%, #c68d61 72%, #a87149 100%);
  --ink: var(--plum-800);
  --ink-soft: #7a5458;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 22px;
  --serif: "Playfair", "Playfair Display", Georgia, serif;
  /* text mic și mediu: Jost, drept și ușor de citit (cerut de Brian) */
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Alex Brush", "Snell Roundhand", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 400 clamp(16.5px, 1.05vw + 12px, 19px)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-intro { overflow: hidden; }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--rose-300); color: var(--plum-950); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ivory); padding: 8px 14px; border-radius: 99px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
.muted { color: var(--ink-soft); }
.small { font-size: .88em; }

/* ---------- logo (SVG as mask → recolorable, gold gradient) ---------- */
.logo {
  display: block; aspect-ratio: 166 / 37.39; width: 100%;
  -webkit-mask: url("/images/logo.svg") center / contain no-repeat;
          mask: url("/images/logo.svg") center / contain no-repeat;
  background: currentColor;
}
.logo--mark { aspect-ratio: 166 / 22.4; -webkit-mask-image: url("/images/logo-mark.svg"); mask-image: url("/images/logo-mark.svg"); }

/* ---------- type ---------- */
.kicker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--rose);
}
.kicker::after { content: ""; flex: 0 0 56px; height: 1px; background: var(--gold-grad); }
.kicker .num { font-family: var(--serif); font-style: italic; letter-spacing: .05em; font-size: 1.3em; color: var(--gold-ink); font-weight: 500; }
.kicker--light .num { color: var(--gold-hi); }
.kicker--light { color: var(--rose-300); }
.kicker--center { justify-content: center; }
/* deasupra titlurilor mari: doar numărul capitolului, mare și italic (fără etichetă mică) */
.kicker:has(+ .display) { margin-bottom: 6px; }
.kicker:has(+ .display) > span:not(.num) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker:has(+ .display) .num { font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: 0; line-height: 1; font-weight: 400; text-transform: none; }
.kicker:has(+ .display)::after { flex-basis: 72px; align-self: center; }
.kicker--center::before { content: ""; flex: 0 0 56px; height: 1px; background: var(--gold-grad); }

.display {
  font-family: var(--serif); margin: 0; font-weight: 500; line-height: .98; letter-spacing: -.02em; color: var(--plum-800);
  font-size: clamp(2.6rem, 7.4vw, 7rem); text-wrap: balance;
}
.display em { font-style: italic; color: var(--rose); }
.display--light { color: var(--blush-50); }
.h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; margin: 0 0 22px; color: var(--plum-800); }
.lead { max-width: 34ch; margin: 22px 0 0; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); }
.lead--light { color: #e7d4d2; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; will-change: transform; }

/* ---------- buttons ---------- */
.btn {
  --h: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px; border-radius: 99px; border: 0; cursor: pointer;
  font-weight: 600; font-size: .95rem; letter-spacing: .04em; text-decoration: none;
  background: var(--plum-800); color: var(--blush-50);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .3s;
}
.btn:active { transform: scale(.97); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(43, 21, 24, .55); } }
.btn--gold { background: var(--gold-grad); background-size: 200% 100%; color: var(--plum-950); }
@media (hover: hover) { .btn--gold:hover { background-position: 100% 0; } }
.btn--small { --h: 40px; padding: 0 18px; font-size: .8rem; }
.btn--line { background: transparent; color: var(--plum-800); box-shadow: inset 0 0 0 1px var(--plum-800); }
.btn--wa { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }

/* =================================================================
   HERO + INTRO
   ================================================================= */
.hero {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  background: radial-gradient(120% 80% at 70% 20%, var(--plum-700) 0%, var(--plum-900) 55%, var(--plum-950) 100%);
  color: var(--blush-50); isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--plum-900); }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 1s var(--ease-out); }
.hero__video.is-on { opacity: 1; }
.intro-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28, 13, 15, .45) 0%, rgba(28, 13, 15, 0) 26%),
    linear-gradient(0deg, rgba(28, 13, 15, .96) 0%, rgba(28, 13, 15, .82) 34%, rgba(28, 13, 15, .35) 50%, rgba(28, 13, 15, 0) 64%);
  opacity: 0;
}
.hero__content {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 92px);
  display: grid; justify-items: center; text-align: center; padding-inline: var(--gutter);
}
.hero__greeting { margin: 0 0 6px; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1; color: var(--gold-hi); text-shadow: 0 2px 22px rgba(28, 13, 15, .9), 0 0 3px rgba(28, 13, 15, .7); }
.hero__logo { margin: 0; width: min(88vw, 620px); }
.hero__logo .logo { background: var(--gold-grad); background-size: 220% 100%; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .35)); }
.hero__title { margin: 18px 0 0; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--blush); }
.hero__by { margin: 2px 0 0; font-size: clamp(1.7rem, 4.6vw, 2.4rem); color: var(--rose-300); line-height: 1.1; }
.hero__scroll {
  position: absolute; z-index: 4; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; text-decoration: none;
  font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: var(--blush); opacity: 0;
}
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(var(--gold-hi), transparent); transform-origin: top; animation: drip 2.2s var(--ease-in-out) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.intro-skip {
  position: absolute; z-index: 6; right: 16px; top: calc(env(safe-area-inset-top) + 14px);
  padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(28, 13, 15, .25);
  color: var(--blush-50); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}
body:not(.is-intro) .intro-skip { display: none; }
/* before intro runs: hide the hero text so the intro can reveal it */
.hero__greeting, .hero__logo, .hero__title, .hero__by { opacity: 0; }
.no-intro .hero__greeting, .no-intro .hero__logo, .no-intro .hero__title, .no-intro .hero__by,
.no-intro .hero__shade, .no-intro .hero__scroll { opacity: 1; }

@media (min-width: 900px) {
  /* desktop: the bride lives in a tall arch, type around her */
  .hero__media {
    inset: auto; left: 0; right: 0; margin-inline: auto; top: 9vh; width: min(calc(82vh * 2 / 3), 46vw); height: 82vh;
    border-radius: 999px 999px 18px 18px; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .7);
  }
  .hero__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(236, 201, 160, .35); pointer-events: none; }
  body.is-intro:not(.no-intro) .hero__media { background: transparent; box-shadow: none; }
  body.is-intro:not(.no-intro) .hero__media::after { opacity: 0; }
  .hero__media::after { transition: opacity 1s; }
  .hero__shade { background: linear-gradient(0deg, rgba(28, 13, 15, .94) 0%, rgba(28, 13, 15, .72) 24%, rgba(28, 13, 15, .2) 44%, rgba(28, 13, 15, 0) 56%); }
  .hero__title, .hero__by { text-shadow: 0 2px 18px rgba(20, 8, 9, .8); }
  .hero__content { bottom: 9vh; }
  .hero__logo { width: min(82vw, 1100px); }
}

/* =================================================================
   TOP BAR
   ================================================================= */
.bar {
  position: fixed; z-index: 50; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  transform: translateY(-110%); transition: transform .6s var(--ease-out);
  pointer-events: none;
}
.bar.is-on { transform: none; }
.bar > * { pointer-events: auto; }
.bar__mark {
  width: 132px; padding: 12px 16px; border-radius: 99px; color: var(--plum-800);
  background: rgba(251, 247, 245, .86); box-shadow: 0 6px 24px -12px rgba(43, 21, 24, .4);
}
.bar__right { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(251, 247, 245, .86); box-shadow: 0 6px 24px -12px rgba(43, 21, 24, .4); }
.lang button { min-width: 40px; height: 34px; border: 0; border-radius: 99px; background: none; font-size: .72rem; letter-spacing: .14em; font-weight: 600; cursor: pointer; color: var(--plum-700); }
.lang button[aria-pressed="true"] { background: var(--plum-800); color: var(--blush-50); }
@media (min-width: 900px) { .bar { padding: 18px 28px; } .bar__mark { width: 160px; } }

/* =================================================================
   I. MEET
   ================================================================= */
.meet { padding: clamp(96px, 14vw, 180px) 0 clamp(80px, 10vw, 140px); background: var(--ivory); }
.meet__wide { margin: clamp(48px, 7vw, 96px) 0; height: clamp(320px, 62vw, 82vh); overflow: hidden; }
.meet__wide img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; }
.meet__duo { display: grid; gap: 48px; align-items: center; }
.artist p { margin: 0 0 14px; max-width: 42ch; }
.artist__role { font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--rose) !important; }
.artist__quote { margin: 18px 0 6px; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; color: var(--plum-700); }
.ig { display: inline-block; margin-top: 6px; color: var(--rose); text-decoration: none; border-bottom: 1px solid var(--rose-300); }
.arch { border-radius: 999px 999px 16px 16px; overflow: hidden; }
.meet__portrait { margin: 0 auto; width: min(78vw, 380px); aspect-ratio: 2 / 3; }
.meet__portrait img { width: 100%; height: 100%; object-fit: cover; }
.care {
  font-family: var(--serif);
  margin-top: clamp(64px, 9vw, 120px) !important; text-align: center; font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1.35; color: var(--plum-700); max-width: 30ch;
}
@media (min-width: 900px) {
  .meet__duo { grid-template-columns: 1fr minmax(260px, 380px) 1fr; gap: 56px; }
  .meet__duo .artist:last-child { padding-top: 160px; }
}

/* =================================================================
   II. WHY (pinned)
   ================================================================= */
.why { position: relative; min-height: 100svh; background: var(--plum-950); color: var(--blush-50); overflow: hidden; display: grid; align-items: center; }
.why__bg { position: absolute; inset: 0; }
.why__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .32; filter: saturate(.8); transform: scale(1.12); }
.why__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(28, 13, 15, .2), rgba(28, 13, 15, .92)); }
.why__inner { position: relative; padding-block: 110px; }
.why__lines p { font-family: var(--serif); margin: 0 0 .5em; max-width: 24ch; font-size: clamp(1.5rem, 3.8vw, 3.2rem); line-height: 1.18; font-weight: 400; color: rgba(246, 240, 239, .34); transition: color .6s; }
.why__lines p.is-lit { color: var(--blush-50); }
.why__words { font-family: var(--serif); margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: .1em .4em; font-size: clamp(3rem, 11vw, 9.5rem); line-height: .95; font-style: italic; font-weight: 500; }
.why__words span { display: inline-block; background: var(--gold-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }

/* =================================================================
   III. BRIDES (horizontal)
   ================================================================= */
.brides { background: var(--blush-50); padding-top: clamp(96px, 12vw, 160px); overflow: hidden; }
.brides__track { display: flex; gap: clamp(18px, 2.6vw, 40px); padding: clamp(48px, 7vw, 90px) var(--gutter) clamp(90px, 10vw, 140px); width: max-content; align-items: flex-end; }
/* fără animații (reduce motion / fără JS): galeria se derulează cu degetul */
.brides.is-static { overflow: visible; height: auto; }
.brides.is-static .brides__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.brides.is-static .bride, .brides.is-static .brides__end { scroll-snap-align: center; }
.bride { margin: 0; flex: 0 0 auto; width: clamp(240px, 64vw, 420px); }
.bride:nth-child(3n+2) { width: clamp(220px, 56vw, 360px); margin-bottom: 70px; }
.bride:nth-child(3n) { width: clamp(250px, 70vw, 470px); }
.bride__frame { aspect-ratio: 2 / 3; overflow: hidden; background: var(--blush); }
.bride:nth-child(odd) .bride__frame { border-radius: 999px 999px 14px 14px; }
.bride:nth-child(even) .bride__frame { border-radius: 14px; }
.bride__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.bride figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: .78rem; letter-spacing: .08em; color: var(--ink-soft); }
.bride figcaption a { text-decoration: none; font-style: italic; }
.brides__end { flex: 0 0 auto; width: clamp(240px, 60vw, 380px); align-self: center; text-align: center; }
.brides__next { font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1.05; color: var(--plum-700); margin: 0 0 16px; }
.brides__credit { margin: 18px 0 0; font-size: .85rem; color: var(--ink-soft); }
@media (min-width: 900px) {
  /* desktop: titlul stă în rând cu pozele, ca totul să încapă pe un ecran */
  .brides { padding-top: 0; height: 100svh; display: flex; align-items: center; }
  .brides__track { padding: 0 var(--gutter); align-items: center; gap: 36px; }
  .brides__track .brides__head { flex: 0 0 auto; width: min(34vw, 460px); padding: 0; margin-right: 40px; }
  .bride, .bride:nth-child(3n), .bride:nth-child(3n+2) { width: auto; margin-bottom: 0; }
  .bride__frame { height: 64svh; }
  .bride:nth-child(3n+2) .bride__frame { height: 52svh; margin-top: 12svh; }
  .bride:nth-child(3n) .bride__frame { height: 70svh; }
}

/* =================================================================
   VOICES (marquee)
   ================================================================= */
.voices { background: var(--plum-900); color: var(--blush-50); padding: clamp(80px, 10vw, 130px) 0; overflow: hidden; }
.voices .kicker { color: var(--rose-300); margin-bottom: 40px; }
.marquee { display: flex; gap: 22px; width: max-content; animation: marq 70s linear infinite; padding-block: 10px; }
.marquee--rev { animation-direction: reverse; animation-duration: 82s; }
@keyframes marq { to { transform: translateX(-50%); } }
.quote-card { flex: 0 0 auto; width: min(78vw, 440px); padding: 28px 30px; border-radius: var(--radius); background: rgba(246, 240, 239, .05); box-shadow: inset 0 0 0 1px rgba(236, 201, 160, .18); }
.quote-card p { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.55; font-weight: 300; }
.quote-card footer { display: flex; justify-content: space-between; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-300); }
.stars { color: var(--gold-hi); letter-spacing: .2em; }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--gutter); } }

/* =================================================================
   IV. PRICES + TRAVEL
   ================================================================= */
.prices { background: var(--blush-50); padding: clamp(96px, 12vw, 170px) 0; }
.pricelist { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid rgba(78, 32, 34, .18); }
.pl-row { display: grid; grid-template-columns: 1fr 88px 88px; align-items: baseline; gap: 10px; padding: 20px 0; border-bottom: 1px solid rgba(78, 32, 34, .12); }
.pl-row--head { padding: 14px 0; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--rose); }
.pl-row--head span:not(:first-child), .pl-row .p { text-align: right; }
.pl-row .n { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 2rem); font-weight: 500; }
.pl-row .p { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 2rem); font-variant-numeric: lining-nums; color: var(--plum-700); }
.pl-row .p.dash { color: rgba(78, 32, 34, .25); }
@media (min-width: 700px) { .pl-row { grid-template-columns: 1fr 160px 160px; } }
.notes { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-soft); font-size: .95rem; }
.notes li::before { content: "✦"; color: var(--gold-ink); margin-right: 10px; font-size: .8em; }

.travel { margin-top: clamp(80px, 10vw, 130px); }
.travel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(78, 32, 34, .18); }
.travel__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(78, 32, 34, .12); }
.travel__list .pl { max-width: 60ch; }
.travel__list .fee { font-family: var(--serif); flex: 0 0 auto; font-size: 1.35rem; color: var(--plum-700); }
.travel__list .fee.free { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--rose); }
.north { margin-top: 40px; padding: clamp(26px, 4vw, 48px); border-radius: var(--radius); background: var(--blush-50); box-shadow: inset 0 0 0 1px rgba(201, 154, 106, .45); position: relative; }
.north::before { content: ""; position: absolute; left: clamp(26px, 4vw, 48px); right: clamp(26px, 4vw, 48px); top: 0; height: 2px; background: var(--gold-grad); }
.north__title { margin: 0 0 12px; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; color: var(--plum-700); }
.north p { margin: 0 0 12px; max-width: 62ch; }
.north ul { margin: 6px 0 14px; padding-left: 1.1em; }
.north li { margin-bottom: 6px; }
.north b { color: var(--plum-700); }

/* =================================================================
   V. PLAN (estimator) – deschis la culoare, butoane mari și clare
   ================================================================= */
.plan { background: var(--ivory); color: var(--plum-800); padding: clamp(96px, 12vw, 170px) 0 clamp(110px, 12vw, 170px); }
.plan__grid { display: grid; gap: 36px; margin-top: clamp(36px, 5vw, 60px); }
@media (min-width: 980px) { .plan__grid { grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); align-items: start; gap: 56px; } }
.est__left { display: grid; gap: 34px; }
.est__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.est__group legend { padding: 0; margin-bottom: 14px; font-size: 1.15rem; font-weight: 600; color: var(--plum-800); }
.est__sub { margin: 18px 0 10px; font-weight: 600; color: var(--plum-700); }

.zones { display: grid; gap: 10px; }
.zone {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; width: 100%; min-height: 64px;
  padding: 12px 18px; border-radius: 18px; border: 1.5px solid rgba(78, 32, 34, .2); background: #fff; color: var(--plum-800);
  text-align: left; cursor: pointer; font-size: 1rem; line-height: 1.35; transition: border-color .2s, background .2s, box-shadow .2s;
}
.zone__dot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(78, 32, 34, .35); display: grid; place-items: center; color: transparent; }
.zone__dot svg { width: 16px; height: 16px; }
.zone__fee { font-weight: 600; white-space: nowrap; color: var(--plum-700); }
.zone[aria-checked="true"] { border-color: var(--plum-800); box-shadow: 0 0 0 1.5px var(--plum-800) inset; background: #fff; }
.zone[aria-checked="true"] .zone__dot { background: var(--plum-800); border-color: var(--plum-800); color: #fff; }
.zone__note { margin: 12px 0 0; font-size: .95rem; color: var(--ink-soft); }
.zone__note:empty { display: none; }

.est__rows { display: grid; gap: 10px; }
.est__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px;
  padding: 10px 10px 10px 18px; border-radius: 18px; background: #fff; border: 1.5px solid rgba(78, 32, 34, .14);
}
.est__row .lbl { font-size: 1rem; font-weight: 500; }
.est__row .price { display: block; color: var(--ink-soft); font-size: .88rem; font-weight: 400; }

.addbtn {
  flex: 0 0 auto; min-width: 112px; min-height: 44px; padding: 0 16px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--plum-800); background: #fff; color: var(--plum-800); font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s;
}
.addbtn svg { width: 16px; height: 16px; }
.addbtn__on { display: none; align-items: center; gap: 6px; }
.addbtn[aria-pressed="true"] { background: var(--plum-800); color: #fff; }
.addbtn[aria-pressed="true"] .addbtn__on { display: inline-flex; }
.addbtn[aria-pressed="true"] .addbtn__off { display: none; }

.stepper { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.stepper button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1.5px solid var(--plum-800);
  background: #fff; color: var(--plum-800); font-size: 1.35rem; line-height: 1; font-weight: 500;
}
.stepper button[data-d="1"] { background: var(--plum-800); color: #fff; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper output { min-width: 32px; text-align: center; font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.est__date { width: 100%; min-height: 60px; padding: 0 18px; border-radius: 18px; border: 1.5px solid rgba(78, 32, 34, .2); background: #fff; color: var(--plum-800); font-size: 17px; }
.est__seg { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.est__seg button {
  min-width: 46px; min-height: 44px; padding: 0 12px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid rgba(78, 32, 34, .3); background: #fff; color: var(--plum-800); font-weight: 600; font-size: .92rem;
}
.est__seg button[aria-pressed="true"] { background: var(--plum-800); border-color: var(--plum-800); color: #fff; }

.est__total {
  position: sticky; top: 84px; padding: clamp(26px, 3vw, 36px); border-radius: 28px;
  background: var(--plum-900); color: var(--blush-50); box-shadow: 0 40px 80px -40px rgba(43, 21, 24, .6);
}
.est__total::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; background: var(--gold-grad); }
.est__total h3 { margin: 0; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-300); font-weight: 600; }
.est__sum { font-family: var(--serif); margin: 6px 0 4px; font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.est__sum small { font-size: .45em; vertical-align: .7em; margin-left: 4px; color: var(--gold-hi); }
.est__people { margin: 0 0 18px; color: #e3cfcf; font-size: .95rem; }
.est__lines { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid rgba(246, 240, 239, .16); }
.est__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(246, 240, 239, .1); font-size: .98rem; }
.est__lines li.is-zero { color: #b9a2a3; }
.est__note { margin: 0 0 10px; font-size: .9rem; line-height: 1.45; color: #e3cfcf; }
.est__note:empty { display: none; }
.est__note.is-good { color: #b7dcb0; }
.est__total .btn { width: 100%; margin-top: 8px; }
.est__dep { display: flex; justify-content: space-between; font-size: .95rem; margin: 6px 0 14px; }

/* mobil: totalul plutește jos cât timp completezi */
.est__float {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 22px; border-radius: 99px;
  background: var(--plum-900); color: var(--blush-50); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .7);
  transform: translateY(140%); transition: transform .5s var(--ease-out);
}
.est__float.is-on { transform: none; }
.est__float strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.est__float span { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-300); }
@media (min-width: 980px) { .est__float { display: none; } }
@media (max-width: 979px) { .plan { padding-bottom: 120px; } }

/* =================================================================
   VI. ADD-ONS (stacking cards)
   ================================================================= */
.addons { background: var(--blush-50); padding: clamp(96px, 12vw, 170px) 0; }
.addons__stack { display: grid; gap: 24px; margin-top: clamp(40px, 6vw, 70px); }
.addon {
  position: sticky; top: 90px; display: grid; gap: 0; overflow: hidden; border-radius: 28px; background: var(--ivory);
  box-shadow: 0 30px 70px -40px rgba(43, 21, 24, .45), inset 0 0 0 1px rgba(201, 154, 106, .3);
}
.addon__img { aspect-ratio: 4 / 3; overflow: hidden; }
.addon__img img { width: 100%; height: 100%; object-fit: cover; }
.addon__body { padding: clamp(26px, 4vw, 48px); }
.addon h3 { font-family: var(--serif); margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 500; line-height: 1.05; }
.addon .price { font-family: var(--serif); display: inline-block; margin: 12px 0 16px; font-size: clamp(1.6rem, 3vw, 2.2rem); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.addon p { margin: 0 0 12px; max-width: 52ch; }
.addon:nth-child(2) { background: var(--plum-800); color: var(--blush-50); }
.addon:nth-child(2) .muted { color: var(--rose-300); }
.addons__note { text-align: center; margin-top: 28px; color: var(--ink-soft); }
@media (min-width: 900px) { .addon { grid-template-columns: 1fr 1fr; } .addon__img { aspect-ratio: auto; min-height: 460px; } .addon:nth-child(2) .addon__img { order: 2; } }

/* =================================================================
   VII. BOOK
   ================================================================= */
.book { display: grid; background: var(--ivory); padding: clamp(96px, 12vw, 170px) var(--gutter); gap: 56px; max-width: 1300px; margin-inline: auto; }
.book__img { display: none; margin: 0; }
@media (min-width: 900px) {
  .book { grid-template-columns: minmax(280px, .8fr) 1.2fr; align-items: start; }
  .book__img { display: block; position: sticky; top: 100px; aspect-ratio: 2 / 3; }
  .book__img img { width: 100%; height: 100%; object-fit: cover; }
}
.form { display: grid; gap: 16px; margin: 36px 0 22px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 58px; padding: 22px 18px 8px; border-radius: 16px; border: 0; font-size: 16px;
  background: var(--blush-50); box-shadow: inset 0 0 0 1px rgba(78, 32, 34, .14); color: var(--plum-900);
  transition: box-shadow .25s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.field label { position: absolute; left: 18px; top: 7px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--rose); pointer-events: none; }
.field--check { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 6px; }
.field--check label { position: static; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--plum-800); }
.field--check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--plum-700); }
.form__err { color: #a23b3b; font-size: .9rem; margin: 0; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.form__actions .btn { flex: 1 1 220px; }
.form__est { margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--blush); font-size: .92rem; }

/* =================================================================
   FAQ + TERMS
   ================================================================= */
.faq { background: var(--blush-50); padding: clamp(90px, 11vw, 150px) 0; }
.faq__grid { display: grid; gap: 64px; }
@media (min-width: 980px) { .faq__grid { grid-template-columns: 1.1fr .9fr; gap: 80px; } }
.acc details { border-bottom: 1px solid rgba(78, 32, 34, .16); }
.acc summary { font-family: var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 22px 0; cursor: pointer; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 500; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rose-300); position: relative; transition: transform .5s var(--ease-out), background .3s; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--plum-700); transform: translate(-50%, -50%); }
.acc summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--ease-out); }
.acc details[open] summary i { background: var(--plum-800); }
.acc details[open] summary i::before, .acc details[open] summary i::after { background: var(--blush-50); }
.acc details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc .ans { padding: 0 0 22px; max-width: 58ch; color: var(--ink-soft); }
.terms { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.terms li { counter-increment: t; position: relative; padding: 0 0 18px 46px; margin-bottom: 18px; border-bottom: 1px solid rgba(78, 32, 34, .1); font-size: .96rem; color: var(--ink-soft); }
.terms li::before { font-family: var(--serif); content: counter(t, upper-roman); position: absolute; left: 0; top: 0; font-style: italic; color: var(--gold-ink); }

/* =================================================================
   OUTRO
   ================================================================= */
.outro { background: var(--plum-950); color: var(--blush); text-align: center; padding: clamp(100px, 12vw, 170px) var(--gutter) calc(env(safe-area-inset-bottom) + 60px); }
.outro__love { margin: 0; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1.05; color: var(--rose-300); }
.outro__place { margin: 10px 0 48px; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; }
.logo--outro { width: min(86vw, 760px); margin: 0 auto 48px; background: var(--gold-grad); }
.outro__pdf .btn { color: var(--blush-50); box-shadow: inset 0 0 0 1px rgba(236, 201, 160, .5); }
.outro__credit, .outro__contact { margin: 28px 0 0; font-size: .86rem; color: rgba(235, 226, 227, .7); line-height: 1.8; }
.outro a { text-decoration: none; border-bottom: 1px solid rgba(236, 201, 160, .35); }

/* reveal helper */
.reveal-clip { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =================================================================
   FRUNZELE DE PE CARTEA DE VIZITĂ (line-art roz-auriu)
   ================================================================= */
.has-leaves { position: relative; overflow-x: clip; isolation: isolate; }
/* frunzele stau sub conținut (z-index -1 într-un context izolat), fără să schimbe poziția altor elemente */
.leaf { position: absolute; z-index: -1; pointer-events: none; user-select: none; height: auto; will-change: transform; }
.hero .leaf { z-index: 3; mix-blend-mode: screen; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.hero.leaves-on .leaf { opacity: .5; }
.hero .leaf--a { width: min(62vw, 480px); left: -26%; top: -10%; }
.hero .leaf--c { width: min(34vw, 240px); right: -9%; top: 34%; }
.meet .leaf--b { width: min(92vw, 620px); right: -26%; bottom: -4%; opacity: .55; }
.prices .leaf--c { width: min(30vw, 210px); right: -8%; top: 12px; opacity: .45; }
.book .leaf--a { width: min(70vw, 480px); left: -20%; top: -4%; opacity: .45; }
.outro .leaf--b { width: min(90vw, 620px); left: -24%; bottom: -6%; opacity: .32; mix-blend-mode: screen; }
.outro .leaf--c { width: min(34vw, 260px); right: -8%; top: 10%; opacity: .32; mix-blend-mode: screen; }
@media (min-width: 900px) {
  .hero .leaf--a { left: -6%; top: -10%; }
  .hero .leaf--c { right: -2%; top: 26%; }
  .meet .leaf--b { right: -8%; }
}