/* =========================================================
   SAMGEC — Premium PV Installer
   Design tokens, layout, components, animations
   ========================================================= */

:root {
  /* Deep blues — derived from the logo blue, darkened for backgrounds */
  --bg-deep: #052740;
  --bg-navy: #0A3D63;
  --brand-navy: #115C93;

  /* Logo blue system.
     --brand-blue is the exact logo blue (#19A7FC): use it for fills, glows,
     gradients and text on dark backgrounds.
     --accent is a darkened version reserved for text, links and small UI on
     white, where the logo blue itself would fail contrast (2.6:1 vs 4.7:1). */
  --brand-blue: #19A7FC;
  --accent: #0A78C2;
  --accent-strong: #075E9B;
  --accent-soft: #7CC9FD;
  --accent-glow: rgba(25, 167, 252, 0.32);
  --accent-tint: #EAF6FE;

  /* Logo red — used sparingly, softened so it reads as an accent, not a warning */
  --brand-red: #E22A2A;
  --red-soft: #FF6E6E;
  --red-tint: #FDEDED;

  --ink-900: #0E1116;
  --ink-700: #28323F;
  --ink-600: #5A6473;
  --ink-400: #8B96A6;
  --line: #E4EBF2;
  --surface: #F5F8FB;
  --white: #FFFFFF;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(5, 39, 64, 0.06), 0 2px 8px rgba(5, 39, 64, 0.04);
  --shadow-md: 0 12px 32px rgba(5, 39, 64, 0.10);
  --shadow-lg: 0 24px 64px rgba(5, 39, 64, 0.16);

  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 3vw, 2.25rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --nav-h: 76px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

::selection { background: var(--accent); color: var(--white); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--ink-900);
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
h4 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink-700); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
  /* Underlined label instead of the old leading rule */
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.4rem;
}
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink-600); max-width: 64ch; }

.num { font-family: var(--font-display); font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--section-y); position: relative; }
/* Anchor targets must clear the fixed nav when jumped to via /#servicii etc. */
:target, section[id], [id="ofertă"] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
section.dark { background: var(--bg-deep); color: #DCE3EC; }
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: var(--white); }
section.dark p { color: #A9B5C5; }
section.dark .eyebrow { color: var(--accent-soft); }
section.surface { background: var(--surface); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1.1fr 1fr; } .split.reverse { grid-template-columns: 1fr 1.1fr; } .split.reverse > *:first-child { order: 2; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  box-shadow: 0 8px 24px var(--accent-glow);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--accent-glow); --btn-bg: var(--accent-strong); --btn-bd: var(--accent-strong); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform 0.25s ease; }
.btn:hover .arr { transform: translateX(4px); }

.btn.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: var(--ink-900);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--ink-900); --btn-fg: var(--white); }
.btn.ghost.invert { --btn-fg: var(--white); --btn-bd: rgba(255,255,255,0.4); }
.btn.ghost.invert:hover { background: var(--white); --btn-fg: var(--ink-900); --btn-bd: var(--white); }

.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.nav.solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--white); letter-spacing: 0.02em; }
.nav.solid .nav-logo { color: var(--ink-900); }
.nav-logo img { height: 64px; width: auto; }
.nav-links { display: flex; gap: 1.85rem; align-items: center; }
.nav-links a { font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.85); position: relative; transition: color 0.25s ease; }
.nav.solid .nav-links a { color: var(--ink-700); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brand-blue); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.nav-phone { display: none; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--white); }
.nav.solid .nav-phone { color: var(--ink-900); }
@media (min-width: 980px) { .nav-phone { display: inline-flex; } }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--white); position: relative; transition: background 0.2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--white); transition: transform 0.3s ease, top 0.3s ease; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav.solid .nav-toggle span,
.nav.solid .nav-toggle span::before,
.nav.solid .nav-toggle span::after { background: var(--ink-900); }
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-cta .btn:not(.is-mobile) { display: none; }
  .nav-toggle { display: inline-flex; }
}
.nav-open .nav-toggle span { background: transparent !important; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 2rem;
}
.nav-overlay a { color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.5rem); }
.nav-overlay a:hover { color: var(--brand-blue); }
.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
.nav-open body, .nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 5rem;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(120% 80% at 75% 20%, #14567F 0%, #052740 55%, #021320 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 80% 30%, var(--accent-glow), transparent 55%);
  z-index: -1;
  filter: blur(40px);
  animation: heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }

.hero-eyebrow { color: var(--accent-soft); }
.hero h1 { color: var(--white); }
.hero h1 .word { display: inline-block; }
.hero h1 .ink { color: var(--brand-blue); }
.hero-lead { color: rgba(255,255,255,0.78); font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 56ch; margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.hero-stats { display: flex; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 3rem; flex-wrap: wrap; }
.hero-stats .stat-num { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; color: var(--accent-soft); display: block; line-height: 1; }
.hero-stats .stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-top: 0.4rem; display: block; max-width: 160px; }

/* Hero asset placeholder */
.hero-asset {
  position: relative;
  aspect-ratio: 16/12;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(25,167,252,0.18) 0%, rgba(17,92,147,0.40) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 22px);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-asset::after {
  content: "NANO BANANA 3D PANEL ASSET 16:9";
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
}
.hero-asset svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

/* Homepage: full-bleed photo hero.
   The photo is a bright sky over panels, so a blue scrim carries the brand
   colour and buys contrast for the copy — heaviest at the left where the text
   sits, thinning to the right so the panels still read as a photograph. */
.hero-photo {
  background-image:
    linear-gradient(96deg,
      rgba(4, 26, 43, 0.94) 0%,
      rgba(5, 39, 64, 0.86) 32%,
      rgba(12, 70, 112, 0.62) 60%,
      rgba(25, 167, 252, 0.28) 100%),
    linear-gradient(to top, rgba(4, 26, 43, 0.85) 0%, rgba(4, 26, 43, 0) 42%),
    url("../assets/Homepage.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center bottom;
  background-repeat: no-repeat;
}
/* PV page: same treatment, its own photo. The panels fill the left of the
   frame and the sky sits right, so the scrim runs the other way. */
.hero-photo-pv {
  background-image:
    linear-gradient(96deg,
      rgba(4, 26, 43, 0.93) 0%,
      rgba(5, 39, 64, 0.84) 38%,
      rgba(12, 70, 112, 0.58) 68%,
      rgba(25, 167, 252, 0.24) 100%),
    linear-gradient(to top, rgba(4, 26, 43, 0.85) 0%, rgba(4, 26, 43, 0) 42%),
    url("../assets/homepage-2.jpg");
  background-position: center, center, center;
}

/* Copy runs the full width of the container so the headline reads across
   rather than stacking into a narrow column beside an image. */
.hero-photo .hero-copy { max-width: 68rem; }
.hero-photo h1 { max-width: 24ch; }
.hero-photo .hero-lead { max-width: 62ch; }
@media (max-width: 640px) {
  .hero-photo { background-position: center, center, 70% bottom; }
}

/* Despre: history content living in the hero shell. Plain <p> and .metric are
   styled for light sections, so they need the hero's dark-ground treatment. */
.hero-story h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 1.25rem; }
.hero-story p { color: rgba(255, 255, 255, 0.78); font-size: 1.02rem; max-width: 62ch; }
.hero-story .metric { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.hero-story .metric .v { color: var(--accent-soft); }
.hero-story .metric .l { color: rgba(255, 255, 255, 0.65); }

/* Scroll cue */
.scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.25em; color: rgba(255,255,255,0.55); text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.scroll-cue .line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); animation: scrollCue 2s ease-in-out infinite; transform-origin: top; }
@keyframes scrollCue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--bg-navy);
  color: rgba(255,255,255,0.75);
  padding-block: 1.5rem;
}
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: center; }
.trust-strip .item { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 500; font-size: 0.88rem; letter-spacing: 0.04em; }
.trust-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-soft); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2vw, 2rem);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card .ico {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-strong), var(--brand-blue));
  display: grid; place-items: center;
  color: var(--white);
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 18px var(--accent-glow);
}
.card h3 { margin-bottom: 0.5rem; }
.card p { margin-bottom: 0; font-size: 0.97rem; }
.card.dark { background: var(--bg-navy); border-color: rgba(255,255,255,0.06); }
.card.dark:hover { border-color: var(--brand-blue); }
.card.dark p { color: rgba(255,255,255,0.7); }
.card.dark h3 { color: var(--white); }

