/* Lansio — stil principal
   Concept: atelier luminos. Fundal rece, albastru cobalt pentru acțiuni,
   galben „etichetă de preț” pentru accente. Hero asimetric cu machete de site. */

:root {
  --paper: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #EEF1FA;
  --ink: #0D1433;
  --ink-soft: #4A5378;
  --line: #DCE1F0;
  --cobalt: #2747F5;
  --cobalt-strong: #1A34C9;
  --cobalt-soft: #E3E8FF;
  --marigold: #FFC83D;
  --marigold-ink: #3D2E00;
  --success: #128A55;
  --danger: #C4322B;
  --on-cobalt: #FFFFFF;
  --band: #0D1433;
  --band-ink: #E8ECFF;
  --band-soft: #A9B3DA;
  --shadow: 0 1px 2px rgba(13, 20, 51, .06), 0 12px 32px -12px rgba(13, 20, 51, .18);

  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.4vw, 4.1rem);

  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1026;
    --surface: #131A38;
    --surface-2: #19224A;
    --ink: #EEF1FF;
    --ink-soft: #A7B0D6;
    --line: #262F5C;
    --cobalt: #6E86FF;
    --cobalt-strong: #8DA0FF;
    --cobalt-soft: #1E2960;
    --marigold: #FFC83D;
    --marigold-ink: #3D2E00;
    --success: #4FD394;
    --danger: #FF7A72;
    --on-cobalt: #0B1026;
    --band: #050817;
    --band-ink: #E8ECFF;
    --band-soft: #96A0CC;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0B1026;
  --surface: #131A38;
  --surface-2: #19224A;
  --ink: #EEF1FF;
  --ink-soft: #A7B0D6;
  --line: #262F5C;
  --cobalt: #6E86FF;
  --cobalt-strong: #8DA0FF;
  --cobalt-soft: #1E2960;
  --marigold: #FFC83D;
  --marigold-ink: #3D2E00;
  --success: #4FD394;
  --danger: #FF7A72;
  --on-cobalt: #0B1026;
  --band: #050817;
  --band-ink: #E8ECFF;
  --band-soft: #96A0CC;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- Bază ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalt); text-underline-offset: 3px; }
a:hover { color: var(--cobalt-strong); }
h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 750; }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--marigold); color: var(--marigold-ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cobalt);
  font-weight: 600;
}
.lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; line-height: 1.55; }
.muted { color: var(--ink-soft); }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--cobalt-soft); color: var(--cobalt-strong);
}
.tag--sun { background: var(--marigold); color: var(--marigold-ink); }

/* ---------- Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 1rem/1 var(--f-body);
  padding: 15px 22px; border-radius: 12px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--cobalt); color: var(--on-cobalt); }
.btn--primary:hover { background: var(--cobalt-strong); color: var(--on-cobalt); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--sun { background: var(--marigold); color: var(--marigold-ink); }
.btn--sun:hover { background: #FFD666; color: var(--marigold-ink); transform: translateY(-1px); }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 38px; height: 38px; }
.brand span { font-family: var(--f-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.04em; }
.brand:hover { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 500;
  padding: 10px 14px; border-radius: 10px;
  /* Fără asta, flexbox strânge linkurile și „Servicii și prețuri” se rupe
     pe două rânduri, iar bara de sus crește în înălțime. */
  white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--cobalt); background: var(--cobalt-soft); }
