/* ==========================================================================
   Димитър Асенов — Premium Training & Nutrition
   1.  Design tokens
   2.  Base / reset
   3.  Typography
   4.  Layout helpers
   5.  Buttons
   6.  Header + navigation
   7.  Hero
   8.  Cards / features
   9.  Pricing
   10. Split & story sections
   11. Video facade
   12. Partners
   13. CTA band
   14. Forms
   15. Footer
   16. Utilities & motion
   17. Responsive
   18. Cookie consent
   ========================================================================== */

/* FONTS:BEGIN — generated by _snapshot/self-host-fonts.py */
/* Self-hosted, license: SIL OFL 1.1. Only latin / latin-ext / cyrillic /
   cyrillic-ext subsets are shipped; each browser downloads only the
   subset its text needs. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-400-cyrillic-ext.woff2")
    format("woff2");
  unicode-range:
    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-400-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-600-cyrillic-ext.woff2")
    format("woff2");
  unicode-range:
    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-600-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-700-cyrillic-ext.woff2")
    format("woff2");
  unicode-range:
    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-700-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/manrope-normal-700-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/playfair-display-italic-500-cyrillic.woff2")
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/playfair-display-italic-500-latin-ext.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/playfair-display-italic-500-latin.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/playfair-display-normal-600-cyrillic.woff2")
    format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/playfair-display-normal-600-latin-ext.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/playfair-display-normal-600-latin.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* FONTS:END */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* Brand palette — high contrast dark canvas + lime accent */
  --c-bg: #0a0c0b;
  --c-bg-soft: #0f1413;
  --c-surface: #141a18;
  --c-surface-2: #1a2220;
  --c-line: rgba(242, 246, 244, 0.1);
  --c-line-strong: rgba(242, 246, 244, 0.2);
  --c-text: #f2f6f4;
  --c-text-muted: #a7b4ae;
  --c-text-dim: #80908a;
  --c-accent: #c6f24e;
  --c-accent-strong: #b5e62f;
  --c-accent-ink: #0a0c0b;
  --c-brand: #2fa37e;
  --c-brand-deep: #10302a;
  --c-focus: #c6f24e;
  --c-field-border: rgba(242, 246, 244, 0.28);

  /* Typography */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:
    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);
  --fs-h1: clamp(2.15rem, 1.3rem + 3.4vw, 3.5rem);
  --fs-h2: clamp(1.8rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.45vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.06;
  --lh-heading: 1.18;
  --lh-body: 1.75;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.38);
  --shadow-lime: 0 18px 45px rgba(198, 242, 78, 0.16);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 2. Base / reset -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  color-scheme: dark; /* native form controls & audio player match the dark UI */
}

/* `hidden` must always win over the component display rules (e.g. honeypot field) */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* 3. Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--c-text-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow::before {
  display: none;
}

.section-head p {
  color: var(--c-text-muted);
}

/* 4. Layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--soft {
  background: var(--c-bg-soft);
}

.section--surface {
  background: linear-gradient(180deg, var(--c-bg-soft), var(--c-bg));
}

.grid {
  display: grid;
  gap: clamp(1.25rem, 0.7rem + 1.8vw, 2rem);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--c-line-strong),
    transparent
  );
}

/* 5. Buttons ------------------------------------------------------------- */
.btn {
  --btn-py: 0.62rem;
  --btn-px: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px; /* compact, still touch friendly */
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: var(--shadow-lime);
}

.btn--primary:hover {
  background: var(--c-accent-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-line-strong);
}

.btn--ghost:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.btn--dark {
  background: var(--c-bg);
  color: var(--c-text);
  border-color: var(--c-line);
}

.btn--full {
  width: 100%;
}

.btn--sm {
  min-height: 40px;
  padding: 0.45rem 1.05rem;
  font-size: 0.8125rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 0.02em;
}

