/* Alterna · Merhaba — светлый «небесный» мир: облака, плющ, колонны, золото */
:root{
  --bg:#FFFFFF; --haze:#EEF1F5; --haze2:#E3E8EE;
  --steel:#9298A0; --steel-lt:#C6CBD1; --steel-dk:#6E747C;
  --ink:#474C54; --text:#6B7079; --soft:#9EA3AA; --line:#E7EAEE;
  --gold:#F2D994; --gold-lt:#FCEFC4; --gold-dk:#E0BD6C; --gold-ink:#8A7445;
  --peach:#DEAE90; --peach-dk:#C98F6D;
  --ok:#5E9E62; --bad:#CF7F6E;
  --display:"Forum","Cormorant Garamond","Times New Roman",serif;
  --body:"Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
  --r:18px;
  --shadow:0 24px 60px -28px rgba(92,102,116,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:300 16px/1.62 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
b,strong{font-weight:500;color:var(--ink)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--gold-dk);outline-offset:3px;border-radius:6px}

/* ---------- металлический заголовок ---------- */
.metal{position:relative;display:inline-block;font-family:var(--display);font-weight:400;color:#A7ACB3;
  -webkit-text-stroke:.05em #A2A7AE;text-shadow:0 .05em .07em rgba(70,78,88,.22);letter-spacing:.01em;line-height:1.02}
.metal::after{content:attr(data-text);position:absolute;inset:0;-webkit-text-stroke:0;text-shadow:none;color:transparent;
  background:linear-gradient(180deg,#D2D6DB 0%,#A9AEB5 38%,#858B94 58%,#9EA3AA 78%,#C3C7CD 100%);
  -webkit-background-clip:text;background-clip:text;pointer-events:none}
.metal.soft{color:#CDD1D6;-webkit-text-stroke-color:#C9CDD2}
.metal.soft::after{background-image:linear-gradient(180deg,#E7E9EC,#C3C7CD)}
.h1{font-size:clamp(44px,13vw,120px);text-align:center}
.h2{display:block;width:fit-content;font-size:clamp(30px,8.4vw,60px);text-align:center;text-wrap:balance;max-width:16ch;margin:0 auto}
.h3{display:block;width:fit-content;font-size:clamp(24px,6vw,38px);text-align:center;margin:0 auto}
.h1{display:block;width:fit-content;margin:0 auto}
.kicker{margin:0 0 6px;text-align:center;color:var(--soft);font-size:14px;letter-spacing:.02em}
.sub{margin:14px auto 0;text-align:center;color:var(--peach-dk);font-size:15px;max-width:34ch;text-wrap:balance}
.muted{color:var(--soft)}

/* ---------- кнопки ---------- */
.btn-gold{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;
  min-height:56px;padding:0 30px;border:0;border-radius:12px;text-decoration:none;
  font:500 12.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);
  background:linear-gradient(180deg,#FDF2CD 0%,#F4DC9B 46%,#EACB7C 100%);
  box-shadow:0 5px 0 #DDBB6A,0 18px 30px -10px rgba(214,176,92,.65),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease,box-shadow .18s ease}
.btn-gold::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:shine 4.2s ease-in-out infinite}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 7px 0 #DDBB6A,0 24px 34px -12px rgba(214,176,92,.7),inset 0 1px 0 #fff}
.btn-gold:active{transform:translateY(4px);box-shadow:0 1px 0 #DDBB6A,0 8px 16px -8px rgba(214,176,92,.6),inset 0 1px 0 #fff}
.btn-gold.sm{min-height:46px;padding:0 20px;font-size:11px;letter-spacing:.16em}
.btn-gold.big{min-height:64px;padding:0 38px;font-size:13.5px}
@keyframes shine{0%,55%{left:-60%}85%,100%{left:130%}}
.btn-line{min-height:46px;padding:0 20px;border-radius:12px;border:1px solid var(--steel-lt);background:#fff;color:var(--ink);font-size:14px;font-weight:400;transition:border-color .2s,transform .15s}
.btn-line:hover{border-color:var(--gold-dk)}
.btn-line:active{transform:scale(.97)}
.pill{display:inline-block;margin-top:14px;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.8);border:1px solid var(--line);color:var(--soft);font-size:13px;text-decoration:none;box-shadow:0 8px 20px -14px rgba(0,0,0,.25)}
.pill:hover{color:var(--peach-dk)}

/* ---------- прогресс и перья ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-lt),var(--gold-dk))}
.feathers{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.feathers svg{position:absolute;top:-80px;width:22px;height:66px;opacity:.9;filter:drop-shadow(0 6px 6px rgba(120,130,145,.18))}

/* ---------- облака ---------- */
.clouds{position:absolute;left:-10%;right:-10%;height:190px;pointer-events:none;z-index:3;filter:blur(10px);opacity:.98;
  background:
   radial-gradient(closest-side,#fff 62%,rgba(255,255,255,0)) 0% 70%/32% 70% no-repeat,
   radial-gradient(closest-side,#fff 62%,rgba(255,255,255,0)) 22% 40%/30% 90% no-repeat,
   radial-gradient(closest-side,#fff 62%,rgba(255,255,255,0)) 48% 60%/36% 80% no-repeat,
   radial-gradient(closest-side,#fff 62%,rgba(255,255,255,0)) 74% 35%/30% 95% no-repeat,
   radial-gradient(closest-side,#fff 62%,rgba(255,255,255,0)) 100% 65%/34% 75% no-repeat,
   radial-gradient(closest-side,rgba(226,231,238,.9) 40%,rgba(255,255,255,0)) 35% 30%/40% 60% no-repeat,
   radial-gradient(closest-side,rgba(226,231,238,.9) 40%,rgba(255,255,255,0)) 85% 25%/30% 50% no-repeat;
  animation:drift 22s ease-in-out infinite alternate}
.clouds-b{bottom:-70px}
.clouds-t{top:-90px;transform:scaleY(-1)}
@keyframes drift{from{translate:-2% 0}to{translate:2% 0}}

/* ---------- плющ ---------- */
.vine{position:absolute;pointer-events:none;z-index:4}
.vine svg{width:100%;height:100%;overflow:visible}
.vine .lf{transform-box:fill-box;transform-origin:50% 100%;animation:sway var(--t,5s) ease-in-out var(--d,0s) infinite alternate}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.vine-tl{top:-40px;left:-34px;width:34vw;max-width:360px;aspect-ratio:200/360}
.vine-tr{top:-40px;right:-34px;width:34vw;max-width:360px;aspect-ratio:200/360;transform:scaleX(-1)}
.vine.sm{width:30vw;max-width:240px}
.vine-side{top:30px;right:-22px;width:28vw;max-width:220px;aspect-ratio:200/360;transform:scaleX(-1);opacity:.95}
.vine-side.r{right:auto;left:-22px;transform:none}
.vine-card{top:-44px;right:-34px;width:110px;aspect-ratio:1;transform:scaleX(-1)}

/* ---------- телефон и крылья ---------- */
.phone{--w:230px;position:relative;width:var(--w);padding:calc(var(--w)*.034);border-radius:calc(var(--w)*.17);
  background:linear-gradient(145deg,#FFFFFF 0%,#DCDFE4 38%,#F6F7F9 62%,#C9CED5 100%);
  box-shadow:0 34px 60px -26px rgba(70,82,98,.45),inset 0 0 0 1px rgba(255,255,255,.9),inset 0 0 0 3px rgba(180,188,198,.35)}
.phone img{width:100%;height:auto;border-radius:calc(var(--w)*.14);background:#f3f4f6}
.wings{position:absolute;pointer-events:none}
.wings svg{position:absolute;top:0;height:100%;width:50%;overflow:visible}
.wings .w-l{left:0;transform-origin:100% 55%;animation:flapL 3.4s ease-in-out infinite}
.wings .w-r{right:0;transform-origin:0% 55%;animation:flapR 3.4s ease-in-out infinite}
@keyframes flapL{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-7deg)}}
@keyframes flapR{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg)}}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:38px 20px 110px;text-align:center;isolation:isolate}
.sky{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 40% at 50% 10%,#fff 30%,rgba(255,255,255,0) 70%),
  radial-gradient(40% 30% at 12% 40%,var(--haze) 0%,rgba(255,255,255,0) 70%),
  radial-gradient(45% 35% at 90% 55%,var(--haze) 0%,rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#F7F9FB 0%,#FFFFFF 60%)}
.col{position:absolute;top:120px;width:24vw;max-width:170px;aspect-ratio:120/640;z-index:1;
  -webkit-mask-image:linear-gradient(#000 45%,transparent 92%);mask-image:linear-gradient(#000 45%,transparent 92%)}
.col-l{left:-9vw}.col-r{right:-9vw}
.eyebrow{position:relative;z-index:5;margin:0 0 14px;font:400 10.5px/1.4 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--soft)}
.hero-title{position:relative;z-index:2;margin:0;display:flex;flex-direction:column;align-items:center}
.hero-title .line1{font-size:clamp(24px,7.4vw,76px);white-space:nowrap}
.hero-title .big{display:flex;justify-content:center;font-size:clamp(60px,18vw,230px);line-height:.92;margin-top:.04em}
.hero-title .big .metal{line-height:.92;opacity:0;transform:translateY(.35em);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + .15s)}
@keyframes rise{to{opacity:1;transform:none}}
.stage{position:relative;z-index:6;margin:-1vw auto 0;width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center}
.stage .wings{top:6%;left:50%;width:min(118vw,700px);height:62%;transform:translateX(-50%);z-index:-1;opacity:.95}
.phone-hero{--w:min(50vw,270px);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.side{margin:0;font-size:13.5px;line-height:1.45;color:var(--peach-dk)}
.side b{font-weight:400;color:var(--peach-dk)}
.side-l,.side-r{position:relative;margin-top:18px}
.side-r{margin-top:6px}
.hero-cta{position:relative;z-index:7;margin-top:26px;display:flex;flex-direction:column;align-items:center}

/* ---------- секции ---------- */
.sec{position:relative;padding:84px 20px;overflow:hidden}
.sec>:not(.vine):not(.clouds):not(.leaf-fall):not(.arch){position:relative;z-index:5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv:not(.in){opacity:0;transform:translateY(22px)}

/* для тебя, если */
.for{background:linear-gradient(180deg,#fff,#F8FAFB 60%,#fff)}
.leaf-fall{position:absolute;top:30px;left:-10px;width:90px;height:90px;filter:blur(3px);opacity:.75;animation:sway 7s ease-in-out infinite alternate;z-index:1}
.leaf-fall svg{width:100%;height:100%;fill:#C79A6B}
.avatars{list-style:none;margin:38px auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 14px;max-width:980px}
.avatars li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:13.5px;line-height:1.4}
.avatars li:nth-child(even){margin-top:34px}
.ava{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:36px;margin-bottom:12px;
  background:radial-gradient(circle at 35% 30%,#fff,#EEF1F4);box-shadow:0 14px 26px -14px rgba(80,90,105,.45),inset 0 0 0 5px #fff,inset 0 0 0 6px var(--line);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.avatars li:hover .ava,.avatars li:active .ava{transform:scale(1.12) rotate(-6deg)}
.avatars b{display:block;font-weight:500;color:var(--ink)}
.avatars span{color:var(--soft)}

/* урок */
.lesson{background:#fff}
.story{margin:34px auto 0;max-width:620px;background:#fff;border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow);border:1px solid var(--line)}
.story p{margin:0 0 12px;color:var(--ink);font-size:16.5px;line-height:1.6}
.story .punch{margin:18px 0 4px;font-family:var(--display);font-size:24px;line-height:1.25;color:var(--peach-dk)}
.story .hint{margin:16px 0 0;font-size:12.5px;color:var(--soft)}
.tr{font-weight:500;color:var(--gold-ink);background:linear-gradient(transparent 62%,rgba(242,217,148,.55) 62%);border-radius:2px;cursor:pointer;padding:0 2px}
.tr:hover,.tr.speaking{background:linear-gradient(transparent 0,rgba(242,217,148,.7) 0)}
.card{margin:22px auto 0;max-width:620px;background:linear-gradient(180deg,#fff,#FBFCFD);border-radius:var(--r);padding:24px 20px;border:1px solid var(--line);box-shadow:var(--shadow)}
.card-t{margin:0 0 12px;font:400 26px/1 var(--display);color:var(--steel-dk)}
.phr{list-style:none;margin:0;padding:0}
.phr li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.phr li:first-child{border-top:0}
.phr b{font-weight:500;color:var(--ink);font-size:16.5px}
.phr span{grid-column:2;font-size:14px;color:var(--text)}
.phr .say{grid-row:span 2}
.say{width:40px;height:40px;border-radius:50%;border:0;position:relative;flex:none;
  background:linear-gradient(180deg,#FDF2CD,#EFD58E);box-shadow:0 3px 0 #DDBB6A,0 8px 14px -8px rgba(214,176,92,.7);transition:transform .15s}
.say::before{content:"";position:absolute;left:15px;top:12px;border-left:12px solid var(--gold-ink);border-top:8px solid transparent;border-bottom:8px solid transparent}
.say:active{transform:translateY(2px)}
.say.speaking::before{left:13px;top:13px;border:0;width:4px;height:14px;background:var(--gold-ink);box-shadow:8px 0 0 var(--gold-ink);animation:eq .5s ease-in-out infinite alternate}
@keyframes eq{to{height:8px;top:16px}}
.say.sm{width:32px;height:32px;vertical-align:middle}
.say.sm::before{left:12px;top:9px;border-left-width:10px;border-top-width:7px;border-bottom-width:7px}
.formula{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;color:var(--soft)}
.formula span{padding:5px 10px;border-radius:8px;background:var(--haze);color:var(--ink);font-weight:400}
.formula span:nth-child(n+2){background:rgba(242,217,148,.45);color:var(--gold-ink)}
.formula b{font-weight:500;color:var(--ink)}
.formula em{flex-basis:100%;font-style:normal;font-size:13px;color:var(--soft)}
.note{margin:14px 0 0;font-size:15px;color:var(--text)}
.trap{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#FCF4F0;font-size:14.5px;color:var(--text)}
.trap s{color:var(--bad);text-decoration-thickness:2px}
.harm{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.harm p{margin:0;padding:10px 12px;border-radius:12px;background:var(--haze);display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline}
.harm i{font-style:normal;font-size:12px;color:var(--soft);grid-row:span 2}
.harm b{color:var(--gold-ink)}
.harm span{font-size:13px;color:var(--text)}

/* механика */
.mech{margin:22px auto 0;max-width:620px;padding:24px 20px;border-radius:var(--r);background:radial-gradient(120% 90% at 50% 0%,#FFFBEF,#FFFFFF 70%);border:1px solid #F3E6C3}
.mech-t{margin:0 0 8px;font:400 22px/1.1 var(--display);color:var(--gold-ink)}
.mech>p{margin:0 0 10px;font-size:15px}
.wagon-row{display:flex;justify-content:center;align-items:stretch;margin:16px 0 14px;min-height:64px;font-size:30px;font-weight:500}
.w-base{padding:10px 18px;border-radius:14px 0 0 14px;background:#fff;border:1px solid var(--steel-lt);color:var(--ink)}
.w-slot{min-width:70px;padding:10px 16px;border-radius:0 14px 14px 0;border:1px dashed var(--gold-dk);border-left:0;color:var(--gold-ink);background:rgba(242,217,148,.25);display:grid;place-items:center}
.w-slot.pop{animation:snap .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes snap{0%{transform:translateX(40px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.w-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.w-chips button,.q-opts button{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--steel-lt);background:#fff;font-size:15px;transition:transform .15s,border-color .2s,background .2s}
.w-chips button[aria-pressed="true"]{border-color:var(--gold-dk);background:var(--gold-lt);color:var(--gold-ink)}
.w-chips button:active,.q-opts button:active{transform:scale(.95)}
.w-out{margin:14px 0 0;text-align:center;min-height:52px;font-size:15px}
.w-word{display:block;font-weight:500;color:var(--ink)}
.w-ex{margin-left:6px}
.ager{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px 0 16px}
.age-num{font-size:92px;line-height:1}
.age-tr{margin:0;font-size:20px;color:var(--ink)}
.age-words{color:var(--gold-ink)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;max-width:420px;height:34px;background:transparent;margin:8px 0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--gold) var(--p,20%),var(--haze2) var(--p,20%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:linear-gradient(180deg,#FDF2CD,#EACB7C);border:3px solid #fff;box-shadow:0 4px 12px rgba(180,140,60,.45)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--haze2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--gold)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#F2D994;border:3px solid #fff;box-shadow:0 4px 12px rgba(180,140,60,.45)}
.nums p{margin:6px 0;font-size:14px}
.nums b{color:var(--gold-ink)}

/* квиз */
.mech .q-word{text-align:center;font-size:24px;margin:14px 0;color:var(--ink)}
.q-slot{display:inline-block;min-width:54px;padding:2px 10px;border-radius:10px;border:1px dashed var(--gold-dk);color:var(--gold-ink)}
.q-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.q-opts button{padding:0;font-size:18px}
.q-opts button.ok{background:#EAF5EA;border-color:var(--ok);color:var(--ok)}
.q-opts button.no{background:#FBEDE9;border-color:var(--bad);color:var(--bad);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.q-fb{text-align:center;min-height:48px;margin:14px 0 0 !important;font-size:14.5px}

/* карточка */
.maker{background:linear-gradient(180deg,#F6F8FA,#fff 40%);padding-top:120px}
.maker-grid{margin:34px auto 0;max-width:980px;display:grid;gap:22px}
.maker-form{display:grid;gap:16px;background:#fff;border-radius:var(--r);padding:22px 20px;border:1px solid var(--line);box-shadow:var(--shadow)}
.maker-form label{display:grid;gap:6px;font-size:13.5px;color:var(--soft)}
.maker-form output{color:var(--gold-ink);font-weight:500}
.maker-form input[type=text],.maker-form select,.date input{height:52px;border-radius:12px;border:1px solid var(--steel-lt);padding:0 14px;font:400 16px var(--body);color:var(--ink);background:#fff;width:100%}
.maker-form input[type=text]:focus,.maker-form select:focus,.date input:focus{outline:0;border-color:var(--gold-dk);box-shadow:0 0 0 4px rgba(242,217,148,.35)}
.invite{position:relative;border-radius:22px;padding:34px 24px 24px;text-align:center;overflow:visible;
  background:radial-gradient(120% 80% at 50% 0%,#FFFDF6,#FFFFFF 60%);border:1px solid #F1E3BC;box-shadow:0 30px 70px -34px rgba(190,150,70,.55)}
.invite::before{content:"";position:absolute;inset:8px;border-radius:16px;border:1px solid rgba(224,189,108,.35);pointer-events:none}
.inv-kick{margin:0;font:400 44px/1 var(--display);color:var(--gold-ink)}
.inv-tr{margin:16px 0 8px;font-size:20px;line-height:1.5;color:var(--ink);font-weight:400;min-height:90px}
.inv-tr .hl{color:var(--gold-ink);font-weight:500;transition:color .3s}
.inv-tr .hl.flash{animation:flash .7s}
@keyframes flash{0%{background:rgba(242,217,148,.9)}100%{background:transparent}}
.inv-ru{margin:0 0 6px;font-size:14px;color:var(--soft)}
.inv-name{margin:0 0 18px;min-height:20px;font-size:13px;color:var(--peach-dk)}
.inv-act{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}

/* диалог */
.dialog{background:#fff;text-align:center}
.dialog>.btn-gold{margin:26px auto 0}
.chat{list-style:none;margin:30px auto 0;padding:0;max-width:560px;display:flex;flex-direction:column;gap:10px;text-align:left}
.chat li{max-width:84%;padding:12px 16px;border-radius:18px 18px 18px 6px;background:var(--haze);transition:opacity .5s,transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.chat li.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:linear-gradient(180deg,#FEF6DC,#F7E4AE)}
.js .chat li:not(.show){opacity:0;transform:translateY(16px) scale(.96)}
.chat li.speaking{box-shadow:0 0 0 3px var(--gold)}
.chat b{display:block;color:var(--ink);font-weight:500}
.chat span{font-size:13px;color:var(--text)}
.no-js .chat li{opacity:1;transform:none}
.culture{margin:70px auto 0;max-width:980px}
.cult{display:grid;gap:14px;margin-top:26px;text-align:left}
.cult article{padding:20px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cn{font:400 40px/1 var(--display);color:#EED3C2}
.cult b{display:block;margin:4px 0 4px;font-size:17px}
.cult p{margin:0;font-size:14.5px}

/* урок пройден */
.done{background:linear-gradient(180deg,#fff,#F5F7F9)}
.done-card{max-width:620px;margin:0 auto;text-align:center;padding:32px 22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.done-big{margin:6px 0 10px;display:flex;justify-content:center;align-items:baseline;gap:10px;font-size:76px}
.done-big i{font:400 40px var(--display);color:var(--steel-lt);font-style:normal}
.bar{height:8px;border-radius:8px;background:var(--haze2);overflow:hidden;margin:0 auto 18px;max-width:360px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-lt),var(--gold-dk));transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.done-card.in .bar i{width:.78%;min-width:10px}
.done-t{margin:0 0 8px;font-size:18px;color:var(--ink);font-weight:400}
.done-s{margin:0;font-size:15px}

/* два пути */
.paths{background:radial-gradient(60% 40% at 50% 30%,#fff,#F4F6F9);text-align:center}
.paths-grid{margin:34px auto 30px;max-width:1100px;display:grid;gap:18px;align-items:center}
.path{display:grid;gap:6px;text-align:left;padding:22px 20px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .4s,opacity .4s,filter .4s,border-color .4s}
.path .p-num{font:400 28px/1 var(--display);color:var(--peach)}
.path b{font-size:17px}
.p-txt{font-size:14.5px;line-height:1.55}
.path[aria-pressed="false"]{opacity:.6;filter:saturate(.3)}
.path[aria-pressed="true"]{border-color:#F1E0B3;transform:translateY(-4px)}
.p-visual{position:relative;height:430px;display:grid;place-items:center}
.p-visual .wings{inset:18% -10% 30%;opacity:0;transition:opacity .6s}
.chaos{position:absolute;inset:0;transition:opacity .6s,filter .6s,transform .6s}
.chaos span{position:absolute;left:50%;top:var(--y);translate:calc(-50% + var(--x)) 0;rotate:var(--r);white-space:nowrap;padding:10px 14px;border-radius:10px;background:#fff;border:1px solid #DADDE2;color:#8C9098;font-size:13px;box-shadow:0 10px 20px -12px rgba(0,0,0,.35);filter:grayscale(1)}
.phone-path{--w:200px;transition:opacity .6s,transform .7s cubic-bezier(.2,.9,.2,1)}
.paths-grid[data-mode="1"] .phone-path{opacity:0;transform:translateY(40px) scale(.85)}
.paths-grid[data-mode="2"] .chaos{opacity:0;filter:blur(8px);transform:scale(1.15)}
.paths-grid[data-mode="2"] .p-visual .wings{opacity:1}

/* лавры и цифры */
.inside{background:#fff}
.laurels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:760px;margin:0 auto 60px}
.laurel{margin:0;position:relative;display:grid;place-items:center;text-align:center;aspect-ratio:1/.9}
.wreath{position:absolute;inset:-6% -4%}
.wreath svg{width:100%;height:100%}
.laurel figcaption{position:relative;display:grid;line-height:1.15;max-width:62%}
.laurel b{font:400 clamp(14px,4vw,28px)/1.05 var(--display);color:var(--ink);white-space:nowrap}
.laurel span{font-size:10.5px;color:var(--peach-dk);margin-top:3px}
.stats{margin:34px auto 0;max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stats article{padding:20px 14px;border-radius:var(--r);background:linear-gradient(180deg,#fff,#FAFBFC);border:1px solid var(--line);text-align:center;box-shadow:var(--shadow)}
.stats .n{margin:0 0 6px;font-size:48px;font-variant-numeric:tabular-nums}
.stats b{display:block;font-size:14.5px;line-height:1.3}
.stats span{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--soft)}
.all{text-align:center;margin:30px 0 0;font:400 26px/1.2 var(--display);color:var(--peach-dk)}

/* карусель */
.phones{background:linear-gradient(180deg,#F3F6F9,#fff 50%);padding-top:130px}
.carousel{position:relative;margin:26px -20px 0}
.c-wings{position:absolute;left:0;right:0;top:40px;height:420px;display:flex;justify-content:center;pointer-events:none;z-index:0}
.c-wings .wings{position:relative;width:min(560px,120vw);height:100%}
.c-track{position:relative;z-index:1;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px calc(50vw - 110px) 30px;scrollbar-width:none;perspective:1200px}
.c-track::-webkit-scrollbar{display:none}
.c-slide{flex:0 0 220px;margin:0;scroll-snap-align:center;display:grid;place-items:center;transform-style:preserve-3d;will-change:transform}
.c-slide .phone{--w:200px;cursor:zoom-in}
.c-cap{min-height:66px;max-width:40ch;margin:6px auto 0;padding:0 20px;text-align:center;font-size:15px;color:var(--ink);text-wrap:balance;transition:opacity .25s}
.c-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.c-prev,.c-next{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:0 8px 18px -12px rgba(0,0,0,.35);position:relative}
.c-prev::before,.c-next::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-top:2px solid var(--steel-dk);border-left:2px solid var(--steel-dk);translate:-30% -50%;rotate:-45deg}
.c-next::before{rotate:135deg;translate:-70% -50%}
.c-dots{display:flex;gap:6px}
.c-dots i{width:6px;height:6px;border-radius:6px;background:var(--steel-lt);transition:width .3s,background .3s}
.c-dots i.on{width:22px;background:var(--gold-dk)}

/* видео */
.video{background:#fff;text-align:center}
.browser{margin:30px auto 0;max-width:980px;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(60,72,90,.5)}
.b-top{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#F4F5F7;border-bottom:1px solid var(--line)}
.b-top i{width:9px;height:9px;border-radius:50%;background:#DDE0E4}
.b-top span{margin-left:10px;flex:1;text-align:center;padding:4px 10px;border-radius:8px;background:#fff;font-size:11.5px;color:var(--soft)}
.b-screen{aspect-ratio:1280/608;background:#EEF0F3}
.b-screen video{width:100%;height:100%;object-fit:cover;display:block}
.b-tabs{display:flex;overflow-x:auto;gap:6px;padding:10px;scrollbar-width:none}
.b-tabs button{flex:none;min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--text)}
.b-tabs button[aria-selected="true"]{background:var(--gold-lt);border-color:var(--gold-dk);color:var(--gold-ink)}
.v-cap{margin:16px auto 0;max-width:46ch;font-size:15px;min-height:48px}

/* notion */
.notion{background:linear-gradient(180deg,#fff,#F6F8FA)}
.deck{position:relative;margin:36px auto 0;max-width:760px;aspect-ratio:1400/760;cursor:pointer;outline-offset:8px}
.deck figure{position:absolute;inset:0;margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(60,72,90,.5);transition:transform .7s cubic-bezier(.2,.9,.2,1),opacity .5s;transform-origin:50% 100%}
.deck img{width:100%;height:100%;object-fit:cover;object-position:top}
.deck-cap{text-align:center;margin:22px auto 0;max-width:44ch;font-size:15px;color:var(--ink);min-height:48px}

/* как проходит */
.how{background:#fff}
.steps{margin:34px auto 0;max-width:1000px;display:grid;gap:26px;text-align:center}
.big-n{display:block;font:400 92px/.9 var(--display);background:linear-gradient(180deg,#F3DCCB,#EAC6B0);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps b{display:block;margin-top:6px;font-size:17px}
.steps p{margin:6px auto 0;max-width:30ch;font-size:14.5px}

/* программа */
.program{background:linear-gradient(180deg,#fff,#F7F9FA)}
.timeline{list-style:none;margin:40px auto 0;padding:0 0 0 8px;max-width:900px;position:relative;--fill:0}
.timeline::before,.timeline::after{content:"";position:absolute;left:29px;top:10px;bottom:10px;width:2px;background:var(--line)}
.timeline::after{background:linear-gradient(var(--gold-lt),var(--gold-dk));transform-origin:0 0;transform:scaleY(var(--fill))}
.timeline>li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:0 0 30px}
.dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--body);color:var(--gold-ink);background:linear-gradient(180deg,#FEF5D8,#F2D994);box-shadow:0 0 0 6px #fff,0 8px 16px -8px rgba(200,160,80,.7)}
.timeline b{display:block;font:400 26px/1.1 var(--display);color:var(--ink)}
.timeline em{display:block;font-style:normal;font-size:13px;color:var(--peach-dk);margin:2px 0 8px}
.timeline ul{margin:0;padding-left:16px}
.timeline ul li{font-size:14.5px;margin:3px 0}
.timeline ul li::marker{color:var(--gold-dk)}

/* таймер */
.timer{text-align:center;background:radial-gradient(70% 60% at 50% 60%,#fff 30%,#EEF2F6);padding-top:110px;padding-bottom:110px}
.arch{position:absolute;inset:0;z-index:1;pointer-events:none}
.vine-arch{top:0;bottom:0;width:22vw;max-width:300px}
.vine-arch.l{left:-26px}
.vine-arch.r{right:-26px;transform:scaleX(-1)}
.count{margin:18px auto 0;display:flex;justify-content:center;align-items:flex-start;gap:2px}
.count p{margin:0;display:grid;justify-items:center}
.count .metal{font-size:clamp(44px,13vw,120px);font-variant-numeric:tabular-nums;min-width:1.05em}
.count i{font-style:normal;font:500 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-top:6px}
.count>b{font:400 clamp(34px,10vw,90px)/1 var(--display);color:var(--steel-lt);margin-top:.05em}
.count .tick{animation:tick .45s ease}
@keyframes tick{0%{transform:translateY(-12%);opacity:.3}100%{transform:none;opacity:1}}
.date{display:grid;justify-items:center;gap:8px;margin:28px auto 0;max-width:300px;font-size:14px;color:var(--soft)}
.date small{font-size:12px;color:var(--peach-dk)}
.plan{margin:22px auto 0;max-width:40ch;font-size:16px;color:var(--ink);min-height:52px;text-wrap:balance}
.plan b{color:var(--gold-ink)}

/* тарифы */
.price{background:#fff}
.tariffs{margin:34px auto 0;max-width:820px;display:grid;gap:18px}
.tariff{position:relative;padding:26px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.tariff h3{margin:0 0 12px;font-size:19px;font-weight:500;color:var(--ink)}
.tariff ul{margin:0;padding-left:18px;flex:1}
.tariff li{margin:5px 0;font-size:14.5px}
.tariff li::marker{color:var(--steel-lt)}
.t-self{background:#FAFBFC}
.t-self .btn-line{margin-top:14px}
.t-main{border-color:#F0DFB2;box-shadow:0 40px 80px -40px rgba(200,160,80,.55)}
.t-main li::marker{color:var(--gold-dk)}
.t-main .btn-gold{margin-top:14px}
.badge{position:absolute;top:18px;right:18px;padding:8px 12px;border-radius:99px;background:linear-gradient(180deg,#F5B3A2,#EE8E78);color:#fff;font-size:12px;font-weight:500;box-shadow:0 8px 16px -8px rgba(230,120,100,.7)}
.t-old{margin:18px 0 0;font-size:13px;color:var(--soft)}
.t-price{margin:2px 0 0;font:400 56px/1 var(--display)}
.t-price.soft{color:var(--steel-lt)}
.t-note{margin:6px 0 0;font-size:13.5px;color:var(--peach-dk)}

/* автор */
.about{background:linear-gradient(180deg,#fff,#F7F9FB);text-align:center}
.medal{position:relative;margin:60px auto 22px;width:112px;height:112px}
.medal .wings{inset:-10px -110px;opacity:.95}
.medal span{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;font:400 58px/1 var(--display);color:var(--gold-ink);
  background:radial-gradient(circle at 35% 30%,#FFF8E0,#F2D994 60%,#DDB45E);box-shadow:0 20px 40px -18px rgba(190,150,70,.8),inset 0 0 0 6px rgba(255,255,255,.5)}
.bio{text-align:left}

/* faq */
.faq{background:#fff}
.qa{margin:30px auto 0;max-width:720px;display:grid;gap:10px}
.qa details{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -24px rgba(60,72,90,.5);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:18px 52px 18px 18px;position:relative;font-weight:500;color:var(--ink);font-size:15.5px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:20px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--gold-dk),var(--gold-dk)) center/14px 2px no-repeat,linear-gradient(var(--gold-dk),var(--gold-dk)) center/2px 14px no-repeat;transition:transform .3s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{margin:0;padding:0 18px 18px;font-size:15px}

/* финал */
.final{text-align:center;background:linear-gradient(180deg,#F1F4F8 0%,#fff 45%);padding-top:150px;padding-bottom:110px}
.floaters{position:relative;height:220px;margin:0 auto -30px;max-width:520px;z-index:4}
.fl{position:absolute;--w:108px}
.f1{left:4%;top:30px;rotate:-14deg;animation:float 6.5s ease-in-out infinite}
.f2{left:50%;top:0;translate:-50% 0;--w:120px;rotate:4deg;animation:float2 7s ease-in-out infinite}
.f3{right:4%;top:40px;rotate:12deg;animation:float 5.8s ease-in-out -2s infinite}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gheart{position:relative;width:110px;height:110px;margin:30px auto 18px;animation:beat 2.4s ease-in-out infinite}
.gheart>svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 16px 20px rgba(214,176,92,.55))}
.gheart .wings{inset:-6px -84px 10px;opacity:.95}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}}
.final-t{margin:18px auto 26px;max-width:36ch;font-size:17px;color:var(--ink);text-wrap:balance}
.final-n{margin:16px 0 0;font-size:13.5px;color:var(--soft)}

.foot{padding:28px 20px 110px;text-align:center;font-size:12.5px;color:var(--soft);background:#fff;border-top:1px solid var(--line)}
.foot p{margin:2px 0}

/* sticky CTA */
.sticky{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 8px 8px 16px;border-radius:18px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:0 20px 40px -18px rgba(60,72,90,.45);transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.sticky.on{transform:none}
.sticky p{margin:0;display:grid;line-height:1.15}
.sticky p b{font:400 26px/1 var(--display);color:var(--ink)}
.sticky p span{font-size:11.5px;color:var(--soft)}

.toast{position:fixed;left:50%;top:18px;z-index:70;translate:-50% -160%;padding:12px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 40px -18px rgba(60,72,90,.45);font-size:14.5px;color:var(--ink);transition:translate .45s cubic-bezier(.2,.9,.2,1);max-width:calc(100vw - 32px);text-align:center}
.toast.on{translate:-50% 0}

.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible}
.lightbox::backdrop{background:rgba(238,242,246,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox img{max-height:88vh;max-width:92vw;width:auto;border-radius:26px;box-shadow:0 40px 80px -30px rgba(40,50,64,.6)}
.lb-close{position:absolute;top:-16px;right:-12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.lb-close::before,.lb-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--steel-dk);translate:-50% -50%;rotate:45deg}
.lb-close::after{rotate:-45deg}

/* =========================================================
   АНИМАЦИИ ОБЪЯСНЕНИЯ
   ========================================================= */
.hand{font-family:"Caveat","Comic Sans MS",cursive;font-weight:700;color:var(--peach-dk);line-height:1}
.hand svg{width:44px;height:30px;vertical-align:middle;overflow:visible}
.hand svg path,.scribble path,.squig path{fill:none;stroke:var(--peach);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.draw path{animation:draw 1s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* буквы падают */
.hero-title .big .metal{opacity:1;transform:none;animation:none;cursor:pointer;pointer-events:auto;transform-origin:50% 90%}
.js .hero-title .big .metal{animation:drop 1.25s cubic-bezier(.3,.1,.3,1) both;animation-delay:calc(var(--i)*95ms + .2s)}
@keyframes drop{
  0%{opacity:0;transform:translateY(-130vh) rotate(var(--r0))}
  55%{opacity:1;transform:translateY(0) rotate(calc(var(--rest) * -2))}
  70%{transform:translateY(-14%) rotate(var(--rest))}
  82%{transform:translateY(0) rotate(calc(var(--rest) * .5))}
  90%{transform:translateY(-4%)}
  100%{opacity:1;transform:translateY(0) rotate(var(--rest))}}
.js .hero-title .big .metal.landed{animation:none;transform:rotate(var(--rest))}
.js .hero-title .big .metal.landed.bump{animation:bump .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bump{0%{transform:translateY(0) rotate(var(--rest))}35%{transform:translateY(-38%) rotate(calc(var(--rest) + 25deg)) scale(1.08)}100%{transform:translateY(0) rotate(var(--rest))}}
.scribble{position:relative;display:block;width:min(78vw,760px);height:16px;margin:-.1em auto 0;overflow:visible}
.scribble path{stroke-width:3;stroke:var(--peach)}
.hero-title{z-index:7}
.hero-note{position:absolute;left:3%;bottom:-40px;font-size:23px;rotate:-6deg;opacity:0;transition:opacity .4s;white-space:nowrap}
.hero-note.on{opacity:1}

/* персонаж Çay */
.cay{position:absolute;z-index:8;width:78px;height:118px;padding:0;border:0;background:none;-webkit-tap-highlight-color:transparent}
.cay-hero{left:max(2%,calc(50% - 170px));bottom:24%}
.cay-hole{position:absolute;left:4px;right:4px;bottom:0;height:16px;border-radius:50%;background:radial-gradient(closest-side,#3A3F47,#5A6068 70%,rgba(90,96,104,0));box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
.cay-clip{position:absolute;left:-30px;right:-30px;top:-40px;bottom:8px;overflow:hidden;border-radius:0 0 50% 50%/0 0 14px 14px}
.cay-body{position:absolute;left:30px;bottom:-6px;width:78px;height:98px;transform:translateY(105%);transition:transform .9s cubic-bezier(.3,1.5,.5,1)}
.cay.up .cay-body{transform:translateY(0)}
.cay.jump .cay-body{animation:cayJump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes cayJump{40%{transform:translateY(-22%) rotate(-6deg)}}
.cay .arm-r{transform-box:fill-box;transform-origin:0% 100%}
.cay.up .arm-r{animation:wave 1.6s ease-in-out 1s 3}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-24deg)}75%{transform:rotate(18deg)}}
.cay .eye{transform-box:fill-box;transform-origin:center}
.cay .eye.blink{animation:blink .22s}
@keyframes blink{50%{transform:scaleY(.1)}}
.cay .steam{animation:steam 3s ease-in-out infinite;opacity:.8}
@keyframes steam{50%{transform:translateY(-4px);opacity:.3}}
.cay-say{position:absolute;left:62px;top:-34px;white-space:nowrap;padding:7px 12px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 20px -12px rgba(60,72,90,.5);font:700 19px/1 "Caveat",cursive;color:var(--ink);opacity:0;transform:scale(.6) translateY(8px);transform-origin:0 100%;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.cay.up .cay-say{opacity:1;transform:none}
.cay-say.swap{animation:say .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes say{0%{transform:scale(.7)}100%{transform:none}}
.cay-final{position:relative;display:block;margin:-6px auto 6px;left:-40px}
.cay-final .cay-say{left:70px}

/* ленты */
.ribbons{position:relative;height:130px;overflow:hidden;margin:-30px 0 -10px;z-index:9;pointer-events:none}
.ribbon{position:absolute;left:-15%;right:-15%;top:50%;padding:11px 0;overflow:hidden;white-space:nowrap}
.r1{translate:0 -70%;rotate:-5deg;background:linear-gradient(180deg,#FCEFC4,#EFD186);box-shadow:0 12px 26px -14px rgba(200,160,80,.7);z-index:2}
.r2{translate:0 -20%;rotate:4deg;background:#fff;border-block:1px solid var(--line);box-shadow:0 12px 26px -16px rgba(60,72,90,.4)}
.rb-track{display:inline-flex;will-change:transform}
.rb-track span{font:400 24px/1 var(--display);letter-spacing:.06em;color:var(--gold-ink);padding-right:.4em}
.r2 .rb-track span{color:var(--steel-dk);font-size:20px}

/* рукописный круг вокруг слова */
.tr[data-circle]{position:relative;background:none}
.circ{position:absolute;left:-12px;right:-12px;top:-9px;bottom:-9px;width:calc(100% + 24px);height:calc(100% + 18px);overflow:visible;pointer-events:none}
.circ path{fill:none;stroke:var(--peach);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.story.in .circ path{animation:draw 1.1s cubic-bezier(.6,.1,.3,1) .7s forwards}
.js .punch .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(6px)}
.story.in .punch .w{animation:blurIn .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*85ms + .9s)}
@keyframes blurIn{to{opacity:1;filter:none;transform:none}}

/* сцена с двумя телефонами */
.scene{position:relative;margin:26px auto 0;max-width:620px;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:44px 4px 10px;justify-items:center}
.scene .h-a{position:absolute;left:4%;top:0;font-size:21px;rotate:-4deg}
.scene .h-b{position:absolute;right:4%;top:0;font-size:21px;rotate:3deg}
.scene.in .hand path{animation:draw .9s .3s forwards}
.lp{width:100%;max-width:190px;aspect-ratio:9/17.5;border:2px solid #B9BFC7;border-radius:26px;padding:7px;background:#fff;box-shadow:0 26px 40px -30px rgba(60,72,90,.55)}
.lp-a{rotate:-3deg}.lp-b{rotate:3deg}
.lp-screen{position:relative;height:100%;border:1.5px solid #D9DDE2;border-radius:19px;overflow:hidden;background:linear-gradient(#FBFCFD,#fff)}
.lp-screen::before{content:"";position:absolute;left:50%;top:6px;width:36%;height:8px;border-radius:8px;background:#E3E6EA;translate:-50% 0}
.lp-top{margin:0;padding:22px 10px 6px;font-size:11px;font-weight:500;color:var(--ink);text-align:center;border-bottom:1px solid var(--line)}
.lp-chat{display:flex;flex-direction:column;gap:6px;padding:8px}
.bub{margin:0;max-width:88%;padding:6px 9px;border-radius:12px 12px 12px 3px;background:var(--haze);font-size:11.5px;line-height:1.3;color:var(--ink);cursor:pointer;opacity:0;transform:scale(.4);transform-origin:0 100%;transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.bub.me{align-self:flex-end;border-radius:12px 12px 3px 12px;background:linear-gradient(180deg,#FEF6DC,#F5E0A4);transform-origin:100% 100%}
.bub.on{opacity:1;transform:none}
.bub.typing{display:flex;gap:3px;padding:8px 10px}
.bub.typing i{width:5px;height:5px;border-radius:50%;background:var(--gold-dk);animation:dots 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-3px);opacity:.4}}
.bub.gone{display:none}
.radar{position:absolute;left:50%;top:40%;translate:-50% -50%;width:10px;height:10px}
.radar i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--peach);animation:ping 2.2s cubic-bezier(.2,.7,.3,1) infinite}
.radar i:nth-child(2){animation-delay:.7s}.radar i:nth-child(3){animation-delay:1.4s}
@keyframes ping{0%{transform:scale(1);opacity:1}100%{transform:scale(12);opacity:0}}
.scene.fin .radar{display:none}
.contact{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:2px;padding:10px;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.scene.fin .contact{opacity:1;transform:none}
.ct-ava{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:400 24px/1 var(--display);color:var(--gold-ink);background:radial-gradient(circle at 35% 30%,#FFF8E0,#F2D994);margin-bottom:4px}
.contact b{font-size:13px}
.ct-sub{font-size:10.5px;color:var(--soft)}
.ct-check{width:44px;height:44px;margin:10px 0 2px}
.ct-check circle,.ct-check path{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.scene.fin .ct-check circle{animation:draw .7s .4s forwards}
.scene.fin .ct-check path{animation:draw .5s 1s forwards}
.ct-t{font:400 20px/1.1 var(--display) !important;color:var(--ok)}
.scene-replay{grid-column:1/-1;margin-top:10px}

/* перетаскиваемый хвостик */
.w-chips button{touch-action:none}
.w-ghost{position:fixed;z-index:90;pointer-events:none;padding:10px 16px;border-radius:99px;background:var(--gold-lt);border:1px solid var(--gold-dk);color:var(--gold-ink);font-size:15px;box-shadow:0 14px 26px -10px rgba(180,140,60,.6);translate:-50% -50%;rotate:-4deg}
.w-slot.hot{background:rgba(242,217,148,.7);transform:scale(1.08);transition:transform .2s}

/* росток */
.sprout{width:190px;height:234px;margin:0 auto -4px}
.sprout svg{width:100%;height:100%;overflow:visible}
.sp-stem-bg{fill:none;stroke:none}
.sp-stem{fill:none;stroke:#7D9E42;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.8;transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1)}
.sp-leaves use{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.sp-leaves use.on{transform:scale(1)}
.sp-txt{font:700 17px "Caveat",cursive;fill:var(--gold-ink)}
.age-num{font-size:64px}
.nb{margin:0;display:flex;justify-content:center;align-items:baseline;gap:.9em;font-size:18px;min-height:26px;color:var(--gold-ink);transition:gap .5s cubic-bezier(.3,1.4,.5,1)}
.nb span{padding:3px 10px;border-radius:8px;background:rgba(242,217,148,.4);transition:opacity .3s}
.nb .nb-p{background:none;padding:0;color:var(--soft)}
.nb.join{gap:.25em}
.nb.join .nb-p{opacity:0;width:0;overflow:hidden}
.nb.solo .nb-p,.nb.solo .nb-o{display:none}

/* маршрут */
.route{margin:26px auto 0;max-width:620px;padding:22px 16px 10px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.route .mech-t{margin:0}
.route-hint{margin:4px 0 0;font-size:13px;color:var(--soft)}
.rt-box{position:relative;margin-top:10px;aspect-ratio:360/560}
.rt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rt-decor path{fill:none;stroke:#C9CED5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rt-path{fill:none;stroke:#D6DADF;stroke-width:2;stroke-dasharray:5 7}
.rt-done{fill:none;stroke:var(--gold-dk);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.pin circle{fill:#fff;stroke:#B9BFC7;stroke-width:2;transition:fill .3s,stroke .3s}
.pin .ring{fill:none;stroke:var(--peach);opacity:0}
.pin.hit circle{fill:var(--gold);stroke:var(--gold-dk)}
.pin.hit .ring{animation:ringP 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ringP{0%{transform:scale(1);opacity:.9}100%{transform:scale(4);opacity:0}}
.plane path{fill:var(--gold-ink)}
.rl{position:absolute;width:58%;margin:0;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 12px 22px -16px rgba(60,72,90,.55);opacity:0;transform:translateY(10px) scale(.95);transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.rl.on{opacity:1;transform:none}
.rl b{display:block;font-size:14.5px}
.rl em{font-style:normal;color:var(--gold-ink);background:rgba(242,217,148,.55);border-radius:4px;padding:0 2px}
.rl span{display:block;font-size:12px;line-height:1.35;color:var(--text)}

/* ротатор гармонии */
.rot{display:flex;justify-content:center;align-items:center;gap:4px;margin:18px 0 6px;perspective:600px;min-height:58px}
.rot-pill{display:inline-block;padding:10px 14px;border-radius:14px;font-size:22px;font-weight:500;box-shadow:0 10px 18px -12px rgba(60,72,90,.5)}
.rp-c{background:#fff;border:1.5px solid var(--steel-lt);color:var(--ink);rotate:-3deg}
.rp-c u{text-decoration:none;background:linear-gradient(transparent 60%,var(--gold) 60%)}
.rp-s{background:linear-gradient(180deg,#FEF3CF,#EFD186);color:var(--gold-ink);rotate:2deg;min-width:52px;text-align:center}
.rp-y{background:#F7E7DC;color:var(--peach-dk);rotate:-2deg}
.rot-pill.flip{animation:flip .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes flip{0%{transform:rotateX(90deg);opacity:.2}100%{transform:none;opacity:1}}

/* звёзды */
.stars{display:flex;justify-content:center;gap:6px;margin:6px 0 2px}
.stars svg{width:30px;height:30px}
.stars path{fill:#E9ECEF;transition:fill .3s}
.stars svg.on{animation:starPop .5s cubic-bezier(.3,1.8,.5,1)}
.stars svg.on path{fill:var(--gold-dk)}
@keyframes starPop{0%{transform:scale(.4) rotate(-30deg)}100%{transform:none}}

/* рентген */
.xray{background:linear-gradient(180deg,#fff,#F4F6F9)}
.xr{position:relative;margin:34px auto 0;max-width:620px;padding:26px 16px 34px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;touch-action:pan-y}
.xr-text p{margin:0;font:500 clamp(21px,6.2vw,40px)/2.35 var(--body);white-space:nowrap;letter-spacing:0}
.xr-base{color:#C6CBD1}
.xr-top{position:absolute;inset:26px 16px 34px;color:var(--ink);clip-path:circle(var(--lr,62px) at var(--lx,30%) var(--ly,30%));pointer-events:none}
.mo{position:relative}
.mo i{position:absolute;left:50%;top:78%;translate:-50% 0;font:700 15px/1 "Caveat",cursive;font-style:normal;white-space:nowrap}
.mo.c0{color:var(--steel-dk)}
.mo.c1{color:#3E6FB5;box-shadow:inset 0 -3px 0 #BCD0EE}
.mo.c2{color:#B7852E;box-shadow:inset 0 -3px 0 #F2D994,inset 1px 0 0 #E0BD6C}
.mo.c3{color:#5E9E62;box-shadow:inset 0 -3px 0 #C8E3C9,inset 1px 0 0 #9BC89D}
.mo.c4{color:#C0714E;box-shadow:inset 0 -3px 0 #F1D2C2,inset 1px 0 0 #DEAE90}
.mo.c1 i{color:#3E6FB5}.mo.c2 i{color:#B7852E}.mo.c3 i{color:#5E9E62}.mo.c4 i{color:#C0714E}.mo.c0 i{color:var(--soft)}
.xr-lens{position:absolute;left:0;top:0;width:calc(var(--lr,62px)*2);height:calc(var(--lr,62px)*2);translate:calc(var(--px,100px) - 50%) calc(var(--py,100px) - 50%);border-radius:50%;
  border:3px solid #fff;box-shadow:0 0 0 1.5px var(--gold-dk),0 18px 30px -12px rgba(60,72,90,.5),inset 0 0 18px rgba(242,217,148,.35);cursor:grab;touch-action:none;z-index:3}
.xr-lens:active{cursor:grabbing}
.xr-lens span{position:absolute;right:-12px;bottom:-12px;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#FDF2CD,#EACB7C);border:3px solid #fff;box-shadow:0 4px 10px rgba(180,140,60,.5)}
.xr-cap{text-align:center;margin:18px auto 0;max-width:40ch;font-size:15px;color:var(--ink);min-height:48px}

/* урок пройден: шторка */
.done-card{overflow:hidden}
.done-card::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;background:linear-gradient(180deg,#FCEFC4,#EFD186);transform:translateY(0);transition:transform .9s cubic-bezier(.7,0,.2,1) .15s}
.js .done-card:not(.in)::before{transform:translateY(0)}
.done-card.in::before{transform:translateY(-102%)}
.done-card{position:relative}

/* стикеры */
.stick-stage{position:relative;max-width:620px;height:530px;margin:50px auto 0}
.st-title{position:absolute;left:0;right:0;top:0;text-align:center;font-size:26px;rotate:-2deg;margin:0}
.st-phone{--w:200px;position:absolute;left:50%;top:60px;translate:-50% 0;transform:perspective(900px) rotateY(var(--ry,0deg)) rotate(var(--rz,0deg));transition:transform .1s linear}
.sticker{position:absolute;display:grid;padding:10px 14px;border-radius:14px;background:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);transform:scale(0) rotate(-20deg);transition:transform .6s cubic-bezier(.3,1.7,.5,1)}
.sticker b{font:400 34px/1 var(--display);color:var(--ink)}
.sticker span{font-size:11.5px;line-height:1.2;color:var(--text);max-width:110px}
.stick-stage.in .sticker{transform:rotate(var(--r))}
.s1{left:0;top:90px;--r:-6deg;transition-delay:.1s}
.s2{right:0;top:150px;--r:5deg;transition-delay:.3s}
.s3{left:2%;top:330px;--r:4deg;transition-delay:.5s}
.s4{right:2%;top:400px;--r:-5deg;transition-delay:.7s}
.squig{position:absolute;width:70px;height:44px;overflow:visible}
.squig path{stroke:var(--peach);stroke-width:2.2}
.stick-stage.in .squig path{animation:draw 1s .9s forwards}
.q1{left:22%;top:180px}.q2{right:20%;top:250px}
.spark{position:absolute;width:26px;height:26px}
.spark path{fill:var(--gold)}
.stick-stage.in .spark{animation:twinkle 2.4s ease-in-out infinite}
.k1{left:36%;top:44px}.k2{right:10%;top:110px;animation-delay:.8s !important}.k3{left:12%;top:470px;animation-delay:1.4s !important}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

/* программа: точка загорается */
.timeline>li .dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold-dk);opacity:0}
.timeline>li.hit .dot::after{animation:ringS 2.4s ease-out infinite}
@keyframes ringS{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}

/* =========================================================
   ИКОНКИ И ИЛЛЮСТРАЦИИ
   ========================================================= */
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.phr li{grid-template-columns:40px 1fr 34px}
.phr .say{grid-column:1;grid-row:1 / span 2}
.phr b{grid-column:2;grid-row:1}
.phr span{grid-row:2}
.phr .ic{grid-column:3;grid-row:1 / span 2;width:34px;height:34px;padding:7px;border-radius:50%;background:#FBF4EC;color:var(--peach-dk);justify-self:end}
.ic-big{display:block;width:46px;height:46px;padding:10px;margin:0 auto 8px;border-radius:15px;color:var(--gold-ink);background:linear-gradient(180deg,#FFF9E6,#F6E5B8);box-shadow:0 8px 16px -10px rgba(190,150,70,.7)}
.stats article{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.stats article:hover{transform:translateY(-4px)}
.stats article:hover .ic-big{animation:wiggle .5s}
@keyframes wiggle{25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}
.cult article{position:relative}
.ic-corner{position:absolute;right:18px;top:18px;width:40px;height:40px;padding:8px;border-radius:50%;color:var(--peach-dk);background:#FBF4EC}
.steps article{position:relative}
.ic-step{position:absolute;left:50%;top:10px;margin-left:30px;width:36px;height:36px;padding:7px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--gold-ink);box-shadow:0 8px 16px -12px rgba(60,72,90,.5)}
.qa summary{display:flex;align-items:center;gap:12px}
.ic-q{width:34px;height:34px;padding:7px;border-radius:10px;background:#FBF4EC;color:var(--peach-dk)}
.tariff ul{list-style:none;padding-left:0}
.tariff li{position:relative;padding-left:28px}
.tariff li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%}
.t-main li::before{background:linear-gradient(180deg,#FEF3CF,#EFD186)}
.t-main li::after{content:"";position:absolute;left:6px;top:calc(.28em + 4px);width:5px;height:8px;border:solid var(--gold-ink);border-width:0 2px 2px 0;rotate:45deg}
.t-self li::before{background:#F0F2F5}
.t-self li::after{content:"";position:absolute;left:5px;top:calc(.28em + 8px);width:8px;height:2px;background:var(--steel-lt)}
.chat li{position:relative;margin-left:36px}
.chat li::before{content:"E";position:absolute;left:-36px;bottom:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 12px/1 var(--body);color:var(--steel-dk);background:#E9EDF2;border:2px solid #fff;box-shadow:0 4px 10px -6px rgba(0,0,0,.4)}
.chat li.me{margin-left:0;margin-right:36px}
.chat li.me::before{content:"T";left:auto;right:-36px;color:var(--gold-ink);background:linear-gradient(180deg,#FEF3CF,#EFD186)}
.vign{margin:-8px -6px 14px;padding:0}
.vign svg{width:100%;height:auto;display:block;overflow:visible}
.vign path,.vign rect,.vign circle{fill:none;stroke:#B3BAC3;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.vign .fillsoft{fill:#F6F8F9}
.vign .acc{stroke:var(--peach)}
.story.in .vign path,.story.in .vign rect,.story.in .vign circle{animation:draw 1.3s cubic-bezier(.6,.1,.3,1) forwards}
.story.in .vign .acc{animation-delay:.6s}
.vign text{opacity:0;transition:opacity .5s 1.1s}
.story.in .vign text{opacity:1}
.v-hand{font:700 18px "Caveat",cursive;fill:var(--gold-ink)}
.v-cap{font:500 9px var(--body);letter-spacing:.2em;fill:var(--steel)}
.timeline>li>div{position:relative;padding-right:52px}
.tl-plant{position:absolute;right:0;top:-18px;width:46px;height:62px;overflow:visible}
.tl-leaf{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.7,.5,1);transition-delay:var(--d)}
.timeline>li.hit .tl-leaf{transform:scale(1)}

/* ---------- планшет и десктоп ---------- */
@media (min-width:720px){
  .sec{padding:120px 40px}
  .hero{padding:48px 40px 150px}
  .stage{margin-top:-2vw}
  .side{position:absolute;top:44%;margin:0;font-size:15px;text-align:right}
  .side-l{left:0;width:26%}
  .side-r{right:0;width:26%;text-align:left}
  .side-l::after,.side-r::before{content:"";display:block;width:70%;height:1px;margin:12px 0 0 auto;background:linear-gradient(90deg,transparent,var(--peach))}
  .side-r::before{margin:0 0 12px;background:linear-gradient(90deg,var(--peach),transparent)}
  .col{top:150px;width:15vw;left:3vw}
  .col-r{left:auto;right:3vw}
  .avatars{grid-template-columns:repeat(6,1fr)}
  .avatars li:nth-child(even){margin-top:60px}
  .story{padding:34px 36px}
  .card,.mech{padding:30px 32px}
  .maker-grid{grid-template-columns:1fr 1.15fr;align-items:center}
  .cult{grid-template-columns:repeat(3,1fr)}
  .paths-grid{grid-template-columns:1fr 1fr 1fr}
  .stats{grid-template-columns:repeat(3,1fr);gap:18px}
  .stats .n{font-size:64px}
  .c-track{padding:40px calc(50% - 150px)}
  .c-slide{flex-basis:300px}
  .c-slide .phone{--w:250px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .timeline{padding:0}
  .timeline::before,.timeline::after{left:50%;margin-left:-1px}
  .timeline>li{grid-template-columns:1fr 44px 1fr;gap:28px}
  .timeline>li .dot{grid-column:2;grid-row:1}
  .timeline>li>div{grid-column:3}
  .timeline>li:nth-child(even)>div{grid-column:1;grid-row:1;text-align:right}
  .timeline>li:nth-child(even) ul{list-style-position:inside;padding:0}
  .timeline>li:nth-child(even)>div{padding-right:0;padding-left:52px}
  .timeline>li:nth-child(even) .tl-plant{right:auto;left:0}
  .stick-stage{height:600px}
  .st-phone{--w:230px}
  .scene{gap:40px}
  .tariffs{grid-template-columns:1fr 1.15fr;align-items:stretch}
  .floaters{height:300px;max-width:760px}
  .fl{--w:150px}.f2{--w:170px}
  .sticky{left:auto;right:24px;bottom:24px;width:380px}
}
@media (min-width:1100px){
  .hero-title .big{font-size:200px}
  .stage{margin-top:-30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .hero-title .big .metal{opacity:1;transform:none}
  .js .rv:not(.in){opacity:1;transform:none}
  .chat li{opacity:1;transform:none}
  .feathers{display:none}
  .js .punch .w{opacity:1;filter:none;transform:none}
  .hand svg path,.scribble path,.squig path,.circ path,.ct-check circle,.ct-check path,.rt-done,.vign path,.vign rect,.vign circle{stroke-dashoffset:0}
  .vign text{opacity:1}
  .js .hero-title .big .metal{transform:rotate(var(--rest))}
  .sticker{transform:rotate(var(--r))}
}