/* index-overrides.css — ТАП homepage refinement pass (Промт 2)
   Layered AFTER the design-system stylesheet. The DS itself is never edited;
   every refinement here composes on top of its tokens. */

/* ── Robust entrances ───────────────────────────────────────────────
   The DS uses `animation: fadeUp .7s both`. With `both` fill the element
   sits at the hidden start frame whenever the animation timeline is paused
   (background tab, print, screenshot capture) — trapping content invisible.
   Make the resting state visible and only fill forwards, so a paused
   timeline shows content instead of a blank section. Foreground users still
   get the entrance. */
.fade-up { opacity: 1; animation-fill-mode: forwards; }
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; opacity: 1; transform: none; }
}

/* ── Typographic rhythm (направление 6) ─────────────────────────────
   The page is engineering-dense. Give sections more vertical air and a
   touch more breathing room between the section-heading block and its
   content, without touching the locked type scale or palette. */
.section { padding: clamp(64px, 6vw, 92px) 0; }
/* Same-type light neighbours: compress the seam, but keep more air than
   the DS default so blocks don't collide on a long scroll. */
.section:not(.section--dark) + .section:not(.section--dark) { padding-top: clamp(56px, 5vw, 72px); }
/* A bit more space under the section intro before the grid/cards. */
.sh { margin-bottom: var(--s-8); }
.sh p { line-height: 1.55; text-wrap: pretty; }
/* Keep long ledes to a comfortable measure even when not using .sh. */
.hero-lede { text-wrap: pretty; }

/* ── Mobile hero + stack reflow (направление 5) ─────────────────────
   The DS collapses the 2-col hero (≤1000px) and the stack to full width
   (≤1100px). These rules polish the reflow: badge ribbon, heading,
   CTA reach, the proof row and the stack's internal columns on phones. */
@media (max-width: 600px) {
  .hero { padding: var(--s-10) 0 var(--s-12); }
  .hero-inner { gap: var(--s-10); }
  /* Proof row reads as a clean stacked list, not a cramped wrap. */
  .hero-proof { flex-direction: column; gap: var(--s-3); align-items: flex-start; }
  .hero-proof span { display: flex; gap: 8px; align-items: baseline; }
  /* Stack centred and capped so it doesn't stretch edge-to-edge. */
  .tap-stack { margin-left: auto; margin-right: auto; max-width: 420px; }
  /* Phone section rhythm: enough air without the desktop clamp maximum. */
  .section { padding: var(--s-12) 0; }
  .section:not(.section--dark) + .section:not(.section--dark) { padding-top: var(--s-10); }
}
@media (max-width: 480px) {
  /* Full-width stacked CTAs for thumb reach (btn--lg keeps ≥44px height). */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  /* Long mono badges: slightly tighter so they wrap cleanly, not cramped. */
  .hero-badge { font-size: 10px; padding: 5px 10px; line-height: 1.3; }
  /* Stack layer: narrow the role column so the product name keeps its line. */
  .tap-stack__layer { grid-template-columns: 52px 1fr auto; gap: var(--s-3); padding: var(--s-4); }
  .tap-stack__name { font-size: 15px; }
  .tap-stack__sub { font-size: 10px; }
  /* AI badge can crowd the name on small layers — let it sit inline-safe. */
  .tap-stack__ai-badge { top: 6px; right: 6px; }
}

/* ── Industries: enliven flat tiles into cards (направление 3) ───────
   Icon + status chip on top, name, and an APS-specifics note + link that
   reveal on hover. Space for the note is reserved so the grid never
   reflows; on touch devices (no hover) the note shows by default. */
.industries-grid { gap: var(--s-4); }
.industry-tile {
  min-height: 190px; gap: 10px;
  transition: border-color .2s var(--ease), transform .2s var(--ease),
    background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.industry-tile:hover { box-shadow: var(--sh-md); }
.industry-tile__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; width: 100%;
}
.industry-tile__chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-500); white-space: nowrap;
  padding: 3px 9px; border: 1px solid var(--ink-100); border-radius: var(--r-full);
  background: #fff;
}
.industry-tile__chip--case {
  color: var(--blue-700); border-color: var(--blue-100); background: var(--blue-50);
}
.industry-tile__note {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-500); margin-top: 2px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.industry-tile__link {
  margin-top: auto; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; color: var(--blue-600);
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.industry-tile__link .arrow { transition: transform .18s var(--ease); }
@media (hover: hover) {
  .industry-tile:hover .industry-tile__note,
  .industry-tile:hover .industry-tile__link { opacity: 1; transform: none; }
  .industry-tile:hover .industry-tile__link .arrow { transform: translateX(3px); }
}
@media (hover: none) {
  .industry-tile__note, .industry-tile__link { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .industry-tile__note, .industry-tile__link { transition: none; opacity: 1; transform: none; }
}