/* Альтамед+ — страница скачивания приложения
   Раскладки:
   1) телефон, книжная (по умолчанию)
   2) планшет, книжная (≥ 600px)
   3) телефон, альбомная (высота ≤ 540px)
   4) широкий экран: ПК, ноутбук, планшет в альбомной (≥ 960px, альбомная)            */

:root {
  --bg: #eef2f6;
  --card: #ffffff;
  --ink: #14213d;
  --muted: #4a5068;
  --line: #e1e7ef;
  --blue: #0072b1;
  --blue-hover: #005a8c;
  --blue-icon: #0082c8;
  --blue-tint: #e3f1f9;
  --blue-soft: #e2f0f9;
  --blue-deep: #0a80c2;
  --navy: #14213d;
  --navy-hover: #1f3159;
  --on-navy: #c9d1e0;
  --on-navy-2: #b4c0d4;
  --on-blue: #d7ebf7;
  --pink: #ffc9ce;
  --pink-ink: #7a2a24;
  --red: #c4271d;

  --font-head: Montserrat, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body: "PT Sans", "Segoe UI", Roboto, system-ui, sans-serif;

  --gap: 10px;
  --r-tile: 24px;
  --r-mini: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; }
h1, h2, p { margin: 0; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ── Каркас: телефон, книжная ─────────────────────────────────────────── */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto auto auto;
  grid-template-areas:
    "main   main"
    "f1     f2"
    "f3     rem"
    "stores stores"
    "web    web";
}
.tile-hero, .features { display: contents; }
.tile-show, .tile-qr, .feat--tele, .eyebrow, .br-wide, .lead-wide, .w-wide,
.feat-desc, .remind-desc, .call-number { display: none; }