/* ---------- Section header ---------- */
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- Process timeline ---------- */
.timeline {
  position: relative;
  display: grid;
  gap: 1.25rem;
  counter-reset: step;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline.dark::before { background: rgba(255,255,255,0.1); }
.timeline .progress {
  position: absolute;
  left: 30px;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, var(--accent-strong), var(--brand-blue));
  z-index: 1;
}
.step {
  position: relative;
  padding-left: 80px;
  padding-block: 0.5rem;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-600);
  z-index: 2;
  transition: all 0.35s ease;
}
.timeline.dark .step::before { background: var(--bg-navy); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
.step.is-active::before { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: 0 8px 24px var(--accent-glow); }
.step h4 { margin-bottom: 0.35rem; font-family: var(--font-display); font-size: 1.15rem; }
.step .dur { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 999px; background: var(--surface); color: var(--ink-600); font-size: 0.75rem; font-weight: 500; margin-bottom: 0.55rem; }
.timeline.dark .step .dur { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.step p { font-size: 0.96rem; margin: 0; }

/* ---------- Hardware grid ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.brand-grid .b {
  background: var(--white);
  padding: 1.75rem 1rem;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.brand-grid .b:hover { background: var(--bg-deep); color: var(--white); }

/* ---------- Big numbers / metrics ---------- */
.metrics { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.metric { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); }
.metric .v { font-family: var(--font-display); font-size: clamp(2.4rem, 3.5vw, 3.4rem); font-weight: 700; color: var(--accent); line-height: 1; display: block; }
.metric .l { display: block; margin-top: 0.5rem; color: var(--ink-600); font-size: 0.95rem; }
section.dark .metric { background: rgba(255,255,255,0.04); }
section.dark .metric .l { color: rgba(255,255,255,0.65); }

/* ---------- System examples ---------- */
.system-card {
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.system-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.system-card .tag { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--surface); color: var(--ink-700); font-size: 0.75rem; font-weight: 600; font-family: var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1rem; }
.system-card.featured { background: var(--bg-deep); color: var(--white); border-color: transparent; }
.system-card.featured h3, .system-card.featured .v { color: var(--white); }
.system-card.featured .tag { background: var(--brand-red); color: var(--white); }
.system-card.featured p { color: rgba(255,255,255,0.7); }
.system-card.featured li { color: rgba(255,255,255,0.85); }
.system-card .price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; margin-block: 0.5rem 1.25rem; }
.system-card ul.feat { display: grid; gap: 0.55rem; margin-bottom: 1.5rem; }
.system-card ul.feat li { font-size: 0.95rem; padding-left: 1.4rem; position: relative; }
.system-card ul.feat li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

/* ---------- Badge cards (authorisations, components) ----------
   Same card shell and blue icon tile as the services grid, but the tile holds
   a short label instead of an SVG. Sized so the longest label in use (MMSSF)
   fits inside the 48px box without wrapping or clipping. */
.badge-card .ico {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--white);
  text-align: center;
  padding: 0 2px;
  white-space: nowrap;
}
.badge-card h3 { font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.badge-card p { font-size: 0.92rem; margin: 0; }

/* ---------- Authorizations wall (despre / panouri pages) ---------- */
.auth-wall {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.auth { background: var(--white); padding: 1.4rem 1.25rem; display: flex; gap: 0.85rem; align-items: flex-start; }
.auth .badge { width: 38px; height: 38px; border-radius: 8px; background: var(--bg-deep); color: var(--accent-soft); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em; flex-shrink: 0; }
.auth strong { display: block; font-family: var(--font-display); font-size: 0.97rem; color: var(--ink-900); margin-bottom: 0.2rem; }
.auth span { font-size: 0.85rem; color: var(--ink-600); line-height: 1.45; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.5rem; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq details[open] { border-color: var(--accent); box-shadow: 0 6px 24px rgba(25,167,252,0.14); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-900);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--accent); transition: transform 0.3s ease; font-weight: 300; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { margin: 1rem 0 0; color: var(--ink-700); font-size: 0.98rem; }

/* ---------- Quote / testimonial ---------- */
.quote {
  border-left: 3px solid var(--accent);
  padding: 1rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink-900);
  font-weight: 500;
}
.quote cite { display: block; font-style: normal; font-size: 0.88rem; color: var(--ink-600); font-weight: 500; margin-top: 0.75rem; font-family: var(--font-body); }
section.dark .quote { color: var(--white); }
section.dark .quote cite { color: rgba(255,255,255,0.6); }

/* ---------- CTA block ---------- */
.cta-block {
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--accent-glow), transparent 60%),
    linear-gradient(135deg, #052740 0%, #115C93 100%);
  color: var(--white);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 760px) { .cta-block { grid-template-columns: 1.5fr 1fr; } }
