/* ==========================================================================
   APP SHELL — phone layout that behaves like an app (bottom tab bar, sticky
   call/WhatsApp buttons, big tappable cards). Desktop layout is untouched:
   every rule below the first block lives inside the 768px media query.
   ========================================================================== */
.as-tabbar, .as-sheet, .as-sheet-back, .as-call, .as-more-btn, .app-only { display: none; }

@media (max-width: 768px) {
  .app-only { display: block; }
  .desk-only { display: none !important; }
  html.as-on body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); background: #eef2f6; }

  /* ---- compact app bar instead of the stacked logo + link wall ---- */
  html.as-on header {
    flex-direction: row; justify-content: space-between; align-items: center; text-align: left;
    padding: 10px 14px; gap: 10px; box-shadow: 0 2px 12px rgba(0,26,46,.28);
  }
  html.as-on header .logo-container { flex-direction: row; gap: 10px; min-width: 0; }
  html.as-on header .logo-img { max-height: 34px; }
  html.as-on header .logo h1 { font-size: 1.02rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.as-on header .logo p { font-size: .62rem; letter-spacing: 1.6px; }
  html.as-on header nav { display: none; }
  .as-more-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid #1a5fc4;
    background: #fff; color: #1a5fc4; cursor: pointer; padding: 0;
  }
  .as-more-btn svg { width: 22px; height: 22px; }

  /* ---- bottom tab bar ---- */
  .as-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    background: #fff; border-top: 1px solid #dbe3ec; box-shadow: 0 -6px 24px rgba(0,26,46,.10);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
  }
  .as-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; border-radius: 14px; color: #5b6b7a; font-size: .72rem; font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s;
  }
  .as-tab svg { width: 24px; height: 24px; }
  button.as-tab { border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0; }
  .as-ask i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -16px; border-radius: 50%; background: #e5472b; color: #fff; box-shadow: 0 4px 12px rgba(0,26,46,.3); border: 3px solid #fff; }
  .as-ask i svg { width: 21px; height: 21px; }
  .as-ask span { margin-top: -2px; }
  .as-call { display: none !important; }
  html.as-home .whatsapp-float { display: none !important; }
  .as-tab.is-on { background: #1a5fc4; color: #fff; }
  .as-tab:active { background: #e6edf4; }
  .as-tab.is-on:active { background: #0a3d63; }

  /* ---- floating actions sit above the tab bar ---- */
  .whatsapp-float { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; width: 48px !important; height: 48px !important; z-index: 8900 !important; }
  .as-call {
    display: flex; align-items: center; justify-content: center; position: fixed; z-index: 8900;
    right: 76px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px;
    border-radius: 50%; background: #1a5fc4; color: #fff; box-shadow: 0 4px 14px rgba(0,26,46,.35); text-decoration: none;
  }
  .as-call svg { width: 24px; height: 24px; }

  /* ---- "More" bottom sheet ---- */
  .as-sheet-back { display: block; position: fixed; inset: 0; z-index: 10040; background: rgba(0,16,29,.55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .as-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10050; background: #fff;
    border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -12px 40px rgba(0,16,29,.3);
  }
  .as-sheet::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 4px; background: #cbd5e1; margin: 0 auto 12px; }
  html.as-more-open .as-sheet { transform: none; }
  html.as-more-open .as-sheet-back { opacity: 1; pointer-events: auto; }
  .as-sheet h2 { font-family: var(--font-heading); font-size: 1.1rem; color: #002b49; margin: 0 4px 10px; }
  .as-sheet a, .as-sheet button.as-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 8px 10px;
    border: 0; background: none; border-radius: 14px; color: #1e2733; font-size: 1rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
  }
  .as-sheet a:active, .as-sheet button.as-row:active { background: #eef2f6; }
  .as-sheet .as-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; background: #e9eff5; color: #002b49; display: flex; align-items: center; justify-content: center; }
  .as-sheet .as-ic svg { width: 20px; height: 20px; }
  .as-sheet small { display: block; font-weight: 400; color: #5b6b7a; font-size: .8rem; }

  /* ---- bigger, softer cards everywhere ---- */
  html.as-on section { padding: 30px 16px; }
  html.as-on .section-title { font-size: 1.45rem; }
  html.as-on .audience-card, html.as-on .tool-catalog-card, html.as-on .service-card {
    border-radius: 20px; box-shadow: 0 2px 10px rgba(0,26,46,.08); border: 1px solid #e3eaf1;
  }
  html.as-on .btn, html.as-on .btn-tcc { min-height: 50px; border-radius: 14px; font-size: 1rem; }
  html.as-on input, html.as-on select, html.as-on textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
  html.as-on .hero { border-radius: 0 0 28px 28px; }
  html.as-on footer { padding-bottom: 28px; }
  html.as-on footer .footer-links { display: none; } /* the tab bar and More sheet replace it */
  html.as-on #promo-bar { margin: 10px 12px 0; border-radius: 14px; font-size: 14px !important; text-align: left !important; padding: 10px 40px 10px 14px !important; }

  /* swipeable card rows on the home page */
  html.as-on .swipe-row { display: flex !important; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html.as-on .swipe-row::-webkit-scrollbar { display: none; }
  html.as-on .swipe-row > * { flex: 0 0 78%; scroll-snap-align: start; }

  /* ---- home screen (index.html only) ---- */
  .app-home { padding: 0 !important; background: transparent !important; }
  .ah-card { background: linear-gradient(160deg, #001a2e, #0a3d63); color: #fff; padding: 22px 18px 74px; border-radius: 0 0 28px 28px; }
  .ah-card .ah-kicker { color: #d4af37; font-size: .78rem; font-weight: 700; letter-spacing: .5px; }
  .ah-card h2 { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.22; margin: 6px 0 8px; color: #fff; }
  .ah-card p { color: #c7d2dd; font-size: .98rem; line-height: 1.5; }
  .ah-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: -54px 14px 0; position: relative; }
  .ah-tile {
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 108px; padding: 14px; border-radius: 20px;
    background: #fff; color: #001a2e; text-decoration: none; box-shadow: 0 6px 18px rgba(0,26,46,.12); border: 1px solid #e3eaf1;
    -webkit-tap-highlight-color: transparent; transition: transform .12s;
  }
  .ah-tile:active { transform: scale(.97); }
  .ah-tile .ah-ic { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: #e9eff5; color: #002b49; }
  .ah-tile .ah-ic svg { width: 22px; height: 22px; }
  .ah-tile b { display: block; font-size: 1.02rem; line-height: 1.2; }
  .ah-tile span.ah-sub { display: block; font-size: .78rem; color: #5b6b7a; font-weight: 500; margin-top: 2px; }
  .ah-tile.is-gold { background: #1a5fc4; border-color: #1a5fc4; }
  .ah-tile.is-gold .ah-ic { background: rgba(0,43,73,.14); }
  .ah-tile.is-gold .ah-sub { color: #3a3000; }
  .ah-tile.is-wa { background: #25d366; border-color: #25d366; color: #052e16; }
  .ah-tile.is-wa .ah-ic { background: rgba(255,255,255,.35); color: #052e16; }
  .ah-tile.is-wa .ah-sub { color: #0b4a22; }
  .ah-strip { margin: 22px 0 4px; }
  .ah-strip h3 { font-family: var(--font-heading); color: #002b49; font-size: 1.15rem; margin: 0 18px 10px; }
  .ah-chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 18px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .ah-chips::-webkit-scrollbar { display: none; }
  .ah-chip { flex: none; scroll-snap-align: start; padding: 11px 16px; border-radius: 999px; background: #fff; border: 1px solid #d4dde7; color: #002b49; font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
  .ah-chip:active { background: #e9eff5; }
  .ah-rating { margin: 12px 14px 0; padding: 14px 16px; background: #fff; border-radius: 20px; border: 1px solid #e3eaf1; display: flex; align-items: center; gap: 14px; text-decoration: none; color: #1e2733; }
  .ah-rating .ah-num { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: #002b49; line-height: 1; }
  .ah-rating small { display: block; color: #5b6b7a; font-size: .8rem; }
  .ah-rating .ah-stars { color: #d4af37; letter-spacing: 2px; font-size: 1rem; }
  /* the long desktop hero and rating strip are replaced on phones */
  .home-desk-hero, .home-desk-rating { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .as-sheet, .as-sheet-back, .ah-tile { transition: none; }
}