/* ============================================================
   STYLES-PRO.CSS — additive layer on top of styles.css.
   Only contains rules for the new "pro" sections added in
   index-pro.html: stats strip, fit/not-fit, pricing, quiz,
   blog, FAQ, lead magnet, floating chat dock. Existing
   sections are styled by styles.css.
   ============================================================ */

/* the About media is a 16:9 video card now — give its column enough width
   that the landscape frame reads properly (base styles.css clamps it at
   240px, which was sized for the old round bubble). The intro text next to it
   was removed, so this is a single centred column instead of two. */
.section.about .about-grid {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
  align-items: center;
}
/* phones: stack the About block — video bubble on top, text full-width below.
   (higher specificity than the base .about-grid mobile rule, so it wins) */
@media (max-width: 760px) {
  .section.about .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    /* The video inside goes full-bleed (100vw + negative margins), so it
       contributes ~0 to intrinsic sizing. With the inherited
       `justify-content: center` the single track collapsed to zero width and
       dragged the whole block off to the left — stretch keeps the column
       equal to the section, and the bleed then measures from the right place. */
    justify-content: stretch;
    justify-items: stretch;
    width: 100%;
  }
  /* centred, not top-anchored: with the certificates gone the section had
     nothing under the text, so flex-start left a screen-high gap below it */
  .section.about { justify-content: center; min-height: auto; }
  .section.about .about-text { text-align: center; width: 100%; }
  .section.about .about-text p { margin-bottom: 8px; }
  .section.about .about-text .btn { display: inline-block; }
  /* «Обо мне» video edge-to-edge on phones. Done by dropping the section's
     side padding instead of the old 100vw + negative-margin trick: that trick
     gave the grid column nothing to measure, the column collapsed to zero and
     took the whole block off-centre. Text elements get their own padding. */
  .section.about { padding-left: 0; padding-right: 0; }
  .section.about .section-head { padding-inline: 20px; }
  .section.about .about-tg { width: 100%; margin: 0; }
  .section.about .about-tg-bubble {
    width: 100%; max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);   /* drop the inset rim */
  }
  /* keep the buttons under it at a comfortable width, not full-bleed */
  .section.about .about-tg-actions { width: 100%; margin: 0 auto; padding-inline: 16px; }
}

/* Centre puzzle piece — circular video clip (mirrors the About TG bubble).
   The <video> fills the round piece behind the title text; a thin rim +
   rotating "блик" sliver match the About bubble's style. */
.piece-model {
  /* the piece itself is already a circle (border-radius:50%) and clips
     content via overflow; force it so the video doesn't bleed */
  overflow: hidden !important;
  cursor: pointer;
}
.piece-model-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;          /* clicks still hit the parent <a> */
  border-radius: 50%;            /* keep it circular when scaled */
  /* center.mp4: лёгкий сдвиг вправо (~0.5%) и еле заметное увеличение */
  transform: scale(1.05) translateX(0%) translateY(0%);
  transform-origin: center;
}
.piece-model-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  pointer-events: none;
  z-index: 3;                    /* over the video, under the title */
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 260deg,
      rgba(255, 255, 255, 0.95) 295deg,
      rgba(255, 255, 255, 0.45) 312deg,
      transparent 340deg,
      transparent 360deg
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: about-tg-blik 2.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .piece-model-ring { animation: none; opacity: 0; }
}

/* Semi-transparent play CTA centered over the video — clicking it opens
   the enlarged video modal (wired in script-pro.js). */
.piece-model-cta {
  position: absolute;
  left: 50%; top: 74%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-btn);
  transition: transform 220ms ease, opacity 220ms ease;
}
/* while the piece video plays inline, fade the "нажми сюда" prompt out so it
   doesn't cover the video (clicking the piece again pauses → prompt returns) */
.piece-model.is-playing .piece-model-cta {
  opacity: 0;
  pointer-events: none;
}
.piece-model-cta-icon {
  width: clamp(32px, 3.4vw, 42px);
  height: clamp(32px, 3.4vw, 42px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.95);
  transition: background 220ms ease, transform 220ms ease;
}
.piece-model-cta-icon svg {
  width: 46%;
  height: 46%;
  margin-left: 8%;             /* visually center the play triangle */
}
.piece-model-cta-text {
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.piece-model-cta:hover .piece-model-cta-icon,
.piece-model-cta:focus-visible .piece-model-cta-icon {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.06);
}
.piece-model-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 6px;
  border-radius: 12px;
}

/* Centre piece — split "Где болит?" into top + bottom halves so the
   3D figure floats between two readable text rows. .word-top anchors
   to the upper edge of the piece, .word-bot to the lower edge; the
   canvas (z-index 2) sits in front but the words are at the corners
   where the figure never reaches. */