.cta-block h2 { color: var(--white); margin: 0; }
.cta-block p { color: rgba(255,255,255,0.78); margin: 0.75rem 0 0; }
.cta-block .actions { display: flex; gap: 0.85rem; flex-wrap: wrap; justify-self: start; }
@media (min-width: 760px) { .cta-block .actions { justify-self: end; flex-direction: column; align-items: stretch; min-width: 240px; } }

/* ---------- Form ---------- */
.form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 1.1rem;
}
.form .row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form .row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--ink-700); letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font: inherit;
  background: var(--white);
  color: var(--ink-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 1rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(25, 167, 252, 0.18);
}
.field textarea { resize: vertical; min-height: 120px; }
.consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--ink-600); }
.consent input { margin-top: 0.25rem; }

/* ---------- Footer ---------- */
.footer {
  background: var(--bg-deep);
  color: rgba(255,255,255,0.7);
  padding: 5rem 0 2rem;
}
.footer .grid-cols { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr repeat(3, 1fr); align-items: start; }
@media (max-width: 880px) { .footer .grid-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer .grid-cols { grid-template-columns: 1fr; } }
.footer h4 { color: var(--white); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.25rem; }
.footer a { display: block; padding: 0.3rem 0; transition: color 0.2s ease; color: rgba(255,255,255,0.7); font-size: 0.95rem; }
.footer a:hover { color: var(--brand-blue); }
.footer .brand p { color: rgba(255,255,255,0.6); font-size: 0.95rem; max-width: 36ch; }
.footer .legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.45); }
.footer .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.footer .badge-mini { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.75); }

/* ---------- Floating contact ---------- */
.float-actions { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: flex; flex-direction: column; gap: 0.6rem; }
.float-actions a { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--white); box-shadow: var(--shadow-md); transition: transform 0.25s ease; }
.float-actions a.wa { background: #25D366; }
.float-actions a:hover { transform: scale(1.08); }
.float-actions svg { width: 22px; height: 22px; }

/* ---------- Reveal animations (initial state) ---------- */
.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s ease, transform 1s ease; }
.reveal.show { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero::before { animation: none; }
  .scroll-cue .line { animation: none; }
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.muted { color: var(--ink-600); }
.hl { color: var(--accent); }
.divider { height: 1px; background: var(--line); width: 100%; margin-block: 3rem; }
.spacer-sm { height: 1.5rem; }
.spacer { height: 3rem; }
.no-mb { margin-bottom: 0 !important; }

/* Every services card wears the treatment the photovoltaic one used to have
   on its own: accent border and a white-to-blue wash. Higher specificity than
   .card:hover, which would otherwise clear the border on hover. */
#servicii .stagger-cards > .card {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--white) 0%, var(--accent-tint) 100%);
}
#servicii .stagger-cards > .card:hover { border-color: var(--accent-strong); }

