/* Fonturi găzduite local (fără Google Fonts, fără cookie-uri sau cereri către terți) */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"),url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Scyflow: stil comun pentru Acasă, Automatizări, Testimoniale.
   Concept: pagină albă, text aproape negru, un singur accent cărămiziu (culoarea semnalului), etichete în mono ca pe o fișă de lucru. */
:root{
  --bg:#FFFFFF; --ink:#15130F; --ink2:#3E3A35; --muted:#6A645D; --line:#E9E5E0; --soft:#F7F5F2;
  --acc:#C43D16; --acc-press:#A93211; --on-acc:#FFFFFF; --tint:#FCEDE7; --tint-ink:#8A2A0E;
  --wa:#1B7F45; --wa-press:#156A39; --on-wa:#FFFFFF; --ok:#1B7F45;
  --f-d:"Archivo", "Segoe UI", Roboto, sans-serif;
  --f-b:"Archivo", "Segoe UI", Roboto, sans-serif;
  --f-m:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --r:10px; --wrap:1120px;
  --z-bar:20; --z-nav:30;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#12110F; --ink:#F3F0EC; --ink2:#CEC8C1; --muted:#A39C94; --line:#2A2723; --soft:#1A1816;
  --acc:#FF8A5C; --acc-press:#FFA27E; --on-acc:#1A0F0A; --tint:#2E1D16; --tint-ink:#FFC2A8;
  --wa:#2FB866; --wa-press:#27A059; --on-wa:#0B1A11; --ok:#4CC97F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12110F; --ink:#F3F0EC; --ink2:#CEC8C1; --muted:#A39C94; --line:#2A2723; --soft:#1A1816;
  --acc:#FF8A5C; --acc-press:#FFA27E; --on-acc:#1A0F0A; --tint:#2E1D16; --tint-ink:#FFC2A8;
  --wa:#2FB866; --wa-press:#27A059; --on-wa:#0B1A11; --ok:#4CC97F; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:auto}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-b); font-size:var(--t-body); line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--f-d); text-wrap:balance; line-height:1.06}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
.sec{padding-block:84px}
@media (max-width:760px){.sec{padding-block:56px}}
.eyb{font-family:var(--f-m); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.h2{font-size:var(--t-h2); font-weight:800; font-stretch:var(--t-stretch-h); letter-spacing:-.02em; margin-top:12px}
.lede{font-size:var(--t-lede); color:var(--ink2); max-width:60ch; margin-top:14px}
.small{font-size:max(12.5px, calc(14px * var(--k))); color:var(--muted)}
.num{font-variant-numeric:tabular-nums; font-weight:650; user-select:all}
:focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:6px}
.band{background:var(--soft); border-block:1px solid var(--line)}

/* butoane */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:var(--r); background:var(--acc); color:var(--on-acc); border:0; font:650 max(12.5px, calc(16.5px * var(--k)))/1 var(--f-b); text-decoration:none; cursor:pointer; transition:background-color .15s ease, transform .15s ease}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--acc-press)}}
.btn:active{transform:scale(.98)}
.btn.wa{background:var(--wa); color:var(--on-wa)}
@media (hover:hover) and (pointer:fine){.btn.wa:hover{background:var(--wa-press)}}
.btn.line{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
@media (hover:hover) and (pointer:fine){.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--acc); color:var(--acc)}}
.btn svg{flex:none}

/* navigație */
.nav{position:sticky; top:env(safe-area-inset-top, 0px); z-index:var(--z-nav); background:var(--bg); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px}
.logo{display:inline-flex; align-items:center; gap:10px; min-height:44px; font:800 max(12.5px, calc(21px * var(--k)))/1 var(--f-d); font-stretch:118%; letter-spacing:-.01em; text-decoration:none}
.logo svg{flex:none}
.links{display:flex; align-items:center; gap:4px; font-size:max(12.5px, calc(15.5px * var(--k))); font-weight:550}
.links a{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; text-decoration:none; color:var(--ink2)}
@media (hover:hover) and (pointer:fine){.links a:hover{color:var(--acc)}}
.links a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--acc); border-radius:0}
.links .btn{min-height:42px; padding:0 16px; font-size:max(12.5px, calc(15px * var(--k))); margin-left:8px}
@media (max-width:720px){.links .hide-m{display:none} .links .btn{display:none} .links a{padding:0 8px}}
@media (max-width:360px){.links a{padding:0 6px; font-size:15px} .logo{font-size:19px; gap:8px}}

/* bara de contact pe telefon */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar); display:none; gap:8px; padding:10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background:var(--bg); border-top:1px solid var(--line); box-shadow:0 -10px 24px -18px rgba(21,19,15,.45)}
.mbar a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; border-radius:var(--r); font-weight:650; font-size:max(12.5px, calc(15.5px * var(--k))); text-decoration:none}
.mbar .w{background:var(--wa); color:var(--on-wa); flex:1.6}
.mbar .w img{width:28px; height:28px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.mbar .t{box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink)}
@media (max-width:760px){.mbar{display:flex} body{padding-bottom:84px}}