.piece-model .model-face {
  position: absolute;
  inset: 0;
  z-index: 4;                  /* on top of video + ring */
  pointer-events: none;
  padding: 0;
}
.piece-model .model-face .piece-eyebrow {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
}
.piece-model .model-face .piece-title {
  margin: 0;
  width: 100%; height: 100%;
  font-family: var(--font-btn);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  font-size: clamp(14px, 1.6vw, 22px);   /* smaller — fits the narrow gap */
}
.piece-model .model-face .piece-title .word-top,
.piece-model .model-face .piece-title .word-bot {
  position: absolute;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  /* Vertical-rl flow rotates the text so it stacks along the rim,
     hugging the circle's left / right edges without ever touching
     the 3D figure in the middle. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.piece-model .model-face .piece-title .word-top {
  /* "Где" — vertical stripe on the LEFT edge */
  top: 50%;
  left: 10px;
  transform: translateY(-50%) rotate(180deg);   /* read top-to-bottom */
}
.piece-model .model-face .piece-title .word-bot {
  /* "болит?" — vertical stripe on the RIGHT edge */
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* Workouts puzzle piece — uses the treni training photo. */
/* Workouts tile — the side-stretch shot (Photos/treni-pose.jpg). The figure
   sits dead centre of the frame, so the tile just centres on it. */
.piece-workouts::before {
  background-image: url('Photos/treni-pose.jpg') !important;
  background-size: cover !important;
  background-position: 50% 58% !important;
  transform: scale(1.2) !important;
}

/* Site ambient background — swap the Unsplash photo for the personal
   vertical collage. background-position-y and the scale are driven by
   the page scroll position via CSS custom properties set in script-pro.js
   (see the "ambient parallax" block) — top of page shows the first pose,
   bottom of page shows the third. Filter is brightened up vs the base
   styles.css so the photo reads through more visibly. */
.ambient::before {
  background-image: url('Photos/fone.png') !important;
  /* Make the image ~2.8× viewport-tall so each pose roughly occupies one
     screen worth of scroll. background-position-y is driven from 0 % at
     the top of the page to 100 % at the bottom by script-pro.js, so the
     viewport pans through pose 1 → pose 2 → pose 3 as the user scrolls. */
  background-size: auto 320% !important;
  background-position: center var(--bg-pan-y, 0%) !important;
  background-repeat: no-repeat !important;
  /* Subtle scale on top of the size — the scroll-driven 1.0 → 1.06
     gives a gentle zoom but the heavy lifting is now the bg-size pan. */
  transform: scale(var(--bg-pan-scale, 1.04)) !important;
  filter: brightness(0.42) saturate(0.85) blur(1.5px) hue-rotate(310deg) !important;
}
/* Lighten the dark chocolate overlay a touch too, otherwise it eats the
   gain from the brighter photo. */
.ambient::after {
  background:
    radial-gradient(at 12% 0%,   rgba(155, 63, 204, 0.32), transparent 48%),
    radial-gradient(at 88% 100%, rgba(255, 143, 180, 0.28), transparent 52%),
    radial-gradient(at 50% 50%,  rgba(28, 16, 10, 0.25), rgba(28, 16, 10, 0.50) 70%),
    linear-gradient(160deg, rgba(28, 16, 10, 0.22), rgba(42, 24, 16, 0.18) 55%, rgba(58, 36, 24, 0.30)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .ambient::before {
    background-position: center 50% !important;
    transform: scale(1.04) !important;
  }
}

/* Personal photo on the cases-piece — pulled tight to the top so the
   head sits high in the frame, body extending downward.
   Uses a pre-cropped copy: in the original the figure stands at ~34% of the
   frame width, so `cover` always parked her right of centre and no
   background-position could fix it (on wide tiles the image is width-limited,
   where horizontal position has no effect at all). The crop is symmetric
   around the figure, so she lands dead centre at every tile proportion. */
.piece-cases::before {
  background-image: url('Photos/Me/IMG_2022-cases.jpg') !important;
  background-size: cover !important;
  background-position: center 22% !important;
  transform: scaleX(-1) !important;
}

/* Personal photo on the about-piece — "Дело в теле-5" from Photos/Me. */
.piece-about::before {
  background-image: url('Photos/Me/obomne.PNG') !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: scale(1) !important;
}

/* Unify the blur/brightness across all four puzzle pieces so they read
   as one coherent surface — match the lighter cases-piece treatment
   (blur 1px, brightness 0.55, saturate 1.05). */
.piece-about::before,
.piece-cases::before,
.piece-workouts::before,
.piece-contact::before {
  filter: blur(1px) brightness(0.55) saturate(1.05) !important;
}
/* the obomne photo sits on a light wall, so it reads a touch brighter than
   the others — nudge it ~2% darker to match the cases-piece tone */
.piece-about::before {
  filter: blur(1px) brightness(0.54) saturate(1.05) !important;
}

/* "гайд по осанке" piece — uses the foneguide photo. */
.piece-contact::before {
  background-image: url('Photos/foneguide.jpg') !important;
  background-position: center center !important;
  transform: scale(1) !important;
}

/* ============================================
   ABOUT — video card ("обо мне" clip)
   A 16:9 rounded card that eases in when scrolled into view. Poster
   frame until the visitor starts it; clicking opens the enlarged modal.
   ============================================ */
.section.about .about-tg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.about-tg-bubble {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #1f1714, #2b1d18);
  /* thin static rim + a deep drop shadow — no warm halo, no pulse */
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s ease;
}
.about-tg.is-visible .about-tg-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.about-tg-bubble:hover {
  /* on hover the rim brightens slightly + drop shadow deepens */
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}
/* "смотреть" cue over the poster — hidden as soon as playback starts
   (the .is-playing state lives on the play chip) */
.about-tg-cue {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  pointer-events: none;                 /* clicks belong to the card */
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}
.about-tg-cue-ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.about-tg-cue-ico svg { width: 15px; height: 15px; }
.about-tg-bubble:hover .about-tg-cue { transform: translate(-50%, -50%) scale(1.04); }
/* once the clip is running the cue would only cover her face */
.about-tg-bubble:has(.about-tg-play.is-playing) .about-tg-cue { opacity: 0; }
.about-tg-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none; /* clicks go through to the bubble */
}
/* the rotating rim "блик" belonged to the round bubble — a rectangle
   can't carry it, the card gets its rim from the box-shadow above.
   The keyframes stay: the hero puzzle piece + the modal still use them. */
@keyframes about-tg-blik {
  to { transform: rotate(360deg); }
}
/* Top-row icon chips (play + sound). Share the same base look so the
   bubble feels like a single Telegram-style control surface. */
.about-tg-play,
.about-tg-sound {
  position: absolute;
  top: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.about-tg-play  { left: 14px; }
.about-tg-sound { right: 14px; }
.about-tg-play:hover,
.about-tg-sound:hover { background: rgba(0, 0, 0, 0.75); transform: scale(1.05); }
.about-tg-play .ico,
.about-tg-sound .ico { width: 18px; height: 18px; }
/* swap play/pause and muted/sound based on state class on the button */
.about-tg-play  .ico-pause,
.about-tg-play.is-playing .ico-play   { display: none; }
.about-tg-play.is-playing .ico-pause  { display: block; }
.about-tg-sound .ico-sound,
.about-tg-sound.is-on .ico-muted      { display: none; }
.about-tg-sound.is-on .ico-sound      { display: block; }
.about-tg-time {
  position: absolute;
  bottom: 14px; right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
/* only the entrance animation lives here — the two-column layout is set
   below. (This block used to force flex-column + max-width: 560px, which
   kept the cards stacked and the row narrow.) */
.about-tg-actions {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease .3s, transform .5s cubic-bezier(.22, 1, .36, 1) .3s;
}
.about-tg.is-visible .about-tg-actions {
  opacity: 1; transform: translateY(0);
}
/* ── the two CTAs under the clip ──────────────────────────────────────
   Apple-glass pills: a frosted surface, a light rim, a gloss over the top
   half and a sheen that crosses the primary once in a while. The label is
   flanked by an arrow that steps forward on hover. */
.about-tg-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 56px;
  padding: 14px 26px;
  text-transform: lowercase;
  /* long labels shouldn't be forced onto one line on narrow screens */
  white-space: normal;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  transition:
    transform .25s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s ease,
    background .25s ease;
}
/* gloss: light catching the curved top of the glass */
.about-tg-cta::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0.00) 58%,
    rgba(255, 255, 255, 0.07) 100%);
  pointer-events: none;
  z-index: -1;
}
/* arrow — sits tight to the label, steps forward on hover */
.about-tg-cta::after {
  content: '→';
  display: inline-block;
  margin-left: 10px;
  font-size: 1.05em;
  vertical-align: -1px;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.about-tg-cta:hover { transform: translateY(-2px); }
.about-tg-cta:hover::after { transform: translateX(5px); }

/* primary — tinted glass, not a flat gradient slab. The first background
   layer is a light streak that sweeps across every few seconds. */
.about-tg-cta.btn-primary {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%)
      220% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, rgba(255, 143, 180, 0.82) 0%,
                            rgba(199, 155, 224, 0.62) 52%,
                            rgba(198, 70, 118, 0.72) 100%) !important;
  animation: about-cta-shine 6s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 14px 34px rgba(198, 70, 118, 0.38),
    0 2px 6px rgba(20, 12, 10, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -10px 20px rgba(120, 30, 70, 0.22) !important;
  color: #fff;
  text-shadow: 0 1px 3px rgba(90, 20, 55, 0.45);
}
.about-tg-cta.btn-primary:hover {
  box-shadow:
    0 20px 44px rgba(198, 70, 118, 0.48),
    0 2px 6px rgba(20, 12, 10, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -10px 20px rgba(120, 30, 70, 0.18) !important;
}
@keyframes about-cta-shine {
  0%, 70%   { background-position: 220% 0, 0 0; }
  96%, 100% { background-position: -120% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about-tg-cta.btn-primary { animation: none; }
  .about-tg-cta, .about-tg-cta::after { transition: none; }
}

/* secondary — clear glass: the photo behind shows through, only the rim
   and the gloss say there's a surface */
.about-tg-cta.btn-ghost {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 10px 26px rgba(20, 12, 10, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--text-1);
}
.about-tg-cta.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 16px 34px rgba(20, 12, 10, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .about-tg-bubble { transition: none; }
}

/* ============================================
   ABOUT ACTIONS — the two offer cards, built to the reference: ring-framed
   icon, pink eyebrow, the offer name in a light sentence-case face, a
   hairline rule, then a two-line description with the arrow beside it and a
   soft pink glow bleeding along the bottom edge.
   ============================================ */
.about-tg-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* side by side */
  /* four shared rows — icon · eyebrow · name · footer. The cards adopt them
     with subgrid, so the hairline above the description sits at exactly the
     same height in both, whatever the length of the name or the text. */
  grid-template-rows: auto auto 1fr auto;
  align-items: stretch;
  gap: 18px;
  padding: 18px 0 4px;
  width: 100%;
}
/* rotating angle that drives the flowing border + bloom (registered so it
   can be animated smoothly). */
@property --lb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.about-cta {
  position: relative;
  isolation: isolate;
  overflow: visible;               /* let the pink bloom spill outside */
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 14px;
  align-content: start;
  --cta-pad-x: 26px;               /* horizontal padding, negated by the full-width photo */
  --cta-pad-t: 26px;               /* top padding, negated so the photo reaches the top */
  --cta-radius: 20px;
  --cta-ring: 1.6px;               /* толщина светящегося ободка (::before) */
  padding: var(--cta-pad-t) var(--cta-pad-x) 22px;
  border-radius: var(--cta-radius);
  text-decoration: none;
  /* ---- LIQUID BUTTON ----
     dark glass interior with a pink caustic rising from below; the flowing
     pink gradient border lives on ::before (a masked, rotating conic ring)
     and the outer bloom on ::after. Colours are the site pinks. */
  background:
    radial-gradient(125% 150% at 50% 120%, rgba(var(--accent-rgb, 255,143,180),0.28), transparent 56%),
    radial-gradient(120% 90% at 50% -10%, rgba(var(--accent-rgb, 255,143,180),0.10), transparent 60%),
    linear-gradient(180deg, rgba(26,14,19,0.86), rgba(15,9,12,0.90));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 34px rgba(0,0,0,0.40),
    0 0 30px rgba(var(--accent-rgb, 255,143,180),0.14);   /* soft ambient pink halo */
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
/* flowing pink gradient BORDER — a conic gradient masked to a thin ring so a
   bright pink segment travels continuously around the perimeter */
.about-cta::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.6px;                  /* ring thickness */
  pointer-events: none;
  z-index: 3;                      /* поверх фото, которое доходит до края */
  background: conic-gradient(from var(--lb-angle),
    rgba(var(--accent-rgb, 255,143,180),0.28) 0deg,
    rgba(var(--accent-rgb, 255,143,180),0.28) 42deg,
    #FFC2D8 74deg,                 /* bright travelling hot-spot */
    #FF8FB4 90deg,
    #FFC2D8 106deg,
    rgba(var(--accent-rgb, 255,143,180),0.28) 150deg,
    rgba(var(--accent-rgb, 255,143,180),0.28) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: lb-flow 4.5s linear infinite;
}
/* outer bloom — the same rotating segment, blurred, sitting behind the button */
.about-cta::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from var(--lb-angle),
    transparent 0deg, transparent 46deg,
    rgba(var(--accent-rgb, 255,143,180),0.85) 90deg,
    transparent 140deg, transparent 360deg);
  filter: blur(18px);
  opacity: 0.75;
  animation: lb-flow 4.5s linear infinite;
}
@keyframes lb-flow { to { --lb-angle: 360deg; } }
/* keep the label/icon above the border + bloom */
.about-cta > * { position: relative; z-index: 2; }
/* динамика при наведении — lift, brighter bloom, faster flow */
.about-cta:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 20px 46px rgba(0,0,0,0.46),
    0 0 46px rgba(var(--accent-rgb, 255,143,180),0.30);
}
.about-cta:hover::before { animation-duration: 1.8s; }
.about-cta:hover::after  { animation-duration: 1.8s; opacity: 1; filter: blur(22px); }

