/* ==================================================================
   DEARSTORY — DESIGN TOKENS
   Tot ce tine de culoare / tipografie / spatiere e definit aici, ca
   variabile CSS. Daca vrei sa schimbi look-ul brandului, aici e locul.
   ================================================================== */
:root{
  /* --- culori --- */
  --midnight:       #1E1A2E; /* fundalul principal — cerul de noapte al povestii */
  --midnight-deep:  #14111F; /* strat mai adanc, umbre, baza cartii */
  --midnight-soft:  #2A2540; /* panouri usor mai deschise pe fundal inchis */
  --cream:          #FBF1DF; /* "hartia" cartii — cald, ca o pagina reala */
  --cream-dim:      #F1E4CB; /* varianta putin mai inchisa a hartiei */
  --gold:           #E2A54B; /* accent principal — lumina de lumanare */
  --gold-soft:      #F0C77E; /* accent deschis — hover / glow */
  --gold-deep:      #B87D34; /* accent inchis — text pe fundal deschis */
  --rose:           #E2938D; /* accent secundar — inimioare, note calde */
  --sage:           #8FAE85; /* accent tertiar — folosit cu masura in ilustratii */
  --ink:            #2A2438; /* text inchis, folosit pe fundaluri deschise (pagini) */
  --cloud:          #F3EEE4; /* text deschis, folosit pe fundalul de noapte */
  --cloud-dim:      #C7C0D6; /* text secundar pe fundal inchis */

  /* --- tipografie --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;

  /* --- spatiere / forme --- */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --wrap: 1180px;

  /* --- miscare --- */
  --ease-flip: cubic-bezier(.21, .87, .32, 1.04); /* usoara "asezare" la final, ca hartia reala */
  --dur-flip: 0.9s;

  /* curbe de miscare pt. micro-interactiuni (hover, click) — nimic linear,
     nimic brusc. --ease-smooth e curba "premium" folosita aproape peste
     tot (decelerare lunga, catifelata); --ease-spring are un mic
     "overshoot" (trece usor peste tinta si revine), pt elemente tactile
     ca butonul principal; --ease-out e o decelerare clasica, mai neutra. */
  --ease-smooth: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --ease-breath: cubic-bezier(.45, .05, .55, .95); /* pt animatii ambientale, simetrice (pulsatii) */
  --dur-fast: .22s;
  --dur-base: .35s;

  /* --- umbre stratificate (layered shadows) ---
     In loc de o singura umbra grosolana, combinam mai multe straturi,
     fiecare cu opacitate mica: unul strans si intens (contactul cu
     "solul"), unul mediu, unul larg si foarte difuz (ambianta). Asa
     arata o umbra reala, nu una desenata cu o singura linie de cod. */
  --shadow-xs:
    0 1px 2px rgba(10,8,16,.16),
    0 2px 4px rgba(10,8,16,.10);
  --shadow-sm:
    0 2px 4px rgba(10,8,16,.18),
    0 6px 12px rgba(10,8,16,.14),
    0 12px 24px -8px rgba(10,8,16,.16);
  --shadow-md:
    0 3px 6px rgba(10,8,16,.20),
    0 10px 20px rgba(10,8,16,.16),
    0 24px 48px -12px rgba(10,8,16,.22);
  --shadow-lg:
    0 4px 10px rgba(10,8,16,.22),
    0 16px 32px rgba(10,8,16,.20),
    0 40px 80px -20px rgba(10,8,16,.35);
  /* stralucire calda, folosita la hover pe elemente aurii (butonul principal) */
  --glow-gold-sm: 0 4px 14px -2px rgba(226,165,75,.35), 0 2px 6px rgba(226,165,75,.25);
  --glow-gold-md: 0 8px 28px -4px rgba(226,165,75,.5), 0 3px 10px rgba(226,165,75,.3);
}

/* respecta preferinta de miscare redusa a utilizatorului */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-flip: 0.01s; --dur-fast: .01s; --dur-base: .01s; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ==================================================================
   RESET MINIMAL
   ================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--midnight);
  color: var(--cloud);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, p, ul{ margin: 0; }
ul{ padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img{ max-width: 100%; display: block; }
:focus-visible{ outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }

.wrap{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ==================================================================
   FUNDAL — cerul de noapte cu stelute
   Decor pur CSS, fara nicio imagine. Usor de dezactivat: sterge
   elementul .night-sky din HTML daca nu il vrei.
   ================================================================== */
.night-sky{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--midnight);
  transition: background 1.6s var(--ease-smooth);
}
/* modul ZI: cerul trece de la nocturn la un cer senin, cald - vezi
   comutatorul .daynight-toggle si DayNightToggle in script.js */
body.is-day .night-sky{
  /* gradient ceresc curat: albastru deschis, senin, sus - coboara intr-un
     crem cald, jos (spre zona cardurilor) - fara soare desenat, cerul
     insusi da senzatia de "zi luminoasa" */
  background: linear-gradient(180deg, #BEE0F2 0%, #DCEAE0 45%, #F7ECD6 80%, #FBF3E2 100%);
}
.star{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  /* gradient radial in loc de un punct plin - se stinge dulce spre
     margine, nu se termina brusc ca o forma geometrica decupata */
  background: radial-gradient(circle, #fff 0%, var(--gold-soft) 45%, transparent 78%);
  opacity: .55;
  animation: twinkle 4s var(--ease-breath) infinite;
}
/* halou apropiat, mai intens */
.star::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,199,126,.4), transparent 70%);
  filter: blur(.5px);
}
/* halou larg, foarte difuz - "atmosfera" din jurul stelei */
.star::before{
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,199,126,.14), transparent 75%);
}
.star--1{ top:24%; left:3%; animation-delay:0.3s; width:2px; height:2px; }
.star--2{ top:6%; left:76%; animation-delay:3.3s; width:2px; height:2px; }
.star--3{ top:89%; left:13%; animation-delay:1.5s; }
.star--4{ top:90%; left:72%; animation-delay:0.2s; }
.star--5{ top:4%; left:82%; animation-delay:3.4s; width:4px; height:4px; }
.star--6{ top:11%; left:95%; animation-delay:2.0s; width:2px; height:2px; }
.star--7{ top:93%; left:55%; animation-delay:1.9s; width:2px; height:2px; }
.star--8{ top:76%; left:1%; animation-delay:2.1s; width:2px; height:2px; }
.star--9{ top:94%; left:14%; animation-delay:2.6s; width:4px; height:4px; }
.star--10{ top:4%; left:65%; animation-delay:1.5s; width:4px; height:4px; }
.star--11{ top:64%; left:4%; animation-delay:1.3s; }
.star--12{ top:91%; left:91%; animation-delay:0.3s; width:2px; height:2px; }
.star--13{ top:72%; left:3%; animation-delay:2.6s; }
.star--14{ top:82%; left:0%; animation-delay:1.8s; width:2px; height:2px; }
.star--15{ top:94%; left:21%; animation-delay:1.5s; }
.star--16{ top:9%; left:75%; animation-delay:1.2s; }
.star--17{ top:81%; left:3%; animation-delay:2.9s; width:4px; height:4px; }
.star--18{ top:2%; left:36%; animation-delay:2.5s; }

