/* ================================================================
   Зерокодер 26/27 — большое обновление
   Вёрстка по макету Figma «Акция хуякция» (desktop 1200, сетка 12 колонок)
   ================================================================ */

:root{
  /* поверхности */
  --black:#000;
  --hero-bg:#04040A;
  --graphite:#0B0B0D;
  --white:#fff;
  --grey:#F5F5F7;
  /* текст */
  --text:#1D1D1F;
  --text-2:#6E6E73;
  --text-3:#A1A1A6;
  --on-dark:#F5F5F7;
  --on-dark-2:#98989D;
  --on-dark-3:#6B6B72;
  /* акцент */
  --accent:#5E5CE6;
  --accent-soft:#8A88F0;
  --lav:#9A8AFF;
  /* линии */
  --line:#E3E3E8;
  --line-2:#E9E9EE;
  --line-3:#E6E6EB;
  /* радиусы */
  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:40px;
  /* сетка */
  --content:1040px;
  --pad:80px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:18px;
  line-height:28px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
h1,h2,h3,p,figure{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
s{text-decoration:line-through}

.container{width:var(--content);margin:0 auto}

/* ---------- типографика ---------- */
.h2{
  font-size:64px;line-height:68px;font-weight:800;letter-spacing:-.025em;
  color:var(--text);text-align:center;
}
.eyebrow{
  font-size:13px;line-height:16px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;
}
.eyebrow--accent{color:var(--accent)}
.br-m{display:none}
.eyebrow--dim{color:var(--on-dark-3)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:54px;padding:0 32px;border-radius:100px;
  font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;
  transition:box-shadow .3s cubic-bezier(.22,.61,.36,1),background .3s cubic-bezier(.22,.61,.36,1),
             border-color .3s cubic-bezier(.22,.61,.36,1),color .3s cubic-bezier(.22,.61,.36,1);
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:#6B69EA;box-shadow:0 8px 22px rgba(94,92,230,.26)}
.btn--secondary{border:1px solid #D2D2D7;color:var(--text)}
.btn--secondary:hover{border-color:#B6B6C0;background:rgba(29,29,31,.03)}
.btn--accent{border-color:var(--accent);color:var(--accent)}
.btn--accent:hover{border-color:var(--accent);background:rgba(94,92,230,.06)}
.btn--on-dark{border-color:rgba(255,255,255,.3);color:var(--on-dark)}
.btn--on-dark:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
.btn--on-tint{border-color:rgba(16,38,47,.24);color:#10262F}
.btn--on-tint:hover{border-color:rgba(16,38,47,.45);background:rgba(16,38,47,.04)}

/* ---------- метка скидки ---------- */
.tag{
  display:inline-flex;align-items:center;
  padding:9px 15px;border-radius:9px;
  background:rgba(217,58,58,.1);color:#B32F2A;
  font-size:15px;line-height:19px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.tag--on-dark{background:rgba(255,107,107,.18);color:#FF9A93}

/* ---------- цена ---------- */
.price{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.price__monthly{font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.price__total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price__prefix{font-size:15px;line-height:24px;color:var(--text-3)}
.price__old{font-size:22px;line-height:30px;font-weight:600;letter-spacing:-.005em;color:var(--text-3)}
.price__arrow{font-size:22px;line-height:30px;font-weight:600;color:var(--text-3)}
.price__new{font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.015em;color:var(--text)}

/* ================================================================
   01. HERO
   ================================================================ */
.hero{position:relative;background:var(--hero-bg);overflow:hidden}
.hero__canvas{position:relative;width:1200px;height:1180px;margin:0 auto}

.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__wash{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,23,.5) 0%,rgba(5,5,10,.08) 40%,rgba(8,7,18,.22) 100%)}
.hero__glow-core{position:absolute;left:140px;top:510px;width:920px;height:580px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(102,89,242,.22) 0%,rgba(87,77,224,.07) 50%,rgba(82,77,217,0) 100%);
  filter:blur(150px)}
.hero__vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse 40% 48% at 50% 50%,rgba(0,0,0,0) 0%,rgba(0,0,3,.12) 58%,rgba(0,0,3,.58) 100%)}

/* текстовый блок */
.hero__head{position:absolute;left:80px;top:96px;width:1040px;
  display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.hero__head .eyebrow{font-size:14px;letter-spacing:.16em;color:#A9A5EE}

/* дата в стеклянной таблетке — тот же материал, что у карточек сцены */
.hero__badge{
  position:relative;
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 22px 11px 19px;border-radius:100px;
  background:linear-gradient(180deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 100%);
  border:1px solid rgba(168,164,255,.3);
  box-shadow:0 10px 30px rgba(80,74,220,.24),0 2px 8px rgba(5,5,12,.4),
             inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#CAC7FF;
}
/* мягкий индиговый ореол под таблеткой */
.hero__badge::before{
  content:"";position:absolute;left:50%;top:50%;width:150%;height:250%;
  transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(120,110,255,.3) 0%,rgba(110,100,245,.08) 55%,rgba(110,100,245,0) 100%);
  filter:blur(18px);
}
.hero__badge-dot{
  width:7px;height:7px;border-radius:50%;flex:none;background:#A9A6FF;
  box-shadow:0 0 0 4px rgba(94,92,230,.16),0 0 12px rgba(150,146,255,.9);
  animation:badgePulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes badgePulse{
  0%,100%{opacity:1;box-shadow:0 0 0 4px rgba(94,92,230,.16),0 0 12px rgba(150,146,255,.9)}
  50%{opacity:.62;box-shadow:0 0 0 7px rgba(94,92,230,.06),0 0 16px rgba(150,146,255,.5)}
}
.hero__title{display:flex;flex-direction:column;width:100%}
.hero__title-line{
  font-size:88px;line-height:94px;font-weight:800;letter-spacing:-.03em;color:#fff;
  filter:drop-shadow(0 0 22px rgba(115,110,255,.22));
}
.hero__title-line--grad{
  background:linear-gradient(157deg,#fff 0%,#E9E7FB 50%,#A6A2EF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 25px rgba(115,110,255,.26));
}
.hero__sub{font-size:22px;line-height:34px;letter-spacing:-.005em;color:#9C9CB0}

.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:14px}
.scroll-hint__ring{position:relative;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.22)}
/* стрелка проходит сверху вниз и гаснет — как индикатор колеса мыши */
.scroll-hint__ring svg{animation:hintArrow 2s cubic-bezier(.55,.1,.35,1) infinite}
@keyframes hintArrow{
  0%{transform:translateY(-7px);opacity:0}
  22%{opacity:1}
  62%{transform:translateY(5px);opacity:1}
  100%{transform:translateY(10px);opacity:0}
}
/* расходящийся ореол в такт стрелке (box-shadow — его не режет overflow кольца) */
.scroll-hint__ring{animation:hintHalo 2s ease-out infinite}
@keyframes hintHalo{
  0%{box-shadow:0 0 0 0 rgba(169,165,238,.3)}
  70%{box-shadow:0 0 0 13px rgba(169,165,238,0)}
  100%{box-shadow:0 0 0 0 rgba(169,165,238,0)}
}
.scroll-hint__text{animation:hintText 2s ease-in-out infinite}
@keyframes hintText{0%,100%{opacity:.75}45%{opacity:1}}
.scroll-hint__text{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#71718A}

/* микроподписи */
.hero__caption{position:absolute;top:528px;display:flex;gap:14px}
.hero__caption--left{left:80px}
.hero__caption--right{left:1005px}
.hero__caption-rule{width:1px;height:72px;background:rgba(255,255,255,.16);flex:none}
.hero__caption-text{font-size:10px;line-height:18px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#7E7E96}

/* ---------- сцена ---------- */
.scene{position:absolute;left:50%;margin-left:-600px;top:619px;width:1200px;height:561px}
.scene__glow-center{position:absolute;left:290px;top:-79px;width:620px;height:460px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(120,107,255,.3) 0%,rgba(102,92,240,.09) 55%,rgba(92,87,235,0) 100%);
  filter:blur(90px)}

/* платформа */
.stage{position:absolute;left:0;top:305px;width:1200px;height:300px}
.stage__floor{position:absolute;left:60px;top:20px;width:1080px;height:300px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(97,92,235,.22) 0%,rgba(82,82,217,.07) 50%,rgba(77,77,204,0) 100%);
  filter:blur(80px)}
.stage__shadow{position:absolute;left:70px;top:96px;width:1060px;height:170px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,5,.92) 0%,rgba(0,0,5,.45) 55%,rgba(0,0,5,0) 100%);
  filter:blur(30px)}
.stage__svg{position:absolute;left:0;top:0}
.stage__edge-glow{position:absolute;left:170px;top:116px;width:860px;height:100px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(168,168,255,.4) 0%,rgba(128,128,255,.1) 55%,rgba(128,128,255,0) 100%);
  filter:blur(22px)}

/* ---------- стеклянные карточки ---------- */
.gcard-slot{position:absolute;--glow:.45}
/* слои сцены: центр → средние → дальние (в DOM порядок другой) */
.gcard-slot--center{z-index:3}
.gcard-slot--ai,.gcard-slot--tools{z-index:2}
.gcard-slot--prof,.gcard-slot--community{z-index:1}
.gcard-slot__glow{position:absolute;inset:-22px;border-radius:38px;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 52%,rgba(146,134,255,.5) 0%,rgba(120,110,255,.16) 45%,rgba(110,102,255,0) 72%);
  filter:blur(24px);opacity:var(--glow);
  transition:opacity .38s var(--rev-ease),transform .38s var(--rev-ease)}
.gcard{
  position:absolute;inset:0;overflow:hidden;transform-origin:0 0;
  transform:translate3d(var(--px,0px),var(--py,0px),0) skewY(var(--skew,0deg));
  --brd:linear-gradient(146deg,rgba(229,224,255,.55) 0%,rgba(153,140,255,.2) 42%,rgba(122,112,242,.08) 100%);
}
.gcard::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--brd);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:6}
.gcard::after{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;z-index:7;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  pointer-events:none}
.gcard__sheen{position:absolute;left:0;top:0;width:100%;
  background:linear-gradient(146deg,rgba(143,128,255,.055) 0%,rgba(128,115,255,.004) 100%)}
.gcard__shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,4,13,0) 0%,rgba(5,4,13,.08) 55%,rgba(5,4,13,.34) 100%)}
.gcard__sym{position:absolute;display:block}
.gcard__edge{position:absolute;border-radius:50%;pointer-events:none}
.gcard__edge--top,.gcard__edge--bottom,.gcard__edge--left,.gcard__edge--right{
  background:radial-gradient(closest-side,rgba(153,138,255,var(--ea,.3)) 0%,rgba(153,138,255,calc(var(--ea,.3)*.26)) 55%,rgba(153,138,255,0) 100%)}
