:root{
  --grund:#D7D9D6;     /* grund gri, primul strat pe tablă */
  --grund-2:#E9EAE7;
  --lac:#13212E;       /* albastru-grafit metalizat, culoarea de bază */
  --lac-2:#1D3245;
  --banda:#F39A2E;     /* portocaliul din logo-ul Milian */
  --banda-umbra:#C9741C;
  --semnal:#D2391F;    /* roșu de avertizare, doar pentru stele și accente mici */
  --text:#16202A;
  --gri-text:#4B5763;
  --w:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.55;color:var(--text);background:var(--grund-2)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--banda);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}

.demo{background:var(--lac);color:#b9c6d2;font-size:13.5px;text-align:center;padding:8px 16px}
.demo b{color:var(--banda);font-weight:600}

/* -------- banda de mascare: elementul-semnătură -------- */
.banda{
  display:inline-block;position:relative;
  background:var(--banda);color:#2b2410;
  font-family:Caveat,cursive;font-weight:700;font-size:25px;line-height:1;
  padding:9px 22px 8px;transform:rotate(-1.6deg);
  box-shadow:0 2px 0 var(--banda-umbra),0 6px 14px #0000002e;
  /* bandă de mascare: margini drepte, capete tăiate oblic */
  clip-path:polygon(1.2% 0,100% 0,98.8% 100%,0 100%);
}
.banda.dreapta{transform:rotate(1.4deg)}

/* -------- header -------- */
.nav{position:absolute;left:0;right:0;top:0;z-index:3}
.hero .nav .wrap{padding-top:22px;padding-bottom:0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:22px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.logo img{width:58px;height:58px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 2px #ffffff22}
.logo b{font-family:"Barlow Condensed";font-weight:800;font-size:27px;letter-spacing:.02em;line-height:.9}
.logo small{display:block;font-family:"Schibsted Grotesk";font-size:12.5px;font-weight:500;color:#c9d4dd;letter-spacing:0}
.nav ul{display:flex;gap:28px;list-style:none;font-weight:500;font-size:15.5px}
.nav ul a{color:#e6ecf1;text-decoration:none}
.nav ul a:hover{color:var(--banda)}
.nav .tel{color:#fff;font-weight:700;text-decoration:none;border:2px solid #ffffff55;padding:9px 16px;border-radius:8px}
.nav .tel:hover{border-color:var(--banda)}

/* -------- hero -------- */
.hero{position:relative;min-height:720px;color:#fff;display:flex;align-items:flex-end;overflow:hidden;background:var(--lac)}
.hero .foto{position:absolute;inset:0;background:url(img/reparatie.jpg) 68% 52%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0f1b26 0%,#0f1b26e6 34%,#0f1b2666 62%,#0f1b2610 100%),linear-gradient(0deg,#0f1b26cc 0%,transparent 38%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:70px}
.hero .banda{margin-bottom:26px}
.hero h1{font-family:"Barlow Condensed";font-weight:800;text-transform:uppercase;font-size:clamp(50px,6.6vw,94px);line-height:1.14;letter-spacing:.005em;max-width:9.5ch}
.hero .lead{margin-top:24px;font-size:clamp(18px,1.7vw,21px);max-width:40ch;color:#dbe4eb}
.hero .lead strong{color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:17px;text-decoration:none;padding:16px 24px;border-radius:10px;transition:transform .12s,background .15s}
.btn:active{transform:translateY(1px)}
.btn svg{width:21px;height:21px;flex:none}
.btn-wa{background:var(--banda);color:#231d08}
.btn-wa:hover{background:#f7b25a}
.btn-ghost{color:#fff;border:2px solid #ffffff66}
.btn-ghost:hover{border-color:#fff;background:#ffffff12}
.dovezi{display:flex;flex-wrap:wrap;gap:34px;margin-top:46px;padding-top:24px;border-top:1px solid #ffffff26;max-width:760px}
.dovada b{display:block;font-family:"Barlow Condensed";font-weight:800;font-size:38px;line-height:1;color:#fff}
.dovada span{font-size:14.5px;color:#b9c6d2}
.dovada .stele{color:var(--banda);font-size:16px;letter-spacing:2px}

/* -------- secțiuni -------- */
section{padding:96px 0}
h2{font-family:"Barlow Condensed";font-weight:800;text-transform:uppercase;font-size:clamp(40px,5vw,64px);line-height:1.02;color:var(--lac)}
.sub{margin-top:14px;color:var(--gri-text);max-width:54ch;font-size:18px}

/* dosarul de daună: pași reali, deci numerotați */
.dauna{background:var(--grund)}
.dauna .cap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.asig{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.asig span{background:#fff;border:1px solid #c3c6c2;border-radius:8px;padding:10px 16px;font-weight:700;letter-spacing:.02em;color:var(--lac)}
.asig small{width:100%;color:var(--gri-text);font-size:13.5px}
.pasi{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:52px;border-top:3px solid var(--lac)}
.pasi li{counter-increment:p;padding:26px 22px 8px 0;position:relative}
.pasi li::before{content:counter(p);display:block;font-family:"Barlow Condensed";font-weight:800;font-size:54px;line-height:1;color:var(--lac);margin-bottom:12px}
.pasi li::after{content:"";position:absolute;top:-9px;left:0;width:15px;height:15px;border-radius:50%;background:var(--grund);border:3px solid var(--lac)}
.pasi li:first-child::after{background:var(--banda)}
.pasi h3{font-size:18.5px;line-height:1.25;margin-bottom:8px}
.pasi p{font-size:15.5px;color:var(--gri-text)}

/* servicii */
.servicii .grila{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:18px;margin-top:46px}
.serv{background:#fff;border-radius:14px;padding:30px 28px;border:1px solid #d6d8d4}
.serv h3{font-family:"Barlow Condensed";font-weight:800;text-transform:uppercase;font-size:30px;line-height:1;color:var(--lac);margin-bottom:12px}
.serv p{color:var(--gri-text);font-size:16px}
.serv.mare{grid-row:span 2;background:var(--lac);color:#dbe4eb;border:0;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.serv.mare h3{color:#fff;font-size:40px}
.serv.mare p{color:#b9c6d2;font-size:17px}
.mostre{display:flex;gap:0;margin-top:34px}
.mostre i{flex:1;height:86px;border-right:2px solid var(--lac)}
.mostre i:nth-child(1){background:#B8BEC4}.mostre i:nth-child(2){background:#7F1D1D}.mostre i:nth-child(3){background:#1F3A5F}
.mostre i:nth-child(4){background:#F2F1EC}.mostre i:nth-child(5){background:#2D2F31}.mostre i:nth-child(6){background:#6E7F5A;border-right:0}
.mostre-legenda{font-size:13.5px;color:#8fa0ae;margin-top:10px}

/* recenzii */
.recenzii{background:var(--lac);color:#fff}
.recenzii h2{color:#fff}
.recenzii .sub{color:#b9c6d2}
.nota-mare{display:flex;align-items:baseline;gap:14px;margin-top:22px}
.nota-mare b{font-family:"Barlow Condensed";font-weight:800;font-size:86px;line-height:.8;color:var(--banda)}
.nota-mare span{color:#b9c6d2}
.citate{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.citat{background:var(--lac-2);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;gap:18px}
.citat .stele{color:var(--banda);letter-spacing:2px}
.citat q{font-size:18px;line-height:1.5;quotes:"„" "”"}
.citat footer{margin-top:auto;font-size:14.5px;color:#c7d3dd}
.citat footer b{color:#fff;font-weight:600}

/* lucrări */
.lucrari .grila{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.nota{font-size:14px;color:var(--gri-text);margin-top:16px}

/* atelier: poze reale de pe profilul Google */
.galerie{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:46px;align-items:start}
.galerie figure{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #d6d8d4;display:flex;flex-direction:column}
.galerie img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.galerie figure:nth-child(1) img{object-position:50% 25%}
.galerie figure:nth-child(2) img{object-position:50% 0%}
.galerie figure:nth-child(3) img{object-position:50% 40%}
.galerie figcaption{padding:16px 18px;font-weight:600;line-height:1.35}
.galerie figcaption small{display:block;font-weight:400;color:var(--gri-text);margin-top:4px}
.contact .social{display:flex;gap:18px;margin-top:22px;font-weight:600}
.contact .sigla{width:150px;border-radius:16px;margin-bottom:26px;box-shadow:0 10px 26px #0f1b2640}
.contact .social a{color:var(--lac)}

/* contact */
.contact{background:var(--grund)}
.contact .grila{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:stretch}
.adr{font-size:22px;font-weight:600;margin-top:22px}
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin-top:26px;font-size:17px}
.contact dt{color:var(--gri-text)}
.contact dd{font-weight:600}
.contact .cta{margin-top:30px}
.contact .btn-ghost{color:var(--lac);border-color:var(--lac)}
.contact .btn-ghost:hover{background:#13212e0d}
.harta{border-radius:14px;overflow:hidden;min-height:360px;border:3px solid var(--lac);background:#c9ccc8}
.harta iframe{width:100%;height:100%;min-height:360px;border:0;display:block}

.subsol{background:#0d1720;color:#8fa0ae;padding:34px 0 40px;font-size:14px}
.subsol .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.subsol b{color:#fff}
.subsol a{color:var(--banda)}

.bara{position:fixed;left:0;right:0;bottom:0;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#0d1720;z-index:9;box-shadow:0 -6px 18px #0004}
.bara .btn{flex:1;justify-content:center;padding:14px 8px;font-size:16px}

@media (max-width:980px){
  .nav ul{display:none}
  .pasi{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--lac);margin-left:8px}
  .pasi li{padding:4px 0 26px 30px}
  .pasi li::before{font-size:40px;margin-bottom:6px}
  .pasi li::after{top:8px;left:-9px}
  .servicii .grila,.citate,.lucrari .grila,.galerie,.contact .grila,.dauna .cap{grid-template-columns:1fr}
  .serv.mare{grid-row:auto}
}
@media (max-width:640px){
  body{padding-bottom:76px}
  .nav .tel{display:none}
  .hero{min-height:0}
  .hero .foto{background-position:72% 50%}
  .hero::after{background:linear-gradient(0deg,#0f1b26 0%,#0f1b26f0 46%,#0f1b2699 72%,#0f1b2655 100%)}
  .hero .wrap{padding-top:300px;padding-bottom:44px}
  .hero .cta{display:none}
  .dovezi{gap:22px}
  .dovada b{font-size:30px}
  section{padding:66px 0}
  .bara{display:flex}
  .banda{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ======== pagini de serviciu (vopsitorie, tinichigerie, daune) ======== */
.hero-mic{min-height:0}
.hero-mic::after{background:radial-gradient(120% 140% at 85% 0%,#1d3245 0%,#13212e 55%,#0f1b26 100%)}
.hero-mic .wrap{padding-top:124px;padding-bottom:60px}
.hero-mic .banda{margin-bottom:22px}
.hero-mic h1{font-size:clamp(44px,5.4vw,76px);max-width:20ch}
.hero-mic .lead{max-width:52ch}
.firimituri{font-size:14px;color:#9fb0be;margin-bottom:22px}
.firimituri a{color:#dbe4eb}
.firimituri a:hover{color:var(--banda)}
.serv a,.text a,.intrebari a{color:var(--lac);font-weight:600;text-decoration-color:var(--banda);text-underline-offset:3px}
.sub a{color:inherit;font-weight:600;text-decoration-color:var(--banda);text-underline-offset:3px}
.carduri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.carduri.doua{grid-template-columns:repeat(2,1fr)}
.carduri .serv h3{font-size:27px}
.pasi.patru{grid-template-columns:repeat(4,1fr)}
.dauna > .wrap > h2{margin-bottom:6px}
.doi{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.doi.lat{grid-template-columns:1fr 1.05fr;align-items:start}
.text p{margin-top:16px;color:var(--gri-text);max-width:56ch}
.text h2 + p{margin-top:22px}
.poza{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #d6d8d4}
.poza img{width:100%;height:auto}
.poza.inalta img{aspect-ratio:4/4.3;object-fit:cover;object-position:50% 22%}
.poza figcaption{padding:14px 18px;font-size:14.5px;color:var(--gri-text)}
.recenzii .poza{border-color:#ffffff1f;background:var(--lac-2)}
.recenzii .poza figcaption{color:#b9c6d2}
.citate.stiva{grid-template-columns:1fr;gap:14px;margin-top:30px}
.citate.stiva .citat{padding:22px 24px;gap:12px}
.citate.doua{grid-template-columns:repeat(2,1fr)}
.cod-vopsea{background:#fff}
.cod-vopsea .mostre i{height:150px}
.mostre-bloc .mostre{margin-top:0;border:2px solid var(--lac);border-radius:12px;overflow:hidden}
.mostre-bloc .mostre-legenda{color:var(--gri-text)}
.atelier-sec{background:var(--grund)}
.schimb{background:#fff}
.intrebari{margin-top:40px;max-width:860px;border-top:2px solid var(--lac);padding-top:8px}
.intrebari details{border-bottom:1px solid #c9ccc8}
.intrebari summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-weight:700;font-size:19px;position:relative}
.intrebari summary::-webkit-details-marker{display:none}
.intrebari summary::after{content:"+";position:absolute;right:6px;top:14px;font-family:"Barlow Condensed";font-weight:800;font-size:34px;color:var(--banda-umbra)}
.intrebari details[open] summary::after{content:"\2212"}
.intrebari details p{padding:0 0 22px;color:var(--gri-text);max-width:68ch}
.alte{padding-top:80px}
.legaturi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
a.serv{text-decoration:none;display:flex;flex-direction:column;transition:border-color .15s,transform .12s}
a.serv:hover{border-color:var(--lac);transform:translateY(-2px)}
a.serv .mai{margin-top:auto;padding-top:18px;font-weight:700;color:var(--lac);text-decoration:underline;text-decoration-color:var(--banda);text-underline-offset:3px}
@media (max-width:980px){
  .carduri,.carduri.doua,.doi,.doi.lat,.citate.doua,.legaturi{grid-template-columns:1fr}
  .pasi.patru{grid-template-columns:1fr}
  .doi{gap:34px}
}
@media (max-width:640px){
  .hero-mic .wrap{padding-top:112px;padding-bottom:40px}
  .hero-mic h1{font-size:clamp(38px,11vw,52px)}
  .cod-vopsea .mostre i{height:90px}
  .intrebari summary{font-size:17.5px}
}

/* ======== pagina principală: legături spre servicii, recenzii, întrebări ======== */
.servicii .sub + .grila{margin-top:36px}
.serv.mare .mai{color:#fff}
.toate-recenziile{margin-top:30px;font-weight:600}
.toate-recenziile a{color:#fff;text-decoration-color:var(--banda);text-underline-offset:3px}
.toate-recenziile a:hover{color:var(--banda)}
.faq{background:#fff}
.subsol-linkuri{display:flex;flex-direction:column;gap:4px}
/* calea pozei din hero e relativă la assets/, deci urcăm un nivel */
.hero .foto{background-image:url(../img/reparatie.jpg)}
.serv.mare .mai{padding-top:14px}