/* ═══════════════════════════════════════════════════════════════════
   Cutia Zelora — one-pager mobil-first (375 px baseline)
   Brand: cald, crem + accente aurii, contrast mare pe CTA.
   Fara librarii externe. Fara @import. Fara font extern (system stack).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --cream:#FBF7F1;
  --cream-2:#F4EDE2;
  --paper:#FFFFFF;
  --ink:#12080C;
  --ink-2:#241419;
  --ink-soft:#6B575E;
  --gold:#C9A227;
  --gold-lt:#E8CE86;
  --gold-hi:#F6E6B8;
  --gold-dp:#8A6D1E;
  --red:#D02B2B;
  --green:#177A46;
  --line:#E7DCCB;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 10px 30px rgba(18,8,12,.12);
  --shadow-cta:0 8px 0 0 var(--gold-dp), 0 16px 28px rgba(138,109,30,.32);
  --wrap:520px;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* bate display:flex de pe .sticky-bar */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff);
  background:
    radial-gradient(1200px 420px at 50% -180px, #FFF6E3 0%, rgba(255,246,227,0) 70%),
    var(--cream);
  color:var(--ink);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:var(--gold-dp)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px}

/* ── topbar ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;padding:12px 18px 4px;
}
.brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink)}
.brand-mark{color:var(--gold);font-size:15px}
.brand-name{font-weight:800;letter-spacing:.22em;font-size:13px}
.sound-toggle{
  display:flex;align-items:center;gap:6px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;
}
.sound-toggle[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-dp);background:#FFF9EA}

/* ── views ── */
.view{display:none;animation:fadeUp .35s ease both}
.view.is-active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── ecran 1 ── */
.eyebrow{
  text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dp);font-weight:700;margin:10px 0 2px;
}
.box-stage{position:relative;height:186px;display:grid;place-items:center;margin:2px 0 2px}
.box-glow{
  position:absolute;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.30) 0%,rgba(201,162,39,0) 68%);
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.box-svg{width:216px;height:184px;position:relative;filter:drop-shadow(0 10px 18px rgba(18,8,12,.22))}
.box-shadow{fill:rgba(18,8,12,.13);animation:shdw 3.4s ease-in-out infinite}
@keyframes shdw{0%,100%{transform:scaleX(.92);opacity:.5}50%{transform:scaleX(1.04);opacity:.8}}
.box-lid{transform-origin:100px 78px;animation:lidNudge 3.4s ease-in-out infinite}
@keyframes lidNudge{0%,100%{transform:translateY(0) rotate(0)}48%{transform:translateY(-7px) rotate(-2.2deg)}}
.box-sparks circle{fill:var(--gold-lt);animation:spark 2.6s ease-in-out infinite}
.box-sparks circle:nth-child(2){animation-delay:.4s}
.box-sparks circle:nth-child(3){animation-delay:.9s}
.box-sparks circle:nth-child(4){animation-delay:1.4s}
.box-sparks circle:nth-child(5){animation-delay:1.9s}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}}

