/* Sistemul vizual al paginii demo Carpat Energy.
 *
 * Directia vine din lumea clientului, nu dintr-un sablon: energie solara.
 * Logoul lor e un degradeu verde spre albastru, soare peste pamant, iar
 * degradeul acela e singurul element decorativ pe care si-l permite pagina.
 *
 * Fundalul nu e alb plat, ci o spalare foarte slaba de lumina de zi, de la cald
 * spre rece pe verticala. Se simte fara sa se vada, si e ce deosebeste o pagina
 * asezata de una nefinisata.
 *
 * Paleta e a Carpat, luata din site-ul lor. Panoul de apel foloseste un albastru
 * mult mai adanc, derivat din al lor: aparatele Victron au ecrane inchise, iar
 * omul care suna se uita zilnic la unul.
 */

:root {
  --albastru: #007cba;
  --albastru-adanc: #005f8a;
  --verde: #23a455;
  --portocaliu: #f97316;

  --carbune: #0e1c26;
  --gri: #5b6b78;
  --gri-slab: #8697a3;
  --margine: #e3ebf0;
  --card: #ffffff;

  --panou: #062033;
  --panou-sus: #0a2b43;
  --panou-linie: rgba(126, 183, 214, 0.18);
  --panou-text: #9fc9e0;

  /* Degradeul din logoul lor. Apare de trei ori in toata pagina si nicaieri
     altundeva: o data ca linie sub bara, o data pe indicatorul de nivel, o data
     pe accentul din antet. Daca ar aparea peste tot, n-ar mai insemna nimic. */
  --degradeu: linear-gradient(90deg, var(--verde), var(--albastru));

  --sp: clamp(1.5rem, 5vw, 3.5rem);
  --lat: 68rem;

  --raza: 14px;
  --raza-mica: 8px;

  --umbra-mica: 0 1px 2px rgba(14, 28, 38, 0.04), 0 2px 8px -4px rgba(14, 28, 38, 0.08);
  --umbra: 0 2px 4px rgba(14, 28, 38, 0.04), 0 12px 32px -12px rgba(14, 28, 38, 0.14);
  --umbra-panou: 0 2px 6px rgba(6, 32, 51, 0.16), 0 32px 64px -24px rgba(6, 32, 51, 0.4);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--carbune);
  background: #fbfdfe;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Lumina de zi: cald sus, rece spre mijloc, revenire la alb. Fixat pe fundal,
   ca sa nu „alunece" la derulare si sa para un banner. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 12% -10%, rgba(249, 115, 22, 0.06), transparent 60%),
    radial-gradient(100% 55% at 88% 0%, rgba(0, 124, 186, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f4f9fb 42%, #fbfdfe 100%);
}

.invelis { max-width: var(--lat); margin: 0 auto; padding-inline: var(--sp); }

a { color: var(--albastru-adanc); text-underline-offset: 3px; }

/* ── bara ─────────────────────────────────────────────────────────────── */

.bara {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--margine);
}
/* Firul de degradeu: singura decoratie din bara, si e chiar culorile marcii
   clientului, nu un ornament ales de noi. */
.bara::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--degradeu);
  opacity: 0.9;
}
.bara .invelis {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; min-height: 4.5rem; flex-wrap: wrap;
}
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { display: block; }
.marca-generativa img { height: 38px; }
.marca-carpat img { height: 30px; }
.legatura { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.eticheta {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gri-slab);
}

/* ── antet ────────────────────────────────────────────────────────────── */

.antet { padding-block: clamp(3rem, 7vw, 4.5rem) clamp(2rem, 4vw, 2.75rem); }

.antet-grila {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .antet-grila { grid-template-columns: minmax(0, 1fr) minmax(26rem, 30rem); align-items: center; }
}

.supratitlu {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--albastru-adanc);
  margin: 0 0 1.25rem;
}
.supratitlu::before {
  content: ''; width: 28px; height: 3px; border-radius: 2px;
  background: var(--degradeu);
}

h1 {
  font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; line-height: 0.98;
  letter-spacing: -0.035em; margin: 0 0 0.75rem;
}
.subtitlu {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem); line-height: 1.3;
  color: var(--carbune); margin: 0 0 1.375rem; font-weight: 400;
  max-width: 26ch;
}
.intro { max-width: 38ch; margin: 0; color: var(--gri); font-size: 1.09rem; }

/* ── panoul de apel: elementul de semnatura ───────────────────────────── */
/* Citeste ca ecranul unui aparat, nu ca un card de website: fundal inchis,
   stare sus cu font monospatiat, comanda jos. */

.panou {
  background: linear-gradient(180deg, var(--panou-sus), var(--panou));
  border-radius: var(--raza);
  overflow: hidden;
  box-shadow: var(--umbra-panou);
  position: relative;
}
/* Muchia luminoasa de sus: da senzatia de obiect fizic, nu de dreptunghi. */
.panou::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 201, 224, 0.45), transparent);
}

