/* Soltan Khadzhiev — a working room, not a dashboard. */
:root {
  --bg: #0B0B0C;
  --bg-2: #131316;
  --bg-3: #1A1A1E;
  --line: #26262B;
  --text: #F2F2EF;
  --text-dim: #9C9C97;
  --red: #E5484D;
  --red-dim: rgba(229,72,77,.14);
  --green: #30A46C;
  --green-dim: rgba(48,164,108,.14);
  --header-h: 69px;
  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
}
* { box-sizing: border-box; }
/* Место под полосу прокрутки занято всегда.
 *
 * Иначе на открытии отзыва происходит вот что: body на время получает
 * overflow: hidden, полоса прокрутки исчезает, область страницы становится
 * шире ровно на её толщину, и все карточки пересобираются в новую ширину.
 * На глаз это и есть то самое дёрганье на пиксель, а на закрытии всё
 * возвращается обратно.
 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
img { max-width: 100%; }
a { color: inherit; }
::selection { color: var(--bg); background: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 900 clamp(4rem, 7vw, 8rem)/.94 var(--font-display); letter-spacing: -.055em; }
h2 { margin-bottom: 22px; font: 800 clamp(2.3rem, 4.2vw, 3.9rem)/1.06 var(--font-body); letter-spacing: -.04em; }
h3 { margin-bottom: 0; }
.label { display: block; margin-bottom: 16px; color: var(--text-dim); font: 800 13px/1.35 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.section { padding-block: 112px; }
.section-head { margin-bottom: 52px; }
.section-head h2 { max-width: 1000px; }

/* Call actions: a matte graphite plate lit from inside, a 1px green perimeter
   and a warm-white label. What follows is the whole resting look; the dots and
   the travelling highlight are added per button in the BUTTON SYSTEM block at
   the end of the file. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 0;
  background-color: #0B1210;
  background-image: linear-gradient(180deg,
    rgba(242,242,239,.30) 0px,
    rgba(242,242,239,.08) 1.2px,
    rgba(48,164,108,.36) 1.2px,
    rgba(48,164,108,.30) 46%,
    rgba(48,164,108,.50) 100%);
  color: var(--text);
  font: 700 16px/1.25 var(--font-body);
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(48,164,108,.07),
    0 1px 0 0 rgba(0,0,0,.55),
    0 2px 3px -1px rgba(0,0,0,.7),
    0 12px 22px -15px rgba(0,0,0,.95),
    0 0 16px -8px rgba(48,164,108,.22);
  transition: transform .12s ease, box-shadow .18s ease;
}
/* The plate itself, one pixel inside the perimeter. Once script.js has added
   the decorated .hbtn__face this is simply covered by it, so the plate looks
   right even with scripting off. */
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  background-color: #101613;
  background-image:
    radial-gradient(ellipse 58% 104% at 50% 72%, rgba(48,164,108,.40) 0%, rgba(48,164,108,.25) 34%, rgba(48,164,108,.08) 68%, rgba(48,164,108,0) 100%),
    radial-gradient(ellipse 80% 130% at 50% 100%, rgba(48,164,108,.14) 0%, rgba(48,164,108,.05) 52%, rgba(48,164,108,0) 92%),
    linear-gradient(180deg, rgba(242,242,239,.065) 0px, rgba(242,242,239,0) 3px);
  pointer-events: none;
}
.btn--cta { min-height: 64px; padding: 16px 26px; font-size: 17px; }
.btn--header { min-height: 40px; padding: 0 18px; font-size: 14px; }
/* The header CTA writes to MAX: the messenger's own vector mark, drawn white. */
.btn--header .btn__max { flex: 0 0 auto; width: 17px; height: 17px; color: #fff; }
.btn--full { width: 100%; }
/* A bare icon is a direct child; the decorative svgs live inside spans. */
.btn > svg { flex: 0 0 auto; width: 20px; height: 20px; color: #3CB37D; }
.btn--cta > svg { width: 24px; height: 24px; }
.btn__label { white-space: nowrap; }
.btn__verb { font-size: 1em; font-weight: 700; letter-spacing: inherit; }
.btn__label strong { font-size: 1em; font-weight: 700; letter-spacing: inherit; }
.cta-row { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: center; }
.cta-note { color: var(--text-dim); font: 500 15px/1.4 var(--font-body); text-decoration: none; }
.cta-note:hover { color: var(--text); text-decoration: underline; }

/* Header: a quiet, fixed technical strip. */
.site-header { position: fixed; z-index: 50; inset: 0 0 auto; background: rgba(11,11,12,.85); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header-inner { display: flex; min-height: 68px; align-items: center; gap: 30px; }
.logo { font: 800 17px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { position: relative; padding-block: 25px; color: var(--text-dim); font: 700 14px/1.2 var(--font-body); text-decoration: none; }
.nav a::after { content: ""; position: absolute; inset: auto 0 14px; height: 1px; background: var(--text); opacity: 0; transition: opacity .2s ease; }
.nav a:hover, .nav a.is-active { color: var(--text); }
.nav a:hover::after, .nav a.is-active::after { opacity: 1; }
.burger { display: none; width: 44px; height: 44px; margin-left: auto; padding: 10px; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 2px; background: none; cursor: pointer; }
.burger span { display: block; height: 2px; width: 100%; background: var(--text); transition: transform .25s ease, opacity .25s ease; }
body.nav-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav { position: fixed; z-index: 45; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 38px; padding: calc(var(--header-h) + 24px) 28px 40px; background: rgba(11,11,12,.98); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
body.nav-open .mobile-nav { visibility: visible; opacity: 1; transition: opacity .25s ease, visibility 0s; }
.mobile-nav__list { display: flex; flex-direction: column; gap: 24px; }
.mobile-nav__list a { color: var(--text); font: 800 32px/1.15 var(--font-body); letter-spacing: -.03em; text-decoration: none; }

/* Cover / thesis. The gradient is confined to the image's seam. */
/* The seam hairline is painted on the hero and travels with the plate's edge. */
.hero { position: relative; overflow: clip; display: grid; min-height: 100svh; grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr); background-image: linear-gradient(var(--line), var(--line)); background-repeat: no-repeat; background-size: 1px 100%; background-position: calc(100% + 1px) 0; animation: heroSeam 1.15s cubic-bezier(.45,0,.25,1) both; }
.hero__media { position: relative; min-height: 780px; overflow: hidden; background: var(--bg); }
.hero__media::after { content: ""; position: absolute; z-index: 1; inset: 0 0 0 78%; background: linear-gradient(90deg, transparent, var(--bg)); }
.hero__media img { position: absolute; left: 0; top: calc(var(--header-h) - 30px); width: 100%; height: calc(100% - var(--header-h) + 30px); object-fit: cover; object-position: center 20%; }
/* Opening plate: one seamless field across both columns, revealed left to right.
   A copy of the glows rides on top of it and spans the whole hero, so the light
   has no hard edge at the column boundary — only the 1px seam line moves. */
.hero::before { content: ""; position: absolute; z-index: 3; inset: 0; background: var(--bg); pointer-events: none; clip-path: inset(0 0 0 100%); animation: heroPlate 1.15s cubic-bezier(.45,0,.25,1) both; }
.hero::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; clip-path: inset(0 0 0 100%); background: radial-gradient(ellipse 45.32% 50% at 71.16% 35%, rgba(242, 242, 239, 0.09) 0%, rgba(242, 242, 239, 0.045) 34%, rgba(242, 242, 239, 0) 76%), radial-gradient(ellipse 46.35% 42% at 79.4% 84%, rgba(48, 164, 108, 0.07) 0%, rgba(48, 164, 108, 0.032) 34%, rgba(48, 164, 108, 0) 80%); animation: heroPlate 1.15s cubic-bezier(.45,0,.25,1) both; }
.hero__content { position: relative; isolation: isolate; container-type: inline-size; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 26px; border-left: 1px solid var(--line); padding: calc(var(--header-h) + 46px) clamp(30px, 4vw, 76px) 60px clamp(30px, 4vw, 76px); }
.hero__content::before,
.hero__content::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hero__content::before { background: radial-gradient(ellipse 88% 50% at 44% 35%, rgba(242, 242, 239, 0.09) 0%, rgba(242, 242, 239, 0.045) 34%, rgba(242, 242, 239, 0) 76%); }
.hero__content::after { background: radial-gradient(ellipse 90% 42% at 60% 84%, rgba(48, 164, 108, 0.07) 0%, rgba(48, 164, 108, 0.032) 34%, rgba(48, 164, 108, 0) 80%); }
.hero h1 { font-size: clamp(3.2rem, 14.6cqi, 8rem); }
.hero__content > * { position: relative; z-index: 1; animation: coverType .7s ease both; }
.hero__content > :nth-child(1) { animation-delay: 1.2s; }
.hero__content > :nth-child(2) { animation-delay: 1.3s; }
.hero__content > :nth-child(3) { animation: none; }
.hero__content > :nth-child(4) { animation-delay: 1.6s; }
.hero__content > :nth-child(5) { animation-delay: 1.72s; }
.hero__content > :nth-child(6) { animation-delay: 1.9s; }
.eyebrow { max-width: 48ch; margin: 0; color: var(--text-dim); font: 800 12px/1.45 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.hero__name { margin: 0; color: var(--text); font: 800 clamp(19px, 1.6vw, 27px)/1.2 var(--font-body); letter-spacing: .01em; }
.hero__slogan { max-width: 32ch; margin: 0; color: rgba(242,242,239,.86); font: 300 clamp(19px, 1.6vw, 25px)/1.42 'Onest', var(--font-body); }
.hero__money { color: var(--green); font-weight: inherit; }
/* Headline types itself: hidden glyphs keep their box, so nothing reflows. */
html.type-ready .hero h1 .tchar { visibility: hidden; }
html.type-ready .hero h1 .tchar.is-on { visibility: visible; }
.type-caret { display: inline-block; width: .07em; height: .72em; margin-left: .01em; background: var(--text); opacity: .8; animation: caretBlink .56s step-end infinite; }
.hero .btn--cta { min-width: min(370px, 100%); }
.stats { container-type: inline-size; display: grid; grid-template-columns: 1.05fr 1.05fr 1fr; grid-template-rows: auto auto; column-gap: 20px; margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--line); }
.stat { display: grid; grid-template-rows: auto auto; grid-template-rows: subgrid; grid-row: span 2; min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat__value { display: block; color: var(--green); font: 800 clamp(1.9rem, 8cqi, 4.1rem)/1 var(--font-display); letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat:nth-child(2) .stat__value { font-size: clamp(1.55rem, 5.8cqi, 2.85rem); }
.stat:nth-child(3) .stat__value { font-size: clamp(1.55rem, 6cqi, 2.9rem); }
.stat__label { display: block; max-width: 18ch; margin-top: 10px; color: var(--text-dim); font: 500 13px/1.4 var(--font-body); }
@keyframes heroPlate { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes heroGlowStack { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes heroSeam { from { background-position: -1px 0; } to { background-position: calc(100% + 1px) 0; } }
@keyframes caretBlink { 0%, 49.9% { opacity: .8; } 50%, 100% { opacity: 0; } }
@keyframes coverType { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Approach: one positioning statement, readable at a glance. */
.approach { padding-block: clamp(88px, 9vw, 120px); border-bottom: 1px solid var(--line); }
.approach .label { margin-bottom: 28px; }
.approach__statement { max-width: 1080px; margin: 0 0 26px; font: 800 clamp(1.8rem, 3.1vw, 3.1rem)/1.22 var(--font-display); letter-spacing: -.035em; }
.approach__body { max-width: 62ch; margin: 0; color: rgba(242,242,239,.8); font-size: 19px; line-height: 1.58; }
#approach { position: relative; isolation: isolate; overflow: clip; }
#approach .approach__composition { position: relative; isolation: isolate; max-width: 1080px; padding-block: 112px 12px; margin-bottom: 26px; }
#approach .approach__light { position: absolute; z-index: 0; inset: -80px -168px -64px -96px; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(48,164,108,.20) 0%, rgba(48,164,108,.13) 32%, rgba(48,164,108,.055) 58%, rgba(48,164,108,0) 96%); }
#approach .approach__statement { position: relative; z-index: 1; }
#approach .approach__quote { position: absolute; z-index: 1; display: block; width: 128px; height: 104px; fill: var(--green); opacity: .36; pointer-events: none; }
#approach .approach__quote--open { top: 60px; left: -144px; }
#approach .approach__quote--close { right: -144px; bottom: 0; }
/* Approach motion: the statement types itself in, the note rises once beneath it.
   Armed at split time, so the finished copy never flashes before it animates. */
#approach.is-armed .approach__statement .type-char { opacity: 0; }
#approach.is-armed .approach__statement.is-typing .type-char { animation: approachType .07s ease-out forwards; animation-delay: calc(var(--i) * 20ms); }
#approach.is-armed .approach__statement.is-typed .type-char { opacity: 1; animation: none; }
@keyframes approachType { from { opacity: 0; } to { opacity: 1; } }
#approach.is-armed .approach__body { opacity: 0; }
#approach.is-armed .approach__body.is-rise { animation: approachRise .7s cubic-bezier(.22,.61,.36,1) both; }
@keyframes approachRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* The green light behind the statement just comes up: one smooth rise in opacity
   from a barely-there 10% to the glow the block always had. The quote marks float
   up into their resting pose a beat later, so the order reads light → marks → text. */
#approach.is-armed .approach__light { opacity: .1; }
#approach.is-armed .approach__light.is-lit { animation: approachLampOn 1.15s cubic-bezier(.25,.55,.3,1) both; }
@keyframes approachLampOn {
  from { opacity: .1; }
  to { opacity: 1; }
}
#approach.is-armed .approach__quote { opacity: 0; }
#approach.is-armed .approach__quote.is-rise { animation: approachQuoteRise .92s cubic-bezier(.22,.61,.36,1) both; }
#approach.is-armed .approach__quote--open.is-rise { animation-delay: .1s; --quote-rise: 26px; }
#approach.is-armed .approach__quote--close.is-rise { animation-delay: .3s; --quote-rise: 32px; }
@keyframes approachQuoteRise {
  0% { opacity: 0; transform: translateY(var(--quote-rise, 26px)) scale(.95); }
  52% { opacity: .36; }
  82% { transform: translateY(calc(var(--quote-rise, 26px) * -.1)) scale(1.002); }
  100% { opacity: .36; transform: none; }
}
@media (max-width: 1319px) {
  #approach .approach__composition { padding-bottom: 90px; }
  #approach .approach__quote--open { left: 0; }
  #approach .approach__quote--close { right: 0; }
}
@media (max-width: 768px) {
  #approach .approach__composition { padding-block: 58px 32px; }
  #approach .approach__quote { width: 52px; height: 42.25px; }
  #approach .approach__light { inset: -44px -16px; }
}

/* Experience: practitioner strip, two real cases, then three student voices. */
.about { padding-block: clamp(72px, 7vw, 104px) clamp(88px, 9vw, 116px); }
.about > .container > .label { margin-bottom: 26px; }
.about-profile {
  --profile-photo-height: clamp(360px, 24vw, 460px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 410px) minmax(0, 1fr);
  gap: clamp(44px, 3.6vw, 68px);
  align-items: start;
  width: 100%;
  max-width: 1328px;
  margin-inline: auto;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.about-profile__visual { position: relative; isolation: isolate; padding-left: 20px; }
.about-profile__plan {
  position: absolute;
  z-index: 0;
  top: -34px;
  left: -58px;
  width: calc(100% + 102px);
  height: calc(var(--profile-photo-height) + 94px);
  color: var(--text-dim);
  opacity: .075;
  pointer-events: none;
}
.about-profile__portrait {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--profile-photo-height) * 533 / 800));
  margin: 0;
  background: var(--bg);
}
.about-profile__portrait::before,
.about-profile__portrait::after {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--text-dim);
  border-style: solid;
  opacity: .6;
  content: "";
  pointer-events: none;
}
.about-profile__portrait::before { top: -10px; left: -10px; border-width: 1px 0 0 1px; }
.about-profile__portrait::after { right: -10px; bottom: -10px; border-width: 0 1px 1px 0; }
.about-profile__portrait img { display: block; width: 100%; height: auto; }
.about-profile__portrait figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 48px 22px 20px;
  background: linear-gradient(180deg, transparent, rgba(11,11,12,.9));
  color: var(--text);
  font: 800 16px/1.35 var(--font-body);
}
.about-profile__content { position: relative; z-index: 2; min-width: 0; }
.about-profile__label { display: block; margin-bottom: 12px; color: var(--text-dim); font: 800 13px/1.35 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.about-profile__heading { max-width: 840px; margin: 0 0 23px; font: 800 clamp(34px, 2.5vw, 50px)/1.08 var(--font-body); letter-spacing: -.035em; text-wrap: balance; }
.about-profile__route { position: relative; display: flex; flex-wrap: wrap; align-items: start; width: fit-content; max-width: 100%; margin: 0 0 20px; font: 700 17px/1.45 var(--font-body); }
.about-profile__route::before { position: absolute; top: 4px; right: 4px; left: 4px; height: 1px; background: var(--line); content: ""; }
.about-profile__stage { position: relative; padding-top: 17px; white-space: nowrap; }
.about-profile__stage::before { position: absolute; top: 1px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); content: ""; }
.about-profile__stage--result::before { background: var(--green); }
.about-profile__arrow { padding: 17px 22px 0; color: var(--text-dim); white-space: pre; }
.about-profile__bio { max-width: 62ch; margin: 0 0 22px; color: rgba(242,242,239,.88); font: 400 17px/1.5 var(--font-body); }
.about-profile__proofs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 32px; row-gap: 12px; list-style: none; margin: 0; padding: 0; }
.about-profile__proof { min-width: 0; margin: 0; font: 700 16px/1.4 var(--font-body); }
.about-profile__value { display: block; color: var(--green); font: 900 clamp(42px, 2.6vw, 54px)/1.05 var(--font-display); letter-spacing: -.05em; }
.about-profile__proof--deals { display: flex; align-items: center; gap: 16px; padding-bottom: 10px; }
.about-profile__proof--deals > :last-child { max-width: 10ch; }
.about-profile__proof--exclusive { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
.about-profile__proof--exclusive .about-profile__value { font-size: clamp(38px, 2.2vw, 46px); }
.about-profile__proof--support { position: relative; grid-column: 1 / -1; padding-left: 25px; }
.about-profile__proof--support::before { position: absolute; top: .65em; left: 0; width: 11px; height: 1px; background: var(--green); content: ""; }

/* Practitioner strip: one entry scene — blueprint, portrait, career route, then the numbers.
   Hidden states live behind .is-armed (set before first paint); the scene runs on .is-live. */
.about-profile.is-armed::before { opacity: 0; }
.about-profile.is-armed .about-profile__plan { opacity: 0; }
.about-profile.is-armed .about-profile__portrait img {
  -webkit-mask-image: linear-gradient(to top, #000 55%, #0000);
  mask-image: linear-gradient(to top, #000 55%, #0000);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scale(1.04);
}
.about-profile.is-armed .about-profile__portrait::before,
.about-profile.is-armed .about-profile__portrait::after { opacity: 0; }
.about-profile.is-armed .about-profile__portrait::before { transform: translate(-10px, -10px); }
.about-profile.is-armed .about-profile__portrait::after { transform: translate(10px, 10px); }
.about-profile.is-armed .about-profile__portrait figcaption { opacity: 0; transform: translateY(8px); }
.about-profile.is-armed .about-profile__label { opacity: 0; letter-spacing: .22em; }
.about-profile.is-armed .about-profile__heading { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(18px) scale(1.015); }
.about-profile.is-armed .about-profile__route::before { transform: scaleX(0); transform-origin: left center; }
.about-profile.is-armed .about-profile__stage::before { opacity: 0; transform: scale(.4); }
.about-profile.is-armed .about-profile__arrow { opacity: 0; transform: translateX(-6px); }
.about-profile.is-armed .about-profile__bio { opacity: 0; transform: translateY(8px); }
.about-profile.is-armed .about-profile__proof { opacity: 0; transform: translateY(8px); }
.about-profile.is-armed .about-profile__proof--support::before { transform: scaleX(0); transform-origin: left center; }
.about-profile.is-live::before { animation: profileGlow .9s ease-out both; }
.about-profile.is-live .about-profile__plan { animation: planSheet 1.4s ease-out .08s both; }
.about-profile.is-live .about-profile__plan path { animation: planDraw 1s cubic-bezier(.3,.55,.3,1) both; }
.about-profile.is-live .about-profile__plan path:nth-child(1) { animation-delay: .08s; }
.about-profile.is-live .about-profile__plan path:nth-child(2) { animation-delay: .26s; }
.about-profile.is-live .about-profile__plan path:nth-child(3) { animation-delay: .44s; }
.about-profile.is-live .about-profile__plan path:nth-child(4) { animation-delay: .62s; }
.about-profile.is-live .about-profile__portrait img { animation: portraitDevelop .9s cubic-bezier(.22,.61,.36,1) .26s both; }
.about-profile.is-live .about-profile__portrait::before { animation: bracketInTL .32s ease-out .62s both; }
.about-profile.is-live .about-profile__portrait::after { animation: bracketInBR .32s ease-out .62s both; }
.about-profile.is-live .about-profile__portrait figcaption { animation: profileRise .32s ease-out 1.12s both; }
.about-profile.is-live .about-profile__label { animation: labelTune .5s ease-out .9s both; }
.about-profile.is-live .about-profile__heading { animation: headingShare .64s cubic-bezier(.22,.61,.36,1) 1.02s both; }
.about-profile.is-live .about-profile__route::before { animation: routeLine .52s cubic-bezier(.3,.6,.3,1) 1.3s both; }
.about-profile.is-live .about-profile__arrow:nth-child(2) { animation: arrowIn .24s ease-out 1.42s both; }
.about-profile.is-live .about-profile__arrow:nth-child(4) { animation: arrowIn .24s ease-out 1.6s both; }
.about-profile.is-live .about-profile__stage:nth-child(1)::before { animation: dotOn .26s cubic-bezier(.3,.7,.3,1) 1.5s both; }
.about-profile.is-live .about-profile__stage:nth-child(3)::before { animation: dotOn .26s cubic-bezier(.3,.7,.3,1) 1.68s both; }
.about-profile.is-live .about-profile__stage:nth-child(5)::before { animation: dotOnResult .34s cubic-bezier(.3,.7,.3,1) 1.86s both; }
.about-profile.is-live .about-profile__bio { animation: profileRise .4s ease-out 1.95s both; }
.about-profile.is-live .about-profile__proof--deals { animation: profileRise .4s ease-out 2.05s both; }
.about-profile.is-live .about-profile__proof--exclusive { animation: profileRise .4s ease-out 2.15s both; }
.about-profile.is-live .about-profile__proof--deals .about-profile__value { animation: valuePunch .36s cubic-bezier(.3,.7,.3,1) 2.05s both; }
.about-profile.is-live .about-profile__proof--support:nth-child(3) { animation: profileRise .34s ease-out 2.35s both; }
.about-profile.is-live .about-profile__proof--support:nth-child(4) { animation: profileRise .34s ease-out 2.46s both; }
.about-profile.is-live .about-profile__proof--support:nth-child(5) { animation: profileRise .34s ease-out 2.57s both; }
.about-profile.is-live .about-profile__proof--support:nth-child(3)::before { animation: tickGrow .26s ease-out 2.35s both; }
.about-profile.is-live .about-profile__proof--support:nth-child(4)::before { animation: tickGrow .26s ease-out 2.46s both; }
.about-profile.is-live .about-profile__proof--support:nth-child(5)::before { animation: tickGrow .26s ease-out 2.57s both; }
@keyframes profileGlow { from { opacity: 0; } to { opacity: 1; } }
@keyframes planSheet { 0% { opacity: 0; } 30% { opacity: .16; } 100% { opacity: .075; } }
@keyframes planDraw { to { stroke-dashoffset: 0; } }
@keyframes portraitDevelop { from { -webkit-mask-position: 0 0; mask-position: 0 0; transform: scale(1.04); } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: none; } }
@keyframes bracketInTL { from { opacity: 0; transform: translate(-10px, -10px); } to { opacity: .6; transform: none; } }
@keyframes bracketInBR { from { opacity: 0; transform: translate(10px, 10px); } to { opacity: .6; transform: none; } }
@keyframes profileRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes labelTune { from { opacity: 0; letter-spacing: .22em; } to { opacity: 1; letter-spacing: .12em; } }
@keyframes headingShare { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(18px) scale(1.015); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes routeLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes arrowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes dotOn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes dotOnResult { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.36); } 100% { opacity: 1; transform: none; } }
@keyframes valuePunch { 0% { transform: scale(.78); } 60% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes tickGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.about-results { margin-top: clamp(56px, 5vw, 78px); }
.about-part__head { margin-bottom: 30px; }
.about-part__head .label { margin-bottom: 14px; }
.about-part__head h2 { max-width: 900px; margin-bottom: 0; font-size: clamp(2.1rem, 3.5vw, 3.55rem); }
.case-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.case-card { min-width: 0; background: var(--bg-2); border: 1px solid var(--line); }
.case-card__layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; align-items: start; padding: 22px; }
.case-card__media { min-width: 0; margin: 0; background: var(--bg-3); }
.cases-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: 0; object-fit: cover; object-position: center 25%; filter: grayscale(.25) brightness(.85) contrast(1.05); }
.cases-photo--kovalerov { object-position: center 25%; }
.cases-photo--konovalova { object-position: center 25%; }
.cases-photo--voice { width: 76px; flex: 0 0 76px; }
.cases-photo--zainulin { object-position: center 25%; }
.cases-photo--elvira { object-position: center 25%; }
.cases-photo--kasimova { object-position: center 25%; }
.cases-photo--taisia { object-position: center 22%; }
.cases-photo--angelina { object-position: center 15%; }
.cases-photo--alexa { object-position: 12% center; }
.cases-photo--daniel { object-position: center center; }
.case-card__body { min-width: 0; container-type: inline-size; overflow-wrap: anywhere; }
.case-card h3 { margin: 0; font: 800 clamp(21px, 2vw, 29px)/1.2 var(--font-body); letter-spacing: -.025em; }
.case-card__descriptor { margin: 8px 0 0; color: var(--text-dim); font-size: 14px; }
.case-card__change { display: grid; gap: 16px; margin-top: 25px; }
.case-card__state { padding-top: 10px; border-top: 1px solid var(--line); }
.case-card__state-label { display: block; margin-bottom: 7px; font: 800 12px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.case-card__state-label--before { color: var(--red); }
.case-card__state-label--after { color: var(--green); }
.case-card__state p { max-width: 58ch; margin: 0; color: rgba(242,242,239,.84); font-size: 16px; line-height: 1.5; }
.case-card__number { margin-top: 26px; color: var(--green); font: 900 clamp(3rem, 5vw, 5.4rem)/1.03 var(--font-display); letter-spacing: -.06em; overflow-wrap: normal; }
.case-card__number:has(.case-card__result-value) { font-size: min(5.4rem, 15.5cqi); white-space: nowrap; }
.case-card__result-value { display: inline-block; white-space: nowrap; }
.case-card__caption { margin: 9px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.case-card__extra { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 16px; line-height: 1.45; }
.case-card__quote { margin: 24px 0 0; padding-left: 18px; border-left: 2px solid var(--green); color: rgba(242,242,239,.88); font-size: 16px; line-height: 1.5; }
.about-voices { margin-top: clamp(72px, 8vw, 112px); }
.voice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.voice-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 30px); background: var(--bg-2); border: 1px solid var(--line); }
.voice-card__person { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.voice-card__person h3 { margin: 0; font: 800 19px/1.25 var(--font-body); }
.voice-card__person p { margin: 5px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.35; }
.voice-card blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 0; color: rgba(242,242,239,.9); font-size: 17px; line-height: 1.55; }
/* The card keeps one size: the quote is clamped and the rest opens in a modal
   reader, so opening a testimonial can never resize the grid. */
.voice-card__more { display: block; width: 100%; margin-top: auto; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--green); font: 800 14px/1.3 var(--font-body); text-align: left; cursor: pointer; transition: color .2s ease; }
.voice-card__more:hover { color: #4FD08C; }

/* Testimonial reader: a native <dialog>, so the top layer, the focus trap and
   Escape come from the browser instead of hand-written overlay code. */
.voice-dialog { width: min(100% - 32px, 720px); max-height: min(84svh, 860px); padding: 0; border: 1px solid #2A2F2C; background: var(--bg-2); color: var(--text); overflow: hidden; }
.voice-dialog::backdrop { background: rgba(5,5,6,.76); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.voice-dialog__scroll { max-height: min(84svh, 860px); padding: clamp(24px, 3vw, 38px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3A3F44 transparent; }
.voice-dialog__scroll::-webkit-scrollbar { width: 10px; }
.voice-dialog__scroll::-webkit-scrollbar-track { background: transparent; }
.voice-dialog__scroll::-webkit-scrollbar-thumb { background: #3A3F44; }
.voice-dialog__scroll::-webkit-scrollbar-thumb:hover { background: #4A5056; }
.voice-dialog__close { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; transition: border-color .2s ease; }
.voice-dialog__close:hover { border-color: #3D4448; }
.voice-dialog__close svg { width: 18px; height: 18px; }
.voice-dialog__person { display: flex; align-items: center; gap: 16px; margin: 0 44px 24px 0; }
.voice-dialog__person img { flex: 0 0 auto; width: 64px; height: 80px; object-fit: cover; object-position: 50% 18%; }
.voice-dialog__person h3 { margin: 0; font: 800 20px/1.25 var(--font-body); }
.voice-dialog__person p { margin: 5px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.35; }
.voice-dialog__body { color: rgba(242,242,239,.86); font-size: 16px; line-height: 1.62; }
.voice-dialog__body p { margin: 0 0 16px; }
.voice-dialog__body p:last-child { margin-bottom: 0; }
.voice-dialog__body ol,
.voice-dialog__body ul { margin: 0 0 16px; padding-left: 1.35em; }
.voice-dialog__body li { margin: 0 0 8px; }
.voice-dialog__body li:last-child { margin-bottom: 0; }

/* Sixth grid cell: a quiet pointer to the channel instead of an empty slot. */
.voice-card--more { color: inherit; text-decoration: none; transition: border-color .2s ease; }
/* Seven reviews and the telegram card make eight slots: the link takes the two
   left over, so the last row closes instead of leaving a hole. */
.voice-card--more { grid-column: span 2; }
.voice-card--more .label { margin-bottom: 0; }
.voice-card--more__text { margin-top: 20px; color: rgba(242,242,239,.86); font-size: 17px; line-height: 1.55; }
.voice-card--more__cta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--green); font: 800 14px/1.3 var(--font-body); transition: color .2s ease; }
.voice-card--more:hover { border-color: #3D4448; }
.voice-card--more:hover .voice-card--more__cta { color: #4FD08C; }

/* Corner marks: the frame's top-left and bottom-right corners are cut in green,
   the way a drawing marks a crop. Drawn just inside the border, so nothing can
   collide with the photo, the text, or the neighbouring card. */
.voice-card { position: relative; }
.voice-card::before,
.voice-card::after,
.voice-dialog::before,
.voice-dialog::after { content: ""; position: absolute; width: 20px; height: 20px; border: 0 solid var(--green); pointer-events: none; }
.voice-card::before,
.voice-dialog::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.voice-card::after,
.voice-dialog::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* Voice cards enter a beat apart instead of all at once. */
.motion-ready .voice-cards > .voice-card.reveal.in { animation: voiceCardIn .72s cubic-bezier(.22,.68,.28,1) calc(var(--voice-step, 0) * 70ms) both; }
.voice-cards > :nth-child(1) { --voice-step: 0; }
.voice-cards > :nth-child(2) { --voice-step: 1; }
.voice-cards > :nth-child(3) { --voice-step: 2; }
.voice-cards > :nth-child(4) { --voice-step: 0; }
.voice-cards > :nth-child(5) { --voice-step: 1; }
.voice-cards > :nth-child(6) { --voice-step: 2; }
@keyframes voiceCardIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* The reader opens and closes with the same motion, Escape included. */
.voice-dialog[open] { animation: voiceDialogIn .34s cubic-bezier(.22,.68,.28,1) both; }
.voice-dialog[open]::backdrop { animation: voiceBackdropIn .3s ease both; }
.voice-dialog.is-closing { animation: voiceDialogOut .22s cubic-bezier(.4,0,1,1) both; }
.voice-dialog.is-closing::backdrop { animation: voiceBackdropOut .2s ease both; }
@keyframes voiceDialogIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes voiceDialogOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(10px) scale(.99); }
}
@keyframes voiceBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes voiceBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .motion-ready .voice-cards > .voice-card.reveal.in { animation: none; opacity: 1; transform: none; }
  .voice-dialog[open],
  .voice-dialog[open]::backdrop,
  .voice-dialog.is-closing,
  .voice-dialog.is-closing::backdrop { animation: none; }
}

/* About: green atmospheric reflection and stepped graphite display mounts for both cases. */
#about .about-profile { isolation: isolate; }
#about .about-profile::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse 48% 42% at 28% 42%, rgba(48, 164, 108, .22) 0%, rgba(48, 164, 108, .14) 28%, rgba(48, 164, 108, .05) 62%, rgba(48, 164, 108, 0) 100%);
  content: "";
  pointer-events: none;
}
#about .about-profile__visual { z-index: 1; }
#about .about-results .about-case-mount {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
}
#about .about-results .about-case-mount__frame {
  position: absolute;
  z-index: 0;
  top: -10px;
  left: -10px;
  display: block;
  width: calc(100% + 16px);
  height: calc(100% + 24px);
  overflow: visible;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .26));
  pointer-events: none;
}
#about .about-results .about-case-mount__plate { width: calc(100% - 1px); height: calc(100% - 1px); }
#about .about-results .about-case-mount__corner-cut,
#about .about-results .about-case-mount__corner-detail { x: calc(100% - 30px); y: calc(100% - 30px); }
#about .about-results .about-case-mount__accent { opacity: .65; }
#about .about-results .about-case-mount__foot { x: calc(100% - 92px); y: calc(100% - 5px); opacity: .45; }
#about .case-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .34);
}
#about .case-card__number {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
#about .case-card__number::before {
  position: absolute;
  z-index: -1;
  top: -18px;
  right: -12px;
  bottom: -32px;
  left: -12px;
  background: radial-gradient(ellipse 58% 70% at 28% 46%, rgba(48, 164, 108, .16) 0%, rgba(48, 164, 108, .085) 38%, rgba(48, 164, 108, 0) 82%);
  content: "";
  filter: blur(12px);
  pointer-events: none;
}
/* Case results: every card lives through its own "before → after" instead of simply appearing.
   Armed before the first paint; the scene runs once on .about-results.is-live. */
