/* ============================ Tokens ============================ */
:root{
  --paper:#F6F2E9;        /* hârtie caldă — fundalul paginii */
  --surface:#FFFDF8;      /* carduri */
  --pine:#16342B;         /* verde pin profund — secțiuni întunecate, titluri */
  --pine-soft:#1E4437;
  --moss:#2F6A57;         /* verde primar — butoane, linkuri */
  --moss-tint:#E4EEE8;
  --honey:#E3A21F;        /* accent cald — semnalul "liber / disponibil" */
  --honey-tint:#FBEFD3;
  --ink:#14201C;
  --muted:#6E8078;
  --line:#E2DCCE;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px;
  --shadow-sm:0 1px 2px rgba(22,52,43,.05), 0 4px 12px -6px rgba(22,52,43,.10);
  --shadow-md:0 2px 4px rgba(22,52,43,.05), 0 18px 36px -18px rgba(22,52,43,.22);
  --shadow-lg:0 30px 60px -28px rgba(22,52,43,.38);

  --display:'Fraunces', Georgia, serif;
  --body:'Public Sans', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --section:clamp(3.25rem, 6vw, 5.5rem);
  --ease:cubic-bezier(.22,.68,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}

/* Titlurile poartă personalitatea: Fraunces cu axele SOFT (colțuri moi) și
   WONK (terminații ușor asimetrice) — de asta nu citește ca un serif standard. */
h1,h2,h3,.display{
  font-family:var(--display); font-weight:600; line-height:1.08;
  letter-spacing:-.018em; margin:0;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 96;
}
h1{font-size:clamp(2.6rem,6.2vw,4.5rem)}
h2{font-size:clamp(2rem,4.2vw,3rem)}
h3{font-size:1.2rem; letter-spacing:-.01em}
p{margin:0}

/* Fața utilitară: orele, prețurile, etichetele — orarul trebuie să citească
   ca un orar, nu ca proză. */
.mono{font-family:var(--mono); font-feature-settings:'tnum' 1; letter-spacing:-.02em}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
}

.wrap{width:100%; max-width:1140px; margin-inline:auto; padding-inline:var(--gutter)}
.stack{display:flex; flex-direction:column}
.muted{color:var(--muted)}
.center{text-align:center}

/* ============================ Butoane ============================ */
.btn{
  --btn-bg:var(--moss); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:.95rem; text-decoration:none;
  padding:.85rem 1.6rem; border:1px solid transparent; border-radius:999px;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--line); box-shadow:none}
.btn--ghost:hover{border-color:var(--moss); background:var(--moss-tint)}
.btn--honey{--btn-bg:var(--honey); --btn-fg:var(--pine)}
.btn--paper{--btn-bg:var(--surface); --btn-fg:var(--pine)}
.btn--lg{padding:1.05rem 2.1rem; font-size:1.02rem}
.btn--block{display:flex; width:100%}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--honey); outline-offset:3px; border-radius:6px;
}

/* ============================ Antet ============================ */
.hdr{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.hdr.is-stuck{border-bottom-color:var(--line); box-shadow:0 6px 24px -20px rgba(22,52,43,.5)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:74px}
.logo{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--display);
  font-weight:700; font-size:1.32rem; letter-spacing:-.02em; font-variation-settings:'SOFT' 45,'WONK' 1}
.logo__mark{width:38px; height:38px; flex:0 0 38px; color:var(--moss)}
.logo__mark svg{width:100%; height:100%; display:block}
.nav{display:flex; align-items:center; gap:2rem}
.nav a{
  position:relative; text-decoration:none; font-size:.95rem; font-weight:500;
  color:var(--muted); transition:color .2s; padding-block:.35rem;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--honey); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}
.hdr__cta{display:flex; align-items:center; gap:.7rem}
.hdr__tel{text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap}
.hdr__tel span{color:var(--muted); font-weight:400}

/* Meniul de mobil: sub 900px navigarea principală dispărea complet și paginile
   rămâneau accesibile doar din subsol. */
