/* ============================================================
   ТРАЕКТОРИЯ РОСТА — единая дизайн-система
   Палитра построена на цвете логотипа #25443E
   Display: Spectral (тёплый интеллигентный серив, кириллица)
   Body: Manrope (геометрический гуманистический гротеск)
   Подпись бренда: «линия роста» — тонкая восходящая кривая
   ============================================================ */

:root{
  /* Цвет */
  --ivory:      #F7F4ED;
  --ivory-2:    #FBF9F4;
  --pearl:      #ECE6D9;
  --sage:       #C7D2C0;
  --sage-soft:  #DDE5D7;
  --mint:       #9FE3C4;
  --mint-soft:  #CBF0DF;
  --emerald:    #2F6B53;
  --emerald-hi: #3C835F;
  --logo:       #25443E;
  --emerald-deep:#173029;
  --gold:       #C19A5B;
  --gold-soft:  #E3CFA3;
  --ink:        #1E2C26;
  --ink-soft:   #4C5B53;
  --line:       rgba(37,68,62,.12);

  /* Стекло */
  --glass:      rgba(255,255,255,.55);
  --glass-brd:  rgba(255,255,255,.65);
  --glass-deep: rgba(255,255,255,.08);

  /* Тени */
  --shadow-sm:  0 2px 10px rgba(30,44,38,.06);
  --shadow-md:  0 18px 40px -18px rgba(30,44,38,.28);
  --shadow-lg:  0 40px 80px -30px rgba(23,48,41,.40);
  --glow:       0 0 60px -10px rgba(159,227,196,.55);

  /* Радиусы и ритм */
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 30px;
  --r-xl: 40px;
  --maxw: 1180px;
  --pad:  clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:"Manrope", system-ui, sans-serif;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.62;
  font-size:17px;
  font-weight:400;
  letter-spacing:.1px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }

/* ---------- Типографика ---------- */
h1,h2,h3,h4{
  font-family:"Spectral", Georgia, serif;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--ink);
}
.display{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  font-weight:500;
  line-height:1.02;
}
h2{ font-size:clamp(2rem, 4vw, 3.1rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.85rem); }
.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--ink-soft);
  font-weight:400;
  max-width:60ch;
}
.eyebrow{
  font-family:"Manrope", sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--emerald);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:1.5px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
em.accent{ font-style:italic; color:var(--emerald); }
strong{ font-weight:700; color:var(--ink); }

/* ---------- Раскладка ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px, 9vw, 130px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,90px); }
.section--pearl{ background:var(--pearl); }
.section--ivory2{ background:var(--ivory-2); }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.sec-head{ max-width:46rem; margin-bottom:clamp(34px,5vw,60px); }
.center.sec-head{ margin-inline:auto; }
.grid{ display:grid; gap:24px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.95em 1.6em; border-radius:999px;
  font-weight:600; font-size:.98rem; letter-spacing:.01em;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
  will-change:transform;
}
.btn svg{ width:1.05em; height:1.05em; }
.btn--primary{
  background:linear-gradient(135deg,var(--emerald-hi),var(--emerald) 60%,var(--logo));
  color:#fff; box-shadow:0 12px 28px -12px rgba(47,107,83,.7);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(47,107,83,.75), var(--glow); }
.btn--ghost{
  background:var(--glass); border:1px solid var(--line);
  color:var(--ink); backdrop-filter:blur(10px);
}
.btn--ghost:hover{ transform:translateY(-3px); border-color:var(--emerald); box-shadow:var(--shadow-md); }
.btn--gold{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#3a2d12; }
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -14px rgba(193,154,91,.6); }
.btn--light{ background:#fff; color:var(--emerald-deep); }
.btn--light:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.center .btn-row{ justify-content:center; }

/* ---------- Стеклянные карточки ---------- */
.card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
  position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%, rgba(159,227,196,.18), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:rgba(159,227,196,.7); }
.card:hover::after{ opacity:1; }
.card .ic{
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(135deg,var(--sage-soft),#fff);
  color:var(--emerald); box-shadow:var(--shadow-sm);
}
.card .ic svg{ width:26px; height:26px; }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:1rem; }
.card .tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}

/* Карточка-продукт со ссылкой */
a.card{ display:block; }
.card .more{ display:inline-flex; align-items:center; gap:.4em; margin-top:18px; color:var(--emerald); font-weight:600; font-size:.95rem; }
.card .more svg{ transition:transform .4s var(--ease); width:1em;height:1em; }
.card:hover .more svg{ transform:translateX(5px); }