.gcard__label{position:absolute;font-weight:600;letter-spacing:-.01em;color:#DCDCEA;z-index:5}
.gcard__label--lg{color:#fff}
.sym-glow{position:absolute;border-radius:50%;pointer-events:none}

/* 1 — Актуальные профессии (дальний план, наклон -7.35°) */
.gcard-slot--prof{left:86px;top:81px;width:182px;height:232px}
.gcard--prof{--skew:-7.353deg;border-radius:20px;opacity:.88;
  background:linear-gradient(214deg,rgba(148,138,255,.17) 0%,rgba(84,74,191,.089) 45%,rgba(46,41,112,.047) 100%);
  --brd:linear-gradient(214deg,rgba(229,224,255,.468) 0%,rgba(153,140,255,.17) 42%,rgba(122,112,242,.068) 100%);
  box-shadow:0 26px 56px rgba(0,0,5,.6),0 6px 14px rgba(0,0,5,.4),inset 0 0 46px rgba(153,138,255,.17),inset 0 1px 0 rgba(255,255,255,.14)}
.gcard--prof .gcard__sheen{height:125px;background:linear-gradient(214deg,rgba(143,128,255,.055),rgba(128,115,255,.004));
  clip-path:path('M 0 0 L 182 0 L 182 70 C 113 107 62 88 0 125 Z')}
.gcard--prof .gcard__shade{background:linear-gradient(180deg,rgba(5,4,13,0) 0%,rgba(5,4,13,.08) 55%,rgba(5,4,13,.3) 100%)}
.gcard--prof .gcard__sym{left:48px;top:56px;width:86px;height:100px}
.gcard--prof .gcard__edge--top{left:-33px;top:-16px;width:248px;height:34px;--ea:.255;filter:blur(6px)}
.gcard--prof .gcard__edge--right{left:166px;top:23px;width:34px;height:167px;--ea:.272;filter:blur(8px)}
.gcard--prof .gcard__edge--bottom{left:9px;top:214px;width:164px;height:36px;--ea:.204;filter:blur(9px)}
.gcard--prof .gcard__label{left:20px;top:172px;font-size:15px;line-height:20px}

/* 2 — ИИ в практике (средний план, -4.86°) */
.gcard-slot--ai{left:252px;top:53px;width:220px;height:286px}
.gcard--ai{--skew:-4.858deg;border-radius:22px;opacity:.96;
  background:linear-gradient(214deg,rgba(148,138,255,.2) 0%,rgba(84,74,191,.105) 45%,rgba(46,41,112,.055) 100%);
  --brd:linear-gradient(214deg,rgba(229,224,255,.55) 0%,rgba(153,140,255,.2) 42%,rgba(122,112,242,.08) 100%);
  box-shadow:0 38px 78px rgba(0,0,5,.7),0 8px 18px rgba(0,0,5,.45),inset 0 0 50px rgba(153,138,255,.22),inset 0 1px 0 rgba(255,255,255,.16)}
.gcard--ai .gcard__sheen{height:154px;background:linear-gradient(214deg,rgba(143,128,255,.055),rgba(128,115,255,.004));
  clip-path:path('M 0 0 L 220 0 L 220 86 C 136 132 75 109 0 154 Z')}
.gcard--ai .gcard__sym{left:30px;top:88px;width:160px;height:60px}
.gcard--ai .gcard__edge--top{left:-40px;top:-16px;width:299px;height:34px;--ea:.3;filter:blur(6px)}
.gcard--ai .gcard__edge--right{left:204px;top:29px;width:34px;height:206px;--ea:.32;filter:blur(8px)}
.gcard--ai .gcard__edge--bottom{left:11px;top:268px;width:198px;height:36px;--ea:.24;filter:blur(9px)}
.gcard--ai .gcard__label{left:22px;top:222px;font-size:16px;line-height:21px}

/* 3 — Новые горизонты (передний план) */
.gcard-slot--center{left:442px;top:0;width:316px;height:400px}
.gcard--center{--skew:0deg;border-radius:26px;
  background:linear-gradient(146deg,rgba(148,138,255,.22) 0%,rgba(84,74,191,.116) 45%,rgba(46,41,112,.06) 100%);
  --brd:linear-gradient(146deg,rgba(229,224,255,.605) 0%,rgba(153,140,255,.22) 42%,rgba(122,112,242,.088) 100%);
  box-shadow:0 54px 112px rgba(0,0,8,.82),0 16px 32px rgba(0,0,8,.55),inset 0 0 62px rgba(153,138,255,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.gcard--center .gcard__sheen{height:216px;clip-path:path('M 0 0 L 316 0 L 316 120 C 196 184 107 152 0 216 Z')}
.gcard--center .gcard__shade{background:linear-gradient(180deg,rgba(5,4,13,0) 0%,rgba(5,4,13,.08) 55%,rgba(5,4,13,.2) 100%)}
.sym-glow--halo{left:8px;top:152px;width:300px;height:130px;
  background:radial-gradient(closest-side,rgba(153,138,255,.3),rgba(153,138,255,0));filter:blur(29px)}
.sym-glow--ambient{left:8px;top:52px;width:300px;height:190px;
  background:radial-gradient(closest-side,rgba(153,138,255,.28),rgba(153,138,255,0));filter:blur(25px)}
.gcard--center .gcard__sym{left:0;top:0;width:316px;height:230px}
.gcard__lightarc{position:absolute;left:-92px;top:206px;width:500px;height:430px;border-radius:50%;
  border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(180deg,#8B85FF 0%,#514BD0 1.4%,#2E2980 5.5%,#1B1854 15%,#100E36 40%,#0A0822 100%)}
.gcard--center .gcard__edge--top{left:-57px;top:-16px;width:430px;height:34px;--ea:.375;filter:blur(6px)}
.gcard--center .gcard__edge--right{left:300px;top:40px;width:34px;height:288px;--ea:.4;filter:blur(8px)}
.gcard--center .gcard__edge--left{left:-18px;top:40px;width:34px;height:288px;--ea:.4;filter:blur(8px)}
.gcard--center .gcard__edge--bottom{left:16px;top:382px;width:284px;height:36px;--ea:.3;filter:blur(9px)}
.gcard--center .gcard__label{left:28px;top:307px;font-size:23px;line-height:30px}
.gcard__dash{position:absolute;left:28px;top:362px;width:22px;height:2px;border-radius:1px;
  background:rgba(255,255,255,.55);z-index:5}

/* 4 — Инструменты для роста (средний план, +4.86°) */
.gcard-slot--tools{left:728px;top:53px;width:220px;height:286px}
.gcard--tools{--skew:4.858deg;border-radius:22px;opacity:.96;
  background:linear-gradient(146deg,rgba(148,138,255,.2) 0%,rgba(84,74,191,.105) 45%,rgba(46,41,112,.055) 100%);
  box-shadow:0 38px 78px rgba(0,0,5,.7),0 8px 18px rgba(0,0,5,.45),inset 0 0 50px rgba(153,138,255,.22),inset 0 1px 0 rgba(255,255,255,.16)}
.gcard--tools .gcard__sheen{height:154px;clip-path:path('M 0 0 L 220 0 L 220 86 C 136 132 75 109 0 154 Z')}
.gcard--tools .gcard__sym{left:50px;top:84px;width:120px;height:76px}
.gcard--tools .gcard__edge--top{left:-40px;top:-16px;width:299px;height:34px;--ea:.3;filter:blur(6px)}
.gcard--tools .gcard__edge--left{left:-18px;top:29px;width:34px;height:206px;--ea:.32;filter:blur(8px)}
.gcard--tools .gcard__edge--bottom{left:11px;top:268px;width:198px;height:36px;--ea:.24;filter:blur(9px)}
.gcard--tools .gcard__label{left:34px;top:222px;font-size:16px;line-height:21px}
.sym-glow--lens{left:37px;top:7px;width:46px;height:62px;
  background:radial-gradient(closest-side,rgba(153,138,255,.32),rgba(153,138,255,0));filter:blur(6px)}

/* 5 — Сильное сообщество (дальний план, +7.35°) */
.gcard-slot--community{left:932px;top:81px;width:182px;height:232px}
.gcard--community{--skew:7.353deg;border-radius:20px;opacity:.88;
  background:linear-gradient(146deg,rgba(148,138,255,.17) 0%,rgba(84,74,191,.089) 45%,rgba(46,41,112,.047) 100%);
  --brd:linear-gradient(146deg,rgba(229,224,255,.468) 0%,rgba(153,140,255,.17) 42%,rgba(122,112,242,.068) 100%);
  box-shadow:0 26px 56px rgba(0,0,5,.6),0 6px 14px rgba(0,0,5,.4),inset 0 0 46px rgba(153,138,255,.17),inset 0 1px 0 rgba(255,255,255,.14)}
.gcard--community .gcard__sheen{height:125px;clip-path:path('M 0 0 L 182 0 L 182 70 C 113 107 62 88 0 125 Z')}
.gcard--community .gcard__shade{background:linear-gradient(180deg,rgba(5,4,13,0) 0%,rgba(5,4,13,.08) 55%,rgba(5,4,13,.3) 100%)}
.gcard--community .gcard__sym{left:29px;top:66px;width:98px;height:78px}
.gcard--community .gcard__edge--top{left:-33px;top:-16px;width:248px;height:34px;--ea:.255;filter:blur(6px)}
.gcard--community .gcard__edge--left{left:-18px;top:23px;width:34px;height:167px;--ea:.272;filter:blur(8px)}
.gcard--community .gcard__edge--bottom{left:9px;top:214px;width:164px;height:36px;--ea:.204;filter:blur(9px)}
.gcard--community .gcard__label{left:20px;top:172px;font-size:15px;line-height:20px}
.sym-glow--plates{left:17px;top:44px;width:104px;height:46px;
  background:radial-gradient(closest-side,rgba(153,138,255,.36),rgba(153,138,255,0));filter:blur(10px)}
.sym-glow--cube{left:14px;top:58px;width:96px;height:36px;
  background:radial-gradient(closest-side,rgba(153,138,255,.34),rgba(153,138,255,0));filter:blur(9px)}

/* ================================================================
   02. COUNTDOWN
   ================================================================ */
.countdown{position:relative;background:#000;padding:80px 0 96px}
.countdown__hairline{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:var(--content);max-width:calc(100% - 2*var(--pad));height:1px;background:rgba(255,255,255,.08)}
.countdown__inner{display:flex;flex-direction:column;align-items:center;gap:36px}
.timer{display:flex;align-items:flex-start;gap:35px}
.timer__unit{width:107px;display:flex;flex-direction:column;align-items:center;gap:12px}
.timer__value{
  font-size:88px;line-height:88px;font-weight:700;letter-spacing:-.03em;text-align:center;
  background:linear-gradient(180deg,#fff 0%,#F1EFFD 55%,#C6C2F1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 13px rgba(115,107,255,.22));
  font-variant-numeric:tabular-nums;
}
.timer__label{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:#6B6B72;text-align:center}
.timer__colon{font-size:88px;line-height:88px;font-weight:700;letter-spacing:-.03em;color:#3A3A42}
.countdown__deadline{font-size:18px;line-height:28px;color:var(--on-dark-2)}

/* ================================================================
   03. ЧТО МЕНЯЕТСЯ — закреплённая тёмная сцена, главы перетекают
   ================================================================ */
.changes{position:relative;background:var(--graphite);--seg:88vh}
.changes__track{height:calc(100vh + 2 * var(--seg))}
.changes__stage{position:sticky;top:0;height:100vh;min-height:660px;
  display:flex;align-items:center;overflow:hidden}
.changes__stage::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:var(--content);max-width:calc(100% - 2*var(--pad));height:1px;background:rgba(255,255,255,.08)}
.changes__frame{position:relative;display:flex;flex-direction:column;align-items:center}
.changes__title{color:var(--on-dark);margin-bottom:64px}

.story{position:relative;width:100%;height:360px}
.story__item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:var(--o,0);transform:translate3d(0,var(--ty,0px),0);will-change:opacity,transform}
.story__item.is-on{--o:1}
.story__text{position:relative;max-width:760px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.story__icon{width:72px;height:72px;margin-bottom:26px;
  filter:drop-shadow(0 6px 18px rgba(94,92,230,.28))}
.story__title{font-size:42px;line-height:50px;font-weight:800;letter-spacing:-.02em;color:var(--on-dark)}
.story__title--lead{font-size:56px;line-height:64px;letter-spacing:-.025em}
.story__body{margin-top:22px;font-size:22px;line-height:34px;letter-spacing:-.005em;
  color:rgba(245,245,247,.82)}
.story__extra{margin-top:24px;font-size:20px;line-height:30px;font-weight:600;letter-spacing:-.005em;
  color:#5E5CE6}

.story__nav{display:inline-flex;align-items:center;gap:14px;margin-top:64px;
  padding:11px 18px;border-radius:100px;background:rgba(255,255,255,.07)}
.story__dot{display:block;width:8px;height:8px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.3);cursor:pointer;
  transition:width .45s var(--rev-ease),border-radius .45s var(--rev-ease),
             background .45s var(--rev-ease)}
.story__dot:hover{background:rgba(255,255,255,.5)}
.story__dot.is-on,.story__dot.is-on:hover{width:56px;border-radius:4px;background:rgba(255,255,255,.85)}
.story__dot:focus-visible{outline:2px solid var(--accent-soft);outline-offset:4px}

/* без скрипта и при отключённой анимации — простой вертикальный список */
.changes.is-static .changes__track{height:auto}
.changes.is-static .changes__stage{position:static;height:auto;min-height:0;padding:110px 0 120px}
.changes.is-static .changes__title{margin-bottom:60px}
.changes.is-static .story{height:auto;display:flex;flex-direction:column;gap:84px}
.changes.is-static .story__item{position:relative;inset:auto;opacity:1;transform:none}
.changes.is-static .story__text{margin:0 auto}
.changes.is-static .story__nav{display:none}

/* ================================================================
   04. АБОНЕМЕНТЫ
   ================================================================ */
.subs{background:var(--grey);padding:130px 0}
.subs .h2{margin-bottom:64px}
.subs__row{display:flex;gap:10px;align-items:stretch}

/* продуктовая карточка (абонементы и профессии) */
.pcard{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:32px;
  padding:40px;border-radius:28px;background:var(--grey);border:1px solid #E8E8ED}
.pcard--dark{
  background:linear-gradient(180deg,#010000 0%,#353538 100%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 20px 46px rgba(5,8,15,.22),0 4px 10px rgba(5,8,15,.14),inset 0 1px 0 rgba(255,255,255,.16)}
.pcard--light-alt{
  background:linear-gradient(180deg,#D0CFFF 0%,#EDEDFF 45%,#F9F9F9 100%);
  /* обводка из той же лавандовой гаммы, что и заливка: голубая читалась отдельным контуром */
  border-color:#C6C4F3;
  box-shadow:0 20px 44px rgba(33,30,80,.07),0 4px 10px rgba(33,30,80,.05),inset 0 1px 0 rgba(255,255,255,.45)}
.pcard__copy{display:flex;flex-direction:column;gap:14px}
/* плашка сидит на верхней кромке карточки, наполовину снаружи */
.pcard__badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:4;
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:11px 22px;border-radius:100px;
  background:var(--accent);color:#fff;
  box-shadow:0 10px 26px rgba(94,92,230,.35),inset 0 1px 0 rgba(255,255,255,.18);
  font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pcard__name{font-size:30px;line-height:38px;font-weight:700;letter-spacing:-.015em;color:var(--text)}
/* флагманские карточки абонементов оставляем крупнее — как в макете */
.pcard--dark .pcard__name,.pcard--light-alt .pcard__name{font-size:36px;line-height:44px}
.pcard__audience,.pcard__desc{font-size:18px;line-height:28px;color:var(--text-2)}
.pcard__spacer{flex:1 1 auto}

/* список преимуществ старших тарифов */
.plist{display:flex;flex-direction:column;gap:14px;margin-top:-12px}
.plist__head{font-size:18px;line-height:26px;font-weight:700;color:var(--text)}
.plist__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.plist__item{position:relative;padding-left:30px;font-size:18px;line-height:26px;color:var(--text-2)}
.plist__item::before{content:"";position:absolute;left:3px;top:.42em;width:12px;height:6.5px;
  border-left:2.2px solid var(--accent);border-bottom:2.2px solid var(--accent);
  transform:rotate(-45deg)}
/* число в описании */
.hl{font-weight:800;color:var(--accent)}

/* тёмная карточка */
.pcard--dark .plist__head{color:#fff}
.pcard--dark .plist__item{color:#B4B4C0}
.pcard--dark .plist__item::before{border-color:#A9A6FF}
.pcard--dark .hl{color:#A9A6FF}
/* лавандовая карточка */
.pcard--light-alt .plist__head{color:#10262F}
.pcard--light-alt .plist__item{color:#46606C}
.pcard--light-alt .plist__item::before{border-color:#5E5CE6}
.pcard--light-alt .hl{color:#5E5CE6}
.cta{display:flex;gap:12px;flex-wrap:wrap}
/* сноска об условиях — одной строкой под всем каталогом */
.offer-note{margin-top:56px;text-align:center;font-size:14px;line-height:22px;color:var(--text-2)}

.pcard--dark .pcard__name{color:#fff}
.pcard--dark .pcard__audience{color:#B4B4C0}
.pcard--dark .pcard__desc{color:#A9A9B6}
.pcard--dark .price__monthly,.pcard--dark .price__new{color:#fff}
.pcard--dark .price__prefix,.pcard--dark .price__arrow{color:#9B9BA8}
.pcard--dark .price__old{color:#8F8F9C}

.pcard--light-alt .pcard__name,.pcard--light-alt .price__monthly,.pcard--light-alt .price__new{color:#10262F}
.pcard--light-alt .pcard__audience{color:#3F5560}
.pcard--light-alt .pcard__desc{color:#46606C}
.pcard--light-alt .price__prefix,.pcard--light-alt .price__old,.pcard--light-alt .price__arrow{color:#5C7683}

/* ---------- продуктовые визуалы (тёмные плитки) ---------- */
/* у абонементов фото 4:3 — плитка выше, чтобы кадр не срезался */
.tile{position:relative;width:100%;height:220px;border-radius:20px;overflow:hidden;flex:none;
  border:1px solid rgba(255,255,255,.08)}
.tile--sub-main,.tile--sub-neuro{height:290px}
.tile__pic{position:absolute;inset:0;display:block;border-radius:inherit}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* плитка-фото: своя подложка и рамка не нужны — иначе по краю идёт тёмный кант */
.tile.tile--photo{background:none;border:0;box-shadow:none}
.tile__glow{position:absolute;border-radius:50%}
.tile__glow--blue{left:40px;top:20px;width:360px;height:240px;
  background:radial-gradient(closest-side,rgba(84,161,229,.34) 0%,rgba(77,148,224,.09) 60%,rgba(77,148,224,0) 100%);
  filter:blur(40px)}
.tile__glow--magenta{left:64px;top:10px;width:300px;height:200px;
  background:radial-gradient(closest-side,rgba(212,107,199,.4) 0%,rgba(199,102,194,.1) 60%,rgba(194,102,194,0) 100%);
  filter:blur(45px)}
.blk{position:absolute;display:block;background:#fff}

/* Абонемент — стопка слоёв */
.tile--sub-main{background:linear-gradient(180deg,#2A3646 0%,#141A24 100%);border-color:rgba(255,255,255,.14)}
.tile__layer{position:absolute;display:block}
.tile__layer--3{left:80px;top:18px;width:268px;height:120px;border-radius:14px;
  background:linear-gradient(180deg,#26303D,#171F29);border:1px solid rgba(255,255,255,.05)}
.tile__layer--2{left:58px;top:46px;width:312px;height:132px;border-radius:16px;
  background:linear-gradient(180deg,#2E3B4B,#1A222E);border:1px solid rgba(255,255,255,.07)}
.tile__layer--1{left:36px;top:80px;width:356px;height:150px;border-radius:18px;
  background:linear-gradient(180deg,#3D4E63,#1E2836);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 40px rgba(0,0,0,.55);padding:28px 0 0 26px;display:flex;flex-direction:column;gap:16px}
.tile__line{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.14)}

/* Нейроабонемент — вычислительный модуль */
.tile--sub-neuro{background:linear-gradient(180deg,#2A1E2C 0%,#120C14 100%)}
.tile__pins{position:absolute;top:56px;display:flex;flex-direction:column;gap:22px}
.tile__pins--l{left:112px}
.tile__pins--r{left:286px}
.tile__pins i{display:block;width:30px;height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.tile__module{position:absolute;left:148px;top:44px;width:132px;height:132px;border-radius:26px;
  background:linear-gradient(180deg,#4A2A4E,#221329);border:1px solid rgba(217,107,200,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;padding:24px}
.tile__module i{display:block;border-radius:6px;background:rgba(255,255,255,.1)}
.tile__module i.is-on{background:rgba(255,255,255,.3)}


/* ================================================================
   07. НЕЙРОСЕТИ ДЛЯ РАБОТЫ
   ================================================================ */
.neuro{padding:120px 0 130px}
.neuro__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* визуалы раздела: те же материалы, что и у курсов-профессий */
.tile--ai-text,.tile--ai-table,.tile--ai-deck,.tile--ai-editorial{
  height:240px;background:linear-gradient(180deg,#23232C 0%,#111116 100%)}
.pane{position:absolute;display:block;border-radius:14px;
  background:linear-gradient(180deg,#2C2C38,#181820);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 38px rgba(0,0,0,.45)}
.pane--accent{background:linear-gradient(180deg,#31314E,#17172A);border-color:rgba(94,92,230,.5)}
.blk.is-accent{background:rgba(94,92,230,.82)}


/* ================================================================
   08. НЕЙРОСЕТИ ДЛЯ ЖИЗНИ И ПЕРВЫХ ШАГОВ В ИИ
   ================================================================ */
.life{padding:120px 0 130px}
.tile--life-pro,.tile--life-start,.tile--life-daily,.tile--life-ru{
  height:240px;background:linear-gradient(180deg,#23232C 0%,#111116 100%)}
.tile__mark{position:absolute;filter:drop-shadow(0 4px 14px rgba(94,92,230,.45))}
.orbit{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;
  border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.orbit--inner{width:206px;height:206px;margin:-103px 0 0 -103px;
  border-color:rgba(94,92,230,.34)}


/* ================================================================
   09–10. ИИ ДЛЯ ИНВЕСТИЦИЙ · САЙТЫ БЕЗ КОДА
   ================================================================ */
.invest{background:#fff;padding:120px 0 130px}
.nocode{padding:120px 0 130px}

/* ---------- секция на чёрном: плашки, текст и кнопки в светлой гамме ---------- */
.sec-dark{background:#0B0B0D}
.sec-dark .eyebrow--accent{color:var(--accent-soft)}
.sec-dark .professions__lead{color:rgba(245,245,247,.86)}
.sec-dark .pcard{
  background:linear-gradient(180deg,#16161C 0%,#101014 100%);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 20px 46px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.3),
             inset 0 1px 0 rgba(255,255,255,.08)}
.sec-dark .pcard.is-ready:hover{border-color:rgba(255,255,255,.2);
  box-shadow:0 28px 58px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.36),
             inset 0 1px 0 rgba(255,255,255,.12)}
.sec-dark .pcard__name{color:var(--on-dark)}
.sec-dark .pcard__desc{color:rgba(245,245,247,.75)}
.sec-dark .price__monthly,.sec-dark .price__new{color:#fff}
.sec-dark .price__prefix,.sec-dark .price__old,.sec-dark .price__arrow{color:rgba(245,245,247,.55)}
.sec-dark .tag{background:rgba(255,107,107,.18);color:#FF9A93}
.sec-dark .btn--accent{border-color:rgba(255,255,255,.3);color:var(--on-dark)}
.sec-dark .btn--accent:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.sec-dark .tile{background:linear-gradient(180deg,#24242E 0%,#141419 100%);
  border-color:rgba(255,255,255,.14)}

/* ---------- секция на сером: плашки с холодным подтоном ---------- */
.sec-tint{background:var(--grey)}
.sec-tint .pcard{
  background:#fff;
  border-color:#E6E6EB;
  box-shadow:0 18px 40px rgba(30,30,45,.05)}
.sec-tint .pcard.is-ready:hover{border-color:#DCDCE4;
  box-shadow:0 26px 52px rgba(30,30,45,.09)}
.tile--invest,.tile--algo,.tile--webflow,.tile--wordpress{
  height:240px;background:linear-gradient(180deg,#23232C 0%,#111116 100%)}

/* ================================================================
   05. ПОСЛЕДНИЙ ШАНС
   ================================================================ */
.lastchance{background:#fff;padding:130px 0 40px}
/* блок вынесен на белую плашку: от белой секции её отделяют обводка и тень */
.lastchance__panel{position:relative;overflow:hidden;border-radius:40px;padding:88px 64px 92px;
  background:#fff;border:1px solid #E9E9F0;
  box-shadow:0 28px 64px rgba(38,38,78,.1),0 4px 14px rgba(38,38,78,.05)}
.lastchance__title{position:relative;margin-bottom:28px}
.lastchance__accent{
  background:linear-gradient(96deg,#5E5CE6 0%,#8F8DF3 52%,#5E5CE6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lastchance__lead{position:relative;max-width:640px;margin:0 auto;
  font-size:22px;line-height:34px;letter-spacing:-.005em;color:var(--text-2);text-align:center}

/* ================================================================
   06. КУРСЫ-ПРОФЕССИИ
   ================================================================ */
.professions{background:#fff;padding:110px 0 140px}
.professions__head{display:flex;flex-direction:column;align-items:center;gap:24px;margin-bottom:72px;
  text-align:center}
.professions__head .eyebrow{font-size:23px;line-height:30px;letter-spacing:.05em;font-weight:800}
.professions__lead{width:840px;max-width:100%;font-size:22px;line-height:34px;letter-spacing:-.005em;
  color:var(--text);text-align:center}
.professions__grid{display:flex;flex-direction:column;gap:10px}
.professions__pair{display:flex;gap:10px;align-items:stretch}

.pcard--wide{flex-direction:row;align-items:stretch;gap:48px}
.pcard--wide .tile{width:480px;height:auto;min-height:380px;flex:none;border-radius:24px;align-self:stretch}
.pcard__side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:28px}
.pcard__desc--plain{color:var(--text-2)}

/* Веб-дизайнер */
.tile--webdesign{background:linear-gradient(180deg,#23232C 0%,#111116 100%)}
.tile__light{position:absolute;left:60px;top:-60px;width:420px;height:300px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.1),rgba(255,255,255,0));filter:blur(40px)}
.surface{position:absolute;display:block;overflow:hidden}
.surface--back{left:44px;top:38px;width:300px;height:186px;border-radius:14px;
  background:linear-gradient(180deg,#25252F,#16161C);border:1px solid rgba(255,255,255,.06)}
.surface--front{left:122px;top:132px;width:334px;height:218px;border-radius:16px;
  background:linear-gradient(180deg,#353540,#1B1B23);border:1px solid rgba(255,255,255,.13);
  box-shadow:0 26px 50px rgba(0,0,0,.55)}
.surface--compact{left:366px;top:92px;width:96px;height:182px;border-radius:16px;
  background:linear-gradient(180deg,#2E2E3A,#191920);border:1px solid rgba(255,255,255,.11);
  box-shadow:0 22px 44px rgba(0,0,0,.55)}
.tile__accent{position:absolute;left:146px;top:304px;width:56px;height:8px;border-radius:4px;
  background:rgba(94,92,230,.85)}

/* 1С-разработчик */
.tile--1c,.tile--bots{height:240px;background:linear-gradient(180deg,#23232C 0%,#111116 100%)}
.node1c{position:absolute;left:32px;width:80px;height:42px;border-radius:10px;display:block;
  background:linear-gradient(180deg,#2B2B36,#1A1A21);border:1px solid rgba(255,255,255,.08)}
.data1c{position:absolute;left:152px;top:40px;width:244px;height:160px;border-radius:14px;display:grid;
  grid-template-columns:repeat(3,58px);gap:12px;align-content:start;padding:22px 0 0 20px;
  background:linear-gradient(180deg,#2C2C38,#181820);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 40px rgba(0,0,0,.5)}
.data1c .cell{display:block;height:14px;border-radius:4px;background:rgba(255,255,255,.09)}
.data1c .cell.is-on{background:rgba(94,92,230,.55)}

/* Чат-боты */
.botmod{position:absolute;display:block;border-radius:12px}
.botmod--in{left:34px;top:52px;width:88px;height:54px;
  background:linear-gradient(180deg,#2B2B36,#1A1A21);border:1px solid rgba(255,255,255,.09)}
.botmod--logic{left:186px;top:132px;width:100px;height:58px;
  background:linear-gradient(180deg,#2C2C38,#1A1A22);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 16px 34px rgba(0,0,0,.5)}
.botmod--ai{left:300px;top:70px;width:104px;height:72px;border-radius:14px;
  background:linear-gradient(180deg,#31314E,#17172A);border:1px solid rgba(94,92,230,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
.botmod--out{left:52px;top:158px;width:108px;height:46px;
  background:linear-gradient(180deg,#28282F,#17171D);border:1px solid rgba(255,255,255,.07)}

/* ================================================================
   07. ФИНАЛ
   ================================================================ */
.final{position:relative;background:var(--graphite);padding:120px 0 84px;overflow:hidden}
.final__glow{position:absolute;left:50%;margin-left:-380px;top:90px;width:760px;height:360px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(94,92,229,.2) 0%,rgba(94,92,229,.06) 55%,rgba(94,92,229,0) 100%);
  filter:blur(170px)}
.final__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}

/* ---------- сцена «консультация» под финальным блоком ---------- */
.cscene-wrap{position:relative;margin-top:72px}
/* центрируем сдвигом, а не flex: при масштабировании сцена шире экрана */
.cscene{position:relative;width:1040px;height:300px;margin-left:calc(50% - 520px);
  transform:scale(var(--ck,1));transform-origin:top center;
  margin-bottom:calc((var(--ck,1) - 1) * 300px)}
.cscene__glow{position:absolute;left:200px;top:-20px;width:640px;height:320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(120,107,255,.26) 0%,rgba(102,92,240,.08) 55%,rgba(92,87,235,0) 100%);
  filter:blur(72px)}
.cscene__floor{position:absolute;left:200px;top:212px;width:640px;height:120px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,140,255,.2) 0%,rgba(110,104,235,.05) 55%,rgba(110,104,235,0) 100%);
  filter:blur(28px)}
.cslot{position:absolute}

/* переписка (левый план) */
.cslot--chat{left:134px;top:66px;width:230px;height:160px;--glow:.3}
.gcard--chat{--skew:-5.2deg;border-radius:22px;opacity:.94;
  background:linear-gradient(214deg,rgba(148,138,255,.2) 0%,rgba(84,74,191,.105) 45%,rgba(46,41,112,.055) 100%);
  --brd:linear-gradient(214deg,rgba(229,224,255,.5) 0%,rgba(153,140,255,.18) 42%,rgba(122,112,242,.07) 100%);
  box-shadow:0 34px 70px rgba(0,0,5,.66),0 8px 18px rgba(0,0,5,.42),
             inset 0 0 48px rgba(153,138,255,.2),inset 0 1px 0 rgba(255,255,255,.15)}
.gcard--chat .gcard__sheen{height:96px;clip-path:path('M 0 0 L 230 0 L 230 52 C 142 86 78 70 0 96 Z')}
.gcard--chat .gcard__sym{left:18px;top:22px;width:194px;height:118px}
.gcard--chat .gcard__edge--top{left:-36px;top:-16px;width:302px;height:34px;--ea:.28;filter:blur(6px)}
.gcard--chat .gcard__edge--right{left:214px;top:22px;width:34px;height:116px;--ea:.3;filter:blur(8px)}
.gcard--chat .gcard__edge--bottom{left:12px;top:142px;width:206px;height:36px;--ea:.22;filter:blur(9px)}
.sym-glow--chat{left:30px;top:34px;width:170px;height:96px;
  background:radial-gradient(closest-side,rgba(153,138,255,.3),rgba(153,138,255,0));filter:blur(18px)}

/* консультант (передний план) */
.cslot--expert{left:390px;top:24px;width:260px;height:212px;--glow:.5}
.gcard--expert{--skew:0deg;border-radius:26px;
  background:linear-gradient(146deg,rgba(148,138,255,.22) 0%,rgba(84,74,191,.116) 45%,rgba(46,41,112,.06) 100%);
  --brd:linear-gradient(146deg,rgba(229,224,255,.605) 0%,rgba(153,140,255,.22) 42%,rgba(122,112,242,.088) 100%);
  box-shadow:0 46px 96px rgba(0,0,8,.78),0 14px 28px rgba(0,0,8,.5),
             inset 0 0 58px rgba(153,138,255,.28),inset 0 1px 0 rgba(255,255,255,.19)}
.gcard--expert .gcard__sheen{height:128px;clip-path:path('M 0 0 L 260 0 L 260 70 C 160 112 88 92 0 128 Z')}
.gcard--expert .gcard__shade{background:linear-gradient(180deg,rgba(5,4,13,0) 0%,rgba(5,4,13,.08) 55%,rgba(5,4,13,.22) 100%)}
.gcard--expert .gcard__sym{left:24px;top:24px;width:212px;height:164px}
.gcard--expert .gcard__edge--top{left:-46px;top:-16px;width:352px;height:34px;--ea:.36;filter:blur(6px)}
.gcard--expert .gcard__edge--right{left:244px;top:30px;width:34px;height:152px;--ea:.38;filter:blur(8px)}
.gcard--expert .gcard__edge--left{left:-18px;top:30px;width:34px;height:152px;--ea:.38;filter:blur(8px)}
.gcard--expert .gcard__edge--bottom{left:14px;top:194px;width:232px;height:36px;--ea:.28;filter:blur(9px)}
.sym-glow--expert{left:56px;top:34px;width:148px;height:110px;
  background:radial-gradient(closest-side,rgba(153,138,255,.34),rgba(153,138,255,0));filter:blur(22px)}

/* время встречи (правый план) */
.cslot--slot{left:676px;top:66px;width:230px;height:160px;--glow:.3}
.gcard--slot{--skew:5.2deg;border-radius:22px;opacity:.94;
  background:linear-gradient(146deg,rgba(148,138,255,.2) 0%,rgba(84,74,191,.105) 45%,rgba(46,41,112,.055) 100%);
  --brd:linear-gradient(146deg,rgba(229,224,255,.5) 0%,rgba(153,140,255,.18) 42%,rgba(122,112,242,.07) 100%);
  box-shadow:0 34px 70px rgba(0,0,5,.66),0 8px 18px rgba(0,0,5,.42),
             inset 0 0 48px rgba(153,138,255,.2),inset 0 1px 0 rgba(255,255,255,.15)}
.gcard--slot .gcard__sheen{height:96px;clip-path:path('M 0 0 L 230 0 L 230 52 C 142 86 78 70 0 96 Z')}
.gcard--slot .gcard__sym{left:35px;top:22px;width:160px;height:118px}
.gcard--slot .gcard__edge--top{left:-36px;top:-16px;width:302px;height:34px;--ea:.28;filter:blur(6px)}
.gcard--slot .gcard__edge--left{left:-18px;top:22px;width:34px;height:116px;--ea:.3;filter:blur(8px)}
.gcard--slot .gcard__edge--bottom{left:12px;top:142px;width:206px;height:36px;--ea:.22;filter:blur(9px)}
.sym-glow--slot{left:46px;top:40px;width:138px;height:88px;
  background:radial-gradient(closest-side,rgba(153,138,255,.28),rgba(153,138,255,0));filter:blur(18px)}

@media (max-width:1100px){.cscene{--ck:.84}}
@media (max-width:900px){.cscene{--ck:.68}}
@media (max-width:640px){.cscene{--ck:.44}}
.final__statement{font-size:48px;line-height:54px;font-weight:800;letter-spacing:-.02em;color:#fff}
.final__deadline{font-size:22px;line-height:34px;letter-spacing:-.005em;color:var(--on-dark-2)}

/* ================================================================
   Появление при скролле
   ================================================================ */
:root{--rev-ease:cubic-bezier(.22,.61,.36,1);--rev-dur:.82s}

/* базовое появление: прозрачность + мягкий сдвиг снизу */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity var(--rev-dur) var(--rev-ease),transform var(--rev-dur) var(--rev-ease);
  transition-delay:var(--rd,0ms);
}
[data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0)}

/* карточки — чуть длиннее и с едва заметным приближением */
[data-reveal="card"]{transform:translate3d(0,26px,0) scale(.972);--rev-dur:.88s}
[data-reveal="card"].is-visible{transform:translate3d(0,0,0) scale(1)}

/* платформа и фоновое свечение — почти без сдвига */
[data-reveal="plate"]{transform:translate3d(0,14px,0);--rev-dur:.95s}
[data-reveal="fade"]{transform:none;--rev-dur:1.2s}

/* визуал внутри продуктовой карточки проявляется чуть позже текста */
.pcard[data-reveal] .tile{opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .8s var(--rev-ease),transform .8s var(--rev-ease);
  transition-delay:calc(var(--rd,0ms) + 190ms)}
.pcard[data-reveal].is-visible .tile{opacity:1;transform:translate3d(0,0,0)}

/* таймер: сначала цифры, следом подписи под ними */
.timer[data-reveal] .timer__label{opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .6s var(--rev-ease),transform .6s var(--rev-ease);
  transition-delay:calc(var(--rd,0ms) + 300ms)}
.timer[data-reveal].is-visible .timer__label{opacity:1;transform:translate3d(0,0,0)}

/* ---------- hero: параллакс при скролле и подъём при наведении ---------- */
.gcard-slot.is-ready{
  transform:perspective(1000px) translate3d(0,var(--lift,0px),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .38s var(--rev-ease)}
.gcard-slot.is-ready:hover{--lift:-9px}
.gcard-slot.is-ready:hover .gcard-slot__glow{opacity:calc(var(--glow) + .55);transform:scale(1.05)}
.gcard-slot .gcard{transition:filter .38s var(--rev-ease)}
.gcard-slot.is-ready:hover .gcard{filter:brightness(1.1) saturate(1.05)}
.gcard-slot--center{--glow:.62}
.gcard-slot--prof,.gcard-slot--community{--glow:.34}

/* ---------- hover: подключается после завершения появления ---------- */
.pcard.is-ready{
  transition:transform .3s var(--rev-ease),box-shadow .3s var(--rev-ease),border-color .3s var(--rev-ease)}
.pcard.is-ready:hover{transform:translate3d(0,-3px,0)}
.pcard.is-ready:hover{border-color:#DADAE2;box-shadow:0 18px 40px rgba(23,31,51,.08)}
.pcard--dark.is-ready:hover{border-color:rgba(255,255,255,.2);
  box-shadow:0 26px 54px rgba(5,8,15,.3),0 4px 10px rgba(5,8,15,.16),inset 0 1px 0 rgba(255,255,255,.2)}
.pcard--light-alt.is-ready:hover{border-color:#B4B1EE;
  box-shadow:0 26px 52px rgba(33,30,80,.1),0 4px 10px rgba(33,30,80,.06),inset 0 1px 0 rgba(255,255,255,.5)}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal="card"],[data-reveal="chapter"],[data-reveal="plate"],[data-reveal="fade"],
  .pcard[data-reveal] .tile,.timer[data-reveal] .timer__label,.chapter[data-reveal] .chapter__num{
    opacity:1!important;transform:none!important;transition:none!important}
  .gcard{transform:skewY(var(--skew,0deg))!important}
  .gcard-slot.is-ready,.gcard-slot.is-ready:hover{transform:none!important}
  .gcard-slot__glow{transition:none}
  .chapter.is-ready{transform:none!important}
  .hero__badge-dot,.scroll-hint__ring,.scroll-hint__ring svg,.scroll-hint__text{animation:none}
  .btn,.pcard.is-ready{transition:none}
  .pcard.is-ready:hover{transform:none}
}

/* ================================================================
   Адаптив
   ================================================================ */
@media (max-width:1199px){
  :root{--pad:40px}
  .container{width:auto;max-width:var(--content);padding:0 var(--pad)}

  .hero__canvas{width:100%;height:auto;padding-top:96px}
  .hero__bg{height:100%}
  .hero__head{position:static;width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--pad)}
  .hero__title-line{font-size:clamp(40px,7.4vw,88px);line-height:1.07}
  .hero__sub{font-size:clamp(17px,2.1vw,22px);line-height:1.55}
  .hero__caption{display:none}
  .scene{position:relative;left:auto;top:auto;width:1200px;
    margin-top:40px;margin-right:0;margin-left:calc(50% - 600px);
    transform:scale(var(--k,1));transform-origin:top center;
    margin-bottom:calc((var(--k,1) - 1) * 561px + 40px)}

  .pcard--wide{flex-direction:column;align-items:stretch;gap:32px}
  .pcard--wide .tile{width:100%;height:340px}
}

@media (max-width:1023px){
  .changes{--seg:80vh}
  .changes__title{margin-bottom:52px}
  .story{height:380px}
  .story__title{font-size:clamp(26px,3.9vw,42px);line-height:1.18}
  .story__title--lead{font-size:clamp(32px,5vw,56px);line-height:1.14}
  .story__icon{width:62px;height:62px;margin-bottom:20px}
  .story__body{font-size:19px;line-height:30px}
  .story__extra{font-size:18px;line-height:28px;margin-top:20px}
  .story__nav{margin-top:52px}
  .h2{font-size:clamp(34px,5.2vw,64px);line-height:1.08}
  .subs__row,.professions__pair{flex-direction:column}
  .neuro__grid{grid-template-columns:1fr}
  .timer{gap:20px}
  .timer__unit{width:78px}
  .timer__value,.timer__colon{font-size:62px;line-height:62px}
  .professions__lead{width:100%}
  .final__statement{font-size:clamp(28px,4.4vw,48px);line-height:1.14}
}

@media (max-width:767px){
  .changes{--seg:76vh}
  .changes__stage{min-height:600px}
  .changes__title{margin-bottom:40px}
  .story{height:400px}
  .story__icon{width:56px;height:56px;margin-bottom:16px}
  .story__body{font-size:17px;line-height:27px;margin-top:16px}
  .story__extra{font-size:16px;line-height:26px;margin-top:18px}
  .story__nav{margin-top:40px}
  :root{--pad:20px}
  body{font-size:17px}
  .countdown{padding:56px 0 64px}
  .subs{padding:72px 0}
  .subs .h2{margin-bottom:36px}
  .lastchance{padding:72px 0 28px}
  .lastchance__panel{padding:48px 24px 52px;border-radius:28px}
  .lastchance__title{margin-bottom:18px}

  /* карточки по содержимому: в колонке flex:1 делил высоту поровну и оставлял дыры */
  .pcard{flex:0 0 auto}
  .pcard__spacer{display:none}
  .pcard--wide .pcard__side{justify-content:flex-start}
  .professions{padding:64px 0 80px}
  .professions__head{margin-bottom:40px;gap:18px}
  .professions__head .eyebrow{font-size:18px;line-height:25px;letter-spacing:.04em}
  .tag{font-size:13px;line-height:17px;padding:8px 13px}
  .final{padding:72px 0}
  .hero__canvas{padding-top:64px}
  .hero__head{gap:24px}
  .hero__badge{padding:9px 18px 9px 15px;gap:9px}
  .scene{margin-top:28px}

  .pcard__audience,.pcard__desc{font-size:16px;line-height:26px}
  .plist__head,.plist__item{font-size:16px;line-height:24px}
  .plist{gap:12px;margin-top:-8px}

  .pcard{padding:24px;gap:24px;border-radius:24px}
  .pcard__badge{padding:9px 16px;font-size:11px;letter-spacing:.06em}
  .pcard__name{font-size:25px;line-height:32px}
  .pcard--dark .pcard__name,.pcard--light-alt .pcard__name{font-size:28px;line-height:36px}
  .tile{height:180px}
  .tile--1c,.tile--bots,.tile--ai-text,.tile--ai-table,.tile--ai-deck,.tile--ai-editorial,
  .tile--life-pro,.tile--life-start,.tile--life-daily,.tile--life-ru,
  .tile--invest,.tile--algo,.tile--webflow,.tile--wordpress,
  .pcard--wide .tile{height:200px;min-height:0}
  .tile--sub-main,.tile--sub-neuro{height:230px}
  .invest,.nocode{padding:64px 0 72px}
  .neuro{padding:64px 0 72px}
  .life{padding:64px 0 72px}
  .price__monthly{font-size:22px;line-height:28px}
  .price__new{font-size:28px;line-height:34px}
  .price__old,.price__arrow{font-size:19px;line-height:26px}
  .cta{flex-direction:column;align-items:stretch}
  .btn{width:100%;height:50px}

  .br-m{display:inline}
  /* крайние карточки сцены прячем — три оставшихся становятся крупнее */
  .gcard-slot--prof,.gcard-slot--community{display:none}

  .timer{gap:4px}
  .timer__unit{width:56px;gap:6px}
  .timer__value{font-size:38px;line-height:42px}
  .timer__colon{font-size:26px;line-height:42px;opacity:.55}
  .timer__label{font-size:9px;letter-spacing:.06em}
  .countdown__deadline{font-size:16px}
  .lastchance__lead,.professions__lead,.final__deadline{font-size:17px;line-height:27px}
}


/* ============================================================
   ZEROCODER FOOTER — стили переиспользуемого подвала
   Источник: лендинг Neuroclub (sites.zerocoder.ru/neuroclub/)
   Самодостаточный: все токены заданы на .footer, внешних
   зависимостей нет. Шрифт Manrope наследуется от сайта;
   если его нет — см. README (Google Fonts).
   Брейкпоинты Tilda: 4 колонки → 2 (≤959) → 1 (≤639).
   ============================================================ */

.footer {
  /* локальные токены блока — не конфликтуют с сайтом-хозяином */
  --zc-space-3: 12px;
  --zc-space-4: 16px;
  --zc-space-5: 24px;
  --zc-space-6: 32px;
  --zc-space-7: 48px;
  --zc-space-8: 64px;
  --zc-space-9: 96px;
  --zc-accent: #97e017;
  --zc-easing: cubic-bezier(0.22, 1, 0.36, 1);

  background: #1a2438;
  color: rgba(255, 255, 255, 0.7);
  padding: var(--zc-space-9) 0 var(--zc-space-6);
  font-size: 15px;
  font-family: 'Manrope', Arial, sans-serif;
}

.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--zc-space-8);
  padding-bottom: var(--zc-space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--zc-space-5);
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer__logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 220px;
}

.footer__address {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.footer__badges {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  width: fit-content;
}

.footer__badge-img {
  display: block;
  height: 44px;
  width: auto;
}

.footer__badge-img--rk { height: 48px; }
.footer__badge-img--sk { height: 36px; }

.footer__col {
  font-size: 15px;
}

.footer__col h4 {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 var(--zc-space-4);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--zc-space-3);
}

.footer__col a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s var(--zc-easing);
}

.footer__col a:hover {
  color: var(--zc-accent);
}

.footer__col--contacts {
  display: flex;
  flex-direction: column;
  gap: var(--zc-space-5);
}

.footer__contact-block h4 {
  margin-bottom: 4px;
}

.footer__contact-value {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.2s;
}

.footer__contact-value:hover {
  color: var(--zc-accent);
}

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.footer__social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--zc-easing), box-shadow 0.2s;
}

.footer__social--tg { background: #2aabee; }
.footer__social--wa { background: #25d366; }
.footer__social--yt { background: #ff0000; }
/* MAX — готовый брендовый бейдж (svg с вшитым градиентом), скругляем под круги */
.footer__social--max { overflow: hidden; }

.footer__social-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.footer__social:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
}

.footer__social svg {
  width: 22px;
  height: 22px;
}

.footer__bottom {
  padding-top: var(--zc-space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--zc-space-5);
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.footer__copy {
  letter-spacing: 0.01em;
}

.footer__legal {
  display: flex;
  gap: var(--zc-space-7);
  flex-wrap: wrap;
}

/* Horizontal tablet и меньше — 2 колонки */
@media (max-width: 959px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--zc-space-6);
  }
}

/* Mobile — 1 колонка */
@media (max-width: 639px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

/* --- подгонка под этот лендинг --- */
/* колонки подвала идут по той же сетке, что и остальные секции (1040) */
.footer__container{width:var(--content);max-width:calc(100% - 48px);padding:0}
/* ховер ссылок — акцент проекта вместо лаймового из базового блока */
.footer{--zc-accent:rgba(255,255,255,.62);background:#0C0C10;
  border-top:1px solid rgba(255,255,255,.1)}
.footer__col a:hover,.footer__contact-value:hover{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* бейджи масштабируются по ширине колонки — иначе вылезают за плашку */
.footer__brand,.footer__col{min-width:0}
.footer__badges{max-width:100%;flex-wrap:nowrap}
/* бейджи ужимаются пропорционально, если колонка узкая */
.footer__badge-img{height:auto;width:auto;max-width:100%;min-width:0}
/* колонке с брендом нужно больше места — в ней самый широкий элемент */
@media (min-width:960px){
  .footer__top{grid-template-columns:1.12fr 1fr 1fr .98fr;gap:40px}
}
.footer__badge-img--rk{max-height:48px}
.footer__badge-img--sk{max-height:36px}

/* ================================================================
   ПОПАП С ФОРМОЙ ЗАЯВКИ (виджеты GetCourse)
   Формы рисуются на загрузке внутри своих скрытых контейнеров,
   скрипт только показывает нужную и открывает окно.
   ================================================================ */
.gcp{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;
  padding:24px;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .28s var(--rev-ease),visibility 0s .28s}
.gcp.is-open{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.gcp-back{position:absolute;inset:0;background:rgba(6,6,12,.72);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.gcp-card{position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(660px,100%);max-height:min(88vh,900px);
  background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:0 40px 90px rgba(5,5,20,.45);
  transform:translate3d(0,14px,0) scale(.985);
  transition:transform .32s var(--rev-ease)}
.gcp.is-open .gcp-card{transform:none}
.gcp-x{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(29,29,31,.08);color:var(--text);font-size:17px;line-height:40px;
  cursor:pointer;transition:background .2s}
.gcp-x:hover{background:rgba(29,29,31,.16)}
.gcp-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gcp-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.gcp-body iframe{display:block;width:100%;min-height:520px;border:0}
.gcp-w{display:none;width:100%}
.gcp-w.is-on{display:block}
.gcp-stub{padding:44px 32px;text-align:center}
.gcp-stub b{display:block;font-size:22px;line-height:30px;font-weight:700;margin-bottom:10px}
.gcp-stub p{font-size:16px;line-height:26px;color:var(--text-2)}
.gcp-stub a{color:var(--accent)}
@media (max-width:640px){
  .gcp{padding:0;align-items:flex-end}
  .gcp-card{width:100%;max-height:92vh;border-radius:24px 24px 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
}