/* ============================================================
   Cake Factory by Iulia, Baia Mare — demo VisionSite
   Plan de prezentare (100 lei/lună): catalog + formulare pe
   WhatsApp. Fără coș, fără preț pe fișe, fără stepper.

   ARHETIPUL: cutia noastră de monoporții — cutia albă cu
   fereastră, cu eticheta de carton legată cu sfoară. Se vede
   în două dintre pozele noastre (cutiile cu bomboane și
   batoanele cu nuci, cu „Cake Factory by Iulia" tipărit pe ele).
   De aici: fișa de produs = cutia, cu fereastră și etichetă;
   panourile au tivul unei cutii; secțiunile se despart cu inima
   din siglă.

   Paletă măsurată din sigla noastră (colajul de profil):
     mov      #5A0FA2  — scrisul „Cake Factory by Iulia"
     mov-mid  #6D33A3  — umbra scrisului
     lila     #DCB6D3  — acuarela din fundal
     roz      #E8D8E2  — colțul deschis al acuarelei
   plus tonurile de recuzită din pozele noastre:
     carton   #C8A374  — eticheta legată cu sfoară
     sfoară   #CBB79A
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Onest:wght@300;400;500;600;700&family=Caveat:wght@500;600;700&family=Quicksand:wght@600;700&display=swap');

:root{
  --ink:#2A1F31;
  --ink-soft:#584B63;
  --ink-mute:#8B7F95;

  --mov:#5A0FA2;
  --mov-mid:#6D33A3;
  --mov-soft:#B98FD6;
  --mov-deep:#2E0B52;

  --lila:#DCB6D3;
  --lila-pal:#EFE0F0;
  --roz:#F6E6EE;
  --menta:#DFEDE7;

  --crem:#FBF7F6;
  --hartie:#FFFFFF;
  --carton:#C8A374;
  --carton-deep:#8C6A3F;
  --sfoara:#CBB79A;

  --linie:rgba(42,31,49,.13);
  --linie-soft:rgba(42,31,49,.07);
  --umbra-s:0 10px 26px rgba(58,32,74,.08);
  --umbra-m:0 26px 60px -22px rgba(58,32,74,.32);
  --umbra-l:0 44px 90px -30px rgba(46,11,82,.4);

  --rad:18px;
  --rad-s:10px;
  --maxw:1220px;

  --f-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand:'Caveat', 'Segoe Script', cursive;
  --f-mark:'Quicksand', var(--f-body);

  --wash:linear-gradient(104deg, #EFE0F0 0%, #F8E7EE 42%, #E6F0EB 100%);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html,body{background:var(--crem); color:var(--ink); overflow-x:clip;}
body{font-family:var(--f-body); font-size:16px; line-height:1.68; font-weight:400; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; color:var(--ink); letter-spacing:-.008em;
  font-variation-settings:'SOFT' 30, 'WONK' 1;}
h1{line-height:1.1;}
h2{line-height:1.16;}
h3,h4{line-height:1.24;}
h1 em,h2 em,h3 em{font-style:italic; font-weight:400; color:var(--mov);}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
img{max-width:100%; display:block;}
ul{list-style:none;}
[hidden]{display:none!important;}
:focus-visible{outline:2.5px solid var(--mov); outline-offset:3px;}
::selection{background:var(--lila); color:var(--mov-deep);}
.container{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(22px,5.2vw,52px);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ============================================================
   SEMNĂTURA 1 — INIMA din siglă („Cake Fact♥ry")
   ============================================================ */
.inima{display:inline-block; width:1em; height:1em; vertical-align:-.12em; fill:currentColor; flex:none;}

.desparte{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--mov-soft);
  margin:clamp(34px,5vw,54px) 0;}
.desparte::before,.desparte::after{content:''; height:1px; width:min(90px,14vw); background:currentColor; opacity:.55;}
.desparte .inima{width:15px; height:15px; color:var(--mov);}