/* Simple action buttons — «получить гайд» and «все тренировки».
   The user wants every button EXCEPT «Консультация» and «Диагностика»
   to have square corners and one shared size. These two carry the
   .about-cta--primary modifier, so we key off it. Specificity (0,2,0)
   beats the .glead-cta / .wo-all-cta width rules and the mobile
   .about-cta overrides regardless of source order. */
.about-cta.about-cta--primary {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;              /* rounded like the reference */
  width: 100%;
  max-width: 360px;                 /* identical size for both */
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 24px;
}
.about-cta.about-cta--primary .about-cta-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
/* Стрелка выведена из потока и приколота к правому краю: пока она стояла
   в одной строке с надписью, по центру кнопки оказывалась пара
   «надпись + стрелка», а сама надпись уезжала влево на её ширину.
   .about-cta > * задаёт position: relative, поэтому у primary-кнопки блок с
   текстом делаем static — иначе стрелка отсчитывала бы правый край от него
   и наезжала на надпись. */
.about-cta.about-cta--primary .about-cta-meta { position: static; }
/* Заглавные Intro не имеют выносных элементов вниз, поэтому в строке они
   стоят выше её середины и надпись выглядит приподнятой. Прижимаем строку
   к букве (line-height: 1) и добавляем оптическую поправку вниз. */
.about-cta.about-cta--primary .about-cta-title {
  line-height: 1;
  position: relative;
  top: calc(0.18em + 1.5px);
}
.about-cta.about-cta--primary .about-cta-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
}
.about-cta.about-cta--primary .about-cta-arrow svg { width: 20px; height: 20px; }
/* «20+ бесплатных тренировок на YouTube» — длинная надпись: уменьшаем шрифт
   и трекинг, чтобы уместилась целиком в одну строку */
.wo-all-cta .about-cta-title {
  font-size: clamp(10.5px, 3.1vw, 13px);
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.about-cta-ico {
  width: 68px; height: 68px;
  margin-bottom: 10px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, #FF8FB4);
  border: 1px solid rgba(var(--accent-rgb, 255, 143, 180), 0.4);
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--accent-rgb, 255, 143, 180), 0.13), transparent 70%);
  transition: border-color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.about-cta-ico svg { width: 30px; height: 30px; }
/* keep the plain round icon centred in the (taller) shared row */
.about-cta-ico { align-self: center; }
/* photo variant — a real photo that spans the FULL button width, sitting at
   the icon's level, above the title (Диагностика тела). Breaks out of the
   card's side padding so it reaches edge to edge. */
.about-cta-ico.about-cta-ico--photo {
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9;                                   /* короче по высоте */
  /* фото упирается во ВНУТРЕННИЙ край ободка, а не залезает на него,
     поэтому от края кнопки отступаем ровно на толщину кольца */
  margin-inline: calc(var(--cta-ring, 1.6px) - var(--cta-pad-x, 26px));
  margin-top: calc(var(--cta-ring, 1.6px) - var(--cta-pad-t, 26px));
  margin-bottom: 4px;                                     /* «под ключ» ближе к фото */
  border-radius:
    calc(var(--cta-radius, 20px) - var(--cta-ring, 1.6px))
    calc(var(--cta-radius, 20px) - var(--cta-ring, 1.6px)) 0 0;   /* низ — прямой срез */
  overflow: hidden;
  background: none;
  /* без собственной рамки: сверху и по бокам фото упирается в контур кнопки,
     а сам контур рисует кольцо ::before поверх фото */
  border: 0;
}
.about-cta-ico--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.about-cta:hover .about-cta-ico--photo { transform: none; }
.about-cta:hover .about-cta-ico {
  border-color: rgba(var(--accent-rgb, 255, 143, 180), 0.75);
  transform: scale(1.04);
}

.about-cta-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent, #FF8FB4);
}
/* Sentence case on purpose — the display face (Intro CAPS) draws lowercase
   as capitals, so the name uses the body sans to read like the reference. */