.link-arrow svg {
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* 6. Header + navigation ------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-radius: var(--r-sm);
  font-weight: 700;
}

.skip-link:focus {
  top: var(--sp-4);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(10, 12, 11, 0.72);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(10, 12, 11, 0.94);
  border-bottom-color: var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

/* Real logo from the live site (orange ДА monogram, transparent WebP) */
.brand__logo {
  display: block;
  width: auto;
  height: 44px;
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 7px; /* air between the name and the tagline */
  line-height: 1.1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand__tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1.6vw, 2.25rem);
}

.nav__link {
  position: relative;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-text-muted);
  transition: color 0.2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--c-text);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header__cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: 14px;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: background-color 0.2s var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-6) var(--gutter) var(--sp-7);
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-line);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    visibility 0.28s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.mobile-menu__link {
  display: block;
  padding-block: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--c-text);
}

.mobile-menu__link[aria-current="page"] {
  color: var(--c-accent);
}

.mobile-menu__foot {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.mobile-menu__meta {
  font-size: var(--fs-small);
  color: var(--c-text-dim);
}

.mobile-menu__meta a {
  color: var(--c-text);
}

/* 7. Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 6rem));
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle,
    rgba(47, 163, 126, 0.28),
    transparent 62%
  );
  filter: blur(10px);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -220px;
  left: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(198, 242, 78, 0.12),
    transparent 65%
  );
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.hero__title {
  margin-bottom: var(--sp-5);
}

.hero__title em {
  font-style: italic;
  color: var(--c-accent);
}

.hero__text {
  max-width: 46ch;
  margin-bottom: var(--sp-6);
  color: var(--c-text-muted);
  font-size: var(--fs-lead);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 0.6rem + 2vw, 2.75rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

.hero__stats > div {
  display: grid;
  gap: 2px;
}

.hero__stats dt,
.hero__stats dd {
  margin: 0;
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-text);
}

.stat__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.hero__media {
  position: relative;
}

.hero__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--shadow-md);
  background: var(--c-surface);
}

.hero__frame img {
  width: 100%;
  height: clamp(420px, 46vw, 620px);
  object-fit: cover;
  object-position: 50% 22%;
}

.hero__badge {
  position: absolute;
  left: -12px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  background: rgba(20, 26, 24, 0.92);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  max-width: 260px;
}

.hero__badge-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(198, 242, 78, 0.14);
  color: var(--c-accent);
}

.hero__badge-text {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--c-text-muted);
}

.hero__badge-text strong {
  display: block;
  font-size: 0.875rem;
  color: var(--c-text);
}

/* Page hero (inner pages) */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 5vw, 5rem));
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--c-line);
  background: radial-gradient(
    120% 140% at 85% 0%,
    rgba(47, 163, 126, 0.16),
    transparent 58%
  );
}

.page-hero__inner {
  max-width: 780px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.breadcrumb a:hover {
  color: var(--c-accent);
}

/* 8. Cards / features ---------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.15rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-md);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-2);
  border-radius: 14px;
  background: rgba(198, 242, 78, 0.12);
  color: var(--c-accent);
}

.card__title {
  margin: 0;
  font-size: var(--fs-h3);
}

.card__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
}

/* 9. Pricing ------------------------------------------------------------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition:
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.price-card--featured {
  background: linear-gradient(
    180deg,
    rgba(198, 242, 78, 0.09),
    var(--c-surface) 46%
  );
  border-color: rgba(198, 242, 78, 0.45);
}

.price-card__flag {
  position: absolute;
  top: -13px;
  left: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  padding: 0.3rem 0.85rem;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-card__name {
  margin: 0;
  font-size: var(--fs-h3);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
}

.price-card__price span {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text-dim);
  letter-spacing: 0;
}

.price-card__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

.price-card__list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.price-card__list li {
  position: relative;
  padding-left: 1.75rem;
}

.price-card__list li svg {
  position: absolute;
  left: 0;
  top: 0.25em;
  color: var(--c-accent);
}

.price-card .btn {
  margin-top: auto;
}

.price-note {
  margin-top: var(--sp-6);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

.price-note strong {
  color: var(--c-text);
}

/* 10. Split & story ------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
}

/* Lines the portrait up with the first line of the text */
.split--top {
  align-items: start;
}

.split--reverse .split__media {
  order: 2;
}

.split__media {
  position: relative;
}

.split__media img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.split__media--portrait img {
  aspect-ratio: 4 / 5;
  object-position: 50% 25%;
}

.split__media--square img {
  aspect-ratio: 1 / 1;
}

.split__body > :last-child {
  margin-bottom: 0;
}

.story-text p {
  color: var(--c-text-muted);
}

.story-text strong {
  color: var(--c-text);
  font-weight: 700;
}

.quote {
  margin: 0;
  padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  background: linear-gradient(
    160deg,
    rgba(47, 163, 126, 0.14),
    var(--c-surface)
  );
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-lg);
}

.quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-text);
}

.quote figcaption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.note {
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-brand);
  border-radius: var(--r-md);
}

.note h2,
.note h3 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h3);
}

/* Only the "Важно съобщение!" heading is red, the body copy stays neutral */
.note__title--alert {
  color: #ff5245;
}

.note p {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

/* 11. Video facade ------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}

.video-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-md);
}

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s var(--ease);
}

.video-facade:hover img {
  transform: scale(1.04);
  opacity: 0.82;
}

.video-facade__play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

.video-facade:hover .video-facade__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--c-accent-strong);
}

.video-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
}

.video-card__kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.video-card__title {
  margin: 0;
  font-size: var(--fs-h4);
  font-family: var(--font-display);
}

.video-card__text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: 1.65;
}

.video-card iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Audio feature */
.audio-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.audio-card img {
  width: 100%;
  border-radius: var(--r-md);
}

.audio-card h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h4);
}

.audio-card p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.audio-card audio {
  width: 100%;
  height: 48px;
  padding: 4px;
  background: #0d1211;
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-pill);
}

/* 12. Partners ----------------------------------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.logo-chip {
  display: grid;
  place-items: center;
  min-height: 116px;
  padding: 1.1rem;
  background: #f4f6f4;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.logo-chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.logo-chip img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

/* Партньорските лога са линкове към сайтовете им: целият чип е кликаема площ */
.logo-chip__link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.logo-chip__link:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* 13. CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: linear-gradient(135deg, var(--c-brand-deep), #07100e 62%);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.cta-band::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 460px;
  height: 460px;
  background: radial-gradient(
    circle,
    rgba(198, 242, 78, 0.18),
    transparent 62%
  );
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  flex-wrap: wrap;
}

.cta-band h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
}