/* ============================================================
   SEMNĂTURA 2 — ACUARELA din spatele siglei (lila → roz → mentă)
   ============================================================ */
.acuarela{background-image:var(--wash);}
.acuarela-fin{position:relative;}
.acuarela-fin::before{content:''; position:absolute; inset:0; background-image:var(--wash); opacity:.5; z-index:-1;}

/* ============================================================
   SEMNĂTURA 3 — CUTIA cu fereastră și etichetă de carton
   ============================================================ */
.cutie{position:relative; background:var(--hartie); border:1px solid var(--linie-soft);
  border-radius:var(--rad-s); padding:13px 13px 20px; box-shadow:var(--umbra-s);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; min-width:0;}
.cutie::after{content:''; position:absolute; left:13px; right:13px; bottom:11px; height:1px;
  background:repeating-linear-gradient(90deg, var(--linie) 0 5px, transparent 5px 10px); opacity:.7;}
a.cutie:hover,.cutie.is-hover:hover{transform:translateY(-5px); box-shadow:var(--umbra-m);}

.fereastra{position:relative; border-radius:6px; overflow:hidden; background:var(--lila-pal); aspect-ratio:1/1;}
.fereastra img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.fereastra img.dreapta{object-position:72% 50%;}
.fereastra img.stanga{object-position:28% 50%;}
.fereastra img.sus{object-position:50% 26%;}
.cutie:hover .fereastra img{transform:scale(1.045);}
.fereastra::after{content:''; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(42,31,49,.09), inset 0 14px 26px -18px rgba(255,255,255,.9);}
.fereastra.lat{aspect-ratio:3/2;}
.fereastra.inalt{aspect-ratio:3/4;}

/* eticheta de carton, legată cu sfoară — exact ca pe cutiile noastre */
.eticheta{position:absolute; z-index:3; top:-13px; right:18px; transform:rotate(-5deg);
  background:var(--carton); color:#33240F; font-family:var(--f-hand); font-weight:700;
  font-size:18px; line-height:1; padding:8px 15px 9px 22px; border-radius:2px;
  clip-path:polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
  box-shadow:0 6px 14px -8px rgba(58,32,74,.55);}
.eticheta::before{content:''; position:absolute; left:12px; top:50%; width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:var(--crem); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25);}
.eticheta::after{content:''; position:absolute; left:8px; top:-9px; width:16px; height:16px;
  border:1.5px solid var(--sfoara); border-radius:50%; border-bottom-color:transparent; transform:rotate(28deg);}

.cutie-corp{padding:15px 4px 0; flex:1; display:flex; flex-direction:column; gap:7px;}
.cutie-nume{font-family:var(--f-display); font-size:20px; font-weight:500; line-height:1.22;}
.cutie-desc{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
.cutie-nota{margin-top:auto; padding-top:11px; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; color:var(--mov); display:flex; align-items:center; gap:7px;}
.cutie-nota .inima{width:11px; height:11px;}

/* ============================================================
   BUTOANE
   ============================================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 27px;
  border-radius:999px; font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1;
  transition:transform .22s, box-shadow .28s, background .28s, color .28s; text-align:center;}
.btn svg{width:18px; height:18px; flex:none;}
.btn-mov{background:var(--mov); color:#fff; box-shadow:0 14px 30px -14px rgba(90,15,162,.75);}
.btn-mov:hover{background:var(--mov-deep); transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(90,15,162,.85);}
.btn-wa{background:#1FA855; color:#fff; box-shadow:0 14px 30px -14px rgba(31,168,85,.7);}
.btn-wa:hover{background:#178943; transform:translateY(-2px);}
.btn-gol{border:1.5px solid var(--linie); color:var(--ink);}
.btn-gol:hover{border-color:var(--mov); color:var(--mov); transform:translateY(-2px);}
.btn-alb{background:#fff; color:var(--mov-deep);}
.btn-alb:hover{transform:translateY(-2px); box-shadow:0 18px 38px -16px rgba(0,0,0,.5);}
.btn-mic{padding:11px 19px; font-size:13.5px;}

/* ============================================================
   SUPRATITLU
   ============================================================ */
/* inima stă lipită de PRIMUL rând, nu centrată pe blocul de text — altfel,
   când supratitlul se rupe pe două rânduri (ecran îngust), plutește la mijloc */
.supra{display:inline-flex; align-items:flex-start; gap:9px; font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mov); margin-bottom:16px;}
.supra .inima{margin-top:.24em;}
.supra .inima{width:12px; height:12px;}
.supra.pe-inchis{color:var(--lila);}