#about .about-results .about-case-mount { --case-t: 0s; }
#about .about-results .about-case-mount:nth-child(2) { --case-t: .14s; }
#about .about-results .case-card__number-start,
#about .about-results .case-card__number-arrow { display: inline-block; }
#about .about-results.is-armed .about-part__head .label { opacity: 0; letter-spacing: .22em; }
#about .about-results.is-armed .about-part__head h2 { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(18px) scale(1.015); }
#about .about-results.is-armed .about-case-mount__frame { opacity: 0; }
#about .about-results.is-armed .about-case-mount__accent { opacity: 0; transform: translateY(-10px); }
#about .about-results.is-armed .about-case-mount__foot { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
#about .about-results.is-armed .cases-photo { clip-path: inset(0 100% 0 0); filter: grayscale(.55) brightness(.85) contrast(1.05); transform: scale(1.04); }
#about .about-results.is-armed .case-card h3,
#about .about-results.is-armed .case-card__descriptor,
#about .about-results.is-armed .case-card__state,
#about .about-results.is-armed .case-card__caption,
#about .about-results.is-armed .case-card__extra { opacity: 0; transform: translateY(8px); }
#about .about-results.is-armed .case-card__number-start,
#about .about-results.is-armed .case-card__number-arrow,
#about .about-results.is-armed .case-card__result-value { opacity: 0; }
#about .about-results.is-armed .case-card__number::before { opacity: 0; }
#about .about-results.is-armed .case-card__number:not(:has(.case-card__result-value)) { opacity: 0; transform: translateY(8px); }
#about .about-results.is-armed .case-card__multiplier { opacity: 0; }
#about .about-results.is-armed .case-card__quote { opacity: 0; clip-path: inset(0 0 100% 0); }
#about .about-results.is-live .about-part__head .label { animation: labelTune .5s ease-out both; }
#about .about-results.is-live .about-part__head h2 { animation: headingShare .64s cubic-bezier(.22,.61,.36,1) .1s both; }
#about .about-results.is-live .about-case-mount__frame { animation: profileGlow .4s ease-out var(--case-t) both; }
#about .about-results.is-live .about-case-mount__accent { animation: mountAccent .32s cubic-bezier(.3,.7,.3,1) calc(var(--case-t) + .22s) both; }
#about .about-results.is-live .about-case-mount__foot { animation: mountFoot .3s ease-out calc(var(--case-t) + .3s) both; }
#about .about-results.is-live .cases-photo { animation: casePhoto .8s cubic-bezier(.22,.61,.36,1) calc(var(--case-t) + .12s) both; }
#about .about-results.is-live .case-card h3 { animation: profileRise .36s ease-out calc(var(--case-t) + .26s) both; }
#about .about-results.is-live .case-card__descriptor { animation: profileRise .36s ease-out calc(var(--case-t) + .34s) both; }
#about .about-results.is-live .case-card__state:nth-child(1) { animation: profileRise .3s ease-out calc(var(--case-t) + .38s) both, caseEdgeBefore .6s ease-out calc(var(--case-t) + .52s) both; }
#about .about-results.is-live .case-card__state:nth-child(2) { animation: profileRise .3s ease-out calc(var(--case-t) + .76s) both, caseEdgeAfter .6s ease-out calc(var(--case-t) + .84s) both; }
#about .about-results.is-live .case-card__state:nth-child(1) .case-card__state-label { animation: labelBlink .42s ease-out calc(var(--case-t) + .78s) both; }
#about .about-results.is-live .case-card__state:nth-child(2) .case-card__state-label { animation: labelPop .34s cubic-bezier(.3,.7,.3,1) calc(var(--case-t) + .78s) both; }
#about .about-results.is-live .case-card__number-start { animation: numberStart 1.1s linear calc(var(--case-t) + .98s) both; }
#about .about-results.is-live .case-card__number-arrow { animation: numberArrow .42s cubic-bezier(.3,.7,.3,1) calc(var(--case-t) + 1.02s) both; }
#about .about-results.is-live .case-card__result-value { animation: profileRise .3s ease-out calc(var(--case-t) + .98s) both; }
#about .about-results.is-live .case-card__number::before { animation: profileGlow .6s ease-out calc(var(--case-t) + 1s) both; }
#about .about-results.is-live .case-card__number:not(:has(.case-card__result-value)) { animation: profileRise .3s ease-out calc(var(--case-t) + .98s) both; }
#about .about-results .case-card__multiplier.is-counted { opacity: 1; }
#about .about-results.is-live .case-card__multiplier.is-step { animation: counterStep .16s ease-out both; }
#about .about-results.is-live .case-card__caption { animation: profileRise .36s ease-out calc(var(--case-t) + 1.2s) both; }
#about .about-results.is-live .case-card__extra { animation: profileRise .36s ease-out calc(var(--case-t) + 1.36s) both; }
#about .about-results.is-live .case-card__quote { animation: caseQuote .7s ease-out calc(var(--case-t) + 1.36s) both; }
@keyframes mountAccent { 0% { opacity: 0; transform: translateY(-10px); } 70% { opacity: .65; transform: translateY(2px); } 100% { opacity: .65; transform: none; } }
@keyframes mountFoot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes casePhoto { from { clip-path: inset(0 100% 0 0); filter: grayscale(.55) brightness(.85) contrast(1.05); transform: scale(1.04); } to { clip-path: inset(0); filter: grayscale(.25) brightness(.85) contrast(1.05); transform: none; } }
@keyframes caseEdgeBefore { 0%, 100% { border-top-color: var(--line); } 45% { border-top-color: var(--red); } }
@keyframes caseEdgeAfter { 0%, 100% { border-top-color: var(--line); } 45% { border-top-color: var(--green); } }
@keyframes labelBlink { 0%, 100% { opacity: 1; } 45% { opacity: .4; } }
@keyframes labelPop { 0% { opacity: .5; transform: scale(.86); } 62% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes numberStart { 0% { opacity: 0; } 22% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: .28; } }
@keyframes numberArrow { 0% { opacity: 0; transform: translateX(-8px); } 55% { opacity: 1; transform: translateX(2px); } 100% { opacity: 1; transform: none; } }
@keyframes counterStep { from { opacity: .35; } to { opacity: 1; } }
@keyframes caseQuote { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@media (max-width: 768px) {
  #about .about-profile::before {
    background: radial-gradient(ellipse 48% 31% at 52% 30%, rgba(48, 164, 108, .22) 0%, rgba(48, 164, 108, .14) 30%, rgba(48, 164, 108, .045) 66%, rgba(48, 164, 108, 0) 100%);
  }
  #about .about-results .about-case-mount__frame { top: -7px; left: -7px; width: calc(100% + 11px); height: calc(100% + 15px); }
  #about .about-results .about-case-mount__accent { x: 2px; height: 34px; }
  #about .about-results .about-case-mount__foot { width: 40px; }
}