.about-cta-title {
  font-family: var(--font-btn);
  /* «Диагностика тела» должна умещаться в строку: перенос запрещён, кегль
     тянется от ширины карточки */
  white-space: nowrap;
  font-size: clamp(14px, 2.05vw, 30px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 4px;
}

.about-cta-foot {
  align-self: end;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.about-cta-desc {
  /* это подпись, а не заголовок — остаётся на основном шрифте */
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px; font-weight: 400; line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}
.about-cta-arrow {
  display: inline-flex; flex: 0 0 auto;
  color: var(--accent, #FF8FB4);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.about-cta-arrow svg { width: 30px; height: 30px; }
.about-cta:hover .about-cta-arrow { transform: translateX(6px); }

/* «Сертификаты» — аккуратная жирная ссылка-триггер под двумя карточками;
   открывает просмотрщик сертификатов (JS ловит клик по #aboutCertsBtn) */
.about-certs-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #FF8FB4);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, gap .2s ease;
}
.about-certs-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.about-certs-link:hover { color: #fff; gap: 11px; }

/* stay side by side on phones too — just tighter */
@media (max-width: 640px) {
  .about-tg-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .about-cta { --cta-pad-x: 14px; --cta-pad-t: 16px; --cta-radius: 16px; padding: var(--cta-pad-t) var(--cta-pad-x) 14px; gap: 10px; border-radius: var(--cta-radius); }
  .about-cta-ico:not(.about-cta-ico--photo) { width: 44px; height: 44px; margin-bottom: 2px; }
  .about-cta-ico svg { width: 21px; height: 21px; }
  .about-cta-eyebrow { font-size: 9px; letter-spacing: 0.1em; }
  .about-cta-title { font-size: clamp(12px, 4.1vw, 18px); }
  .about-cta-foot { padding-top: 12px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .about-cta-desc { font-size: 11.5px; line-height: 1.35; }
  .about-cta-arrow svg { width: 24px; height: 24px; }
}
/* fallback where subgrid is unavailable: reserve three lines for the text so
   the two footers still match */
@supports not (grid-template-rows: subgrid) {
  .about-cta { display: flex; flex-direction: column; gap: 14px; }
  .about-cta-foot { margin-top: auto; }
  .about-cta-desc { min-height: calc(1.45em * 3); }
}
@media (prefers-reduced-motion: reduce) {
  .about-cta, .about-cta-ico, .about-cta-arrow { transition: none; }
  .about-cta::before, .about-cta::after { animation: none; }
}

/* ============================================
   TG video modal — enlarged view for the hero puzzle piece (hello.mov).
   The piece's <video> reparents into .tg-modal-circle on open so playback
   continues without restart. The About clip no longer uses this shell —
   it plays inline in its own card.
   ============================================ */
.tg-modal {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 4vh, 60px) 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.tg-modal.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.tg-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 12, 10, 0.65);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.tg-modal-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  transform: scale(0.7);
  opacity: 0;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.tg-modal.is-open .tg-modal-card { transform: scale(1); opacity: 1; }
.tg-modal-circle {
  position: relative;
  width: min(72vmin, 580px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #1f1714, #2b1d18);
  /* same thin rim as the small bubble, just slightly more prominent
     because the circle is much larger */
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.34);
  cursor: pointer;
}
.tg-modal-circle .about-tg-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Same rotating "блик" sliver as the small bubble — drawn here as a
   pseudo-element so we don't have to add markup to the modal. */
.tg-modal-circle::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 260deg,
      rgba(255, 255, 255, 0.95) 295deg,
      rgba(255, 255, 255, 0.45) 312deg,
      transparent 340deg,
      transparent 360deg
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: about-tg-blik 4s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .tg-modal-circle::after { animation: none; opacity: 0; }
}

/* big centred play/pause toggle layered over the modal video */
.tg-modal-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease, opacity .25s ease;
  z-index: 3;
}
.tg-modal-play:hover { background: rgba(0, 0, 0, 0.75); transform: translate(-50%, -50%) scale(1.06); }
.tg-modal-play .ico { width: 38px; height: 38px; }
.tg-modal-play .ico-pause,
.tg-modal-play.is-playing .ico-play  { display: none; }
.tg-modal-play.is-playing .ico-pause { display: block; }
.tg-modal-play.is-playing { opacity: 0; }
.tg-modal-circle:hover ~ .tg-modal-play.is-playing,
.tg-modal-play:hover { opacity: 1; }

/* bottom strip with sound toggle + duration */
.tg-modal-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tg-modal-sound {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.tg-modal-sound:hover { background: rgba(255, 255, 255, 0.1); }
.tg-modal-sound .ico { width: 18px; height: 18px; }
.tg-modal-sound .ico-sound,
.tg-modal-sound.is-on .ico-muted      { display: none; }
.tg-modal-sound.is-on .ico-sound      { display: block; }
.tg-modal-time {
  color: white;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.tg-modal-close {
  position: absolute;
  top: clamp(10px, 2vh, 20px);
  right: clamp(10px, 2vw, 20px);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  z-index: 4;
}
.tg-modal-close:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.05); }
body.tg-modal-open { overflow: hidden; }

@media (max-width: 540px) {
  .tg-modal-circle { width: min(90vmin, 380px); }
  .tg-modal-play   { width: 70px; height: 70px; }
  .tg-modal-play .ico { width: 30px; height: 30px; }
}

/* small utility, used by the lead-magnet form to hide visually but keep
   the label available to screen readers */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================
   STATS STRIP — inline ticker line, no card wrapper
   ============================================ */
.pro-stats {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(10px, 1.4vw, 18px) clamp(20px, 5vw, 60px);
}
.pro-stats-line {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}
.pro-stats-cell {
  display: inline-flex; align-items: baseline; gap: 7px;
}
.pro-stats-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  background: var(--juice-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.pro-stats-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-transform: lowercase;
}
.pro-stats-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.55;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .pro-stats-dot { display: none; }
  .pro-stats-line { gap: 12px 18px; }
}

/* ============================================
   FIT / NOT-FIT
   ============================================ */
.section.pro-fit { --accent: var(--olive, #87985a); --accent-rgb: 135, 152, 90; }
.pro-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.4vw, 24px);
  max-width: 960px; margin: 0 auto;
}
.pro-fit-card {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 22px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
}
.pro-fit-card header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
.pro-fit-card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; margin: 0;
}
.pro-fit-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px;
}
.pro-fit-yes .pro-fit-icon { background: rgba(135, 152, 90, 0.2); color: var(--olive, #87985a); }
.pro-fit-no  .pro-fit-icon { background: rgba(196, 90, 58, 0.18); color: var(--clay, #c45a3a); }
.pro-fit-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pro-fit-card li {
  position: relative; padding-left: 22px;
  font-size: 13px; line-height: 1.45;
  color: var(--text-1);
}
.pro-fit-card li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
}
.pro-fit-yes li::before { background: var(--olive, #87985a); }
.pro-fit-no  li::before { background: var(--clay, #c45a3a); opacity: 0.7; }
@media (max-width: 720px) {
  .pro-fit-grid { grid-template-columns: 1fr; }
}

/* ============================================
   PRICING
   ============================================ */
.section.pro-pricing { --accent: var(--honey, #d49a3a); --accent-rgb: 212, 154, 58; }
.pro-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  max-width: 1080px; margin: 0 auto;
  align-items: stretch;
}
.pro-price-card {
  position: relative;
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 22px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease;
}
.pro-price-card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-strong); }
.pro-price-card.is-highlight {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 16px 36px rgba(var(--accent-rgb), 0.18), var(--glass-shadow);
}
.pro-price-tag {
  align-self: flex-start;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pro-price-card.is-highlight .pro-price-tag {
  background: var(--juice-grad);
  color: white;
}
.pro-price-card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; margin: 0;
}
.pro-price-amount {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: -4px;
}
.pro-price-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: 32px; line-height: 1;
  color: var(--text-1);
}
.pro-price-cur {
  font-size: 13px; color: var(--text-2);
  letter-spacing: 0.04em;
}
.pro-price-sub {
  font-size: 12px; color: var(--text-3);
  margin: 0; line-height: 1.4;
}
.pro-price-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  flex-grow: 1;
}
.pro-price-list li {
  position: relative; padding-left: 18px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--text-1);
}
.pro-price-list li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}
.pro-price-card .btn { margin-top: 6px; align-self: stretch; text-align: center; }
.pro-price-foot {
  text-align: center;
  margin: 18px auto 0; max-width: 600px;
  font-size: 12px; color: var(--text-3);
  font-style: italic;
}
@media (max-width: 900px) {
  .pro-price-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* ============================================
   QUIZ
   ============================================ */
.section.pro-quiz { --accent: var(--berry, #c64676); --accent-rgb: 198, 70, 118; }
.pro-quiz-wrap {
  max-width: 640px; margin: 0 auto;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; gap: 18px;
}
.pro-quiz-progress {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 4px;
}
.pro-quiz-step {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-3);
  transition: all .25s ease;
}
.pro-quiz-step.is-active {
  background: var(--juice-grad); color: white; border-color: transparent;
  transform: scale(1.1);
}
.pro-quiz-step.is-done {
  background: rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.pro-quiz-card {
  display: none;
  flex-direction: column; gap: 14px;
  animation: pro-quiz-fade .35s ease;
}
.pro-quiz-card.is-active { display: flex; }
@keyframes pro-quiz-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pro-quiz-card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  margin: 0; text-align: center;
}
.pro-quiz-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.pro-quiz-options button {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
}
.pro-quiz-options button:hover,
.pro-quiz-options button:focus-visible {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
  outline: none;
}
@media (max-width: 540px) {
  .pro-quiz-options { grid-template-columns: 1fr; }
}
.pro-quiz-result-eyebrow {
  display: block;
  text-align: center;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.pro-quiz-result-desc {
  font-size: 13px; line-height: 1.5;
  color: var(--text-2);
  margin: 0; text-align: center;
}
.pro-quiz-result-bullets {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pro-quiz-result-bullets li {
  position: relative; padding-left: 18px;
  font-size: 12.5px; line-height: 1.45;
}
.pro-quiz-result-bullets li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.pro-quiz-result-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 10px;
}

/* ============================================
   WORKOUTS — zone chips + responsive grid
   Overrides .section.workouts behaviour from styles.css so the pro
   page can show a single zone-filtered grid instead of free/locked tabs.
   ============================================ */
.section.workouts.pro-wo { --accent: var(--berry, #c64676); --accent-rgb: 198, 70, 118; }
.pro-wo-zones {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 0 auto 22px;
  max-width: 980px;
  padding: 0 clamp(20px, 5vw, 60px);
}
.pro-wo-chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-1);
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, transform .15s ease, color .2s ease, border-color .2s ease;
}
.pro-wo-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
}
.pro-wo-chip.is-active {
  background: var(--juice-grad);
  color: white;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.32);
}
/* horizontal carousel — same pattern as .cases-track in styles.css:
   full-bleed, no scrollbar, infinite-wrap behaviour driven by JS */
/* Single featured workout ("холка") + a full-width "все тренировки" button
   below it, centred in a column the width of the video. */
.pro-wo-single {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pro-wo-single .video-card { width: 100%; }
/* the CTA reuses the consultation button look (.about-cta); just space it */
.wo-all-cta { margin-top: 2px; }
/* same overlay set as the «Обо мне» clip: corner play + sound circles and a
   centre "смотреть" pill. Decorative — the whole card is the click target. */
.pro-wo-single .video-thumb { position: relative; }
.wo-ovl {
  position: absolute; top: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.wo-ovl svg { width: 17px; height: 17px; }
.wo-ovl-play  { left: 14px; }
.wo-ovl-sound { right: 14px; }
.wo-cue {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; letter-spacing: 0.06em; text-transform: lowercase;
  pointer-events: none; z-index: 2;
  transition: transform .25s ease;
}
.pro-wo-single .video-card:hover .wo-cue { transform: translate(-50%, -50%) scale(1.04); }
.wo-cue-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.wo-cue-ico svg { width: 14px; height: 14px; }
/* the «новичок» badge overlaps the corner play icon — tuck it under the cue */
.pro-wo-single .badge-level { top: auto; bottom: 14px; left: 14px; }

/* phones: the featured workout video goes edge-to-edge with square corners —
   same treatment as the «Обо мне» clip. The button below keeps its width. */
@media (max-width: 760px) {
  .pro-wo-single { max-width: none; }
  .pro-wo-single .video-card {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    border-left: none; border-right: none;
  }
  .pro-wo-single .wo-all-cta {
    width: min(100%, 460px);
    margin-left: auto; margin-right: auto;
  }
}
.pro-wo-card {
  /* override the styles.css transform-on-hover so the carousel doesn't
     wobble when the auto-drift passes a hovered card */
  cursor: pointer;
}
.pro-wo-saved {
  max-width: 520px; margin: 22px auto 0;
  padding: 10px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-2);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 100, 140, 0.12), rgba(196, 90, 58, 0.10));
  border: 1px solid rgba(255, 100, 140, 0.28);
}
.pro-wo-saved b { color: var(--text-1); }
.pro-wo-saved a {
  color: #ff7aa1; font-weight: 600; text-decoration: none;
}
.pro-wo-saved a:hover { text-decoration: underline; }
@media (max-width: 540px) {
  .pro-wo-zones { gap: 6px; }
  .pro-wo-chip { padding: 6px 12px; font-size: 11.5px; }
}

/* ============================================
   BLOG / ARTICLES PREVIEW
   ============================================ */
.section.pro-blog { --accent: var(--rust, #b8472d); --accent-rgb: 184, 71, 45; }
.pro-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  max-width: 1080px; margin: 0 auto;
}
.pro-blog-card {
  border-radius: 20px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 0 18px 0;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.pro-blog-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-strong); }
.pro-blog-thumb {
  aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  position: relative;
}
.pro-blog-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.35));
}
.pro-blog-tag {
  display: inline-flex; align-self: flex-start;
  margin: 14px 14px 0;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pro-blog-card h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; line-height: 1.25;
  margin: 10px 14px 4px;
}
.pro-blog-card p {
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-2);
  margin: 0 14px;
  flex-grow: 1;
}
.pro-blog-meta {
  margin: 12px 14px 0;
  font-size: 11px; color: var(--text-3); letter-spacing: 0.04em;
}
@media (max-width: 880px) {
  .pro-blog-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
/* ============================================
   LEAD MAGNET
   ============================================ */
.section.pro-lead {
  --accent: var(--clay, #c45a3a); --accent-rgb: 196, 90, 58;
  padding-top: clamp(12px, 1.6vw, 22px);
  padding-bottom: clamp(12px, 1.6vw, 22px);
}
/* no panel here — the cover and the text sit straight on the page background,
   the same way the About block does */
.pro-lead-card {
  max-width: 1060px; margin: 0 auto;
  padding: clamp(24px, 3.2vw, 44px) clamp(6px, 2vw, 24px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text expo"
    "cta  expo";
  column-gap: clamp(28px, 5vw, 72px);   /* lots of air between text & pages */
  row-gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.pro-lead-text { grid-area: text; }
.pro-lead-card .lead-cta { grid-area: cta; align-self: start; max-width: 360px; }

/* fanned exposition — two real guide pages overlapping like scattered cards */
.pro-lead-expo {
  grid-area: expo;
  align-self: center;
  position: relative;
  aspect-ratio: 1 / 1;
}
.pro-lead-page {
  position: absolute; top: 50%; left: 50%;
  width: 52%;
  display: block; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.pro-lead-page img { width: 100%; display: block; }
.pro-lead-page--back  { transform: translate(-80%, -52%) rotate(-9deg); z-index: 1; }
.pro-lead-page--front { transform: translate(-20%, -44%) rotate(7deg);  z-index: 2; }
.pro-lead-expo:hover .pro-lead-page--back  { transform: translate(-90%, -52%) rotate(-12deg); }
.pro-lead-expo:hover .pro-lead-page--front { transform: translate(-10%, -44%) rotate(10deg); }
.pro-lead-text .eyebrow {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
  padding: 3px 10px; border-radius: 999px;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 10px;
}
.pro-lead-text h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--text-1);
}
.pro-lead-text p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 12px;
}
.pro-lead-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pro-lead-bullets li {
  position: relative; padding-left: 20px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--text-1);
}
.pro-lead-bullets li::before {
  content: '↳'; position: absolute; left: 0; top: 0;
  color: var(--accent);
}
.pro-lead-form {
  display: flex; flex-direction: column; gap: 10px;
}
.pro-lead-form input {
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  font-family: inherit; font-size: 13px;
  color: var(--text-1);
}
.pro-lead-form input::placeholder { color: var(--text-3); }
.pro-lead-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
}
.pro-lead-form .btn { font-size: 13px; padding: 11px 18px; }
.pro-lead-note  { font-size: 10px; color: var(--text-3); margin: 0; text-align: center; }
.pro-lead-thanks {
  font-size: 12.5px;
  color: var(--olive, #87985a);
  margin: 0;
  font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.pro-lead-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.pro-lead-link:hover { color: var(--text-1); }

/* "returning user" panel — shown in place of the form once the user has
   already submitted their contact (localStorage flag). No re-entry of the
   email; just a button to re-open the guide modal. */
.pro-lead-returning {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
}
.pro-lead-returning.hidden { display: none; }
.pro-lead-returning-eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.pro-lead-returning-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-1);
}
.pro-lead-returning .btn { font-size: 13px; padding: 11px 22px; }