.h1{
  text-align:center;font-size:37px;line-height:1.06;letter-spacing:-.02em;
  margin:6px 0 8px;font-weight:850;
}
.h1-sm{font-size:28px}
.h1-price{
  background:linear-gradient(100deg,var(--gold-dp),var(--gold) 40%,#F0D793 70%,var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{text-align:center;font-size:16.5px;color:var(--ink-soft);margin:0 0 10px}
.anchor{
  text-align:center;font-size:14px;margin:0 auto 14px;color:var(--ink);
  background:#FFF6E0;border:1px dashed var(--gold);border-radius:999px;
  padding:6px 14px;width:max-content;max-width:100%;
}
.pills{list-style:none;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0;margin:0 0 18px}
.pill{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--ink);
  box-shadow:0 2px 6px rgba(18,8,12,.05);
}

.chooser{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px 14px;box-shadow:var(--shadow);margin-bottom:16px}
.field{border:0;padding:0;margin:0 0 16px}
.field:last-child{margin-bottom:0}
.legend{font-size:14px;font-weight:800;padding:0;margin-bottom:9px;display:block}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg{position:relative}
.seg input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{
  display:block;text-align:center;padding:12px 6px;border-radius:var(--radius-sm);
  border:2px solid var(--line);background:var(--cream);font-weight:700;font-size:14.5px;
  transition:.15s;
}
.seg input:checked + span{border-color:var(--gold);background:linear-gradient(180deg,#FFF7E4,#FBEFD2);box-shadow:0 3px 0 var(--gold-dp)}
.seg input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}

.sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.size{position:relative}
.size input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.size span{
  display:block;text-align:center;padding:11px 2px;border-radius:10px;
  border:2px solid var(--line);background:var(--cream);font-weight:700;font-size:15px;transition:.15s;
}
.size.size-wide{grid-column:span 5}
.size.size-wide span{font-size:14px;padding:11px 8px}
.size input:checked + span{border-color:var(--gold);background:linear-gradient(180deg,#FFF7E4,#FBEFD2);box-shadow:0 3px 0 var(--gold-dp)}
.size input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}
.hint{font-size:12.5px;color:var(--ink-soft);margin:9px 0 0}

/* ── CTA ── */
.cta{
  position:relative;overflow:hidden;display:block;width:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold-lt) 38%,var(--gold) 100%);
  color:var(--ink);font-weight:900;letter-spacing:.02em;
  border-radius:14px;box-shadow:var(--shadow-cta);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta:active{transform:translateY(5px);box-shadow:0 3px 0 0 var(--gold-dp),0 8px 16px rgba(138,109,30,.28)}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cta-xl{font-size:19px;padding:19px 14px;margin:4px 0 8px}
.cta-sm{font-size:14px;padding:13px 18px;width:auto;border-radius:12px;box-shadow:0 4px 0 0 var(--gold-dp)}
.cta[disabled]{filter:grayscale(.55);opacity:.6;cursor:not-allowed;box-shadow:0 4px 0 0 #B9AE95}
.cta-text{position:relative;z-index:2}
.cta-sheen{
  position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);animation:sheen 3.2s ease-in-out infinite;
}
@keyframes sheen{0%{left:-60%}55%{left:130%}100%{left:130%}}
.cta-wa{
  background:linear-gradient(180deg,#37D46A,#1FA855);color:#06301A;
  box-shadow:0 6px 0 0 #14713A,0 12px 22px rgba(31,168,85,.3);
  text-decoration:none;text-align:center;padding:16px;font-size:17px;font-weight:900;
  border-radius:14px;display:block;margin:14px 0 22px;
}
.micro{font-size:12.5px;color:var(--ink-soft);text-align:center;margin:6px 0 22px}
.linkbtn{background:none;border:0;padding:4px 2px;text-decoration:underline;color:var(--gold-dp);font-weight:700;font-size:14px;cursor:pointer}

/* ── reveal ── */
.reveal-stage{
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);
  padding:18px 0 24px;margin-bottom:18px;
  border-bottom:3px solid var(--gold);
}
.h2{font-size:20px;font-weight:850;letter-spacing:-.01em;margin:0 0 12px}
.reveal-title{color:var(--gold-hi);text-align:center;font-size:17px;letter-spacing:.01em;min-height:24px}

.reels{display:grid;grid-template-columns:repeat(12,1fr);gap:7px}
.reel{
  grid-column:span 3;position:relative;border-radius:10px;overflow:hidden;
  background:#1B0F14;border:1px solid rgba(201,162,39,.35);
  box-shadow:inset 0 8px 14px rgba(0,0,0,.55),inset 0 -8px 14px rgba(0,0,0,.55);
}
.reel:nth-child(n+5){grid-column:span 4}
.reel-strip{position:absolute;left:0;top:0;width:100%;will-change:transform}
.reel-tile{width:100%;background:#241419;display:grid;place-items:center;overflow:hidden}
.reel-tile img{width:100%;height:100%;object-fit:cover}
.reel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 72%,rgba(0,0,0,.55));
  opacity:1;transition:opacity .3s;
}
.reel.is-stopped::after{opacity:0}
.reel.is-blur .reel-strip{filter:blur(1.1px)}
.reel.is-stopped{border-color:var(--gold);animation:pop .34s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}

.reel-meta{
  position:absolute;left:0;right:0;bottom:0;padding:5px 5px 6px;
  background:linear-gradient(180deg,rgba(18,8,12,0),rgba(18,8,12,.94) 42%);
  opacity:0;transform:translateY(8px);transition:.28s ease;
}
.reel.is-stopped .reel-meta{opacity:1;transform:none}
.reel-price{
  position:relative;display:inline-block;color:#FF7A7A;font-weight:800;font-size:12px;line-height:1.1;
}
.reel-price::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;border-radius:2px;
}
.reel.is-stopped .reel-price::after{animation:strike .42s .16s ease forwards}
@keyframes strike{to{transform:scaleX(1)}}
.reel-inc{display:block;color:var(--gold-hi);font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.reel-title{display:none}

/* ── panou vanzare ── */
.sale-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px;box-shadow:var(--shadow);margin-bottom:18px;
  animation:slideUp .45s cubic-bezier(.18,.9,.3,1.1) both;
}
@keyframes slideUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.sale-value{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:2px}
.sv-label{font-size:13px;color:var(--ink-soft)}
.sv-old s{color:var(--red);font-size:19px;font-weight:800;text-decoration-thickness:2.5px}
.sv-arrow{color:var(--gold-dp);font-weight:800}
.sv-new{font-size:30px;font-weight:900;letter-spacing:-.02em}
.sale-save{text-align:center;margin:4px 0 14px;font-size:15px}
.sale-save b{color:var(--green);font-size:18px}