.scris{font-family:var(--f-hand); font-size:clamp(21px,2.4vw,27px); color:var(--mov); line-height:1.4;}

/* ============================================================
   ÎNCĂRCĂTOR
   ============================================================ */
#incarcator{position:fixed; inset:0; z-index:200; background:var(--crem); display:grid; place-items:center;
  transition:opacity .5s ease, visibility .5s;}
#incarcator.is-ascuns{opacity:0; visibility:hidden;}
#incarcator .inima{width:38px; height:38px; color:var(--mov); animation:puls 1.15s ease-in-out infinite;}
@keyframes puls{0%,100%{transform:scale(1); opacity:.55;} 50%{transform:scale(1.16); opacity:1;}}

/* ============================================================
   ANTET
   ============================================================ */
.bara-sus{background:var(--mov-deep); color:#EBDCF0; font-size:12.5px; letter-spacing:.02em;}
.bara-sus .container{display:flex; align-items:flex-start; justify-content:center; gap:12px; padding-top:9px; padding-bottom:9px; text-align:center;}
.bara-sus .inima{margin-top:.42em;}
.bara-sus .inima{width:11px; height:11px; color:var(--lila);}
.bara-sus b{font-weight:600; color:#fff;}

#antet{position:sticky; top:0; z-index:90; background:rgba(251,247,246,.86); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s;}
#antet.is-scrolled{border-bottom-color:var(--linie-soft); box-shadow:0 10px 30px -22px rgba(58,32,74,.5);}
.antet-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:15px;}

/* semnătura scrisă: reproducerea siglei noastre, cu inima în locul lui „o" */
.sigla{display:inline-flex; flex-direction:column; line-height:1; font-family:var(--f-mark); color:var(--mov);}
.sigla-rand{display:inline-flex; align-items:center; font-weight:700; font-size:24px; letter-spacing:.005em;}
.sigla-rand .inima{width:.72em; height:.72em; margin:0 .02em; transform:translateY(.06em);}
.sigla-sub{font-size:13.5px; font-weight:600; letter-spacing:.02em; margin-top:4px; padding-left:2px; color:var(--mov-mid);}
.sigla-sub .inima{width:.6em; height:.6em; vertical-align:.02em; margin-right:.1em;}

.nav-mare{display:flex; align-items:center; gap:30px;}
.nav-mare a{font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; padding:5px 0;}
.nav-mare a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--mov);
  transition:right .34s cubic-bezier(.2,.8,.2,1);}
.nav-mare a:hover,.nav-mare a[aria-current="page"]{color:var(--mov);}
.nav-mare a:hover::after,.nav-mare a[aria-current="page"]::after{right:0;}
.antet-actiuni{display:flex; align-items:center; gap:12px;}

#burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--linie);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;}
#burger span{display:block; width:19px; height:1.7px; background:var(--ink); transition:transform .3s, opacity .3s;}
#burger.is-open span:nth-child(1){transform:translateY(6.7px) rotate(45deg);}
#burger.is-open span:nth-child(2){opacity:0;}
#burger.is-open span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg);}