.nav .btn { margin-left: 8px; padding: 12px 18px; }
.nav .btn--primary { color: var(--on-cobalt); }
.nav .btn--primary:hover { background: var(--cobalt-strong); color: var(--on-cobalt); }
.nav .btn--sun { background: var(--marigold); color: var(--marigold-ink); }
.nav .btn--sun:hover, .nav .btn--sun[aria-current="page"] { background: #FFD666; color: var(--marigold-ink); }

/* Butonul de intrare in cont. Aceeasi forma si marime ca butonul principal
   de alaturi, dar pe cobalt in loc de galben: actiunea principala ramane
   „Cere site-ul gratuit”, asta e a doua ca importanta. */
.btn--account {
  background: var(--cobalt); color: var(--on-cobalt);
  white-space: nowrap;
}
/* Regula „.nav a” are prioritate peste „.btn--account”, asa ca scriem culoarea
   tot de la nivelul navigatiei: altfel textul ramane deschis pe fundal deschis
   si butonul devine ilizibil in tema intunecata. */
.nav .btn--account { background: var(--cobalt); color: var(--on-cobalt); }
.nav .btn--account:hover { background: var(--cobalt-strong); color: var(--on-cobalt); transform: translateY(-1px); }
/* Iconita la marimea randului de text, ca butonul sa aiba exact aceeasi
   inaltime ca butonul principal de langa el. */
.btn--account svg { width: 16px; height: 16px; flex: none; }

.menu-toggle {
  display: none; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }

/* Meniul în linie are nevoie de ~1010px ca să încapă întreg: cinci linkuri,
   linkul către cont și butonul principal. Sub pragul ăsta trecem pe meniul
   din buton, în loc să înghesuim textele. */
@media (max-width: 1040px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px var(--gutter) 20px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav:not(.is-open) { display: none; }
  .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .nav .btn { margin: 8px 0 0; }
}

/* ---------- Secțiuni ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(24px, 4vw, 48px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 .zero {
  display: inline-block; position: relative; color: var(--cobalt); white-space: nowrap;
}
.hero h1 .zero::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .28em;
  background: var(--marigold); z-index: -1; border-radius: 4px; transform: rotate(-1deg);
}
.hero h1 { position: relative; z-index: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 4px 0 0; list-style: none; color: var(--ink-soft); font-size: .95rem; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points svg { width: 18px; height: 18px; color: var(--success); flex: none; }

.hero-visual { position: relative; min-width: 0; }
.hero-visual > img { width: 100%; filter: drop-shadow(0 30px 40px rgba(13, 20, 51, .18)); }
.price-sticker {
  position: absolute; right: 2%; top: -4%;
  width: clamp(104px, 13vw, 140px); aspect-ratio: 1; max-width: 100%;
  border-radius: 50%; background: var(--marigold); color: var(--marigold-ink);
  display: grid; place-content: center; text-align: center;
  transform: rotate(10deg); box-shadow: var(--shadow);
  font-family: var(--f-display); line-height: 1;
}
.price-sticker small { font-family: var(--f-body); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.price-sticker strong { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; margin: 2px 0; }
.float-card {
  position: absolute; left: -2%; bottom: 6%;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow); font-size: .9rem; max-width: 80%;
}
.float-card .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 22%, transparent); flex: none; }
.float-card b { display: block; font-size: .95rem; }
.float-card span { color: var(--ink-soft); font-family: var(--f-mono); font-size: .78rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; }
}

/* ---------- Bandă de încredere ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.fact { padding: 22px 24px; display: grid; gap: 4px; border-left: 1px solid var(--line); min-width: 0; }
.fact:first-child { border-left: 0; }
.fact strong { font-family: var(--f-display); font-size: var(--step-2); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fact span { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Pași ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 2px solid var(--line); position: relative; min-width: 0; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--f-mono); font-size: .85rem; font-weight: 600; color: var(--cobalt);
}
.step::after { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 2px; background: var(--cobalt); }
.step p { color: var(--ink-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Beneficii ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { padding: 26px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; min-width: 0; }
.section:not(.section--alt) .feature { background: var(--surface); }
.feature .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--cobalt-soft); color: var(--cobalt); }
.feature .ico svg { width: 24px; height: 24px; }
.feature p { color: var(--ink-soft); font-size: .98rem; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ---------- Prețuri ---------- */
/* Doua pachete: Simplu si Personalizat. Grila sta pe doua coloane si se
   centreaza, ca sa nu ramana un gol in dreapta pe ecrane late. */
.plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; align-items: stretch;
  max-width: 860px; margin-inline: auto;
}
.plan {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: 30px 28px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); min-width: 0;
}
/* Bordura ramane de 1px ca la celalalt card, ca randurile sa cada identic;
   grosimea vizuala vine dintr-un contur interior. */