/* Главная плитка */
.hero-main {
  grid-area: main;
  position: relative;
  overflow: hidden;
  min-height: 340px;
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 18px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.logo { display: block; flex: none; }
.logo img { height: 44px; width: auto; }
.call {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; border-radius: 12px;
  color: var(--blue); text-decoration: none;
}
.hero-copy { display: flex; flex-direction: column; gap: 12px; }
h1 {
  margin-top: 4px;
  font: 800 clamp(25px, 7.4vw, 31px)/1.06 var(--font-head);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lead { font-size: 15px; color: var(--muted); }

/* Телефон, выглядывающий из главной плитки */
.hero-phone { position: relative; flex: 1; min-height: 120px; }
.hero-phone .circle {
  position: absolute; left: 50%; top: 40px;
  width: 300px; height: 300px; margin-left: -150px;
  border-radius: 50%; background: var(--blue-soft);
}
.device {
  position: absolute; left: 50%;
  width: 200px; aspect-ratio: 270 / 578;
  transform: translateX(-50%);
  padding: 7px; border-radius: 34px;
  background: var(--navy);
  box-shadow: 0 20px 40px rgba(20, 33, 61, 0.18);
}
.hero-phone .device { top: 6px; }
.device picture, .device img { width: 100%; height: 100%; }
.device img { object-fit: cover; object-position: top; border-radius: 27px; }

/* Мини-плитки функций */
.feat, .tile-remind {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border-radius: var(--r-mini);
  background: var(--card);
}
.feat .i { color: var(--blue-icon); width: 22px; height: 22px; }
.feat-title, .remind-title { font: 700 14px/1.3 var(--font-head); }
.feat.feat--tele { display: none; }
.feat--record  { grid-area: f1; }
.feat--medcard { grid-area: f2; }
.feat--family  { grid-area: f3; }
.tile-remind   { grid-area: rem; background: var(--pink); }
.remind-icon { color: var(--red); }
.remind-icon .i { width: 22px; height: 22px; }
.remind-text { display: flex; flex-direction: column; gap: 6px; }

/* Кнопки магазинов */
.stores {
  grid-area: stores;
  background: var(--card);
  border-radius: var(--r-tile);
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.stores-hint {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px;
  font-size: 13px; color: var(--muted);
}
.stores-hint .i { flex: none; }
.hint-desktop, .hint-all { display: none; }
.is-desktop .hint-device { display: none; }
.is-desktop .hint-desktop { display: inline; }
.show-all .hint-device, .show-all .hint-desktop { display: none; }
.show-all .hint-all { display: inline; }

.store-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.store {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 12px;
  border-radius: 16px;
  background: var(--navy); color: #fff;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.store:hover { background: var(--navy-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20, 33, 61, 0.18); }
.store:active { transform: translateY(0); }
.store .i { flex: none; }
.store-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.store-text small { font-size: 11px; color: var(--on-navy); }
.store-text b { font: 700 16px/1.2 var(--font-head); white-space: nowrap; }
.store--has-badge { padding: 0; background: none; height: auto; }
.store--has-badge:hover { background: none; box-shadow: none; }
.store-badge { height: 56px; width: auto; max-width: 100%; }

.is-ios .store--appstore,
.is-android .store--googleplay,
.is-android .store--rustore,
.is-desktop .store,
.show-all .store { display: flex; }
.is-ios:not(.show-all) .store-text b { font-size: 18px; }

.other-link { align-self: center; padding: 8px 10px; font-size: 14px; }
.show-all:not(.is-desktop) .other-link { display: none; }

@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 114, 177, 0); } 40% { box-shadow: 0 0 0 5px rgba(0, 114, 177, .35); } }
.flash .store { animation: flash 1s ease 2; }

/* Веб-версия */
.web {
  grid-area: web;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 16px 16px 22px;
  border-radius: var(--r-tile);
  background: var(--blue); color: #fff;
  text-decoration: none;
  transition: background-color .2s ease;
}
.web:hover { background: var(--blue-hover); color: #fff; }
.web-text { display: flex; flex-direction: column; gap: 3px; }
.web-title { font: 700 16px/1.25 var(--font-head); }
.web-sub { font-size: 13px; color: var(--on-blue); }
.web-arrow {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--blue);
  transition: transform .2s ease;
}
.web:hover .web-arrow { transform: translateX(3px); }

/* Плавное появление */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .page { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* три магазина на узком телефоне: третий — на всю ширину */
@media (max-width: 599px) and (min-width: 341px) {
  .show-all .store--rustore { grid-column: 1 / -1; }
}

/* ── Невысокие телефоны (iPhone SE, 360×640): прячем плитки функций,
      чтобы кнопки помещались на экран без прокрутки ──────────────────── */
@media (max-width: 599px) and (max-height: 740px) and (orientation: portrait) {
  .page {
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "main main" "stores stores" "web web";
  }
  .feat, .tile-remind { display: none; }
  .hero-main { min-height: 300px; }
}

/* ── Совсем узкие телефоны (≤ 340px) ─────────────────────────────────── */
@media (max-width: 340px) {
  .store-list { grid-template-columns: 1fr; }
  .logo img { height: 38px; }
}

/* ── Планшет, книжная (и узкие окна на ПК) ───────────────────────────── */
@media (min-width: 600px) {
  .page {
    --gap: 14px;
    max-width: 780px;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
             max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas:
      "main   main   main   main"
      "f1     f2     f3     rem"
      "stores stores stores stores"
      "web    web    web    web";
  }
  .hero-main { padding: 28px 36px 0; border-radius: 28px; gap: 16px; min-height: 460px; }
  .logo img { height: 52px; }
  .call { border: 1px solid var(--line); padding: 0 14px; }
  .call-number { display: inline; font: 700 15px var(--font-head); color: var(--ink); }
  .hero-copy { gap: 16px; }
  h1 { font-size: clamp(34px, 5.6vw, 46px); }
  .br-wide { display: inline; }
  .lead { font-size: 18px; max-width: 560px; }
  .lead-wide { display: inline; }
  .lead-narrow { display: none; }
  .hero-phone { min-height: 200px; }
  .hero-phone .circle { width: 460px; height: 460px; margin-left: -230px; top: 70px; }
  .hero-phone .device { width: 260px; top: 10px; padding: 9px; border-radius: 44px; }
  .hero-phone .device img { border-radius: 35px; }
  .feat, .tile-remind { padding: 18px; border-radius: 24px; }
  .feat-title, .remind-title { font-size: 15px; }
  .stores { padding: 20px; border-radius: 28px; gap: 12px; }
  .store-list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
  .web { padding: 22px 22px 22px 28px; border-radius: 28px; }
  .web-title { font-size: 20px; }
  .web-sub { font-size: 15px; }
  .w-wide { display: inline; }
  .w-narrow { display: none; }
  .web-arrow { width: 56px; height: 56px; }
}

/* ── Телефон в альбомной ориентации ──────────────────────────────────── */
@media (orientation: landscape) and (max-height: 540px) {
  .page {
    --gap: 10px;
    max-width: 980px;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "main stores"
      "main web";
  }
  .feat, .tile-remind { display: none; }
  .hero-main {
    min-height: 0;
    padding: 18px 22px;
    border-radius: 24px;
    gap: 12px;
    justify-content: space-between;
  }
  .hero-phone { display: none; }
  .logo img { height: 40px; }
  .call { border: 0; padding: 0; }
  .call-number { display: none; }
  h1 { font-size: clamp(22px, 3.6vw, 30px); }
  .br-wide { display: none; }
  .lead { font-size: 15px; }
  .lead-wide { display: none; }
  .lead-narrow { display: inline; }
  .stores { justify-content: center; padding: 16px; border-radius: 24px; gap: 10px; }
  .store-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .web { padding: 14px 14px 14px 20px; border-radius: 24px; }
  .web-title { font-size: 16px; }
  .web-sub { font-size: 13px; }
  .w-wide { display: none; }
  .w-narrow { display: inline; }
  .web-arrow { width: 44px; height: 44px; }
}
/* в альбомной на больших телефонах справа в главной плитке выглядывает телефон */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 780px) {
  .hero-copy { max-width: calc(100% - 170px); }
  .hero-phone {
    display: block; position: absolute;
    right: 22px; top: 76px; bottom: 0; width: 150px; min-height: 0;
  }
  .hero-phone .circle { width: 220px; height: 220px; margin-left: -110px; top: 40px; }
  .hero-phone .device { width: 150px; top: 0; padding: 6px; border-radius: 26px; }
  .hero-phone .device img { border-radius: 20px; }
}

/* ── Широкий экран: ПК, ноутбук, планшет в альбомной ─────────────────── */
@media (min-width: 960px) and (min-height: 541px) and (orientation: landscape) {
  .page {
    --gap: 16px;
    max-width: 1680px;
    padding: clamp(16px, 3.1vh, 28px);
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr auto;
    grid-template-areas:
      "hero show qr"
      "hero show rem"
      "feat web  web";
  }
  .is-ios .page, .is-android .page {
    grid-template-areas:
      "hero show rem"
      "hero show rem"
      "feat web  web";
  }

  /* главная плитка становится единой карточкой */
  .tile-hero {
    grid-area: hero;
    display: flex; flex-direction: column;
    gap: clamp(14px, 2.4vh, 22px);
    padding: clamp(24px, 4vh, 36px) clamp(28px, 2.8vw, 40px);
    background: var(--card);
    border-radius: 28px;
    min-width: 0;
  }
  .hero-main {
    flex: 1;
    min-height: 0;
    padding: 0; border-radius: 0; background: none; overflow: visible;
    gap: clamp(14px, 2.4vh, 22px);
  }
  .hero-phone { display: none; }
  .logo img { height: clamp(44px, 6.2vh, 56px); }
  .call { border: 0; padding: 0; min-width: 0; height: auto; }
  .call .i { display: none; }
  .call-number { display: inline; font: 700 15px var(--font-head); color: var(--ink); }
  .call:hover .call-number { color: var(--blue); }
  .hero-copy { margin-top: auto; gap: clamp(12px, 2vh, 18px); }
  .eyebrow {
    display: inline-block; align-self: flex-start;
    padding: 8px 14px; border-radius: 999px;
    background: var(--blue-tint); color: var(--blue-hover);
    font: 600 13px/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase;
  }
  h1 { margin: 0; font-size: clamp(34px, min(3.8vw, 6.2vh), 58px); line-height: 1.04; letter-spacing: -0.025em; }
  .br-wide { display: inline; }
  .lead { font-size: clamp(16px, 2vh, 18px); max-width: 480px; }
  .lead-wide { display: inline; }
  .lead-narrow { display: none; }

  .stores { padding: 0; border-radius: 0; background: none; gap: clamp(12px, 2.2vh, 22px); }
  .is-desktop:not(.show-all) .stores-hint { display: none; }
  .stores-hint { padding: 0; font-size: 14px; }
  .store-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .store { justify-content: flex-start; padding: 0 14px; border-radius: 14px; height: clamp(52px, 6.7vh, 60px); }
  .is-ios:not(.show-all) .store-text b { font-size: 16px; }
  .other-link { align-self: flex-start; padding: 0; font-size: 15px; }

  /* синяя плитка с телефоном */
  .tile-show {
    grid-area: show;
    display: block; position: relative; overflow: hidden;
    min-height: 0;
    padding: clamp(24px, 4vh, 36px) 32px;
    border-radius: 28px;
    background: var(--blue); color: #fff;
  }
  .tile-show h2 { position: relative; z-index: 1; font: 700 clamp(20px, 1.8vw, 26px)/1.2 var(--font-head); }
  .tile-show .circle {
    position: absolute; left: 50%; top: calc(clamp(110px, 18vh, 168px) + 62px);
    width: 420px; height: 420px; margin-left: -210px;
    border-radius: 50%; background: var(--blue-deep);
  }
  .tile-show .device {
    top: clamp(110px, 18vh, 168px);
    width: clamp(210px, 18.75vw, 290px);
    padding: 9px; border-radius: 44px;
    box-shadow: 0 30px 60px rgba(8, 30, 60, 0.35);
  }
  .tile-show .device img { border-radius: 35px; }

  /* QR-код */
  .tile-qr {
    grid-area: qr;
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    padding: clamp(20px, 3.1vh, 28px);
    border-radius: 28px;
    background: var(--card);
  }
  .is-ios .tile-qr, .is-android .tile-qr { display: none; }
  .qr { align-self: flex-start; border-radius: 4px; }
  .qr svg { width: clamp(92px, 14.7vh, 132px); height: auto; }
  .tile-qr-text { display: flex; flex-direction: column; gap: 6px; }
  .tile-qr h2 { font: 700 18px/1.25 var(--font-head); }
  .tile-qr p { font-size: 15px; line-height: 1.4; color: var(--muted); }

  /* напоминания */
  .tile-remind {
    display: flex; justify-content: space-between; gap: 14px;
    padding: clamp(20px, 3.1vh, 28px);
    border-radius: 28px;
  }
  .remind-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 16px;
    background: #fff;
  }
  .remind-icon .i { width: 26px; height: 26px; }
  .remind-title { font-size: 20px; }
  .remind-desc { display: block; font-size: 15px; line-height: 1.4; color: var(--pink-ink); }

  /* ряд функций */
  .features {
    grid-area: feat;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start; align-content: center;
    padding: clamp(18px, 2.7vh, 24px) 28px;
    border-radius: 28px;
    background: var(--card);
  }
  .feat { grid-area: auto; padding: 0; border-radius: 0; background: none; gap: 10px; }
  .feat .i { width: 26px; height: 26px; }
  .feat.feat--medcard { display: none; }
  .feat.feat--tele { display: flex; }
  .feat-title { font-size: 16px; }
  .feat-desc { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); }

  /* веб-версия */
  .web {
    padding: 24px 32px;
    border-radius: 28px;
    background: var(--navy);
    gap: 24px;
  }
  .web:hover { background: var(--navy-hover); }
  .web-text { gap: 8px; }
  .web-title { font-size: clamp(20px, 1.7vw, 24px); }
  .web-sub { font-size: 15px; color: var(--on-navy-2); }
  .w-wide { display: inline; }
  .w-narrow { display: none; }
  .web-arrow { width: 64px; height: 64px; color: var(--navy); }
  .web-arrow .i { width: 26px; height: 26px; }
}

/* широкий экран, но окно узкое или невысокое (ноутбуки 1366×657, iPad 1024×768) */
@media (min-width: 960px) and (max-width: 1399px) and (min-height: 541px) and (orientation: landscape) {
  .store-list { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
  .store { gap: 8px; padding: 0 12px; }
  .store .i { width: 20px; height: 20px; }
  .store-text b { font-size: 15px; }
  .store-text small { font-size: 10.5px; }
}
@media (min-width: 960px) and (max-width: 1299px) and (min-height: 541px) and (orientation: landscape) {
  h1 { font-size: clamp(30px, min(3.5vw, 5.8vh), 50px); }
}
@media (min-width: 960px) and (max-height: 840px) and (min-height: 541px) and (orientation: landscape) {
  .eyebrow { display: none; }
}
@media (min-width: 960px) and (max-height: 760px) and (min-height: 541px) and (orientation: landscape) {
  .features { gap: 16px; }
  .feat { gap: 6px; }
  .feat .i { width: 22px; height: 22px; }
  .feat-desc { font-size: 13px; }
  .web { padding: 18px 28px; }
  .web-arrow { width: 52px; height: 52px; }
}