/* ========================================================= */
/* RESPONSIVE — Global Mobile & Tablet Scaling                */
/* ========================================================= */

/* ---------- Tablet (max-width: 1024px) ---------- */
@media (max-width: 1024px) {

  /* Global spacing */
  section {
    padding: 6rem 2rem;
  }

  /* Clarity frame */
  .hps-frame {
    padding: 2.5rem 2rem;
    border-radius: 24px;
  }

  /* Typography */
  h1, h2 {
    font-size: 2.6rem;
  }

  p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  /* Glow scaling */
  .hps-glow {
    width: 280px;
    height: 280px;
    filter: blur(24px);
  }
}


/* ---------- Mobile (max-width: 768px) ---------- */
@media (max-width: 768px) {

  /* Global spacing */
  section {
    padding: 5rem 1.6rem;
  }

  /* Clarity frame */
  .hps-frame {
    padding: 2rem 1.6rem;
    border-radius: 20px;
  }

  /* Typography */
  h1, h2 {
    font-size: 2.2rem;
    letter-spacing: 0.3px;
  }

  p {
    font-size: 1.1rem;
    line-height: 1.55;
  }

  /* Glow scaling */
  .hps-glow {
    width: 240px;
    height: 240px;
    filter: blur(22px);
  }

  /* Vignette */
  .about-us-vignette,
  .why-hps-vignette,
  .founder-vignette {
    height: 180px;
    opacity: 0.28;
  }
}


/* ---------- Small Mobile (max-width: 480px) ---------- */
@media (max-width: 480px) {

  /* Global spacing */
  section {
    padding: 4rem 1.2rem;
  }

  /* Clarity frame */
  .hps-frame {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }

  /* Typography */
  h1, h2 {
    font-size: 1.9rem;
    letter-spacing: 0.2px;
  }

  p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Glow scaling */
  .hps-glow {
    width: 200px;
    height: 200px;
    filter: blur(20px);
  }

  /* Vignette */
  .about-us-vignette,
  .why-hps-vignette,
  .founder-vignette {
    height: 140px;
    opacity: 0.25;
  }
}