/* Awards: real paper held above a graphite board, lit from the upper left. */
#awards { position: relative; isolation: isolate; padding-block: clamp(88px, 9vw, 120px); }
#awards .section-head--awards { margin-bottom: 44px; }
#awards .awards-wall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 3vw, 44px); align-items: center; }
#awards .trophy { min-width: 0; margin: 0; text-align: center; }
/* Narrow side fades stay outside the bowls; lower fade starts beyond bases and contact shadows. */
#awards .trophy img { display: block; width: 100%; height: auto; margin-inline: auto; mix-blend-mode: normal; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 88%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 88%, transparent); mask-composite: intersect; }
#awards .trophy figcaption { margin-top: 8px; color: var(--text-dim); font: 500 13px/1.45 var(--font-body); }
#awards .awards-board { position: relative; isolation: isolate; min-width: 0; aspect-ratio: 5 / 6; box-shadow: 10px 22px 34px rgba(0,0,0,.4), 2px 4px 0 #080a08; }
#awards .awards-board__surface { position: absolute; z-index: -1; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#awards .awards-board__edge { width: calc(100% - 2px); height: calc(100% - 2px); }
#awards .awards-board__inset { width: calc(100% - 14px); height: calc(100% - 14px); }
#awards .awards-board__field { width: calc(100% - 24px); height: calc(100% - 24px); }
#awards .awards-board__fastener--right { x: calc(100% - 20px); }
#awards .awards-board__fastener--bottom { y: calc(100% - 20px); }
#awards .awards-paper { position: absolute; left: var(--paper-x); top: var(--paper-y); width: var(--paper-width); transform: rotate(var(--paper-angle)); transform-origin: 50% 8%; }
#awards .awards-paper--diploma { --paper-x: 5.5%; --paper-y: 5.5%; --paper-width: 34.5%; --paper-angle: -2deg; }
#awards .awards-paper--appendix { --paper-x: 45%; --paper-y: 4.5%; --paper-width: 16%; --paper-angle: 1.4deg; }
#awards .awards-paper--communication { --paper-x: 66.5%; --paper-y: 7%; --paper-width: 27%; --paper-angle: 2deg; }
#awards .awards-paper--behavior { --paper-x: 6.5%; --paper-y: 29.5%; --paper-width: 28%; --paper-angle: 1.2deg; }
#awards .awards-paper--influence { --paper-x: 37.5%; --paper-y: 27.5%; --paper-width: 28%; --paper-angle: -1.6deg; }
#awards .awards-paper--negotiation { --paper-x: 69%; --paper-y: 30%; --paper-width: 25%; --paper-angle: 1.1deg; }
#awards .awards-paper--training { --paper-x: 6%; --paper-y: 50.5%; --paper-width: 20%; --paper-angle: -1.8deg; }
#awards .awards-paper--academy { --paper-x: 29%; --paper-y: 48%; --paper-width: 20.5%; --paper-angle: .8deg; }
#awards .awards-paper--business { --paper-x: 53%; --paper-y: 50%; --paper-width: 19.5%; --paper-angle: -1.2deg; }
#awards .awards-paper--speaker { --paper-x: 7.5%; --paper-y: 76%; --paper-width: 34%; --paper-angle: 1.4deg; }
#awards .awards-paper--practicum { --paper-x: 49%; --paper-y: 75%; --paper-width: 37%; --paper-angle: -1.5deg; }
#awards .awards-paper--contribution { --paper-x: 76%; --paper-y: 47.8%; --paper-width: 19%; --paper-angle: 1.7deg; }
#awards .doc { position: relative; margin: 0; cursor: zoom-in; box-shadow: 1px 2px 2px rgba(0,0,0,.55), 5px 10px 13px rgba(0,0,0,.48); transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease; }
#awards .doc:hover { box-shadow: 1px 2px 2px rgba(0,0,0,.55), 7px 13px 18px rgba(0,0,0,.62); }
#awards .doc:focus-visible { outline: 3px solid #cab68e; outline-offset: 6px; }
/* Hinged lift: only .doc swings on its upper edge, so the clip above it never moves. */
#awards .awards-paper.is-settling { z-index: 3; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* The paper's own footprint is the trigger, so a moving sheet can never make it flicker. */
  #awards .awards-paper:hover { z-index: 3; }
  #awards:not(.awards-motion) .awards-paper:hover .doc,
  #awards.awards-motion .awards-paper:has(.awards-paper__motion.is-done):hover .doc {
    transform: perspective(1000px) rotateX(16deg);
    box-shadow: 0 1px 1px rgba(0,0,0,.58), 0 12px 22px -6px rgba(0,0,0,.5), 0 30px 44px -12px rgba(0,0,0,.44);
  }
}
@media (prefers-reduced-motion: no-preference) {
  #awards .awards-paper:focus-within { z-index: 3; }
  #awards:not(.awards-motion) .doc:focus-visible,
  #awards.awards-motion .awards-paper__motion.is-done .doc:focus-visible {
    transform: perspective(1000px) rotateX(16deg);
    box-shadow: 0 1px 1px rgba(0,0,0,.58), 0 12px 22px -6px rgba(0,0,0,.5), 0 30px 44px -12px rgba(0,0,0,.44);
  }
}
#awards .doc img { display: block; width: 100%; height: auto; object-fit: contain; }
#awards .awards-paper__clip { position: absolute; z-index: 2; top: -13px; left: calc(50% - 13px); width: 26px; height: 23px; overflow: visible; filter: drop-shadow(2px 3px 1.5px rgba(0,0,0,.55)); pointer-events: none; }
/* Awards entrance: armed by JS only. The resting pose, size and rotation stay on .awards-paper,
   the motion layer above carries a temporary offset that ends on a neutral frame. */