/* ---------- Шапка / навигация ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad);
  transition:background .4s, box-shadow .4s, padding .4s;
}
.nav.scrolled{
  background:rgba(247,244,237,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--line);
  padding-block:10px;
}
.brand{ display:flex; align-items:center; gap:11px; font-family:"Spectral",serif; font-weight:600; font-size:1.18rem; }
.brand img{ width:38px; height:38px; }
.brand small{ display:block; font-family:"Manrope",sans-serif; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--emerald); font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a{ font-size:.95rem; font-weight:500; color:var(--ink); position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--emerald); transition:width .35s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; width:42px; height:42px; border-radius:12px; background:var(--glass); border:1px solid var(--line); place-items:center; }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.3s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:.3s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); }
.burger.open span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:clamp(130px,16vw,180px); padding-bottom:clamp(60px,8vw,110px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-1; will-change:transform; }
.hero-bg::before{
  content:""; position:absolute; width:60vw; height:60vw; max-width:740px; max-height:740px;
  right:-10vw; top:-8vw; border-radius:50%;
  background:radial-gradient(circle, rgba(159,227,196,.55), rgba(199,210,192,0) 65%);
  filter:blur(10px);
}
.hero-bg::after{
  content:""; position:absolute; left:-12vw; bottom:-14vw; width:46vw; height:46vw; max-width:520px;max-height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,207,163,.4), transparent 62%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero h1{ margin:18px 0 22px; }
.hero .lead{ margin-bottom:32px; }
.hero-trust{ margin-top:34px; display:flex; flex-wrap:wrap; gap:26px; align-items:center; color:var(--ink-soft); font-size:.9rem; }
.hero-trust b{ font-family:"Spectral",serif; font-size:1.5rem; color:var(--emerald); display:block; line-height:1; }
.hero-art{ position:relative; display:grid; place-items:center; }
.hero-art .halo{ position:absolute; width:96%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(159,227,196,.5), transparent 60%); filter:blur(8px); }
.hero-art img.mascot{ position:relative; width:min(80%,360px); filter:drop-shadow(0 30px 40px rgba(23,48,41,.25)); animation:float 7s ease-in-out infinite; }
.hero-art .glasscard{
  position:absolute; bottom:6%; left:-4%;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r);
  padding:14px 18px; backdrop-filter:blur(14px); box-shadow:var(--shadow-md);
  display:flex; gap:11px; align-items:center; max-width:230px;
  animation:float 7s ease-in-out infinite .6s;
}
.hero-art .glasscard .dot{ width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--mint),var(--emerald-hi));color:#fff;flex:none; }
.hero-art .glasscard small{ display:block; font-size:.74rem; line-height:1.35; color:var(--ink-soft); }
.hero-art .glasscard strong{ display:block; font-size:.92rem; margin-bottom:2px; }

@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }

/* ---------- Линия роста (подпись бренда) ---------- */
.growthline{ position:absolute; left:0; right:0; height:120px; pointer-events:none; z-index:0; overflow:hidden; }
.growthline svg{ width:100%; height:100%; }
.growthline path{ fill:none; stroke:url(#glGrad); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.growthline.drawn path{ animation:draw 2.2s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.growthline .node{ fill:var(--gold); opacity:0; }
.growthline.drawn .node{ animation:pop .5s var(--ease) forwards; }
.growthline.drawn .node.n2{ animation-delay:.7s; }
.growthline.drawn .node.n3{ animation-delay:1.3s; }
@keyframes pop{ from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }

/* ---------- Глубокая изумрудная секция ---------- */
.deep{ background:linear-gradient(160deg,var(--emerald-deep),var(--logo)); color:#EAF1EB; position:relative; overflow:hidden; }
.deep h1,.deep h2,.deep h3{ color:#fff; }
.deep .lead{ color:rgba(234,241,235,.82); }
.deep .eyebrow{ color:var(--mint); }
.deep .eyebrow::before{ background:linear-gradient(90deg,var(--gold),transparent); }
.deep::before{ content:""; position:absolute; width:50vw;height:50vw; right:-10%; top:-20%; border-radius:50%;
  background:radial-gradient(circle,rgba(159,227,196,.22),transparent 60%); }
.deep .card{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#EAF1EB; }
.deep .card h3{ color:#fff; } .deep .card p{ color:rgba(234,241,235,.78); }
.deep .card .ic{ background:rgba(255,255,255,.1); color:var(--mint); }

/* ---------- Список с галочками ---------- */
.ticks{ list-style:none; display:grid; gap:14px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); }
.ticks li::before{
  content:""; flex:none; width:24px;height:24px;border-radius:8px; margin-top:1px;
  background:linear-gradient(135deg,var(--mint),var(--emerald-hi));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/></svg>") center/15px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/></svg>") center/15px no-repeat;
}
.deep .ticks li{ color:rgba(234,241,235,.85); }

/* ---------- Шаги / нумерация ---------- */
.steps{ counter-reset:s; display:grid; gap:18px; }
.step{ display:flex; gap:20px; align-items:flex-start; }
.step .num{
  flex:none; width:48px;height:48px;border-radius:14px; display:grid;place-items:center;
  font-family:"Spectral",serif; font-size:1.3rem; color:var(--emerald);
  background:linear-gradient(135deg,var(--sage-soft),#fff); box-shadow:var(--shadow-sm);
}
.step h3{ font-size:1.2rem; margin-bottom:4px; }
.step p{ color:var(--ink-soft); font-size:1rem; }

/* ---------- Цитаты / отзывы ---------- */
.quote{ font-family:"Spectral",serif; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.4; color:var(--ink); }
.testi{ display:flex; gap:14px; align-items:center; margin-top:22px; }
.testi .av{ width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--sage),var(--emerald-hi)); display:grid;place-items:center;color:#fff;font-weight:700; }
.testi small{ display:block; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px; max-width:820px; margin-inline:auto; }
.faq-item{ background:var(--glass); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.faq-item.open{ border-color:rgba(159,227,196,.7); box-shadow:var(--shadow-sm); }
.faq-q{ width:100%; display:flex; justify-content:space-between; gap:16px; align-items:center; text-align:left; padding:20px 24px; font-weight:600; font-size:1.06rem; color:var(--ink); }
.faq-q .pm{ flex:none; width:26px;height:26px;border-radius:8px; display:grid;place-items:center; background:var(--sage-soft); color:var(--emerald); transition:transform .4s var(--ease), background .3s; font-size:1.2rem; line-height:1; }
.faq-item.open .pm{ transform:rotate(45deg); background:var(--emerald); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a > div{ padding:0 24px 22px; color:var(--ink-soft); }

/* ---------- Баннер CTA ---------- */
.cta-band{ position:relative; border-radius:var(--r-xl); overflow:hidden; padding:clamp(40px,6vw,72px); background:linear-gradient(150deg,var(--emerald-deep),var(--logo)); color:#fff; text-align:center; }
.cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% -10%, rgba(159,227,196,.25), transparent 60%); pointer-events:none; }
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; margin-bottom:14px; }
.cta-band p{ color:rgba(234,241,235,.85); max-width:52ch; margin:0 auto 28px; }

/* ---------- Декор баннера CTA (ауры, листья, Корешок) ---------- */
.cta-band .bg-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.cta-band .aura{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.6; animation:ctaAura 20s ease-in-out infinite alternate; will-change:transform; }
.cta-band .aura--mint{ background:radial-gradient(circle, rgba(159,227,196,.5), transparent 66%); }
.cta-band .aura--gold{ background:radial-gradient(circle, rgba(230,188,120,.42), transparent 66%); }
@keyframes ctaAura{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(46px,-34px) scale(1.16); } }
.cta-band .k-band-particles{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.cta-band .k-leaf{ position:absolute; bottom:-10%; opacity:.5; animation:ctaLeafRise linear infinite; }
@keyframes ctaLeafRise{ 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 10%{ opacity:.55; } 90%{ opacity:.35; } 100%{ transform:translateY(-320px) rotate(140deg); opacity:0; } }
.cta-band .k-band-peek{ position:absolute; left:-14px; bottom:-14px; width:110px; opacity:.94; animation:ctaFloat 6s ease-in-out infinite; filter:drop-shadow(0 14px 22px rgba(0,0,0,.4)); z-index:0; }
@keyframes ctaFloat{ 0%,100%{ transform:translateY(0) rotate(-.6deg); } 50%{ transform:translateY(-16px) rotate(.8deg); } }
@media (max-width:640px){ .cta-band .k-band-peek{ width:78px; left:-10px; bottom:-10px; opacity:.8; } }

/* ---------- Подвал ---------- */
.footer{ background:var(--emerald-deep); color:rgba(234,241,235,.78); padding-block:64px 30px; }
.footer .brand{ color:#fff; }
.footer .brand small{ color:var(--mint); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; }
.footer h4{ color:#fff; font-family:"Manrope",sans-serif; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.footer ul{ list-style:none; display:grid; gap:10px; }
.footer a{ color:rgba(234,241,235,.75); font-size:.95rem; transition:color .3s; }
.footer a:hover{ color:var(--mint); }
.footer p.note{ font-size:.92rem; max-width:34ch; margin-top:14px; }
.footer-bot{ border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:rgba(234,241,235,.6); }

/* ---------- Хлебные крошки / шапка раздела ---------- */
.pagehead{ padding-top:clamp(130px,15vw,170px); padding-bottom:clamp(30px,5vw,56px); position:relative; overflow:hidden; }
.crumbs{ font-size:.84rem; color:var(--ink-soft); margin-bottom:14px; }
.crumbs a:hover{ color:var(--emerald); }

/* ---------- Анимация появления ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.1s; }
[data-reveal][data-delay="2"]{ transition-delay:.2s; }
[data-reveal][data-delay="3"]{ transition-delay:.3s; }
[data-reveal][data-delay="4"]{ transition-delay:.4s; }

/* ---------- Утилиты ---------- */
.muted{ color:var(--ink-soft); }
.mw-sm{ max-width:38rem; } .mw-md{ max-width:52rem; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:48px; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--line); font-size:.82rem; font-weight:600; color:var(--emerald); }
.divider{ height:1px; background:var(--line); border:none; margin-block:40px; }

/* ---------- Адаптив ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero .lead{ margin-inline:auto; }
  .hero .btn-row,.hero-trust{ justify-content:center; }
  .hero-art{ order:-1; margin-bottom:10px; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav-links, .nav-cta .btn{ display:none; }
  .burger{ display:grid; }
  .nav-links{
    position:fixed; inset:64px 14px auto 14px; flex-direction:column; align-items:flex-start; gap:6px;
    background:rgba(247,244,237,.96); backdrop-filter:blur(20px); border:1px solid var(--line);
    border-radius:var(--r); padding:18px; box-shadow:var(--shadow-lg);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.35s var(--ease);
  }
  .nav-links.show{ display:flex; transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ width:100%; padding:10px 4px; border-bottom:1px solid var(--line); }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .step .num{ width:42px;height:42px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .growthline path{ stroke-dashoffset:0 !important; }
  .growthline .node{ opacity:1 !important; }
}

/* ============================================================
   v2 — ЖИВОЕ СТЕКЛО, КНИГА РОСТА, SOFT SKILLS, ПРОДАЮЩИЕ БЛОКИ
   Дополнение к базовой дизайн-системе. Подключается на всех
   страницах автоматически (styles.css общий).
   ============================================================ */

/* ---------- Прогресс прокрутки сверху ---------- */
.scrollbar-top{
  position:fixed; left:0; top:0; height:3px; width:0%;
  z-index:200; pointer-events:none; transform-origin:left center;
  background:linear-gradient(90deg,var(--gold),var(--emerald-hi) 55%,var(--mint));
  box-shadow:0 0 14px -2px rgba(159,227,196,.7);
  transition:width .12s linear;
}

/* ---------- Живая аврора в hero ---------- */
.hero-bg::before{ animation:drift1 22s var(--ease) infinite alternate; }
.hero-bg::after{ animation:drift2 26s var(--ease) infinite alternate; }
@keyframes drift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-5vw,4vw) scale(1.12); } }
@keyframes drift2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6vw,-3vw) scale(1.1); } }