/* toate stelele sunt prezente si vizibile din prima clipa (nu se mai
   "dezvaluie" treptat la scroll) - .night-sky ramane fix pe ecran, deci
   nu se misca niciodata cat derulezi pagina; asta, singur, da senzatia
   corecta de cer stabil, fara sa mai fie nevoie de niciun sistem de
   straturi/comutare. */
.star--19{ top:94%; left:47%; animation-delay:0.2s; }
.star--20{ top:7%; left:61%; animation-delay:0.8s; width:2px; height:2px; }
.star--21{ top:5%; left:99%; animation-delay:1.9s; width:2px; height:2px; }
.star--22{ top:87%; left:99%; animation-delay:3.1s; }
.star--23{ top:9%; left:33%; animation-delay:1.6s; width:4px; height:4px; }
.star--24{ top:48%; left:6%; animation-delay:3.6s; width:2px; height:2px; }

@keyframes twinkle{
  0%, 100%{ opacity: .22; transform: scale(.75); }
  50%{ opacity: .95; transform: scale(1.2); }
}
/* la trecerea in modul zi, stelele se sting incet */
/* delay la aparitie (cand devin vizibile, adica se merge SPRE noapte) -
   asteapta pana norii au apucat sa dispara aproape complet (norii au
   nevoie de ~1.6s ca sa se stinga total), ca sa nu se vada nori si
   stele/luna deodata pe cer, in timpul tranzitiei */
.star{ transition: opacity .9s 1.3s var(--ease-smooth); }
body.is-day .star{
  transition: opacity .6s var(--ease-smooth); /* fara delay - dispar imediat, nu au de ce sa astepte */
  opacity: 0 !important;
  animation-play-state: paused;
}

/* ====================================================================
   LUNA — element pur decorativ, construit in 2 straturi:
   ::before = un halou larg, foarte difuz (blur), ca atmosfera reala
              din jurul unei luni, care "respira" incet
   ::after  = corpul propriu-zis, cu o mica sclipire ca de sfera
              luminata si taietura de semiluna (umbra solida, exact
              culoarea fundalului, care "musca" din disc)
   .moon in sine ramane doar un ancora de pozitionare, fara stil propriu.
   ==================================================================== */
.moon{
  position: absolute;
  top: 11%;
  right: 12%;
  width: clamp(46px, 6vw, 74px);
  aspect-ratio: 1;
  /* font-size = latimea lunii, ca sa putem folosi unitati "em" mai jos -
     box-shadow NU accepta procente pt. offset (doar lungimi fixe: px,
     em etc), asa ca inainte cuta de semiluna, scrisa in %, era pur si
     simplu CSS invalid si intreaga umbra era ignorata de browser - de
     asta luna aparea complet rotunda, fara nicio taietura. */
  font-size: clamp(46px, 6vw, 74px);
  z-index: 1;
  /* transform-ul lui .moon insusi e REZERVAT exclusiv tranzitiei zi/noapte
     (mai jos) - plutirea ambientala e pusa pe ::after, ca sa nu se bata
     o animatie continua cu o tranzitie pe aceeasi proprietate (cand se
     intampla asta, animatia "castiga" mereu si tranzitia nu se mai vede
     corect - exact bug-ul de care pleaca si vine luna in salturi). */
}
.moon::before{
  content: '';
  position: absolute;
  inset: -95%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,187,61,.32), rgba(253,187,61,.1) 42%, transparent 70%);
  filter: blur(11px);
  z-index: -1;
  animation: moon-breathe 6s var(--ease-breath) infinite;
}
.moon::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* cratere fine, discrete - doar o sugestie de textura, nu exagerate */
    radial-gradient(circle at 72% 66%, rgba(184,125,52,.28) 0%, transparent 14%),
    radial-gradient(circle at 60% 32%, rgba(184,125,52,.2) 0%, transparent 11%),
    radial-gradient(circle at 82% 40%, rgba(184,125,52,.16) 0%, transparent 9%),
    /* umbrire fina pe muchia interioara (concava), ca in referinta ta -
       interiorul semilunii e usor mai inchis decat marginea exterioara */
    radial-gradient(circle at 62% 50%, rgba(184,125,52,.4), transparent 30%),
    linear-gradient(150deg, #FFE29A, #FDBB3D 68%);
  /* TAIETURA REALA a semilunii, prin "mask" - nu prin box-shadow +
     culoare identica cu fundalul (cum era inainte). Metoda veche arata
     ca "doua cercuri suprapuse", nu ca o semiluna adevarata, pentru ca
     depindea sa nimereasca exact aceeasi culoare ca fundalul din spate
     (care insa avea si el o luminozitate/glow, deci nu se potrivea
     niciodata perfect). "mask" decupeaza cu adevarat forma - arata
     corect indiferent ce e in spate. Tranzitia e acum mai stransa
     (96%->100%, nu 92%->100%) - inainte era prea moale si muchia
     parea neclara/"topita"; acum e clara, dar tot cu o mica atenuare,
     nu perfect brusca (ceea ce ar parea "zimtata"/aliasing). */
  -webkit-mask: radial-gradient(circle .52em at .06em .5em, transparent 96%, #000 100%);
  mask: radial-gradient(circle .52em at .06em .5em, transparent 96%, #000 100%);
  animation:
    moon-shimmer 10s var(--ease-breath) infinite,
    moon-drift 9s var(--ease-breath) infinite;
}
@keyframes moon-drift{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(-3px, 6px); }
}
@keyframes moon-shimmer{
  0%, 100%{ filter: brightness(1) saturate(1); }
  50%{ filter: brightness(1.07) saturate(1.1); }
}
@keyframes moon-breathe{
  0%, 100%{ opacity: .7; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.1); }
}
@media (max-width: 700px){
  .moon{ top: 5%; right: 8%; }
  .sun{ top: 5%; left: 6%; }
}

/* la trecerea in modul zi, luna pleaca cu o animatie spre dreapta si
   dispare (translateX, NU "right", ca sa ramana fluid si sa nu intre
   in conflict cu drift-ul ambiental de mai sus) */
/* aceeasi idee ca la stele - delay la (re)aparitie, ca sa nu se
   suprapuna vizual cu norii care inca nu au apucat sa dispara complet */
.moon{ transition: transform 1.5s 1.3s var(--ease-spring), opacity 1s 1.3s var(--ease-smooth); }
body.is-day .moon{
  /* fara delay aici - cand pleaca spre zi, nu are de ce sa astepte
     (doar cand APARE noaptea trebuie sa astepte norii, mai sus) */
  transition: transform 1.3s var(--ease-spring), opacity .8s var(--ease-smooth);
  transform: translate(160%, -30%) scale(.7);
  opacity: 0;
}

/* ====================================================================
   SOARELE — apare DOAR in modul zi, vine cu o animatie dinspre stanga.
   Aceeasi structura in straturi ca la luna (halou difuz + disc).
   ==================================================================== */
.sun{
  position: absolute;
  top: 5%;
  left: 7%;
  width: clamp(50px, 7vw, 84px);
  aspect-ratio: 1;
  z-index: 1;
  opacity: 0;
  transform: translateX(-220%);
  transition: transform 1.6s .15s var(--ease-spring), opacity 1.1s .15s var(--ease-smooth);
}
/* soarele ramane, dar impreuna cu gradientul ceresc premium de mai sus
   (nu unul sau altul) - senzatia de zi vine acum din amandoua */
