/* ===================================================================
   Практикум «Стратегический менеджмент для жизни» — sellmore-strategy.ru
   Каркас собран из дизайн-системы Sellmore (боевые стили консалтинга).
   Арт-мотив здесь свой: светящийся шар и звёзды. Ленты не используем.
   =================================================================== */
@import url("tokens.css");

@font-face{font-family:'Inter';font-weight:300 700;font-style:normal;font-display:swap;
  src:url(../assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-weight:300 700;font-style:normal;font-display:swap;
  src:url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Tecla';font-weight:400;font-style:normal;font-display:swap;src:url(../assets/fonts/Tecla.woff) format('woff');}
@font-face{font-family:'Tecla';font-weight:700;font-style:normal;font-display:swap;src:url(../assets/fonts/Tecla-Bold.woff) format('woff');}

*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-text);-webkit-font-smoothing:antialiased;background:var(--paper);color:var(--ink);
  overflow-x:hidden;}            /* страховка от горизонтального сдвига на iOS Safari */
img{max-width:100%;display:block;}
a{color:inherit;}

/* ============================== ГЕРОЙ ============================== */
/* svh учитывает адресную строку Safari; на 94vh низ героя уезжал под панель. */
.hero{position:relative;min-height:min(94vh,780px);min-height:min(94svh,780px);
  display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(1200px 700px at 74% 52%,rgba(0,60,110,.35),transparent 62%),var(--ink-grad-dark);
  color:#fff;}
.hero canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;}

.nav{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;max-width:1520px;margin:0 auto;padding:22px 56px;}
.nav .logo img{height:38px;}
.nav .menu{display:flex;gap:24px;font-size:14.5px;margin-left:auto;}
.nav .menu a{text-decoration:none;opacity:.82;transition:opacity .2s;}
.nav .menu a:hover{opacity:1;}
.nav .actions{display:flex;align-items:center;gap:12px;}

.burger{display:none;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:10px;}
.burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.menu-mobile{display:none;}

/* Сетка героя: текст держит левую колонку, планетная система живёт в правой */
.hgrid{position:relative;z-index:3;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;width:100%;max-width:1440px;margin:0 auto;padding:0 56px 48px;}
.htext{max-width:34rem;}
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;font-weight:600;
  color:var(--blue);margin-bottom:18px;}
.qtext{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.7vw,var(--t-hero));
  line-height:var(--lh-hero);margin-bottom:20px;}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:#cdd8e6;margin-bottom:26px;}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}

/* ============================== КНОПКИ ============================== */
.btn{font-size:15px;font-weight:600;border-radius:var(--r-btn);padding:13px 22px;border:2px solid transparent;
  text-decoration:none;display:inline-block;line-height:1;white-space:nowrap;color:#fff;cursor:pointer;
  transition:transform var(--dur-hover) var(--ease),box-shadow var(--dur-hover),background var(--dur-hover),
    border-color var(--dur-hover),filter var(--dur-hover);}
.btn-primary{background:var(--blue);}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:var(--sh-btn);}
.btn-sm{padding:10px 16px;font-size:13.5px;}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.42);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* ============================== СЕКЦИИ ============================== */
.sec{position:relative;max-width:var(--wrap-max);margin:0 auto;padding:var(--pad-sec);overflow:hidden;}
.kicker{font-size:var(--t-kicker);letter-spacing:var(--tr-kicker);text-transform:uppercase;font-weight:700;
  color:var(--blue);margin-bottom:18px;}
.h2{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);line-height:var(--lh-h2);
  color:var(--ink);margin-bottom:16px;max-width:1000px;}