#awards .awards-paper__motion { position: relative; transform-origin: 50% 0; }
#awards.awards-motion .trophy:not(.is-in) { opacity: 0; }
#awards.awards-motion .trophy.is-in { animation: awardsTrophyIn .8s cubic-bezier(.22,.61,.36,1) both; }
#awards.awards-motion .awards-paper__motion:not(.is-in) { opacity: 0; }
#awards.awards-motion .awards-paper__motion.is-in { animation: awardsDocIn var(--doc-dur, 1.3s) linear var(--doc-delay, 0s) both; }
#awards.awards-motion .trophy.is-done,
#awards.awards-motion .awards-paper__motion.is-done { animation: none; opacity: 1; }
@keyframes awardsTrophyIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Pop off the shelf, then progressively smaller swings around the clip; per-sheet amplitude. */
@keyframes awardsDocIn {
  0% { opacity: 0; transform: translateY(var(--doc-rise, 21px)) rotate(var(--doc-sway, 3.5deg)); animation-timing-function: cubic-bezier(.2,.75,.35,1); }
  18% { opacity: 1; transform: translateY(var(--doc-peak, -6px)) rotate(calc(var(--doc-sway, 3.5deg) * .92)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  34% { opacity: 1; transform: translateY(0) rotate(calc(var(--doc-sway, 3.5deg) * -.66)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  52% { opacity: 1; transform: translateY(0) rotate(calc(var(--doc-sway, 3.5deg) * .34)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  70% { opacity: 1; transform: translateY(0) rotate(calc(var(--doc-sway, 3.5deg) * -.14)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  88%, 100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
/* Awards: green ambient glow + blinking star field in the open sky around the board. */
#awards::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(34% 34% at 12% 64%,#30A46C26,#30A46C00), radial-gradient(30% 16% at 80% 84%,#30A46C1C,#30A46C00), radial-gradient(28% 24% at 60% 24%,#30A46C14,#30A46C00); }
#awards .awards-atmo { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
#awards .awards-atmo i { position: absolute; background: var(--green); clip-path: polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%); opacity: .85; animation: awardsTwinkle 6s ease-in-out infinite; }
@keyframes awardsTwinkle { 0%, 100% { opacity: .35; transform: scale(.78); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 1100px) {
  #awards .awards-wall { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  #awards .trophy { width: min(100%, 540px); justify-self: center; }
  #awards .awards-board { width: 100%; max-width: 900px; justify-self: center; }
}
@media (max-width: 600px) {
  #awards .awards-wall { gap: 32px; }
  #awards .trophy { width: 100%; }
  #awards .awards-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px 22px; aspect-ratio: auto; padding: 40px 28px; }
  #awards .awards-paper { position: relative; inset: auto; width: 100%; align-self: center; transform: rotate(calc(var(--paper-angle) * .3)); }
  #awards .awards-paper--diploma,
  #awards .awards-paper--speaker,
  #awards .awards-paper--practicum { grid-column: 1 / -1; }
  #awards .awards-paper--contribution { grid-column: 1 / -1; width: 66%; justify-self: center; }
  #awards .awards-paper__clip { top: -11px; left: calc(50% - 11px); width: 22px; height: 20px; }
}
@media (max-width: 360px) {
  #awards .awards-board { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 38px 26px; }
  #awards .awards-paper { grid-column: 1; }
  #awards .awards-paper--contribution { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #awards .doc { transition: none; }
}

/* Catalog: two audiences, real offers, visible terms. */
/* Services-only scenery: clip decoration, never the content or its focus outlines. */
#services { position: relative; isolation: isolate; }
#services > .services-background { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
#services > .services-background::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: max(0px, calc((100% - 1440px) / 2));
  width: min(100%, 1200px);
  height: clamp(380px, 35vw, 480px);
  max-height: 100%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(48, 164, 108, .14) 0%, rgba(48, 164, 108, .09) 32%, rgba(48, 164, 108, .035) 62%, rgba(48, 164, 108, 0) 96%);
  pointer-events: none;
}
#services .services-background__grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(
  ellipse 50% 50% at 50% 50%,
  #000 55%,
  rgba(0, 0, 0, .8) 70%,
  rgba(0, 0, 0, .4) 84%,
  rgba(0, 0, 0, .1) 93%,
  transparent 100%
);
mask-image: radial-gradient(
  ellipse 50% 50% at 50% 50%,
  #000 55%,
  rgba(0, 0, 0, .8) 70%,
  rgba(0, 0, 0, .4) 84%,
  rgba(0, 0, 0, .1) 93%,
  transparent 100%
);
  pointer-events: none;
}
#services > .container { position: relative; z-index: 1; }
#services #panel-realtors .offer > .btn { margin-top: auto; }
.catalog { padding-block: clamp(88px, 9vw, 116px); }
.section-head--catalog { max-width: 900px; margin-bottom: 40px; }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.tab { appearance: none; margin: 0; padding: 14px 28px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text-dim); font: 800 15px/1 var(--font-body); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.tab:hover { color: var(--text); border-color: #3a3a41; }
.tab[aria-selected="true"] { color: var(--green); border-color: var(--green); background: var(--green-dim); }
/* Services: cards stacked on the left, one suspended technical sheet on the right. */
#services .services-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(272px, 29%, 372px); align-items: center; gap: clamp(26px, 4.2vw, 72px); }
#services .offers { display: flex; flex-direction: column; gap: 18px; }
#services .offer--single { max-width: none; }
#services .bp-sheet { --bp-angle: 1.3deg; position: relative; justify-self: end; width: 100%; max-width: 372px; aspect-ratio: 5 / 6; border: 1px solid #2F3532; background-color: #17191A; background-image: repeating-linear-gradient(90deg, rgba(242,242,239,.05) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(242,242,239,.05) 0 1px, transparent 1px 28px); transform: rotate(var(--bp-angle)); box-shadow: inset 0 1px 0 rgba(242,242,239,.07), inset 0 0 44px rgba(0,0,0,.34), 0 24px 44px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.45); pointer-events: none; }
#services .bp-sheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(242,242,239,.08); }
#services .bp-sheet__clip { position: absolute; z-index: 2; top: -14px; left: calc(50% - 14px); width: 28px; height: 24.5px; overflow: visible; filter: drop-shadow(2px 3px 1.5px rgba(0,0,0,.55)); }
#services .bp-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; fill: none; stroke: #E6E3D6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#services .bp-art text { fill: #A9ABA2; stroke: none; font: 700 10px/1 var(--font-body); letter-spacing: .16em; text-anchor: middle; }
#services .bp-art .t { fill: #E6E3D6; font-size: 12px; letter-spacing: .1em; }
#services .bp-art .g { stroke: #6E9E82; }
#services .bp-art .a { stroke: #35B87C; stroke-width: 1.8; }
#services .bp-art .d { stroke-opacity: .28; }
#services .bp-art .c { stroke-width: 4; }
#services .bp-art .k { stroke-dasharray: 5 7; }
#services .bp-art .f { fill: rgba(48,164,108,.14); stroke: #35B87C; }
/* Services entrance: the cards rise, the sheet pops off its clip and swings down to rest.
   Armed before the first paint, played on section entry, replayed on every tab switch. */
#services .bp-sheet { --bp-sway: 5.5deg; }
#services.is-armed .offer { opacity: 0; transform: translateY(14px); }
#services.is-armed .bp-sheet { opacity: 0; }
#services.is-live .offer.is-in { animation: offerRise .52s cubic-bezier(.22,.61,.36,1) both; }
#services.is-live .offer.is-in:nth-child(2) { animation-delay: .09s; }
#services.is-live .bp-sheet.is-in { animation: bpSheetIn var(--bp-dur, 1.5s) linear both; transform-origin: 50% 0; }
@keyframes offerRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bpSheetIn {
  0% { opacity: 0; transform: translateY(18px) rotate(calc(var(--bp-angle) + var(--bp-sway, 5.5deg))); animation-timing-function: cubic-bezier(.2,.75,.35,1); }
  16% { opacity: 1; transform: translateY(-6px) rotate(calc(var(--bp-angle) + var(--bp-sway, 5.5deg) * .88)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  34% { opacity: 1; transform: translateY(0) rotate(calc(var(--bp-angle) - var(--bp-sway, 5.5deg) * .6)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  52% { opacity: 1; transform: translateY(0) rotate(calc(var(--bp-angle) + var(--bp-sway, 5.5deg) * .32)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  70% { opacity: 1; transform: translateY(0) rotate(calc(var(--bp-angle) - var(--bp-sway, 5.5deg) * .13)); animation-timing-function: cubic-bezier(.42,0,.58,1); }
  88%, 100% { opacity: 1; transform: translateY(0) rotate(var(--bp-angle)); }
}
@media (max-width: 900px) {
  #services .services-layout { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 6vw, 48px); }
  #services .bp-sheet { justify-self: center; width: min(100%, 344px); }
}
@media (max-width: 600px) {
  #services .bp-sheet { --bp-angle: .9deg; --bp-sway: 5deg; width: min(100%, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  #services .offer, #services .bp-sheet { animation: none; opacity: 1; transform: none; }
  #services .bp-sheet { transform: rotate(var(--bp-angle)); }
}
.offer { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); background: #141417; border: 1px solid var(--line); }
.offer--single { max-width: 680px; }
.offer__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 16px; }
.offer h3 { font: 800 clamp(21px, 1.7vw, 27px)/1.2 var(--font-body); letter-spacing: -.02em; }
.offer__badge { padding: 7px 10px; background: var(--green-dim); color: var(--green); font: 800 12px/1 var(--font-body); white-space: nowrap; }
.offer__price { color: var(--green); font: 800 17px/1 var(--font-body); white-space: nowrap; }
.offer__body { margin: 18px 0 26px; color: rgba(242,242,239,.85); font-size: 17px; line-height: 1.55; }
.offer .btn { align-self: flex-start; padding: 14px 24px; }

/* Protected review block: original width, typography, frames and masonry. */
.reviews { padding-block: clamp(64px, 8vw, 112px); }
.reviews .container { max-width: 1240px; padding-inline: clamp(20px, 4vw, 48px); }
.reviews .section-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.reviews .label { margin-bottom: 14px; font: 800 13px/1.4 var(--font-body); letter-spacing: .08em; }
.reviews h2 { max-width: 900px; margin: 0 0 18px; font: 800 clamp(26px, 3.4vw, 40px)/1.18 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.rule { position: relative; height: 1px; background: var(--line); margin: 0 0 clamp(40px, 5.5vw, 68px); }
.rule::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 3px; background: var(--green); }
.masonry { columns: 3; column-gap: 20px; }
.review { display: block; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 10px; cursor: zoom-in; transform: perspective(900px) rotateX(0deg); transition: transform .35s ease, border-color .35s ease; }
.review:hover, .review:focus-visible { transform: perspective(900px) rotateX(1.4deg) translateY(-3px); border-color: #3a3a41; }
.review img { display: block; width: 100%; height: auto; border-radius: 2px; filter: brightness(.9); }
/* Reviews entrance: each screenshot fades up once, in reading order. The
   offset rides the independent `translate` property, so the hover tilt on
   `transform` keeps its original timing. */
html.reviews-ready #reviews .review { opacity: 0; translate: 0 22px; transition: opacity .62s var(--reveal-delay, 0ms) cubic-bezier(.2,.7,.2,1), translate .62s var(--reveal-delay, 0ms) cubic-bezier(.2,.7,.2,1), transform .35s ease, border-color .35s ease; }
html.reviews-ready #reviews .review.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  html.reviews-ready #reviews .review { opacity: 1; translate: none; transition: none; }
}

/* Reviews: one quiet continuation line under the wall, pointing at the channel. */
.reviews__channel { margin: 30px 0 0; color: var(--text-dim); font: 500 16px/1.55 var(--font-body); }
.reviews__channel a { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(242,242,239,.32); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.reviews__channel a:hover { text-decoration-color: currentColor; }
.reviews__arrow { display: inline-block; margin-left: .3em; transition: transform .2s ease; }
.reviews__channel a:hover .reviews__arrow,
.reviews__channel a:focus-visible .reviews__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .reviews__arrow { transition: none; }
}

/* Contacts: a compact practical call sheet. */
.contacts { padding-block: clamp(88px, 9vw, 120px) 80px; }
.contacts__top { max-width: 760px; }
.contacts__top h2 { margin-bottom: 20px; }
.contacts__text { max-width: 56ch; margin: 0 0 32px; color: rgba(242,242,239,.85); font-size: 19px; line-height: 1.55; }
.contacts__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* Contacts: call sheet on the left, two-bubble dialogue mark on the right, green atmosphere between them. */
#contacts { position: relative; isolation: isolate; overflow: clip; --contacts-rise: -108px; }
#contacts::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 22% 28% at 20% 62%, rgba(48,164,108,.125) 0%, rgba(48,164,108,.055) 46%, rgba(48,164,108,0) 86%), radial-gradient(ellipse 19% 15% at 56% 20%, rgba(48,164,108,.10) 0%, rgba(48,164,108,.04) 46%, rgba(48,164,108,0) 88%); }
#contacts > .container { position: relative; z-index: 1; }
#contacts .contacts__layout { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr); gap: clamp(32px, 3.2vw, 60px); align-items: center; }
#contacts .contacts__top { min-width: 0; }
#contacts .contacts__art { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-width: 0; pointer-events: none; }
#contacts .contacts__art::before { content: ""; position: absolute; z-index: -1; inset: -24% -30% -24% -26%; background: radial-gradient(ellipse 50% 50% at 50% 48%, rgba(48,164,108,.28) 0%, rgba(48,164,108,.20) 38%, rgba(48,164,108,.08) 72%, rgba(48,164,108,0) 100%); }
#contacts .contacts__art-svg { display: block; width: 100%; max-width: 460px; height: auto; overflow: visible; }
/* Contacts motion: the two bubbles rise in one after another, then trade a small
   nodding turn while the signal arcs keep lifting off and fading. Everything is
   armed by JS adding `contacts-in`; without it the drawing simply sits still. */
#contacts .contacts__bubble, #contacts .contacts__bubble-tilt, #contacts .contacts__arc { transform-box: fill-box; transform-origin: center; }
html.contacts-in #contacts .contacts__bubble--rear { animation: contactsBubbleIn .8s cubic-bezier(.22,.68,.28,1) both; }
html.contacts-in #contacts .contacts__bubble--front { animation: contactsBubbleIn .8s cubic-bezier(.22,.68,.28,1) .2s both; }
html.contacts-in #contacts .contacts__bubble--front .contacts__bubble-tilt { animation: contactsTalkFront 3.8s ease-in-out 1.2s infinite; }
html.contacts-in #contacts .contacts__bubble--rear .contacts__bubble-tilt { animation: contactsTalkRear 3.8s ease-in-out 1.2s infinite; }
html.contacts-in #contacts .contacts__arc { animation: contactsRipple 4.2s cubic-bezier(.42,0,.58,1) backwards infinite; }
html.contacts-in #contacts .contacts__arc--1 { animation-delay: .5s; }
html.contacts-in #contacts .contacts__arc--2 { animation-delay: 1.9s; }
html.contacts-in #contacts .contacts__arc--3 { animation-delay: 3.3s; }
@keyframes contactsBubbleIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
/* Bottom bubble speaks first, the top one answers. */
@keyframes contactsTalkFront { 0%, 6% { transform: rotate(0deg); } 11% { transform: rotate(-2.4deg); } 16% { transform: rotate(1.7deg); } 21% { transform: rotate(-.9deg); } 26%, 100% { transform: rotate(0deg); } }
@keyframes contactsTalkRear { 0%, 34% { transform: rotate(0deg); } 39% { transform: rotate(2.4deg); } 44% { transform: rotate(-1.7deg); } 49% { transform: rotate(.9deg); } 54%, 100% { transform: rotate(0deg); } }
@keyframes contactsRipple { 0% { opacity: 0; transform: translateY(20px) scale(1); } 16% { opacity: 1; } 58% { opacity: .7; } 100% { opacity: 0; transform: translateY(var(--contacts-rise, -108px)) scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  #contacts .contacts__bubble, #contacts .contacts__bubble-tilt, #contacts .contacts__arc { animation: none !important; }
}
@media (max-width: 1000px) {
  #contacts .contacts__layout { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 42px); }
  #contacts .contacts__art { width: 100%; }
  #contacts .contacts__art-svg { max-width: 400px; }
  #contacts .contacts__art::before { inset: -10% -4% -12% -4%; }
  #contacts::before { background: radial-gradient(ellipse 72% 24% at 34% 70%, rgba(48,164,108,.085) 0%, rgba(48,164,108,.04) 44%, rgba(48,164,108,0) 86%); }
  #contacts { --contacts-rise: -72px; }
}
.contacts__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 40px; margin-top: clamp(48px, 5vw, 72px); padding-top: 26px; border-top: 1px solid var(--line); }
.geo { max-width: 64ch; margin: 0; color: var(--text-dim); font: 500 16px/1.55 var(--font-body); }
.site-footer { padding-block: 24px 38px; }
/* Footer reads links first, legal line last: the channels are what a visitor
   scans for, the name/phone/copyright sit underneath as the colophon. */
.footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.footer-links__label { color: var(--text-dim); font: 800 13px/1.4 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.footer-links__list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 30px; margin: 0; padding: 0; list-style: none; }
/* Brackets come from the link's own pseudo-elements and the icon is a real
   inline element, so neither enters the link text or the accessibility tree. */
.footer-links__list a { display: inline-flex; align-items: center; color: var(--text); font: 700 16px/1.45 var(--font-body); text-decoration: none; transition: color .2s ease; }
.footer-links__list svg,
.footer-links__list .footer-links__max { flex: 0 0 auto; width: 18px; height: 18px; margin-right: .5em; color: rgba(242,242,239,.52); transition: color .22s ease, opacity .22s ease; }
/* The supplied MAX mark is a near-black glyph on transparency, so it is inverted
   to a light silhouette; otherwise it would vanish on the dark footer. */
.footer-links__max { object-fit: contain; filter: brightness(0) invert(1); opacity: .38; }
.footer-links__list a::before,
.footer-links__list a::after { flex: 0 0 auto; color: rgba(242,242,239,.30); font-weight: 400; pointer-events: none; transition: transform .22s ease, color .22s ease; }
.footer-links__list a::before { content: "["; margin-right: .34em; }
.footer-links__list a::after { content: "]"; margin-left: .34em; }
.footer-links__list a:hover { color: #FFFFFF; }
.footer-links__list a:hover svg,
.footer-links__list a:focus-visible svg { color: rgba(242,242,239,.78); }
.footer-links__list a:hover .footer-links__max,
.footer-links__list a:focus-visible .footer-links__max { opacity: .72; }
.footer-links__list a:hover::before,
.footer-links__list a:focus-visible::before { transform: translateX(-2px); color: rgba(242,242,239,.62); }
.footer-links__list a:hover::after,
.footer-links__list a:focus-visible::after { transform: translateX(2px); color: rgba(242,242,239,.62); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; margin-top: 24px; color: var(--text-dim); font: 500 14px/1.5 var(--font-body); }
.footer-inner > :last-child { justify-self: end; }
.footer-phone { color: var(--green); font: 800 15px/1.3 var(--font-body); text-decoration: none; }
.footer-phone:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .footer-links { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-links__list { gap: 8px 22px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: start; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-links__list a,
  .footer-links__list svg,
  .footer-links__list a::before,
  .footer-links__list a::after { transition: none; }
}

/* Lightbox keeps full, uncropped images and closes on any click / Escape. */
.lightbox { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5,5,6,.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.lightbox img { width: auto; height: auto; max-width: min(100%, 1000px); max-height: calc(100svh - 48px); object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }

/* Evidence is readable before JS runs and even when frame delivery stalls. */
.reveal { opacity: 1; }
.motion-ready .reveal.in { animation: evidenceEnter .65s ease both; }
@keyframes evidenceEnter { from { transform: translateY(8px); } to { transform: none; } }

@media (max-width: 1200px) {
  .hero__content { padding-inline: 30px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat:first-child { grid-column: 1 / -1; }
  .stat:nth-child(2) { padding-left: 0; border-left: 0; padding-top: 0; }
  .stat:nth-child(3) { padding-top: 0; }
  .stat:first-child .stat__value { font-size: 3.1rem; }
  .stat:nth-child(2) .stat__value, .stat:nth-child(3) .stat__value { font-size: clamp(1.7rem, 8cqi, 2.6rem); }
  .about-profile { --profile-photo-height: 420px; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 48px; }
  .about-profile__visual { padding-left: 12px; }
  .about-profile__heading { font-size: 42px; }
  .about-profile__proofs { column-gap: 22px; }
  .about-profile__arrow { padding-inline: 16px; }
  .about-profile__value { font-size: 48px; }
  .about-profile__proof--exclusive .about-profile__value { font-size: 42px; }
  .case-card__layout { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px; }
}
@media (max-width: 1024px) {
  .masonry { columns: 2; }
  .hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero::after { background: radial-gradient(ellipse 47.52% 50% at 69.76% 35%, rgba(242, 242, 239, 0.09) 0%, rgba(242, 242, 239, 0.045) 34%, rgba(242, 242, 239, 0) 76%), radial-gradient(ellipse 48.6% 42% at 78.4% 84%, rgba(48, 164, 108, 0.07) 0%, rgba(48, 164, 108, 0.032) 34%, rgba(48, 164, 108, 0) 80%); }
  .hero h1 { font-size: 14.4cqi; }
}
@media (max-width: 960px) {
  .about-profile { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 38px; }
  .about-profile__heading { font-size: 38px; }
  .about-profile__route { font-size: 16px; }
  .about-profile__arrow { padding-inline: 12px; }
  .about-profile__proofs { column-gap: 20px; }
  .about-profile__proof { font-size: 16px; }
  .about-profile__value { font-size: 46px; }
  .about-profile__proof--exclusive .about-profile__value { font-size: 36px; }
  .offers { grid-template-columns: 1fr; }
  .offer--single { max-width: none; }
}
@media (max-width: 1040px) {
  /* Seven nav items no longer fit beside the logo and the call button, so the
     burger takes over here while the phone stays reachable in the header. */
  .nav { display: none; }
  .burger { display: flex; margin-left: 0; }
  .btn--header { margin-left: auto; }
  .header-inner { gap: 18px; }
}
@media (max-width: 768px) {
  .nav, .btn--header { display: none; }
  .burger { display: flex; }
  .header-inner { min-height: 64px; }
  .section { padding-block: 72px; }
  .section-head { margin-bottom: 36px; }
  h2 { font-size: clamp(2.1rem, 6.6vw, 3rem); line-height: 1.08; }
  .hero { display: block; min-height: 0; padding-top: var(--header-h); }
  .hero::after { inset: calc(var(--header-h) + max(40svh, 280px)) 0 0 0; animation-name: heroGlowStack; background: radial-gradient(ellipse 88% 50% at 44% 35%, rgba(242, 242, 239, 0.09) 0%, rgba(242, 242, 239, 0.045) 34%, rgba(242, 242, 239, 0) 76%), radial-gradient(ellipse 90% 42% at 60% 84%, rgba(48, 164, 108, 0.07) 0%, rgba(48, 164, 108, 0.032) 34%, rgba(48, 164, 108, 0) 80%); }
  .hero__media { height: 40svh; min-height: 280px; }
  .hero__media img { top: 0; height: 100%; object-position: center 15%; }
  .hero__media::after { inset: auto 0 0; height: 16%; background: linear-gradient(180deg, transparent, var(--bg)); }
  .hero__content { gap: 24px; border-left: 0; padding: var(--header-h) 20px 58px; }
  .hero h1 { font-size: clamp(2.5rem, 14.3cqi, 5rem); }
  .hero__name { font-size: 20px; }
  .hero__slogan { font-size: 18px; }
  .hero .btn--cta { width: 100%; min-width: 0; }
  .stats { margin-top: 6px; }
  .stat__label { max-width: 20ch; }
  .approach__statement { font-size: clamp(1.55rem, 5.6vw, 2.4rem); }
  .approach__body { font-size: 18px; }
  .about { padding-top: 48px; }
  .about-profile { display: grid; grid-template-columns: 1fr; gap: 36px; }
  .about-profile__visual { padding-left: 0; }
  .about-profile__plan, .about-profile__portrait::before, .about-profile__portrait::after { display: none; }
  .about-profile__portrait { width: min(100%, 350px); margin-inline: auto; }
  .about-profile__heading { max-width: 24ch; font-size: clamp(28px, 7.8vw, 36px); line-height: 1.1; }
  .about-profile__route { margin-bottom: 20px; font-size: 16px; }
  .about-profile__arrow { padding-inline: clamp(8px, 3vw, 20px); }
  .about-profile__bio { font-size: 18px; line-height: 1.5; }
  .about-profile__proofs { column-gap: 22px; row-gap: 16px; }
  .about-profile__proof { font-size: 17px; }
  .about-profile__value { font-size: 48px; }
  .about-profile__proof--exclusive .about-profile__value { font-size: clamp(28px, 8vw, 42px); }
  .about-profile__proof--deals { gap: 12px; }
  .case-cards { grid-template-columns: 1fr; }
  /* Voices turn into a swipeable ribbon: one card per screen instead of a long stack. */
  .voice-cards { display: flex; align-items: stretch; gap: 14px; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .voice-cards::-webkit-scrollbar { display: none; }
  .voice-card { flex: 0 0 86%; scroll-snap-align: start; }
  /* The reader covers the whole phone screen: blur on a full viewport is too costly there. */
  .voice-dialog { inset: 0; width: 100%; max-width: 100%; height: 100svh; max-height: 100svh; margin: 0; border: 0; }
  .voice-dialog::backdrop { background: #08080A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .voice-dialog__scroll { max-height: 100svh; padding: 22px 20px 32px; }
  .voice-dialog__close { top: 12px; right: 12px; }
  .voice-dialog__person img { width: 56px; height: 70px; }
  .voice-dialog__person { margin-right: 40px; }
  .case-card__layout { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .cases-photo--voice { width: 82px; flex-basis: 82px; }
  .tab { flex: 1 1 auto; padding: 14px 18px; text-align: center; }
  .offer { padding: 26px; }
  .offer__body { font-size: 17px; }
  .contacts { padding-block: 80px 64px; }
  .contacts__text { font-size: 18px; }
  .contacts__actions .btn { width: 100%; }
  .contacts__base { flex-direction: column; gap: 24px; }
  .footer-inner { grid-template-columns: 1fr auto; gap: 18px; }
  .footer-inner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .masonry { columns: 1; }
  .stats { grid-template-columns: 1fr; gap: 16px; }
  .stat { padding-left: 0; border-left: 0; padding-top: 0; }
  .stat:first-child .stat__value { font-size: 3rem; }
  .stat:nth-child(2) .stat__value, .stat:nth-child(3) .stat__value { font-size: 2.2rem; }
  .stat__label { max-width: none; }
}
@media (max-width: 480px) {
  .container, .header-inner { padding-inline: 20px; }
  .btn--cta { padding-inline: 16px; font-size: 15px; }
  .btn svg { width: 18px; }
  .hero__content { padding-inline: 20px; }
  .stat:first-child .stat__value { font-size: 2.8rem; }
  .stat:nth-child(2) .stat__value, .stat:nth-child(3) .stat__value { font-size: 2rem; }
  .stat__label { font-size: 13px; }
  .mobile-nav__list a { font-size: 30px; }
}
@media (max-width: 360px) {
  h2 { font-size: 2rem; }
  .hero h1 { font-size: 14cqi; }
  .stat:nth-child(2) .stat__value, .stat:nth-child(3) .stat__value { font-size: 1.8rem; }
  .btn--cta { padding-inline: 12px; font-size: 14px; }
  .btn { gap: 8px; }
  .about-profile__route { font-size: 15px; }
  .about-profile__arrow { padding-inline: 9px; }
  .about-profile__proofs { column-gap: 16px; }
  .about-profile__proof--deals { gap: 9px; }
  .about-profile__proof--exclusive .about-profile__value { font-size: 28px; }
  .case-card__layout { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .case-card__number { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .voice-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media img, .hero__content > * { animation: none; }
  .hero { animation: none; background-position: calc(100% + 1px) 0; }
  .hero::before, .hero::after { animation: none; clip-path: inset(0 0 0 100%); }
  .hero__content { animation: none; }
  .type-caret { display: none; }
  #approach .type-char, #approach.is-armed .approach__statement .type-char, #approach .approach__statement.is-typing .type-char { animation: none; opacity: 1; }
  #approach .approach__body, #approach .approach__body.is-rise { animation: none; opacity: 1; transform: none; }
  #approach .approach__light, #approach.is-armed .approach__light { animation: none; opacity: 1; transform: none; }
  #approach .approach__quote, #approach.is-armed .approach__quote { animation: none; opacity: .36; transform: none; }
  .about-profile::before, .about-profile__portrait img, .about-profile__portrait figcaption,
  .about-profile__heading, .about-profile__route::before, .about-profile__stage::before,
  .about-profile__arrow, .about-profile__bio, .about-profile__proof,
  .about-profile__proof--support::before, .about-profile__value {
    animation: none; opacity: 1; transform: none; clip-path: none;
  }
  .about-profile__portrait img { -webkit-mask-image: none; mask-image: none; }
  .about-profile__portrait::before, .about-profile__portrait::after { animation: none; opacity: .6; transform: none; }
  .about-profile__label { animation: none; opacity: 1; letter-spacing: .12em; }
  .about-profile__plan { animation: none; opacity: .075; }
  .about-profile__plan path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  #about .about-results .about-part__head h2, #about .about-results .about-case-mount__frame,
  #about .about-results .case-card h3, #about .about-results .case-card__descriptor,
  #about .about-results .case-card__state, #about .about-results .case-card__state-label,
  #about .about-results .case-card__number, #about .about-results .case-card__number-start,
  #about .about-results .case-card__number-arrow, #about .about-results .case-card__result-value,
  #about .about-results .case-card__multiplier, #about .about-results .case-card__caption,
  #about .about-results .case-card__extra,
  #about .about-results .case-card__quote, #about .about-results .case-card__number::before,
  #about .about-results .about-case-mount__foot {
    animation: none; opacity: 1; transform: none; clip-path: none;
  }
  #about .about-results .about-part__head .label { animation: none; opacity: 1; letter-spacing: .12em; }
  #about .about-results .about-case-mount__accent { animation: none; opacity: .65; transform: none; }
  #about .about-results .cases-photo { animation: none; clip-path: none; transform: none; filter: grayscale(.25) brightness(.85) contrast(1.05); }
  .motion-ready .reveal, .motion-ready .reveal.in { animation: none; opacity: 1; transform: none; transition: none; }
  .doc, .offer, .tab, .review, .btn, .mobile-nav, .burger span, .nav a::after, .lightbox { transition: none; }
  #awards .awards-atmo i { animation: none; }
  .voice-card__more { transition: none; }
  .voice-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .doc:hover, .doc:focus-visible, .review:hover, .review:focus-visible, .btn:hover { transform: none; }
}

/* ==========================================================================
   BUTTON SYSTEM — the hero experiment, promoted to every call action.
   A matte graphite plate lit from inside, a 1px green perimeter, fine dot
   microperforation, and one highlight that runs the whole edge at a constant
   pace per pointer entry. Layer order inside a .btn:
     rim (the button's own background) < face (graphite + light) < dots
     < travelling trace < icon / label.
   All decorative layers share z-index -1 inside the button's own stacking
   context, so they sit above the plate but below every label — including the
   buttons whose text is a bare text node. script.js adds those layers, so the
   plate, perimeter and typography below work without them.
   ========================================================================== */
/* Perimeter overlay: the same ring as the button background, brighter. */
.btn .hbtn__rim {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(ellipse 54% 116% at 50% 108%, rgba(150,240,196,.55) 0%, rgba(48,164,108,0) 74%),
    linear-gradient(180deg,
      rgba(242,242,239,.40) 0px,
      rgba(242,242,239,.10) 1.2px,
      rgba(48,164,108,.40) 1.2px,
      rgba(48,164,108,.34) 46%,
      rgba(48,164,108,.58) 100%);
  opacity: 0;
  transition: opacity .24s ease;
  pointer-events: none;
}
/* The travelling highlight: a comet drawn along the plate's own outline. Dashes
   are normalised by pathLength="100", so the head covers the same fraction of
   the real perimeter on every frame — a flat pace at any plate width, which a
   rotating conic cannot do (constant ANGLE makes the light crawl through the
   middle of a long edge and sprint round a corner). All layers share one tip and
   fade backwards, which reads as a bright head with a soft tail. The face hides
   everything except the 1px ring. */
.btn .hbtn__pass {
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: inset(0);
  filter: blur(1.1px);
  opacity: 0;
  pointer-events: none;
}
/* The svg is a replaced element: its width/height attributes win over `inset`,
   so the box is sized explicitly to sit exactly one pixel inside the plate. */
.btn .hbtn__trace {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  overflow: visible;
  pointer-events: none;
}
.btn .hbtn__trace-seg {
  fill: none;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dashoffset: 0;
  pointer-events: none;
}
/* Longest and dimmest first so the bright head paints over its own tail.
   Each dasharray sums to 100 with the dash ending on the shared tip. */
.btn .hbtn__trace-seg--6 { stroke: rgba(48,164,108,.10); stroke-dasharray: 0 79 21 0; }
.btn .hbtn__trace-seg--5 { stroke: rgba(104,226,164,.16); stroke-dasharray: 0 85 15 0; }
.btn .hbtn__trace-seg--4 { stroke: rgba(120,232,176,.28); stroke-dasharray: 0 89.5 10.5 0; }
.btn .hbtn__trace-seg--3 { stroke: rgba(150,240,196,.44); stroke-dasharray: 0 93 7 0; }
.btn .hbtn__trace-seg--2 { stroke: rgba(196,250,224,.66); stroke-dasharray: 0 95.5 4.5 0; }
.btn .hbtn__trace-seg--1 { stroke: #EAFDF2; stroke-dasharray: 0 97.6 2.4 0; }
/* The plate itself: opaque graphite so only the 1px ring stays visible. */
.btn .hbtn__face {
  position: absolute;
  z-index: -1;
  inset: 1px;
  overflow: hidden;
  background-color: #101613;
  background-image:
    radial-gradient(ellipse 58% 104% at 50% 72%, rgba(48,164,108,.40) 0%, rgba(48,164,108,.25) 34%, rgba(48,164,108,.08) 68%, rgba(48,164,108,0) 100%),
    radial-gradient(ellipse 80% 130% at 50% 100%, rgba(48,164,108,.14) 0%, rgba(48,164,108,.05) 52%, rgba(48,164,108,0) 92%),
    linear-gradient(180deg, rgba(242,242,239,.065) 0px, rgba(242,242,239,0) 3px);
  pointer-events: none;
}
.btn .hbtn__face::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 56% 96% at 50% 84%, rgba(48,164,108,.26) 0%, rgba(48,164,108,.15) 46%, rgba(48,164,108,0) 100%),
    radial-gradient(ellipse 42% 76% at 50% 90%, rgba(104,226,164,.18) 0%, rgba(104,226,164,0) 76%);
  opacity: 0;
  transition: opacity .24s ease;
  pointer-events: none;
}
.btn .hbtn__dots {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
  pointer-events: none;
}
/* Secondary action: same plate, same perimeter, no interior pool. */
.btn--ghost { color: var(--green); }
.btn--ghost .hbtn__face,
.btn--ghost::before {
  background-image: linear-gradient(180deg, rgba(242,242,239,.05) 0px, rgba(242,242,239,0) 3px);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background-color: #0B1210;
    transform: none;
    box-shadow:
      0 0 0 1px rgba(48,164,108,.11),
      0 1px 0 0 rgba(0,0,0,.55),
      0 2px 3px -1px rgba(0,0,0,.7),
      0 14px 24px -15px rgba(0,0,0,.95),
      0 0 22px -8px rgba(48,164,108,.32);
  }
  .btn:hover .hbtn__rim { opacity: 1; }
  .btn:hover .hbtn__face::before { opacity: 1; }
  .btn:hover .hbtn__pass { animation: hbtnPassFade 900ms linear both; }
  .btn:hover .hbtn__trace-seg { animation: hbtnTraceRun 900ms linear both; }
}
.btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  box-shadow:
    0 0 0 1px rgba(48,164,108,.11),
    0 1px 0 0 rgba(0,0,0,.55),
    0 2px 3px -1px rgba(0,0,0,.7),
    0 14px 24px -15px rgba(0,0,0,.95),
    0 0 22px -8px rgba(48,164,108,.32);
}
.btn:focus-visible .hbtn__rim { opacity: 1; }
.btn:focus-visible .hbtn__face::before { opacity: 1; }
.btn:focus-visible .hbtn__pass { animation: hbtnPassFade 900ms linear both; }
.btn:focus-visible .hbtn__trace-seg { animation: hbtnTraceRun 900ms linear both; }
.btn:active {
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(48,164,108,.09),
    0 1px 1px -1px rgba(0,0,0,.6),
    0 4px 8px -12px rgba(0,0,0,.9),
    0 0 12px -10px rgba(48,164,108,.3);
}
/* One lap = one dash pattern, and the dashes are measured in perimeter units,
   so the head advances the same distance every frame: no easing in, no easing
   out, no slowdown at the end of the pass. */
@keyframes hbtnTraceRun {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}
@keyframes hbtnPassFade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active,
  .btn:focus-visible { transform: none; transition: none; }
  .btn .hbtn__rim,
  .btn .hbtn__face::before { transition: none; }
  .btn .hbtn__pass,
  .btn .hbtn__trace-seg { animation: none !important; }
  .btn .hbtn__pass { opacity: 0; }
  .btn:hover .hbtn__rim,
  .btn:focus-visible .hbtn__rim,
  .btn:hover .hbtn__face::before,
  .btn:focus-visible .hbtn__face::before { opacity: 1; }
}
/* The big call actions keep the label large; it shrinks only when it must. */
@media (max-width: 768px) {
  .btn--cta { font-size: 16px; }
}
@media (max-width: 480px) {
  .btn--cta { font-size: 16px; }
}
@media (max-width: 380px) {
  .btn--cta { font-size: 15px; }
}
@media (max-width: 340px) {
  .btn--cta { font-size: 14px; }
}

/* ==========================================================================
   Free checklists: the one place where the ask is "take", not "buy". The band
   stays on the site's own dark ground, because a white strip reads as another
   site bolted on. What marks it instead: a green label, a tear line on every
   card and covers built as sheets of the documents themselves. No glow behind
   the pair on purpose: the cards are opaque, so it would only ever show through
   a 24px gap.
   ========================================================================== */
.free {
  position: relative;
  padding-block: clamp(88px, 9vw, 116px);
  border-top: 1px solid var(--line);
}
.free .label { color: var(--green); }
.free__head { margin-bottom: clamp(30px, 3.6vw, 46px); }
.free__head h2 { max-width: 900px; margin-bottom: 14px; }
.free__lead { margin: 0; color: var(--text-dim); font-size: 19px; line-height: 1.5; }
.free__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
/* Each card carries its document's own colour, sampled from the artwork itself:
   blue #5697dd for the goal guide, lime #9aef64 for the owner talk. The cover is
   a sheet of that document typeset in the site's display face, not a raw
   screenshot of a Telegram post. */
.free-card { --free-pad: 20px; --card-ink: var(--text); --card-sheet: #16181B; --card-edge: var(--line); --card-glow: rgba(48,164,108,.26); display: flex; flex-direction: column; min-width: 0; background: #141417; border: 1px solid var(--line); transition: border-color .25s ease; }
/* No lift, no shadow: the card stays planted and the reaction lives inside the
   drawing, where the pointer stirs the ribbon. */
.free-card:hover, .free-card:focus-within { border-color: #34343B; }
.free-card--blue { --card-ink: #6BA9EC; --card-sheet: #0E1723; --card-edge: rgba(86,151,221,.32); --card-glow: rgba(86,151,221,.34); }
.free-card--lime { --card-ink: #9AEF64; --card-sheet: #101C0D; --card-edge: rgba(154,239,100,.28); --card-glow: rgba(154,239,100,.28); }
.free-card__cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: clamp(180px, 14vw, 226px); margin: var(--free-pad) var(--free-pad) 0; padding: clamp(18px, 1.7vw, 26px); overflow: hidden; background: var(--card-sheet); border: 1px solid var(--card-edge); }
/* The plume: once the shader has drawn its first frame the canvas carries the
   cover, and the SVG ribbon underneath simply fades out. Until then — and for
   anyone without the script — the ribbon is what you see, so the card is never
   empty. */
.free-card__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; }
.free-card__ribbon { transition: opacity .7s ease; }
.free-card__cover.is-smoke .free-card__canvas { opacity: 1; }
.free-card__cover.is-smoke .free-card__ribbon { opacity: 0; }
/* A scrim under the type: the smoke runs free above, the headline keeps its
   dark ground. */
.free-card__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11,11,12,.94) 0%, rgba(11,11,12,.74) 28%, rgba(11,11,12,.28) 52%, rgba(11,11,12,0) 76%); }
/* Two lights behind the heading, tinted with the document's own colour: a soft
   field in the lower-left, and the ribbon the posters themselves carry, drawn as
   inline SVG so it takes each card's colour and curves instead of running
   straight. Both sit under the type, which is lifted above them. */
.free-card__cover::before { content: ""; position: absolute; left: -20%; bottom: -58%; width: 82%; aspect-ratio: 1 / .82; background: radial-gradient(closest-side, var(--card-glow) 0%, rgba(0,0,0,0) 72%); pointer-events: none; }
.free-card__ribbon { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--card-ink); pointer-events: none; -webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,0) 4%, #000 58%); mask-image: linear-gradient(45deg, rgba(0,0,0,0) 4%, #000 58%); }
.free-card__ray { fill: none; stroke: currentColor; stroke-linecap: round; }
.free-card__ray--wide { stroke-width: 34; opacity: .11; filter: blur(13px); }
.free-card__ray--mid { stroke-width: 15; opacity: .20; filter: blur(7px); }
.free-card__ray--fine { stroke-width: 5; opacity: .46; filter: blur(2.2px); }
.free-card__ray--core { stroke-width: 1.8; opacity: .78; filter: blur(.5px); }
/* The light that runs down the ribbon. pathLength normalises the dash, so one
   set of keyframes fits any card whatever the arc's real length. */
.free-card__ray--glint { stroke-width: 2.6; stroke-dasharray: 13 100; stroke-dashoffset: 114; opacity: 0; filter: blur(.9px) drop-shadow(0 0 7px currentColor); animation: rayGlint 9s linear infinite; }
/* The pair never breathes in sync: each card has its own tempo, its own phase,
   and on the lime card the light travels the other way. */
.free-card__rays { animation: rayDrift 14s ease-in-out infinite alternate; }
.free-card--lime .free-card__rays { animation-duration: 19s; animation-delay: -5.5s; }
.free-card--lime .free-card__ray--glint { animation-name: rayGlintBack; animation-duration: 12.5s; animation-delay: -4s; }
@keyframes rayDrift {
  from { transform: translate(-3px, 2px) scale(1.01); }
  to { transform: translate(4px, -3px) scale(1.04); }
}
@keyframes rayGlint {
  0% { stroke-dashoffset: 114; opacity: 0; }
  10% { opacity: .95; }
  88% { opacity: .95; }
  100% { stroke-dashoffset: -14; opacity: 0; }
}
@keyframes rayGlintBack {
  0% { stroke-dashoffset: -14; opacity: 0; }
  10% { opacity: .95; }
  88% { opacity: .95; }
  100% { stroke-dashoffset: 114; opacity: 0; }
}
/* The pointer reaction is not built here: script.js moves the crosshair over the
   sheet, so the drawing answers in its own language instead of the whole card
   jumping. */
.free-card__index { position: relative; z-index: 1; color: var(--card-ink); font: 800 13px/1 var(--font-body); letter-spacing: .16em; opacity: .8; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.free-card__title { position: relative; z-index: 1; margin: 0; color: var(--card-ink); font: 800 clamp(20px, 1.72vw, 27px)/1.12 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.5); }
.free-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--free-pad); }
.free-card__text { margin: 0 0 26px; color: rgba(242,242,239,.72); font-size: 16px; line-height: 1.5; }
/* Tear line: the perforation motif the buttons already carry, used here for
   meaning. The file size keeps to the far edge so the row stays balanced. */
.free-card__action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: auto; padding-top: 20px; border-top: 1px dashed rgba(242,242,239,.22); }
.free .btn--take { min-height: 50px; padding: 13px 22px; font-size: 16px; }
.free-card__meta { margin-left: auto; color: var(--text-dim); font: 700 13px/1 var(--font-body); letter-spacing: .04em; }
.free__more { margin: 30px 0 0; color: var(--text-dim); font-size: 16px; line-height: 1.5; }
.free__more a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.free__more a:hover { color: var(--text); }
/* The second card arrives a beat after the first, as every pair on this page does. */
/* Блок всплывает целиком: метка, заголовок, лид, карточки и подпись — со сдвигом
   по порядку. Только когда анимации разрешены системой. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready #free .reveal.in { animation: freeRise .6s cubic-bezier(.22, .68, .28, 1) both; }
  .motion-ready #free .free__head .label.reveal.in { animation-delay: 0ms; }
  .motion-ready #free .free__head h2.reveal.in { animation-delay: 70ms; }
  .motion-ready #free .free__lead.reveal.in { animation-delay: 140ms; }
  .motion-ready #free .free__grid > .free-card:nth-child(1).reveal.in { animation-delay: 210ms; }
  .motion-ready #free .free__grid > .free-card:nth-child(2).reveal.in { animation-delay: 300ms; }
  .motion-ready #free .free__more.reveal.in { animation-delay: 370ms; }
  @keyframes freeRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 900px) {
  .free__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .free__lead { font-size: 17px; }
  /* One card across the full column: the cover grows with it, otherwise the
     heading stays small on a very wide sheet. */
  .free-card__cover { min-height: clamp(180px, 26vw, 240px); }
  .free-card__title { font-size: clamp(22px, 3.1vw, 30px); }
}
@media (max-width: 600px) {
  .free-card { --free-pad: 14px; }
  /* Narrow covers wrap the heading into four lines, so the sheet gets taller
     instead of squeezing the type — and the drawing keeps the room above it. */
  .free-card__cover { min-height: 214px; }
  .free-card__action { gap: 12px; }
  .free .btn--take { width: 100%; }
  .free-card__meta { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .free__grid > .free-card.reveal.in:nth-child(2) { animation-delay: 0ms; }
  .free-card { transition: none; }
  /* No drift and no running light: the sheets stay still and readable. The smoke
     is frozen on one frame in script.js on the same condition. */
  .free-card__rays, .free-card__ray--glint { animation: none; }
}

/* ===== Подарки в блоке бесплатных чек-листов ===== */
.free-card.is-gifting,
.free-card.is-open,
.free-card.is-open-now { position: relative; }

.js .free-card.is-gifting:not(.is-open):not(.is-open-now) > .free-card__cover,
.js .free-card.is-gifting:not(.is-open):not(.is-open-now) > .free-card__body { opacity: 0; visibility: hidden; }

.gift {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--card-ink);
  font: inherit;
  cursor: pointer;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}
.gift__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 24%),
    radial-gradient(120% 80% at 50% 16%, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 62%),
    var(--card-sheet);
}
.gift__box { position: absolute; inset: 0; z-index: 1; }
.gift:hover .gift__bowwrap { transform: translate(-37.5%, -30.4%) scale(1.03); }
.gift:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 2px; }

/* Бумага: тайл 248×248 с мелкими рисунками, повторяется по всей карточке */
.gift__field { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gift__paper { fill: currentColor; fill-opacity: .04; }
.gift__icons { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .24; }

/* Ленты крестом через всю карточку: толщина и центровка от одной базы (ширины) */
.gift__ribbon { position: absolute; background: currentColor; opacity: .34; }
.gift__ribbon--v { top: 0; bottom: 0; left: calc(50% - clamp(17px, 5cqw, 32px)); width: clamp(34px, 10cqw, 64px); }
.gift__ribbon--h { left: 0; right: 0; top: calc(50% - clamp(17px, 5cqw, 32px)); height: clamp(34px, 10cqw, 64px); }

/* Бант с ниточкой и биркой: узел точно в центре карточки */
.gift__bowwrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(40%, 240px);
  transform: translate(-37.5%, -30.4%);
  transition: transform .28s ease;
}
.gift__bow { display: block; width: 100%; height: auto; overflow: visible; }
.gift__bow path, .gift__bow circle, .gift__bow rect { vector-effect: non-scaling-stroke; }
.gift__loop { fill: currentColor; fill-opacity: .5; stroke: currentColor; stroke-opacity: .85; stroke-width: 1.6; stroke-linejoin: round; }
.gift__knot { fill: currentColor; fill-opacity: .8; stroke: currentColor; stroke-opacity: .6; stroke-width: 1.2; }
.gift__crease { fill: none; stroke: currentColor; stroke-opacity: .6; stroke-width: 1.2; stroke-linecap: round; }
.gift__string { fill: none; stroke: currentColor; stroke-opacity: .42; stroke-width: 1; stroke-linecap: round; }
.gift__tag { fill: var(--card-sheet); stroke: currentColor; stroke-opacity: .4; stroke-width: 1; }
.gift__tagtint { fill: currentColor; fill-opacity: .14; stroke: none; }
.gift__taghole { fill: none; stroke: currentColor; stroke-opacity: .36; stroke-width: 1; }
.gift__tagtext { fill: currentColor; fill-opacity: .6; font: 800 12.5px/1 var(--font-body); letter-spacing: .02em; text-anchor: middle; }

/* Подсказка-приглашение */
.gift__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 2;
  text-align: center;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

.free-card.is-open .free-card__cover,
.free-card.is-open .free-card__body { animation: giftReveal .36s ease .3s both; }
.free-card.is-open .gift { pointer-events: none; }
.free-card.is-open .gift__plate,
.free-card.is-open .gift__hint { animation: giftFade .34s ease .26s forwards; }
.free-card.is-open .gift__ribbon--v { animation: giftRibbonV .34s cubic-bezier(.45, 0, .7, 1) forwards; }
.free-card.is-open .gift__ribbon--h { animation: giftRibbonH .34s cubic-bezier(.45, 0, .7, 1) forwards; }
.free-card.is-open .gift__bowwrap { animation: giftBow .3s ease .04s forwards; }
.free-card.is-open .gift__box { animation: giftFly .36s cubic-bezier(.32, .66, .3, 1) .12s forwards; }

.free-card.is-open-now > .free-card__cover,
.free-card.is-open-now > .free-card__body { opacity: 1; visibility: visible; }

@keyframes giftRibbonV { to { opacity: 0; transform: translateY(70px); } }
@keyframes giftRibbonH { to { opacity: 0; transform: translateX(-80px); } }
@keyframes giftBow {
  to { opacity: 0; transform: translate(-37.5%, -30.4%) translate(12px, -30px) scale(1.1); }
}
@keyframes giftFly {
  25% { opacity: 1; }
  to { transform: translateY(-30px) scale(1.03); opacity: 0; }
}
@keyframes giftFade { to { opacity: 0; } }
@keyframes giftReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* 7. Video: four public talks. Covers are supplied artwork and already carry
   the headline, so nothing is drawn on top of them. The play affordance lives
   in the caption strip, where it cannot cover anything. */

.video-block { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 112px); }
.video-block__head { max-width: 1000px; margin-bottom: clamp(24px, 3vw, 40px); }
.video-block__head h2 { text-wrap: balance; }

/* a soft green wash so the block reads as its own territory */
.video-block::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14%;
  width: min(1240px, 102%);
  height: 620px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(48, 164, 108, .17) 0%, rgba(48, 164, 108, .05) 46%, rgba(48, 164, 108, 0) 76%);
}

.video-block > .container { position: relative; z-index: 1; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #141417;
  border: 1px solid var(--line);
  transition: border-color .28s ease, box-shadow .28s ease;
}

/* the green edge that draws itself along the top on hover */
.video-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  z-index: 2;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.32, .66, .3, 1);
}

.video-card:hover,
.video-card:focus-within {
  border-color: #34343B;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(48, 164, 108, .16);
}

.video-card:hover::before,
.video-card:focus-within::before { transform: scaleX(1); }

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

.video-card__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.video-card__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 11, 12, .30) 0%, rgba(11, 11, 12, 0) 32%);
  transition: opacity .3s ease;
}