body.is-day .sun{
  opacity: 1;
  transform: translateX(0);
}
.sun::before{
  content: '';
  position: absolute;
  inset: -90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,196,110,.5), rgba(255,196,110,.1) 45%, transparent 74%);
  filter: blur(13px);
  z-index: -1;
  animation: sun-breathe 5s var(--ease-breath) infinite;
}
.sun::after{
  content: '';
  position: absolute;
  inset: 0;
  /* aceeasi forma usor organica, "de poveste", ca la luna - nu un cerc
     perfect, dar simetric indeajuns cat sa se incadreze curat */
  border-radius: 55% 45% 52% 48% / 48% 55% 45% 52%;
  background: radial-gradient(circle at 34% 30%, #FFF8E4, #FFCE7C 55%, #FFA94D 100%);
  box-shadow: 0 0 40px rgba(255,180,80,.45);
}
@keyframes sun-breathe{
  0%, 100%{ opacity: .8; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.08); }
}

/* ====================================================================
   NORII — vizibili DOAR ziua. Un singur SVG (elipsa + 3 cercuri),
   garantat sa se randeze corect (am invatat din experienta ca trucurile
   CSS cu gradient/box-shadow nu se vedeau clar la dimensiuni mici).
   ==================================================================== */
.cloud{
  width: 100%;
  height: auto;
  display: block;
  fill: #ffffff;
  filter: drop-shadow(0 8px 14px rgba(58,48,85,.16));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.3s .3s var(--ease-smooth), transform 1.3s .3s var(--ease-smooth);
}
body.is-day .cloud{ opacity: 1; transform: translateY(0); }

/* ====================================================================
   NORII — apar DOAR in modul zi, forme moi, usor neclare (blur), ca
   niste petice de vata - nu forme geometrice dure. z-index MAI MARE
   decat al soarelui, ca sa "pluteasca" natural prin fata lui daca se
   intalnesc vreodata, nu sa para taiati grosolan pe sub el.
   ==================================================================== */

/* ====================================================================
   COMETE (noaptea) SI AVIOANE (ziua) — evenimente rare, create dinamic
   de script.js (CelestialEvents), la fiecare 15-25 secunde, alese
   aleator - un mic detaliu "pe cinste", nu ceva care se repeta previzibil.
   ==================================================================== */
.comet{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255,255,255,.9), 0 0 16px 5px rgba(240,199,126,.5);
  /* FARA z-index propriu - stau la acelasi nivel cu stelele (z-index
     "auto", in contextul lui .night-sky), niciodata peste text sau
     peste carte, care au straturi mult mai sus. */
  pointer-events: none;
  animation: comet-fall 2.6s linear forwards;
}
.comet::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 110px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7));
  transform: translateY(-50%);
}
@keyframes comet-fall{
  0%{ opacity: 0; transform: translate(0, 0) rotate(35deg); }
  8%{ opacity: 1; }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(540px, 380px) rotate(35deg); }
}

/* ---- avioane: traiectorie STRICT diagonala (~45°) - din stanga-jos
   spre dreapta-sus (urca) sau din dreapta-sus spre stanga-jos (coboara,
   ca la aterizare). Botul in directia de zbor, fum alb in urma. FARA
   z-index propriu - acelasi nivel cu stelele, niciodata peste text sau
   carte. ---- */
.plane{
  position: absolute;
  width: 24px;
  height: 24px;
  color: rgba(255,255,255,.92);
  pointer-events: none;
}
.plane svg{ width: 100%; height: 100%; display: block; }
/* fumul: o dunga fina, estompata, care porneste din "coada" avionului
   (partea de jos a iconitei, inainte de rotatie) - odata ce parintele
   e rotit spre directia de zbor, fumul ramane corect in spate */
.plane::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  transform: translateX(-50%);
}

.plane--ascend{ animation: plane-ascend 7s linear forwards; }
.plane--straight{ animation: plane-straight 6.5s linear forwards; }

/* urca: stanga-jos -> dreapta-sus, botul spre nord-est (~45°) - ca la
   decolare. NICIODATA nu coboara - arata nenatural pe un fundal de zi
   senin, cerut explicit sa fie scos. */
@keyframes plane-ascend{
  0%{ opacity: 0; transform: translate(0, 0) rotate(var(--plane-tilt, 45deg)); }
  10%{ opacity: .9; }
  75%{ opacity: .9; }
  100%{ opacity: 0; transform: translate(var(--plane-dx, 420px), var(--plane-dy, -420px)) rotate(var(--plane-tilt, 45deg)); }
}
/* zboara drept, pe orizontala usor inclinata (nu vertical, nu coboara) */
@keyframes plane-straight{
  0%{ opacity: 0; transform: translate(0, 0) rotate(var(--plane-tilt, 92deg)); }
  10%{ opacity: .9; }
  75%{ opacity: .9; }
  100%{ opacity: 0; transform: translate(var(--plane-dx, 480px), var(--plane-dy, -40px)) rotate(var(--plane-tilt, 92deg)); }
}

/* ==================================================================
   HEADER
   ================================================================== */
.site-header{
  position: relative;
  z-index: 5;
  padding-block: 18px;
  /* diferentiere fina fata de restul paginii - o linie foarte discreta
     dedesubt si un fundal usor "lipit" de sticla, ca sasi pastreze
     identitatea de "sapca" a paginii, nu doar sa se piarda in cer */
  border-bottom: 1px solid rgba(243,238,228,.06);
  background: linear-gradient(180deg, rgba(20,17,31,.16), transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.is-day .site-header{
  border-bottom-color: rgba(58,48,85,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__actions{
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--cloud);
  letter-spacing: .2px;
  transition: color var(--dur-base) var(--ease-smooth);
}
a.logo:hover{ color: var(--gold-soft); }
.logo__mark{ color: var(--gold); flex-shrink: 0; transition: transform var(--dur-base) var(--ease-spring); }
a.logo:hover .logo__mark{ transform: rotate(-6deg) scale(1.06); }

/* ---- butoane, reutilizate in tot site-ul ---- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: .15px;
  white-space: nowrap;
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-smooth),
    background var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth);
}

.btn--primary{
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--midnight-deep);
  box-shadow: var(--shadow-sm), var(--glow-gold-sm);
  overflow: hidden; /* pt sheen-ul de mai jos, care nu trebuie sa depaseasca colturile rotunjite */
}
/* sheen fin, sus pe buton - ca lumina care cade pe o suprafata lucioasa.
   Discret la repaus, se accentueaza usor la hover - simuleaza tactil
   fara sa fie tipator. */
.btn--primary::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%);
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease-smooth);
  pointer-events: none;
}
.btn--primary:hover{
  transform: translateY(-2.5px) scale(1.025);
  box-shadow: var(--shadow-md), var(--glow-gold-md);
}
.btn--primary:hover::before{ opacity: .8; }
.btn--primary:active{
  transform: translateY(-1px) scale(.98);
  transition-duration: .12s;
}
.btn--primary svg{ position: relative; transition: transform var(--dur-base) var(--ease-spring); }
.btn--primary:hover svg{ transform: translateX(4px); }

.btn--ghost{
  border: 1.5px solid rgba(243,238,228,.28);
  color: var(--cloud);
}
.btn--ghost:hover{
  border-color: var(--gold-soft);
  color: var(--gold-soft);
  background: rgba(240,199,126,.06);
  transform: translateY(-1px);
}
.btn--ghost:active{ transform: translateY(0) scale(.97); transition-duration: .12s; }
.btn--small{ padding: 10px 20px; font-size: 14.5px; }