@media (max-width: 760px) {
  /* stack: text → fanned pages → button */
  .pro-lead-card {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "expo" "cta";
    justify-items: center; text-align: center;
    row-gap: 22px;
  }
  .pro-lead-text { display: flex; flex-direction: column; align-items: center; }
  .pro-lead-expo { width: min(82vw, 360px); }
  .pro-lead-card .lead-cta { align-self: stretch; width: 100%; max-width: 420px; }
}

/* ============================================
   GUIDE SHOWCASE (.glead) — light promo panel styled after the PDF mockup.
   ============================================ */
.glead {
  --g-green: #ff8fb4;                 /* a touch brighter for the dark bg */
  width: 100%; max-width: 1080px; margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(8px, 2vw, 26px) clamp(12px, 3vw, 40px);
  background: none;                    /* no white panel — sits on the site bg */
  color: var(--text-1);
  text-align: center;
}
.glead-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(25px, 4.4vw, 48px);
  letter-spacing: 0.01em; text-transform: uppercase;
  line-height: 1; margin: 0; color: var(--text-1);
}
.glead-accent {
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: clamp(26px, 4.6vw, 46px);
  color: var(--g-green); margin: 0 0 6px; line-height: 1;
}
.glead-sub { font-size: clamp(12px, 1.4vw, 15px); color: rgba(255, 255, 255, 0.6); margin: 0; }

