/* ═══════════════════════════════════════════════════════════════
   MOBILE-CENTER — collected rules that center the page on phones.
   Loaded LAST so it wins specificity ties.

   Scope: <= 768px (tablet portrait + phones). Desktop is untouched.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Hero ─────────────────────────────────────────────────── */
  .hero-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-tag         { margin-left: auto; margin-right: auto; }
  .hero-desc        { margin-left: auto; margin-right: auto; }
  .hero-actions     { justify-content: center; width: 100%; }
  .hero-trust       { justify-content: center; }
  .hero-content     { text-align: center; }

  /* ── Section headers (.stag + .stit + .sdesc) ─────────────── */
  .stag {
    margin-left: auto; margin-right: auto;
    justify-content: center;
  }
  h2.stit       { text-align: center; }
  .sdesc,
  .why-desc,
  .euroalba-desc { text-align: center; margin-left: auto; margin-right: auto; }

  .prod-header,
  .proc-header,
  .ea-header,
  .euroalba-proj-header,
  .testi-header {
    text-align: center;
    align-items: center;
  }
  .prod-header  { flex-direction: column; gap: 14px; }

  /* ── Why-us features ──────────────────────────────────────── */
  .why-grid > div:first-child { text-align: center; }
  .why-features { align-items: stretch; }
  .wf-item {
    text-align: left;          /* keep readable inside the card */
  }

  /* ── EuroAlba ─────────────────────────────────────────────── */
  .euroalba-left   { text-align: center; }
  .euroalba-stats  { align-items: center; }
  .euroalba-link   { margin-left: auto; margin-right: auto; }
  .euroalba-stat   { justify-content: center; }
  .euroalba-palace-card { margin-left: auto; margin-right: auto; max-width: 480px; }

  /* ── Process ──────────────────────────────────────────────── */
  .pstep {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .pstep .snum { margin: 0 auto 12px; }

  /* ── Products ─────────────────────────────────────────────── */
  .prod-view-all { align-self: center; }

  /* ── Contact ──────────────────────────────────────────────── */
  .ci            { text-align: center; }
  .ci h2         { text-align: center; }
  .ci > p        { margin-left: auto; margin-right: auto; }
  .citems        { align-items: stretch; }   /* cards keep full width */
  .cit           { text-align: left; }       /* but content inside reads left */
  .contact-offers-title { text-align: center; }

  /* ── CTA band ─────────────────────────────────────────────── */
  .ctab-actions  { justify-content: center; }
  .ctab-offer    { margin-left: auto; margin-right: auto; }

  /* ── Footer ───────────────────────────────────────────────── */
  footer .ftop   { text-align: center; gap: 24px; }
  .fbrand        { display: flex; flex-direction: column; align-items: center; }
  /* M4: keep only the short tagline as the slogan — drop the long blurb */
  .fbrand p      { display: none; }
  .flogo-wrap    { justify-content: center; }
  /* M3: centre the logo image content, not just its box */
  .footer-logo-real { object-position: center; }
  .fsoc          { justify-content: center; }
  .fc h4         { text-align: center; }
  /* M5: full-width columns with roomy, easy-to-tap links */
  .fc            { flex-basis: 100%; max-width: 340px; margin: 0 auto; }
  .fl            { align-items: center; gap: 4px; }
  .fl a          { display: inline-block; padding: 10px 14px; font-size: 15px; }
  .fbot          { align-items: center; text-align: center; }
}

/* ── Smaller phones: full-width primary CTAs ─────────────── */
@media (max-width: 480px) {
  .hero-actions .btn-primary,
  .hero-actions .btn-outline-white,
  .ctab-actions .btn-primary,
  .ctab-actions .btn-outline-white {
    width: 100%;
    justify-content: center;
  }
  .hero-trust    { gap: 12px; flex-direction: row; }
  .htrust-sep    { display: none; }
}