.btn--text{
  padding: 15px 8px;
  color: var(--cloud-dim);
  text-decoration: underline;
  text-decoration-color: rgba(199,192,214,.4);
  text-underline-offset: 5px;
  transition: color var(--dur-base) var(--ease-smooth), text-decoration-color var(--dur-base) var(--ease-smooth);
}
.btn--text:hover{ color: var(--gold-soft); text-decoration-color: var(--gold-soft); }

/* ==================================================================
   SAGEATA DECORATIVA spre "Comanda cartea" (header) - cometa noaptea,
   avion ziua. Doar pe ecrane mai mari - pe telefon, headerul e prea
   ingust ca sa mai aiba sens o sageata care sa "arate" spre buton.
   ================================================================== */
/* ==================================================================
   NOTA scrisa de mana, atarnata de butonul "Comanda cartea" - grupate
   intr-o singura unitate, ca sa ramana lipite una de alta pe orice
   ecran (nu mai e un rand separat, cat toata latimea header-ului).
   ================================================================== */
/* ==================================================================
   NOTA scrisa de mana, SUB header - element separat (headerul isi
   pastreaza marimea compacta de dinainte). Font specificat DIRECT
   ('Caveat'), nu prin variabila --font-hand, ca masura de siguranta.
   ================================================================== */
/* ==================================================================
   NOTA scrisa de mana - DOUA versiuni separate (una pt desktop, langa
   header; una pt telefon, deasupra raftului), fiecare vizibila doar pe
   dimensiunea ei. Font si culoare puse pe elementul PARINTE (nu pe un
   copil cu selector complicat) - se mostenesc automat la tot ce e
   inauntru, ca sa nu mai poata "scapa" nimic neaplicat.
   ================================================================== */
.header-note-wrap{ position: relative; z-index: 3; }

/* ==================================================================
   WIDGET cronometru + reducere - "Reducere -900 lei inca Xz Xh Xm Xs -
   comanda acum!". O singura regula de baza (culori/fonturi), doua
   contexte (desktop langa header, mobil langa chipurile de beneficii),
   fiecare vizibil doar pe dimensiunea lui.
   ================================================================== */
.promo-timer{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(226,165,75,.1);
  border: 1px solid rgba(226,165,75,.28);
}
.promo-timer__fire{ font-size: 13px; flex-shrink: 0; }
.promo-timer__label{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cloud-dim);
  white-space: nowrap;
}
body.is-day .promo-timer__label{ color: var(--day-ink-dim); }
/* cifrele in casute, ca la cronometrul din formular (aceeasi idee de
   design, doar mai mica, ca sa incapa comod in header) */
.promo-timer__clock{
  display: flex;
  gap: 3px;
}
.promo-timer__unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 22px;
  padding: 2px 3px;
  background: var(--midnight-deep);
  border-radius: 5px;
}
.promo-timer__unit span{
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-soft);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.promo-timer__unit small{
  font-size: 7.5px;
  color: var(--cloud-dim);
  text-transform: uppercase;
  line-height: 1;
}
body.is-day .promo-timer{
  background: rgba(226,165,75,.14);
  border-color: rgba(184,125,52,.35);
}
body.is-day .promo-timer__unit{ background: #FFFFFF; }
body.is-day .promo-timer__unit span{ color: var(--gold-deep); }

/* pe desktop, in header, in stanga comutatorului zi/noapte */
.promo-timer--desktop{}

/* pe telefon, ascuns implicit - apare doar sub media query-ul de jos */
.promo-timer--mobile{ display: none; }

@media (max-width: 980px){
  .promo-timer--desktop{ display: none; }

  .promo-timer--mobile{
    display: inline-flex;
    align-self: center;
    justify-self: center;
    /* grid-ul hero are un "gap" mare intre randuri (32-80px, gandit pt
       distanta dintre coloane pe desktop) - fara ajustarea asta,
       widget-ul ar primi acelasi gap mare fata de chipuri, marind
       vizibil distanta totala fata de cum era inainte. Il tragem in
       sus, ca sa "ocupe" din golul deja existent, nu sa adauge unul nou. */
    margin-top: calc(-1 * clamp(20px, 4vw, 50px));
  }
}

.header-note{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-block: 10px 4px;
  font-family: 'Caveat', cursive;
  color: var(--gold-soft);
  transform: rotate(-2deg);
  transform-origin: top right;
}
body.is-day .header-note{ color: var(--gold-deep); }
.header-note span{
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  max-width: 320px;
}
.header-note__squiggle{
  width: 70px;
  height: 8px;
  margin-top: 2px;
  opacity: .8;
}
.header-note__sparkle{
  display: inline-block;
  margin-left: 4px;
  animation: note-sparkle-pulse 2.4s ease-in-out infinite;
}
@keyframes note-sparkle-pulse{
  0%, 100%{ opacity: .6; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.25); }
}

/* versiunea de telefon - alt loc (deasupra raftului), alta scara
   (mai mare, centrata, gandita ca punct focal, nu ca detaliu mic langa
   un buton) - ascunsa complet pe desktop. */
.hero-note--mobile{ display: none; }

@media (max-width: 980px){
  .header-note-wrap{ display: none; } /* pe telefon, folosim varianta de mai jos, nu pe asta */

  .hero-note--mobile{
    display: block;
    text-align: center;
    max-width: 300px;
    margin: 0 auto 10px;
    padding-block: 4px;
    font-family: 'Caveat', cursive;
    font-size: clamp(18px, 4.8vw, 22px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--gold-soft);
  }
  body.is-day .hero-note--mobile{ color: var(--gold-deep); }
  .hero-note--mobile .hero-note__sparkle{
    display: inline-block;
    margin-left: 4px;
    animation: note-sparkle-pulse 2.4s ease-in-out infinite;
  }
}

/* ==================================================================
   HERO — layout general
   ================================================================== */
.hero{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 6.6fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  /* fara min-height:100vh - vezi explicatia mai veche: cu un rand fortat
     sa fie inalt cat tot ecranul, continutul (mai scund) ramanea centrat
     intr-un gol urias, iar padding-ul sectiunii urmatoare se aduna PESTE
     acel gol. Inaltimea vine din continutul real. */
  padding-block: clamp(28px, 6vw, 64px) clamp(56px, 7vw, 88px);
}
.hero__content{ max-width: 560px; }

/* ---------- coloana cu fotografia: incadrata clar, ca o "vitrina" -
   NU mai e fundal pe toata latimea (am incercat, nu era stilul dorit) */
.hero__visual{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero__photo-wrap{
  position: relative;
  width: 122%;
  margin-inline: auto;
}
/* doua poze COMPLETE (raft + sirag + glow + umbra de contact - toate
   deja coapte in pixeli, offline, in Python) - comutate prin opacitate,
   ca peste tot in site. Fara elemente separate de aliniat prin CSS. */
.hero__photo{
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 1.1s var(--ease-smooth);
}
.hero__photo--night{ position: relative; opacity: 1; }
.hero__photo--day{ position: absolute; inset: 0; opacity: 0; }
body.is-day .hero__photo--night{ opacity: 0; }
body.is-day .hero__photo--day{ opacity: 1; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--gold-soft);
  margin-bottom: 22px;
}
.eyebrow__dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(226,147,141,.2);
}