.glead-main {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.2vw, 26px);
  margin: clamp(12px, 1.8vw, 22px) 0;
}
/* fan + small badge sticker share one relative box */
.glead-visual { position: relative; width: min(100%, 440px); }

/* the "23 страницы" badge is now a small corner sticker with an arrow that
   points at the pages (was a big centred circle) */
.glead-badge {
  position: absolute; top: 0; right: 1%; z-index: 6;
  width: 52px; height: 52px; border-radius: 50%;
  /* same Apple-glass surface as the "получить гайд" button */
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 10px 22px rgba(20, 12, 10, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.9); line-height: 1.02;
  font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em;
}
/* travelling rim блик, same as the button */
.glead-badge::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid transparent; pointer-events: none;
  background:
    conic-gradient(from var(--about-cta-blik),
      transparent 0deg, transparent 260deg,
      rgba(255, 255, 255, 0.95) 295deg, rgba(255, 255, 255, 0.45) 312deg,
      transparent 340deg, transparent 360deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: about-cta-blik 3.4s linear infinite;
}
.glead-badge b {
  font-size: 17px; color: #fff; font-weight: 800; line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.glead-badge span { margin-top: 1px; }
.glead-badge-arrow {
  position: absolute; left: -26px; bottom: -14px;
  width: 32px; height: 32px;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.45));
  animation: gleadArrowNudge 2.4s ease-in-out infinite;
}
/* mirrored — the badge sits in the right corner now, arrow points down-left */
@keyframes gleadArrowNudge {
  0%, 100% { transform: scaleX(-1) rotate(4deg) translate(0, 0); }
  50%      { transform: scaleX(-1) rotate(4deg) translate(3px, 3px); }
}

/* check-list as tidy glass chips (was underlined rows) */
.glead-checks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; max-width: 440px;
  /* the cascade pages sit at z-index 1–3, so their soft shadows would fall
     ON TOP of this text and dim it. Lift the list above the shadows (shadow
     stays, but now sits behind the text) so it reads cleanly. */
  position: relative;
  z-index: 5;
}
.glead-checks li {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 4px 4px;
  font-size: clamp(12px, 1.3vw, 14px); color: #fff;
  /* extra safety against the dark falloff behind the text */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.glead-checks li::before {
  content: ''; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4 10-10' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,
    rgba(255, 255, 255, 0.08);
}

.glead-fan {
  position: relative; display: block; width: 100%;
  aspect-ratio: 1 / 1.3;               /* the cascade steps down, so taller */
}
.glead-page {
  position: absolute;
  border-radius: 12px; overflow: hidden;
  /* paper-like layered shadows (mockup look): tight contact + wide soft falloff */
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.35),
    0 16px 32px rgba(0, 0, 0, 0.38),
    0 40px 80px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  background: #fff;
}
/* the front page floats highest — deepest, furthest shadow */
.glead-page--1 {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.38),
    0 22px 44px rgba(0, 0, 0, 0.42),
    0 56px 110px rgba(0, 0, 0, 0.5);
}
/* mockup-style cascade: big front page top-left («Типы осанки»), the next
   pages step down to the right like dealt cards */
.glead-page--1 { width: 52%; left: 7%;  top: 1%;  transform: rotate(-8deg); z-index: 3; }
.glead-page--2 { width: 42%; left: 55%; top: 13%; transform: rotate(6deg);  z-index: 2; }
.glead-page--3 { width: 40%; left: 44%; top: 46%; transform: rotate(11deg); z-index: 1; }
.glead-fan:hover .glead-page--1 { transform: rotate(-8deg) translateY(-6px); }

.glead-cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 36px); flex-wrap: wrap;
  margin-top: clamp(14px, 2vw, 24px);
}
/* the guide CTA is the same glass button as everywhere else, just width-capped
   so the handwritten note sits beside it */
.glead-cta { flex: 0 0 auto; width: auto; min-width: 250px; max-width: 340px; }
/* soft glow behind the fanned pages for a bit more depth */
.glead-fan::after {
  content: ''; position: absolute; inset: 8% 6%; z-index: 0;
  background: radial-gradient(58% 52% at 50% 46%, rgba(255, 143, 180, 0.12), transparent 72%);
  filter: blur(24px); pointer-events: none;
}
.glead-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 26px; border-radius: 999px;
  border: 1.5px solid var(--g-green);
  background: rgba(255, 143, 180, 0.08);
  text-decoration: none; color: var(--text-1);
  transition: background .2s ease, transform .2s ease;
}
.glead-btn:hover { background: rgba(255, 143, 180, 0.20); transform: translateY(-2px); }
.glead-btn-ico {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--g-green);
  border: 1.5px solid var(--g-green); border-radius: 6px; padding: 4px 6px;
}
.glead-btn-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.glead-btn-txt b { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.glead-btn-txt i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.glead-hand {
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px); line-height: 1.05;
  color: rgba(255, 255, 255, 0.75); text-align: left; position: relative; padding-left: 34px;
}
.glead-hand::before {
  content: '↗'; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  color: var(--g-green); font-size: 20px;
}

@media (max-width: 760px) {
  .glead-visual { width: min(100%, 400px); }
  .glead-checks { max-width: 360px; }
  /* button full-width */
  .glead-cta-row { flex-direction: column; gap: 12px; }
  .glead-cta { width: 100%; max-width: 420px; min-width: 0; }
}

/* ============================================
   FLOATING CHAT DOCK
   ============================================ */