/* мягкие парящие «шары» жидкого стекла — добавляются JS-ом в hero/deep */
.orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.5), rgba(159,227,196,.18) 45%, transparent 70%);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 8px 30px rgba(255,255,255,.35), 0 20px 50px -20px rgba(23,48,41,.25);
  animation:floaty 14s ease-in-out infinite;
}
.deep .orb{ background:radial-gradient(circle at 32% 30%, rgba(159,227,196,.35), rgba(159,227,196,.08) 50%, transparent 72%); border-color:rgba(255,255,255,.12); }
@keyframes floaty{ 0%,100%{ transform:translateY(0) translateX(0) } 50%{ transform:translateY(-26px) translateX(10px) } }

/* ---------- Карточки: усиленное «жидкое стекло» + блик ---------- */
.card{ transform-style:preserve-3d; }
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform:translateX(-120%); transition:transform .9s var(--ease); opacity:.0;
}
.card:hover::before{ transform:translateX(120%); opacity:.9; }
.card > *{ position:relative; z-index:2; }
.card .ic{ position:relative; z-index:2; }
/* верхняя кромка-«стекло» */
.card{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); }
.deep .card{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.12); }

/* наклон от курсора (включает JS через [data-tilt]) */
[data-tilt]{ transition:transform .25s var(--ease), box-shadow .5s var(--ease), border-color .4s; }