.plan--featured { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt), var(--shadow); }

/* Cele doua carduri au aceeasi succesiune de elemente: titlu, descriere, blocul
   de pret, caseta de plata, randul verde, lista si butonul. Cu „subgrid” fiecare
   dintre ele sta pe acelasi rand in ambele carduri, asa ca preturile si listele
   se aliniaza intre ele, indiferent cat de lung e textul. */
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(6, auto); }
  .plan {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    align-content: start;
  }
}
.plan-badge { position: absolute; top: -14px; left: 28px; }
.plan-name { font-family: var(--f-display); font-size: var(--step-1); font-weight: 700; }
.plan-desc { color: var(--ink-soft); font-size: .96rem; min-height: 3.2em; }
/* Un singur pret mare, detaliul dedesubt, alternativa discret la final. */
.plan-pricing { display: grid; gap: 7px; align-content: start; }
/* Rand de pret cu inaltime rezervata: „9 €” si „Pret variabil” au marimi
   diferite, iar fara asta tot ce urmeaza dedesubt s-ar decala intre carduri. */
.plan-price {
  display: flex; align-items: baseline; align-content: flex-end; flex-wrap: wrap;
  gap: 6px; margin: 0; min-height: 3.2rem;
  font-family: var(--f-display);
}
.plan-price strong { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--ink-soft); font-family: var(--f-body); font-weight: 500; }
.plan-price--text strong { font-size: 2.1rem; }
.plan-price-note {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0; font-size: .9rem; color: var(--ink-soft);
}
/* Eticheta de reducere sta langa un pret mare si langa pastila verde.
   Galbenul plin tragea prea mult ochiul si se batea cu ele, asa ca ramane
   pe albastrul discret al marcii. */
/* Scris ca „.plan-price .plan-tag”, altfel regula „.plan-price span” de mai sus
   e mai specifica si eticheta ar imprumuta culoarea si grosimea de la ea. */
.plan-price .plan-tag,
.plan-tag {
  align-self: center; margin-left: 2px;
  background: var(--cobalt-soft); color: var(--cobalt-strong);
  border: 1px solid color-mix(in srgb, var(--cobalt) 32%, transparent);
  border-radius: 999px; padding: 4px 9px;
  font: 700 .74rem/1 var(--f-body); letter-spacing: .02em;
}
.plan-price-alt {
  margin: 5px 0 0; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-soft);
}
.plan-price-alt strong { color: var(--ink); font-weight: 600; }
/* Promisiunea „gratuit” sta deasupra pretului, ca pastila: e motivul pentru
   care omul citeste mai departe. */
.plan-build {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  margin: 0; padding: 9px 14px; border-radius: 999px;
  font-size: .87rem; font-weight: 650; color: var(--success);
  background: color-mix(in srgb, var(--success) 13%, transparent);
}
.plan-build svg { width: 17px; height: 17px; flex: none; }
.plan ul { list-style: none; padding: 18px 0 0; margin: 0; display: grid; gap: 11px; border-top: 1px solid var(--line); font-size: .97rem; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.plan li svg { width: 20px; height: 20px; color: var(--cobalt); margin-top: 3px; }
.plan .btn { margin-top: auto; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---------- Tabel comparativ ---------- */
.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .97rem; }
.compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--f-display); font-size: 1.05rem; background: var(--surface-2); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare tbody th { font-weight: 500; color: var(--ink-soft); }
.compare .yes { color: var(--success); font-weight: 600; }
.compare .no { color: var(--ink-soft); }
.compare td:nth-child(3) { background: color-mix(in srgb, var(--cobalt-soft) 45%, transparent); }