/* întrebări */
.faq{max-width:820px; margin-top:36px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; min-height:44px; font-weight:650; font-size:max(12.5px, calc(18px * var(--k)))}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--tint-ink); display:grid; place-items:center; font-style:normal; font-weight:700; transition:transform .2s ease}
.faq details[open] summary i{transform:rotate(45deg)}
.faq .a{padding:0 40px 22px 0; color:var(--ink2); max-width:66ch}
@media (max-width:560px){.faq .a{padding-right:0}}

footer .wrap{padding-block:28px 40px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:max(12.5px, calc(14px * var(--k))); color:var(--muted)}
footer a{color:var(--ink2)}

@media (prefers-reduced-motion: reduce){.btn,.faq summary i{transition:none}}

/* Mărimea textului: varianta B (aleasă) */
:root{
  --k:.94; --t-body:16px; --t-lede:17px; --t-lede-hero:18px;
  --t-hero:clamp(34px,5vw,58px); --t-h2:clamp(26px,3.3vw,38px); --t-h3:clamp(22px,2.4vw,28px); --t-price:34px;
  --t-stretch:112%; --t-stretch-h:108%;
}

/* Derulare la ancore: titlul nu mai intră sub bara de sus */
html{scroll-padding-top:calc(84px + env(safe-area-inset-top, 0px))}
.sec[id]{scroll-margin-top:-32px}

/* Mișcare. Curbe din motion-md. */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
.btn{transition:background-color .15s ease, transform 160ms var(--ease-out), box-shadow .2s ease}
.btn:active{transform:scale(.97)}

/* Carduri pe care se poate acționa: se ridică ușor la hover (doar cu mouse) */
.lift{transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms ease}
@media (hover:hover) and (pointer:fine){
  .lift:hover{transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(21,19,15,.38); border-color:color-mix(in srgb, var(--acc) 35%, var(--line))}
}
/* Carduri: intră o singură dată la derulare, eșalonat. Vizibile implicit; JS ascunde doar ce e sub ecran la încărcare. */
.rv,.lift.rv{transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay:calc(var(--d, 0) * 60ms)}
.rv.pre{opacity:0; transform:translateY(18px)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.lift.rv{transition:opacity 200ms ease; transition-delay:0ms}
  .rv.pre{transform:none}
  .lift,.lift:hover{transform:none; transition:box-shadow 200ms ease, border-color 200ms ease}
  .btn:active{transform:none}
}

/* Apăsări: răspuns imediat pe telefon și laptop.
   Hover doar cu mouse (pe telefon rămânea „agățat” după tap); pe touch, culoarea de apăsare vine din :active. */
a,button,summary,label{-webkit-tap-highlight-color:transparent}
.btn,.yn button,.mbar a,.links a,.open,.chips a,.filters button,.faq summary{touch-action:manipulation}
.btn,.yn button,.mbar a,.filters button{-webkit-user-select:none; user-select:none}
.btn{transition:background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 160ms var(--ease-out)}
.btn:active{background:var(--acc-press); transform:scale(.97)}
.btn.wa:active{background:var(--wa-press)}
.btn.line:active{background:var(--soft); box-shadow:inset 0 0 0 1.5px var(--acc); color:var(--acc)}
.yn button{transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out)}
.yn button:active{transform:scale(.96)}
.mbar a{transition:background-color 150ms ease, transform 160ms var(--ease-out)}
.mbar a:active{transform:scale(.97)}
.mbar .w:active{background:var(--wa-press)}
.mbar .t:active{background:var(--soft)}
.links a{transition:color 150ms ease}
.links a:active,.open:active{color:var(--acc-press)}
.faq summary:active{color:var(--acc)}
@media (prefers-reduced-motion: reduce){.btn:active,.yn button:active,.mbar a:active{transform:none}}

/* Bara de contact de jos (telefon): apare după ce butonul WhatsApp din hero iese din ecran, ca să nu fie două butoane verzi unul sub altul.
   Fără JS rămâne mereu vizibilă. */
.mbar{transition:transform 220ms var(--ease-out), visibility 0s}
.mbar[data-hidden]{transform:translateY(100%); visibility:hidden; transition:transform 200ms var(--ease-out), visibility 0s 200ms}
@media (prefers-reduced-motion: reduce){.mbar,.mbar[data-hidden]{transition-duration:.01ms; transition-delay:0s}}

/* Secțiunea primește focus după derulare (pentru cititoarele de ecran), fără contur vizibil. */
section[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}