/* ==========================================================================
   Viva Solar — temă „Victron” (albastru RAL 5012 + galben)
   Experimental: folosită doar de index.html, deocamdată.
   ========================================================================== */

:root{
  --navy-950:#071726;
  --navy-900:#0A2138;
  --navy-800:#102E4A;
  --navy-700:#1A3C5C;

  --blue:#0089B6;        /* RAL 5012 */
  --blue-bright:#29ABE2;
  --blue-deep:#155A9C;
  --blue-pale:#E4F2F7;

  --yellow:#FFC629;
  --yellow-dark:#F0AE00;

  --paper:#F5F7F8;
  --ink:#0E1B24;
  --muted:#57636C;
  --line:#DCE3E8;

  --display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --gutter:clamp(20px, 5vw, 64px);
  --maxw:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

:focus-visible{
  outline:3px solid var(--blue-bright);
  outline-offset:3px;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}

/* ---------- Bara semnătură (albastru / galben) ---------- */
.bus{display:flex; gap:3px; width:100%;}
.bus span{display:block; height:3px; flex:1;}
.bus span:nth-child(1){background:var(--blue);}
.bus span:nth-child(2){background:var(--blue-bright);}
.bus span:nth-child(3){background:var(--yellow);}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex; align-items:center; gap:24px;
  height:68px;
}
.mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display);
  font-weight:700; font-size:26px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--navy-900);
  text-decoration:none;
  flex-shrink:0;
}
.mark em{color:var(--blue); font-style:normal;}
.mark img{height:32px; width:auto; display:block;}

.foot-brand{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.foot-brand img{height:36px; width:auto; display:block;}

.nav-links{
  display:flex; align-items:center; gap:30px;
  margin-right:auto;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
}
.nav-links a{
  color:var(--muted); text-decoration:none;
  padding:24px 0; border-bottom:2px solid transparent;
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--navy-900);}
.nav-links a[aria-current="page"]{color:var(--navy-900); border-bottom-color:var(--blue);}

.navcall{
  font-family:var(--mono); font-size:14px; font-weight:500;
  color:var(--ink); text-decoration:none;
  background:var(--yellow);
  padding:10px 18px;
  transition:background .15s ease;
  flex-shrink:0;
}
.navcall:hover{background:var(--yellow-dark);}

.hamburger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; flex-shrink:0;
}
.hamburger span{
  display:block; height:2px; width:100%; background:var(--navy-900);
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(180deg, rgba(10,33,56,.92), rgba(10,33,56,.98)),
    repeating-linear-gradient(0deg, rgba(41,171,226,.08) 0, rgba(41,171,226,.08) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(41,171,226,.08) 0, rgba(41,171,226,.08) 1px, transparent 1px, transparent 48px),
    var(--navy-900);
  color:#fff;
  padding-block:clamp(64px, 10vw, 120px) clamp(56px, 8vw, 96px);
  position:relative; overflow:hidden;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-bright);
  background:rgba(41,171,226,.12);
  border:1px solid rgba(41,171,226,.35);
  padding:7px 14px;
  margin-bottom:26px;
}
.eyebrow b{color:var(--yellow); font-weight:500;}
h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(42px, 7.6vw, 80px);
  line-height:1.0;
  letter-spacing:-.005em;
  text-transform:uppercase;
  max-width:16ch;
}
h1 .thin{font-weight:500; color:var(--blue-bright);}

.hero-rule{margin:32px 0 28px; max-width:420px;}
.hero-rule .bus span{position:relative; height:3px;}
.hero-rule .bus span:nth-child(3)::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, #FFF 40%, transparent);
  transform:translateX(-100%);
  animation:current 3.4s cubic-bezier(.4,0,.2,1) .5s infinite;
}
@keyframes current{
  0%{transform:translateX(-100%);}
  55%,100%{transform:translateX(320%);}
}
@media (prefers-reduced-motion: reduce){
  .hero-rule .bus span:nth-child(3)::after{animation:none; display:none;}
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important; animation-duration:.001ms !important;}
}

.lede{
  font-size:clamp(17px, 2vw, 20px);
  color:#C6D3DD;
  max-width:58ch;
}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); text-transform:uppercase;
  font-weight:600; font-size:20px; letter-spacing:.03em;
  padding:15px 28px; text-decoration:none;
  border:2px solid transparent;
  transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--yellow); color:var(--ink);}