/* ---------- Кнопки: блик-проблеск ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; top:0; left:0; width:40%; height:100%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-180%) skewX(-18deg); transition:transform .8s var(--ease);
}
.btn:hover::after{ transform:translateX(320%) skewX(-18deg); }
.btn--gold::after{ background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); }

/* ---------- Анимированный градиентный текст ---------- */
.grad-text{
  background:linear-gradient(100deg,var(--emerald-hi),var(--gold) 45%,var(--emerald) 75%,var(--mint));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shift 8s ease infinite;
}
@keyframes shift{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }

/* ---------- Новые варианты появления ---------- */
[data-reveal].fade-l{ transform:translateX(-40px); }
[data-reveal].fade-r{ transform:translateX(40px); }
[data-reveal].zoom{ transform:scale(.9); }
[data-reveal].in.fade-l,[data-reveal].in.fade-r,[data-reveal].in.zoom{ transform:none; }

/* ---------- Бегущая строка (skills/чипы) ---------- */
.marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__row{ display:inline-flex; gap:14px; padding-block:6px; white-space:nowrap; animation:slide 28s linear infinite; }
.marquee:hover .marquee__row{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.chip{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(10px);
  font-weight:600; font-size:.95rem; color:var(--ink); box-shadow:var(--shadow-sm); }
.chip svg{ width:18px;height:18px; color:var(--emerald); }

/* ---------- Счётчики / статистика ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ text-align:center; padding:26px 16px; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); }
.stat__num{ font-family:"Spectral",serif; font-size:clamp(2rem,4vw,3rem); line-height:1; color:var(--emerald); font-weight:600; }
.stat__lbl{ display:block; margin-top:8px; font-size:.9rem; color:var(--ink-soft); }

/* ============================================================
   КНИГА РОСТА — раскрывается при прокрутке
   ============================================================ */
.bookwrap{ position:relative; height:560vh; }
.booksticky{ position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden; }
.booksticky .container{ display:grid; place-items:center; gap:26px; }
.book-eyebrow{ text-align:center; }
.book-eyebrow h2{ margin-top:8px; }
.book-eyebrow p{ color:var(--ink-soft); max-width:54ch; margin:10px auto 0; }

.flip{ width:100%; display:grid; place-items:center; }
.flip__book{
  position:relative; width:min(440px,86vw); aspect-ratio:1/1.32; margin-inline:auto;
  filter:drop-shadow(0 46px 60px rgba(23,48,41,.30));
}
.flip__leaves{ position:absolute; inset:0; z-index:2; }
.flip__base-left{ display:none; }
/* финальная страница — она лежит под всеми листами и открывается, когда их перелистали */
.flip__base-right{ position:absolute; inset:0; z-index:0; overflow:hidden;
  border-radius:6px 16px 16px 6px; border:1px solid var(--line);
  background:linear-gradient(150deg,#fff,var(--ivory-2));
  box-shadow:inset 12px 0 30px -22px rgba(23,48,41,.5); }
/* спина книги */
.flip__spine{ position:absolute; left:0; top:1%; width:11px; height:98%; z-index:6; pointer-events:none;
  background:linear-gradient(90deg,rgba(23,48,41,.30),rgba(23,48,41,.05)); border-radius:4px 0 0 4px; }

/* лист книги — односторонний, прячется когда повёрнут «от нас» (backface-visibility) */
.flip__page{
  position:absolute; inset:0; overflow:hidden;
  border-radius:6px 16px 16px 6px; border:1px solid var(--line); border-left:none;
  background:linear-gradient(150deg,#ffffff,var(--ivory-2));
  transform-origin:left center; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  will-change:transform; box-shadow:8px 0 22px -18px rgba(23,48,41,.5);
  display:flex; flex-direction:column; padding:clamp(20px,3vw,32px);
}
.flip__cover{ background:linear-gradient(150deg,var(--emerald-deep),var(--logo)); color:#fff;
  align-items:center; justify-content:center; text-align:center; border:none; }
.flip__cover .eyebrow{ color:var(--mint); justify-content:center; }
.flip__cover h3{ color:#fff; font-family:"Spectral",serif; font-weight:600; font-size:clamp(1.5rem,3.4vw,2.2rem); margin:12px 0 6px; }
.flip__cover img{ width:min(38%,128px); margin:6px auto 14px; filter:drop-shadow(0 16px 24px rgba(0,0,0,.4)); }
.flip__cover small{ color:rgba(234,241,235,.78); letter-spacing:.04em; }
.flip__cover .corner{ position:absolute; inset:14px; border:1px solid rgba(159,227,196,.3); border-radius:12px; pointer-events:none; }

.flip__tag{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.flip__page h4{ font-family:"Spectral",serif; font-weight:600; font-size:clamp(1.15rem,2.4vw,1.55rem); line-height:1.18; margin:8px 0 6px; color:var(--logo); }
.flip__page .sub{ color:var(--ink-soft); font-size:.92rem; line-height:1.5; }
.flip__src{ margin-top:auto; font-size:.74rem; color:var(--ink-soft); opacity:.75; padding-top:12px; }
.flip__pageno{ position:absolute; bottom:12px; right:16px; font-size:.72rem; color:var(--ink-soft); opacity:.55; }
.flip__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.flip__chips span{ font-size:.8rem; font-weight:600; padding:6px 11px; border-radius:999px;
  background:linear-gradient(135deg,var(--sage-soft),#fff); color:var(--emerald); border:1px solid var(--line); }
/* оглавление-список на странице «Содержание» */
.flip__toc{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.flip__toc li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink); line-height:1.35; }
.flip__toc b{ color:var(--gold); font-family:"Spectral",serif; font-weight:600; min-width:20px; }

.flip__final{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; height:100%; padding:clamp(18px,2.6vw,32px); }
.flip__final h4{ font-family:"Spectral",serif; font-weight:600; font-size:clamp(1.25rem,2.6vw,1.8rem); color:var(--logo); }
.flip__final p{ color:var(--ink-soft); font-size:.95rem; max-width:32ch; }

/* подсказка листать + точки */
.flip__hint{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-soft);
  padding:8px 16px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(10px); }
.flip__hint svg{ width:16px;height:16px; animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
.flip__dots{ display:flex; gap:9px; justify-content:center; }
.flip__dots i{ width:9px;height:9px;border-radius:50%; background:var(--line); transition:.3s; }
.flip__dots i.on{ background:var(--emerald); transform:scale(1.25); box-shadow:var(--glow); }

/* статичный фолбэк книги (узкие экраны и reduce-motion) */
.flip__static{ display:none; }
.flip__static .grid{ gap:18px; }

@media (max-width:760px){
  .bookwrap{ height:auto; }
  .booksticky{ position:static; height:auto; padding-block:10px; }
  .flip{ display:none; }
  .flip__static{ display:block; width:100%; }
}

/* ============================================================
   ВОЗРАСТНЫЕ КАТЕГОРИИ
   ============================================================ */
.ages__tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; }
.age-tab{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 22px; border-radius:var(--r); background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(12px); transition:.35s var(--ease); box-shadow:var(--shadow-sm); }
.age-tab b{ font-family:"Spectral",serif; font-size:1.25rem; color:var(--ink); }
.age-tab small{ font-size:.8rem; color:var(--ink-soft); }
.age-tab.on{ background:linear-gradient(135deg,var(--emerald-hi),var(--logo)); border-color:transparent; transform:translateY(-3px); box-shadow:var(--shadow-md),var(--glow); }
.age-tab.on b, .age-tab.on small{ color:#fff; }
.ages__panel{ display:none; animation:panelin .5s var(--ease); }
.ages__panel.on{ display:block; }
@keyframes panelin{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.age-card .ic{ margin-bottom:14px; }

/* ============================================================
   SOFT SKILLS — анимированные шкалы
   ============================================================ */
.skills{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 30px; }
.skill{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r);
  padding:20px 22px; backdrop-filter:blur(14px); box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); }
.skill__top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.skill__ic{ width:42px;height:42px;border-radius:12px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--mint),var(--emerald-hi)); color:#fff; }
.skill__ic svg{ width:22px;height:22px; }
.skill__name{ font-weight:700; font-size:1.02rem; }
.skill__pct{ margin-left:auto; font-family:"Spectral",serif; font-weight:600; color:var(--emerald); font-size:1.1rem; }
.skill__bar{ height:10px; border-radius:999px; background:var(--sage-soft); overflow:hidden; }
.skill__fill{ height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--emerald-hi) 60%,var(--mint));
  transition:width 1.4s var(--ease); position:relative; }
.skill__fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-100%); animation:sheen 2.6s var(--ease) infinite; }
@keyframes sheen{ to{ transform:translateX(220%) } }
.skill p{ color:var(--ink-soft); font-size:.9rem; margin-top:10px; }