#navMobil{position:fixed; inset:0; z-index:95; background:var(--crem); padding:100px 30px 40px;
  display:flex; flex-direction:column; gap:6px; transform:translateY(-100%); visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), visibility .45s;}
#navMobil.is-open{transform:none; visibility:visible;}
#navMobil a{font-family:var(--f-display); font-size:27px; padding:13px 0; border-bottom:1px solid var(--linie-soft);}
#navMobil .btn{margin-top:22px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; background-image:var(--wash);}
.hero::after{content:''; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to bottom, transparent, var(--crem)); pointer-events:none;}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,64px);
  align-items:center; padding-block:clamp(46px,7vw,86px) clamp(62px,8vw,104px);}
.hero-in>*{min-width:0;}
.hero h1{font-size:clamp(37px,5.6vw,66px); font-weight:400; margin:0 0 20px;}
.hero-lead{font-size:clamp(16.5px,1.7vw,19px); color:var(--ink-soft); max-width:34em; margin-bottom:15px;}
.hero-scris{margin-bottom:28px;}
.hero-btn{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:26px;}
.hero-fapte{display:flex; flex-wrap:wrap; gap:11px 26px; font-size:13.5px; color:var(--ink-soft);}
.hero-fapte li{display:flex; align-items:center; gap:8px;}
.hero-fapte .inima{width:11px; height:11px; color:var(--mov-soft);}

.hero-art{position:relative;}
.hero-poza{position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--umbra-l); aspect-ratio:4/5;
  background:var(--lila-pal);}
.hero-poza img{width:100%; height:100%; object-fit:cover;}
.hero-fisa{position:absolute; left:-26px; bottom:34px; width:min(238px,64%); background:var(--hartie);
  border-radius:14px; padding:16px 18px; box-shadow:var(--umbra-m); border:1px solid var(--linie-soft);}
.hero-fisa .eticheta{top:-12px; right:14px; font-size:15.5px; padding:6px 13px 7px 20px;}
.hero-fisa strong{display:block; font-family:var(--f-display); font-size:17px; font-weight:500; margin-bottom:3px;}
.hero-fisa span{font-size:13px; color:var(--ink-soft); line-height:1.5; display:block;}

/* ============================================================
   SECȚIUNI
   ============================================================ */
.sect{padding:clamp(56px,8vw,104px) 0;}
.sect-alb{background:var(--hartie);}
.sect-lila{background:var(--lila-pal);}
.cap{max-width:660px; margin-bottom:clamp(32px,4.5vw,52px);}
.cap.centrat{margin-left:auto; margin-right:auto; text-align:center;}
.cap.centrat .supra{justify-content:center;}
.cap h2{font-size:clamp(28px,4vw,45px); font-weight:400; margin-bottom:15px;}
.cap p{color:var(--ink-soft); font-size:16.5px;}
.cap.cap-rand{max-width:none;}
.cap-rand{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap;}

/* trei piloni */
.piloni{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px);}
.pilon{background:var(--hartie); border:1px solid var(--linie-soft); border-radius:var(--rad); padding:30px 26px 28px;
  box-shadow:var(--umbra-s); position:relative; overflow:hidden;}
.pilon::before{content:''; position:absolute; top:0; left:0; right:0; height:5px; background-image:var(--wash);}
.pilon-nr{font-family:var(--f-display); font-size:14px; color:var(--mov-soft); letter-spacing:.16em; margin-bottom:14px;}
.pilon h3{font-size:22px; font-weight:500; margin-bottom:9px;}
.pilon p{font-size:14.8px; color:var(--ink-soft);}

/* grile de cutii */
.grila{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:clamp(24px,3vw,34px) clamp(18px,2.4vw,26px);}
.grila-3{grid-template-columns:repeat(3,1fr);}

/* ============================================================
   PANOU ÎNCHIS — povestea
   ============================================================ */