/* titlu display: serif, mai strans (letter-spacing negativ, line-height
   compact) - o serifa mare are nevoie de "tracking" mai stramt ca sa
   para intentionata, nu doar marita. text-wrap:balance distribuie
   cuvintele frumos pe randuri (browserele care nu-l stiu inca il ignora
   simplu, fara sa strice nimic). */
.hero__title{
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -.015em;
  font-weight: 600;
  color: var(--cream);
  max-width: 13ch;
  text-wrap: balance;
}
.hero__title em{
  display: block;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.008em;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* subtitlu sans: contrastul clasic de revista - mai deschis, mai aerisit,
   greutate normala, urma foarte usoara de letter-spacing pozitiv care
   ajuta lizibilitatea la corp de litera mic-mediu */
.hero__subtitle{
  margin-top: 24px;
  font-size: 17.5px;
  line-height: 1.7;
  letter-spacing: .1px;
  font-weight: 400;
  color: var(--cloud-dim);
  max-width: 44ch;
  text-wrap: pretty;
}

.hero__actions{
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

/* comutator zi/noapte - buton rotund, compact, doar cu emblema (fara
   text) - potrivit pt. header, langa butonul "Creeaza cartea" */
.daynight-toggle{
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(243,238,228,.22);
  background: rgba(255,255,255,.03);
  color: var(--cloud);
  transition:
    border-color var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-spring);
}
.daynight-toggle:hover{
  border-color: rgba(240,199,126,.45);
  color: var(--gold-soft);
  background: rgba(240,199,126,.08);
  transform: translateY(-1px);
}
.daynight-toggle:active{ transform: translateY(0) scale(.93); transition-duration: .12s; }
.daynight-toggle svg{
  position: absolute;
  width: 17px;
  height: 17px;
  transition: opacity var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-spring);
}
.daynight-toggle__moon{ opacity: 1; transform: rotate(0deg) scale(1); }
.daynight-toggle__sun{ opacity: 0; transform: rotate(-90deg) scale(.4); }
body.is-day .daynight-toggle__moon{ opacity: 0; transform: rotate(90deg) scale(.4); }
body.is-day .daynight-toggle__sun{ opacity: 1; transform: rotate(0deg) scale(1); }

.feature-chips{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.feature-chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: rgba(243,238,228,.05);
  border: 1px solid rgba(243,238,228,.08);
  font-size: 13px;
  font-weight: 600;
  color: var(--cloud-dim);
}
.feature-chip svg{ width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }
body.is-day .feature-chip{
  background: rgba(58,48,85,.04);
  border-color: rgba(58,48,85,.08);
}

/* ==================================================================
   SECȚIUNEA BENEFICII
   ================================================================== */
.benefits{
  position: relative;
  z-index: 2;
  padding-block: clamp(12px, 3vw, 24px) clamp(60px, 9vw, 110px);
}
.benefits__eyebrow{
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--gold-soft);
  margin-bottom: clamp(28px, 5vw, 44px);
}

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

.benefit-card{
  /* glassmorphism subtil - un card care lasa sa se vada usor cerul din
     spate (backdrop-filter), nu un bloc plin, opac */
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-l);
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--dur-base) var(--ease-spring),
    border-color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth);
}
.benefit-card:hover{
  transform: translateY(-5px);
  border-color: rgba(226,165,75,.32);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow-sm);
}

.benefit-card__icon{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(226,165,75,.12);
  color: var(--gold-soft);
  margin-bottom: 20px;
}

.benefit-card__title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--cream);
  margin: 0 0 10px;
}

.benefit-card__text{
  font-size: 14.5px;
  line-height: 1.65;
  letter-spacing: .05px;
  color: var(--cloud-dim);
}

@media (max-width: 900px){
  .benefits__grid{ grid-template-columns: 1fr; gap: 16px; }
  .benefit-card{ text-align: center; }
  .benefit-card__icon{ margin-inline: auto; }
}

/* ==================================================================
   RESPONSIVE — mobil / tableta
   ================================================================== */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__title{ max-width: none; margin-inline: auto; }
  .hero__subtitle{ margin-inline: auto; }
  .hero__content{ max-width: none; margin-inline: auto; }
  .hero__actions{ justify-content: center; }
  .feature-chips{ justify-content: center; }
  .hero__visual{ order: -1; margin-bottom: 8px; }
  .hero__photo-wrap{ width: 100%; } /* fara depasire pe ecran ingust - ar taia prea mult din imagine */
}

@media (max-width: 460px){
  .site-header__inner .btn--ghost span{ display: none; }
  .btn{ padding: 14px 20px; font-size: 14.5px; }

  /* mai mult aer in header - logo mai mic, comutatorul zi/noapte mai
     mic, gap marit intre grupul de butoane si logo, ca sa nu para
     inghesuit pe un ecran ingust de telefon */
  .site-header{ padding-block: 14px; }
  .logo{ font-size: 17px; gap: 6px; }
  .logo svg{ width: 22px; height: 22px; }
  .site-header__inner{ gap: 10px; }
  .site-header__actions{ gap: 8px; }
  .daynight-toggle{ width: 34px; height: 34px; }
  .site-header__actions .btn--ghost{ padding: 10px 16px; font-size: 13.5px; }

  /* luna si soarele - mai jos pe telefon, sa nu se bata cu headerul */
  .moon{ top: 24%; }
  .sun{ top: 18%; }
}

/* ==================================================================
   TITLURI DE SECTIUNE REUTILIZABILE (craft, livrare, faq)
   ================================================================== */
.section-eyebrow{
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 10px;
}
.section-title{
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cream);
  margin-bottom: clamp(32px, 5vw, 48px);
  text-wrap: balance;
}

/* ==================================================================
   SECTIUNEA "CUM E FACUTA CARTEA" — reutilizeaza .benefit-card
   ================================================================== */
.craft{
  position: relative;
  z-index: 2;
  padding-block: clamp(20px, 4vw, 32px) clamp(56px, 8vw, 96px);
}

/* ==================================================================
   SECTIUNEA LIVRARE
   ================================================================== */
.delivery{ position: relative; z-index: 2; padding-block: 0 clamp(56px, 8vw, 96px); }
.delivery__card{
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-l);
  padding: clamp(36px, 5vw, 52px) clamp(24px, 5vw, 48px);
  box-shadow: var(--shadow-xs);
}
.delivery__icon{
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(143,174,133,.15);
  color: var(--sage);
}
.delivery__title{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.008em;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--cream);
  margin: 0 0 8px;
}
.delivery__text{
  color: var(--cloud-dim);
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.delivery__chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.delivery__chip{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cream);
  background: rgba(226,165,75,.1);
  border: 1px solid rgba(226,165,75,.25);
  padding: 9px 18px;
  border-radius: 999px;
}
body.is-day .delivery__chip{
  color: var(--day-ink);
  background: rgba(226,165,75,.14);
  border-color: rgba(184,125,52,.35);
}

/* ==================================================================
   SECTIUNEA FAQ — acordeon
   ================================================================== */
.faq{ position: relative; z-index: 2; padding-block: 0 clamp(64px, 9vw, 110px); }
.faq-list{
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth);
}
.faq-item.is-open{ border-color: rgba(226,165,75,.3); box-shadow: var(--shadow-sm); }