/* кольцо-итог */
.skill-ring{ width:160px;height:160px; position:relative; margin-inline:auto; }
.skill-ring svg{ transform:rotate(-90deg); }
.skill-ring__bg{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:12; }
.skill-ring__val{ fill:none; stroke:url(#ringGrad); stroke-width:12; stroke-linecap:round;
  stroke-dasharray:440; stroke-dashoffset:440; transition:stroke-dashoffset 1.8s var(--ease); }
.skill-ring.in .skill-ring__val{ stroke-dashoffset:var(--off,120); }
.skill-ring__center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.skill-ring__center b{ font-family:"Spectral",serif; font-size:2rem; color:#fff; line-height:1; }
.skill-ring__center small{ color:rgba(234,241,235,.8); font-size:.78rem; }

/* ============================================================
   ТАРИФЫ / ПРОДАЮЩИЕ БЛОКИ
   ============================================================ */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.tier{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); padding:30px;
  background:var(--glass); border:1px solid var(--glass-brd); backdrop-filter:blur(16px);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.tier:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.tier--feat{ background:linear-gradient(160deg,var(--emerald-deep),var(--logo)); color:#fff; border-color:transparent; box-shadow:var(--shadow-lg); }
.tier--feat h3,.tier--feat .tier__price{ color:#fff; }
.tier--feat .ticks li{ color:rgba(234,241,235,.9); }
.tier__name{ font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tier--feat .tier__name{ color:var(--mint); }
.tier__price{ font-family:"Spectral",serif; font-size:2.2rem; font-weight:600; margin:8px 0 2px; }
.tier__price small{ font-family:"Manrope",sans-serif; font-size:.9rem; font-weight:500; color:var(--ink-soft); }
.tier--feat .tier__price small{ color:rgba(234,241,235,.7); }
.tier .ticks{ margin:18px 0 24px; }
.tier .btn{ margin-top:auto; }
.ribbon{ position:absolute; top:18px; right:-34px; transform:rotate(45deg); background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#3a2d12; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 40px; box-shadow:var(--shadow-sm); }

/* отзывы */
.voices{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.voice{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-lg); padding:26px;
  backdrop-filter:blur(14px); box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); }
.voice .stars{ color:var(--gold); letter-spacing:2px; font-size:1rem; margin-bottom:12px; }
.voice p{ color:var(--ink); font-size:1rem; }
.voice .testi{ margin-top:18px; }

/* гарантия / безопасно */
.guarantee{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center;
  padding:24px 30px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px); box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); }
.guarantee .seal{ width:58px;height:58px;border-radius:16px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--mint),var(--emerald-hi)); color:#fff; }
.guarantee p{ margin:0; color:var(--ink-soft); max-width:56ch; }
.guarantee strong{ color:var(--ink); }

/* статья (блог) */
.article{ max-width:760px; margin-inline:auto; }
.article p{ margin-bottom:18px; color:var(--ink); }
.article h2{ margin:38px 0 14px; }
.article h3{ margin:26px 0 10px; }
.article ul{ margin:0 0 18px 0; padding-left:0; list-style:none; display:grid; gap:12px; }
.article ul li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); }
.article ul li::before{ content:""; flex:none; width:22px;height:22px;border-radius:7px; margin-top:2px;
  background:linear-gradient(135deg,var(--mint),var(--emerald-hi));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/></svg>") center/13px no-repeat; }
.article blockquote{ margin:24px 0; padding:20px 26px; border-left:3px solid var(--emerald);
  background:var(--glass); border-radius:0 var(--r) var(--r) 0; font-family:"Spectral",serif; font-style:italic; font-size:1.18rem; color:var(--ink); }
.article .meta{ display:flex; gap:16px; flex-wrap:wrap; color:var(--ink-soft); font-size:.88rem; margin-bottom:6px; }
.article .key-take{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-lg); padding:24px 28px; backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); margin:30px 0; }
.article .key-take h3{ margin-top:0; }
.article .ai-note{ margin:26px 0; padding:16px 22px; border-radius:var(--r); background:rgba(159,227,196,.14); border:1px dashed rgba(47,107,83,.3); color:var(--ink-soft); font-size:.94rem; }
.article .ai-note strong{ color:var(--ink); }

