*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  color: var(--color-cream);
  background: var(--color-ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

body { overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section__head { margin-bottom: 2.5rem; max-width: 42rem; }
.section__head p { color: var(--color-muted); margin-top: 1.1rem; }

.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--color-gold); color: #000; padding: 0.6rem 1rem; border-radius: var(--radius-btn); z-index: 100; }
.skip-link:focus { top: 1rem; }

/* Red brush-stroke label, the signature element from the flyers */
.brush { position: relative; display: inline-block; isolation: isolate; padding: 0.3em 1.5em 0.3em 0.8em; color: var(--color-white); }
.brush::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-red);
  clip-path: polygon(0 10%, 3% 0, 38% 7%, 70% 0, 95% 6%, 100% 32%, 97% 56%, 100% 82%, 94% 100%, 60% 93%, 28% 100%, 2% 93%, 0 70%, 2% 40%);
  transform: skewX(-8deg);
}
h2.brush, h3.brush { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3.brush { font-size: clamp(1.4rem, 3vw, 1.9rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Мобилна адаптивност */
@media (max-width: 560px) {
  .wrap { padding-inline: 1rem; }
  .section__head { margin-bottom: 1.8rem; }
  .btn { white-space: normal; text-align: center; }
  .hero__actions .btn { width: 100%; }
  .hero__visual img { width: min(380px, 92%); margin-inline: auto; }
  .hero__sticker { white-space: normal; width: max-content; max-width: 92%; text-align: center; }
  .contact__links a { word-break: break-word; font-size: 1rem; }
  .footer__in { flex-direction: column; text-align: center; align-items: center; }
  .item label { gap: 0.7rem; padding: 0.85rem 0.3rem; }
  .item__price { font-size: 1.15rem; padding: 0.3rem 0.7rem; }
  .techpark strong { font-size: 1.35rem; }
  .pack__head { flex-direction: column; align-items: flex-start; gap: 1rem; padding-bottom: 1.4rem; }
  .rating { width: 100%; }
  .lightbox button { font-size: 2rem; padding: 0.6rem 0.8rem; }
}
@media (max-width: 380px) {
  .calc-bar__total { font-size: 1.8rem; }
  .calc-bar__actions .btn { padding: 0.6rem 0.5rem; font-size: 0.9rem; }
  .trust__item { font-size: 0.72rem; gap: 0.5rem; }
}