/* ====================================================================
   SECTIUNEA DE COMANDA, DIRECT PE PAGINA (sub FAQ)
   ====================================================================
   Acelasi formular ca in modal (vezi BookingForm in script.js) - de
   data asta intr-un card static, nu intr-un overlay. Face viata mai
   usoara mai ales pe telefon, unde un modal cu tot continutul asta
   (format, pagini, pret, cronometru) risca sa se simta incomod.
   ==================================================================== */
.book-order{
  position: relative;
  z-index: 2;
  padding-block: 0 clamp(64px, 9vw, 110px);
  text-align: center;
}
.book-order__subtitle{
  color: var(--cloud-dim);
  font-size: 15px;
  margin-top: -6px;
  margin-bottom: 32px;
}
.book-order__panel{
  max-width: 560px;
  margin-inline: auto;
  text-align: left;
  background: var(--midnight-soft);
  border: 1px solid rgba(243,238,228,.1);
  border-radius: var(--radius-l);
  padding: clamp(28px, 5vw, 44px);
  box-shadow: var(--shadow-sm);
}
.book-order__success{
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
  background: var(--midnight-soft);
  border: 1px solid rgba(243,238,228,.1);
  border-radius: var(--radius-l);
  padding: clamp(36px, 6vw, 52px);
  box-shadow: var(--shadow-sm);
}
body.is-day .book-order__panel,
body.is-day .book-order__success{
  background: #FFFFFF;
  border-color: rgba(58,48,85,.08);
  box-shadow: 0 10px 30px rgba(58,48,85,.07);
}


.faq-item__question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.faq-item__question:hover{ color: var(--gold-soft); }
.faq-item__chevron{
  flex-shrink: 0;
  color: var(--gold-soft);
  transition: transform var(--dur-base) var(--ease-spring);
}
.faq-item.is-open .faq-item__chevron{ transform: rotate(180deg); }

/* trucul grid-template-rows: 0fr -> 1fr anima inaltimea fara sa stim
   dinainte cat de mult text e in raspuns, si fara JS de masurare */
.faq-item__answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-smooth);
}
.faq-item.is-open .faq-item__answer{ grid-template-rows: 1fr; }
.faq-item__answer-inner{ overflow: hidden; }
.faq-item__answer-inner p{
  padding: 0 24px 22px;
  color: var(--cloud-dim);
  font-size: 15px;
  line-height: 1.65;
}

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer{
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(243,238,228,.08);
  padding-top: clamp(36px, 5vw, 52px);
}
.site-footer__inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 28px;
}
.site-footer__tagline{
  margin-top: 10px;
  font-size: 14px;
  color: var(--cloud-dim);
  max-width: 32ch;
}
.site-footer__links{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.site-footer__links a{
  font-size: 14px;
  font-weight: 600;
  color: var(--cloud-dim);
  transition: color var(--dur-base) var(--ease-smooth);
}
.site-footer__links a:hover{ color: var(--gold-soft); }
.site-footer__copy{
  text-align: center;
  font-size: 12.5px;
  color: rgba(199,192,214,.55);
  padding-block: 18px;
  border-top: 1px solid rgba(243,238,228,.06);
}

@media (max-width: 600px){
  .site-footer__inner{ flex-direction: column; text-align: center; align-items: center; }
  .site-footer__links{ justify-content: center; }
}

/* ==================================================================
   BUTON PLUTITOR DE CONTACT (WhatsApp)
   ================================================================== */
.float-contact{
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 150;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366; /* verde recunoscut, standard pt WhatsApp */
  color: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth);
}
.float-contact:hover{
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--shadow-md);
}
.float-contact:active{ transform: translateY(-1px) scale(.98); transition-duration: .12s; }
.float-contact__ring{
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.5);
  animation: contact-pulse 2.6s var(--ease-breath) infinite;
}
@keyframes contact-pulse{
  0%{ transform: scale(.85); opacity: .8; }
  100%{ transform: scale(1.35); opacity: 0; }
}
.float-contact__tooltip{
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--cream);
  color: var(--midnight-deep);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth);
}
.float-contact:hover .float-contact__tooltip,
.float-contact:focus-visible .float-contact__tooltip{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 600px){
  .float-contact{ width: 52px; height: 52px; }
  /* pe mobil nu are sens un tooltip pe hover - il ascundem, iconita e clara */
  .float-contact__tooltip{ display: none; }
}

/* ==================================================================
   MODAL DE COMANDA
   ================================================================== */
.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14,11,22,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-smooth), visibility var(--dur-base) var(--ease-smooth);
}
.modal-overlay.is-open{ opacity: 1; visibility: visible; }

.modal{
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden; /* pastreaza coltul rotunjit curat - scroll-ul e in interior, pe .modal__scroll */
  background: var(--midnight-soft);
  border: 1px solid rgba(243,238,228,.1);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(22px) scale(.96);
  transition:
    transform .45s var(--ease-spring),
    opacity var(--dur-base) var(--ease-smooth);
}
/* pe desktop, modalul e mult mai lat - arata mai "solid", nu ca o
   fereastra ingusta - doar pe ecrane mari (pe telefon ramane 540px,
   deja adaptat corect la ecranul ingust) */
@media (min-width: 769px){
  .modal{ max-width: 700px; } /* redus cu ~30% fata de 1000px - era prea mare */
}
/* wrapper-ul care chiar are scroll - bara de scroll traieste aici, nu
   pe muchia rotunjita a .modal (acolo iesea vizibil din contur) */
.modal__scroll{
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(28px, 5vw, 44px);
  /* bara de scroll, in tonul site-ului (Firefox) - varianta webkit mai jos */
  scrollbar-width: thin;
  scrollbar-color: rgba(226,165,75,.45) transparent;
}
/* bara de scroll, subtire si aurie, in loc de cea implicita a browserului
   (Chrome/Safari/Edge) */
.modal__scroll::-webkit-scrollbar{ width: 7px; }
.modal__scroll::-webkit-scrollbar-track{ background: transparent; }
.modal__scroll::-webkit-scrollbar-thumb{
  background: rgba(226,165,75,.45);
  border-radius: 999px;
}
.modal__scroll::-webkit-scrollbar-thumb:hover{ background: rgba(226,165,75,.7); }
.modal-overlay.is-open .modal{ opacity: 1; transform: translateY(0) scale(1); }

.modal__close{
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5; /* garanteaza ca ramane deasupra continutului care se scroleaza (.modal__scroll), indiferent de ordinea din DOM */
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cloud-dim);
  background: var(--midnight-soft); /* fundal opac - fara el, textul care trece pe sub buton la scroll s-ar vedea prin el */
  transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-spring);
}
.modal__close:hover{ background: rgba(243,238,228,.1); color: var(--cream); transform: rotate(90deg); }

.modal__eyebrow{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 8px;
}
.modal__title{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-size: clamp(24px, 3.4vw, 30px);
  color: var(--cream);
  margin-bottom: 8px;
}
.modal__subtitle{
  color: var(--cloud-dim);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.field{ margin-bottom: 20px; }
.field label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 9px;
}
.field input[type="text"],
.field input[type="tel"],
.field textarea{
  width: 100%;
  background: var(--midnight);
  border: 1.5px solid rgba(243,238,228,.14);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--cream);
  transition: border-color var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(199,192,214,.45); }
