/* ============================================================
   ServiceMazda.eu — foaie de stil (v2)
   Hârtie albă · roșu carmin · negru lăcuit
   Titluri: Sora · Text: Inter (diacritice românești complete)
   ============================================================ */

:root{
  --paper:#fbfaf8;
  --white:#ffffff;
  --ink:#1b1b1f;
  --ink-2:#5f5e66;
  --red:#9e1b32;
  --red-2:#bb2140;
  --red-soft:#f6e8eb;
  --lacquer:#16151a;
  --lacquer-2:#211f26;
  --line:#e7e4df;
  --line-dark:#33313a;
  --err:#b3261e;
  --r:4px;
  --shadow:0 18px 50px -22px rgba(27,27,31,.25);
  --disp:"Sora", "Segoe UI", system-ui, sans-serif;
  --body:"Inter", "Segoe UI", system-ui, sans-serif;
  --wrap:1180px;
  --headH:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); font-size:16.5px; line-height:1.65;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.menu-locked{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--disp); font-weight:700; line-height:1.16; margin:0 0 .55em; letter-spacing:-.025em}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.ic{width:1.15em;height:1.15em;fill:currentColor;vertical-align:-.2em;display:inline-block}
.ic--sm{width:.8em;height:.8em}
:focus-visible{outline:3px solid var(--red-2); outline-offset:2px; border-radius:2px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* Etichetă mică deasupra titlurilor */
.kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.76rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin:0 0 .9rem;
}
.kicker::before{content:""; width:2rem; height:2px; background:var(--red)}
.kicker--light{color:#fff}
.kicker--light::before{background:#fff}

/* Butoane */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.8rem 1.6rem; border-radius:var(--r); border:2px solid transparent;
  font:800 .93rem/1.2 var(--body); letter-spacing:.01em; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-decoration:none !important;
}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:var(--red); color:#fff}
.btn--red:hover{background:var(--red-2)}
.btn--line{border-color:var(--ink); color:var(--ink); background:transparent}
.btn--line:hover{background:var(--ink); color:#fff}
.btn--white{background:#fff; color:var(--red)}
.btn--white:hover{background:var(--paper)}
.btn--outline-light{border-color:rgba(255,255,255,.65); color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.12)}
.btn--lg{padding:1rem 2rem; font-size:1rem}

/* ============ HEADER ============ */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-head__bar{display:flex; align-items:center; gap:1.2rem; height:var(--headH)}
.logo{display:flex; align-items:center; gap:.65rem; text-decoration:none !important; color:inherit; flex:none}
.logo__disc{width:42px; height:42px; flex:none}
.logo__disc svg{width:100%; height:100%; display:block}
.logo__type strong{display:block; font-family:var(--disp); font-size:1.18rem; font-weight:800; line-height:1.05; color:var(--ink)}
.logo__type strong em{font-style:normal; color:var(--red)}
.logo__type small{display:block; font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-top:2px}

.menu{margin-left:auto}
.menu > ul{display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0}
.menu > ul > li > a{
  display:inline-flex; align-items:center; gap:.3rem;
  font-weight:700; font-size:.95rem; color:var(--ink); padding:.5rem 0;
  border-bottom:2px solid transparent; text-decoration:none !important;
}
.menu > ul > li > a:hover, .menu a.is-active{color:var(--red); border-bottom-color:var(--red)}
.menu__contact{display:none}

/* Dropdown servicii — cu „punte" invizibilă, ca să nu fugă la hover */
.menu__drop{position:relative}
.menu__panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width:330px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); list-style:none; margin:0; padding:.45rem;
  opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease;
}
.menu__panel::before{ /* puntea: acoperă spațiul dintre link și panou */
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.menu__drop:hover .menu__panel,
.menu__drop:focus-within .menu__panel{opacity:1; visibility:visible}
.menu__panel a{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:var(--r);
  color:var(--ink); font-size:.92rem; font-weight:600; text-decoration:none !important;
}
.menu__panel a:hover{background:var(--red-soft); color:var(--red)}
.menu__tag{
  flex:none; font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); background:var(--red-soft); padding:.2rem .45rem; border-radius:2px;
  min-width:84px; text-align:center;
}

.site-head__right{display:flex; align-items:center; gap:.9rem; margin-left:1rem; flex:none}
.site-head__phone{display:inline-flex; align-items:center; gap:.45rem; font-weight:800; font-size:.95rem; color:var(--ink); text-decoration:none !important; white-space:nowrap}
.site-head__phone:hover{color:var(--red)}