/* ---------- Pentru cine ---------- */
.audience { display: flex; flex-wrap: wrap; gap: 10px; }
.audience li {
  list-style: none; padding: 10px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-weight: 500;
}
.audience { padding: 0; margin: 0; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split > * { min-width: 0; }
.split-copy { display: grid; gap: 18px; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.checklist svg { width: 22px; height: 22px; color: var(--success); margin-top: 2px; }
.frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Portofoliu ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter {
  font: 600 .92rem/1 var(--f-body); padding: 11px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work { display: grid; gap: 14px; align-content: start; min-width: 0; }
.work-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 4 / 3; max-width: 100%; }
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.work:hover .work-media img { transform: scale(1.03); }
.work-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.work h3 { font-size: 1.15rem; }
.work p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 960px) { .works { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .works { grid-template-columns: 1fr; } }
.note {
  margin-top: 28px; padding: 14px 18px; border-radius: 12px; font-size: .92rem;
  background: var(--surface-2); color: var(--ink-soft); border: 1px dashed var(--line);
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 840px; }
.faq--center { margin-inline: auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; position: relative;
  font-family: var(--f-display); font-weight: 650; font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px;
  border-right: 2.5px solid var(--cobalt); border-bottom: 2.5px solid var(--cobalt);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 22px 22px; color: var(--ink-soft); display: grid; gap: 10px; }

/* ---------- CTA bandă ---------- */
.cta-band { padding-block: clamp(56px, 8vw, 96px); }
.cta-box {
  border-radius: 28px; background: var(--cobalt); color: var(--on-cobalt);
  padding: clamp(32px, 6vw, 64px); display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  right: -120px; top: -160px; background: var(--marigold); opacity: .95;
}
.cta-box > * { position: relative; min-width: 0; }
.cta-box h2 { color: inherit; }
.cta-box p { opacity: .9; margin-top: 12px; max-width: 54ch; }
@media (max-width: 760px) { .cta-box { grid-template-columns: 1fr; } .cta-box::before { width: 220px; height: 220px; right: -90px; top: -110px; } }

/* ---------- Page hero (subpagini) ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(24px, 4vw, 40px); }
.page-hero .wrap { display: grid; gap: 16px; }
.breadcrumb { font-size: .88rem; color: var(--ink-soft); }
.breadcrumb a { color: inherit; }

/* ---------- Valori ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value { display: grid; gap: 10px; align-content: start; min-width: 0; }
.value h3 { display: flex; gap: 10px; align-items: center; }
.value h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--marigold); flex: none; }
.value p { color: var(--ink-soft); }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }

/* ---------- Formulare ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.contact-grid > * { min-width: 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 36px); }
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--f-body); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 13px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
/* Locul mesajului de eroare e rezervat din start. Altfel, la validare, fiecare
   camp cu problema creste brusc si impinge tot formularul in jos -- cu patru
   erori deodata, campurile de mai jos saltau cu peste 100px. */
.field .error {
  color: var(--danger); font-size: .82rem; line-height: 1.3;
  min-height: 1.1rem;
}
.plan-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.plan-picker legend { font-weight: 600; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.plan-picker label {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--paper); font-size: .92rem;
}
.plan-picker label b { font-family: var(--f-display); font-size: 1.05rem; }
.plan-picker input { position: absolute; opacity: 0; pointer-events: none; }
.plan-picker label:has(input:checked) { border-color: var(--cobalt); background: var(--cobalt-soft); }
.plan-picker label:has(input:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 2px; }
@media (max-width: 560px) { .plan-picker { grid-template-columns: 1fr; } }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .9rem; color: var(--ink-soft); align-items: start; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--cobalt); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 12px; padding: 14px 16px; font-size: .95rem; font-weight: 500; }
.form-status--ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.form-status--err { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.contact-list .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--cobalt-soft); color: var(--cobalt); display: grid; place-items: center; }
.contact-list .ico svg { width: 22px; height: 22px; }
.contact-list small { display: block; color: var(--ink-soft); font-size: .85rem; }
.contact-list a, .contact-list span { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--cobalt); }