.ladder{display:grid;gap:8px;margin-bottom:14px}
.ladder-row{
  display:flex;align-items:center;gap:10px;padding:12px 12px;border:2px solid var(--line);
  border-radius:var(--radius-sm);background:var(--cream);cursor:pointer;position:relative;
}
.ladder-row input{accent-color:var(--gold-dp);width:20px;height:20px;flex:0 0 auto;margin:0}
.lr-box{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.lr-box b{font-size:15.5px}
.lr-box small{font-size:12px;color:var(--ink-soft)}
.lr-price{font-weight:900;font-size:17px;white-space:nowrap}
.ladder-row:has(input:checked){border-color:var(--gold);background:linear-gradient(180deg,#FFF7E4,#FBEFD2)}
.tag-best{
  position:absolute;top:-9px;right:10px;background:var(--green);color:#fff;font-style:normal;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;
}
.reserve{text-align:center;font-size:13.5px;color:var(--ink-soft);margin:2px 0 2px}
.reserve b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:16px;font-weight:900}
.reserve.is-warm b{color:var(--red)}
.respin{text-align:center;margin:6px 0 2px}

/* ── formular ── */
.order-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px 18px;box-shadow:var(--shadow);margin-bottom:24px;
}
.form-lead{font-size:13.5px;color:var(--ink-soft);margin:-6px 0 14px}
.f-row{margin-bottom:13px;border:0;padding:0}
.lbl{display:block;font-size:13.5px;font-weight:800;margin-bottom:5px}
.inp{
  width:100%;padding:14px 12px;border:2px solid var(--line);border-radius:var(--radius-sm);
  background:var(--cream);font-size:16px;color:var(--ink);
}
.inp:focus{outline:0;border-color:var(--gold);background:var(--paper);box-shadow:0 0 0 3px rgba(201,162,39,.20)}
.inp.is-bad{border-color:var(--red);background:#FFF4F4}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.err{color:var(--red);font-size:12.5px;font-weight:700;margin:5px 0 0}
.form-err{text-align:center;margin-top:10px}

.pay{margin-bottom:12px}
.pay-row{display:flex;align-items:center;gap:10px;padding:12px;border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--cream);margin-bottom:8px;cursor:pointer}
.pay-row input{accent-color:var(--gold-dp);width:20px;height:20px;margin:0;flex:0 0 auto}
.pr-box{display:flex;flex-direction:column;flex:1 1 auto}
.pr-box b{font-size:14.5px}
.pr-box small{font-size:12px;color:var(--ink-soft)}
.pr-badge{background:var(--green);color:#fff;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
.pay-row:has(input:checked){border-color:var(--gold);background:linear-gradient(180deg,#FFF7E4,#FBEFD2)}

.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-soft);margin:4px 0 14px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--gold-dp);margin:1px 0 0;flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.totals{border-top:1px dashed var(--line);padding-top:11px;margin:6px 0 12px;font-size:14px}
.t-line{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-soft)}
.t-line b{color:var(--ink);font-weight:700}
.t-line.t-sum{font-size:17px;color:var(--ink);font-weight:900;padding-top:8px;margin-top:5px;border-top:1px solid var(--line)}
.t-line.t-sum b{font-weight:900}

/* ── sticky ── */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,247,241,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(18,8,12,.10);
  animation:barUp .3s ease both;
}
@keyframes barUp{from{transform:translateY(100%)}to{transform:none}}
.sb-total{display:flex;flex-direction:column;line-height:1.15}
.sb-total span{font-size:11.5px;color:var(--ink-soft)}
.sb-total b{font-size:19px;font-weight:900}