.panou{background:var(--mov-deep); color:#F0E6F5; position:relative; overflow:hidden;}
.panou::before{content:''; position:absolute; top:-30%; right:-14%; width:60vw; height:60vw; border-radius:50%;
  background:radial-gradient(circle, rgba(185,143,214,.24), transparent 66%); pointer-events:none;}
.panou h2,.panou h3{color:#fff;}
.panou h1 em,.panou h2 em,.panou h3 em,.cta h2 em{color:var(--mov-soft);}
.panou p{color:#DCC9E6;}
.panou-in{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center;}
.panou-in>*{min-width:0;}
.panou-poza{border-radius:20px; overflow:hidden; box-shadow:var(--umbra-l); aspect-ratio:4/5;}
.panou-poza img{width:100%; height:100%; object-fit:cover;}
.citat{border-left:2px solid var(--mov-soft); padding-left:20px; margin:26px 0 8px;}
.citat p{font-family:var(--f-display); font-style:italic; font-size:clamp(18px,2.1vw,22px); color:#fff; line-height:1.45;}
.citat cite{display:block; margin-top:11px; font-style:normal; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mov-soft);}

/* ============================================================
   PANOUL CUTIEI — cum ajunge la tine
   ============================================================ */
.cutie-panou{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,62px); align-items:center;}
.cutie-panou>*{min-width:0;}
.cutie-poza{border-radius:20px; overflow:hidden; box-shadow:var(--umbra-m); aspect-ratio:3/2;}
.cutie-poza img{width:100%; height:100%; object-fit:cover;}
.pasi{counter-reset:pas; display:flex; flex-direction:column; gap:20px; margin-top:8px;}
.pas{display:flex; gap:16px; align-items:flex-start;}
.pas-nr{flex:none; width:38px; height:38px; border-radius:50%; background:var(--lila-pal); color:var(--mov);
  display:grid; place-items:center; font-family:var(--f-display); font-size:16px; font-weight:600;}
.pas h4{font-size:17.5px; font-weight:500; margin-bottom:3px;}
.pas p{font-size:14.8px; color:var(--ink-soft);}

/* ============================================================
   MOZAIC DE EVENIMENTE
   ============================================================ */
.mozaic{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(112px,15vw,168px); gap:12px;}
.mozaic figure{position:relative; overflow:hidden; border-radius:14px; background:var(--lila-pal); cursor:zoom-in;}
.mozaic img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.mozaic figure:hover img{transform:scale(1.06);}
.mozaic .m-mare{grid-column:span 2; grid-row:span 2;}
.mozaic .m-lat{grid-column:span 2;}
.mozaic figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 15px 12px; color:#fff; font-size:12.5px;
  background:linear-gradient(to top, rgba(28,10,44,.72), transparent); opacity:0; transition:opacity .3s;}
.mozaic figure:hover figcaption{opacity:1;}

/* ============================================================
   RECENZII
   ============================================================ */
.recenzii{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(16px,2.4vw,24px);}
.recenzie{background:var(--hartie); border:1px solid var(--linie-soft); border-radius:var(--rad); padding:28px 26px;
  box-shadow:var(--umbra-s); position:relative;}
.recenzie .inima{width:16px; height:16px; color:var(--lila); margin-bottom:12px;}
.recenzie p{font-size:15.5px; color:var(--ink-soft); line-height:1.66;}
.recenzie footer{margin-top:15px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mov);}

/* ============================================================
   FILTRE DE CATALOG
   ============================================================ */
.filtre{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(26px,3.4vw,38px);}
.filtru{padding:9px 18px; border-radius:999px; border:1.5px solid var(--linie); font-size:13.5px; font-weight:500;
  color:var(--ink-soft); transition:all .26s;}