/* Burger — ascuns pe desktop, vizibil sub 1020px */
.burger{
  display:none; position:relative; z-index:210; flex:none; background:var(--paper);
  width:44px; height:44px; background:none; border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer; padding:0;
}
.burger span{
  position:absolute; left:11px; right:11px; height:2px; background:var(--ink);
  transition:transform .22s ease, top .22s ease;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:21px; transform:rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; background:var(--white)}
.hero::after{ /* discul roșu — semnătura site-ului */
  content:""; position:absolute; top:50%; right:-16vw; transform:translateY(-50%);
  width:min(48vw,700px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--red-2), var(--red) 62%, #7c1226);
  z-index:0;
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; gap:2.4rem; align-items:center;
  padding-block:clamp(2.6rem,6vw,4.6rem);
}
.hero h1{margin-bottom:.9rem}
.hero h1 em{font-style:normal; color:var(--red)}
.hero__lead{font-size:1.06rem; color:var(--ink-2); max-width:35em}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}
.hero__facts{
  display:grid; grid-template-columns:repeat(4,auto); gap:1rem 2rem;
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line); width:fit-content;
}
.hero__facts strong{display:block; font-family:var(--disp); font-size:1.25rem; color:var(--red)}
.hero__facts span{font-size:.78rem; color:var(--ink-2)}
.hero__art{position:relative}
.hero__art img{width:100%; border-radius:var(--r); box-shadow:var(--shadow); border:1px solid var(--line)}
.hero__note{
  position:absolute; bottom:-14px; left:-14px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:.75rem 1rem; font-size:.83rem; max-width:290px; line-height:1.5;
}