/* ── thanks ── */
.thanks-check{
  width:66px;height:66px;border-radius:50%;margin:18px auto 10px;display:grid;place-items:center;
  background:linear-gradient(180deg,#37D46A,#1FA855);color:#fff;font-size:34px;font-weight:900;
  box-shadow:0 10px 24px rgba(31,168,85,.34);animation:pop .5s ease;
}
.thanks-lead{text-align:center;color:var(--ink-soft);font-size:15px;margin:0 0 6px}
.thanks-items{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.ti{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ti img{width:100%;aspect-ratio:1;object-fit:cover}
.ti span{display:block;font-size:10.5px;padding:4px 5px 6px;color:var(--ink-soft);text-align:center}

/* ── legal ── */
.legal{background:var(--ink);color:#D9CEC6;padding:26px 0 34px;margin-top:10px}
.legal .wrap{max-width:var(--wrap)}
.legal-h{font-size:15px;color:var(--gold-hi);margin:0 0 12px;letter-spacing:.02em}
.acc{border-bottom:1px solid rgba(255,255,255,.10);padding:9px 0}
.acc summary{cursor:pointer;font-weight:700;font-size:14.5px;color:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center}
.acc summary::after{content:"+";color:var(--gold);font-weight:900;font-size:19px;margin-left:10px}
.acc[open] summary::after{content:"–"}
.acc summary::-webkit-details-marker{display:none}
.acc p{font-size:13px;line-height:1.6;color:#CFC3BA;margin:8px 0 4px}
.acc a{color:var(--gold-lt)}
.legal-links{display:flex;flex-wrap:wrap;gap:7px 14px;margin:16px 0 0;font-size:12.5px}
.legal-links a{color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(232,206,134,.35)}
.firm{font-size:12px;line-height:1.65;color:#B7AAA2;margin:18px 0 6px}
.copy{font-size:11.5px;color:#8A7B74;margin:0}

/* ── responsive ── */
@media (min-width:520px){
  .h1{font-size:44px}
  .reels{gap:9px}
  .thanks-items{grid-template-columns:repeat(7,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
}