.pro-chat-dock {
  position: fixed;
  bottom: clamp(16px, 2.4vw, 28px);
  right:  clamp(16px, 2.4vw, 28px);
  z-index: 240;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.pro-chat-fab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: var(--juice-grad);
  color: white;
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(198, 70, 118, 0.4);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.pro-chat-fab:hover { transform: translateY(-2px) scale(1.02); }
.pro-chat-fab svg { width: 18px; height: 18px; }
.pro-chat-menu {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow-strong);
  min-width: 200px;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .2s ease, transform .25s var(--ease);
}
.pro-chat-dock.is-open .pro-chat-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.pro-chat-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text-1);
  text-decoration: none;
  transition: background .2s ease;
}
.pro-chat-menu a:hover { background: rgba(255, 255, 255, 0.06); }
.pro-chat-ico {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  color: white;
}
.pro-chat-ico[data-net="wa"]   { background: linear-gradient(135deg, #25D366, #128C7E); }
.pro-chat-ico[data-net="tg"]   { background: linear-gradient(135deg, #2AABEE, #229ED9); }
.pro-chat-ico[data-net="form"] { background: rgba(255, 255, 255, 0.08); color: var(--accent, var(--clay)); }
.pro-chat-net { font-size: 13px; }

@media (max-width: 540px) {
  .pro-chat-dock { bottom: 12px; right: 12px; }
  .pro-chat-fab span { display: none; }
  .pro-chat-fab { padding: 12px; }
}

/* ============================================
   ABOUT — extend the divider line above the certs marquee
   to span the full viewport width, matching the running
   carousel below (which already breaks out via 100vw).
   Without this, the line stops at the section padding while
   the marquee bleeds edge-to-edge, leaving visible gaps on
   the left and right.
   ============================================ */
.section.about .about-certs {
  position: relative;
  border-top: 0;
}
.section.about .about-certs::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: var(--glass-border);
  pointer-events: none;
}

/* ============================================
   ZONE PREVIEW — the workout recommendation card that appears
   when a marker on the 3D model is selected. Gets the same
   "блик" sweep as the About TG bubble, but traced around the
   pill-shaped card. The conic-gradient angle is animated (not
   the element itself) so the bright sliver glides along the
   perimeter without the card visually spinning.
   ============================================ */
@property --zone-preview-blik {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.zone-preview { position: relative; }
.zone-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background:
    conic-gradient(
      from var(--zone-preview-blik),
      transparent 0deg,
      transparent 260deg,
      rgba(255, 255, 255, 0.95) 295deg,
      rgba(255, 255, 255, 0.45) 312deg,
      transparent 340deg,
      transparent 360deg
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: zone-preview-blik 2.5s linear infinite;
  z-index: 3;
}
/* the card itself is hidden via the .hidden utility when no zone is
   selected — the blik fades with it automatically */
.zone-preview.hidden::after { display: none; }
@keyframes zone-preview-blik {
  to { --zone-preview-blik: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .zone-preview::after { animation: none; opacity: 0; }
}

/* ============================================
   2026 LOGO REFRESH — lotus/posture photo mark (Photos/logo.jpg).
   The black-on-white line-art is recolored to a WHITE figure sitting on the
   brand pink-gradient tile: invert() flips the art (lines→white, bg→black),
   and mix-blend-mode:screen drops the (now black) background so the pink
   gradient shows through and the white figure reads cleanly.
   The wordmark keeps its original single-line gradient+shine from styles.css.
   ============================================ */
.nav-logo-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  /* «жидкое стекло» — тот же рецепт, что у кнопок «Консультация» и
     «Диагностика тела»: тёмная стеклянная середина, розовая каустика снизу,
     бегущее кольцо на ::before и мягкое свечение на ::after */
  overflow: visible !important;
  isolation: isolate;
  /* заливка кружка — ровно та же, что у букв: сплошной ярко-белый,
     чтобы знак и надпись читались одним материалом */
  background: linear-gradient(180deg, #ffffff, #ffffff) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.40),
    0 0 18px rgba(var(--accent-rgb, 255,143,180), 0.16) !important;
  filter: none !important;
}
.nav-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  /* фигура уже вырезана из фона — стекло просвечивает вокруг неё */
  filter: none;
  mix-blend-mode: normal;
}
/* the photo mark doesn't bounce like the old stick-figure svg — keep it calm */
.nav-logo:hover .nav-logo-mark { animation: none !important; }
.nav-logo:hover .nav-logo-mark { transform: scale(1.05); }

/* nudge the wordmark up a touch from the 22px base, but smaller than the tile */
.nav-logo-text {
  /* заглавные Intro занимают 0.85em, поэтому 49px дают высоту букв ровно
     в 42px — как диаметр круга. На узких экранах кегль ужимается,
     иначе надпись не помещается рядом с бургером. */
  font-size: clamp(24px, 6.4vw, 49px) !important;
  letter-spacing: 0.012em !important;
  line-height: 1 !important;
  position: relative;
  top: 2px;
  /* заливка букв — ровно та же, что у круга знака (та же прозрачная белая
     с розовым отливом), поэтому надпись и логотип читаются одним материалом.
     Сверху — прежний бегущий блик; на светлой заливке он ярче базового,
     иначе разница не читалась бы. */
  background-image:
    /* розовый бегущий блик поверх ЯРКО-БЕЛЫХ букв (полная непрозрачность) */
    linear-gradient(105deg,
      rgba(255,143,180,0) 30%,
      rgba(255,143,180,0.60) 50%,
      rgba(255,143,180,0) 70%),
    linear-gradient(180deg, #ffffff, #ffffff) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 250% 100%, 100% 100% !important;
  background-position: -150% 0, 0 0;   /* без !important — иначе анимация замрёт */
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  animation: logo-shine 4s linear infinite !important;
}

/* Кольцо и внешнее свечение — один в один с кнопками «Консультация» /
   «Диагностика тела» (.about-cta): по ободку бежит розовый горячий блик,
   за кругом — размытое сияние того же градиента. */
.nav-logo-mark { position: relative; }
.nav-logo-mark::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;                  /* толщина кольца */
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(from var(--lb-angle),
    rgba(var(--accent-rgb, 255,143,180),0.28) 0deg,
    rgba(var(--accent-rgb, 255,143,180),0.28) 42deg,
    #FFC2D8 74deg,
    #FF8FB4 90deg,
    #FFC2D8 106deg,
    rgba(var(--accent-rgb, 255,143,180),0.28) 150deg,
    rgba(var(--accent-rgb, 255,143,180),0.28) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: lb-flow 4.5s linear infinite;
}
.nav-logo-mark::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from var(--lb-angle),
    transparent 0deg, transparent 46deg,
    rgba(var(--accent-rgb, 255,143,180),0.85) 90deg,
    transparent 140deg, transparent 360deg);
  filter: blur(9px);
  opacity: 0.7;
  animation: lb-flow 4.5s linear infinite;
}
.nav-logo:hover .nav-logo-mark::before,
.nav-logo:hover .nav-logo-mark::after { animation-duration: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .nav-logo-mark::before,
  .nav-logo-mark::after { animation: none; }
  .nav-logo-mark::after { opacity: 0; }
}

/* ============================================
   REAL CERTIFICATE SCANS — full-width auto-scrolling carousel in the About
   block (like the cases/workouts rows). The card set is duplicated in the
   markup so the marquee loops seamlessly; hover pauses it; click opens the
   scan full-size in the .cert-modal lightbox (wired in script-pro.js).
   ============================================ */
.certs-gallery {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 8px;
  overflow: hidden;
  padding: 8px 0 18px;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.certs-gallery-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
  /* reuse the shared `marquee` keyframe (translateX 0 → -50%) from styles.css;
     the card set is duplicated in the markup so -50% loops seamlessly */
  animation: marquee 70s linear infinite;
}
.certs-gallery:hover .certs-gallery-track,
.certs-gallery:focus-within .certs-gallery-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .certs-gallery-track { animation: none; flex-wrap: wrap; }
}
.cert-shot {
  flex: 0 0 auto;
  width: 196px;
  height: 128px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s ease;
}
.cert-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cert-shot:hover,
.cert-shot:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(255, 143, 180, 0.28);
  border-color: rgba(255, 143, 180, 0.55);
  outline: none;
}
@media (max-width: 640px) {
  .cert-shot { width: 158px; height: 104px; }
}

/* ============================================
   REAL BEFORE/AFTER CASE — each scan is itself a до/после composite
   (left = before, right = after). All photos from the case folder are shown
   as a gentle crossfade slideshow inside the card (cycled in script-pro.js),
   with the до/после chips + a thin centre divider overlaid on top.
   ============================================ */
.case-img--photo {
  /* Letterbox bars used to be near-black against the photos, which now all
     sit on one grey studio backdrop — so the bars read as a frame. Painting
     them in that same grey makes the seam disappear. */
  background: #C4C4C0 !important;
}
/* фото кейсов с УДАЛЁННЫМ фоном (прозрачный PNG) — фигуры лежат прямо на
   тёмной liquid-карточке, без серой подложки */
.case-img--photo.case-img--nobg { background: transparent !important; }
.case-img--nobg .case-img-ba span:first-child { border-right: none; }
/* но когда активен слайд-скриншот (data-doc), возвращаем тёмный фон,
   иначе документ повиснет в пустоте */
.case-img--photo.case-img--nobg.is-doc { background: #15100c !important; }
/* screenshots keep the dark backdrop — grey would fight their dark chat UI */
.case-img--photo.is-doc { background: #15100c !important; }
/* the до/после split + labels only make sense over a real body photo;
   when the active slide is a text screenshot (data-doc), hide the overlay */
.case-img--photo.is-doc .case-img-ba { display: none !important; }
.case-img--photo .case-photos {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.case-img--photo .case-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* show the whole photo at its own proportions — no crop, no zoom */
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transition: opacity .9s ease;
}
.case-img--photo .case-photos img.is-active { opacity: 1; }
.case-img--photo .case-img-ba { z-index: 1; }
.case-img--photo .case-img-ba span {
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
}
.case-img--photo .case-img-ba span:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.45);
}
.case-img--photo .case-img-ba span b {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 12, 10, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CASE ZOOM GALLERY NAV — prev/next arrows + counter injected into the
   floating (zoomed) case card for multi-photo cases. (Built in script.js.)
   ============================================ */
.case-card-floating .case-img { position: relative; }
.case-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 12, 10, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 24px;
  line-height: 0;
  padding-bottom: 3px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 4;
  transition: background .2s ease, transform .2s ease;
}
.case-zoom-prev { left: 10px; }
.case-zoom-next { right: 10px; }
.case-zoom-nav:hover {
  background: var(--accent);
  transform: translateY(-50%) scale(1.08);
}
.case-zoom-count {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(20, 12, 10, 0.6);
  padding: 3px 9px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ============================================
   POINT-AND-PULSE — a puzzle tile lights up when she points at it in the
   centre video (triggered from script-pro.js). Strong rise, SOFT gentle
   fade-out, plus a one-pass light "блик" sweep across the tile.
   ============================================ */
@keyframes piece-pointed-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,143,180,0), inset 0 0 0 0 rgba(255,143,180,0); }
  10%  { box-shadow: 0 0 0 4px rgba(255,143,180,0.95), 0 0 66px 15px rgba(255,143,180,0.78), inset 0 0 40px rgba(255,143,180,0.34); }
  35%  { box-shadow: 0 0 0 3px rgba(255,143,180,0.62), 0 0 50px 10px rgba(255,143,180,0.48), inset 0 0 30px rgba(255,143,180,0.22); }
  62%  { box-shadow: 0 0 0 2px rgba(255,143,180,0.34), 0 0 36px 7px rgba(255,143,180,0.28), inset 0 0 20px rgba(255,143,180,0.13); }
  84%  { box-shadow: 0 0 0 1px rgba(255,143,180,0.14), 0 0 24px 4px rgba(255,143,180,0.13), inset 0 0 10px rgba(255,143,180,0.05); }
  100% { box-shadow: 0 0 0 0 rgba(255,143,180,0), inset 0 0 0 0 rgba(255,143,180,0); }
}
.piece.piece-pointed {
  z-index: 6;
  /* long ease-out tail → the glow melts away instead of cutting off */
  animation: piece-pointed-pulse 2.2s cubic-bezier(0.16, 0.7, 0.3, 1) both;
}
.piece.piece-pointed .piece-face {
  animation: piece-pointed-lift 2.2s cubic-bezier(0.16, 0.7, 0.3, 1) both;
}
@keyframes piece-pointed-lift {
  0%, 100% { transform: scale(1); }
  11%      { transform: scale(1.055); }
  45%      { transform: scale(1.02); }
}
/* photo brightens on highlight; the transition on the base ::before makes it
   ease IN and OUT smoothly (transitions beat the !important base filter) */
.piece-about::before,
.piece-cases::before,
.piece-workouts::before,
.piece-contact::before {
  transition: filter .6s ease;
}
.piece.piece-pointed::before {
  filter: blur(1px) brightness(0.95) saturate(1.2) !important;
}
/* блик: one diagonal light sweep across the tile while it's highlighted
   (reuses the existing .piece::after shine strip + piece-shine keyframes) */
.piece.piece-pointed::after {
  opacity: 1;
  animation: piece-shine 1.3s ease-out 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .piece.piece-pointed,
  .piece.piece-pointed .piece-face,
  .piece.piece-pointed::after { animation: none; }
  .piece.piece-pointed { box-shadow: 0 0 0 3px rgba(255,143,180,0.85), 0 0 40px 8px rgba(255,143,180,0.6); }
}

/* ============================================
   APPLE-GLASS BUTTONS — site-wide frosted treatment on the main .btn set.
   Dark ambient backdrop → dark translucent glass with a light edge highlight.
   ============================================ */
.btn {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 8px 22px rgba(0, 0, 0, 0.28) !important;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16) !important; transform: translateY(-1px); }
.btn-primary {
  /* frosted accent — stays vivid but glassy */
  background: linear-gradient(135deg, rgba(255, 143, 180, 0.88), rgba(199, 155, 224, 0.72)) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 14px 32px rgba(255, 143, 180, 0.32) !important;
  color: #fff !important;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 20px 40px rgba(255, 143, 180, 0.45) !important; }

/* On phones the workouts tile is tall & narrow, so the landscape pose crop
   has to be framed differently — keep the figure centred rather than letting
   `cover` push it off to one side. */
@media (max-width: 900px) {
  .piece-workouts::before {
    background-size: cover !important;
    background-position: 50% 55% !important;
    transform: scale(1.18) !important;
  }
  /* Align the wall/floor line of the cases photo (right tile) with the one on
     the workouts photo (left tile) so the background reads continuous across
     the seam. `cover` leaves no vertical play, so give it a little overscan
     (auto 116%) and push to the bottom — that lands its line at the same ~73%
     as the workouts tile. (keeps the base scaleX(-1) mirror.) */
  .piece-cases::before {
    background-size: auto 116% !important;
    background-position: center 100% !important;
  }
}

/* ============================================
   CERTIFICATES — own section low on the page, folded behind a button.
   The scans are proof material: valuable when asked for, dead weight when
   not, so the strip stays collapsed until the visitor opens it.
   ============================================ */
.section.certs {
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(28px, 4vw, 52px);
}
.section.certs .about-certs { position: relative; border-top: 0; }
.section.certs .about-certs-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px;
}

/* the toggle — same glass material as the About CTAs */
.certs-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 10px 26px rgba(20, 12, 10, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.certs-toggle::before {           /* gloss over the top half */
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0.00) 60%);
  pointer-events: none; z-index: -1;
}
.certs-toggle:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 16px 34px rgba(20, 12, 10, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.certs-toggle-chevron {
  display: inline-flex;
  width: 20px; height: 20px;
  color: var(--accent, #FF8FB4);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.certs-toggle-chevron svg { width: 100%; height: 100%; }
.certs-toggle[aria-expanded="true"] .certs-toggle-chevron { transform: rotate(180deg); }

/* collapse — max-height rather than the grid-rows trick: the strip inside is
   a full-bleed marquee (width: 100vw, negative margin), and an fr track sized
   it to zero, so the panel never opened. A generous max-height is predictable
   here because the strip's height is fixed by its card size. */
.certs-collapse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.22, 1, .36, 1),
              opacity .35s ease;
}
.certs-collapse.is-open {
  max-height: 420px;
  opacity: 1;
}
.certs-collapse-inner {
  padding-top: 18px;               /* breathing room under the button */
}
@media (prefers-reduced-motion: reduce) {
  .certs-collapse { transition: none; }
  .certs-toggle, .certs-toggle-chevron { transition: none; }
}

/* ============================================
   CASES TILE ON PHONES — the tile is tall and narrow there, so the cover-fit
   photo showed the figure small and high. Zoom in a couple of times over and
   pan the frame up the image, which drops the figure lower in the tile.
   ============================================ */
@media (max-width: 900px) {
  .piece-cases::before {
    background-size: auto 185% !important;
    background-position: center 14% !important;
  }
}

/* ============================================
   SOCIAL ICONS IN THE FOOTER
   The standalone «Остались вопросы?» section is gone; the three messenger
   links live in the footer now as icon-only glass buttons, no plate behind.
   ============================================ */
.footer-social { display: flex; align-items: center; gap: 10px; }
/* Минималистичные значки без плашки — только иконка. Модный ховер:
   подсветка фирменным розовым, лёгкий подъём и мягкое свечение. */
.social-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;          /* сохраняем удобную зону тапа */
  border: none; background: none;      /* фона нет */
  color: rgba(255, 240, 245, 0.62);
  text-decoration: none;
  transition: color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1),
              filter .25s ease;
}
.social-btn::before { content: none; } /* убрана плашка/блик */
.social-btn:hover,
.social-btn:focus-visible {
  color: var(--accent, #FF8FB4);
  transform: translateY(-3px);
  filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb, 255, 143, 180), 0.55));
}
.social-ico {
  width: 23px; height: 23px;
  flex: 0 0 auto;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.social-btn:hover .social-ico { transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) {
  .social-btn, .social-ico { transition: none; }
}