.video-card__frame:hover .video-card__shade,
.video-card__frame:focus-visible .video-card__shade { opacity: .6; }

.video-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(12px, 1.1vw, 16px) clamp(14px, 1.2vw, 18px);
}

.video-card__index {
  color: var(--green);
  font: 800 13px/1 var(--font-body);
  letter-spacing: .14em;
}

.video-card__time {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--green-dim);
  color: #71D69E;
  font: 700 12px/1 var(--font-body);
  letter-spacing: .04em;
  white-space: nowrap;
}

.video-card__play {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid rgba(242, 242, 239, .3);
  background: rgba(242, 242, 239, .04);
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.video-card__play svg { width: 13px; height: 13px; margin-left: 2px; fill: var(--text); }

.video-card:hover .video-card__play,
.video-card:focus-within .video-card__play {
  border-color: var(--green);
  background: rgba(48, 164, 108, .16);
}

.video-card:hover .video-card__play svg,
.video-card:focus-within .video-card__play svg { fill: #7EE2A8; }

/* the cover spells the title out already, so this stays for screen readers */
.video-card__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.video-card__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
}

@media (max-width: 860px) {
  .video-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .video-card,
  .video-card::before,
  .video-card__play,
  .video-card__shade { transition: none; }
}

/* 9. Reviews: the submission form */

.review-form-block {
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 3.6vw, 46px);
}