.filtru:hover{border-color:var(--mov-soft); color:var(--mov);}
.filtru.is-activ{background:var(--mov); border-color:var(--mov); color:#fff;}
.gol-mesaj{padding:40px 0; text-align:center; color:var(--ink-mute);}

/* ============================================================
   FORMULAR — scris de mână, pleacă pe WhatsApp
   ============================================================ */
.formular{background:var(--hartie); border:1px solid var(--linie-soft); border-radius:var(--rad);
  box-shadow:var(--umbra-m); overflow:hidden; max-width:860px; margin:0 auto;}
.formular-cap{background-image:var(--wash); padding:clamp(26px,3.6vw,38px) clamp(22px,3.4vw,40px) clamp(22px,3vw,30px);
  border-bottom:1px solid var(--linie-soft);}
.formular-cap h2{font-size:clamp(25px,3.2vw,35px); font-weight:400; margin-bottom:9px;}
.formular-cap p{color:var(--ink-soft); font-size:15.5px;}
.formular-corp{padding:clamp(24px,3.4vw,38px) clamp(22px,3.4vw,40px) clamp(26px,3.6vw,40px);}
.camp{margin-bottom:22px;}
.camp>label,.legenda{display:block; font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mov); margin-bottom:10px;}
.camp .ajutor{font-size:13.5px; color:var(--ink-mute); margin:-4px 0 10px;}
input[type="text"],input[type="tel"],input[type="date"],input[type="email"],textarea,select{
  width:100%; padding:13px 15px; border:1.5px solid var(--linie); border-radius:11px; background:var(--crem);
  font:inherit; font-size:15px; color:var(--ink); transition:border-color .24s, background .24s;}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--mov); background:#fff;}
textarea{resize:vertical; min-height:104px; line-height:1.6;}
.camp-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.camp-2>*{min-width:0;}

.bife{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:9px;}
.bifa{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid var(--linie);
  border-radius:11px; cursor:pointer; font-size:14.5px; transition:all .22s; background:var(--crem);}
.bifa:hover{border-color:var(--mov-soft);}
.bifa input{accent-color:var(--mov); width:17px; height:17px; flex:none;}
.bifa.is-bifat{border-color:var(--mov); background:#fff; color:var(--mov); font-weight:500;}

.formular-jos{display:flex; flex-wrap:wrap; align-items:center; gap:15px; margin-top:8px;}
.formular-jos .marunt{font-size:13px; color:var(--ink-mute); flex:1; min-width:200px;}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--mov-deep); color:#fff; text-align:center; position:relative; overflow:hidden;}
.cta::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(185,143,214,.28), transparent 62%);}
.cta-in{position:relative; z-index:2; max-width:640px; margin:0 auto;}
.cta h2{color:#fff; font-size:clamp(28px,4vw,45px); font-weight:400; margin-bottom:15px;}
.cta p{color:#DCC9E6; margin-bottom:28px; font-size:16.5px;}
.cta-btn{display:flex; flex-wrap:wrap; gap:13px; justify-content:center;}

/* ============================================================
   SUBSOL
   ============================================================ */
.subsol{background:var(--crem); border-top:1px solid var(--linie-soft); padding:clamp(44px,6vw,66px) 0 28px;}
.subsol-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(26px,4vw,52px); margin-bottom:36px;}
.subsol-in>*{min-width:0;}
.subsol p{font-size:14.5px; color:var(--ink-soft); margin-top:16px; max-width:36ch;}
.subsol h4{font-size:12.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--mov); margin-bottom:15px;
  font-family:var(--f-body);}
.subsol li{margin-bottom:9px; font-size:14.5px; color:var(--ink-soft);}
.subsol li a:hover{color:var(--mov);}
.subsol-jos{border-top:1px solid var(--linie-soft); padding-top:22px; display:flex; flex-wrap:wrap; gap:12px;
  justify-content:space-between; font-size:12.5px; color:var(--ink-mute);}

/* ============================================================
   LIGHTBOX + TOAST
   ============================================================ */
#lightbox{position:fixed; inset:0; z-index:150; background:rgba(24,8,38,.9); display:none; place-items:center; padding:5vw;
  backdrop-filter:blur(5px);}