.sec-sub{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--slate);max-width:1040px;}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--pad-card);
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card);}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-card);}
.takeaway{background:var(--dark);border-radius:var(--r-card);padding:32px 42px;position:relative;overflow:hidden;margin-top:40px;}
.takeaway::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blue);}
.takeaway p{font-size:20px;line-height:1.5;color:#c3d0e0;max-width:1180px;}
.takeaway b{color:#fff;font-weight:700;}

/* тёмная секция: здесь живут звёзды и шары */
.anchor-dark{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(900px 520px at 78% 30%,rgba(0,60,110,.30),transparent 62%),var(--ink-grad-dark);}
.anchor-dark canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;}
.stars{pointer-events:none;}
.warp{pointer-events:none;}
.anchor-dark .inner{position:relative;z-index:3;max-width:var(--wrap-max);margin:0 auto;padding:80px 90px;}
.anchor-dark .h2{color:#fff;}
.anchor-dark .sec-sub,.anchor-dark p{color:#c3d0e0;}
.anchor-dark .kicker{color:#4fb6e8;}

/* декоративные шары: сквозной мотив сайта */
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:2;
  animation:orbFloat 9s ease-in-out infinite alternate;}
.orb--cyan{background:radial-gradient(circle at 34% 30%,#9df4ff,#1b7fd4);box-shadow:0 0 40px -6px rgba(0,180,255,.55);}
.orb--violet{background:radial-gradient(circle at 34% 30%,#d3b6ff,#5b3fc4);box-shadow:0 0 40px -6px rgba(140,110,255,.5);}
.orb--mint{background:radial-gradient(circle at 34% 30%,#a8f5e6,#12907f);box-shadow:0 0 40px -6px rgba(60,220,190,.5);}
.orb--rose{background:radial-gradient(circle at 34% 30%,#ffc4e4,#b0428c);box-shadow:0 0 40px -6px rgba(255,140,200,.45);}
.orb--sm{width:14px;height:14px;} .orb--md{width:26px;height:26px;} .orb--lg{width:44px;height:44px;}
@keyframes orbFloat{from{transform:translateY(-10px)}to{transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none;}}

/* ---------- Сетки и типовые блоки экранов ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-cols);margin-top:26px;}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px;}
.cname{font-family:var(--font-display);font-weight:700;font-size:var(--t-card);color:var(--ink);margin-bottom:12px;}
.card p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
.card--feat{border-color:rgba(0,136,204,.45);box-shadow:var(--sh-accent);position:relative;overflow:hidden;}
.card--feat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--irid);
  background-size:100% 260%;animation:shimmerV 6.5s ease-in-out infinite;}
.blist{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:16px;}
.blist li{position:relative;padding-left:26px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
.blist li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:2px;border-radius:2px;background:#b9b3a6;}
.blist--blue li{color:#2e3646;}
.blist--blue li::before{background:var(--blue);width:14px;}
.anchor-dark .blist li{color:#c3d0e0;}
.anchor-dark .blist li::before{background:var(--blue);}

/* маркер-шар: сквозной мотив сайта вместо точки в списке */
.dotlist{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:20px;}
.dotlist li{position:relative;padding-left:34px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
.dotlist li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#7ff6ff,#1b7fd4);box-shadow:0 0 12px -2px rgba(0,136,204,.8);}
.dotlist li:nth-child(2)::before{background:radial-gradient(circle at 34% 32%,#b98cff,#5b3fc4);}
.dotlist li:nth-child(3)::before{background:radial-gradient(circle at 34% 32%,#5fe3d0,#12907f);}
.dotlist li:nth-child(4)::before{background:radial-gradient(circle at 34% 32%,#ff9ad5,#b0428c);}
.dotlist li:nth-child(5)::before{background:radial-gradient(circle at 34% 32%,#eaf7ff,#3f7fbf);}
.anchor-dark .dotlist li{color:#cdd8e6;}

/* шар как номер шага */
.steps{display:grid;gap:22px;margin-top:28px;}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start;}
.step-orb{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:20px;color:#04212f;
  background:radial-gradient(circle at 34% 30%,#9df4ff,#0088CC 62%,#0a5f95);
  box-shadow:0 0 26px -6px rgba(0,136,204,.9);}
.step-name{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);color:var(--ink);margin-bottom:6px;}
.anchor-dark .step-name{color:#fff;}
.step p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
.anchor-dark .step p{color:#c3d0e0;}

/* цитата и отзыв */
.quote{position:relative;background:var(--card);border:1px solid var(--hair);border-left:4px solid var(--blue);
  border-radius:14px;padding:24px 28px;font-size:18px;line-height:1.55;color:#2e3646;}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:15px;color:var(--slate);}
.anchor-dark .quote{background:rgba(0,136,204,.10);border-color:rgba(34,166,230,.34);color:#dbe6f2;}
.anchor-dark .quote cite{color:#9fb4c9;}

/* пилюли и капительные метки */
.pill{display:inline-block;font-size:13.5px;font-weight:600;padding:5px 14px;border-radius:var(--r-chip);
  background:#e1f0fb;color:#0a6fb0;white-space:nowrap;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chips span{font-size:13.5px;color:#39424f;background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-chip);padding:6px 13px;}

/* ---------- Экран «Как работает метод»: четыре группы инструментов ---------- */
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;}
.tool{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card-sm);padding:24px 24px 26px;}
.tool-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.tool-name{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);}
.tool ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.tool li{font-size:15.5px;line-height:1.4;color:var(--slate);}
.orb-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:#04212f;
  background:radial-gradient(circle at 34% 30%,#9df4ff,#0088CC 62%,#0a5f95);box-shadow:0 0 18px -4px rgba(0,136,204,.85);}
.orb-num--violet{background:radial-gradient(circle at 34% 30%,#d3b6ff,#7a5ad6 62%,#4a2fa8);}
.orb-num--mint{background:radial-gradient(circle at 34% 30%,#a8f5e6,#22c3a8 62%,#12907f);}
.orb-num--rose{background:radial-gradient(circle at 34% 30%,#ffc4e4,#e06aa8 62%,#b0428c);}

/* ---------- Две колонки сравнения (надстройка, трансформация, кому подходит) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:30px;align-items:start;}
.compare h3{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);margin-bottom:14px;color:var(--ink);}
.anchor-dark .compare h3{color:#fff;}
.col-head{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:16px;}
.col-head--now{color:#8b93a1;}
.col-head--after{color:var(--blue);}
.anchor-dark .col-head--after{color:#4fb6e8;}
.plain-list{list-style:none;display:flex;flex-direction:column;gap:13px;}
.plain-list li{font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
.anchor-dark .plain-list li{color:#9fb0c4;}
.plain-list--yes li{color:#2e3646;position:relative;padding-left:28px;}
.plain-list--yes li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:2px;border-radius:2px;
  background:var(--blue);}
.anchor-dark .plain-list--yes li{color:#dbe6f2;}

/* ---------- Кому подходит: две судьбы одного человека ----------
   Слева те, кто выйдет на орбиту: шары разгораются и растут к низу списка.
   Справа те, кто останется на полу: шары погасшие, плоские, лежат. */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px;align-items:stretch;}
.fit{display:flex;flex-direction:column;}
.fit .fit-note{margin-top:auto;padding-top:22px;}
.fit{position:relative;border-radius:var(--r-plate);padding:32px 34px 34px;
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card);}
/* карточке «не ваше» нужен воздух за краями: шар выкатывается и падает вниз */
.fit--no{overflow:visible;}
.rollaway{position:absolute;left:0;top:-60px;width:calc(100% + 110px);height:calc(100% + 230px);
  pointer-events:none;z-index:4;}
/* секции нужен запас снизу: шар падает за карточку, прыгает и остаётся в кадре,
   иначе его срежет overflow:hidden самой секции */
#komu{padding-bottom:215px;}
@media (max-width:860px){#komu{padding-bottom:170px;}}
/* Обе карточки равны по весу: белый фон, та же тень, тот же текст.
   Отличается только направление разговора, а не «качество» человека. */
.fit{background:var(--card);border:1px solid var(--hair);box-shadow:var(--sh-card);}
.fit:hover{transform:translateY(-5px);box-shadow:0 36px 74px -40px rgba(10,60,110,.45);}
.fit--yes{border-color:rgba(0,136,204,.32);}
.fit-head{position:relative;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  margin-bottom:20px;}
.fit--yes .fit-head{color:var(--blue);}
.fit--no .fit-head{color:var(--slate);}
.fitlist{position:relative;list-style:none;display:flex;flex-direction:column;gap:16px;}
.fitlist li{position:relative;padding-left:34px;font-size:var(--t-body);line-height:var(--lh-body);color:#2e3646;}
.fitlist li::before{content:"";position:absolute;left:0;}
/* Правило маркеров на всём сайте:
   шар ставим только там, где перечисляется состав продукта («что входит»).
   Во всех остальных списках маркер один: короткое тире.
   Здесь обе стороны равны и отличаются только цветом тире. */
.fitlist li::before{width:14px;height:2px;top:13px;border-radius:2px;}
.fit--yes .fitlist li::before{background:var(--blue);}
.fit--no .fitlist li::before{background:#b9b3a6;}
.fit-note{margin-top:22px;font-size:14.5px;line-height:1.5;color:var(--slate);}
.fit--yes .fit-note{color:var(--blue-deep);}

/* ---------- Автор ---------- */
.author{display:grid;grid-template-columns:380px minmax(0,1fr);gap:48px;margin-top:28px;align-items:start;}
/* Фигура автора на орбите: часть кольца проходит за спиной, часть перед ней */
.orbit-figure{position:relative;}
.author-photo{position:relative;z-index:2;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r-card);box-shadow:0 34px 74px -34px rgba(10,40,80,.55);}
.ring{position:absolute;left:-24%;top:-12%;width:148%;height:124%;pointer-events:none;display:block;}
.ring--back{z-index:1;}
.ring--front{z-index:3;}
.author-name{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--ink);margin-bottom:12px;}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;}
.num b{display:block;font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--blue);line-height:1;}
.num span{display:block;font-size:15px;color:var(--slate);margin-top:8px;}

/* ---------- Отзывы: выпускники уже на орбите ---------- */
.sec--risen{position:relative;}
.sec--risen .risen{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;}
.sec--risen > *:not(.risen){position:relative;z-index:1;}

.tcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px;}
.tcard{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:26px 30px 28px;
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card),border-color var(--dur-card);}
.tcard:hover{transform:translateY(-5px);border-color:rgba(0,136,204,.35);box-shadow:var(--sh-card);}
.tcard p{font-size:16px;line-height:1.6;color:#2e3646;}
.thead{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.tavatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:19px;color:#04212f;
  background:radial-gradient(circle at 34% 30%,#9df4ff,#0088CC 62%,#0a5f95);
  box-shadow:0 0 24px -6px rgba(0,136,204,.95);}
.tcard:nth-child(2) .tavatar{background:radial-gradient(circle at 34% 30%,#d3b6ff,#7a5ad6 62%,#4a2fa8);box-shadow:0 0 24px -6px rgba(140,110,255,.9);}
.tcard:nth-child(3) .tavatar{background:radial-gradient(circle at 34% 30%,#a8f5e6,#22c3a8 62%,#12907f);box-shadow:0 0 24px -6px rgba(60,220,190,.85);}
.tcard:nth-child(4) .tavatar{background:radial-gradient(circle at 34% 30%,#ffc4e4,#e06aa8 62%,#b0428c);box-shadow:0 0 24px -6px rgba(255,140,200,.85);}
.tname{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.2;}
.trole{font-size:14px;color:var(--slate);margin-top:3px;}

/* ---------- Два пути: практикум и консультация ----------
   Оба варианта равноправны по структуре: цена, состав, действие.
   Разница в весе: главный путь акцентирован, малый шаг спокойнее. */
.plans{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;margin-top:34px;align-items:stretch;}
.plan-card{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--r-plate);padding:38px 40px 36px;overflow:hidden;
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card);}
.plan-card:hover{transform:translateY(-5px);box-shadow:var(--sh-card);}
.plan-card--main{border-color:rgba(0,136,204,.42);box-shadow:var(--sh-accent);}
.plan-card--main::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--irid);
  background-size:220% 100%;animation:shimmer 8s ease-in-out infinite;}
.plan-label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#95907f;
  margin-bottom:14px;}
.plan-price{font-family:var(--font-display);font-weight:700;line-height:1;color:var(--ink);margin-bottom:10px;}
.plan-card--main .plan-price{font-size:clamp(38px,4vw,52px);}
.plan-card--step .plan-price{font-size:clamp(32px,3.2vw,42px);}
.plan-price small{font-family:var(--font-text);font-weight:600;font-size:19px;color:var(--slate);margin-left:6px;}
.plan-terms{font-size:16px;line-height:1.5;color:var(--slate);margin-bottom:22px;}
.plan-terms b{color:var(--ink);font-weight:600;}
.plan-card .dotlist{margin:0 0 26px;}
.plan-card .dotlist li{font-size:16.5px;}
/* кнопки обеих карточек стоят на одной линии: прижимаем их к низу содержимого */
.plan-card .btn{margin-top:auto;align-self:flex-start;font-size:16px;padding:15px 28px;}
.plan-foot{padding-top:20px;font-size:14px;line-height:1.5;color:#95907f;}
.plan-card--step .plan-text{font-size:16.5px;line-height:1.55;color:var(--slate);margin-bottom:14px;}
.plan-card--step .plan-text b{color:var(--ink);font-weight:600;}
/* карточка предложения на тёмном экране (клуб) */
.anchor-dark .plan-card{background:rgba(9,20,34,.62);border-color:rgba(34,166,230,.42);}
.anchor-dark .plan-card:hover{box-shadow:0 34px 70px -40px rgba(0,8,20,.9);}
.anchor-dark .plan-price{color:#fff;}
.anchor-dark .plan-price small{color:#a9bccf;}
.anchor-dark .plan-label{color:#8fa3b8;}
.anchor-dark .plan-terms{color:#c8d5e2;}
.anchor-dark .plan-terms b{color:#fff;}
.anchor-dark .plan-text{color:#c3d0e0;font-size:16.5px;line-height:1.55;margin-bottom:14px;}
.anchor-dark .plan-foot{color:#8fa3b8;}
/* Клуб: подводка живёт в левой колонке, поэтому текст и карточка начинаются
   с одной высоты и заканчиваются вровень. Строка не тянется во всю ширину. */
.plans--club{margin-top:26px;}
.club-list{max-width:36rem;display:flex;flex-direction:column;}
.club-list .sec-sub{max-width:none;margin-bottom:22px;}
.club-list .dotlist{margin-top:0;}

@media (max-width:960px){
  .plans{grid-template-columns:1fr;}
  .plan-card{padding:30px 26px 28px;}
  .club-list{max-width:none;}
}

/* ---------- Цена (старый блок, оставлен для других экранов) ---------- */
.offer{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:44px;margin-top:30px;align-items:start;}
.price{position:relative;background:var(--card);border:1px solid rgba(0,136,204,.35);border-radius:var(--r-plate);
  padding:30px 32px 32px;box-shadow:var(--sh-accent);overflow:hidden;}
.price::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--irid);
  background-size:220% 100%;animation:shimmer 8s ease-in-out infinite;}
.price-label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#95907f;margin-bottom:12px;}
.price-num{font-family:var(--font-display);font-weight:700;font-size:38px;color:var(--ink);line-height:1;margin-bottom:14px;}
.price p{font-size:15px;line-height:1.55;color:var(--slate);margin-bottom:8px;}
.price .btn{margin-top:14px;}
.anchor-dark .price{background:rgba(9,20,34,.6);border-color:rgba(34,166,230,.42);}
.anchor-dark .price-num{color:#fff;}
.anchor-dark .price p{color:#c8d5e2;}
.step-plate{margin-top:36px;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:28px 32px;}
.step-plate h3{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);color:var(--ink);margin-bottom:10px;}
.step-plate p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);margin-bottom:10px;}

/* ---------- Программа: галерея блоков ---------- */
.howto{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:24px;}
.howto div{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--slate);}
.howto div::before{content:"";position:absolute;left:0;top:10px;width:13px;height:2px;border-radius:2px;background:var(--blue);}
.howto b{color:var(--ink);font-weight:600;}

.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px;}

/* Плитка-перевёртыш: лицо это номер и название, оборот это анонс содержания.
   Переворот по наведению и по клику, чтобы работало и на телефоне. */
.gtile{position:relative;height:190px;perspective:1000px;background:none;border:0;padding:0;
  font:inherit;text-align:left;cursor:pointer;}
.gtile-inner{display:block;position:relative;width:100%;height:100%;transition:transform .6s var(--ease);
  transform-style:preserve-3d;}
.gtile:hover .gtile-inner,.gtile[aria-expanded="true"] .gtile-inner{transform:rotateY(180deg);}
.gtile-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card-sm);
  padding:20px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  transition:border-color var(--dur-card),box-shadow var(--dur-card);}
.gtile:hover .gtile-face{box-shadow:var(--sh-card);border-color:rgba(0,136,204,.4);}
.gtile-back{transform:rotateY(180deg);background:#12243a;border-color:rgba(34,166,230,.4);justify-content:center;}
.gtile-text{display:block;font-size:14.5px;line-height:1.5;color:#cdd8e6;}
.gtile-back b{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;margin-bottom:8px;}
.gtile:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-card-sm);}
@media (prefers-reduced-motion:reduce){.gtile-inner{transition:none;}}
.gtile-orb{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%,#9df4ff,#0088CC 62%,#0a5f95);
  box-shadow:0 0 18px -4px rgba(0,136,204,.9);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;color:#04212f;}
.gtile:nth-child(5n+2) .gtile-orb{background:radial-gradient(circle at 34% 30%,#d3b6ff,#7a5ad6 62%,#4a2fa8);box-shadow:0 0 18px -4px rgba(140,110,255,.85);}
.gtile:nth-child(5n+3) .gtile-orb{background:radial-gradient(circle at 34% 30%,#a8f5e6,#22c3a8 62%,#12907f);box-shadow:0 0 18px -4px rgba(60,220,190,.8);}
.gtile:nth-child(5n+4) .gtile-orb{background:radial-gradient(circle at 34% 30%,#ffc4e4,#e06aa8 62%,#b0428c);box-shadow:0 0 18px -4px rgba(255,140,200,.8);}
.gtile:nth-child(5n+5) .gtile-orb{background:radial-gradient(circle at 34% 30%,#eaf7ff,#6ea8dd 62%,#3f7fbf);box-shadow:0 0 18px -4px rgba(160,210,255,.8);}
.gtile-name{display:block;font-size:16px;line-height:1.35;color:var(--ink);font-weight:500;}
.gtile--bonus .gtile-face{border-color:rgba(0,136,204,.45);box-shadow:var(--sh-accent);}
.gtile--bonus .gtile-face:not(.gtile-back)::after{content:"бонус";position:absolute;right:14px;top:16px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#95907f;}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;margin-top:30px;}
.faq h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:8px;}
.faq p{font-size:16px;line-height:1.55;color:var(--slate);margin-bottom:22px;}

/* ---------- Тест: возвращение на землю ----------
   Сверху был космический порядок. Здесь шары упали на пол и тихо
   перекатываются, ждут, когда их запустят обратно на орбиту. */
.sec--floor{position:relative;padding-bottom:170px;}
.sec--floor .floor{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;}
.sec--floor > *:not(.floor){position:relative;z-index:1;}
.sec--center{text-align:center;}
.sec--center .h2,.sec--center .sec-sub{margin-left:auto;margin-right:auto;}
.sec--center .h2{max-width:900px;}
.sec--center .sec-sub{max-width:620px;}

/* ---------- Тест ---------- */
.quiz{max-width:640px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:30px 34px 32px;margin:30px auto 0;box-shadow:0 24px 60px -40px rgba(10,40,80,.45);
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card),border-color var(--dur-card);}
.quiz:hover{transform:translateY(-5px);border-color:rgba(0,136,204,.38);
  box-shadow:0 36px 76px -42px rgba(10,60,110,.6);}
.quiz .quiz-opts{justify-content:center;}
.quiz .hero-actions{justify-content:center;}

/* прогресс: шесть шаров загораются по мере ответов */
.quiz-dots{display:flex;gap:9px;justify-content:center;margin-bottom:20px;}
.quiz-dots i{width:11px;height:11px;border-radius:50%;background:#dcd8cf;transition:background .3s,box-shadow .3s;}
.quiz-dots i.on{background:radial-gradient(circle at 34% 30%,#9df4ff,#0088CC);box-shadow:0 0 12px -2px rgba(0,136,204,.85);}

/* варианты ответа */
.quiz-answers{display:flex;flex-direction:column;gap:10px;margin:4px 0 16px;text-align:left;}
.qopt{font:400 15.5px/1.45 var(--font-text);color:#2e3646;background:#f6f9fc;border:1px solid #dde5ee;
  border-radius:12px;padding:14px 18px;cursor:pointer;text-align:left;
  transition:background var(--dur-hover),border-color var(--dur-hover),transform var(--dur-hover);}
.qopt:hover{background:#eaf4fc;border-color:rgba(0,136,204,.45);transform:translateY(-2px);}
.qopt:active{transform:translateY(0);}
.qopt:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* результат */
.quiz-score{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1;color:var(--blue);
  margin-bottom:6px;}
.quiz-verdict{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);margin-bottom:12px;}
.quiz-text{font-size:16px;line-height:1.6;color:var(--slate);margin-bottom:14px;text-align:left;}
.quiz-again{background:none;border:0;padding:0;margin-top:14px;font:400 14.5px var(--font-text);
  color:var(--slate);text-decoration:underline;cursor:pointer;}
.quiz-again:hover{color:var(--blue-deep);}
/* варианты ответа откликаются: карточка живая, в неё можно нажать */
.quiz-opts span{cursor:pointer;transition:background var(--dur-hover),color var(--dur-hover),transform var(--dur-hover);}
.quiz:hover .quiz-opts span{background:#d8ecfa;}
.quiz-opts span:hover{background:var(--blue);color:#fff;transform:translateY(-2px);}
.quiz-label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#95907f;margin-bottom:12px;}
.quiz-q{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--ink);margin-bottom:18px;}
.quiz-opts{display:flex;gap:10px;flex-wrap:wrap;}
.quiz-opts span{font-size:15px;color:var(--blue-deep);background:#e1f0fb;border-radius:var(--r-chip);padding:8px 18px;}
.fine{font-size:14.5px;color:var(--slate);margin-top:14px;}
.anchor-dark .fine{color:#9fb0c4;}

/* ---------- Финал ---------- */
.final{text-align:center;}
.final .h2{margin-left:auto;margin-right:auto;}
.final .lead{margin-left:auto;margin-right:auto;max-width:640px;}
.final .hero-actions{justify-content:center;}
.final-link{display:inline-block;margin-top:18px;font-size:15.5px;color:#4fb6e8;text-decoration:none;
  border-bottom:1px solid rgba(79,182,232,.45);transition:color .2s,border-color .2s;}
.final-link:hover{color:#8ed2f5;border-bottom-color:#8ed2f5;}

/* появление блоков при прокрутке */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ============================== ПОДВАЛ ============================== */
.foot{background:#0b1622;color:#aebccd;padding:56px 90px 0;}
.foot-inner{max-width:var(--wrap-max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1.2fr;
  gap:40px;padding-bottom:40px;}
.foot-col{display:flex;flex-direction:column;gap:11px;}
.foot-col a{color:#aebccd;text-decoration:none;font-size:15px;transition:color .2s;}
.foot-col a:hover{color:#2a9fe0;}
.foot-h{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:#6f8296;margin-bottom:4px;}
/* Логотип в подвале обязателен на всех сайтах Sellmore, высота 38px */
.foot-logo{display:inline-block;margin-bottom:6px;}
.foot-logo img{height:38px;width:auto;}
.foot-brandname{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;margin:2px 0;}
.foot-tag{font-size:14.5px;line-height:1.5;color:#c3d0e0;max-width:290px;}
.foot-legal{border-top:1px solid rgba(255,255,255,.09);padding:20px 24px;text-align:center;}
.foot-legal p{font-size:12.5px;color:#6f8296;max-width:var(--wrap-max);margin:0 auto;}

/* ============================ COOKIE-БАННЕР ============================ */
.cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:60;max-width:920px;margin:0 auto;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
  background:#fff;border:1px solid #dde5ee;border-radius:14px;padding:18px 22px;
  box-shadow:0 14px 40px rgba(15,23,42,.16);}
.cookie[hidden]{display:none;}
.cookie-text{font-size:14px;line-height:1.5;color:#4a5c70;margin:0;flex:1 1 380px;}
.cookie-text a{color:var(--blue);}

/* =============================== МОДАЛКА =============================== */
.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;}
.modal-overlay{position:absolute;inset:0;background:rgba(8,16,26,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.modal-box{position:relative;z-index:1;width:100%;max-width:440px;background:#fff;border-radius:20px;
  padding:40px 38px 34px;box-shadow:0 40px 90px -30px rgba(6,20,40,.6);animation:modalIn .3s var(--ease);}
.modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border:none;background:transparent;
  font-size:26px;line-height:1;color:#8ba0b8;cursor:pointer;border-radius:8px;transition:.2s;}
.modal-x:hover{background:#f0f4f8;color:var(--ink);}
.modal-title{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--ink);margin-bottom:10px;}
.modal-sub{font-size:15.5px;line-height:1.5;color:var(--slate);margin-bottom:22px;}
.b24-wrap{min-height:120px;}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
body.modal-open{overflow:hidden;}

/* ============================== АДАПТИВ ==============================
   Четыре яруса. Планшетную полосу 861-1100 закрываем сразу: на консалтинге
   именно она дважды оставалась дырой. */
@media (max-width:1100px){
  .nav .menu{gap:16px;font-size:13.5px;}
  .nav .menu a{white-space:nowrap;}
  .hgrid{gap:34px;}
}
@media (max-width:960px){
  .hgrid{grid-template-columns:1fr;align-items:end;padding-bottom:56px;}
  .htext{max-width:none;}
}
@media (max-width:1240px){
  .gallery{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1100px){
  .cols-4{grid-template-columns:1fr 1fr;}
  .author{grid-template-columns:300px minmax(0,1fr);gap:34px;}
  .offer{grid-template-columns:minmax(0,1fr) 340px;gap:32px;}
}
@media (max-width:960px){
  .gallery{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:860px){
  /* .fitgrid раньше в этот список не попал и оставался в две колонки
     на любом экране: вторая карточка целиком уезжала за правый край. */
  .cols,.cols-3,.cols-4,.compare,.tcards,.faq,.offer,.fitgrid{grid-template-columns:1fr;}
  .fitgrid{gap:20px;}
  /* minmax(0,…) обязателен: с обычным 1fr колонка не сжимается ниже
     самого длинного слова в плитке и вылезает за экран. */
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .gtile{min-height:0;padding:16px 16px 18px;}
  .author{grid-template-columns:1fr;}
  .author-photo{max-width:340px;}
  .numbers{grid-template-columns:1fr 1fr;gap:24px;}
  .nav .menu{display:none;}
  .nav{flex-wrap:wrap;row-gap:0;}
  .burger{display:flex;}
  .menu-mobile{display:flex;flex-direction:column;gap:2px;width:100%;order:3;
    margin:6px -8px 14px;padding:10px 8px 14px;border-top:1px solid rgba(255,255,255,.14);}
  .menu-mobile[hidden]{display:none;}
  .menu-mobile a{color:#fff;text-decoration:none;font-size:16px;padding:12px 8px;border-radius:8px;opacity:.9;}
  .menu-mobile a:hover,.menu-mobile a:focus{background:rgba(255,255,255,.09);opacity:1;}
  .nav,.hgrid{padding-left:28px;padding-right:28px;}
  .sec{padding:var(--pad-sec-mob);}
  .anchor-dark .inner{padding:52px 28px;}
  .h2{font-size:30px;}
  .foot{padding:44px 28px 0;}
  .foot-inner{grid-template-columns:1fr 1fr;gap:30px 28px;}
  .modal-box{padding:34px 26px 28px;}
}
@media (max-width:700px){
  .foot-col a{padding:7px 0;}
  /* На тач-экране 3D-флип капризен, а фиксированная высота 190px режет оборотный
     текст. Поэтому на мобильном: без переворота, оборот раскрывается вниз по тапу. */
  .gtile{height:auto;perspective:none;}
  .gtile-inner{transform:none !important;transition:none;}
  .gtile-face{position:static;backface-visibility:visible;-webkit-backface-visibility:visible;}
  .gtile-back{display:none;transform:none;margin-top:8px;}
  .gtile[aria-expanded="true"] .gtile-back{display:flex;}
}
@media (max-width:560px){
  /* на телефоне две колонки дают ~145px на плитку: заголовок блока
     в такую ширину не встаёт, поэтому галерея идёт в один столбец */
  .gallery{grid-template-columns:minmax(0,1fr);}
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){
  /* «Записаться на консультацию» при nowrap требует 295px и не влезает
     в карточку шириной 261px. Разрешаем перенос и убираем лишние поля. */
  .btn{white-space:normal;text-align:center;line-height:1.25;}
  .plan-card .btn,.offer .btn,.cta .btn{width:100%;padding-left:18px;padding-right:18px;}
  .foot-inner{grid-template-columns:1fr;}
  .sec{padding-left:20px;padding-right:20px;}
  .nav,.hgrid{padding-left:20px;padding-right:20px;}
  .card{padding:24px 20px;}
  .cookie{left:12px;right:12px;bottom:12px;padding:16px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
}