/* ============================================================
   mobile.css — rafinare pentru telefon.
   Se incarca DUPA stilurile paginii si le ajusteaza doar sub 640px.
   Nu atinge deloc versiunea de desktop. Scopul: mai aerisit, mai putin
   incarcat, mai usor de parcurs cu degetul.
   ============================================================ */

@media (max-width: 640px) {

  /* ---- 1. Fundalul: static, fara animatii care distrag si consuma bateria ---- */
  .bg {
    background:
      radial-gradient(600px 500px at 80% 0%, rgba(250,204,21,.08), transparent 60%),
      radial-gradient(500px 500px at 10% 70%, rgba(245,158,11,.05), transparent 60%),
      var(--bg) !important;
    animation: none !important;
  }

  /* Opreste orbita animata si canvas-ul de fundal (grele pe telefon) */
  .orbwrap canvas,
  .stage canvas,
  canvas.aurora {
    display: none !important;
  }
  .orbwrap, .stage {
    min-height: auto !important;
  }

  /* Respecta preferinta de "miscare redusa" a utilizatorului */
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  /* ---- 2. Respiratie: spatii mai mici intre sectiuni ---- */
  section, .sec {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---- 3. Titluri: mai mici, sa nu ocupe tot ecranul ---- */
  h1, .big {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
  }
  h2 {
    font-size: clamp(23px, 6.5vw, 30px) !important;
    line-height: 1.18 !important;
  }
  .intro, section > p, .shead p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
  .eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  /* ---- 4. Cardurile de produs: mai compacte ---- */
  .prod {
    padding: 22px 20px !important;
    border-radius: 20px !important;
  }
  .prod .ic {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 14px !important;
  }
  .prod h3 {
    font-size: 19px !important;
  }
  .prod .pd {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .prods {
    gap: 14px !important;
  }

  /* ---- 5. Sectiunea "orbita/platforma" (orbwrap): simplificata ---- */
  /* Pe telefon animatia complexa nu se vede bine — o ascundem si aratam doar esentialul */
  .orbwrap {
    display: none !important;
  }

  /* ---- 6. Pasii (steps): mai stransi ---- */
  .steps {
    gap: 16px !important;
  }
  .step {
    padding: 18px !important;
  }
  .step .n {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
  .step .tx h4, .step h4 {
    font-size: 15px !important;
  }
  .step .tx p, .step p {
    font-size: 13px !important;
  }

  /* ---- 7. Butoane: mai usor de apasat cu degetul ---- */
  .btn {
    padding: 14px 26px !important;
    font-size: 14.5px !important;
  }
  .cta-card {
    padding: 26px 22px !important;
    border-radius: 22px !important;
  }

  /* ---- 8. Footer: mai compact ---- */
  footer, .footer {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .ft-col {
    margin-bottom: 8px !important;
  }

  /* ---- 9. Preturi (paginile pricing): carduri mai aerisite ---- */
  .pcard {
    padding: 24px 20px !important;
  }
  .tiername {
    font-size: 15px !important;
  }
  .pnum {
    font-size: 42px !important;
  }
  .feats li {
    font-size: 13.5px !important;
    padding: 6px 0 !important;
  }

  /* ---- 10. Elimina umbre grele (par mai curat, se incarca mai repede) ---- */
  .prod, .pcard, .cta-card, .step {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }
}

/* ---- Sub 380px (telefoane mici): si mai stramt ---- */
@media (max-width: 380px) {
  h1, .big {
    font-size: 28px !important;
  }
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .prod {
    padding: 20px 16px !important;
  }
}