/* ---------- Атмосфера страницы статьи (визуально выделяет блог среди сайта) ----------
   Колонка чтения — 760px по центру, то есть ±380px от середины экрана.
   Все световые пятна закреплены за calc(50% + 420px), с зазором 40px до текста,
   а дрейф анимации направлен только наружу и по вертикали. Поэтому ни в одной
   фазе пятно не может оказаться под текстом. */
body.article-page{ position:relative; }
.article-atmosphere{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.article-atmosphere::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 620px at -8% -14%, rgba(159,227,196,.14), transparent 62%),
    radial-gradient(820px 580px at 108% 2%, rgba(227,207,163,.13), transparent 62%),
    var(--ivory);
}
.article-atmosphere span{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.85; will-change:transform;
}
/* левое поле */
.article-atmosphere span:nth-child(1){
  right:calc(50% + 420px); top:-14vh;
  width:clamp(260px,30vw,520px); height:clamp(260px,30vw,520px);
  background:radial-gradient(circle, rgba(159,227,196,.55), transparent 68%);
  animation:atmDriftL1 34s var(--ease) infinite alternate;
}
.article-atmosphere span:nth-child(3){
  right:calc(50% + 440px); top:52vh;
  width:clamp(240px,27vw,460px); height:clamp(240px,27vw,460px);
  background:radial-gradient(circle, rgba(227,207,163,.42), transparent 66%);
  animation:atmDriftL2 40s var(--ease) infinite alternate;
}
/* правое поле */
.article-atmosphere span:nth-child(2){
  left:calc(50% + 420px); top:6vh;
  width:clamp(250px,28vw,480px); height:clamp(250px,28vw,480px);
  background:radial-gradient(circle, rgba(227,207,163,.48), transparent 66%);
  animation:atmDriftR1 36s var(--ease) infinite alternate;
}
.article-atmosphere span:nth-child(4){
  left:calc(50% + 440px); bottom:-12vh;
  width:clamp(240px,26vw,440px); height:clamp(240px,26vw,440px);
  background:radial-gradient(circle, rgba(159,227,196,.42), transparent 66%);
  animation:atmDriftR2 44s var(--ease) infinite alternate;
}
@keyframes atmDriftL1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-2.5vw,6vh) scale(1.07); } }
@keyframes atmDriftL2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-3vw,-5vh) scale(1.05); } }
@keyframes atmDriftR1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(2.5vw,5vh) scale(1.07); } }
@keyframes atmDriftR2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(3vw,-6vh) scale(1.05); } }
/* Узкие экраны: боковых полей нет — уводим пятна за края,
   внутрь попадает только мягкое свечение по кромке. */