#lightbox.is-open{display:grid;}
#lightbox figure{max-width:min(1000px,92vw); text-align:center;}
#lightbox img{max-height:80vh; width:auto; margin:0 auto; border-radius:12px;}
#lightbox figcaption{color:#EBDCF0; margin-top:15px; font-size:14px;}
#lightbox button{position:absolute; top:22px; right:22px; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1;}
.toast{position:fixed; left:50%; bottom:28px; z-index:180; transform:translate(-50%,140%); background:var(--mov-deep);
  color:#fff; padding:14px 24px; border-radius:999px; font-size:14.5px; box-shadow:var(--umbra-m);
  transition:transform .45s cubic-bezier(.2,.8,.2,1); max-width:min(520px,92vw); text-align:center;}
.toast.is-sus{transform:translate(-50%,0);}

/* ============================================================
   404
   ============================================================ */
.p404{min-height:64vh; display:grid; place-items:center; text-align:center; padding-block:70px;}
.p404 .inima{width:52px; height:52px; color:var(--lila); margin:0 auto 22px;}
.p404 h1{font-size:clamp(34px,5.4vw,58px); font-weight:400; margin-bottom:14px;}
.p404 p{color:var(--ink-soft); margin-bottom:28px;}

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width:1000px){
  .hero-in,.panou-in,.cutie-panou{grid-template-columns:1fr;}
  .hero-art{order:-1; max-width:460px; margin:0 auto;}
  .hero-poza{aspect-ratio:3/2;}
  .hero-fisa{left:auto; right:14px; bottom:-22px; width:min(230px,72%);}
  .panou-poza{max-width:460px; margin:0 auto; aspect-ratio:3/2;}
  .piloni,.grila-3{grid-template-columns:1fr 1fr;}
  .subsol-in{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav-mare{display:none;}
  #burger{display:flex;}
  .antet-actiuni .btn-desktop{display:none;}
  .piloni,.grila-3{grid-template-columns:1fr;}
  .grila{grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:26px 14px;}
  .mozaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(120px,32vw,170px);}
  .mozaic .m-mare{grid-column:span 2; grid-row:span 1;}
  .camp-2{grid-template-columns:1fr;}
  .subsol-in{grid-template-columns:1fr;}
  /* ---- HERO PE TELEFON ----
     Poza sus de tot, imediat sub antet, iar din text rămâne doar ce vinde:
     supratitlul, titlul, o singură frază, butoanele și cele trei fapte.
     Citatul scris de mână și fișa flotantă de produs repetau promisiunea,
     deci nu apar pe ecran mic. */
  .hero-in{padding-block:16px 44px; gap:24px;}
  .hero-art{order:-1; margin:0;}
  .hero-poza{aspect-ratio:5/4; border-radius:16px;}
  .hero-fisa{display:none;}
  .hero-scris{display:none;}
  .doar-lat{display:none;}
  /* la 42px, descendentele italice din Fraunces (f, p) ating rândul următor
     dacă leading-ul rămâne 1.1 — vezi „Un decor dulce, făcut pentru ziua ta" */
  .hero h1{font-size:clamp(33px,8.6vw,42px); line-height:1.16; margin-bottom:14px;}
  .cap h2,.panou h2,.cta h2{line-height:1.2;}
  .hero-lead{font-size:16.5px; margin-bottom:22px;}
  .hero-btn{margin-bottom:20px;}
  .hero-btn .btn{flex:1 1 auto; min-width:min(100%,240px);}
  .hero-fapte{gap:9px 20px; font-size:13px;}
  .bara-sus{font-size:12px;}
  .bara-sus .container{gap:8px;}
}
@media (max-width:420px){
  .grila{grid-template-columns:1fr; gap:26px;}
  .sigla-rand{font-size:21px;}
  .sigla-sub{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
}