.review-form__title {
  margin: 0 0 8px;
  font: 800 clamp(19px, 2.2vw, 26px)/1.2 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.review-form__lead {
  margin: 0 0 24px;
  max-width: 620px;
  color: var(--text-dim);
  font: 500 16px/1.55 var(--font-body);
}

.review-form { display: grid; gap: 18px; max-width: 720px; color-scheme: dark; }
.review-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

.review-field { display: grid; gap: 8px; }

.review-field > span,
.review-stars > legend {
  padding: 0;
  color: var(--text-dim);
  font: 700 12px/1.4 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.review-field input[type="text"],
.review-field textarea {
  width: 100%;
  padding: 13px 15px;
  color: var(--text);
  background: #101013;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 500 16px/1.5 var(--font-body);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.review-field textarea { min-height: 132px; resize: vertical; }
.review-field input[type="text"]::placeholder,
.review-field textarea::placeholder { color: #6C6C68; }

.review-field input[type="text"]:focus,
.review-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}

.review-stars { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.review-stars__row { display: flex; gap: 6px; }

.review-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.review-stars label {
  cursor: pointer;
  color: #3E3E3C;
  font-size: 26px;
  line-height: 1;
  transition: color .15s ease;
}

.review-stars label.is-on { color: #71D69E; }
.review-stars input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.review-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-dim);
  font: 500 14px/1.5 var(--font-body);
}

.review-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--green); }
.review-consent a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(242, 242, 239, .32); text-underline-offset: 3px; }
.review-consent a:hover { text-decoration-color: currentColor; }

