:root{
  --app-tab-h:64px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

/* App tab bar — always on phones, and always in installed PWA */
.app-tabbar{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1100;
  height:calc(var(--app-tab-h) + var(--safe-bottom));
  padding:6px 8px var(--safe-bottom);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid #e5e5e5;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2px;
}
.app-tab{
  appearance:none;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:48px;border-radius:12px;color:#6b7280;font:600 10px/1.1 'Inter',sans-serif;
  text-decoration:none;padding:4px 2px;-webkit-tap-highlight-color:transparent;
}
.app-tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-tab[aria-current=page],.app-tab.is-active{color:#c41e3a;background:#fff1f3}
.app-tab--accent{color:#c41e3a}
.app-tab--accent span{font-weight:700}

/* Hide old 3-button bar — replaced by app tabs */
.mobile-bar{display:none!important}

@media(max-width:800px){
  .app-tabbar{display:grid}
  body{padding-bottom:calc(var(--app-tab-h) + var(--safe-bottom) + 8px)}
  .header{height:56px;padding-top:var(--safe-top)}
  .header-inner{height:56px}
  .header .nav,.header .menu-toggle{display:none}
  .header .header-actions .btn-sm:not(#headerPhoneLink){display:none}
  .hero{padding-top:88px;min-height:auto;padding-bottom:48px}
  .hero h1{font-size:clamp(28px,8vw,40px);letter-spacing:-1px}
  .hero-subtitle{font-size:15px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .section{padding:48px 0}
  .container{padding:0 16px}
  .services-grid,.features-grid{grid-template-columns:1fr;gap:12px}
  .service-card,.feature{padding:18px}
  .contacts-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-store{flex-direction:column;align-items:stretch;gap:14px}
  .calc-mobile-total{bottom:calc(var(--app-tab-h) + var(--safe-bottom))}
  body.calc-in-view .app-tabbar{opacity:.35;pointer-events:none}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{max-width:100%;border-radius:20px 20px 0 0;max-height:min(92vh,920px);padding:24px 18px calc(18px + var(--safe-bottom))}
  .messenger-book-modal{max-width:100%}
}

/* Installed / standalone PWA */
@media(display-mode:standalone),(display-mode:fullscreen){
  .app-tabbar{display:grid}
  body{padding-bottom:calc(var(--app-tab-h) + var(--safe-bottom) + 8px);background:#f7f7f6}
  .header{
    padding-top:var(--safe-top);
    height:calc(56px + var(--safe-top));
    background:#fff;
  }
  .header-inner{height:56px}
  .header .nav,.header #headerStoreLink{display:none}
  .hero{border-radius:0;min-height:calc(100svh - 56px - var(--app-tab-h) - var(--safe-top) - var(--safe-bottom));display:flex;align-items:flex-end}
  .hero-content{padding-bottom:28px}
  .section-label{font-size:11px}
  /* denser app chrome */
  .footer{padding-bottom:24px}
}

@supports (-webkit-touch-callout:none){
  @media(max-width:800px){
    .hero{min-height:auto}
  }
}

/* Install hint chip */
.pwa-install{
  display:none;position:fixed;left:12px;right:12px;bottom:calc(var(--app-tab-h) + var(--safe-bottom) + 12px);
  z-index:1090;background:#171b22;color:#fff;border-radius:14px;padding:12px 14px;gap:12px;align-items:center;
  box-shadow:0 12px 30px #0004;font-size:13px;
}
.pwa-install.is-visible{display:flex}
.pwa-install p{margin:0;flex:1;line-height:1.35;color:#dbe0e8}
.pwa-install .btn{flex-shrink:0;padding:10px 14px;font-size:12px}
.pwa-install .pwa-dismiss{appearance:none;border:0;background:transparent;color:#9aa3af;font-size:20px;line-height:1;cursor:pointer;padding:4px}