/* Детали в духе Apple — только то, что есть на главной (design-md/apple). 22.10.2026.
   Общие правила (шапка, подвал, кнопки, поля, карточки, появление) — в apple-site.css,
   его подключает shared-header.js на всех страницах. Всё под html.at. */

/* ── Типографика главной ── */
html.at .home-hero-title { font-weight: 600 !important; letter-spacing: -.035em !important; line-height: 1.04 !important; }
html.at #catalog h2, html.at #podbor h2 { font-weight: 600 !important; letter-spacing: -.028em !important; }
html.at #podbor h3, html.at .graphite-category h2, html.at .graphite-category h3 { font-weight: 600 !important; letter-spacing: -.022em !important; }

/* ── Кнопки главной ── */
html.at .scp0, html.at .podbor-cta { padding-left: 26px !important; padding-right: 22px !important; }
html.at .scp1:hover { background: #fff !important; color: #0A0E14 !important; border-color: #fff !important; }
html.at .scp4:hover { background: #17191C !important; color: #fff !important; }

/* ── Карточки разделов: крупное скругление, мягкий подъём, «дыхание» картинки ── */
html.at .graphite-category {
  border-radius: 18px !important;
  transition: transform .5s var(--at-spring), box-shadow .5s var(--at-spring) !important;
  will-change: transform;
}
html.at .graphite-category:hover { transform: translateY(-4px) scale(1.008); box-shadow: 0 18px 40px rgba(10, 14, 20, .10); }
html.at .graphite-category:active { transform: scale(.985); transition-duration: .15s !important; }
html.at .graphite-category img { transition: transform .9s var(--at-spring) !important; }
html.at .graphite-category:hover img { transform: scale(1.04); }
html.at #catalog a.ui-control:not(.graphite-category):not(.scp4) { border-radius: 18px !important; }
html.at .graphite-category > span:last-child { transition: transform .4s var(--at-spring), background-color .25s var(--at-ease) !important; }
html.at .graphite-category:hover > span:last-child { transform: scale(1.08); }
html.at #catalog a.ui-control:not(.graphite-category):not(.scp4) span[style*="gap: 6px"] > span { border-radius: 980px !important; padding-left: 10px !important; padding-right: 10px !important; }
html.at #catalog a:not(.ui-control):not(.scp5) { color: #1D58D8 !important; transition: color .2s var(--at-ease); }
html.at #catalog a:not(.ui-control):not(.scp5):hover { text-decoration: underline; text-underline-offset: 3px; }

/* Строка производителей: своя анимация сохраняется — тёмная заливка поднимается снизу,
   буквы белеют. Фон здесь не задаём: shorthand background сбросил бы эту заливку. */
html.at .scp5 { border-radius: 18px; overflow: hidden; transition: background-size 420ms cubic-bezier(.65, 0, .25, 1), color 260ms, transform .3s var(--at-spring) !important; }
html.at .scp5:active { transform: scale(.97); }

/* ── Первый экран: подзаголовок, стеклянная карточка узла, ссылки ── */
html.at .home-hero-lead { font-size: 19px !important; line-height: 1.42 !important; letter-spacing: -.012em !important; color: #a1a1a6 !important; }
html.at .hero-node-card {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
  transition: transform .5s var(--at-spring), background-color .3s var(--at-ease) !important;
}
html.at .hero-node-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .09) !important; }
html.at .hero-node-art img { border-radius: 12px; }
html.at .hero-node-link, html.at .hero-model-caption a { color: #2997ff !important; transition: opacity .2s var(--at-ease); }
html.at .hero-node-link:hover, html.at .scp2:hover, html.at .hero-model-caption a:hover { text-decoration: underline; text-underline-offset: 3px; }
html.at .hero-node-pin { transition: transform .25s var(--at-spring) !important; }
html.at .hero-node-pin:hover { transform: scale(1.18); }
html.at .hero-node-pin:active { transform: scale(.92); }
html.at .scp3 { transition: opacity .25s var(--at-ease) !important; }
html.at .hero-dealers:hover .scp3:not(:hover) { opacity: .55; }

/* ── Подбор по фото: чёрный зал, карточка 18px, синие номера шагов ── */
html.at #podbor { background: #000 !important; }
html.at #podbor ol > li > span:first-child { color: #2997ff !important; font-weight: 600 !important; }
html.at #podbor ol, html.at #podbor ol > li { border-color: #2c2c2e !important; }
html.at #podbor p, html.at #podbor ol > li > span:last-child > span:last-child { color: #a1a1a6 !important; }
html.at .podbor-card { border-radius: 18px !important; background: #1d1d1f !important; overflow: hidden; }
html.at .podbor-media { overflow: hidden; }
html.at .podbor-media img { transform: scale(var(--at-zoom, 1)); transform-origin: 50% 60%; will-change: transform; }
html.at .podbor-note { border-color: #2c2c2e !important; }
html.at .podbor-note a { color: #2997ff !important; }

@media (prefers-reduced-motion: reduce) {
  html.at .graphite-category, html.at .graphite-category img { transition: none !important; }
}

/* ── Переключатель для сравнения (только на демо-странице) ── */
.at-toggle {
  position: fixed; left: 50%; bottom: 20px; z-index: 1000; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px;
  border-radius: 980px; background: rgba(29, 29, 31, .78); color: #f5f5f7;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font: 500 13px/1 IBM Plex Sans, system-ui, sans-serif; letter-spacing: -.01em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.at-toggle button {
  border: 0; cursor: pointer; border-radius: 980px; padding: 9px 16px; font: inherit;
  background: #1D58D8; color: #fff; transition: transform .18s, background-color .2s;
}
.at-toggle button:active { transform: scale(.95); }
.at-toggle button[aria-pressed="false"] { background: #48484a; }