.field input:focus, .field textarea:focus{
  outline: none;
  border-color: var(--gold-soft);
  background: var(--midnight-deep);
  box-shadow: 0 0 0 4px rgba(226,165,75,.14);
}
.field textarea{ resize: vertical; min-height: 96px; }

/* stare de eroare, aplicata de JS pe campurile completate gresit */
.field.has-error input, .field.has-error textarea{ border-color: #E08585; }
.field__error{
  color: #E9A2A2;
  font-size: 13.5px;
  font-weight: 600;
  margin: -8px 0 18px;
}

/* selector vizual de gen: doua "carduri" mari, usor de apasat pe mobil */
.gender-select{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gender-option{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: var(--radius-m);
  border: 1.5px solid rgba(243,238,228,.14);
  color: var(--cloud-dim);
  background: var(--midnight);
  transition:
    border-color var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-spring);
}
.gender-option:hover{ transform: translateY(-2px); border-color: rgba(240,199,126,.3); }
.gender-option:active{ transform: translateY(0) scale(.97); transition-duration: .12s; }
.gender-option span{ font-size: 14.5px; font-weight: 600; }
.gender-option[aria-pressed="true"]{
  border-color: var(--gold-soft);
  background: rgba(226,165,75,.12);
  color: var(--gold-soft);
  box-shadow: var(--glow-gold-sm);
}

.btn--block{ width: 100%; justify-content: center; margin-top: 6px; }

/* ==================================================================
   CONTACT: intai aplicatia (WhatsApp/Viber/Telegram), apoi numarul
   ================================================================== */
.contact-app-select{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.contact-app-option{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 13px 8px;
  border-radius: var(--radius-m);
  border: 1.5px solid rgba(243,238,228,.14);
  color: var(--cloud-dim);
  background: var(--midnight);
  transition:
    border-color var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-spring);
}
.contact-app-option:hover{ transform: translateY(-2px); border-color: rgba(240,199,126,.3); }
.contact-app-option:active{ transform: translateY(0) scale(.97); transition-duration: .12s; }
.contact-app-option span{ font-size: 12.5px; font-weight: 600; }
.contact-app-option[aria-pressed="true"]{
  border-color: var(--gold-soft);
  background: rgba(226,165,75,.12);
  color: var(--gold-soft);
  box-shadow: var(--glow-gold-sm);
}
.contact-no-app-toggle{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--cloud-dim);
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
}
/* checkbox nativ - ramane in DOM (accesibil, focusabil cu Tab), dar
   vizual ascuns "off-screen" (nu display:none, ca sa nu iasa din
   ordinea de tab); patratul vizual e span-ul de langa el */
.contact-no-app-toggle input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-no-app-toggle__box{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 0; /* elimina orice inaltime "fantoma" de linie mostenita, care ar putea impinge patratul in jos */
  border-radius: 5px;
  border: 1.5px solid rgba(243,238,228,.28);
  background: var(--midnight);
  color: transparent;
  transition:
    background var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth);
}
.contact-no-app-toggle:hover .contact-no-app-toggle__box{ border-color: rgba(240,199,126,.5); }
.contact-no-app-toggle input:checked + .contact-no-app-toggle__box{
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--midnight-deep);
}
.contact-no-app-toggle input:focus-visible + .contact-no-app-toggle__box{
  box-shadow: 0 0 0 3px rgba(226,165,75,.3);
}

.field__hint{
  font-size: 12px;
  color: var(--cloud-dim);
  margin-top: 7px;
  line-height: 1.45;
}

/* ==================================================================
   FORMAT CARTE - grila de "swatch-uri" cu proportia reala a fiecarui
   format (aspect-ratio setat inline per buton, in HTML)
   ================================================================== */
.format-select{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.format-option{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 112px;
  padding: 22px 6px 12px;
  border-radius: var(--radius-m);
  border: 1.5px solid rgba(243,238,228,.14);
  background: var(--midnight);
  color: var(--cloud-dim);
  transition:
    border-color var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-spring);
}
.format-option:hover{ transform: translateY(-2px); border-color: rgba(240,199,126,.3); }
.format-option:active{ transform: translateY(0) scale(.97); transition-duration: .12s; }

/* "coperta" - un mic dreptunghi cu aer de carte (gradient + o "cotor"
   pe stanga + colt usor rotunjit doar in dreapta), NU doar un
   dreptunghi gol. Marimea (width/height, in px) vine direct din HTML,
   proportionala cu dimensiunea REALA in cm a fiecarui format - un
   30cm e vizibil mai mare decat un 20cm, nu doar alta forma. */
.format-option__swatch{
  display: block;
  position: relative;
  background: linear-gradient(135deg, rgba(243,238,228,.3), rgba(243,238,228,.14));
  border: 1.5px solid rgba(243,238,228,.32);
  border-radius: 1px 4px 4px 1px;
  box-shadow: -3px 0 0 rgba(0,0,0,.18) inset, 0 3px 6px rgba(0,0,0,.2);
  transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);
}
.format-option__label{ font-size: 11px; font-weight: 600; white-space: nowrap; }
.format-option[aria-pressed="true"]{
  border-color: var(--gold-soft);
  background: rgba(226,165,75,.12);
  color: var(--gold-soft);
  box-shadow: var(--glow-gold-sm);
}
.format-option[aria-pressed="true"] .format-option__swatch{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  border-color: var(--gold-soft);
  box-shadow: -3px 0 0 rgba(0,0,0,.22) inset, 0 3px 8px rgba(226,165,75,.35);
}

/* etichetele mici (Hot / Premium / Cel mai cumparat) - sus de tot pe
   card, ca sa iasa in evidenta fara sa deranjeze desenul coperta */
.format-option__badge{
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 2.5px 7px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
}
.format-option__badge svg{ flex-shrink: 0; }
.format-option__badge--hot{
  background: linear-gradient(135deg, #FF7A5C, #E24B3A);
  color: #fff;
}
.format-option__badge--premium{
  background: linear-gradient(135deg, #E2A54B, #B87D34);
  color: #fff;
}
.format-option__badge--best{
  background: rgba(120,170,140,.9);
  color: #fff;
}

/* ==================================================================
   SLIDER NUMAR DE PAGINI
   ================================================================== */
.pages-slider{
  display: flex;
  align-items: center;
  gap: 16px;
}
.pages-slider input[type="range"]{
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--gold-soft) 0%, var(--gold-soft) var(--fill, 0%),
    rgba(243,238,228,.16) var(--fill, 0%), rgba(243,238,228,.16) 100%);
  outline: none;
  cursor: pointer;
}
.pages-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 3px solid var(--midnight-deep);
  box-shadow: var(--glow-gold-sm);
  cursor: pointer;
}
.pages-slider input[type="range"]::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 3px solid var(--midnight-deep);
  box-shadow: var(--glow-gold-sm);
  cursor: pointer;
}
.pages-slider__value{
  min-width: 78px;
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-soft);
  white-space: nowrap;
}

/* ==================================================================
   CUTIA DE PRET - cronometru + pret vechi/nou
   ================================================================== */
.price-box{
  background: rgba(226,165,75,.08);
  border: 1.5px solid rgba(226,165,75,.25);
  border-radius: var(--radius-l);
  padding: 20px;
  margin-bottom: 20px;
}
.price-box__countdown{
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(226,165,75,.2);
}
/* mesajul special, aparut doar cand exceptia promotionala (20x15/15x20
   la 14 pagini) e activa - evidentiaza vizual ca "asta e cea mai buna
   oferta chiar acum" */