/* ---------- Expandable cards (click to zoom to centre) ----------
   Collapsed cards show only the icon + title. On click JS pins the card with
   position:fixed at its current rect, then animates left/top/width/height to a
   centred target — a real geometry morph, so text is never scaled or blurred.
   A placeholder holds the card's grid slot so the layout behind never jumps. */
.card.is-expandable { cursor: pointer; }
.card.is-expandable .card-body,
.card.is-expandable .card-actions { display: none; }
.card.is-expandable.is-open .card-body { display: block; }
.card.is-expandable.is-open .card-actions { display: flex; }

/* Cards are only clickable once JS is ready; without it they stay plain cards. */
.card.is-expandable:hover { border-color: var(--accent); }

.card-placeholder { visibility: hidden; }

.card-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 39, 64, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.card-backdrop.show { opacity: 1; pointer-events: auto; }

.card.is-open,
.card.is-open:hover {
  position: fixed;
  z-index: 201;
  margin: 0;
  cursor: default;
  transform: none;
  overflow-y: auto;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 40px 90px rgba(5, 39, 64, 0.35);
  transition:
    top 0.48s cubic-bezier(0.22, 0.8, 0.28, 1),
    left 0.48s cubic-bezier(0.22, 0.8, 0.28, 1),
    width 0.48s cubic-bezier(0.22, 0.8, 0.28, 1),
    height 0.48s cubic-bezier(0.22, 0.8, 0.28, 1),
    box-shadow 0.48s ease;
}
/* Direct child only — the PV card nests .card.dark tiles with their own h3 */
.card.is-open > h3 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.card.is-open .card-body,
.card.is-open .card-actions { animation: cardBodyIn 0.32s ease 0.16s both; }
@keyframes cardBodyIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* On the way out, fade the details first so the shrink doesn't reflow text */
.card.is-closing .card-body,
.card.is-closing .card-actions { animation: none; opacity: 0; transition: opacity 0.16s ease; }

.card-actions { gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- "Sisteme fotovoltaice": richer expanded layout ----------
   Opens wider than the other cards (data-expand-width) and swaps the icon for
   the title, then lays out the paperwork story on the left and the three
   document tiles on the right. Collapsed, it is an ordinary card. */
.card-pv.is-open > .ico { display: none; }
.card-pv.is-open > h3 { margin-bottom: 0.9rem; }

/* Capability list reads as a row of chips here — a column of bullets would
   fight the two-column body below it. */
.pv-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; }
.pv-chips li {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(10, 120, 194, 0.25);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
}

.pv-expand { display: grid; gap: clamp(1.25rem, 2.5vw, 2.25rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) {
  .pv-expand { grid-template-columns: 1.05fr 0.95fr; }
  /* The tile stack is taller than the text; centring the text against it
     reads as deliberate instead of leaving a gap under the paragraph. */
  .pv-expand-main { align-self: center; }
}
.pv-expand-main h4 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--ink-900);
}
.pv-expand-main p { margin: 0; color: var(--ink-700); }
.pv-expand-side { display: grid; gap: 0.85rem; }
.pv-expand-side .card { padding: 1.15rem 1.3rem; }
.pv-expand-side .card h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.pv-expand-side .card p { font-size: 0.9rem; }

/* Page must not scroll under a pinned card */
html.card-zoom-open, html.card-zoom-open body { overflow: hidden; }

/* ---------- Card feature lists (generic) ---------- */
.card ul.feat { display: grid; gap: 0.5rem; margin: 0.25rem 0 0; }
.card ul.feat li { font-size: 0.95rem; color: var(--ink-700); padding-left: 1.4rem; position: relative; }
.card ul.feat li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

/* ---------- Portfolio: work cards + lightbox ----------
   Each card carries its project's first photo via --cover (set inline in
   proiecte.html) behind a blue scrim, so the grid previews the work itself.
   The scrim is opaque enough at the bottom to keep the copy legible over any
   photo, and lifts towards the top so the image still reads. */