/* Etichetă verticală pe marginea secțiunilor */
.vert{
  position:absolute; top:clamp(2.4rem,6vw,4rem); right:clamp(.5rem,1.6vw,1.4rem);
  writing-mode:vertical-rl; font-size:.68rem; font-weight:800;
  letter-spacing:.42em; text-transform:uppercase; color:#d8d5cf;
  user-select:none; pointer-events:none;
}
.section--dark .vert{color:#3c3a45}

/* ============ SECȚIUNI ============ */
.section{position:relative; padding-block:clamp(2.8rem,6vw,4.6rem)}
.section--white{background:var(--white); border-block:1px solid var(--line)}
.section--dark{background:var(--lacquer); color:#e9e7ee}
.section--dark h2, .section--dark h3{color:#fff}
.section--dark p{color:#b9b6c2}
.sec-head{max-width:720px; margin-bottom:clamp(1.6rem,3.4vw,2.4rem)}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--center .kicker::before{display:none}
.sec-head p{color:var(--ink-2)}
.sec-head h2{margin-bottom:.35em}

/* ============ INDEX SERVICII (rânduri editoriale) ============ */
.index{border-top:1px solid var(--line); list-style:none; margin:0; padding:0; counter-reset:srv}
.index li{border-bottom:1px solid var(--line)}
.index a{
  counter-increment:srv;
  display:grid; grid-template-columns:56px 148px 1fr auto; gap:1.3rem; align-items:center;
  padding:1.25rem .5rem; color:inherit; text-decoration:none !important;
  transition:background .2s ease, padding .2s ease;
}
.index a::before{
  content:"0" counter(srv);
  font-family:var(--disp); font-size:1.35rem; font-weight:600; color:#d8d5cf;
  transition:color .2s ease;
}
.index__tag{
  font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); border:1px solid currentColor; border-radius:99px;
  padding:.22rem .65rem; width:fit-content; white-space:nowrap;
}
.index__body h3{margin:0 0 .15rem; font-size:1.22rem; transition:color .2s ease}
.index__body p{margin:0; color:var(--ink-2); font-size:.9rem; max-width:52em}
.index__go{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.index a:hover{background:var(--white); padding-left:1rem}
.index a:hover::before{color:var(--red)}
.index a:hover .index__body h3{color:var(--red)}
.index a:hover .index__go{background:var(--red); border-color:var(--red); color:#fff; transform:translateX(4px)}
.section--white .index a:hover{background:var(--paper)}

/* ============ SPLIT (de ce noi / despre) ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4.5vw,4rem); align-items:center}
.split--rev > :first-child{order:2}
.split__art{position:relative}
.split__art img{border-radius:var(--r); border:1px solid var(--line); width:100%}
.section--dark .split__art img{border-color:var(--line-dark)}
.split__stamp{
  position:absolute; right:-12px; bottom:-12px;
  width:110px; height:110px; border-radius:50%;
  background:var(--red); color:#fff; display:grid; place-items:center; text-align:center;
  font-size:.64rem; font-weight:700; letter-spacing:.06em; line-height:1.35; padding:.9rem;
  box-shadow:var(--shadow); transform:rotate(-6deg);
}
.split__stamp strong{font-family:var(--disp); font-size:1.05rem; display:block; letter-spacing:0}

.ticks{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.8rem}
.ticks li{display:flex; gap:.75rem; align-items:flex-start}
.ticks .ic{flex:none; margin-top:.25rem; color:var(--red)}
.section--dark .ticks .ic{color:var(--red-2)}

/* ============ PROCES (pași) ============ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step}
.step{counter-increment:step; border-top:2px solid var(--line); padding-top:1rem}
.section--dark .step{border-top-color:var(--line-dark)}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--disp); font-size:1.9rem; font-weight:600; color:var(--red-2);
  display:block; line-height:1; margin-bottom:.5rem;
}
.step h3{font-size:1.02rem; margin-bottom:.35rem}
.step p{font-size:.9rem; margin:0}

/* ============ RECENZII ============ */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.quote{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.4rem; position:relative;
}
.quote__stars{color:var(--red); letter-spacing:.15em; font-size:.82rem; margin-bottom:.6rem}
.quote p{font-size:.94rem; margin-bottom:1.1rem}
.quote footer{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-top:1px solid var(--line); padding-top:.8rem}
.quote footer b{font-family:var(--disp)}
.quote footer span{font-size:.78rem; color:var(--ink-2)}

/* ============ VIDEO ============ */
.video-shell{
  position:relative; aspect-ratio:16/9; max-width:880px; margin-inline:auto;
  border-radius:var(--r); overflow:hidden; background:var(--lacquer-2);
  border:1px solid var(--line-dark);
}
.video-shell iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-hold{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#b9b6c2; padding:2rem}
.video-hold__play{width:72px; height:72px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; margin:0 auto 1rem}
.video-hold__play .ic{width:1.9rem; height:1.9rem}
.video-hold h3{color:#fff}
.video-hold p{font-size:.9rem; max-width:34em; margin:0 auto}

/* ============ GALERIE (masonry pe coloane) ============ */
.masonry{columns:3; column-gap:1.1rem}
.m-item{
  break-inside:avoid; margin-bottom:1.1rem; display:block; position:relative;
  border-radius:var(--r); overflow:hidden; background:var(--white); border:1px solid var(--line);
}
.m-item img{width:100%; transition:transform .5s ease}
.m-item:hover img{transform:scale(1.04)}
.m-item__cap{
  position:absolute; inset-inline:0; bottom:0;
  background:linear-gradient(transparent, rgba(22,21,26,.85));
  color:#fff; font-size:.8rem; padding:1.7rem .85rem .65rem;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
}
.m-item:hover .m-item__cap, .m-item:focus-visible .m-item__cap{opacity:1; transform:none}

/* Lightbox */
.lb{position:fixed; inset:0; z-index:300; background:rgba(22,21,26,.94); display:none; align-items:center; justify-content:center; padding:2rem}
.lb.is-open{display:flex}
.lb img{max-width:min(92vw,1200px); max-height:82vh; border-radius:var(--r)}
.lb__cap{position:absolute; bottom:1.6rem; inset-inline:0; text-align:center; color:#cfccd8; font-size:.9rem}
.lb__x, .lb__prev, .lb__next{
  position:absolute; background:rgba(255,255,255,.1); border:0; color:#fff;
  width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.4rem; line-height:1;
}
.lb__x:hover,.lb__prev:hover,.lb__next:hover{background:var(--red)}
.lb__x{top:1.1rem; right:1.1rem}
.lb__prev{left:1.1rem; top:50%; transform:translateY(-50%)}
.lb__next{right:1.1rem; top:50%; transform:translateY(-50%)}

/* ============ FAQ ============ */
.faq{max-width:820px; margin-inline:auto}
.faq details{border-bottom:1px solid var(--line); padding:.25rem 0}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--disp); font-weight:700; font-size:1.04rem; padding:.85rem 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--red); font-size:1.35rem; line-height:1; transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2); margin:0 0 1rem; max-width:60em}

/* ============ PAGE HERO (subpagini) ============ */
.p-hero{background:var(--white); border-bottom:1px solid var(--line); padding-block:clamp(2.2rem,5vw,3.4rem); position:relative; overflow:hidden}
.p-hero::before{
  content:""; position:absolute; top:-45%; right:-6%;
  width:300px; aspect-ratio:1; border-radius:50%;
  background:var(--red-soft); z-index:0;
}
.p-hero .wrap{position:relative; z-index:1}
.p-hero .lead{font-size:1.05rem; color:var(--ink-2); max-width:44em; margin:0}
.crumbs{font-size:.8rem; color:var(--ink-2); margin-bottom:1rem; letter-spacing:.02em}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--red)}

/* ============ ARTICOL SERVICIU + SIDEBAR ============ */
.duo{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(1.8rem,4vw,3.2rem); align-items:start}
.prose h2{font-size:1.45rem; margin-top:2rem}
.prose p{color:#3c3b44}
.prose .ticks{margin-bottom:1.3rem}
.tbl{width:100%; border-collapse:collapse; margin:.9rem 0 1.3rem; font-size:.92rem; background:var(--white)}
.tbl th{background:var(--ink); color:#fff; text-align:left; padding:.65rem .85rem; font-weight:700; font-size:.82rem; letter-spacing:.03em}
.tbl td{padding:.65rem .85rem; border-bottom:1px solid var(--line)}
.tbl tr:nth-child(even) td{background:var(--paper)}
.note{font-size:.83rem; color:var(--ink-2)}

.side{position:sticky; top:calc(var(--headH) + 16px); display:grid; gap:1.1rem}
.panel{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem}
.panel--red{background:var(--lacquer); border-color:var(--lacquer); color:#e9e7ee}
.panel--red h3{color:#fff}
.panel--red .btn{width:100%; margin-top:.55rem}
.panel h3{font-size:1.02rem}
.panel ul{list-style:none; margin:0; padding:0}
.panel ul a{display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.5rem 0; color:var(--ink); border-bottom:1px solid var(--line); font-size:.9rem; font-weight:600; text-decoration:none !important}
.panel ul li:last-child a{border-bottom:0}
.panel ul a:hover{color:var(--red)}
.panel .sched li{display:flex; justify-content:space-between; padding:.42rem 0; border-bottom:1px dashed var(--line); font-size:.92rem}
.panel .sched li:last-child{border-bottom:0}

/* ============ FORMULAR ============ */
.form-card{background:var(--white); border:1px solid var(--line); border-top:4px solid var(--red); border-radius:var(--r); padding:clamp(1.3rem,4vw,2.2rem); box-shadow:var(--shadow)}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.3rem}
.f{display:flex; flex-direction:column; gap:.32rem}
.f--full{grid-column:1/-1}
.f label{font-weight:800; font-size:.88rem}
.f label small{font-weight:500; color:var(--ink-2)}
.f input,.f select,.f textarea{
  font:inherit; padding:.72rem .85rem; border:1px solid #cfccc6; border-radius:var(--r);
  background:var(--paper); color:var(--ink); width:100%;
}
.f textarea{min-height:118px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.f-err{color:var(--err); font-size:.8rem}
.alert{border-radius:var(--r); padding:.85rem 1.05rem; margin-bottom:1.3rem; font-weight:600}
.alert--err{background:#fdecea; border:1px solid #f2c4c0; color:var(--err)}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.f-note{font-size:.79rem; color:var(--ink-2); margin:.8rem 0 0}

/* ============ CTA FINAL ============ */
.closing{position:relative; overflow:hidden; background:var(--red); color:#fff; text-align:center}
.closing__disc{position:absolute; left:-120px; top:-120px; width:320px; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.07)}
.closing__inner{position:relative; padding-block:clamp(2.8rem,6vw,4.4rem); max-width:820px}
.closing h2{color:#fff}
.closing__sub{color:#fbd9df; max-width:38em; margin-inline:auto}
.closing__actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.6rem}

/* ============ FOOTER ============ */
.foot{background:var(--lacquer); color:#b9b6c2; font-size:.93rem}
.foot a{color:#dedbe6}
.foot a:hover{color:#fff}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.2rem; padding-block:3rem}
.foot .logo__type strong{color:#fff}
.foot .logo__type small{color:#8d8a97}
.foot__brand p{margin-top:1rem}
.foot h3{color:#fff; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-family:var(--body); font-weight:800; margin-bottom:.9rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.foot__contact li{display:flex; gap:.6rem; align-items:flex-start}
.foot__contact .ic{flex:none; margin-top:.28rem; color:var(--red-2)}
.socials{display:flex; gap:.65rem; margin-top:1.1rem}
.socials a{width:38px; height:38px; border:1px solid var(--line-dark); border-radius:50%; display:grid; place-items:center}
.socials a:hover{background:var(--red); border-color:var(--red)}
.foot__legal{border-top:1px solid var(--line-dark); padding-block:1.2rem; display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:space-between; font-size:.78rem; color:#8d8a97}
.foot__legal p{margin:0}
.foot__disclaimer{max-width:640px}

/* ============ WHATSAPP FAB ============ */
.wa-fab{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:150;
  display:flex; align-items:center; gap:.55rem;
  background:#1fae54; color:#fff; border-radius:99px; padding:.8rem 1.05rem;
  box-shadow:0 12px 30px -8px rgba(31,174,84,.55);
  text-decoration:none !important; font-weight:800; font-size:.88rem;
}
.wa-fab .ic{width:1.45rem; height:1.45rem}
.wa-fab:hover{background:#189347}
.wa-fab__txt{max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .3s ease}
.wa-fab:hover .wa-fab__txt{max-width:160px}
body.menu-locked .wa-fab{display:none} /* ascuns când meniul sau lightbox-ul e deschis */

/* ============ REVEAL ============ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1; transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tabletă & mobil: burger + meniu tip sertar (ca la Volvo, dar pe tema deschisă) */
@media (max-width:1020px){
  .burger{display:block}
  .site-head__right{margin-left:auto}
  .site-head__cta{display:none}
  .site-head__phone{display:none}

  /* Fundal întunecat peste tot ecranul — meniul acoperă inclusiv header-ul */
  .menu{
    position:fixed; inset:0; z-index:200;
    margin:0; background:rgba(22,21,26,.5);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .menu.is-open{opacity:1; pointer-events:auto}

  /* Sertarul alb care alunecă din dreapta */
  .menu > ul{
    position:absolute; top:0; right:0; bottom:0;
    width:min(370px,90vw); background:var(--paper);
    border-left:1px solid var(--line);
    box-shadow:-40px 0 80px -30px rgba(22,21,26,.5);
    transform:translateX(103%); transition:transform .28s cubic-bezier(.32,.72,.28,1);
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:calc(var(--headH) + .6rem) 1.4rem 11rem; overflow-y:auto;
  }
  .menu.is-open > ul{transform:none}
  .menu > ul > li{width:100%}
  .menu > ul > li > a{
    display:flex; width:100%; justify-content:space-between; align-items:center;
    font-family:var(--disp); font-size:1.15rem; font-weight:700;
    padding:.85rem .2rem; border-bottom:1px solid var(--line);
  }
  .menu > ul > li > a:hover{border-bottom-color:var(--line)}
  .menu a.is-active{border-bottom-color:var(--line)}

  /* Submeniul serviciilor: listă simplă, în flux */
  .menu__panel{
    position:static; transform:none; opacity:1; visibility:visible;
    border:0; box-shadow:none; background:transparent; padding:.15rem 0 .5rem;
    min-width:0; display:none;
  }
  .menu__panel::before{display:none}
  .menu__drop.is-open .menu__panel{display:block}
  .menu__panel a{padding:.5rem .2rem}

  /* Telefon + buton de programare, fixate la baza sertarului */
  .menu__contact{
    display:grid; gap:.75rem;
    position:absolute; right:0; bottom:0; width:min(370px,90vw);
    padding:1.1rem 1.4rem calc(1.3rem + env(safe-area-inset-bottom));
    background:var(--paper); border-top:1px solid var(--line); border-left:1px solid var(--line);
    transform:translateX(103%); transition:transform .28s cubic-bezier(.32,.72,.28,1);
  }
  .menu.is-open .menu__contact{transform:none}
  .menu__phone{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    font-weight:800; font-size:1rem; color:var(--ink); text-decoration:none !important;
    border:2px solid var(--ink); border-radius:var(--r); padding:.8rem 1.2rem;
  }
  .menu__phone:hover{background:var(--ink); color:#fff}
  .menu__contact .btn{width:100%}

  .hero__inner{grid-template-columns:1fr}
  .hero::after{top:auto; bottom:-34vw; right:-30vw; width:80vw}
  .hero__art{margin-top:.6rem}
  .hero__note{left:10px; bottom:-10px}
  .quotes{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split--rev > :first-child{order:0}
  .duo{grid-template-columns:1fr}
  .side{position:static}
  .masonry{columns:2}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .hero__facts{grid-template-columns:repeat(2,auto); gap:.9rem 1.6rem}
  .index a{grid-template-columns:1fr auto; gap:.5rem 1rem}
  .index a::before{display:none}
  .index__go{grid-row:1/3; align-self:center}
  .steps{grid-template-columns:1fr}
  .masonry{columns:1}
  .f-grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .wa-fab__txt{display:none}
  .vert{display:none}
  .split__stamp{width:96px; height:96px; right:8px; bottom:-10px}
}

/* Mișcare redusă */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  .reveal{opacity:1; transform:none}
}

/* Print */
@media print{
  .site-head,.foot,.wa-fab,.closing{display:none}
}