@media (max-width:1100px){
  .article-atmosphere span{ filter:blur(64px); opacity:.7; }
  .article-atmosphere span:nth-child(1){ right:auto; left:-20vw; top:-10vh; }
  .article-atmosphere span:nth-child(3){ right:auto; left:-24vw; top:54vh; }
  .article-atmosphere span:nth-child(2){ left:auto; right:-20vw; top:8vh; }
  .article-atmosphere span:nth-child(4){ left:auto; right:-22vw; bottom:-10vh; }
}
@media (max-width:640px){ .article-atmosphere span{ filter:blur(48px); opacity:.6; } }
@media (prefers-reduced-motion:reduce){ .article-atmosphere span{ animation:none; } }

/* ---------- Адаптив дополнения ---------- */
@media (max-width:980px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .voices{ grid-template-columns:1fr; }
  .skills{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Анимированный компас «природного ритма» ---------- */
.rhythm-compass{ position:relative; width:220px; height:220px; margin-inline:auto; flex:none; }
.rhythm-compass--sm{ width:118px; height:118px; }
.rhythm-compass--lg{ width:360px; height:360px; }
.rc-glow{ position:absolute; inset:-22%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(159,227,196,.4), rgba(230,188,120,.2) 55%, transparent 74%);
  filter:blur(22px); animation:rcGlowPulse 6s ease-in-out infinite; }
.rc-svg{ position:relative; width:100%; height:100%; overflow:visible; display:block; }
.rc-ring-outer{ fill:none; stroke:rgba(37,68,62,.2); stroke-width:1; stroke-dasharray:1.5 7; }
.rc-star{ fill:var(--gold); opacity:.85; }
.rc-star.n{ animation:rcTwinkle 3.4s ease-in-out infinite; }
.rc-star.e{ animation:rcTwinkle 3.4s ease-in-out infinite .8s; }
.rc-star.s{ animation:rcTwinkle 3.4s ease-in-out infinite 1.6s; }
.rc-star.w{ animation:rcTwinkle 3.4s ease-in-out infinite 2.4s; }
.rc-rotor{ transform-origin:120px 120px; animation:rcSpin 90s linear infinite; }
.rc-ring-inner{ fill:none; stroke:rgba(47,107,83,.4); stroke-width:1.3; stroke-dasharray:1 10.5; }
.rc-chip{ fill:var(--ivory-2); stroke:rgba(37,68,62,.14); stroke-width:1; filter:drop-shadow(0 4px 9px rgba(30,44,38,.2)); }
.rc-counter{ animation:rcCounterSpin 90s linear infinite; }
.rc-ico{ stroke:var(--emerald); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rc-atmo{ opacity:.55; }
.rc-core{ animation:rcPulse 4.5s ease-in-out infinite; transform-origin:120px 120px; }
.rc-core-bg{ fill:var(--ivory-2); filter:drop-shadow(0 10px 22px rgba(30,44,38,.22)); }
.rc-leaf{ fill:none; stroke:var(--emerald); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes rcSpin{ to{ transform:rotate(360deg); } }
@keyframes rcCounterSpin{ to{ transform:rotate(-360deg); } }
@keyframes rcGlowPulse{ 0%,100%{ opacity:.65; transform:scale(1); } 50%{ opacity:1; transform:scale(1.07); } }
@keyframes rcPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@keyframes rcTwinkle{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
@media (max-width:640px){ .rhythm-compass--lg{ width:260px; height:260px; } }

/* ---------- Стилизованный превью карты ритма (rmap) ---------- */
.rmap-card{ display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,4vw,40px); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,4vw,44px);
  box-shadow:var(--shadow-lg); max-width:840px; margin-inline:auto; }
.rmap-portrait{ position:relative; width:180px; margin-inline:auto; }
.rmap-ring-svg{ width:100%; height:auto; overflow:visible; display:block; }
.rmap-glow{ animation:rcGlowPulse 6s ease-in-out infinite; }
.rmap-ring-out{ fill:none; stroke:rgba(37,68,62,.18); stroke-width:1.4; }
.rmap-ring-in{ fill:none; stroke:rgba(47,107,83,.35); stroke-width:1.2; }
.rmap-chip{ fill:var(--ivory-2); stroke:rgba(37,68,62,.12); stroke-width:1; filter:drop-shadow(0 4px 8px rgba(30,44,38,.18)); }
.rmap-ic{ stroke:var(--emerald); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rmap-ic--star{ fill:var(--gold); stroke:none; }
.rmap-ic--heart{ fill:#C97B6B; stroke:none; }
.rmap-core-bg{ fill:var(--ivory-2); filter:drop-shadow(0 6px 16px rgba(30,44,38,.16)); }
.rmap-name{ text-align:center; font-family:"Spectral",serif; font-weight:600; font-size:1.1rem; color:var(--ink); margin-top:14px; }
.rmap-name small{ display:block; font-family:"Manrope",sans-serif; font-weight:400; font-size:.76rem; color:var(--ink-soft); margin-top:5px; }
.rmap-stats{ display:grid; gap:20px; }
.rmap-stat-label{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.86rem; color:var(--ink); margin-bottom:9px; }
.rmap-stat-label svg{ width:16px;height:16px; color:var(--pine,var(--emerald)); flex:none; }
.rmap-wave{ width:100%; height:30px; display:block; }
.rmap-wave path{ fill:none; stroke:var(--emerald); stroke-width:2; stroke-linecap:round; }
.rmap-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.rmap-pill{ font-size:.78rem; padding:5px 12px; border-radius:100px; background:rgba(159,227,196,.18); color:var(--emerald); border:1px solid rgba(47,107,83,.16); }
.rmap-bars{ display:grid; gap:9px; }
.rmap-bar-row{ display:grid; grid-template-columns:112px 1fr; align-items:center; gap:10px; }
.rmap-bar-row small{ font-size:.78rem; color:var(--ink-soft); }
.rmap-bar{ height:6px; border-radius:100px; background:rgba(37,68,62,.08); overflow:hidden; }
.rmap-bar i{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--mint),var(--emerald)); }
@media (max-width:760px){
  .rmap-card{ grid-template-columns:1fr; text-align:center; }
  .rmap-stat-label{ justify-content:center; }
  .rmap-bar-row{ grid-template-columns:96px 1fr; }
}

/* ---------- Фон-пейзаж «путь» для блока шагов ---------- */
.section--journey{ position:relative; overflow:hidden; }
.section--journey .container{ position:relative; z-index:1; }
.journey-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7; }
.journey-bg svg{ width:100%; height:100%; display:block; }
.journey-hill{ fill:rgba(159,227,196,.24); }
.journey-hill--mid{ fill:rgba(201,162,94,.13); }
.journey-path{ fill:none; stroke:#F7F4ED; stroke-width:2.6; stroke-dasharray:1 9; stroke-linecap:round; opacity:.85; }
.journey-tree line{ stroke:rgba(47,107,83,.35); stroke-width:2; }
.journey-tree circle{ fill:rgba(47,107,83,.2); }
.journey-walker{ fill:rgba(193,154,91,.6); animation:journeyWalk 14s ease-in-out infinite; }
.journey-spark{ fill:var(--gold); opacity:0; animation:journeySpark 5s ease-in-out infinite; }
@keyframes journeyWalk{ 0%,100%{ transform:translate(330px,178px) translateY(0); } 50%{ transform:translate(362px,173px) translateY(-2px); } }
@keyframes journeySpark{ 0%,100%{ opacity:0; } 50%{ opacity:.85; } }
@media (max-width:760px){ .journey-bg{ opacity:.38; } }


/* ---------- Компас «портрет ребёнка» (карта природного ритма, hero) ---------- */
.nc-ring-outer{ fill:none; stroke:rgba(30,90,76,.22); stroke-width:1; stroke-dasharray:1.5 7; }
.nc-star{ fill:var(--gold); opacity:.85; }
.nc-star.n{ animation:ncTwinkle 3.6s ease-in-out infinite; }
.nc-star.e{ animation:ncTwinkle 3.6s ease-in-out infinite .9s; }
.nc-star.s{ animation:ncTwinkle 3.6s ease-in-out infinite 1.8s; }
.nc-star.w{ animation:ncTwinkle 3.6s ease-in-out infinite 2.7s; }
.nc-atmo{ opacity:.55; animation:ncAtmoPulse 6s ease-in-out infinite; }
.nc-rotor{ transform-origin:120px 120px; animation:ncSpin 100s linear infinite; }
.nc-ring-inner{ fill:none; stroke:rgba(47,107,83,.38); stroke-width:1.3; stroke-dasharray:1 10.5; }
.nc-chip{ fill:var(--ivory-2); stroke:rgba(37,68,62,.14); stroke-width:1; filter:drop-shadow(0 4px 9px rgba(30,44,38,.2)); }
.nc-counter{ animation:ncCounterSpin 100s linear infinite; }
.nc-ico{ stroke:var(--emerald); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nc-core{ animation:ncCorePulse 5s ease-in-out infinite; transform-origin:120px 120px; }
.nc-core-ring{ fill:none; stroke:rgba(37,68,62,.16); stroke-width:1.5; }
.nc-water{ fill:rgba(47,107,83,.26); }
.nc-ripple{ fill:none; stroke:rgba(251,249,244,.6); stroke-width:1.3; animation:ncRippleDrift 5s ease-in-out infinite; }
.nc-ripple.n2{ animation-delay:.6s; opacity:.6; }
.nc-leaf{ fill:none; stroke:var(--emerald); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transform-origin:40px 22px; animation:ncLeafSway 4.5s ease-in-out infinite; }
.nc-ribbon{ fill:none; stroke-width:10; stroke-linecap:round; opacity:.32; animation:ncRibbonDrift 14s ease-in-out infinite alternate; }
.nc-ribbon.right{ animation-delay:-4s; }
@keyframes ncSpin{ to{ transform:rotate(360deg); } }
@keyframes ncCounterSpin{ to{ transform:rotate(-360deg); } }
@keyframes ncTwinkle{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
@keyframes ncAtmoPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.7; } }
@keyframes ncCorePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes ncRippleDrift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }
@keyframes ncLeafSway{ 0%,100%{ transform:rotate(-12deg); } 50%{ transform:rotate(-2deg); } }
@keyframes ncRibbonDrift{ 0%{ transform:translate(0,0); opacity:.24; } 50%{ transform:translate(6px,-6px); opacity:.4; } 100%{ transform:translate(-4px,4px); opacity:.28; } }
.nc-soon-badge{
  position:absolute; top:2%; right:2%; z-index:3; display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:100px; font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--emerald-deep);
  background:rgba(251,249,244,.86); border:1px solid rgba(37,68,62,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 26px -14px rgba(13,35,29,.32);
  animation:ncBadgeFloat 4s ease-in-out infinite;
}
.nc-soon-badge i{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(193,154,91,.22); }
@keyframes ncBadgeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@media (max-width:640px){ .nc-soon-badge{ font-size:.72rem; padding:7px 13px; top:0; right:0; } }

@media (prefers-reduced-motion:reduce){
  .flip{ display:none !important; }
  .flip__static{ display:block !important; }
  .skill__fill{ transition:none; }
  .marquee__row{ animation:none; }
  .orb{ animation:none; }
  .hero-bg::before,.hero-bg::after{ animation:none; }
}