html,body{margin:0;padding:0}
body{background:#15171b}
*{box-sizing:border-box}
::selection{background:#F5B027;color:#15171b}
@keyframes upg-dash{to{stroke-dashoffset:0}}
@keyframes upg-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes upg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes upg-ring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes upg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes upg-kenburns{from{transform:scale(1.06)}to{transform:scale(1.16)}}
@keyframes upg-flow{to{stroke-dashoffset:-224}}
@keyframes upg-spin{to{transform:rotate(360deg)}}
#upg input::placeholder,#upg textarea::placeholder{color:#6b7079}
#upg select{appearance:none;-webkit-appearance:none}
#upg a{text-decoration:none}
#upg h1,#upg h2,#upg h3{text-wrap:balance}
#upg p{text-wrap:pretty}
@media (max-width:860px){.upg-topbar{display:none}}
@media (max-width:560px){.upg-hero-sub{white-space:normal;text-wrap:balance}}
@keyframes upg-route{to{background-position:0 -12px}}
#upg .upg-zone{transition:background .25s ease,padding-left .25s ease}
#upg .upg-zone:hover{background:rgba(245,176,39,.07);padding-left:28px}
#upg .upg-zone:hover .upg-zone-name{color:#fff}
#upg .upg-zone-arrow{opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease}
#upg .upg-zone:hover .upg-zone-arrow{opacity:1;transform:none}
@keyframes hx-open{0%{opacity:0;transform:scale(.55)}62%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes hx-img{0%{opacity:0;transform:scale(.5) rotate(-8deg)}100%{opacity:1;transform:none}}
@keyframes hx-txt{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes hx-hint{0%,100%{opacity:.55}50%{opacity:1}}
#upg .hexg{cursor:pointer}
#upg .hexg .hexpoly{transition:fill .3s ease,filter .3s ease}
#upg .hexg .hexicon{color:#F5B027;transition:color .3s ease}
#upg .hexg .hexlabel{transition:fill .3s ease}
#upg .hexg:hover .hexpoly{fill:rgba(245,176,39,.16);filter:drop-shadow(0 0 12px rgba(245,176,39,.45))}
#upg .hexg:hover .hexicon{color:#F8C64F}
#upg .hexg.active .hexpoly{fill:#F5B027;filter:drop-shadow(0 0 18px rgba(245,176,39,.6))}
#upg .hexg.active .hexicon{color:#15171b}
#upg .hexg.active .hexlabel{fill:#15171b}
#upg .hx-close:hover{background:rgba(245,176,39,.16)!important;border-color:rgba(245,176,39,.5)!important}
#upg .hx-cta:hover{background:#ffc23d!important}
/* Mobile: keep the footer Services + Service-areas link columns in the DOM so the 7
service pages stay crawlable (Google follows in-DOM even when not painted),
but visually hide them (sr-only) so the mobile footer isn't a long scroll. */
@media (max-width:720px){
#upg .upg-foot-hide{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
/* ===== reserve hero services area to prevent layout shift (CLS) =====
hex-cluster.js swaps the static fallback for the SVG cluster after load.
The SVG renders at width*0.648 (viewBox 1000x648) + ~35px hint bar, so we
reserve exactly that from first paint. Mobile shows the shorter grid. */
#upg [data-hexes]{min-height:calc(min(940px, 100vw - 2 * clamp(16px, 4vw, 56px)) * 0.648 + 35px)}
/* mobile shows the 3-col hex grid (10 items = 4 rows); height is linear in width */
@media (max-width:720px){#upg [data-hexes]{min-height:calc(1.2287 * min(470px, 100vw - 2 * clamp(16px, 4vw, 56px)) + 230px)}}
/* ===== mobile tap targets >= 44px (SEO + usability) ===== */
@media (max-width:860px){
#upg .upg-lang{padding:12px 16px!important}
#upg .upg-menu nav a{min-height:46px;display:flex;align-items:center}
}
@media (max-width:720px){
#upg footer a[aria-label]:not([href*="anpc"]){width:44px!important;height:44px!important}
#upg footer>div:last-child a{padding:11px 6px;min-height:44px;display:inline-flex;align-items:center}
}
.upg-totop{position:fixed;left:14px;bottom:16px;z-index:1200;width:38px;height:38px;border-radius:50%;border:1px solid rgba(245,176,39,.55);background:rgba(16,18,22,.88);color:#F5B027;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,visibility .3s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.upg-totop.show{opacity:1;visibility:visible;transform:none}
.upg-totop:hover{background:#F5B027;color:#15171b}
body:has([data-hx-card]) .upg-totop{opacity:0!important;visibility:hidden!important}
#upg #contact a[href^="tel"],#upg #contact a[href^="mailto"]{transition:transform .35s cubic-bezier(.22,.65,.25,1),border-color .35s ease}
#upg #contact a[href^="tel"]:hover,#upg #contact a[href^="mailto"]:hover{transform:translateY(-3px);border-color:rgba(245,176,39,.45)}
#upg [data-brands-grid]>div{transition:transform .3s cubic-bezier(.22,.65,.25,1),box-shadow .3s ease}
#upg [data-brands-grid]>div:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
body:has([data-hx-card]) a[aria-label="WhatsApp"]{opacity:0!important;visibility:hidden!important}
/* ===== pulsing popup service icon ===== */
@keyframes hx-iconpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,176,39,.5),0 0 12px 2px rgba(245,176,39,.45)}50%{box-shadow:0 0 0 10px rgba(245,176,39,0),0 0 22px 6px rgba(245,176,39,.85)}}
/* ===== accessibility: visible keyboard focus ===== */
#upg a:focus-visible,#upg button:focus-visible,#upg input:focus-visible,#upg textarea:focus-visible,#upg select:focus-visible,.upg-totop:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
#upg .hexg:focus{outline:2px solid #F5B027;outline-offset:3px}
#upg [data-hexbtn]:focus-visible{outline:2px solid #F5B027;outline-offset:3px}
/* ===== accessibility: footer text contrast (AA on dark) ===== */
#upg footer p,#upg footer a,#upg footer li span[data-en]{color:#aab0b8!important}
#upg footer>div:last-child span,#upg footer>div:last-child a{color:#949aa3!important}
#upg footer a{transition:color .2s ease}
#upg footer a:hover{color:#fff!important}
#upg footer ul a{display:inline-block;transition:color .2s ease,padding-left .2s ease}
#upg footer ul a:hover{color:#fff!important;padding-left:5px}
/* ===== back-to-top arrow centering ===== */
.upg-totop{box-sizing:border-box}
.upg-totop svg{display:block}
/* ===== floating contact stack (WhatsApp + Urgențe) ===== */
.upg-emg{transition:transform .25s ease,box-shadow .25s ease}
.upg-emg:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(229,72,77,.5)}
.upg-fabs .upg-wa{transition:transform .25s ease}
.upg-fabs .upg-wa:hover{transform:translateY(-2px)}
body:has([data-hx-card]) .upg-fabs{opacity:0!important;visibility:hidden!important;transition:opacity .25s ease,visibility .25s}
@media (max-width:720px){
.upg-fabs .upg-wa,.upg-fabs .upg-emg{width:56px!important;height:56px!important;padding:0!important;border-radius:50%!important;justify-content:center!important;gap:0!important}
.upg-fabs .upg-wa>span:last-child,.upg-fabs .upg-emg>span:last-child{display:none!important}
}
/* ===== mobile header — CSS-driven (JS only toggles .upg-open); works even if script.js fails ===== */
@media (max-width:860px){
#upg .upg-burger{display:flex!important}
#upg .upg-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column!important;align-items:stretch!important;gap:0!important;background:#101216;border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 18px 30px rgba(0,0,0,.4);padding:0;display:none!important}
#upg header.upg-open .upg-menu{display:flex!important;padding:8px 0 14px}
#upg .upg-menu nav{flex-direction:column;align-items:stretch;gap:0}
#upg .upg-menu nav a{padding:13px clamp(16px,4vw,56px);font-size:16px}
#upg .upg-menu nav + div{padding:14px clamp(16px,4vw,56px) 4px;justify-content:space-between;gap:14px}
#upg #top h1 span[data-en]{white-space:normal}
}