/* ===== INSTAL LIVIU PRO — professional trades site ===== */
:root{
  --navy:#0d2440; --navy-2:#123457; --navy-3:#1c4b7c;
  --ink:#12202f; --body:#3d4b5c; --muted:#6b7888;
  --line:#e4e9f0; --bg:#ffffff; --bg-soft:#f5f8fc; --bg-soft-2:#eef3f9;
  --accent:#f26a1b; --accent-d:#d9560c; --accent-l:#fff1e7;
  /* service niche colors */
  --c-central:#e63946; --c-gaz:#e8890c; --c-sanitar:#1d7fc4; --c-electric:#6a4bc0; --c-alte:#2a9d5c;
  --white:#fff;
  --radius:14px; --radius-lg:22px; --shadow:0 10px 30px rgba(13,36,64,.10);
  --shadow-lg:0 20px 55px rgba(13,36,64,.16);
  --wrap:1180px; --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --fh:'Sora',var(--ff);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--ff);color:var(--body);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16.5px;overflow-x:clip;max-width:100%}
h1,h2,h3,h4{font-family:var(--fh);color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.28rem}
p{margin:0 0 1rem}
a{color:var(--navy-3);text-decoration:none;transition:.2s}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sec{padding:76px 0}
.sec-soft{background:var(--bg-soft)}
.eyebrow{display:inline-block;font-family:var(--fh);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.center{text-align:center}
.center .lead{max-width:680px;margin:0 auto 1rem}
.lead{font-size:1.12rem;color:var(--muted)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fh);font-weight:600;font-size:1rem;padding:.85rem 1.5rem;border-radius:60px;border:2px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap}
.btn svg{width:1.05em;height:1.05em}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(242,106,27,.32)}
.btn-accent:hover{background:var(--accent-d);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);color:#fff;transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ---- header ---- */
.topbar{background:var(--navy);color:#cdd9e8;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.topbar a{color:#cdd9e8}.topbar a:hover{color:#fff}
.topbar .tb-r{display:flex;gap:18px;align-items:center;flex-wrap:wrap;min-width:0}
.topbar .tb-item{display:inline-flex;align-items:center;gap:.4rem}
.topbar svg{width:15px;height:15px;opacity:.9}

header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hdr-top .nav{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--fh);font-weight:800;color:var(--navy);font-size:1.18rem;letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
.brand:hover{color:var(--navy)}
/* the original company logo, transparent PNG — contain so it is never distorted */
.brand .mark{width:42px;height:42px;flex:0 0 auto;object-fit:contain}
.brand>span{white-space:nowrap;line-height:1.1}
.brand small{display:block;font-family:var(--ff);font-weight:500;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.hdr-actions{display:flex;align-items:center;gap:14px}
/* both numbers live here, stacked, so the header stays one row tall */
.hdr-phones{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.hdr-phone{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fh);font-weight:700;font-size:.95rem;color:var(--navy);white-space:nowrap}
.hdr-phone svg{width:16px;height:16px;color:var(--accent);flex:none}
.hdr-phone:hover{color:var(--accent)}
.hdr-nav{border-top:1px solid var(--line);background:var(--bg-soft)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap}
.nav-links a{font-family:var(--fh);font-weight:600;font-size:.93rem;color:var(--ink);padding:.72rem .8rem;border-radius:9px;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--accent);background:var(--accent-l)}
.nav-cta{display:none}
.hamb{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamb span{display:block;width:26px;height:2.5px;background:var(--navy);margin:5px 0;border-radius:2px;transition:.25s}

/* ---- hero ---- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(9,26,48,.95) 30%,rgba(9,26,48,.72) 60%,rgba(242,106,27,.28))}
.hero .wrap{position:relative;z-index:2;padding:88px 22px 96px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{color:#fff;max-width:14ch}
.hero .lead{color:#dbe6f3;font-size:1.18rem;max-width:52ch;margin-bottom:1.6rem}
.hero .badge-line{display:flex;flex-wrap:wrap;gap:12px 22px;margin-bottom:1.9rem}
.hero .badge-line span{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:#eaf1f9}
.hero .badge-line svg{width:20px;height:20px;color:var(--accent)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* founder photo card in the hero */
.hero-photo{position:relative;margin:0;max-width:420px;justify-self:end;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 60px rgba(4,14,28,.5)}
.hero-photo picture{display:block}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hero-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 20px 18px;display:flex;flex-direction:column;gap:2px;background:linear-gradient(to top,rgba(9,26,48,.94) 42%,rgba(9,26,48,0))}
.hero-photo figcaption b{font-family:var(--fh);font-size:1.12rem;color:#fff;line-height:1.2}
.hero-photo figcaption span{font-size:.85rem;color:#cdd9e8}

/* ---- trust strip ---- */
.trust{background:var(--navy-2);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 22px}
.trust .t{display:flex;align-items:center;gap:14px}
.trust .t svg{width:34px;height:34px;color:var(--accent);flex:0 0 auto}
.trust .t b{font-family:var(--fh);font-size:1.5rem;display:block;line-height:1}
.trust .t span{font-size:.9rem;color:#c3d2e4}

/* ---- service cards ---- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.svc{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.25s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.svc .ph{position:relative;aspect-ratio:16/10;overflow:hidden}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.svc:hover .ph img{transform:scale(1.06)}
.svc .cat{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--ink);font-family:var(--fh);font-weight:700;font-size:.76rem;padding:.35rem .75rem;border-radius:40px;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.svc .cat i{width:9px;height:9px;border-radius:50%;display:inline-block}
.svc .bd{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.svc h3{margin-bottom:.45rem}
.svc p{font-size:.96rem;color:var(--muted);flex:1}
.svc .more{margin-top:14px;font-family:var(--fh);font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start}
.svc .more svg{width:16px;height:16px;transition:.2s}
.svc:hover .more svg{transform:translateX(4px)}
.svc .strip{height:5px}

/* ---- feature / why ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* content + narrower sidebar. Must be a class, not an inline style: an inline
   grid-template-columns outranks the ≤980px media query and leaves the sidebar
   laid out off-screen on mobile, where overflow-x:clip silently hides it. */
.split-aside{grid-template-columns:1.6fr .9fr;align-items:start}
/* grid/flex children default to min-width:auto and refuse to shrink below their
   content's min-content width — a long unbreakable token (the ISCIR auth code,
   an email) then pushes the column past a 320px viewport. */
.split>*,.hero-grid>*,.contact-grid>*,.founder>*{min-width:0}
.prose,.faq,.founder-txt,.mini-list b,.legal-box{overflow-wrap:break-word}
.feat-list{list-style:none;padding:0;margin:1.4rem 0 0}
.feat-list li{position:relative;padding:0 0 0 44px;margin-bottom:20px}
.feat-list li svg{position:absolute;left:0;top:2px;width:30px;height:30px;color:var(--accent)}
.feat-list li b{font-family:var(--fh);color:var(--ink);display:block;font-size:1.05rem}
.feat-list li span{font-size:.96rem;color:var(--muted)}
.media-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.media-frame img{width:100%;height:100%;object-fit:cover}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:22px;width:44px;height:44px;display:grid;place-items:center;background:var(--accent);color:#fff;font-family:var(--fh);font-weight:800;font-size:1.2rem;border-radius:12px;box-shadow:0 6px 16px rgba(242,106,27,.35)}
.step h3{font-size:1.08rem;margin-top:12px}
.step p{font-size:.93rem;color:var(--muted);margin:0}

/* ---- gallery ---- */
/* founder block on the Despre page */
.founder{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:center}
.founder-photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 18px 44px rgba(13,36,64,.16)}
.founder-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.founder-txt h2{margin:.2rem 0 .1rem}
.founder-role{color:var(--accent);font-weight:600;font-size:1rem;margin:0 0 1.1rem}
.founder-txt p{color:var(--muted);line-height:1.7}
.founder-txt strong{color:var(--navy)}
.founder-badges{display:flex;flex-wrap:wrap;gap:10px 20px;margin:1.4rem 0 1.6rem}
.founder-badges span{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:var(--navy)}
.founder-badges svg{width:19px;height:19px;color:var(--accent)}

/* FAQ — native <details> so it works without JS and stays keyboard-accessible */
.faq{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq details[open]{box-shadow:0 10px 28px rgba(13,36,64,.09)}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-family:var(--fh);font-weight:700;font-size:1.03rem;color:var(--navy);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* chevron */
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq-a{padding:0 20px 18px;border-top:1px solid var(--line);margin-top:-1px}
.faq .faq-a p{margin:14px 0 0;color:var(--muted);font-size:.97rem;line-height:1.65}
.faq .faq-a strong{color:var(--navy)}

/* contact form: honeypot + submit feedback */
.cf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cf button[disabled]{opacity:.65;cursor:progress}
.cf-note{margin:12px 0 0;font-size:.9rem;line-height:1.5;padding:0}
.cf-note:empty{display:none}
.cf-note.ok{color:#15704a;background:#e8f6ef;border:1px solid #b8e3ce;border-radius:10px;padding:11px 13px}
.cf-note.err{color:#96271b;background:#fdecea;border:1px solid #f4c2bc;border-radius:10px;padding:11px 13px}
.cf-note.err a{color:#96271b;font-weight:700;text-decoration:underline}

/* localities served — compact chip list on the contact page */
.loc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.loc-list li{font-size:.85rem;font-weight:600;color:var(--navy);background:var(--bg-soft-2);border:1px solid var(--line);border-radius:40px;padding:.35rem .75rem}

/* scanned authorisation documents — shown whole (contain), caption always visible */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.docs figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.docs figure:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(13,36,64,.13)}
.docs .doc-thumb{background:var(--bg-soft-2);padding:14px;display:flex;align-items:center;justify-content:center}
.docs .doc-thumb img{width:100%;height:310px;object-fit:contain;object-position:top}
.docs figcaption{padding:14px 16px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.docs figcaption b{font-family:var(--fh);font-size:1rem;color:var(--navy);line-height:1.25}
.docs figcaption span{font-size:.82rem;color:var(--muted);line-height:1.45}

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal.g3{grid-template-columns:repeat(3,1fr)}
.gal figure{margin:0;border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1;background:var(--bg-soft-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gal figure:hover img{transform:scale(1.08)}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(13,36,64,.55));opacity:0;transition:.25s}
.gal figure:hover::after{opacity:1}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;font-size:.8rem;font-weight:600;padding:12px 12px;opacity:0;transform:translateY(6px);transition:.25s}
.gal figure:hover figcaption{opacity:1;transform:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,18,32,.94);display:none;align-items:center;justify-content:center;padding:30px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb .x,.lb .nav-btn{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;border-radius:50%;width:52px;height:52px;font-size:1.5rem;display:grid;place-items:center;transition:.2s}
.lb .x:hover,.lb .nav-btn:hover{background:var(--accent)}
.lb .x{top:22px;right:24px}
.lb .prev{left:24px;top:50%;transform:translateY(-50%)}
.lb .next{right:24px;top:50%;transform:translateY(-50%)}

/* ---- service detail page ---- */
.page-hero{position:relative;color:#fff;background:var(--navy);overflow:hidden}
.page-hero .pbg{position:absolute;inset:0}
.page-hero .pbg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(9,26,48,.95),rgba(9,26,48,.7))}
/* .bright — the photo behind the navy has to read, not just tint it. The overlay
   stays heavy on the left, where the h1 and the paragraph sit, and thins out to
   the right so the image is actually visible. Used on verificare-centrale. */
.page-hero.bright .pbg img{opacity:.6}
.page-hero.bright::after{background:linear-gradient(105deg,rgba(9,26,48,.9) 0%,rgba(9,26,48,.74) 42%,rgba(9,26,48,.34) 100%)}
.page-hero .wrap{position:relative;z-index:2;padding:70px 22px}
.page-hero h1{color:#fff}
.page-hero p{color:#dbe6f3;max-width:60ch;font-size:1.1rem;margin:0}
.crumbs{font-size:.85rem;color:#b9c8da;margin-bottom:14px}
.crumbs a{color:#b9c8da}.crumbs a:hover{color:#fff}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:.35rem .85rem;border-radius:40px;font-family:var(--fh);font-weight:600;font-size:.82rem;margin-bottom:14px}
.pill i{width:9px;height:9px;border-radius:50%}

.prose{max-width:760px}
.prose h2{margin-top:1.6rem}
.prose h3{margin-top:1.4rem;color:var(--navy-2)}
.chk{list-style:none;padding:0;margin:1rem 0}
.chk li{position:relative;padding:0 0 0 34px;margin-bottom:12px}
.chk li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;background:var(--accent-l);border-radius:50%}
.chk li::after{content:"";position:absolute;left:7px;top:9px;width:7px;height:11px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.svc-side{position:sticky;top:100px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.card h3{font-size:1.15rem}
.mini-list{list-style:none;padding:0;margin:0}
.mini-list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}
.mini-list li>*{min-width:0}
/* the inline icons carry only a viewBox, no width/height — unsized, an SVG expands
   to fill its container, so it MUST be constrained here */
.mini-list li>span{display:inline-flex;align-items:center;gap:.45rem}
.mini-list svg{width:17px;height:17px;flex:none;color:var(--accent)}
.mini-list li:last-child{border:0}
.mini-list a{font-weight:600}

/* ---- services full list ---- */
.svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.svc-list .it{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:.2s}
.svc-list .it:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.svc-list .it .ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:var(--accent-l);color:var(--accent)}
.svc-list .it .ic svg{width:22px;height:22px}
.svc-list .it b{font-family:var(--fh);color:var(--ink);font-size:1rem;font-weight:600}
.svc-list .it a{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--accent);white-space:nowrap}

/* ---- headline services with a Cere ofertă button each (Servicii page) ---- */
.offer-list{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.of{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--radius);padding:16px 20px;transition:.2s}
.of:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.of-ic{width:46px;height:46px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-l);color:var(--accent)}
.of-ic svg{width:24px;height:24px}
.of-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.of-txt b{font-family:var(--fh);color:var(--ink);font-size:1.04rem;font-weight:700;line-height:1.3}
.of-more{font-size:.85rem;font-weight:600;color:var(--muted)}
.of-more:hover{color:var(--accent)}
.of-btn{flex:0 0 auto;padding:.7rem 1.3rem;font-size:.92rem}

/* ---- explained-service cards (Electrice) ---- */
.det-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.det{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.det:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.det{transition:.25s}
.det-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px}
.det-ic svg{width:25px;height:25px}
.det h3{font-size:1.1rem;margin-bottom:.5rem}
.det p{font-size:.95rem;color:var(--muted);flex:1;margin-bottom:1rem}
.det-cta{font-family:var(--fh);font-weight:700;font-size:.9rem;display:inline-flex;
  align-items:center;gap:.4rem;align-self:flex-start}
.det-cta svg{width:16px;height:16px;transition:.2s}
.det:hover .det-cta svg{transform:translateX(4px)}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ci{display:flex;gap:16px;margin-bottom:22px;align-items:flex-start}
.ci .ic{width:48px;height:48px;flex:0 0 auto;border-radius:12px;background:var(--accent-l);color:var(--accent);display:grid;place-items:center}
.ci .ic svg{width:23px;height:23px}
.ci b{font-family:var(--fh);color:var(--ink);display:block;font-size:1.02rem}
.ci a,.ci span{color:var(--body);font-size:.98rem}
form.cf label{display:block;font-family:var(--fh);font-weight:600;font-size:.85rem;color:var(--ink);margin:0 0 6px}
form.cf .fld{margin-bottom:16px}
form.cf input,form.cf select,form.cf textarea{width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:10px;font-family:var(--ff);font-size:1rem;color:var(--ink);background:#fff;transition:.2s}
form.cf input:focus,form.cf select:focus,form.cf textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}
form.cf .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---- cta band ---- */
.cta-band{background:linear-gradient(120deg,var(--navy),var(--navy-3));color:#fff;border-radius:var(--radius-lg);padding:52px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:#dbe6f3;max-width:55ch;margin:0 auto 1.5rem}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .btns .btn{max-width:100%}

/* ---- footer ---- */
footer.site{background:var(--navy);color:#b9c8da;padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px}
footer.site h4{color:#fff;font-size:1.02rem;letter-spacing:.02em;margin-bottom:1.1rem}
footer.site a{color:#b9c8da}footer.site a:hover{color:var(--accent)}
.fsocs{display:flex;gap:10px;margin-top:6px}
.fsoc{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.08);color:#fff}
.fsoc:hover{background:var(--accent);color:#fff}
.fsoc svg{width:20px;height:20px}
footer.site .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
footer.site .fbrand .mark{width:44px;height:44px;object-fit:contain}
footer.site .fbrand b{font-family:var(--fh);color:#fff;font-size:1.2rem}
.foot-links{list-style:none;padding:0;margin:0}
.foot-links li{margin-bottom:10px;font-size:.94rem}
.foot-contact li{display:flex;gap:10px;margin-bottom:12px;font-size:.94rem;align-items:flex-start}
.foot-contact svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto;margin-top:3px}
.legal-box{font-size:.86rem;line-height:1.7;color:#93a6bc}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding:22px 0;font-size:.85rem;color:#8598b0}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-bottom a{color:#8598b0}

/* ---- mobile sticky bottom bar ---- */
/* three cells now — both phone numbers must be reachable on mobile too, so the
   labels are the numbers themselves and the type scales down to fit 320px */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;grid-template-columns:1fr 1fr .85fr;background:var(--navy);box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.mobar a{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:13px 4px;color:#fff;font-family:var(--fh);font-weight:700;font-size:.82rem;white-space:nowrap;min-width:0}
.mobar a svg{width:16px;height:16px;flex:none}
.mobar .call{background:var(--accent)}
.mobar .call-2{background:var(--accent-d);box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.mobar .wa{background:#25d366;color:#08361a}
@media(max-width:359px){
  .mobar a{font-size:.75rem;gap:.25rem}
  .mobar a svg{width:14px;height:14px}
}

/* floating whatsapp desktop */
.wa-float{position:fixed;right:22px;bottom:26px;z-index:70;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 28px rgba(37,211,102,.45);transition:.2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;color:#fff}

/* ---- responsive ---- */
@media(max-width:980px){
  .hero-grid,.split,.split-aside,.contact-grid{grid-template-columns:1fr;gap:30px}
  .founder{grid-template-columns:1fr;gap:26px}
  .founder-photo{max-width:320px}
  /* photo first on mobile and shown WHOLE — the full 4:5 crop, head down to his
     hands on the desk. Width-capped so the headline still lands near the fold.
     The caption drops BELOW the image here: at this size the overlay gradient
     would sit right on top of his hands. */
  /* the desktop 88px top padding leaves a dead gap above the photo once it is
     the first thing in the hero on mobile */
  .hero .wrap{padding:26px 22px 56px}
  .hero-photo{order:-1;justify-self:center;max-width:290px;width:100%}
  .hero-photo figcaption{position:static;padding:12px 16px 14px;background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.16)}
  .svc-grid,.steps,.docs,.det-grid{grid-template-columns:repeat(2,1fr)}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .svc-side{position:static}
}
@media(max-width:760px){
  .hdr-actions{display:none}
  .hdr-nav{border-top:0;background:transparent}
  .nav-links{position:fixed;top:0;right:0;bottom:0;left:auto;height:100vh;height:100dvh;width:min(84vw,330px);overflow-y:auto;background:#fff;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;padding:90px 20px 34px;gap:0;transform:translateX(100%);transition:.3s;box-shadow:-10px 0 40px rgba(0,0,0,.18);margin:0;z-index:66}
  .nav-links.open{transform:none}
  .nav-links a{padding:.9rem .6rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav-cta{display:flex;justify-content:center;margin:16px 0 0;border:0}
  .hamb{display:block;z-index:70}
  .hamb.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .hamb.open span:nth-child(2){opacity:0}
  .hamb.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  /* the whole strip goes on mobile — the sticky bottom bar already carries
     Sună + WhatsApp, so it was duplicated contact taking vertical space */
  .topbar{display:none}
  .mobar{display:grid}
  .wa-float{display:none}
  body{padding-bottom:56px}
  .svc-grid,.steps,.svc-list,.gal,.gal.g3{grid-template-columns:1fr 1fr}
  .det-grid{grid-template-columns:1fr}
  /* the row would squeeze the button off-screen — stack it under the label */
  .of{flex-wrap:wrap;gap:12px 16px}
  .of-txt{flex:1 1 auto}
  .of-btn{flex:1 1 100%;justify-content:center}
  .foot-grid{grid-template-columns:1fr}
  .sec{padding:52px 0}
  .cta-band{padding:36px 24px}
  footer.site .foot-bottom .wrap{justify-content:center;text-align:center}
}
@media(max-width:430px){
  .svc-grid,.steps,.svc-list,.docs{grid-template-columns:1fr}
  .docs .doc-thumb img{height:320px}
  .cta-band{padding:32px 16px}
  .trust .wrap{grid-template-columns:1fr}
}
.fade{opacity:0;transform:translateY(24px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.fade.in{opacity:1;transform:none}