.panou-stare {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--panou-linie);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--panou-text);
}
.bec {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #43708e;
  box-shadow: 0 0 0 3px rgba(67, 112, 142, 0.16);
  transition: background-color 200ms, box-shadow 200ms;
}
.panou[data-stare="conectare"] .bec {
  background: var(--portocaliu);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
  animation: puls 1.2s ease-in-out infinite;
}
.panou[data-stare="activ"] .bec {
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(35, 164, 85, 0.22);
}
.panou[data-stare="eroare"] .bec {
  background: #f0655a;
  box-shadow: 0 0 0 3px rgba(240, 101, 90, 0.2);
}
@keyframes puls { 50% { opacity: 0.3; } }

.cronometru { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.7; }

.panou-corp { padding: 1.5rem 1.375rem 1.5rem; }

/* Osciloscopul: formele de unda REALE, ale microfonului si ale vocii lui
   Victor, desenate ca o trasa de curent cu fosforescenta. O animatie falsa ar
   arata activitate si cand linia e moarta, exact cand utilizatorul are nevoie
   sa inteleaga ca ceva nu merge. Caroiajul e in CSS, trasele pe canvas. */
.nivel {
  display: block; width: 100%; height: 72px;
  margin-bottom: 1.375rem;
  border-radius: 8px;
  background:
    linear-gradient(rgba(126, 183, 214, 0.07) 1px, transparent 1px) 0 0 / 100% 12px,
    linear-gradient(90deg, rgba(126, 183, 214, 0.07) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(180deg, rgba(2, 14, 24, 0.6), rgba(2, 14, 24, 0.25));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
}

.formular { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.formular input {
  flex: 1 1 11rem; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: 0.8125rem 1rem;
  color: #fff; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panou-linie); border-radius: var(--raza-mica);
  transition: border-color 160ms, background-color 160ms;
}
.formular input::placeholder { color: #6e97b0; }
.formular input:hover { background: rgba(255, 255, 255, 0.07); }
.formular input:focus-visible {
  outline: none; border-color: var(--albastru);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.25);
}

button {
  font: inherit; font-weight: 600; font-size: 1rem;
  padding: 0.8125rem 1.5rem; border: 0; border-radius: var(--raza-mica);
  cursor: pointer; color: #fff;
  background: var(--portocaliu);
  box-shadow: 0 1px 2px rgba(180, 74, 8, 0.3), 0 6px 16px -6px rgba(249, 115, 22, 0.5);
  transition: background-color 160ms, transform 120ms, box-shadow 160ms;
}
button:hover:not(:disabled) { background: #ea6a09; transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
button.incheie {
  background: transparent; box-shadow: none;
  border: 1px solid var(--panou-linie); color: var(--panou-text);
}
button.incheie:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); transform: none; }

.mesaj { margin: 1rem 0 0; font-size: 0.9375rem; color: #ffb3a8; min-height: 1.5rem; }
.panou-nota {
  margin: 1.25rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid var(--panou-linie);
  font-size: 0.8125rem; line-height: 1.5; color: #6f9bb5;
}

/* ── sectiuni ─────────────────────────────────────────────────────────── */

/* Sectiunile se despart cu o linie subtire, nu doar cu gol. Fara ea, doua
   padding-uri lipite dadeau noua rem de nimic, iar pagina citea goala in loc
   de aerisita. */
.sectiune { padding-block: clamp(2.25rem, 4.5vw, 3.25rem); }
.sectiune + .sectiune { border-top: 1px solid var(--margine); }

.titlu-sectiune {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--gri-slab); margin: 0 0 0.5rem;
}
.intro-sectiune {
  font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em;
  margin: 0 0 1.75rem; max-width: 42ch;
}

.carduri { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .carduri { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--margine);
  border-radius: var(--raza);
  padding: 1.5rem 1.5rem 1.375rem;
  box-shadow: var(--umbra-mica);
  transition: box-shadow 200ms, transform 200ms, border-color 200ms;
}
.card:hover { box-shadow: var(--umbra); transform: translateY(-2px); border-color: #d3e2ea; }
.card q {
  display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.01em; quotes: '„' '”'; margin-bottom: 0.5rem;
}
.card p { margin: 0; color: var(--gri); font-size: 0.9375rem; line-height: 1.5; }

/* Limitele: cardurile poarta un fir vertical colorat, fiindca fiecare e o
   granita, iar granitele se deseneaza cu o linie. */
.limite { display: grid; gap: 1rem; }
@media (min-width: 58rem) { .limite { grid-template-columns: repeat(3, 1fr); } }
.limita {
  background: var(--card);
  border: 1px solid var(--margine);
  border-radius: var(--raza);
  padding: 1.5rem 1.5rem 1.375rem 1.75rem;
  box-shadow: var(--umbra-mica);
  position: relative; overflow: hidden;
}
.limita::before {
  content: ''; position: absolute; inset-block: 0; left: 0; width: 4px;
  background: var(--verde);
}
.limita h3 {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 0.5rem; line-height: 1.35;
}
.limita p { margin: 0; color: var(--gri); font-size: 0.9375rem; line-height: 1.55; }

/* ── subsol ───────────────────────────────────────────────────────────── */

.subsol { border-top: 1px solid var(--margine); background: #fff; margin-top: 1.5rem; }
.subsol .invelis { padding-block: 2.5rem; }
.subsol p { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--gri); max-width: 62ch; }
.subsol p:last-child { margin-bottom: 0; }

/* ── accesibilitate ───────────────────────────────────────────────────── */

.doar-cititor {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--albastru); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover, button:hover:not(:disabled) { transform: none; }
}