/* Основа: ресет, типография, контейнер, бутони, форми, хедър, hero, секции, футър, reveal.
   Само var(--...) от tokens.css. Без цветове, шрифтове и размери тук. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: var(--fs-1); line-height: var(--lh-text); font-weight: var(--w-text); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: var(--lh-display); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

:root { --pad-l: max(var(--gutter), env(safe-area-inset-left)); --pad-r: max(var(--gutter), env(safe-area-inset-right)); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); }
.section { padding-top: var(--section-y); } /* само отгоре, за да не се удвоява (K3) */
.section:last-child { padding-bottom: var(--section-y); }
.muted { color: var(--text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Бутон: 48px, глагол в текста, натискане с пружина */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3rem; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-btn); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn:active { transform: scale(0.97); }
.btn--quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
@media (hover: hover) { .btn:hover { opacity: 0.9; } }

/* Хедър: плаваща лента, ЕДИН бутон вдясно. Странични отстъпи и при изреза на iPhone в landscape (12.40).
   До 4 връзки се виждат и на телефон, на втори ред, без хамбургер (10.58, решение 5.11.2026). Над 4: меню с popover (12.46, starter/README.md). */
.bar { position: sticky; top: var(--space-3); z-index: 10; margin: var(--space-3) auto 0; max-width: var(--maxw); width: calc(100% - var(--pad-l) - var(--pad-r)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-bar); }
.bar__name { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); text-decoration: none; min-height: 2.75rem; min-width: 2.75rem; display: inline-flex; align-items: center; }
.bar__nav { order: 3; flex-basis: 100%; display: flex; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.bar__nav a { text-decoration: none; color: var(--text-muted); min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }
@media (min-width: 768px) { .bar { flex-wrap: nowrap; } .bar__nav { order: 0; flex-basis: auto; margin-inline-start: auto; gap: var(--space-6); overflow: visible; } }

/* Hero: един предмет, един H1, един бутон */
.hero { min-height: 78svh; display: grid; align-content: center; justify-items: start; gap: var(--space-6); padding-block: var(--space-12); }
.hero p { max-width: 34rem; color: var(--text-muted); font-size: var(--fs-2); line-height: 1.35; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__visual { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-img); background: var(--surface-2); }

/* Форма: етикет над полето, 16px */
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--fs-0); color: var(--text-muted); }
.field input, .field textarea, .field select { font: inherit; font-size: 1rem; min-height: 3rem; padding: 0 var(--space-4); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-btn); }
.field textarea { min-height: 7rem; padding-block: var(--space-3); }

/* Футър */
.foot { border-top: 1px solid var(--line); padding-block: var(--space-12); display: grid; gap: var(--space-6); }
.foot__phone { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--track-display); font-size: var(--fs-3); text-decoration: none; }
.foot small { color: var(--text-muted); }

/* Движение: пише се САМО в no-preference (12.4, WCAG C39). Без поддръжка на заявката, при reduce и без JS всичко е видимо и статично.
   Резерв без view(): main.js слага .js-rv на <html> и .is-in на елементите (слуша промяната на настройката, 12.5). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; } /* K1 в rules/kachestvo.md; при reduce остава auto */
  .btn { transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
  .js-rv .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .js-rv .reveal.is-in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }