/* =========================================================
   Brand & Design & Wellness — design tokens
   Derived from the Figma concept: Inter type, #f3f3f3 / black
   sections, #fb9851 accent, soft rounded cards.
   ========================================================= */

/* Self-hosted Inter (was loaded via Google Fonts @import, which is
   blocked/unreliable for some visitors — e.g. fonts.googleapis.com /
   fonts.gstatic.com are throttled or blocked outright on many RU
   connections). When the webfont never arrives, the browser falls
   back to the platform's own "Arial" substitute — and on macOS that
   substitute has noticeably wider Cyrillic glyphs than Inter, which
   combined with the -0.06em letter-spacing this design uses caused
   headings to wrap into extra, oddly short lines. Self-hosting removes
   the external dependency so the intended font (and its metrics)
   always loads. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap;
  src: url('../assets/fonts/inter-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{ font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap;
  src: url('../assets/fonts/inter-cyrillic-300.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src: url('../assets/fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src: url('../assets/fonts/inter-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src: url('../assets/fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src: url('../assets/fonts/inter-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src: url('../assets/fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src: url('../assets/fonts/inter-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

:root{
  --bg: #f3f3f3;
  --ink: #0a0a0a;
  --ink-soft: #4b4b4b;
  --paper: #ffffff;
  --card: #ececec;
  --card-line: #e0e0e0;
  --accent: #fb9851;
  --accent-ink: #5c3212;
  --mute: #8a8a8a;
  --mute-2: #6f6f6f;
  --dark: #0a0a0a;
  --dark-2: #171717;
  --on-dark: #f5f5f5;
  --on-dark-mute: #929292;
  --radius-l: 30px;
  --radius-m: 15px;
  --radius-s: 15px;
  --pill: 999px;
  --container: 1320px;
  --container-wide: 1760px;
  --gutter: clamp(24px, 5vw, 64px);
  --header-h: 110px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: auto;
  /* iOS Safari silently "boosts" (inflates) the font-size of short text
     runs sitting in narrow columns — invisible on desktop, but on a real
     iPhone it was quietly enlarging things like the course-card's
     "Курс для старта" label enough to push it up into the badges
     overlaid above it. Pin every element to the size the CSS actually
     asks for. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  letter-spacing: -0.06em;
  /* header is position:fixed and out of flow — push everything below
     it down by its real (JS-measured) height so nothing starts hidden
     underneath it; --header-h has a static fallback for the instant
     before JS runs. */
  padding-top: var(--header-h);
}
#hero, #about, #courses, #portfolio, #contacts{ scroll-margin-top: var(--header-h); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.02em;
  color: var(--mute-2);
  font-weight: 500;
  text-transform: none;
}

/* ---------- reveal helpers (JS toggles) ----------
   Elements are visible by default (progressive enhancement).
   Only once JS confirms GSAP loaded does it flag <html> and
   hide-then-animate these elements — so a slow/blocked script
   never leaves real content invisible. */
html.js-anim [data-reveal]{ opacity: 0; }
.split-line{ overflow:hidden; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: clamp(14px, 1.92vw, 17px) clamp(24px, 3.12vw, 31px);
  border-radius: var(--pill);
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: clamp(16px, 1.32vw, 17px);
  font-weight: 500;
  white-space: nowrap;
}
.btn.btn-dark{ background: var(--ink); color:#fff; border-color: var(--ink); }
.btn.btn-accent{ background: var(--accent); color:#fff; border-color: var(--accent); }
.btn.btn-light{ border-color: rgba(255,255,255,.5); color:#fff; }

.arrow-btn{
  width: 55px; height: 55px;
  border-radius: 20px;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.arrow-btn svg{ width:22px; height:22px; color:#fff; }
.arrow-btn.light{ background: var(--paper); }
.arrow-btn.light svg{ color: var(--ink); }

/* ============ HEADER ============ */
.site-header{
  /* fixed (not sticky) — sticky positioning is unreliable across
     browsers when an ancestor (here: body) has overflow set to
     anything but visible, which is exactly our case (body has
     overflow-x:hidden for the mobile horizontal-scroll fix). Fixed
     is exempt from that gotcha and always stays pinned to the
     viewport regardless of ancestor overflow. */
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: clamp(22px, 2vw, 28px) 0;
  background: rgba(243,243,243,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* header aligns to the same wide grid as the hero below it */
.site-header .wrap{ display:flex; align-items:center; gap: 40px; max-width: var(--container-wide); }
.header-inner{
  display:inline-flex; align-items:center; gap: 44px;
  padding-bottom: 20px; border-bottom: 1px solid var(--card-line);
}
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{ height: clamp(48px, 3.4vw, 60px); width:auto; display:block; }
.main-nav{ display:flex; gap: 32px; margin-left: 10px; }
.main-nav a{ font-size: clamp(15px, 1.35vw, 18px); color: var(--ink); position:relative; padding: 4px 0; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--ink);
  transition: right .35s var(--ease);
}
.main-nav a:hover::after{ right:0; }
.burger{ display:none; }

/* ============ HERO ============ */
.hero{ padding: clamp(36px, 7.2vw, 55px) 0 clamp(60px, 10.8vw, 108px); position:relative; }
/* only the first screen gets a wider grid than the rest of the site;
   the header above it shares the same --container-wide so both align */
.hero .wrap{ max-width: var(--container-wide); }
.hero-top{
  /* nudged from 0.9fr/1.1fr to give the (now much bigger) title just
     enough extra column width to stay at 4 lines — a ~5% shift, the
     course cards keep essentially the same size */
  display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(22px, 2.88vw, 31px);
  align-items: stretch;
}
.hero-copy{
  /* keep title + description together as one group and anchor that
     group to the bottom of the column, so the description's bottom
     edge lines up with the bottom edge of the image cards on the right */
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-title{
  /* ~1.5x the old clamp(32px,4.2vw,60px), tuned down just enough at
     the top end (88 vs a "true" 90) and paired with a slightly wider
     column (see .hero-top ratio below) so the heading still wraps to
     the same 4 lines at every desktop width instead of spilling to 6-7. */
  font-size: clamp(48px, 4.3vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.06em;
  font-weight: 400;
  max-width: 900px;
}
.hero-sub{
  margin-top: 26px;
  font-size: clamp(20px, 1.75vw, 24px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 650px;
}
.hero-cards{ display:flex; flex-direction:column; gap: 18px; max-width: 920px; width:100%; margin-left:auto; }
.course-card{
  position:relative; border-radius: var(--radius-s); overflow:hidden;
  min-height: clamp(264px, 31.2vw, 360px); color:#fff; background:#111;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(24px, 3.12vw, 36px);
  isolation:isolate;
}
.course-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transform: scale(1.08);
  transition: transform .8s var(--ease);
}
.course-card:hover img{ transform: scale(1.16); }
.course-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.72) 100%);
}
.course-tags{ position:absolute; top:18px; right:22px; left:22px; display:flex; gap: clamp(5px, 0.8vw, 8px); flex-wrap:wrap; justify-content:flex-end; }
.course-tags span{
  background: rgba(255,255,255,.25); backdrop-filter: blur(6px);
  padding: 6px clamp(9px, 1.2vw, 14px); border-radius: var(--pill); font-size: clamp(11px, 1.02vw, 14px);
  white-space: nowrap;
}
.course-kicker{ font-size: clamp(13px, 1.2vw, 14px); font-weight:300; opacity:.9; margin-bottom:6px; }
.course-name{ font-size: clamp(32px, 3.25vw, 42px); line-height: .95; font-weight:500; letter-spacing: -0.06em; }
.course-card .course-name{ font-weight:500; font-size: clamp(38px, 3.75vw, 55px); letter-spacing: -0.02em; }
.course-card .course-name br.fc-break{ display:none; }
@media (min-width: 981px){ .course-card .course-name br.fc-break{ display:inline; } }

/* ============ AUDIENCE title/note fit ============ */
#audience .section-title{ max-width: 880px; }
#audience .section-note{ max-width: 260px; }
.course-meta{ margin-top:14px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.meta-chip{
  display:inline-block; font-size: clamp(14px, 1.2vw, 16px); line-height:1.4; opacity:.9; font-weight:400;
}
.course-foot{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:18px; }
.course-card.small{ min-height: clamp(216px, 24.0vw, 288px); }
/* between ~981-1300px this formula doesn't leave enough room for the
   card's own text once the tag badges overlaid on top wrap onto (or
   sit close to) a second row — kicker/title were colliding with them.
   Give the card a bit more breathing room in that range. */
@media (min-width: 981px) and (max-width: 1300px){
  .course-card.small{ min-height: 340px; }
}

.hero-side-card{
  border-radius: var(--radius-s);
  background: var(--card);
  display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between;
  padding: clamp(24px, 3.12vw, 31px);
}
.all-products{
  border-radius: var(--radius-s); background: var(--accent); color:#fff;
  padding: clamp(24px, 3.12vw, 31px); min-height: clamp(216px, 24.0vw, 288px); display:flex; flex-direction:column; justify-content:space-between;
  font-size: clamp(22px, 2.16vw, 26px); font-weight:500; letter-spacing: -0.06em; line-height:1.15;
  transition: background .3s var(--ease);
}
.all-products:hover{ background:#e8823a; }

/* ============ ABOUT (dark, scattered photos) ============ */
.about-dark{
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  margin-top: -26px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: clamp(72px, 13.2vw, 132px) 0 clamp(60px, 9.6vw, 96px);
  overflow: clip;
}
.about-dark .wrap{ position:relative; z-index:3; pointer-events:none; }
.about-headline{
  max-width: 1150px; margin: 0 auto; text-align:center;
  font-size: clamp(35px, 7.38vw, 98px);
  line-height: 1.08; letter-spacing: -0.06em; font-weight: 400;
}
.about-headline .muted{ color: var(--on-dark-mute); }
.about-sub{
  max-width: 700px; margin: 26px auto 0; text-align:center;
  font-size: clamp(19px, 1.75vw, 22px); line-height:1.5; color: #cfcfcf;
}
.stat-tiles{
  margin: 50px auto 0; max-width: 780px;
  display:grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  text-align:center;
}
.stat-num{
  font-size: clamp(55px, 7.5vw, 105px); font-weight:600; letter-spacing:-0.04em;
  line-height:1; color:#fff; font-variant-numeric: tabular-nums;
}
.stat-label{ margin-top:10px; font-size: clamp(15px, 1.32vw, 17px); color:#b9b9b9; }
.about-badges{
  margin: 44px auto 0; max-width: 780px;
  display:flex; flex-wrap:wrap; justify-content:center; gap: 18px 36px;
}
.badge-item{ display:flex; align-items:center; gap:10px; font-size: clamp(15px, 1.32vw, 17px); color:#d8d8d8; }
.badge-icon{ width:22px; height:22px; color: var(--accent); flex-shrink:0; }
.badge-icon-img{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.license-note{ text-align:center; margin: 18px auto 0; font-size: clamp(13px, 1.2vw, 15px); color:#7c7c7c; }
.scatter-hint{
  position:absolute; top: 118px; right: 8%; font-size: 12px; color:#8b8b8b;
  text-align:center; z-index:4; width: 120px; display:none; pointer-events:none;
}
.drag-hint-arrow{
  width: 46px; margin-top: 4px; opacity: .85;
  filter: invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
@media (min-width: 1000px){ .scatter-hint{ display:block; } }
@media (max-width: 999px){ .scatter{ display:none; } }
.scatter{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.scatter img{
  position:absolute; width: 150px; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 15px; box-shadow: 0 20px 40px rgba(0,0,0,.45);
  pointer-events:auto; cursor: grab; user-select:none; -webkit-user-drag:none;
  background: #1a1a1a;
}
.scatter img:active{ cursor: grabbing; }
.scroll-cue{
  display:flex; justify-content:center; margin-top: 70px; position:relative; z-index:3;
}
.scroll-cue svg{ width:16px; height:70px; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(10px);} }
.about-dark .cap{
  position:absolute; left:0; right:0; height:60px; background: var(--bg);
}
.about-dark .cap.bottom{ bottom:-1px; border-radius: var(--radius-l) var(--radius-l) 0 0; }

/* ============ AUDIENCE ============ */
.audience{ padding: clamp(60px, 10.8vw, 108px) 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom: 44px; }
.section-title{
  font-size: clamp(35px, 7.0vw, 98px); font-weight:400; letter-spacing: -0.06em; line-height:1.05;
}
.section-note{ max-width: 380px; font-size: clamp(16px, 1.56vw, 18px); color: var(--ink-soft); line-height:1.5; }
.audience-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.92vw, 19px); }
.audience-card{
  background: var(--paper); border-radius: var(--radius-m); padding: clamp(24px, 2.88vw, 31px) clamp(22px, 2.64vw, 29px); min-height: clamp(144px, 16.8vw, 180px);
  font-size: clamp(17px, 1.56vw, 19px); line-height:1.5; display:flex; align-items:flex-start;
  border: 1px solid var(--card-line);
}

.audience-wheel{
  position:relative; height: clamp(384px, 48.0vw, 480px); margin: 10px auto 0; max-width: 720px;
  transition: height .45s var(--ease);
}
.audience-wheel-track{ position:relative; width:100%; height:100%; cursor: ns-resize; }
.wheel-item{
  position:absolute; left:50%; top:50%; width:100%;
  background: var(--paper); border:1px solid var(--card-line); border-radius: var(--radius-m);
  padding: clamp(24px, 3.12vw, 31px) clamp(26px, 3.6vw, 36px); font-size: clamp(17px, 1.68vw, 19px); line-height:1.45; text-align:center;
  box-shadow: 0 20px 40px rgba(0,0,0,.06);
  transition: transform .45s var(--ease), opacity .45s var(--ease), box-shadow .45s var(--ease), font-weight .2s;
  will-change: transform, opacity;
}
.wheel-item.is-active{ box-shadow: 0 26px 54px rgba(0,0,0,.14); font-weight:600; cursor:default; }
.wheel-dots{ display:flex; justify-content:center; gap:8px; margin-top: 18px; }
.wheel-dot{ width:6px; height:6px; border-radius:50%; background: var(--card-line); transition: background .3s var(--ease), transform .3s var(--ease); }
.wheel-dot.is-active{ background: var(--accent); transform: scale(1.4); }

/* ============ FOUNDER ============ */
.founder{ padding: clamp(24px, 3.6vw, 36px) 0 clamp(72px, 12.0vw, 120px); }
.founder-grid{ display:grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(36px, 6.0vw, 60px); align-items:stretch; }
.founder-photo{ border-radius: var(--radius-m); overflow:hidden; }
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-name{ font-size: clamp(32px, 3.75vw, 45px); letter-spacing: -0.06em; margin-bottom: 22px; font-weight:500; }
.founder-block{ margin-bottom: 20px; }
.founder-block h4{ font-size: clamp(14px, 1.2vw, 16px); text-transform:uppercase; letter-spacing: .06em; color: var(--accent); font-weight:500; margin-bottom:6px; }
.founder-block p{ font-size: clamp(17px, 1.56vw, 19px); line-height:1.55; color: var(--ink-soft); max-width: 680px; }

/* ============ GOAL SELECT (dark) ============ */
.goal-block{ padding: clamp(60px, 9.6vw, 96px) 0 clamp(43px, 7.2vw, 67px); }
.goal-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding-top: 18px; }
.goal-card{
  position:relative;
  background:#1b1b1b; border:1px solid #2b2b2b; border-radius: var(--radius-m);
  padding: clamp(24px, 2.88vw, 31px) clamp(22px, 2.64vw, 29px); min-height: clamp(144px, 16.8vw, 180px); text-align:left; color:#fff;
  display:flex; flex-direction:column; gap:10px; font-family:inherit;
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.goal-card:nth-child(1){ transform: rotate(-1.3deg); }
.goal-card:nth-child(2){ transform: rotate(1deg); }
.goal-card:nth-child(3){ transform: rotate(-0.7deg); }
.goal-card::before{
  content:""; position:absolute; top:-13px; left:50%; transform: translateX(-50%);
  width:22px; height:22px; border-radius:50%; z-index:2;
  background: radial-gradient(circle at 35% 30%, #ffd9b0, var(--accent) 58%, #c9701f 100%);
  box-shadow: 0 5px 10px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.25);
}
.goal-card::after{
  content:""; position:absolute; top:-2px; left:50%; width:1px; height:14px;
  background: rgba(255,255,255,.25); transform: translateX(-50%);
}
.goal-card strong{ font-size: clamp(17px, 1.56vw, 19px); font-weight:500; letter-spacing: -0.01em; }
.goal-card span{ font-size: clamp(15px, 1.32vw, 17px); line-height:1.4; color:#b9b9b9; transition: color .25s var(--ease); }
.goal-card:hover{ border-color:#3d3d3d; transform: rotate(0deg) translateY(-4px); box-shadow: 0 22px 40px rgba(0,0,0,.45); }
.goal-card.is-selected{ background:#FCCFAF; border-color:#FCCFAF; color:#3a1f0c; transform: rotate(0deg); }
.goal-card.is-selected span{ color:#5c3212; }

/* ============ PRODUCTS ============ */
.products{
  background: var(--dark); color:#fff;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: 0 0 clamp(72px, 12.0vw, 120px);
}
.products .section-title{ color:#fff; }
.products .section-note{ color:#b9b9b9; }
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(14px, 2.16vw, 22px);
}
.product-card{
  position:relative; border-radius: var(--radius-m); overflow:hidden; background: var(--card);
  display:flex; flex-direction:column; min-height: clamp(475px, 52.5vw, 650px);
}
.product-card.wide{ grid-column: span 2; }
.product-card.full{ grid-column: span 3; min-height: clamp(325px, 37.5vw, 450px); }
.product-card.full .p-img{ min-height: clamp(325px, 37.5vw, 450px); }
.product-card .p-img{ position:relative; flex: 1 1 auto; min-height: clamp(275px, 32.5vw, 375px); overflow:hidden; }
.product-card .p-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.product-card:hover .p-img img{ transform: scale(1.06); }
.product-card .p-img.is-updating img{ filter: grayscale(1) blur(5px) brightness(.7); transform: scale(1.12); }
.product-card .p-img.is-updating:hover img{ transform: scale(1.16); }
.product-card .p-img .status-pill{
  position:absolute; left:26px; bottom:104px; z-index:2;
  background: rgba(255,255,255,.2); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-weight:600;
  font-size:clamp(15px, 1.38vw, 18px); padding:11px 22px; border-radius: var(--pill);
}
.product-card .p-img .course-kicker{ display:none; }
.product-card .p-img .course-name{
  position:absolute; left:26px; right:26px; bottom:22px; color:#fff; z-index:2;
  font-size: clamp(38px, 4.25vw, 58px); font-weight:500; line-height:.98; letter-spacing:-0.03em;
}
.product-card .p-img::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.6)); }
.product-card .p-img .duration-pill{
  position:absolute; left:26px; bottom:104px; z-index:2;
  background: rgba(255,255,255,.2); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:clamp(15px, 1.38vw, 18px); padding:11px 22px; border-radius: var(--pill);
}
.product-card .p-body{
  background: var(--paper); color: var(--ink); padding: clamp(25px, 3.75vw, 38px) clamp(22px, 3.25vw, 35px) clamp(25px, 3.75vw, 38px); display:flex; align-items:flex-end; justify-content:space-between; gap: clamp(18px, 2.5vw, 25px);
}
.product-card .p-body p{ font-size: clamp(18px, 1.75vw, 21px); line-height:1.55; color: var(--ink); }
.product-card .p-body .fit-note{ font-size: clamp(15px, 1.38vw, 17px); color: var(--accent); font-weight:600; margin-top:12px; }
.product-card .p-cta{ flex-shrink:0; }

/* course "coming soon" state: muted, centered overlay text, no CTA arrow */
.product-card.is-coming-soon .p-img{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
}
.product-card.is-coming-soon .p-img .status-pill{
  position:static; background:none; border:none; backdrop-filter:none; padding:0;
  color: rgba(255,255,255,.55); font-weight:500;
}
.product-card.is-coming-soon .p-img .course-name{
  position:static; left:auto; right:auto; bottom:auto; text-align:center;
  color: rgba(255,255,255,.55);
}
.product-card.is-coming-soon .p-cta{ display:none; }
.product-card.is-coming-soon .p-body{ background: rgba(120,120,120,.15); }
.product-card.is-coming-soon .p-body p{ color: rgba(10,10,10,.45); }

/* full-cycle card: duration pill in the top-right corner of the image */
#p-full-cycle .p-img .duration-pill{
  left:auto; right:26px; bottom:auto; top:26px;
}

/* ============ CONSULT BANNER ============ */
.consult-banner{
  margin: clamp(24px, 4.8vw, 41px) 0 0;
  background: #161616; border: 1px solid #2a2a2a; color:#fff; border-radius: var(--radius-m);
  padding: clamp(36px, 7.2vw, 72px) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap: clamp(22px, 3.6vw, 36px); flex-wrap:wrap;
}
.consult-banner h3{ font-size: clamp(28px, 3.25vw, 40px); max-width:650px; letter-spacing: -0.06em; line-height:1.15; font-weight:500; }
.consult-banner p{ color:#bdbdbd; font-size: clamp(16px, 1.56vw, 18px); margin-top:10px; max-width:480px; }

/* ============ STORIES ============ */
.stories{ padding: clamp(17px, 2.4vw, 24px) 0 clamp(72px, 12.0vw, 120px); }
.story-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(17px, 2.4vw, 24px); align-items:start; }
.story-card{
  background:#f2f2f2; border:1px solid #1a1a1a; border-radius: var(--radius-m); overflow:hidden;
  display:flex; flex-direction:column; height:100%;
}
.story-head{
  display:flex; align-items:center; gap:14px;
  padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2vw, 22px);
  border-bottom:1px solid #1a1a1a;
}
.story-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.story-title{ font-size: clamp(17px, 1.5vw, 19px); font-weight:500; color:#0a0a0a; letter-spacing:-0.01em; }
.story-title span{ font-weight:400; color:#7a7a7a; margin-left:3px; }
.story-row{ padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2vw, 22px); border-bottom:1px solid #1a1a1a; }
.story-label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color: var(--accent); font-weight:600; margin-bottom:10px; }
.story-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.story-list li{ position:relative; padding-left:20px; font-size: clamp(14px, 1.2vw, 15px); line-height:1.5; color:#161616; }
.story-list li::before{ content:"✱"; position:absolute; left:0; top:1px; font-size:12px; color:#161616; }
.story-photos{ display:flex; margin-top:auto; }
.story-photos img{ width:50%; height: clamp(150px, 15vw, 190px); object-fit:cover; display:block; }
.story-photos.single img{ width:100%; }
.stories-more{ text-align:center; margin-top: 40px; }

.story-dots{ display:none; justify-content:center; gap:8px; margin-top: 22px; }
.story-dot{ width:6px; height:6px; border-radius:50%; background:#d6d6d6; transition: background .3s var(--ease), transform .3s var(--ease); }
.story-dot.is-active{ background: var(--accent); transform: scale(1.4); }

/* stories: simple swipe-to-page carousel, mobile only */
@media (max-width: 980px){
  .story-grid{
    display:flex; flex-wrap:nowrap; align-items:flex-start; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; height:auto; padding-bottom:4px;
  }
  .story-grid::-webkit-scrollbar{ display:none; }
  .story-card{
    flex:0 0 100%; width:100%; max-width:none;
    scroll-snap-align:center;
  }
  .story-dots{ display:flex; }
}

/* ============ LIBRARY ============ */
.library{ padding: clamp(17px, 2.4vw, 24px) 0 clamp(72px, 12.0vw, 120px); }
.lib-intro{ max-width: 640px; font-size: clamp(17px, 1.68vw, 19px); color: var(--ink-soft); line-height:1.55; margin-bottom: 36px; }

.lib-tabs{ display:flex; }
.lib-tab{
  position:relative; border:none; cursor:pointer; font-family:inherit;
  padding: clamp(17px, 2.4vw, 24px) clamp(29px, 3.6vw, 43px) clamp(14px, 1.92vw, 19px) clamp(24px, 3.12vw, 36px); font-size: clamp(17px, 1.68vw, 19px); font-weight:600;
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
  margin-right: -20px;
  transition: transform .3s var(--ease), filter .2s var(--ease);
}
.lib-tab:nth-child(1){ background: var(--ink); color:#fff; z-index:3; }
.lib-tab:nth-child(2){ background: var(--accent); color:#fff; z-index:2; }
.lib-tab:nth-child(3){ background: #efe3d8; color: var(--ink); z-index:1; }
.lib-tab span{ position:relative; }
.lib-tab.is-active{ transform: translateY(-10px); }
.lib-tab:not(.is-active):hover{ transform: translateY(-4px); filter: brightness(1.05); }

.lib-panels{
  border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m);
  padding: 8px 22px; position:relative; z-index:0;
  box-shadow: 0 26px 54px rgba(0,0,0,.1);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.lib-panels.cat-podcast{ background: var(--ink); color:#fff; }
.lib-panels.cat-video{ background: var(--accent); color:#fff; }
.lib-panels.cat-article{ background:#efe3d8; color: var(--ink); }
.lib-panel{
  max-height:0; overflow:hidden; opacity:0; transform: translateY(16px);
  transition: max-height .5s var(--ease), opacity .35s var(--ease), transform .45s var(--ease);
}
.lib-panel.is-open{ max-height: 2400px; opacity:1; transform: translateY(0); }
.lib-item{
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 18px 2px; border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: clamp(16px, 1.56vw, 18px);
}
.lib-panels.cat-podcast .lib-item,
.lib-panels.cat-video .lib-item{ border-bottom-color: rgba(255,255,255,.18); }
.lib-item:last-child{ border-bottom:none; }
.lib-item a{ font-size:13px; font-weight:600; white-space:nowrap; border-bottom:1px solid currentColor; padding-bottom:2px; }
.lib-item a:hover{ opacity:.7; }

/* ============ CONTACT / FOOTER ============ */
.site-footer{ background: var(--dark); color:#fff; padding: clamp(60px, 10.8vw, 108px) 0 30px; border-radius: var(--radius-l) var(--radius-l) 0 0; }
.footer-top{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(29px, 4.8vw, 48px); margin-bottom: clamp(48px, 8.4vw, 84px); }
.footer-title{ font-size: clamp(38px, 7.0vw, 98px); font-weight:500; letter-spacing: -0.06em; line-height:1.1; max-width: 525px; }
.footer-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#8a8a8a; margin-bottom:16px; font-weight:500; }
.footer-col a, .footer-col p{ display:block; font-size: clamp(16px, 1.56vw, 18px); margin-bottom:10px; color:#e4e4e4; }
.footer-col a:hover{ color: var(--accent); }
.footer-legal{ border-top:1px solid #262626; padding-top: 24px; font-size: clamp(13px, 1.2vw, 15px); color:#8a8a8a; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ============ CURSOR ============ */
.cursor-dot{
  position: fixed; top:0; left:0; width:24px; height:24px;
  pointer-events:none; z-index: 999;
  transform: translate(-3px,-2px);
  display:none;
}
.cursor-dot svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
@media (hover:hover) and (pointer:fine){
  .cursor-dot{ display:block; }
  body{ cursor:none; }
  a, button, .scatter img, input, textarea, select, [role="button"]{ cursor:none; }
}

/* ============ MARQUEE (consultation page reuse) ============ */
.marquee{ overflow:hidden; background: var(--ink); padding: 16px 0; }
.marquee .track{ display:flex; gap: 40px; white-space:nowrap; width:max-content; }
.marquee span{ color:#fff; font-size:15px; opacity:.75; }
.marquee span.hi{ color: var(--accent); opacity:1; }

/* ============ CONSULTATION PAGE ============ */
.back-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft); margin-bottom: 30px; }
.back-link:hover{ color: var(--ink); }
.consult-hero{ padding: clamp(24px, 3.6vw, 36px) 0 clamp(48px, 8.4vw, 84px); }
.consult-hero-grid{ display:grid; grid-template-columns: 1.3fr 0.9fr; gap: 40px; align-items:end; }
.consult-price{ font-size: clamp(50px, 6.25vw, 80px); letter-spacing: -0.06em; font-weight:400; margin: 18px 0; }
.consult-side{ background: var(--dark); color:#fff; border-radius: var(--radius-m); padding: clamp(24px, 3.6vw, 36px); }
.consult-side .row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #262626; font-size:14px; }
.consult-side .row:last-of-type{ border-bottom:none; }
.consult-side .row span:first-child{ color:#9c9c9c; }

.info-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px, 2.16vw, 22px); padding: clamp(24px, 3.6vw, 36px) 0 clamp(60px, 9.6vw, 96px); }
.info-card{ background: var(--paper); border:1px solid var(--card-line); border-radius: var(--radius-m); padding: clamp(26px, 3.6vw, 36px) clamp(22px, 2.88vw, 31px); }
.info-card h3{ font-size: clamp(22px, 1.92vw, 25px); margin-bottom: 18px; letter-spacing: -0.06em; font-weight:500; }
.info-card ul li{ font-size: clamp(16px, 1.44vw, 17px); line-height:1.6; color: var(--ink-soft); padding-left:16px; position:relative; margin-bottom:10px; }
.info-card ul li::before{ content:"—"; position:absolute; left:0; color: var(--accent); }

.quote-block{
  background: var(--dark); color:#fff; border-radius: var(--radius-l);
  padding: clamp(48px, 8.4vw, 84px) var(--gutter); margin-bottom: clamp(60px, 10.8vw, 108px); text-align:center;
}
.quote-block p{ max-width: 950px; margin: 0 auto; font-size: clamp(25px, 3.25vw, 38px); line-height:1.3; letter-spacing: -0.06em; }
.quote-block p + p{ margin-top: 24px; color:#b9b9b9; font-size: clamp(19px, 2.0vw, 22px); }

.support-note{ text-align:center; max-width: 560px; margin: 0 auto clamp(48px, 8.4vw, 84px); font-size: clamp(16px, 1.56vw, 18px); color: var(--ink-soft); }
.support-note strong{ color: var(--ink); }

.final-cta{ text-align:center; padding-bottom: clamp(72px, 12.0vw, 120px); }
.final-cta .btn{ padding: clamp(19px, 2.4vw, 24px) clamp(38px, 4.8vw, 53px); font-size: clamp(18px, 1.68vw, 20px); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero-top{ grid-template-columns: 1fr; }
  .hero-copy{ padding-top:0; order:-1; }
  .hero-title{ font-size: clamp(64px, 15vw, 100px); line-height: 1.02; max-width:none; }
  .about-facts{ grid-template-columns: 1fr 1fr; }
  .audience-grid{ grid-template-columns: 1fr 1fr; }
  .founder-grid{ grid-template-columns: 1fr; }
  .founder-photo{ max-width: 340px; aspect-ratio: 4/5; }
  .product-grid{ grid-template-columns: 1fr 1fr; }
  .product-card.wide{ grid-column: span 2; }
  .product-card.full{ grid-column: span 2; }
  .story-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; gap:36px; }
  .consult-hero-grid{ grid-template-columns: 1fr; }
  .info-cols{ grid-template-columns: 1fr; }
  .goal-grid{ grid-template-columns: 1fr; }
  .stat-tiles{ gap: 14px; }
}
@media (max-width: 640px){
  .header-cta{ display:none; }
  .audience-grid{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  .product-card.wide{ grid-column: span 1; }
  .product-card.full{ grid-column: span 1; }
  .stat-tiles{
    grid-template-columns: repeat(2, auto); justify-content:center;
    column-gap: 40px; row-gap: 18px;
  }
  .stat-tiles .stat-tile:nth-child(3){ grid-column: 1 / -1; }
  .stat-num{ font-size: clamp(38px, 13.75vw, 55px); }
  .stat-label{ font-size:11.5px; }
  .about-badges{ flex-direction:column; align-items:center; gap:14px; }
  .audience-wheel{ height: 320px; }
  .wheel-item{ font-size:14.5px; padding:22px 20px; }
  .lib-tab{ padding: 16px 22px 14px 20px; font-size:14px; }
  .lib-panels{ padding: 6px 16px; }
  .lib-item{ flex-direction:column; align-items:flex-start; gap:8px; padding:16px 2px; }

  .scatter{
    display:flex; position:static; inset:auto; z-index:auto;
    flex-wrap:wrap; justify-content:center; align-items:center;
    gap:10px; max-width:320px; margin:0 auto 24px;
  }
  .scatter img{
    position:static !important; left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    width:72px !important; height:auto; aspect-ratio:4/3; object-fit:cover;
    border-radius:10px; box-shadow:0 10px 22px rgba(0,0,0,.4);
  }
  .consult-banner{ flex-direction:column; align-items:flex-start; }
  .hero-row-2{ flex-direction:column; }
  .hero-row-2 .course-card.small,
  .hero-row-2 .all-products{ flex:none !important; width:100%; }
  .course-card{ min-height: 370px; }
  .course-card.small{ min-height: 330px; }
  .course-tags{
    max-width: 96%; right:14px; gap:4px;
    flex-wrap: nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
  }
  .course-tags span{ font-size: 9.5px; padding: 4px 9px; white-space:nowrap; flex-shrink:0; }
  .course-kicker{ margin-top: 30px; }

  .all-products{
    min-height: auto;
    flex-direction: row; align-items:center; justify-content:space-between;
    padding: 18px 20px;
  }
  .all-products span:first-child{ font-size:15px; line-height:1.2; }
  .all-products .arrow-btn{ width:42px; height:42px; align-self:center !important; flex-shrink:0; }
  .all-products .arrow-btn svg{ width:18px; height:18px; }

  .about-dark .eyebrow{ display:none; }

  .section-title{ font-size: clamp(45px, 15.0vw, 68px); }
  /* "на программах" is glued together with a non-breaking space (so "на"
     never hangs alone at a line end) — but at this heading's regular
     mobile size that glued pair is wider than the screen, which pushed
     the WHOLE page 28px wider than the viewport and let it rubber-band
     scroll sideways (the white strip / "shaky" feel reported). Give this
     one heading a smaller size on narrow phones so the pair still fits. */
  #audience .section-title{ font-size: clamp(38px, 12.6vw, 68px); }
  /* belt-and-suspenders: never let any single glued run force the page
     itself wider than the viewport again. */
  .section-title{ overflow-wrap: break-word; }

  .founder-block{ position:relative; padding-left: 26px; margin-bottom:20px; }
  .founder-block h4{
    position:relative; font-size: 18px; text-transform:none; letter-spacing:-0.02em;
    color: var(--ink); font-weight:500; margin-bottom:8px;
  }
  .founder-block h4::before{
    content:"✱"; position:absolute; left:-26px; top:1px; font-size:0.82em; color: var(--ink);
  }
  .founder-block p{ max-width:none; }
}

/* ---------- mobile nav (hamburger) ---------- */
.burger{
  display:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--ink); background:transparent;
  align-items:center; justify-content:center; margin-left:auto;
  flex-shrink:0;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:16px; height:1.4px; background:var(--ink); position:relative; transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.burger span::before{ position:absolute; top:-5px; }
.burger span::after{ position:absolute; top:5px; }
.site-header.nav-open .burger span{ background:transparent; }
.site-header.nav-open .burger span::before{ transform: translateY(5px) rotate(45deg); }
.site-header.nav-open .burger span::after{ transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 640px){
  .main-nav{
    display:flex; flex-direction:column; gap:4px;
    position:fixed; left:16px; right:16px; top: var(--header-h);
    background: var(--paper); border-radius: var(--radius-m);
    padding: 10px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.18);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition: max-height .35s var(--ease), opacity .3s var(--ease);
  }
  .site-header.nav-open .main-nav{ max-height:320px; opacity:1; pointer-events:auto; }
  .main-nav a{ padding:12px 0; border-bottom:1px solid var(--card-line); font-size:15px; }
  .main-nav a:last-child{ border-bottom:none; }
  .burger{ display:flex; }
}