.price-box__hot-flag{
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #FF7A5C;
  margin-bottom: 12px;
}
.price-box--hot{
  border-color: #FF7A5C;
  box-shadow: 0 0 0 1px rgba(255,122,92,.2), 0 8px 24px -6px rgba(255,122,92,.35);
}
.price-box__countdown-label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cloud-dim);
  margin-bottom: 10px;
}
.price-box__countdown-timer{
  display: flex;
  justify-content: center;
  gap: 8px;
}
.price-box__countdown-unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 8px 5px;
  background: var(--midnight-deep);
  border-radius: var(--radius-s);
}
.price-box__countdown-unit span{
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-soft);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-box__countdown-unit small{
  font-size: 9.5px;
  color: var(--cloud-dim);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.price-box__values{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.price-box__old{
  font-size: 15px;
  color: var(--cloud-dim);
  text-decoration: line-through;
  opacity: .75;
}
.price-box__badge{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--midnight-deep);
  background: var(--gold-soft);
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-box__final{
  font-size: 30px;
  font-weight: 800;
  color: var(--gold-soft);
}

.modal__note{
  text-align: center;
  font-size: 13px;
  color: var(--cloud-dim);
  margin-top: 14px;
}

/* starea de succes, dupa "trimiterea" formularului */
.modal__panel--success{ text-align: center; padding-block: 12px; }
.modal__success-badge{
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: rgba(226,165,75,.15);
}
.modal__panel--success .btn{ margin-inline: auto; margin-top: 10px; }

@media (max-width: 460px){
  .modal{ padding: 24px 20px; border-radius: var(--radius-m); }
}

/* ====================================================================
   MODUL ZI — text lizibil pe cerul luminos
   ====================================================================
   Doua categorii de elemente au nevoie de tratament diferit:
   1) text care sta DIRECT pe fundalul paginii (fara card in spate) -
      il inversam la o cerneala calda, inchisa (--day-ink).
   2) cardurile (beneficii, FAQ, livrare, modal) - le facem si pe ELE
      deschise la culoare (nu raman bleumarin pe un cer deschis, ceea
      ce arata incoerent), cu text inchis in interior. --midnight-soft
      NU e folosit nicaieri altundeva (nu si la paginile cartii), deci
      redefinirea lui aici e sigura si se propaga peste tot automat.
   ==================================================================== */
body.is-day{
  --day-ink: #3A3055;        /* text principal - inchis, cald, lizibil pe cerul de zi */
  --day-ink-dim: #6B6182;    /* text secundar */
  --midnight-soft: #FFFFFF;  /* fundalul cardurilor - alb cald, nu bleumarin */
}
body.is-day .logo,
body.is-day .eyebrow,
body.is-day .hero__title,
body.is-day .section-title,
body.is-day .section-eyebrow,
body.is-day .benefits__eyebrow,
body.is-day .benefit-card__title,
body.is-day .delivery__title,
body.is-day .faq-item__question,
body.is-day .modal__title,
body.is-day .field label{
  color: var(--day-ink);
}
body.is-day .hero__subtitle,
body.is-day .feature-chip,
body.is-day .site-footer__tagline,
body.is-day .site-footer__copy,
body.is-day .site-footer__links a,
body.is-day .btn--text,
body.is-day .benefit-card__text,
body.is-day .delivery__text,
body.is-day .faq-item__answer-inner p,
body.is-day .modal__subtitle,
body.is-day .modal__note{
  color: var(--day-ink-dim);
}
body.is-day .hero__title em{
  background: linear-gradient(100deg, var(--gold-deep), #8F5A1F 65%);
  -webkit-background-clip: text;
  background-clip: text;
}
body.is-day .btn--ghost{
  color: var(--day-ink);
  border-color: rgba(58,48,85,.22);
}
body.is-day .btn--ghost:hover{
  color: var(--gold-deep);
  border-color: rgba(184,125,52,.4);
  background: rgba(184,125,52,.08);
}
body.is-day .daynight-toggle{
  color: var(--day-ink-dim);
  border-color: rgba(58,48,85,.18);
  background: rgba(58,48,85,.03);
}
body.is-day .daynight-toggle:hover{
  border-color: rgba(184,125,52,.4);
  background: rgba(184,125,52,.08);
}
body.is-day .site-footer,
body.is-day .craft,
body.is-day .delivery,
body.is-day .faq{
  border-color: rgba(58,48,85,.08);
}

/* cardurile - "sticla" mai deschisa la culoare ziua, ca sa se vada
   destul de bine peste cerul luminos (glassmorphism-ul de mai sus
   foloseste alb foarte transparent, gandit pt fundal INCHIS - pe unul
   deschis, acelasi alb aproape se pierde, deci il facem mai opac aici) */
body.is-day .benefit-card,
body.is-day .delivery__card,
body.is-day .faq-item{
  background: rgba(255,255,255,.88);
  border-color: rgba(58,48,85,.06);
  box-shadow: 0 10px 30px rgba(58,48,85,.07);
}
body.is-day .benefit-card:hover{
  background: rgba(255,255,255,.97);
  box-shadow: 0 14px 38px rgba(58,48,85,.1);
}
body.is-day .benefit-card__icon,
body.is-day .delivery__icon,
body.is-day .faq-item__chevron{
  color: var(--gold-deep);
}
body.is-day .modal{
  box-shadow: 0 20px 60px -12px rgba(58,48,85,.35);
}
body.is-day .field input[type="text"],
body.is-day .field input[type="tel"],
body.is-day .field textarea{
  background: #FAF6EE;
  color: var(--day-ink);
  border-color: rgba(58,48,85,.16);
}
body.is-day .field input::placeholder,
body.is-day .field textarea::placeholder{
  color: rgba(58,48,85,.4);
}
body.is-day .field input:focus,
body.is-day .field textarea:focus{
  background: #FFFFFF;
}
body.is-day .gender-option{
  background: #FAF6EE;
  color: var(--day-ink-dim);
  border-color: rgba(58,48,85,.16);
}
body.is-day .contact-app-option,
body.is-day .format-option{
  background: #FAF6EE;
  color: var(--day-ink-dim);
  border-color: rgba(58,48,85,.16);
}
body.is-day .contact-no-app-toggle__box{
  background: #FAF6EE;
  border-color: rgba(58,48,85,.22);
}
body.is-day .format-option__swatch{
  background: rgba(58,48,85,.08);
  border-color: rgba(58,48,85,.28);
}
body.is-day .price-box{
  background: rgba(226,165,75,.1);
  border-color: rgba(184,125,52,.3);
}
body.is-day .price-box__countdown{ border-bottom-color: rgba(184,125,52,.22); }
body.is-day .price-box__countdown-unit{ background: #FFFFFF; }
body.is-day .price-box__final{ color: var(--gold-deep); }
body.is-day .pages-slider input[type="range"]{
  background: linear-gradient(90deg,
    var(--gold-deep) 0%, var(--gold-deep) var(--fill, 0%),
    rgba(58,48,85,.14) var(--fill, 0%), rgba(58,48,85,.14) 100%);
}
body.is-day .pages-slider__value{ color: var(--gold-deep); }
body.is-day .modal__close{ color: var(--day-ink-dim); }
body.is-day .modal__close:hover{ background: rgba(58,48,85,.08); color: var(--day-ink); }