/* ---------- Text legal ---------- */
.prose { max-width: 72ch; display: grid; gap: 16px; }
.prose h2 { font-size: var(--step-2); margin-top: 18px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--band); color: var(--band-ink); padding-block: clamp(56px, 7vw, 88px) 28px; }
.site-footer a { color: var(--band-ink); text-decoration: none; }
.site-footer a:hover { color: var(--marigold); }
.footer-top { display: grid; grid-template-columns: 1fr 1.5fr 1.3fr; gap: clamp(32px, 5vw, 64px); }
.footer-top > * { min-width: 0; }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-brand .brand, .footer-brand .brand:hover { color: var(--band-ink); }
.footer-brand p { color: var(--band-soft); max-width: 38ch; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.footer-col h3, .footer-form h3 {
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--band-soft); font-weight: 600; margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-contact li { display: grid; gap: 1px; }
.footer-contact small { color: var(--band-soft); font-size: .8rem; }
.footer-contact a, .footer-contact span { overflow-wrap: anywhere; }
.footer-form .form { gap: 12px; }
.footer-form .field input, .footer-form .field textarea {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--band-ink);
}
.footer-form .field input::placeholder, .footer-form .field textarea::placeholder { color: var(--band-soft); }
.footer-form .field input:focus, .footer-form .field textarea:focus { border-color: var(--marigold); box-shadow: 0 0 0 4px rgba(255, 200, 61, .2); }
.footer-form .field textarea { min-height: 96px; }
.footer-form .consent { color: var(--band-soft); }
.footer-form .consent a { text-decoration: underline; }
.footer-form .form-status--ok { color: #6FE3AA; background: rgba(79, 211, 148, .12); }
.footer-form .form-status--err { color: #FF9C95; background: rgba(255, 122, 114, .12); }
.socials { display: flex; gap: 10px; }
.socials a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); }
.socials a:hover { background: var(--marigold); color: var(--marigold-ink); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom {
  margin-top: clamp(40px, 6vw, 64px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: var(--band-soft); font-size: .88rem;
}
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
.footer-bottom a { color: var(--band-soft); }
@media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-form { grid-column: 1 / -1; } }
@media (max-width: 620px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Animații discrete ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .06s; }
  .hero-copy > *:nth-child(3) { animation-delay: .12s; }
  .hero-copy > *:nth-child(4) { animation-delay: .18s; }
  .hero-copy > *:nth-child(5) { animation-delay: .24s; }
  .hero-visual { animation: rise .8s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .price-sticker { animation: pop .6s .5s cubic-bezier(.3, 1.6, .5, 1) both; }
}
@keyframes rise { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: rotate(10deg) scale(.6); } to { transform: rotate(10deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- Ajustări ---------- */
.field .error:empty, .consent .error:empty { display: none; }
.nav .btn[aria-current="page"] { background: var(--cobalt); color: var(--on-cobalt); }
.page-hero + .section--tight { padding-top: 12px; }
@media (min-width: 981px) { .footer-top:not(:has(.footer-form)) { grid-template-columns: 1fr 1.5fr; } }

/* CTA vizibil inclusiv în navigarea paginii Contact. */
.nav .btn.btn--sun[aria-current="page"] { background: var(--marigold); color: var(--marigold-ink); }


/* Prețuri și economie pentru plata anuală. */
.billing-discount[hidden], .billing-saving[hidden] { display: none; }
@media (max-width: 420px) { .billing-picker { grid-template-columns: 1fr; } }

/* Contact WhatsApp disponibil pe toate paginile publice. */
/* Butonul flotant de WhatsApp.
   Separarea de pagina nu se mai face cu o margine alba (care pe tema inchisa
   taia un contur stralucitor in jurul butonului), ci cu un inel in culoarea
   fundalului paginii, care se schimba singur odata cu tema. */
.whatsapp-float {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 45;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 20px; min-height: 56px;
  border: 0; border-radius: 999px;
  background: #0B6B3A; color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--paper), 0 14px 30px -10px rgba(0, 0, 0, .5);
  text-decoration: none; font-size: .92rem; font-weight: 650;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float svg { width: 26px; height: 26px; flex-shrink: 0; }
.whatsapp-float:hover {
  background: #0E8247; color: #FFFFFF; transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--paper), 0 18px 34px -10px rgba(0, 0, 0, .55);
}
.whatsapp-float:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
@media (max-width: 600px) { .whatsapp-float { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); padding: 14px; } .whatsapp-float span { display: none; } .site-footer { padding-bottom: 96px; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }

.footer-form > .form-status { margin-top: 16px; }

/* Demo-uri complete, cu linkuri către website-urile integrate. */
.demo-card .work-media { display: block; }
.demo-card .work-media img { object-position: top; }
.demo-card h2 { font-size: var(--step-1); }
.demo-card .btn { align-self: end; }

.billing-picker[hidden], #billing-hint[hidden] { display: none; }

/* ---------- Alegeri în formular (pachet, mod de plată) ----------
   Carduri de aceeași înălțime, cu un singur preț vizibil și un bifat
   limpede. Înlocuiesc vechile .plan-picker / .billing-picker. */
.choice-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-set legend { font-weight: 600; font-size: .95rem; margin-bottom: 10px; padding: 0; }

.choices { display: grid; gap: 10px; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .choices--3, .choices--2 { grid-template-columns: 1fr; }
}

.choice { display: grid; cursor: pointer; min-width: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice-in {
  position: relative;
  display: grid; gap: 5px; align-content: start;
  height: 100%;
  padding: 15px 44px 15px 16px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--paper);
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover .choice-in { border-color: var(--ink-soft); }
.choice input:checked + .choice-in {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  box-shadow: inset 0 0 0 1px var(--cobalt);
}
.choice input:focus-visible + .choice-in { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* Cerculețul de bifare, din colțul din dreapta sus */
.choice-in::before {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.choice input:checked + .choice-in::before { border-color: var(--cobalt); background: var(--cobalt); }
.choice-in::after {
  content: ""; position: absolute; top: 19px; right: 18px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--on-cobalt); border-bottom: 2px solid var(--on-cobalt);
  transform: rotate(-45deg); opacity: 0; transition: opacity .12s ease;
}
.choice input:checked + .choice-in::after { opacity: 1; }

.choice-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.01em;
}
.choice-note { color: var(--ink-soft); font-size: .85rem; line-height: 1.45; }
.choice-price {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.1;
}
.choice-price small {
  font-family: var(--f-body); font-size: .8rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-soft);
}
.choice-tag {
  background: var(--marigold); color: var(--marigold-ink);
  border-radius: 6px; padding: 3px 7px;
  font: 700 .72rem/1 var(--f-body); letter-spacing: .02em;
}

/* ---------- Cutii pe secțiunile cu fundal alternativ ----------
   Secțiunile `.section--alt` folosesc --surface ca fundal, exact culoarea
   cutiilor de mai jos. Puse acolo, cutiile s-ar topi în secțiune și n-ar mai
   avea contur. Pe fundalul alternativ trec pe --paper, ca să rămână decupate,
   iar casetele dinăuntru coboară cu o treaptă, ca să nu se confunde între ele. */
.section--alt .plan,
.section--alt .card,
.section--alt .faq details,
.section--alt .table-scroll,
.section--alt .facts { background: var(--paper); }

.section--alt .compare thead th { background: var(--surface); }

/* Adresa de email, cu buton de copiere.
   Un link „mailto:” nu face nimic dacă omul n-are un program de mail legat în
   sistem, iar mulți folosesc Gmail în browser. Butonul merge oricum. */
.contact-copy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copy-btn {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  border-radius: 8px; padding: 4px 10px; cursor: pointer;
  font: 600 .78rem/1.4 var(--f-body);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.copy-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.copy-btn.is-done { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }