@import url("../fonts/fonts.css");

:root{
  --bg:#0b0b0c;
  --bg-2:#121213;
  --line:rgba(236,231,218,.12);
  --text:#ece7da;
  --muted:#a39e92;
  --gold:#c9a45c;
  --gold-hi:#ebcf8c;
  --gold-lo:#8d6f35;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:"Oswald","Arial Narrow",Arial,sans-serif;
  --script:"Rubik Dirt","Arial Black",sans-serif;
  --silver:linear-gradient(100deg,#8d8d8d,#f4f4f2 22%,#bdbdbd 40%,#fff 55%,#9a9a9a 72%,#e9e9e6);
  --goldtext:linear-gradient(100deg,#8d6f35 0%,#ebcf8c 22%,#c9a45c 40%,#f6e3ad 52%,#b08a45 68%,#ebcf8c 84%,#8d6f35 100%);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,4.2vw,64px);
  --nav:112px;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:var(--nav)}
/* iPhone: «пружина» при протяжке за низ страницы + прыгающая панель Safari меняли высоту экрана — сайт дёргался (Салов, 28.10) */
html,body{overscroll-behavior-y:none}
/* обычная полоса прокрутки справа выглядела как обрезанный экран (Димон 26.10) — прячем, путь показывает линия прогресса */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* штамп заголовка в начале удара крупнее блока и вылезал за край — страница уезжала вбок; режем по краям разделов (26.10) */
section,footer{overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700}
.gold{color:var(--gold)}
.pen{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0}
/* золото неподвижно; переливается только при наведении (26.10, разбор ChatGPT: постоянное движение отвлекает от текста) */
.gtext{background:var(--goldtext);background-size:220% 100%;background-position:30% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.gtext:hover,a:hover .gtext{animation:textshine 2.4s ease-in-out}
@keyframes textshine{0%,100%{background-position:30% 0}50%{background-position:100% 0}}
.stroke{color:transparent;-webkit-text-stroke:1.5px rgba(236,231,218,.75)}

/* зерно плёнки — только на первом экране и в финале, не на ценах и тексте (26.10) */
.hero::after,.final::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;border-radius:2px;white-space:nowrap;
  font:700 15px/1 var(--sans);letter-spacing:.03em;text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));color:#14110b;background-size:200% 100%;background-position:100% 0}
.btn-gold:hover{background-position:0 0}
.btn-line{border:1px solid rgba(236,231,218,.3);color:var(--text)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn-xl{height:72px;padding:0 48px;font-size:18px}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ---------- шапка ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav);display:flex;align-items:center;gap:36px;padding:0 var(--pad);
  transition:background .35s var(--ease),border-color .35s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(11,11,12,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-logo{position:relative;display:block;line-height:0}
.brand-logo img{width:auto;height:94px}
.brand-logo .shine-mask{position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.6;-webkit-mask:url(../img/logo-200.png) center/contain no-repeat;mask:url(../img/logo-200.png) center/contain no-repeat}
/* надпись граффити, как вариант 5 ChatGPT: белый маркер + золотая кисть */
.brand-g{display:flex;flex-direction:column;align-items:flex-start;transform:rotate(-7deg);white-space:nowrap}
.brand-g b{font:400 52px/1 "Permanent Marker","Segoe Print",cursive;transform:skewX(-10deg);padding:0 .12em;--base:linear-gradient(#f4f1ea,#d9d4c8)}
.brand-g i{font:400 30px/1 "Kaushan Script","Segoe Script",cursive;font-style:normal;margin:-.42em 0 0 2.6em;padding:0 .3em .1em .1em;--base:var(--goldtext)}
.menu{display:flex;gap:30px;margin-left:auto}
.menu a{text-decoration:none;font-size:15px;color:var(--muted);position:relative;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu a:hover{color:var(--text)}.menu a:hover::after{transform:scaleX(1)}
.nav-cta{height:44px;padding:0 20px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;border-radius:2px;padding:0;position:relative;cursor:pointer}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--text);transition:transform .3s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{bottom:17px}
.burger[aria-expanded=true] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
/* тонкая золотая линия под шапкой: сколько страницы пройдено */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform:scaleX(0);transform-origin:left;opacity:.85;will-change:transform}

/* ---------- первый экран ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,56px);
  padding:calc(var(--nav) + 12px) max(var(--pad),calc((100vw - 1440px)/2 + var(--pad))) 32px;overflow:hidden;isolation:isolate}
.hero-copy{justify-self:center;width:min(100%,600px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(55% 70% at 74% 48%,rgba(201,164,92,.16),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(201,164,92,.06),transparent 70%)}
.hero-who{margin:0 0 22px;font:500 14px/1.2 var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
/* «грязный штамп»: серебро, наклон и золотая черта, как вариант 6 ChatGPT */
.hero-title{position:relative;font:400 clamp(44px,min(5.4vw,10.8vh),90px)/1.02 "Rubik Dirt","Arial Black",sans-serif;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.hero-title::after{content:"";position:absolute;left:.8em;right:8%;bottom:-.12em;height:.09em;border-radius:50%;
  background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold-hi) 60%,transparent);transform:rotate(-5deg)}
.hero-title .line{display:block;padding:0 .12em 0 0}
.hero-title .word{--base:var(--silver);transform:rotate(-6deg) skewX(-8deg);transform-origin:left center;display:inline-block;padding:0 .18em .12em .02em;clip-path:inset(-30% 100% -40% -20%);transition:clip-path 1.5s cubic-bezier(.6,0,.25,1);transition-delay:calc(var(--l)*.55s + .35s)}
.loaded .hero-title .word{clip-path:inset(-30% -20% -40% -20%)}
.hero-title .line:nth-child(2){margin-left:.35em}.hero-title .line:nth-child(3){margin-left:.7em}
/* «Создаю» — проявляется слева направо (как было); «Продвигаю» — наклоняется и встаёт на место; «Обучаю» — из золотого свечения */
.hero-title .line:nth-child(2) .word{clip-path:none;opacity:0;transform:rotate(-20deg) skewX(-8deg) translate(-.4em,.5em);
  transition:opacity .7s var(--ease),transform 1.3s cubic-bezier(.34,1.4,.5,1);transition-delay:1s}
.loaded .hero-title .line:nth-child(2) .word{opacity:1;transform:rotate(-6deg) skewX(-8deg)}
.hero-title .line:nth-child(3) .word{clip-path:none;opacity:0;filter:blur(14px) drop-shadow(0 0 22px rgba(235,207,140,.95));
  transition:opacity 1.1s var(--ease),filter 1.6s var(--ease);transition-delay:1.7s}
.loaded .hero-title .line:nth-child(3) .word{opacity:1;filter:blur(0) drop-shadow(0 0 0 rgba(235,207,140,0))}
.hero-lead{max-width:36ch;margin:clamp(38px,6.5vh,64px) 0 clamp(22px,4vh,40px);font-size:clamp(16px,1.25vw,20px);color:var(--muted)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.lion-wrap{position:relative;height:min(calc(100svh - var(--nav) - 56px),860px);aspect-ratio:1009/1400;transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .9s var(--ease)}
.lion{width:100%;height:100%;object-fit:contain;
  clip-path:polygon(0 0,0 0,0 100%,0 100%);filter:blur(12px) brightness(1.4);transform:scale(1.06);
  transition:clip-path 1.9s cubic-bezier(.65,0,.2,1) .2s,filter 1.6s var(--ease) .4s,transform 2.2s var(--ease) .2s}
.loaded .lion{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%);filter:none;transform:none}
/* «золотое пробуждение»: за львом вспыхивает ореол и оседает в мягкое свечение (один раз при загрузке) */
.lion-wrap::before{content:"";position:absolute;inset:8% 4% 14%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(235,207,140,.55),rgba(201,164,92,.18) 55%,transparent 75%);opacity:0;transform:scale(.7)}
.loaded .lion-wrap::before{animation:halo 2.4s var(--ease) .15s forwards}
@keyframes halo{0%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1.04)}100%{opacity:.45;transform:scale(1)}}
.lion-wake{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;
  -webkit-mask:url(../img/herb.webp) center/contain no-repeat;mask:url(../img/herb.webp) center/contain no-repeat;
  background:linear-gradient(170deg,transparent 0 35%,rgba(255,236,180,.95) 47%,rgba(235,207,140,.5) 53%,transparent 65% 100%) 0 0/100% 300% no-repeat}
.loaded .lion-wake{animation:wake 1.9s cubic-bezier(.45,0,.25,1) 2.1s both}
@keyframes wake{0%{opacity:1;background-position:0 0}85%{opacity:1}100%{opacity:0;background-position:0 100%}}
/* золотой блик пробегает только по самому льву */
.lion-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.9;
  -webkit-mask:url(../img/herb.webp) center/contain no-repeat;mask:url(../img/herb.webp) center/contain no-repeat;
}
/* один общий блик: логотип → надпись → лев и обратно. Полоса задана в координатах экрана (--s, ведёт site.js),
   каждый элемент сдвигает фон на своё место (--bx, --by), поэтому блик идёт по всем одной линией */
.shine-el{--band:linear-gradient(120deg,transparent calc(var(--s,-999px) - 90px),rgba(235,207,140,.25) calc(var(--s,-999px) - 40px),rgba(255,236,180,.95) var(--s,-999px),rgba(235,207,140,.25) calc(var(--s,-999px) + 40px),transparent calc(var(--s,-999px) + 90px))}
.shine-text{--band:linear-gradient(120deg,transparent calc(var(--s,-999px) - 130px),rgba(201,164,92,.55) calc(var(--s,-999px) - 60px),#ffe9a8 var(--s,-999px),rgba(201,164,92,.55) calc(var(--s,-999px) + 60px),transparent calc(var(--s,-999px) + 130px));
  background:var(--band),var(--base);background-size:100vw 100vh,100% 100%;background-position:var(--bx,0) var(--by,0),0 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lion-shine.shine-el{--band:linear-gradient(120deg,transparent calc(var(--s,-999px) - 80px),rgba(235,207,140,.55) var(--s,-999px),transparent calc(var(--s,-999px) + 80px));}
.lion-shine,.brand-logo .shine-mask{background:var(--band);background-size:100vw 100vh;background-position:var(--bx,0) var(--by,0);background-repeat:no-repeat}

/* ---------- бегущая строка ---------- */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--bg-2)}
.ticker-track{display:flex;align-items:center;gap:38px;width:max-content;animation:ticker 38s linear infinite}
.ticker span{font:700 clamp(28px,3.4vw,52px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(236,231,218,.55);transition:color .3s}
.ticker span:hover{color:var(--gold)}
.ticker i{width:12px;height:12px;background:var(--gold);transform:rotate(45deg);flex:none}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- кто я ---------- */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,110px);align-items:center;padding:clamp(80px,12vw,170px) var(--pad)}
.about-photo{position:relative;margin:0;justify-self:center;width:min(100%,520px)}
.about-photo .glow{position:absolute;inset:12% -8% 0;background:radial-gradient(closest-side,rgba(201,164,92,.32),rgba(201,164,92,.06) 60%,transparent 75%);z-index:0}
.about-photo img{position:relative;z-index:1;width:100%;height:auto;-webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.about-copy h2{font:400 clamp(34px,3.7vw,66px)/1.12 var(--script)}
.about-copy>p{max-width:46ch;margin:28px 0 40px;color:var(--muted);font-size:clamp(16px,1.2vw,19px)}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.facts li{border-top:1px solid var(--gold);padding-top:16px}
.facts b{display:block;font:700 clamp(24px,2.2vw,34px)/1.1 var(--display);text-transform:uppercase;color:var(--gold-hi)}
.facts span{display:block;margin-top:6px;font-size:15px;color:var(--muted)}

/* ---------- услуги: панели складываются стопкой ---------- */
.stack{position:relative;padding:0 var(--pad) clamp(16px,2vw,32px)}
.panel{position:sticky;top:calc(var(--nav) + 12px);height:calc(100svh - var(--nav) - 28px);min-height:520px;margin-bottom:22px;display:flex}
.panel-in{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto auto 1fr;column-gap:clamp(24px,5vw,80px);
  align-content:center;padding:clamp(24px,4vw,56px);background:linear-gradient(160deg,#18181a,#0f0f10 60%);border:1px solid var(--line);border-radius:2px;overflow:hidden;
  box-shadow:0 -30px 60px rgba(0,0,0,.55)}
.panel-head{grid-column:1;grid-row:1}
.panel-word{font:400 clamp(46px,min(6.2vw,11.5vh),120px)/1.05 var(--script);padding-right:.15em}
.panel-head p{margin:12px 0 clamp(10px,2vh,22px);color:var(--muted);font-size:clamp(15px,1.15vw,19px);max-width:40ch}
.price{list-style:none;margin:0;padding:0;grid-column:1;grid-row:2}
.price li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:clamp(8px,1.4vh,13px) 0;border-bottom:1px solid var(--line);font-size:clamp(14px,1.05vw,17px)}
.price b{font:500 clamp(15px,1.2vw,19px)/1.2 var(--display);letter-spacing:.04em;color:var(--gold-hi);white-space:nowrap;text-align:right}
.price .price-note{display:block;border-bottom:0;padding-top:12px;font-size:13px;line-height:1.45;color:var(--muted)}
.panel .btn{grid-column:1;grid-row:3;justify-self:start;align-self:start;margin-top:22px}
.panel-pic{grid-column:2;grid-row:1/4;align-self:center;justify-self:center;width:100%;max-width:640px;max-height:calc(100svh - var(--nav) - 140px);object-fit:contain;height:auto;
  border:1px solid var(--line);transform:rotate(-2.5deg);box-shadow:0 40px 80px rgba(0,0,0,.6);transition:transform .8s var(--ease)}
.panel:hover .panel-pic{transform:rotate(0) scale(1.02)}
.panel-pic.lionmark{border:0;box-shadow:none;max-width:440px;transform:none;opacity:.92;filter:drop-shadow(0 30px 60px rgba(201,164,92,.2))}
.panel:hover .panel-pic.lionmark{transform:scale(1.03)}
/* 26.10 по слову Димона: следующая панель наезжала сразу и закрывала текст недочитанной. Теперь под каждой панелью запас
   прокрутки — панель стоит одна, пока её читают, потом следующая плавно поднимается. Закрываемая панель уменьшается и темнеет
   ровно настолько, насколько её закрыли (--c от 0 до 1 ставит site.js); темнота — слоем ::after, а не filter: так без рывков */
/* отступ — сверху следующей панели, а не снизу своей: нижний отступ браузер считает частью прилипающей панели, и «Создаю» с
   «Продвигаю» отклеивались раньше «Обучаю» — уезжали в щели под шапкой (слово Димона 26.10) */
.panel{margin-bottom:0}
.panel+.panel{margin-top:60vh}
/* «Обучаю» тоже стоит, потом страница уходит к «Работам» (слово Димона 26.10). Отступ последней панели прилипание не держит —
   браузер отнимает его у неё, поэтому пауза — пустой вставкой под стопкой */
.stack::after{content:"";display:block;height:60vh}
.panel-in{transform:scale(calc(1 - var(--c,0) * .04));transform-origin:50% 0;will-change:transform}
.panel-in::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--c,0) * .45);pointer-events:none;z-index:3}

/* ---------- работы ---------- */
.works{padding:clamp(70px,10vw,140px) 0}
.works-head{display:flex;align-items:end;justify-content:space-between;padding:0 var(--pad);margin-bottom:36px}
.works-head h2,.flow h2{font:400 clamp(44px,5.6vw,98px)/1.05 var(--script);padding-right:.15em}
.works-arrows{display:flex;gap:10px}
.arrow{width:56px;height:56px;border:1px solid var(--line);background:none;color:var(--text);font-size:22px;cursor:pointer;border-radius:2px;transition:border-color .2s,color .2s}
.arrow:hover{border-color:var(--gold);color:var(--gold-hi)}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,620px);gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:0 var(--pad) 18px;scrollbar-width:thin;scrollbar-color:var(--gold-lo) transparent;cursor:grab}
.track.drag{cursor:grabbing;scroll-snap-type:none}
.work{scroll-snap-align:start;text-decoration:none;display:block;user-select:none}
.work-pic{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:#141415;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.work.tilt .work-pic{transition:transform .12s linear}
.work-pic img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease),object-position 3s var(--ease);-webkit-user-drag:none}
.work:hover .work-pic img{transform:scale(1.04)}
.work-pic::after{content:"";position:absolute;inset:0;border:1px solid var(--gold);opacity:0;transition:opacity .4s}
.work:hover .work-pic::after{opacity:1}
.work-pic.phones{display:flex;justify-content:center;align-items:center;gap:6%;background:radial-gradient(60% 80% at 50% 60%,rgba(201,164,92,.18),#121213)}
.work-pic.phones img{width:30%;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.work-pic.phones img:last-child{transform:translateY(8%)}
.work:hover .work-pic.phones img{transform:translateY(-3%)}
.work:hover .work-pic.phones img:last-child{transform:translateY(5%)}
/* длинный снимок сайта: при наведении страница сама прокручивается сверху вниз, в конце — «Открыть проект» */
/* снимки сайтов целиком, до подвала; время --dur у каждого своё по длине страницы — скорость у всех одна (≈230 px/с) */
.work-pic.scroll img{object-position:50% 0;transition:object-position var(--dur,12s) cubic-bezier(.3,0,.7,1),transform 1.2s var(--ease)}
.work-open{position:absolute;left:14px;bottom:14px;z-index:1;padding:9px 14px;background:rgba(11,11,12,.85);border:1px solid var(--gold);color:var(--gold-hi);
  font:700 13px/1 var(--sans);letter-spacing:.04em;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
@media (hover:hover){
  .work:hover .work-pic.scroll img{object-position:50% 100%;transform:none}
  .work:hover .work-open{opacity:1;transform:none;transition-delay:calc(var(--dur,12s) - .6s)}
}
@media (hover:none){.work-open{opacity:1;transform:none}}
.work h3{margin-top:20px;font:700 clamp(24px,2vw,32px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}

/* ---------- что вам нужно: выбор услуги ---------- */
.pick{padding:0 var(--pad) clamp(70px,9vw,130px);max-width:1180px;margin:0 auto}
.pick h2{font:400 clamp(40px,4.6vw,80px)/1.05 var(--script);background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));padding-right:.15em}
.pick-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:36px 0 0}
.pick-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 24px;background:#101011;border:1px solid var(--line);border-radius:2px;color:var(--text);
  cursor:pointer;text-align:left;transition:border-color .3s var(--ease),background .3s var(--ease),transform .4s var(--ease),opacity .3s}
.pick-tabs b{font:700 clamp(24px,2.2vw,34px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.pick-tabs span{font-size:14px;color:var(--muted)}
.pick-tabs button:hover{border-color:rgba(201,164,92,.5)}
.pick-tabs [aria-selected=true]{border-color:var(--gold);background:linear-gradient(170deg,#1d1810,#101011 60%)}
.pick-tabs [aria-selected=true] b{color:var(--gold-hi)}
.pick-tabs [aria-selected=false]{opacity:.62;transform:scale(.97)}
.pick-panel{margin-top:14px;padding:clamp(24px,3vw,40px);border:1px solid var(--gold);border-top-width:2px;background:#0f0f10;animation:pickin .45s var(--ease)}
@keyframes pickin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pick-lead{margin:0 0 18px;font-size:clamp(17px,1.4vw,21px);max-width:52ch}
.pick-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.pick-list li{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--muted)}
.pick-list b{font:500 17px/1.3 var(--display);color:var(--gold-hi);white-space:nowrap}
.pick-list a{color:var(--text)}
.pick-note{margin:12px 0 0;font-size:13px;color:var(--muted)}

/* ---------- ссылки на документы в подвале ---------- */
.foot-docs{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px}
.foot-docs a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(201,164,92,.3)}
.foot-docs a:hover{color:var(--gold-hi)}
.work p{margin:6px 0 0;color:var(--muted);font-size:15px}

/* ---------- обучение ---------- */
.courses{padding:clamp(70px,10vw,150px) var(--pad);background:linear-gradient(#0b0b0c,#111112 30%,#0b0b0c)}
.courses-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;margin-bottom:clamp(40px,6vw,80px)}
.courses h2{font:400 clamp(32px,3.3vw,60px)/1.1 var(--script)}
.courses-top p{max-width:44ch;margin:24px 0 0;color:var(--muted);font-size:clamp(16px,1.2vw,19px)}
.screen{margin:0;padding:12px;background:#1a1a1c;border:1px solid var(--line);border-radius:6px;box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 0 1px rgba(201,164,92,.15);transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:transform .9s var(--ease)}
@media (hover:hover){.screen:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}}
.screen video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:#000}
.screen figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.card{position:relative;display:flex;flex-direction:column;padding:36px 32px;border:1px solid var(--line);background:#101011;transition:border-color .3s,transform .5s var(--ease)}
@media (hover:hover){.cards .card:hover{border-color:rgba(201,164,92,.6);transform:translateY(-6px)}}
.card h3{font:700 clamp(28px,2.4vw,38px)/1 var(--display);text-transform:uppercase}
.card p{margin:14px 0 0;color:var(--muted)}
.card .cost{margin-top:auto;padding-top:26px;color:var(--text);font:700 clamp(34px,3vw,48px)/1 var(--display)}
.card .cost s{font-size:.45em;color:var(--muted);margin-left:8px;font-weight:500}
.card .btn{margin-top:22px}
.card.best{border-color:var(--gold);background:linear-gradient(170deg,#1d1810,#101011 55%)}
.cards .card.best.in{transform:translateY(-14px)}
@media (hover:hover){.cards .card.best:hover{transform:translateY(-20px)}}

/* ---------- как работаем ---------- */
.flow{padding:clamp(70px,10vw,140px) var(--pad)}
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:s}
.steps li{position:relative;padding-top:64px;counter-increment:s}
.steps li::before{content:"0" counter(s);position:absolute;top:0;left:0;font:700 40px/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--gold)}
.steps li::after{content:"";position:absolute;top:56px;left:0;right:-28px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .3s}
.steps li.in::after{transform:scaleX(1)}
.steps b{display:block;margin-top:24px;font:700 clamp(22px,1.8vw,28px)/1.1 var(--display);text-transform:uppercase}
.steps span{display:block;margin-top:10px;color:var(--muted);font-size:15px}

/* ---------- финал ---------- */
.final{position:relative;overflow:hidden;text-align:center;padding:clamp(90px,14vw,200px) var(--pad);border-top:1px solid var(--line)}
/* финальный лев: проступает, когда раздел на экране, и чуть смещается за курсором (--fx/--fy из site.js) */
.final-lion{position:absolute;left:50%;top:50%;width:min(80vw,760px);transform:translate(-50%,-50%) translate(var(--fx,0px),var(--fy,0px)) scale(var(--fs,1.06));opacity:0;pointer-events:none;
  transition:opacity 1.8s cubic-bezier(.23,1,.32,1),transform 1.2s cubic-bezier(.23,1,.32,1);will-change:transform,opacity}
.final.on .final-lion{opacity:.12;--fs:1}
.final h2{position:relative;font:400 clamp(42px,6.2vw,116px)/1.08 var(--script);margin-bottom:44px}
.final .btn{position:relative}
.contacts{position:relative;list-style:none;margin:48px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;font-size:18px}
.contacts a{text-decoration:none;border-bottom:1px solid rgba(201,164,92,.4);padding-bottom:2px;transition:color .2s,border-color .2s}
.contacts a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}

/* ---------- подвал ---------- */
.foot{padding:40px var(--pad) 44px;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--muted);font-size:14px}
.foot-brand{display:flex;align-items:center;gap:12px;font:500 16px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-bottom:8px}
/* подвал — та же надпись граффити, что в шапке (без бегущего блика) */
.foot-g{margin:6px 0 4px}
.foot-g b,.foot-g i{background:var(--base);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:normal;text-transform:none}
.foot-g b{font-size:32px}.foot-g i{font-size:19px}
.foot p{margin:0}
.foot-dev{font-size:12px;color:#7d786d}

/* большие заголовки — «грязный штамп» серебром, как на первом экране; золотые части — .gtext */
.about-copy h2,.works-head h2,.flow h2,.courses h2,.final h2{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-copy h2,.panel-word,.works-head h2,.flow h2,.courses h2,.final h2{filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.gtext{padding-right:.06em}

/* ---------- появление при прокрутке ---------- */
/* 26.10: кривая мягче (easeOutCubic вместо expo — та проходила почти весь путь за первые 0,2 с, подъём не успевал заметить) */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1.1s cubic-bezier(.33,1,.68,1),transform 1.1s cubic-bezier(.33,1,.68,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* у карточек курсов, игр и экрана свои переходы (наведение) затирали появление: прозрачность прыгала сразу, подъём — резко
   за 0,5 с. Пока блок появляется — плавный переход; когда встал (site.js ставит .settled) — снова быстрый отклик на наведение */
.card.reveal,.game.reveal,.screen.reveal{transition:border-color .3s,opacity 1.1s cubic-bezier(.33,1,.68,1) var(--d,0s),transform 1.1s cubic-bezier(.33,1,.68,1) var(--d,0s)}
.card.reveal.in.settled,.game.reveal.in.settled{transition:border-color .3s,transform .5s var(--ease)}
.screen.reveal.in.settled{transition:transform .9s var(--ease)}
.hero .reveal{transition-delay:var(--d,1.6s)}
.loaded .hero .reveal{opacity:1;transform:none}

/* ---------- экраны ниже ---------- */
@media (max-height:780px) and (min-width:901px){
  .hero-title{font-size:clamp(42px,min(5.2vw,10.4vh),86px)}
  .lion-wrap{height:min(80svh,820px)}
}
@media (max-width:1100px){
  .menu{gap:20px}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--nav:84px}
  .burger{display:block}
  .nav{gap:12px}
  .nav-cta{margin-left:auto;height:40px;padding:0 14px;font-size:13px}
  .brand{gap:10px}.brand-logo img{height:68px}.brand-g b{font-size:34px}.brand-g i{font-size:19px}
  .menu{position:fixed;inset:var(--nav) 0 auto;flex-direction:column;gap:0;margin:0;padding:8px var(--pad) 24px;background:rgba(11,11,12,.97);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .menu.open{opacity:1;transform:none;visibility:visible}
  .menu a{opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .45s var(--ease),color .2s}
  .menu.open a{opacity:1;transform:none}
  .menu.open a:nth-child(2){transition-delay:.05s}.menu.open a:nth-child(3){transition-delay:.1s}.menu.open a:nth-child(4){transition-delay:.15s}
  .menu a{padding:16px 0;font:700 26px/1 var(--display);text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--line)}
  .hero{grid-template-columns:1fr;padding-top:calc(var(--nav) + 8px);min-height:auto}
  .hero-copy{justify-self:stretch;width:auto}
  .hero-art{justify-content:center}
  .hero-art{order:-1;height:auto;margin:0 calc(var(--pad)*-1)}
  .lion-wrap{height:min(36svh,340px)}
  .pick-tabs{grid-template-columns:1fr}
  .pick-tabs [aria-selected=false]{transform:none}
  .hero-title{font-size:clamp(40px,11.2vw,84px)}
  .hero-title .line:nth-child(2){margin-left:.25em}.hero-title .line:nth-child(3){margin-left:.5em}
  .about{grid-template-columns:1fr}
  .about-photo{width:min(86%,420px)}
  .facts{grid-template-columns:1fr}
  /* услуги стопкой и на телефоне (26.10): панели прилипают под шапкой, следующая наезжает на предыдущую */
  .panel{position:sticky;top:calc(var(--nav) + 10px);min-height:0;height:auto;margin-bottom:0}
  .panel+.panel{margin-top:50vh}
  .stack::after{height:50vh}
  .panel-in{grid-template-columns:1fr;grid-template-rows:auto}
  .panel-head,.price,.panel .btn{grid-row:auto}
  .panel-pic{display:none}
  .panel:hover .panel-pic{transform:none}
  .works-arrows{display:none}
  .courses-top{grid-template-columns:1fr}
  .screen{transform:none}
  .cards{grid-template-columns:1fr}
  .card.best{order:-1}.cards .card.best.in{transform:none}
  .steps{grid-template-columns:1fr 1fr;gap:36px 20px}
  .steps li::after{right:0}
}
@media (max-width:520px){
  .nav-cta{display:none}
  .burger{margin-left:auto}
  .steps{grid-template-columns:1fr;position:relative;padding-left:30px}
  .steps::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold-hi),var(--gold));transform:scaleY(var(--p,0));transform-origin:top}
  .steps li::after{display:none}
  .price li{flex-direction:column;align-items:flex-start;gap:4px}
  .price b{text-align:left}
  .btn-xl{width:100%;padding:0 20px}
  .hero-ctas .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-title .word,.lion,.reveal,.game{clip-path:none!important;transform:none!important;opacity:1!important;filter:none!important}
  .lion-wrap::before{opacity:.45!important;transform:none!important}
  h2.reveal,.menu a{opacity:1!important;transform:none!important}
}

/* ===================== внутренние страницы: курсы и документы (26.10) ===================== */
.page{padding:calc(var(--nav) + clamp(28px,5vw,64px)) var(--pad) clamp(70px,9vw,120px);max-width:1180px;margin:0 auto}
.crumbs{margin:0 0 26px;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.course-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.course-tag{margin:0 0 14px;font:500 14px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.course-top h1{font:400 clamp(44px,5.4vw,92px)/1.02 var(--script);background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));padding-right:.15em}
.course-top .screen{transform-origin:right center}
.course-lead{margin:22px 0 0;color:var(--muted);font-size:clamp(16px,1.25vw,20px);max-width:44ch}
.course-facts{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.course-facts li{padding:9px 14px;border:1px solid var(--line);font-size:14px;color:var(--text)}
.course-buy{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-top:30px}
.course-buy .cost{font:700 clamp(36px,3.4vw,54px)/1 var(--display)}
.course-buy .cost s{font-size:.42em;color:var(--muted);margin-left:8px;font-weight:500}
.course-sec{margin-top:clamp(64px,8vw,110px)}
.course-sec>h2{font:400 clamp(34px,3.6vw,60px)/1.08 var(--script);background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));padding-right:.15em;margin-bottom:28px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.box{padding:28px 30px;border:1px solid var(--line);background:#101011}
.box h3{font:700 clamp(22px,1.9vw,28px)/1.1 var(--display);text-transform:uppercase;margin-bottom:12px}
.box ul{margin:0;padding-left:20px;color:var(--muted)}
.box li+li{margin-top:6px}
.lessons{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lessons .grp{padding:22px 0 8px;font:500 13px/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.lessons li:not(.grp){display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.lessons .n{font:700 22px/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--gold)}
.lessons .t{color:var(--text)}
.lessons .d{font:500 15px/1 var(--display);color:var(--muted);letter-spacing:.04em}
.lessons-sum{margin:14px 0 0;color:var(--muted);font-size:14px}
.get{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:g}
.get li{position:relative;padding-top:58px;counter-increment:g;color:var(--muted)}
.get li::before{content:"0" counter(g);position:absolute;top:0;left:0;font:700 36px/1 var(--display);color:transparent;-webkit-text-stroke:1px var(--gold)}
.get b{display:block;color:var(--text);font:700 20px/1.15 var(--display);text-transform:uppercase;margin-bottom:6px}
.honest{margin-top:28px;padding:20px 24px;border-left:2px solid var(--gold);background:#101011;color:var(--muted);font-size:15px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font:700 clamp(18px,1.5vw,22px)/1.25 var(--display);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:400 28px/1 var(--sans);color:var(--gold);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--muted);max-width:70ch}
.bundle{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:24px;align-items:center;padding:clamp(26px,3.5vw,44px);border:1px solid var(--gold);background:linear-gradient(170deg,#1d1810,#101011 60%)}
.bundle h2{font:700 clamp(28px,2.6vw,40px)/1.05 var(--display);text-transform:uppercase}
.bundle p{margin:10px 0 0;color:var(--muted)}
.bundle .cost{font:700 clamp(34px,3vw,48px)/1 var(--display);text-align:right}
.bundle .cost .was{display:block;font-size:.4em;color:var(--muted);font-weight:500;margin-top:6px}
.bundle .btn{margin-top:16px}
.other{margin-top:28px;color:var(--muted)}
/* документы */
.doc{max-width:820px}
.doc h1{font:400 clamp(36px,4vw,64px)/1.08 var(--script);background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.15em;margin-bottom:10px}
.doc .date{color:var(--muted);font-size:14px;margin:0 0 34px}
.doc h2{font:700 clamp(19px,1.6vw,23px)/1.3 var(--display);text-transform:uppercase;margin:40px 0 12px;color:var(--gold-hi);scroll-margin-top:calc(var(--nav) + 20px)}
.doc p,.doc li{color:var(--muted)}
.doc li+li{margin-top:6px}
.doc table{width:100%;border-collapse:collapse;font-size:15px}
.doc td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.doc td:first-child{color:var(--text);width:38%}
@media (max-width:900px){
  .course-top,.two{grid-template-columns:1fr}
  .get{grid-template-columns:1fr 1fr}
  .bundle{grid-template-columns:1fr}.bundle .cost{text-align:left}
}
@media (max-width:520px){
  .get{grid-template-columns:1fr}
  .lessons li:not(.grp){grid-template-columns:40px minmax(0,1fr);}
  .lessons .d{grid-column:2}
}

/* ---------- игры: каталог ---------- */
.games{padding:clamp(40px,6vw,90px) var(--pad) clamp(10px,2vw,30px)}
.games-head h2{font:400 clamp(40px,4.8vw,84px)/1.05 var(--script);background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));padding-right:.15em}
.games-head p{margin:16px 0 0;color:var(--muted);max-width:52ch}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:48px}
.game{display:block;text-decoration:none;padding:26px 24px 28px;border:1px solid var(--line);background:radial-gradient(80% 60% at 50% 30%,rgba(201,164,92,.12),#101011 70%);transition:border-color .3s,transform .5s var(--ease)}
@media (hover:hover){.shelf .game:hover{border-color:rgba(201,164,92,.6);transform:translateY(-6px)}}
.game-phone{position:relative;width:min(62%,230px);margin:0 auto 22px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:3px solid #26262a;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(201,164,92,.2)}
.game-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform .9s var(--ease)}
.game-phone .alt{opacity:0}
@media (hover:hover){.game:hover .game-phone .alt{opacity:1}.game:hover .game-phone img{transform:scale(1.04)}}
.game.auto .game-phone .alt{opacity:1}
.game h3{font:700 clamp(22px,1.9vw,28px)/1.1 var(--display);text-transform:uppercase}
.game p{margin:8px 0 0;color:var(--muted);font-size:15px}
.tags{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:5px 10px;border:1px solid rgba(201,164,92,.4);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi)}
.game-go{display:inline-block;margin-top:16px;font-weight:700;font-size:14px;color:var(--gold-hi)}
@media (max-width:900px){.shelf{grid-template-columns:1fr}.game-phone{width:min(56%,220px)}}

/* видео урока: на телефоне не играет само — по нажатию (бережёт трафик) */
.screen{position:relative}
.play{position:absolute;left:50%;top:calc(50% - 14px);transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(11,11,12,.75);box-shadow:0 0 0 1px var(--gold);display:grid;place-items:center}
.play::before{content:"";margin-left:5px;border-left:20px solid var(--gold-hi);border-top:12px solid transparent;border-bottom:12px solid transparent}

/* переход из меню: заголовок раздела — сразу под шапкой, а не в середине экрана (Димон 26.10) */
.works{scroll-margin-top:calc(16px - clamp(70px,10vw,140px))}
.courses{scroll-margin-top:calc(16px - clamp(70px,10vw,150px))}
.final{scroll-margin-top:calc(16px - clamp(90px,14vw,200px))}

/* в карточке «Работ» — телефон с мобильной версией того же сайта; при наведении листается вместе с экраном компьютера (Димон 26.10, вариант А) */
.work-phone{position:absolute;right:4%;bottom:7%;z-index:1;width:21%;aspect-ratio:9/19.5;border-radius:16px;overflow:hidden;
  border:3px solid #0b0b0c;box-shadow:0 0 0 1px rgba(201,164,92,.55),0 18px 40px rgba(0,0,0,.65);background:#0b0b0c;
  transform:translateZ(30px);transition:transform .5s var(--ease)}
.work-phone img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position var(--dur,12s) cubic-bezier(.3,0,.7,1)}
@media (hover:hover){.work:hover .work-phone img{object-position:50% 100%}.work:hover .work-phone{transform:translateZ(30px) translateY(-4px)}}

/* ===================== движение 26.10: штамп, золото по прокрутке, касания, авто-показ на телефоне ===================== */
/* заголовки разделов появляются как удар штампа (у них «грязный штамп») */
:is(.about-copy,.works-head,.flow,.courses-top,.final,.pick,.games-head) h2.reveal{opacity:0;transform:scale(1.14) rotate(-1.5deg);transition:none}
:is(.about-copy,.works-head,.flow,.courses-top,.final,.pick,.games-head) h2.reveal.in{animation:stamp 1.15s linear both;animation-delay:var(--d,0s)}
/* 26.10: штамп виден целиком — заносится (проступает и опускается), удар с лёгким вдавливанием, отскок, оседает */
@keyframes stamp{
  0%{opacity:0;transform:scale(1.22) rotate(-2.5deg);animation-timing-function:linear}
  42%{opacity:1;transform:scale(.965) rotate(.3deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}
  64%{transform:scale(1.012) rotate(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{opacity:1;transform:none}}
/* «Обсудим» в финале наливается золотом по мере прокрутки. 26.10 (слово Димона «внизу подтормаживает»): раньше золото было
   фоном самого заголовка и на каждом шаге прокрутки перерисовывался весь заголовок вместе с тенью (трассировка: отрисовка в
   2,5 раза дольше). Теперь золотая копия рисуется один раз и открывается двумя встречными сдвигами (site.js) — без перерисовки;
   тень у этого заголовка убрана: на почти чёрном фоне её не видно, а перерисовку она тянула */
.final h2{filter:none}
.final h2 .fill{position:absolute;inset:0;overflow:hidden;pointer-events:none;will-change:transform;transform:translateX(-100%)}
.final h2 .fill-in{display:block;will-change:transform;transform:translateX(100%);
  background:linear-gradient(90deg,#ebcf8c,#c9a45c);-webkit-background-clip:text;background-clip:text;color:transparent}
.final h2 .fill .gtext{visibility:hidden}
/* касание на телефоне: карточки и кнопки чуть проседают, как физическая кнопка */
@media (hover:none){
  .card,.game,.work,.pick-tabs button,.btn{transition:transform .14s cubic-bezier(.23,1,.32,1)}
  .card:active,.game:active,.work:active,.pick-tabs button:active{transform:scale(.98)}
  .btn:active{transform:scale(.97)}
}
/* телефон: превью сайта само листается, когда карточка на экране */
.work.auto .work-pic.scroll img,.work.auto .work-phone img{object-position:50% 100%}
.work.auto .work-open{opacity:1;transform:none;transition-delay:calc(var(--dur,12s) - .6s)}

/* ===================== компьютер 26.10: искры, прожектор, нить, обводка, кнопки, переходы ===================== */
/* золотые искры поднимаются от буквы G (рисует site.js, только пока первый экран на виду) */
.sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* золотой «прожектор» за курсором на первом экране */
/* 26.10 (слово Димона «фонарик не сразу, потом вспыхивает»): раньше включался до того, как узнал место курсора, — загорался в
   центре и прыгал к мышке, и каждое движение перерисовывало свечение на весь экран. Теперь пятно — готовый слой: ставится под
   курсор, потом плавно включается; движется переносом (transform), без перерисовки */
.hero-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .45s cubic-bezier(.23,1,.32,1)}
.hero-spot i{position:absolute;left:-420px;top:-420px;width:840px;height:840px;will-change:transform;
  background:radial-gradient(circle closest-side,rgba(235,207,140,.11),rgba(201,164,92,.04) 45%,transparent 70%)}
.hero.lit .hero-spot{opacity:1}
/* «Как работаем» на компьютере: одна золотая нить через все шаги, рисуется прокруткой; номер шага загорается, когда нить дошла */
@media (min-width:901px){
  .steps{position:relative}
  .steps::before{content:"";position:absolute;left:0;right:0;top:56px;height:1px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform:scaleX(var(--p,0));transform-origin:left}
  .steps li::after{display:none}
}
.steps li::before{transition:color .5s cubic-bezier(.23,1,.32,1)}
.steps li.lit::before{color:var(--gold)}
/* карточки курсов: при наведении по рамке обегает золотой блик */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.cards .card::after{content:"";position:absolute;inset:-1px;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:conic-gradient(from var(--a),transparent 0 62%,rgba(235,207,140,.4) 74%,#ffe9a8 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (hover:hover){.cards .card:hover::after{opacity:1;animation:orbit 2.6s linear infinite}}
@keyframes orbit{to{--a:360deg}}
/* кнопки: стрелка в своём кружке сдвигается, по золотой кнопке пробегает блеск */
.btn-ic{display:inline-grid;place-items:center;width:30px;height:30px;margin:0 -14px 0 14px;border-radius:50%;background:rgba(20,17,11,.16);font-size:15px;line-height:1;
  transition:transform .25s cubic-bezier(.23,1,.32,1)}
.btn-xl .btn-ic{width:38px;height:38px;margin-right:-24px;font-size:18px}
.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,250,230,.55) 50%,transparent 70%);transform:translateX(-130%)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn-ic{transform:translate(2px,-2px) scale(1.06)}
  .btn-gold:hover::after{transform:translateX(130%);transition:transform .8s cubic-bezier(.23,1,.32,1)}
}
/* переход между страницами сайта — мягкое перетекание (браузеры с View Transitions; остальные открывают как обычно) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s cubic-bezier(.23,1,.32,1) both}
::view-transition-new(root){animation:vt-in .42s cubic-bezier(.23,1,.32,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .sparks,.hero-spot{display:none}
  .final-lion{opacity:.1!important;transform:translate(-50%,-50%)!important}
}