.cta-band p {
  margin: 0;
  max-width: 52ch;
  color: var(--c-text-muted);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* 14. Forms -------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.field {
  display: grid;
  gap: 0.4rem;
  /* A grid item defaults to min-width:auto: long, unbreakable content would push
     the column wider than the viewport on a phone. */
  min-width: 0;
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.field__control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0.85rem 1.05rem;
  background: #0d1211;
  border: 1px solid var(--c-field-border);
  /* По-меко заобляне: 12px изглеждаше "ръбато" при падащия списък */
  border-radius: 20px;
  color: var(--c-text);
  font-size: var(--fs-body);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

/* Native dropdown list must stay readable on the dark UI */
select.field__control option {
  background: #0d1211;
  color: var(--c-text);
}

/* A native <select> reports its widest <option> as intrinsic width, so inside a
   grid it can push past the viewport on narrow phones. These rules keep the
   control inside its column and replace the native arrow with an inline chevron. */
select.field__control {
  display: block;
  appearance: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23a7b4ae' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Service cards: phone-only twin of the service <select> ------------------
   A native dropdown is drawn by the OS: it sizes itself to the widest option,
   can escape the card and the viewport, and can never be restyled. Below 767px
   the select is hidden and the same options are shown as cards - no popup, no
   overflow, 60px touch targets and native radio semantics.
   Without JavaScript (no .js class) the cards stay hidden and the select is
   used, so the form works in every case. */
.choice-list {
  display: none;
}

.choice {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

/* Visually hidden, but still focusable and exposed to assistive technology */
.choice__input {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.choice__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.7rem 1rem;
  background-color: #0d1211;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0) 60%
  );
  border: 1px solid var(--c-field-border);
  border-radius: 20px; /* същото заобляне като на полетата */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.choice__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(242, 246, 244, 0.34);
  border-radius: 50%;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.choice__text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.choice__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.choice__note {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--c-text-dim);
  overflow-wrap: anywhere;
}

.choice__price {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.choice:hover .choice__body {
  border-color: rgba(242, 246, 244, 0.42);
}

/* Selected state: accent border plus a soft glow instead of a hard outline */
.choice__input:checked + .choice__body {
  border-color: var(--c-accent);
  background-color: rgba(198, 242, 78, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(198, 242, 78, 0.32),
    0 10px 24px -18px rgba(198, 242, 78, 0.75);
}

.choice__input:checked + .choice__body .choice__mark {
  border-color: var(--c-accent);
  box-shadow:
    inset 0 0 0 3px #0d1211,
    inset 0 0 0 9px var(--c-accent);
}

.choice__input:checked + .choice__body .choice__price {
  color: var(--c-accent);
}

.choice__input:focus-visible + .choice__body {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.field.has-error .choice__body {
  border-color: #ff9d8a;
}

/* The active card must stay readable even if the page is scrolled by keyboard */
.choice__input:active + .choice__body {
  border-color: var(--c-accent);
}

/* Keyboard focus must always be clearly visible on the field itself */
.field__control:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.field__control::placeholder {
  color: #86968f; /* was #6b7a75 — 4.20:1 on the field background, below WCAG AA 4.5 */
}

.field__control:hover {
  border-color: rgba(242, 246, 244, 0.42);
}

.field__control:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(198, 242, 78, 0.18);
}

textarea.field__control {
  min-height: 148px;
  resize: vertical;
}

.field__error {
  display: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #ff9d8a;
}

.field.has-error .field__control {
  border-color: #ff9d8a;
}

.field.has-error .field__error {
  display: block;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.05rem;
  background: #0d1211;
  border: 1px solid var(--c-field-border);
  border-radius: 12px;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: 1.6;
  cursor: pointer;
}

.checkbox input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--c-accent);
}

.form__note {
  /* Въздух между бутона "Изпрати запитване" и текста под него */
  margin: 0.9rem 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  overflow-wrap: anywhere;
}

.form__status,
.field__error,
.checkbox span {
  overflow-wrap: anywhere;
}

/* Nothing inside the contact grid may widen the page */
.contact-grid > *,
.info-card {
  min-width: 0;
  max-width: 100%;
}

.form__status {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
}

.form__status.is-visible {
  display: block;
}

.form__status--ok {
  background: rgba(47, 163, 126, 0.16);
  border: 1px solid rgba(47, 163, 126, 0.5);
  color: #bff0dc;
}

/* Error state of the form status line (rate limit, server failure, invalid fields) */
.form__status--error {
  background: rgba(255, 157, 138, 0.14);
  border: 1px solid rgba(255, 157, 138, 0.5);
  color: #ffc9bd;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.info-card {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.info-card__row {
  display: flex;
  gap: var(--sp-4);
}

.info-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(198, 242, 78, 0.12);
  color: var(--c-accent);
}

.info-card__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.info-card__value {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.info-card__value:hover {
  color: var(--c-accent);
}

/* 15. Footer ------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) var(--sp-6);
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-line);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr)) minmax(
      0,
      1fr
    );
  gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.footer__about p {
  margin-top: var(--sp-4);
  max-width: 34ch;
  font-size: var(--fs-small);
  color: var(--c-text-dim);
}

.footer__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
}

.footer__list {
  display: grid;
  gap: 0.65rem;
  font-size: var(--fs-small);
  color: var(--c-text-dim);
}

.footer__list a:hover {
  color: var(--c-accent);
}

.footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--sp-4);
}

.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  color: var(--c-text-muted);
  transition:
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    background-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.social-link:hover {
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
}

.footer__bottom a {
  color: var(--c-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 3px;
}

.footer__bottom a:hover {
  color: var(--c-accent);
}

/* 16. Utilities & motion ------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Only hide content when JavaScript is available to reveal it again */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.text-center {
  text-align: center;
}

/* 16b. FAQ (native <details>, works without JavaScript) ------------------ */
.faq {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.faq__item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0 clamp(1rem, 0.9rem + 0.6vw, 1.5rem);
  transition: border-color 0.25s var(--ease);
}

.faq__item[open] {
  border-color: var(--c-line-strong);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding-block: 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}

/* Hide the native marker in every engine, keep our own rotation cue */
.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.faq__item p {
  margin: 0;
  padding-bottom: 1.1rem;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

/* 17. Responsive --------------------------------------------------------- */

/* Large desktop */
@media (min-width: 1441px) {
  :root {
    --container: 1280px;
  }
}

@media (min-width: 1800px) {
  :root {
    --container: 1340px;
  }
}

/* Small desktop / large tablet */
@media (max-width: 1100px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet (≈980px) */
@media (max-width: 980px) {
  :root {
    --header-h: 70px;
  }

  .nav,
  .site-header__cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .mobile-menu {
    display: flex;
  }

  .hero__grid,
  .split,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__grid {
    gap: clamp(2rem, 1rem + 3vw, 3rem);
  }

  .split--reverse .split__media {
    order: 0;
  }

  .hero__media {
    max-width: 520px;
  }

  .hero__frame img {
    height: clamp(380px, 62vw, 520px);
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile (≈767px) */
@media (max-width: 767px) {
  :root {
    --lh-body: 1.7;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 16px prevents iOS Safari from zooming into a focused control (which looks
     like a broken, overflowing layout on a phone). */
  .field__control,
  textarea.field__control {
    font-size: 16px;
  }

  /* Guard: no form child may exceed the viewport width. `min-width: 0` already
     prevents intrinsic-width overflow; no clipping here on purpose, so focus
     rings are never cut off. */
  .form,
  .form__row,
  .field,
  .choice-list {
    max-width: 100%;
    min-width: 0;
  }

  /* Service cards replace the native dropdown on phones. They are shown with
     plain CSS (no JS dependency), so the tappable cards appear immediately. */
  .choice-list {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
  }

  .service-field > select.field__control {
    display: none;
  }

  /* Roomier tap targets for the service cards on phones */
  .choice__body {
    min-height: 60px;
  }

  .choice__note {
    font-size: 0.8125rem;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__stats {
    gap: 1.25rem 1.75rem;
  }

  .hero__badge {
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: none;
  }

  .audio-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .audio-card img {
    max-width: 220px;
  }

  .cta-band__actions .btn {
    width: 100%;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-head--center {
    text-align: left;
  }

  .section-head--center .eyebrow {
    justify-content: flex-start;
  }
}

/* Small phones (375px / 390px / 430px) */
@media (max-width: 430px) {
  :root {
    --fs-display: 2.25rem;
  }

  /* Keep the tagline visible on small phones, just tighter */
  .brand {
    gap: 0.6rem;
  }

  .brand__logo {
    height: 36px;
  }

  .brand__name {
    font-size: 0.9375rem;
  }

  .brand__tag {
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
  }

  .hero__frame img {
    height: 340px;
  }

  /* Give the form more horizontal room on 375–430 px screens */
  .form {
    padding-inline: 1rem;
  }

  .logo-chip {
    min-height: 92px;
  }

  .logo-chip img {
    max-height: 54px;
  }
}

/* 18. Cookie consent ----------------------------------------------------- */
/* Own implementation, no third-party request: no CookieYes, no iframe, no
   external CSS/JS. Mobile = bottom sheet, desktop = compact card bottom-left.
   Analytics is injected only after an explicit opt-in (see js/analytics.js),
   so nothing is loaded and no cookie is written before a choice is made. */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  display: flex;
  justify-content: center;
  padding: 0 var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  pointer-events: none;
}

.consent[hidden] {
  display: none;
}

.consent__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  padding: var(--sp-4) 1.05rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-md);
}

.consent__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
}

.consent__text {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-4);
}

.consent__actions .btn {
  flex: 1 1 auto;
}

/* A consent choice must never be a small target: every control in the banner
   reaches the 44 px touch height, including the text action. */
.consent .btn,
.consent__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* "Настройки" is a text action, not a third button, so it does not compete
   with the two real choices. */
.consent__more {
  flex: 0 0 auto;
  padding: 0.65rem 0.4rem;
  border: 0;
  background: none;
  color: var(--c-accent);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.consent__more:hover {
  color: var(--c-accent-strong);
}

.consent__details {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}

.consent__details[hidden] {
  display: none;
}

.consent__cats {
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.consent__cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.6rem 0;
}

.consent__cat + .consent__cat {
  border-top: 1px solid var(--c-line);
}

.consent__cat-name {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
}

.consent__cat-note {
  display: block;
  margin-top: 0.15rem;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.consent__badge {
  flex: 0 0 auto;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-text-dim);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Accessible switch: the real checkbox stays focusable, only its look changes. */
.consent__switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  margin-top: 2px;
}

.consent__switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.consent__switch span {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--c-line-strong);
  transition: background-color 0.25s var(--ease);
  pointer-events: none;
}

.consent__switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-text);
  transition: transform 0.25s var(--ease);
}

.consent__switch input:checked + span {
  background: var(--c-accent);
}

.consent__switch input:checked + span::after {
  transform: translateX(20px);
  background: var(--c-accent-ink);
}

.consent__switch input:focus-visible + span {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

.consent__policy {
  margin: 0.75rem 0 0;
  color: var(--c-text-dim);
  font-size: var(--fs-xs);
}

.consent__policy a {
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__policy a:hover {
  color: var(--c-accent);
}

/* Footer trigger that reopens the banner after a decision. Padding grows the
   tap target to 44 px; a negative margin keeps the line visually in place. */
.footer__consent {
  margin: -0.7rem 0;
  padding: 0.7rem 0;
  border: 0;
  background: none;
  color: var(--c-text-muted);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.footer__consent:hover {
  color: var(--c-accent);
}

/* Long-form legal copy (cookie policy). Deliberately small: the page reuses the
   existing section/section-head rhythm and only needs readable text styles. */
.legal {
  max-width: 68ch;
  color: var(--c-text-muted);
}

.legal > * + * {
  margin-top: var(--sp-4);
}

.legal h3 {
  margin: 0;
  font-size: var(--fs-h4);
  color: var(--c-text);
}

.legal ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.15rem;
}

.legal li::marker {
  color: var(--c-accent);
}

.legal code {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: 0.9em;
}

.legal a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .consent {
    inset: auto auto var(--sp-5) var(--sp-5);
    justify-content: flex-start;
    padding: 0;
  }

  .consent__panel {
    max-width: 400px;
    padding: 1.15rem 1.2rem;
  }

  .consent__actions .btn {
    flex: 0 1 auto;
  }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Print */
@media print {
  .site-header,
  .mobile-menu,
  .cta-band__actions,
  .footer__social {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}