/* Two consents sit next to each other and must read as one block, so they get
   10px between them instead of the form's 18px. */
.review-consents { display: grid; gap: 10px; }

.review-submit {
  justify-self: start;
  min-height: 54px;
  padding: 0 30px;
  color: #04150C;
  background: linear-gradient(180deg, #3CB37D, #2E9563);
  border: 1px solid rgba(120, 232, 176, .55);
  border-radius: 4px;
  font: 800 15px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}

.review-submit:hover { filter: brightness(1.08); }
.review-submit:active { transform: translateY(1px); }
.review-submit:disabled { opacity: .55; cursor: default; filter: none; }
.review-submit:focus-visible { outline: 2px solid #7EE2A8; outline-offset: 3px; }

.review-form__status { margin: 0; min-height: 22px; color: var(--text-dim); font: 500 15px/1.5 var(--font-body); }
.review-form__status.is-ok { color: #71D69E; }
.review-form__status.is-error { color: #E57575; }

/* bots fill every field they find, people never see this one */
.review-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Фото к отзыву. Поле необязательное, поэтому выглядит как приглашение, а не
   как ещё одна обязательная строка: пунктирная рамка, плюс и подпись. Родной
   input спрятан, но остаётся в потоке ввода: подпись label открывает выбор
   файла, и с клавиатуры поле тоже работает. */
.review-photo { position: relative; display: grid; gap: 12px; }

.review-photo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.review-photo__drop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px dashed #33333A;
  border-radius: 4px;
  background: #101012;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.review-photo__drop:hover,
.review-photo__input:focus-visible + .review-photo__drop {
  border-color: rgba(48, 164, 108, .55);
  background: rgba(48, 164, 108, .05);
}

.review-photo__input:focus-visible + .review-photo__drop .review-photo__plus { outline: 2px solid var(--green); outline-offset: 2px; }

.review-photo__drop[hidden] { display: none; }

.review-photo__plus {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: #71D69E;
  font: 700 20px/1 var(--font-body);
}

.review-photo__text { display: grid; gap: 3px; min-width: 0; }
.review-photo__title { color: var(--text); font: 700 15px/1.3 var(--font-body); }
.review-photo__hint { color: #6C6C68; font: 500 12px/1.45 var(--font-body); }

.review-photo__preview {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #101012;
}

.review-photo__preview[hidden] { display: none; }

.review-photo__image {
  flex: 0 0 auto;
  width: 96px;
  height: 120px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: #0B0B0C;
}

.review-photo__meta {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-dim);
  font: 500 13px/1.45 var(--font-body);
}

.review-photo__name { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }

.review-photo__remove {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #E57575;
  font: 700 13px/1.4 var(--font-body);
  text-decoration: underline;
  text-decoration-color: rgba(229, 117, 117, .45);
  text-underline-offset: 3px;
  cursor: pointer;
}

.review-photo__remove:hover { text-decoration-color: currentColor; }

.review-photo__remove:focus-visible { outline: 2px solid #E57575; outline-offset: 3px; }

/* Пока фото уменьшается в браузере, отправлять рано. */
.review-photo.is-busy .review-photo__hint::after { content: " Готовим фото…"; color: var(--text-dim); }

@media (max-width: 600px) {
  .review-form__row { grid-template-columns: minmax(0, 1fr); }
  .review-submit { justify-self: stretch; }
  .review-photo__drop { padding: 16px; gap: 12px; }
  .review-photo__image { width: 80px; height: 100px; }
  .review-photo__preview { gap: 12px; padding: 12px; }
}

/* 10. Approved reviews, and the way to the full list.
   A review arrives where the curated testimonials already live, so it borrows
   that card rather than inventing a second one: the portrait slot holds the
   first letter of the name, the quote sits where the quote always sits, and
   "Читать полностью" opens the same dialog. The block shows the newest three
   and ends with the "Ещё отзывы" cell, so it never grows without bound. */

.voice-card--live .voice-card__person { margin-bottom: 14px; }

.voice-card__avatar {
  display: grid;
  flex: 0 0 76px;
  width: 76px;
  height: 95px;
  place-items: center;
  border: 1px solid var(--line);
  background: #0F0F11;
  color: #71D69E;
  font: 900 26px/1 var(--font-display);
  text-transform: uppercase;
  user-select: none;
}

/* Фото вместо буквы в том же слоте: те же 76×95, обрезка уже сделана на
   сервере, поэтому картинка приходит ровно в пропорции карточки. */
.voice-card__photo {
  flex: 0 0 76px;
  width: 76px;
  height: 95px;
  border: 1px solid var(--line);
  background: #0F0F11;
  object-fit: cover;
}

.voice-card__stars {
  margin: 0 0 12px;
  color: #71D69E;
  font: 500 15px/1 var(--font-body);
  letter-spacing: 3px;
}

.voice-dialog__stars {
  margin: 0 0 14px;
  color: #71D69E;
  font: 500 15px/1 var(--font-body);
  letter-spacing: 3px;
}

.voice-dialog__scroll .voice-card__person { margin: 0 44px 24px 0; }

.voice-dialog__scroll .voice-card__person .voice-card__avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 80px;
  font-size: 22px;
}

.voice-dialog__scroll .voice-card__person .voice-card__photo {
  flex: 0 0 64px;
  width: 64px;
  height: 80px;
}

.voice-card--more__count { color: var(--text-dim); }

/* An invitation to write, right under the Telegram line. The channel is a way
   out of the site, this is the action that keeps the visitor here. */
.reviews__invite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 24px 0 0;
  color: var(--text-dim);
  font: 500 16px/1.55 var(--font-body);
}

.reviews__invite-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font: 800 15px/1.3 var(--font-body);
  text-decoration: none;
}

.reviews__invite-link:hover { color: #4FD08C; }
.reviews__invite-arrow { transition: transform .2s ease; }
.reviews__invite-link:hover .reviews__invite-arrow { transform: translateX(3px); }

/* The cards keep their own bottom rhythm, the button sits 20px under them and
   then takes over the spacing below, so a hidden button changes nothing. */
.reviews-more {
  margin: calc(20px - clamp(34px, 4vw, 54px)) 0 clamp(34px, 4vw, 54px);
}

.reviews-more[hidden] { display: none; }

.reviews-more__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  border: 1px solid #2E2E35;
  border-radius: 4px;
  background: #101012;
  color: var(--text);
  font: 700 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}

.reviews-more__link:hover,
.reviews-more__link:focus-visible {
  border-color: rgba(48, 164, 108, .55);
  background: rgba(48, 164, 108, .05);
  color: #71D69E;
}

.reviews-more__arrow { transition: transform .22s ease; }
.reviews-more__link:hover .reviews-more__arrow { transform: translateX(3px); }

/* The full list lives on its own page, so it may run as long as it likes.
   There the cards stack instead of scrolling sideways, which is what the
   voice row does on a phone. */
.reviews-page {
  padding-block: calc(var(--header-h) + clamp(40px, 5vw, 76px)) clamp(72px, 9vw, 118px);
}

.reviews-page__head { margin-bottom: clamp(34px, 4vw, 46px); }

/* Cards in one row share the height of the tallest one. Their bottom borders and
   corner marks then line up, so the list reads as a grid instead of a pile. A
   short review simply keeps the room its neighbour needed. */
.reviews-page .voice-cards { align-items: stretch; }

@media (max-width: 1100px) {
  .reviews-page .voice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The same width where the landing turns the voices into a swipeable ribbon:
   the full list must go back to a grid there, not inherit the ribbon. */
@media (max-width: 768px) {
  .reviews-page .voice-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .reviews-page .voice-card { flex: 0 0 auto; }
}

.reviews-page__title {
  margin: 0 0 18px;
  font: 800 clamp(1.9rem, 3.9vw, 3.3rem)/1.07 var(--font-body);
  letter-spacing: -.04em;
}

.reviews-page__lead {
  margin: 0;
  max-width: 720px;
  color: var(--text-dim);
  font: 500 17px/1.6 var(--font-body);
}

.reviews-page__back {
  margin-left: auto;
  color: var(--text-dim);
  font: 700 14px/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}

.reviews-page__back:hover { color: var(--text); }

.reviews-page__empty {
  max-width: 640px;
  margin: 0 0 8px;
  color: var(--text-dim);
  font: 500 17px/1.6 var(--font-body);
}

.reviews-page__empty[hidden] { display: none; }

.reviews-page__end {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font: 500 17px/1.5 var(--font-body);
}

.reviews-page__phone {
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
}

.reviews-page__phone:hover { text-decoration: underline; }

/* Legal page. Long text needs a shorter measure than the reviews grid, otherwise
   a paragraph on a wide window turns into one very long line. */
.policy { max-width: 760px; }

.policy h2 {
  margin: clamp(34px, 4vw, 46px) 0 14px;
  font: 800 clamp(1.05rem, 1.7vw, 1.32rem)/1.25 var(--font-body);
  letter-spacing: -.02em;
}

.policy h2:first-child { margin-top: 0; }

.policy p,
.policy ul {
  margin: 0 0 14px;
  color: var(--text-dim);
  font: 500 16px/1.68 var(--font-body);
}

.policy ul { padding-left: 22px; }

.policy li { margin-bottom: 6px; }

.policy a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(242, 242, 239, .32);
  text-underline-offset: 3px;
}

.policy a:hover { text-decoration-color: currentColor; }

@media (max-width: 600px) {
  .reviews-more__link { width: 100%; justify-content: center; }
  .reviews-page__back { font-size: 13px; }
}