.work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 340px;
  border-color: transparent;
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 26, 43, 0.42) 0%,
      rgba(4, 26, 43, 0.72) 42%,
      rgba(5, 39, 64, 0.93) 78%,
      rgba(5, 39, 64, 0.97) 100%),
    var(--cover, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-size 0.6s ease;
}
.work-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.work-card .tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
/* Push the copy to the bottom, where the scrim is densest */
.work-card h3 { font-size: 1.15rem; line-height: 1.25; margin-bottom: 0.5rem; margin-top: auto; color: var(--white); }
.work-card p { font-size: 0.94rem; margin-bottom: 0.75rem; color: rgba(255, 255, 255, 0.82); }
.work-card .work-meta {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 1.1rem;
}
.work-card .btn { margin-top: 0; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 15, 26, 0.95);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.lb.show { opacity: 1; pointer-events: auto; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 2rem); color: var(--white); }
.lb-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2vw, 1.3rem); }
.lb-count { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin-left: 0.75rem; font-family: var(--font-display); }
.lb-close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--white); display: grid; place-items: center; font-size: 1.5rem; line-height: 1; flex-shrink: 0; transition: background 0.2s ease; }
.lb-close:hover { background: var(--accent); }
/* grid-template-rows: minmax(0, 1fr) is load-bearing — with an auto row the
   track grows to the image's natural height and the max-height:100% below has
   nothing definite to resolve against, so tall photos overflow the stage. */
.lb-stage { flex: 1; min-height: 0; position: relative; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 0 clamp(0.5rem, 5vw, 4.5rem); overflow: hidden; }
.lb-media { height: 100%; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lb-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); }
/* A video has no intrinsic size until metadata loads, so let it take the stage
   and rely on object-fit rather than collapsing to the 300x150 default. */
.lb-media video { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); background: #000; }
/* .lb-nav/.lb-strip set display, which would otherwise beat the [hidden] attribute */
.lb-nav[hidden], .lb-strip[hidden] { display: none; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--white); display: grid; place-items: center; transition: background 0.2s ease; }
.lb-nav:hover { background: var(--accent); }
.lb-prev { left: clamp(0.4rem, 2vw, 1.5rem); }
.lb-next { right: clamp(0.4rem, 2vw, 1.5rem); }
.lb-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 1rem clamp(1rem, 3vw, 2rem); scrollbar-width: thin; }
.lb-strip img { width: 88px; height: 62px; object-fit: cover; border-radius: 6px; opacity: 0.45; cursor: pointer; border: 2px solid transparent; flex: 0 0 auto; transition: opacity 0.2s ease, border-color 0.2s ease; }
.lb-strip img:hover { opacity: 0.8; }
.lb-strip img.is-active { opacity: 1; border-color: var(--brand-blue); }
html.lb-open, html.lb-open body { overflow: hidden; }

/* ---------- Needs / "Vrei să...?" ---------- */
.needs-list { display: grid; gap: 0.85rem; }
.needs-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
  color: var(--ink-700);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Each question carries an icon for the service it asks about, in place of
   the generic "?" marker these all used to share. */
.needs-list .need-ico {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  transition: background 0.25s ease, color 0.25s ease;
}
.needs-list .need-ico svg { width: 18px; height: 18px; display: block; }
.needs-list li:hover .need-ico { background: var(--accent); color: var(--white); }
.needs-list li:hover { transform: translateX(4px); border-color: var(--accent); box-shadow: var(--shadow-md); }

.answer-card {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0.75rem;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  /* Photo behind a blue scrim. Two layers rather than one flat wash: the
     diagonal carries most of the density down the left where the copy sits
     and fades out towards the top right, so the sky, hillside and panel
     detail stay visible; the flat tint just holds the brand blue over the
     whole frame. */
  background-image:
    linear-gradient(105deg,
      rgba(4, 26, 43, 0.82) 0%,
      rgba(5, 39, 64, 0.56) 40%,
      rgba(5, 39, 64, 0.16) 72%,
      rgba(5, 39, 64, 0) 100%),
    linear-gradient(rgba(9, 58, 94, 0.26), rgba(9, 58, 94, 0.26)),
    url("../assets/homepage-3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.answer-logo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: 0.04em;
  color: var(--white);
}
.answer-tag { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin: 0; }
.answer-card .btn { margin-top: 0.75rem; }