/* ============================================================
   home.css — refresh pagina principală (v2). Izolat: .hm-*
   Hero cu desen tehnic live, pași, prețuri, galerie, CTA.
   ============================================================ */

/* ---------- HERO ---------- */
.hm-hero { background: linear-gradient(135deg, #0f3d4f 0%, #1a5f7a 55%, #21708f 100%); position: relative; overflow: hidden; }
.hm-hero::before { content: ''; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background: radial-gradient(700px 340px at 85% 15%, rgba(42,139,176,.55), transparent 60%),
              radial-gradient(500px 300px at 8% 90%, rgba(240,165,0,.16), transparent 65%); }
.hm-hero .container { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.hm-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #eaf6fb; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; margin-bottom: 18px; }
.hm-hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6fe3a5; box-shadow: 0 0 8px #6fe3a5; }
.hm-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.14; margin: 0 0 16px; letter-spacing: -.01em; }
.hm-hero h1 em { font-style: normal; color: #ffc94d; }
.hm-hero-sub { color: #dff0f8; font-size: 1.06rem; line-height: 1.65; max-width: 54ch; margin-bottom: 26px; }
.hm-hero-sub strong { color: #fff; }
.hm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hm-btn-accent { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, #f0a500, #ffb824); color: #3a2900;
  font-weight: 800; font-size: 1rem; padding: 14px 26px; border-radius: 13px; text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(240,165,0,.65); transition: transform .15s, box-shadow .15s; }
.hm-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(240,165,0,.75); }
.hm-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.42);
  font-weight: 700; font-size: .98rem; padding: 14px 24px; border-radius: 13px; text-decoration: none; transition: background .15s, border-color .15s; }
.hm-btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.hm-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.hm-trust-chip { display: inline-flex; align-items: center; gap: 7px; color: #eaf6fb; font-size: .82rem; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 7px 13px; border-radius: 99px; }
.hm-trust-chip svg { flex: 0 0 14px; }

/* vizual hero: desen tehnic live pe card alb */
.hm-hero-visual { position: relative; }
.hm-hero-card { background: #fff; border-radius: 20px; padding: 22px 22px 16px; box-shadow: 0 30px 60px -22px rgba(4,24,33,.55);
  transform: rotate(.6deg); }
.hm-hero-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hm-hero-card-head strong { font-size: .9rem; color: #12303e; }
.hm-hero-card-head span { font-size: .72rem; color: #4e6675; }
.hm-hero-card .preview-container { border: 0; padding: 0; min-height: 0; margin: 0; aspect-ratio: 347 / 404; /* = viewBox desen hero — rezervă spațiul înainte de randare (zero CLS) */ background:
    linear-gradient(0deg, rgba(26,95,122,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,95,122,.04) 1px, transparent 1px);
  background-size: 20px 20px; border-radius: 10px; }
.hm-hero-card .preview-container svg { display: block; width: 100%; height: auto; }
.hm-hero-chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hm-hero-chips span { font-size: .72rem; font-weight: 700; color: #1a5f7a; background: #eef6fa; border: 1px solid #d8e9f1; padding: 4px 10px; border-radius: 99px; }
.hm-float { position: absolute; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 14px 34px -14px rgba(4,24,33,.5);
  display: flex; flex-direction: column; line-height: 1.2; }
.hm-float b { font-size: 1.05rem; color: #0f3d4f; }
.hm-float span { font-size: .68rem; color: #4e6675; font-weight: 600; }
.hm-float-1 { top: -14px; right: 6%; animation: hmFloat 5s ease-in-out infinite; }
.hm-float-2 { bottom: -16px; left: 4%; animation: hmFloat 5s ease-in-out 1.4s infinite; }
@keyframes hmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* animație blândă a canatului din hero (aceleași grupe .pv-sash din desen) */
.hm-hero-card .pv-sash { transform-box: fill-box; }
.hm-hero-card.hm-anim .pv-sash[data-pv-mode="oscilobatant"] { transform-origin: left bottom; animation: hmOsci 3.4s ease-in-out 1; }
.hm-hero-card.hm-anim .pv-sash[data-pv-mode="deschidere-simpla"] { transform-origin: left center; animation: hmSwing 3.4s ease-in-out 1; }
@keyframes hmSwing { 0%, 100% { transform: none; } 42%, 60% { transform: scaleX(.3) skewY(-5deg); } }
@keyframes hmOsci { 0%, 100% { transform: none; } 18%, 30% { transform: scaleY(.84) skewX(3deg); } 46% { transform: none; } 64%, 80% { transform: scaleX(.3) skewY(-5deg); } }
@media (prefers-reduced-motion: reduce) {
  .hm-hero-card.hm-anim .pv-sash, .hm-float-1, .hm-float-2 { animation: none !important; }
}

/* ---------- iconițe beneficii (SVG, fără emoji) ---------- */
.hm-fico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(135deg, #e8f4f9, #d6ecf4); color: #1a5f7a; margin-bottom: 6px; }
.hm-fico svg { width: 27px; height: 27px; }

/* ---------- Cum funcționează (3 pași) ---------- */
.hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hm-step { position: relative; background: #fff; border: 1px solid #e2ecf1; border-radius: 16px; padding: 26px 22px 22px;
  box-shadow: 0 1px 2px rgba(16,42,54,.05), 0 8px 24px -14px rgba(16,42,54,.12); }
.hm-step-num { position: absolute; top: -15px; left: 20px; width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, #1a5f7a, #2a8bb0); color: #fff; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(26,95,122,.35); }
.hm-step h3 { margin: 4px 0 8px; font-size: 1.06rem; color: #0f3d4f; }
.hm-step p { color: #4e6675; font-size: .9rem; line-height: 1.6; margin: 0; }
.hm-step-arrow { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: #b9d5e2; z-index: 1; }

/* ---------- prețuri ---------- */
.hm-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 20px; justify-content: center; }
.hm-price-card { position: relative; background: #fff; border: 2px solid #e2ecf1; border-radius: 18px; padding: 28px 26px 24px; text-align: center;
  transition: transform .16s, box-shadow .16s, border-color .16s; }
.hm-price-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -16px rgba(16,42,54,.25); }
.hm-price-card.reco { border-color: #f0a500; }
.hm-price-reco { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #f0a500; color: #4a3200;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; }
.hm-price-card h3 { margin: 0 0 4px; font-size: 1.08rem; color: #0f3d4f; }
.hm-price-sub { color: #4e6675; font-size: .82rem; margin-bottom: 12px; }
.hm-price-val { font-size: 2.35rem; font-weight: 800; color: #1a5f7a; line-height: 1.05; }
.hm-price-val small { font-size: .95rem; font-weight: 700; color: #4e6675; }
.hm-price-feats { list-style: none; margin: 16px 0 18px; padding: 0; text-align: left; }
.hm-price-feats li { position: relative; padding: 5px 0 5px 26px; color: #33505f; font-size: .88rem; line-height: 1.45; }
.hm-price-feats li::before { content: '✓'; position: absolute; left: 2px; top: 4px; color: #16a34a; font-weight: 800; }

/* ---------- galerie strip ---------- */
.hm-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hm-gallery a { display: block; border-radius: 14px; overflow: hidden; position: relative; aspect-ratio: 4/3;
  box-shadow: 0 6px 18px -8px rgba(16,42,54,.3); }
.hm-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.hm-gallery a:hover img { transform: scale(1.05); }
.hm-gallery a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(10,35,46,.55)); opacity: 0; transition: opacity .25s; }
.hm-gallery a:hover::after { opacity: 1; }

/* ---------- CTA final ---------- */
.hm-cta { background: linear-gradient(135deg, #0f3d4f, #1a5f7a); border-radius: 22px; padding: 48px 28px; text-align: center;
  position: relative; overflow: hidden; }
.hm-cta::before { content: ''; position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background: radial-gradient(520px 260px at 80% 20%, rgba(42,139,176,.6), transparent 65%); }
.hm-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 10px; position: relative; }
.hm-cta p { color: #cfe6ef; margin: 0 0 24px; position: relative; }
.hm-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; position: relative; }
.hm-btn-wa { display: inline-flex; align-items: center; gap: 9px; background: #25d366; color: #073c1e; font-weight: 800;
  padding: 14px 24px; border-radius: 13px; text-decoration: none; font-size: .98rem; transition: transform .15s; }
.hm-btn-wa:hover { transform: translateY(-2px); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hm-hero .container { grid-template-columns: 1fr; gap: 34px; padding-top: 46px; padding-bottom: 46px; }
  .hm-hero-visual { max-width: 470px; margin: 0 auto; width: 100%; }
  .hm-steps { grid-template-columns: 1fr; }
  .hm-step-arrow { display: none; }
  .hm-prices { grid-template-columns: 1fr; }
  .hm-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* CLS la schimbarea limbii pe telefon (PageSpeed mobil, 412 px): i18n.js traduce DOM-ul după prima randare, iar textul
   tradus ocupa mai multe rânduri decât cel românesc → butoanele și cardul coborau (CLS 0,124). Două măsuri:
   (1) traducerile hero din js/i18n-dict.js (blocul „Pagina principală”) sunt ținute ≤ lățimea textului românesc;
   (2) aici se rezervă înălțimea pe care o are textul ROMÂNESC la 360–450 px (Segoe UI/Roboto/Arial), ca un text
   tradus mai scurt să nu urce elementele de sub el. Valorile sunt în rânduri (em × line-height), nu în px fixi. */
@media (max-width: 450px) {
  .hm-hero h1 { min-height: calc(3 * 1.14em); }       /* 3 rânduri × line-height 1.14 */
  .hm-hero-sub { min-height: calc(4 * 1.65em); }      /* 4 rânduri × line-height 1.65 */
  .hm-hero-actions { min-height: 120px; }             /* 2 rânduri de butoane: 54 + 12 (gap) + 54 */
  .hm-hero-trust { min-height: 82px; }                /* 2 rânduri de chip-uri: 37 + 8 (gap) + 37 */
}
@media (max-width: 400px) {
  .hm-hero-trust { flex-direction: column; align-items: flex-start; } /* 4 chip-uri pe 4 rânduri: la aceste lățimi româna le rupea oricum câte unul pe rând, acum e la fel în toate limbile */
}
@media (max-width: 370px) {
  .hm-hero-sub { min-height: calc(5 * 1.65em); }      /* la 360 px subtitlul românesc are 5 rânduri */
  .hm-hero-eyebrow { font-size: .72rem; letter-spacing: .02em; padding: 6px 11px; } /* eticheta rămâne pe un rând (în română avea 2) */
}