/* ===== Sub-hero ===== */
.subhero{ position:relative; height:min(60vh, 520px); border-bottom:1px solid var(--line); background:#0e1419; }
@supports (height: 100svh){ .subhero{ height:min(60svh, 520px); } }
.subhero picture, .subhero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.sh-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.sh-caption{ position:relative; z-index:2; height:100%; display:grid; align-content:center; gap:12px; color:#fff; }
.sh-caption h1{ font-size: var(--h1); text-shadow:0 6px 24px rgba(0,0,0,.45); }
.sh-caption p{ max-width: 780px; line-height:1.7; opacity:.98 }
.sh-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.btn.ghost{ background:#ffffff10; color:#fff; border:1px solid #ffffff38; box-shadow:none; }
.btn.ghost:hover{ background:#ffffff22; }

/* ===== KPI ===== */
.kpis .container{ width:var(--container); margin:0 auto; max-width:100%; }
.kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); text-align:center; }
.kpi strong{ display:block; font-size:1.05rem; }
.kpi span{ color:var(--muted); font-size:.95rem }

/* ===== Layout două coloane ===== */
.section .container{ width:var(--container); margin:0 auto; max-width:100%; }
.two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
.note{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.note h3{ font-size:var(--h3); margin-bottom:.35rem }
.note p{ color:var(--muted); margin-bottom:.5rem }
.stack{ display:flex; gap:8px; flex-wrap:wrap; }

/* ===== Liste ===== */
.list-check, .list-dot{ margin:10px 0 0 0; padding:0; list-style:none; display:grid; gap:.5rem; }
.list-check li{ position:relative; padding-left:28px; }
.list-check li::before{
  content:"✓"; position:absolute; left:0; top:.2rem; width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--accent); font-weight:700;
}
.list-dot li{ position:relative; padding-left:16px; }
.list-dot li::before{ content:""; position:absolute; left:0; top:.75rem; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.muted{ color:var(--muted); font-size:.95rem; margin-top:.5rem }

/* ===== Pași (steps) — numerotare în interiorul cardului ===== */
.steps{ list-style:none; counter-reset: step; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px; }
.steps li{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 16px 16px 52px; box-shadow:var(--shadow);
}
.steps li::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; background:#f1f6fa; border:1px solid var(--line); color:#0b2b33; font-weight:700;
}
.steps h4{ font-size:1.02rem; margin-bottom:.25rem }
.steps p{ color:var(--muted) }

/* ===== Card TIP ===== */
.card.tip{
  background:linear-gradient(135deg, #ffffff, #fcfcfd);
  border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.card.tip h3{ font-size:.92rem; letter-spacing:.08em; color:#0b2b33; margin-bottom:.35rem }
.card.tip p{ color:var(--muted) }

/* ===== Secțiune preț — titlu centrat deasupra listei ===== */
.section-title.center{ display:inline-block; left:50%; transform:translateX(-50%); text-align:center; }

/* ===== CTA bar ===== */
.cta-bar{ background: linear-gradient(135deg, #16323c, #1d3f4b); color:#f3f8fa; border-top:1px solid var(--line); }
.cta-wrap{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:26px 0; width:var(--container); margin:0 auto; max-width:100%; }
.cta-copy h3{ font-size: clamp(1.2rem, 1.2vw + 1rem, 1.6rem); color:#e2c483; margin-bottom:.25rem }
.cta-copy p{ color:#dbe6ea }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cta-actions .btn.ghost{ background:transparent; color:#fff; border:1px solid #ffffff3a; box-shadow:none; }
.cta-actions .btn.ghost:hover{ background:#ffffff18 }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .kpi-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .sh-caption h1{ font-size: clamp(1.4rem, 5.2vw + .6rem, 1.9rem); }
  .sh-caption p{ font-size: .98rem; }
}
/* ---- CTA bar: mobile friendly ---- */
@media (max-width: 560px){
  .cta-bar{ overflow:hidden; } /* evită dunga albă de la capete */
  .cta-wrap{
    grid-template-columns: 1fr;      /* o singură coloană */
    row-gap: 12px;
    text-align: center;
    padding: 18px clamp(14px, 4vw, 22px) calc(20px + env(safe-area-inset-bottom));
  }
  .cta-copy h3{
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    margin-bottom: .1rem;
  }
  .cta-copy p{ font-size: .98rem; }

  .cta-actions{ justify-content: center; gap: 8px; }
  .cta-actions .btn,
  .cta-actions .btn.ghost{
    width: 100%;
    max-width: 420px;          /* arată bine și pe telefoane mari */
    padding: .9rem 1.1rem;     /* țintă touch ≥44px */
  }
}