.btn-primary:hover{background:var(--yellow-dark);}
.btn-ghost{border-color:rgba(255,255,255,.35); color:#fff;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.06);}

.hero-meta{
  margin-top:44px;
  display:flex; flex-wrap:wrap; gap:32px;
  font-family:var(--mono); font-size:13px; color:#8FA0AF;
}
.hero-meta b{display:block; color:#fff; font-weight:500; font-size:16px; margin-bottom:3px;}

/* ---------- Secțiuni ---------- */
section{padding-block:clamp(56px, 8vw, 100px);}
.sec-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:44px;
  border-bottom:1px solid var(--line); padding-bottom:16px;
}
.sec-head h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px, 4.2vw, 44px);
  text-transform:uppercase; line-height:1;
  color:var(--navy-900);
}
.sec-head .tag{
  font-family:var(--mono); font-size:12px; color:var(--blue);
  letter-spacing:.1em; text-transform:uppercase; margin-left:auto;
}

/* Servicii — grilă de carduri, gen tile-uri de produs */
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  padding:28px 26px;
  scroll-margin-top:84px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  border-color:var(--blue);
  transform:translateY(-3px);
  box-shadow:0 14px 28px -18px rgba(10,33,56,.35);
}
.service-grid .service-card:nth-child(3n+2){border-top-color:var(--blue-bright);}
.service-grid .service-card:nth-child(3n+3){border-top-color:var(--yellow);}
.service-card .code{
  display:inline-block;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  color:var(--blue); letter-spacing:.08em;
  background:var(--blue-pale);
  padding:4px 9px;
  margin-bottom:16px;
}
.service-card h3{
  font-family:var(--display); text-transform:uppercase;
  font-weight:600; font-size:24px; line-height:1.1; margin-bottom:10px;
  color:var(--navy-900);
}
.service-card p{color:var(--muted); font-size:15.5px;}

/* Cum lucrăm */
.dark{background:var(--navy-900); color:#fff;}
.dark .sec-head{border-bottom-color:var(--navy-700);}
.dark .sec-head h2{color:#fff;}
.dark .sec-head .tag{color:var(--blue-bright);}
.points{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:36px;}
.point{
  border-left:2px solid var(--navy-700);
  padding-left:22px;
}
.point h3{
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:23px; margin:14px 0 8px; color:#fff;
}
.point p{color:#AEBCC7; font-size:16px;}
.point .num{
  font-family:var(--mono); font-size:12px; color:var(--yellow); letter-spacing:.1em;
}

/* Zona */
.zone{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.zone span{
  font-family:var(--mono); font-size:13px; color:var(--blue-deep);
  border:1px solid var(--blue); padding:7px 14px;
  background:var(--blue-pale);
}

/* Contact */
.contact{background:var(--navy-950); color:#fff;}
.contact .sec-head{border-bottom-color:var(--navy-700);}
.contact .sec-head h2{color:#fff;}
.contact .sec-head .tag{color:var(--blue-bright);}
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:48px;}
.contact p.lede{margin-bottom:28px; color:#B7C4CD;}
.bigphone{
  font-family:var(--display); font-weight:700;
  font-size:clamp(38px, 6.5vw, 60px);
  letter-spacing:.01em; color:var(--yellow);
  text-decoration:none; display:inline-block; line-height:1;
}
.bigphone:hover{text-decoration:underline; text-underline-offset:6px;}
.contact-list{font-family:var(--mono); font-size:14px; color:#9AAAB6; line-height:2;}
.contact-list b{color:#fff; font-weight:500;}
.contact-list div + div{margin-top:18px;}
.contact-list a{color:var(--blue-bright);}

/* Footer */
footer{background:#000; color:#6B7A85; padding-block:36px;}
.foot{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
  font-family:var(--mono); font-size:12px; line-height:1.9;
}

/* Bara de apel pe mobil */
.sticky-call{display:none;}
@media (max-width:860px){
  .nav-links{
    display:none;
    position:absolute; top:68px; left:0; right:0;
    flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 18px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 0; border-bottom:1px solid var(--line); width:100%;}
  .nav-links a[aria-current="page"]{border-bottom-color:var(--blue);}
  .navcall{display:none;}
  .hamburger{display:flex;}
}
@media (max-width:720px){
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  body{padding-bottom:74px;}
  .sticky-call{
    display:block; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--yellow); color:var(--ink);
    text-align:center; padding:18px;
    font-family:var(--display); font-weight:700; font-size:22px;
    text-transform:uppercase; letter-spacing:.04em; text-decoration:none;
    border-top:2px solid var(--navy-900);
  }
}

.btn-ghost-ink{border-color:#C7D2D8; color:var(--ink);}
.btn-ghost-ink:hover{border-color:var(--navy-900);}

/* ---------- Pagini fără hero mare (sub-hero) ---------- */
.subhero{
  background:
    linear-gradient(180deg, rgba(10,33,56,.92), rgba(10,33,56,.98)),
    repeating-linear-gradient(0deg, rgba(41,171,226,.08) 0, rgba(41,171,226,.08) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(41,171,226,.08) 0, rgba(41,171,226,.08) 1px, transparent 1px, transparent 48px),
    var(--navy-900);
  color:#fff;
  padding-block:clamp(44px, 7vw, 72px) clamp(36px, 5vw, 56px);
}
.subhero h1{font-size:clamp(36px, 6.5vw, 62px); max-width:20ch;}
.subhero .lede{margin-top:20px;}

/* ==========================================================================
   Lucrări — galerie
   ========================================================================== */
.gal-cat{padding-block:clamp(40px, 6vw, 64px);}
.gal-cat + .gal-cat{border-top:1px solid var(--line);}
.gal-cat h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(26px, 3.6vw, 36px); margin-bottom:24px;
  color:var(--navy-900);
}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;}
.gallery figure{cursor:zoom-in;}
.shot{
  aspect-ratio:4/3; background:var(--blue-pale); overflow:hidden;
  border:1px solid var(--line);
}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.gallery figure:hover .shot img{transform:scale(1.04);}
.cap{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:8px;}

/* Card lucrare — click duce la pagina de detaliu */
.gallery-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gallery-card:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(10,33,56,.3);}
.gallery-card:hover .shot img{transform:scale(1.04);}
.gallery-card .shot{border:0; border-bottom:1px solid var(--line); cursor:pointer;}
.card-body{padding:14px 16px 16px;}
.card-title{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:18px; line-height:1.15; margin-bottom:8px;
  color:var(--navy-900);
}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed; inset:0; z-index:100;
  background:rgba(4,17,28,.94);
  align-items:center; justify-content:center;
  padding:32px;
}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:min(1100px, 92vw); max-height:88vh; text-align:center;}
.lightbox-inner img{max-height:78vh; margin:0 auto; width:auto;}
.lightbox-cap{font-family:var(--mono); font-size:13px; color:#C6D3DD; margin-top:16px;}
.lightbox-close{
  position:absolute; top:20px; right:24px;
  width:44px; height:44px;
  border:1px solid var(--navy-700); color:#fff;
  font-size:22px; line-height:1;
}
.lightbox-close:hover{background:var(--navy-700);}

/* ==========================================================================
   Configurator / GDPR — pagini "în lucru"
   ========================================================================== */
.wip-card{
  border:1px solid var(--navy-700); background:var(--navy-800);
  padding:clamp(28px, 5vw, 48px); margin-top:8px;
}
.wip-tag{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); background:var(--yellow);
  padding:5px 10px; margin-bottom:20px;
}
.wip-card h2{
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:clamp(24px, 3.4vw, 32px); margin-bottom:16px; color:#fff;
}
.wip-card p{color:#AEBCC7; max-width:62ch; margin-bottom:14px;}
.wip-list{list-style:none; margin:20px 0; display:grid; gap:10px;}
.wip-list li{
  font-family:var(--mono); font-size:14px; color:#C6D3DD;
  padding-left:22px; position:relative;
}
.wip-list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:9px; height:3px; background:var(--blue-bright);
}
#configurator-app{margin-top:12px;}

/* ==========================================================================
   Formular de contact
   ========================================================================== */
.form-field{margin-bottom:18px;}
.form-field label{
  display:block; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.form-field input, .form-field textarea{
  width:100%; background:var(--navy-900); color:#fff;
  border:1px solid var(--navy-700); padding:13px 14px;
  font-family:var(--body); font-size:16px;
}
.form-field textarea{resize:vertical; min-height:120px;}
.form-field input::placeholder, .form-field textarea::placeholder{color:#7089A0;}
.form-note{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:14px;}
.form-field input.field-invalid, .form-field textarea.field-invalid{border-color:#E0483F;}
.field-error{font-family:var(--mono); font-size:12px; color:#C7362D; margin-top:6px;}

.form-check{display:flex; align-items:flex-start; gap:10px; margin-bottom:20px;}
.form-check input[type="checkbox"]{width:auto; flex-shrink:0; margin-top:4px; accent-color:var(--blue);}
.form-check label{font-family:var(--body); font-size:14px; color:var(--muted); line-height:1.5;}
.form-check label a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}
.form-check label a:hover{color:var(--navy-900);}

.form-success{
  border:1px solid var(--blue); background:var(--blue-pale);
  padding:20px 22px; font-family:var(--body); font-size:15.5px; color:var(--ink); max-width:520px;
}
.form-error-box{
  border:1px solid #E0483F; background:rgba(224,72,63,.07);
  padding:16px 18px; margin-top:18px; font-family:var(--body); font-size:14.5px; color:var(--ink); max-width:520px;
}
.form-error-box a{color:#C7362D; font-weight:600; text-decoration:underline;}
.hidden-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}