.burger{
  display:none; width:2.7rem; height:2.7rem; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line); place-items:center;
}
.burger span{
  display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px;
  position:relative; transition:transform .3s var(--ease), background .2s;
}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:17px; height:1.8px; background:var(--ink);
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s;
}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mnav{
  display:none; border-top:1px solid transparent;
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  overflow:hidden; max-height:0; transition:max-height .38s var(--ease), border-color .2s;
}
/* Bordura apare doar deschis — altfel rămâne o linie orfană sub antet. */
.mnav.is-open{max-height:24rem; border-top-color:var(--line)}
.mnav ul{list-style:none; margin:0; padding:.6rem var(--gutter) 1.2rem; display:grid; gap:.1rem}
.mnav a{
  display:block; padding:.85rem .2rem; text-decoration:none; font-weight:600; font-size:1.05rem;
  border-bottom:1px solid var(--line);
}
.mnav a[aria-current="page"]{color:var(--moss)}
.mnav__tel{
  display:flex; align-items:center; gap:.6rem; margin-top:1rem;
  font-family:var(--mono); font-size:.95rem; color:var(--moss); text-decoration:none; font-weight:700;
}
@media (max-width:900px){
  .nav,.hdr__tel{display:none}
  .burger{display:grid}
  .mnav{display:block}
}

/* ============================ Erou ============================ */
.hero{position:relative; padding-block:clamp(3rem,7vw,5.5rem) var(--section); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media (max-width:940px){ .hero__grid{grid-template-columns:1fr} }

/* Pastila de disponibilitate live — trage ora reală din baza de date.
   E prima dovadă că pagina nu e o broșură statică. */
.live{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--honey-tint); color:#7A5310; border:1px solid #EED9A8;
  padding:.5rem 1rem .5rem .8rem; border-radius:999px;
  font-size:.86rem; font-weight:600;
}
.live__dot{position:relative; width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--honey)}
.live__dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--honey); animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.9} 70%,100%{transform:scale(1.5);opacity:0}}
.live time{font-family:var(--mono); font-weight:700}

.hero h1{margin-top:1.4rem}
/* inline-block, nu inline: un element inline nu oferă o cutie de referință
   stabilă, iar sublinierea absolută se colapsa la câțiva pixeli. */
.hero h1 em{font-style:normal; color:var(--moss); position:relative;
  white-space:nowrap; display:inline-block}
/* Sublinierea trasată de mână sub cuvântul-cheie */
.hero h1 em svg{
  position:absolute; left:0; bottom:-.1em; width:100%; height:.26em;
  overflow:visible; color:var(--honey);
}
.hero h1 em path{
  fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:300; stroke-dashoffset:300;
  animation:draw 1.1s var(--ease) .75s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__lead{margin-top:1.4rem; font-size:1.12rem; color:var(--muted); max-width:34rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}

.hero__stats{display:flex; gap:2.6rem; margin-top:3rem; flex-wrap:wrap}
.stat__n{font-family:var(--display); font-size:2.1rem; font-weight:700; line-height:1;
  font-variation-settings:'SOFT' 45,'WONK' 1}
.stat__l{font-size:.85rem; color:var(--muted); margin-top:.35rem}
@media (max-width:540px){
  /* Trei coloane strânse, ca a treia cifră să nu rămână singură pe un rând. */
  .hero__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
  .stat__n{font-size:1.65rem}
  .stat__l{font-size:.74rem}
  .hero__actions .btn{width:100%}
}

/* Compoziția foto: imagine principală + card flotant cu următorul loc liber */
.hero__art{position:relative}
.hero__photo{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:5/6; background:var(--moss-tint);
}
.hero__photo img{width:100%; height:100%; object-fit:cover}
.hero__badge{
  position:absolute; left:-1.5rem; bottom:2.2rem;
  background:var(--surface); border-radius:var(--r-lg); padding:1rem 1.2rem;
  box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.85rem; max-width:15rem;
}
.hero__badge svg{width:34px; height:34px; flex:0 0 34px; color:var(--moss)}
.hero__badge b{display:block; font-size:.95rem}
.hero__badge small{color:var(--muted); font-size:.8rem}
@media (max-width:940px){ .hero__badge{left:auto; right:1rem; bottom:-1.2rem} }

/* ============================ Traseul de lăbuțe ============================
   SEMNĂTURA paginii. Se desenează pe măsură ce derulezi și te conduce, literal,
   de la "de ce noi" până la butonul de programare. Un singur loc unde ne
   permitem îndrăzneală — restul rămâne disciplinat. */
.trail{position:relative; padding-block:var(--section) 0}
.trail__svg{display:block; width:100%; height:auto; overflow:visible}
.trail__path{
  fill:none; stroke:var(--line); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:6 14;
}
/* Lăbuțele sunt poziționate din JS prin ATRIBUTUL transform (translate+rotate
   pe tangenta traseului). Pe SVG, proprietatea CSS transform ar suprascrie acel
   atribut și le-ar arunca în colț — deci aici animăm strict opacitatea. */
.trail__paw{opacity:0; transition:opacity .5s var(--ease); fill:var(--moss)}
.trail__paw.on{opacity:.85}
.trail__cap{text-align:center; margin-top:-1rem}
@media (max-width:700px){ .trail{padding-top:4rem} .trail__svg{min-height:150px} }

/* ============================ Secțiuni & carduri ============================ */
.sec{padding-block:var(--section)}
.sec--tight{padding-block:calc(var(--section) * .55)}
.sec__head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.sec__head p{color:var(--muted); margin-top:.7rem; max-width:34rem}
.link{
  color:var(--moss); font-weight:600; font-size:.95rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
}
.link svg{width:16px; height:16px; transition:transform .22s var(--ease)}
.link:hover svg{transform:translateX(4px)}

.grid{display:grid; gap:1.1rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid--3,.grid--2{grid-template-columns:1fr} }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.6rem; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.card--hover:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent}

