/* Phone / tablet only — desktop rules stay untouched */
@media (max-width: 991.98px) {
  .app-header {
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
    background: #fff;
    box-shadow: 0 1px 0 #efe7f4, 0 8px 20px rgba(46, 16, 100, .05);
  }
  .app-brand img { height: 38px; }
  .app-brand span { font-size: .92rem; font-weight: 800; }

  .hero-slide { height: clamp(420px, 88vw, 560px); }
  .hero-caption {
    align-items: flex-end;
    padding: 0 0 1.35rem;
    background: linear-gradient(180deg, transparent 28%, rgba(18, 8, 24, .72) 100%);
  }
  .hero-copy h1 { font-size: 1.48rem; letter-spacing: -.03em; }
  .hero-lead { font-size: .9rem; margin-bottom: .85rem; max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: .55rem; }
  .hero-actions .btn { width: 100%; justify-content: center; min-height: 46px; }

  .section { padding: 2.4rem 0; }
  .section-title { font-size: 1.38rem; }
  .kicker { font-size: .68rem; }

  .service-tile {
    padding: 1.15rem 1rem;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(75, 23, 109, .07);
  }
  .service-ico {
    width: 48px;
    height: 48px;
    margin-bottom: .65rem;
  }
  .page-services .row > [class*="col-"] { margin-bottom: 0; }

  .doc-pro { padding: 1.1rem 1rem 1.15rem; }
  .about-photo { max-height: 280px; }
  .call-strip { flex-direction: column; align-items: stretch; gap: 10px; }
  .call-strip .btn { width: 100%; }

  .sec-blog .blog-feature { min-height: 0 !important; }
  .gallery-power { gap: 8px; }

  .app-tabbar {
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(46, 16, 100, .08);
  }
  .app-tab { min-height: 50px; font-size: .64rem; }

  .page-banner .display-5 { font-size: 1.4rem; }
  .page-banner .lead { font-size: .92rem; }

  .btn-mayom, .btn-soft, .btn-hero-ghost { min-height: 46px; }
  .form-control, .form-select { min-height: 46px; font-size: 16px; }
}

@media (max-width: 575.98px) {
  .hero-slide { height: clamp(440px, 96vw, 520px); }
  .hero-copy h1 { font-size: 1.36rem; }
  .sec-services .row > .col-lg-3 { flex: 0 0 100%; max-width: 100%; }
}