/* Cardul de serviciu: prețul e dată, deci e mono și aliniat la dreapta. */
.svc{display:flex; flex-direction:column; height:100%}
.svc__top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.svc__price{
  font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--moss);
  background:var(--moss-tint); padding:.3rem .7rem; border-radius:var(--r-sm); white-space:nowrap;
}
.svc__desc{margin-top:.7rem; font-size:.94rem; color:var(--muted); flex:1}
.svc__foot{
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.svc__dur{font-family:var(--mono); font-size:.82rem; color:var(--muted)}
.svc__go{
  font-size:.87rem; font-weight:600; color:var(--moss); text-decoration:none;
  opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s var(--ease);
}
.card--hover:hover .svc__go, .svc__go:focus-visible{opacity:1; transform:none}
@media (hover:none){ .svc__go{opacity:1; transform:none} }

/* Iconurile: SVG line desenate, nu emoji.
   Clasa .i dă dimensiunea implicită — fără ea, un SVG fără width/height se
   întinde necontrolat într-un container flex. */
.i{width:1.2em; height:1.2em; flex:0 0 auto}
.ico{width:30px; height:30px; color:var(--moss)}
.ico--honey{color:var(--honey)}
.btn .i{width:18px; height:18px}
.checks .i,.info__row .i{width:22px; height:22px}
.link .i{width:16px; height:16px; transition:transform .22s var(--ease)}
.week__nav .i{width:16px; height:16px}
.logo__mark .i{width:100%; height:100%}
.ftr__logo .i{width:34px; height:34px}
.hero__badge .i{width:34px; height:34px}

/* Sărituri la conținut — vizibilă doar la tastatură. */
.skip{position:absolute; left:-9999px; top:0; z-index:100}
.skip:focus{left:1rem; top:1rem; background:var(--surface); color:var(--ink);
  padding:.7rem 1.2rem; border-radius:var(--r-sm); box-shadow:var(--shadow-md)}

/* ============================ Bandă închisă ============================ */
.dark{background:var(--pine); color:#EAF0EC}
.dark h2,.dark h3{color:#fff}
.dark .eyebrow{color:#8FB09F}
.dark .muted{color:#A8BDB2}
.band{border-radius:var(--r-xl); padding:clamp(2.5rem,5vw,4.5rem); position:relative; overflow:hidden}
.band__glow{
  position:absolute; width:32rem; height:32rem; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(227,162,31,.16), transparent 68%);
  top:-14rem; right:-10rem;
}

/* Pașii "cum funcționează" — numerotarea e justificată: chiar E o secvență. */
.steps{counter-reset:s; display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); margin-top:3rem}
@media (max-width:800px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-left:3.6rem}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:-.15rem;
  font-family:var(--mono); font-size:.9rem; font-weight:700;
  color:var(--honey); border:1.5px solid rgba(227,162,31,.35);
  width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:50%;
}
.step h3{font-size:1.1rem}
.step p{margin-top:.5rem; font-size:.94rem; color:#A8BDB2}

/* ============================ Galerie & recenzii ============================ */
.mosaic{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.mosaic img{border-radius:var(--r-lg); object-fit:cover; width:100%; height:100%;
  transition:transform .5s var(--ease)}
.mosaic figure{margin:0; overflow:hidden; border-radius:var(--r-lg); height:13rem}
.mosaic figure:nth-child(2),.mosaic figure:nth-child(4){margin-top:2rem}
.mosaic figure:hover img{transform:scale(1.06)}
@media (max-width:620px){ .mosaic figure{height:9.5rem} }

.checks{list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:.95rem}
.checks li{display:flex; gap:.85rem; align-items:flex-start; color:var(--muted)}
.checks svg{width:22px; height:22px; flex:0 0 22px; color:var(--moss); margin-top:.1rem}

.quote{display:flex; flex-direction:column; height:100%}
.quote__stars{color:var(--honey); letter-spacing:.15em; font-size:.9rem}
.quote p{margin-top:.9rem; flex:1; font-size:1rem}
.quote__who{margin-top:1.2rem; display:flex; align-items:center; gap:.7rem; font-size:.9rem}
.quote__av{width:38px; height:38px; border-radius:50%; background:var(--moss-tint); color:var(--moss);
  display:grid; place-items:center; font-weight:700; font-family:var(--display)}
.quote__who b{display:block}
.quote__who small{color:var(--muted)}

/* ============================ Subsol ============================ */
.ftr{background:var(--pine); color:#A8BDB2; margin-top:0}
.ftr__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-block:4rem 3rem}
@media (max-width:860px){ .ftr__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .ftr__grid{grid-template-columns:1fr} }
.ftr h4{font-family:var(--body); font-size:.8rem; text-transform:uppercase; letter-spacing:.14em;
  color:#8FB09F; margin:0 0 1rem}
.ftr a{color:#D6E2DA; text-decoration:none; transition:color .2s}
.ftr a:hover{color:var(--honey)}
.ftr__list{list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.93rem}
.ftr__logo{color:#fff; font-family:var(--display); font-weight:700; font-size:1.3rem;
  display:inline-flex; align-items:center; gap:.6rem; font-variation-settings:'SOFT' 45,'WONK' 1}
.ftr__logo svg{width:34px; height:34px; color:var(--honey)}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.09); padding-block:1.4rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.83rem; color:#7E9689}
.ftr__open{font-family:var(--mono); font-size:.88rem}
.ftr__open span{color:var(--honey)}

/* ============================ Programare (wizard) ============================ */
.book{padding-block:clamp(2.5rem,5vw,4rem) var(--section)}
.book__shell{max-width:52rem; margin-inline:auto}

.prog{display:flex; align-items:center; gap:.5rem; margin-block:2.2rem 2.5rem}
.prog__item{display:flex; align-items:center; gap:.6rem; flex:0 0 auto}
.prog__n{
  width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:.8rem; font-weight:700;
  background:var(--surface); border:1.5px solid var(--line); color:var(--muted);
  transition:background .3s, color .3s, border-color .3s;
}
.prog__l{font-size:.88rem; font-weight:600; color:var(--muted); transition:color .3s}
.prog__bar{flex:1; height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.prog__bar::after{content:''; display:block; height:100%; width:0; background:var(--moss);
  transition:width .45s var(--ease)}
.prog__item.is-done .prog__n{background:var(--moss); border-color:var(--moss); color:#fff}
.prog__item.is-done .prog__l{color:var(--ink)}
.prog__item.is-active .prog__n{background:var(--honey); border-color:var(--honey); color:var(--pine)}
.prog__item.is-active .prog__l{color:var(--ink)}
.prog__bar.is-done::after{width:100%}
@media (max-width:640px){ .prog__l{display:none} }

.stepv{display:none}
.stepv.is-on{display:block; animation:stepIn .42s var(--ease)}
@keyframes stepIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.stepv__nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; align-items:center}

/* Alegerea serviciului — carduri selectabile, nu un <select> */
.pick{display:grid; gap:.7rem; grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){ .pick{grid-template-columns:1fr} }
.pick__opt{
  text-align:left; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-md); padding:1rem 1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:border-color .2s, background .2s, transform .2s var(--ease);
}
.pick__opt:hover{border-color:var(--moss); transform:translateY(-2px)}
.pick__opt.is-on{border-color:var(--moss); background:var(--moss-tint); border-width:2px}
.pick__opt b{display:block; font-size:.98rem}
.pick__opt small{color:var(--muted); font-family:var(--mono); font-size:.78rem}
.pick__price{font-family:var(--mono); font-weight:700; color:var(--moss); white-space:nowrap}

/* Banda de zile — înlocuiește <input type="date"> gol */
.week{display:flex; align-items:center; gap:.6rem; margin-bottom:1.4rem}
.week__nav{
  width:2.4rem; height:2.4rem; flex:0 0 2.4rem; border-radius:50%; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); display:grid; place-items:center;
  transition:border-color .2s, background .2s;
}
.week__nav:hover:not([disabled]){border-color:var(--moss); background:var(--moss-tint)}
.week__nav[disabled]{opacity:.35; cursor:not-allowed}
.week__nav svg{width:16px; height:16px}
.week__days{display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; flex:1}
.day{
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:.6rem .3rem .5rem; cursor:pointer; text-align:center; position:relative;
  transition:border-color .2s, background .2s, transform .2s var(--ease);
}
.day:hover:not([disabled]){border-color:var(--moss); transform:translateY(-2px)}
.day[disabled]{opacity:.4; cursor:not-allowed}
/* Cele trei rânduri ale unei zile se stivuiesc: abreviere, număr, ore libere. */
.day__d{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.day__n{display:block; font-family:var(--mono); font-size:1.3rem; font-weight:700; line-height:1.25}
.day__free{
  margin-top:.25rem; font-family:var(--mono); font-size:.62rem; color:var(--moss);
  background:var(--moss-tint); border-radius:99px; padding:.1rem .4rem; display:inline-block;
}
.day[disabled] .day__free{background:transparent; color:var(--muted)}
.day.is-on{border-color:var(--moss); border-width:2px; background:var(--moss-tint)}
.day.is-today .day__n{color:var(--honey)}

.slots__group{margin-bottom:1.3rem}
.slots__label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--muted); margin-bottom:.6rem}
.slots__row{display:flex; flex-wrap:wrap; gap:.5rem}
.slot{
  font-family:var(--mono); font-size:.92rem; font-weight:500;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:.5rem .9rem; cursor:pointer;
  transition:border-color .18s, background .18s, transform .18s var(--ease), color .18s;
}
.slot:hover{border-color:var(--moss); transform:translateY(-2px)}
.slot.is-on{background:var(--moss); border-color:var(--moss); color:#fff}
.slots__empty{color:var(--muted); font-size:.94rem; padding:1.5rem 0}

/* Formular */
.fields{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:620px){ .fields{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:.4rem}
.field--wide{grid-column:1/-1}
.field label{font-size:.85rem; font-weight:600}
.field label span{color:var(--muted); font-weight:400}
.field input,.field textarea{
  font:inherit; font-size:.97rem; background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:.8rem 1rem;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--moss); box-shadow:0 0 0 4px var(--moss-tint);
}
.field textarea{resize:vertical; min-height:5rem}
.field.has-err input{border-color:#C4553D}
.field__err{font-size:.8rem; color:#C4553D; min-height:1rem}

/* Rezumatul lipicios al programării */
.recap{
  background:var(--pine); color:#EAF0EC; border-radius:var(--r-lg);
  padding:1.1rem 1.3rem; display:flex; flex-wrap:wrap; gap:1.6rem; margin-bottom:1.6rem;
}
/* display:flex bate atributul hidden — fără regula asta rămâne o bară goală. */
.recap[hidden],[hidden]{display:none !important}
.recap__k{font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.13em; color:#8FB09F}
.recap__v{font-weight:600; font-size:.96rem; margin-top:.15rem}
.recap__v.mono{font-family:var(--mono)}

/* Confirmarea: bifa se desenează, nu apare brusc */
.done{text-align:center; padding-block:3rem}
.done__mark{width:88px; height:88px; margin:0 auto 1.8rem; display:block}
.done__mark circle{fill:none; stroke:var(--moss); stroke-width:3; opacity:.25}
.done__mark path{
  fill:none; stroke:var(--moss); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60; animation:draw .55s var(--ease) .25s forwards;
}
.done__mark .ring{
  stroke-dasharray:264; stroke-dashoffset:264; opacity:1;
  animation:draw .7s var(--ease) forwards;
}
.done__card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.6rem; max-width:26rem; margin:2rem auto 0; text-align:left;
  display:grid; gap:.9rem;
}
.done__row{display:flex; justify-content:space-between; gap:1rem; font-size:.95rem}
.done__row span{color:var(--muted)}
.done__row b{font-family:var(--mono)}
.done__actions{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem}

/* ============================ Despre / Contact ============================ */
/* Lățimea se pune pe conținut, NU pe container: pe container, max-width se
   combina cu margin-inline:auto de la .wrap și centra titlul, scoțându-l din
   alinierea cu secțiunile de dedesubt. */
.page__head{padding-block:clamp(2.5rem,5vw,4rem) 0}
.page__head h1,.page__head p{max-width:44rem}
.page__head p{margin-top:1.2rem; color:var(--muted); font-size:1.08rem}

.person{text-align:center}
.person__ph{
  width:100%; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
  background:var(--moss-tint); margin-bottom:1.1rem;
}
.person__ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.person:hover .person__ph img{transform:scale(1.05)}
.person b{font-size:1.02rem}
.person small{display:block; color:var(--muted); margin-top:.2rem; font-size:.87rem}
.person em{display:block; font-style:normal; font-family:var(--mono); font-size:.72rem;
  color:var(--moss); margin-top:.5rem; text-transform:uppercase; letter-spacing:.08em}

.info{display:grid; gap:1.2rem; margin-top:2rem}
.info__row{display:flex; gap:1rem; align-items:flex-start}
.info__row svg{width:22px; height:22px; flex:0 0 22px; color:var(--moss); margin-top:.2rem}
.info__row b{display:block; font-size:.95rem}
.info__row span{color:var(--muted); font-size:.94rem}
.map{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); min-height:22rem}
.map iframe{width:100%; height:100%; min-height:22rem; border:0; display:block; filter:saturate(.85)}

/* ============================ Animații la scroll ============================
   Starea ascunsă se aplică DOAR sub .js, clasă pusă de un script inline din
   <head>. Fără gardul ăsta, un JS blocat sau picat ar lăsa pagina complet
   goală — risc inacceptabil pentru un site trimis unui client. */
.reveal{transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal{opacity:0; transform:translateY(22px)}
.js .reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* Secvența de intrare a eroului */
.rise{opacity:0; transform:translateY(18px); animation:riseIn .8s var(--ease) forwards}
.rise[data-d="1"]{animation-delay:.08s}
.rise[data-d="2"]{animation-delay:.18s}
.rise[data-d="3"]{animation-delay:.30s}
.rise[data-d="4"]{animation-delay:.42s}
@keyframes riseIn{to{opacity:1; transform:none}}

/* Podeaua de calitate: nimeni nu primește animații pe care nu le-a cerut. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal,.js .reveal,.rise{opacity:1 !important; transform:none !important}
  .trail__paw{opacity:.85 !important}
  .hero h1 em path,.done__mark path,.done__mark .ring{stroke-dashoffset:0 !important}
}