/* Современный визуальный слой. Базовые стили остаются безопасным fallback. */
:root{
  --ink:#111a26;
  --muted:#5e7184;
  --canvas:#f3f7fb;
  --surface:rgba(255,255,255,.86);
  --primary:#0863b4;
  --primary-dark:#074985;
  --primary-soft:#e3f0fc;
  --line:rgba(94,126,156,.18);
  --shadow-soft:0 20px 60px rgba(26,71,111,.10);
  --shadow-deep:0 32px 90px rgba(10,57,99,.18);
  --radius-xl:42px;
}

html{scroll-padding-top:112px}
body{
  min-width:320px;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 5%,rgba(57,151,224,.11),transparent 24rem),
    radial-gradient(circle at 92% 28%,rgba(112,205,232,.10),transparent 28rem),
    linear-gradient(180deg,#f7fafe 0%,#f2f6fa 55%,#f7f9fc 100%);
}
body::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:linear-gradient(rgba(26,85,135,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(26,85,135,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}

.site-header{
  position:sticky;
  z-index:50;
  top:14px;
  width:min(1180px,calc(100% - 28px));
  min-height:76px;
  margin:14px auto 0;
  padding:8px 10px 8px 16px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:23px;
  background:rgba(248,251,254,.72);
  box-shadow:0 10px 38px rgba(22,65,104,.06);
  backdrop-filter:blur(18px) saturate(145%);
  transition:background .35s ease,box-shadow .35s ease,transform .35s ease;
}
.site-header::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),#51b9e8);
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:left;
}
.site-header.is-scrolled{background:rgba(248,251,254,.92);box-shadow:0 16px 48px rgba(16,61,101,.13)}
.site-header .brand{gap:12px;font-size:1.12rem}.site-header .brand>img{width:50px;height:50px}
.header-action,.primary-action{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(8,99,180,.08);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.header-action{background:rgba(224,239,252,.88);border-radius:16px}
.header-action:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,99,180,.14)}
.primary-action::before,.header-action::before{
  content:"";
  position:absolute;
  top:-80%;
  left:-55%;
  width:35%;
  height:260%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  transform:rotate(18deg) translateX(-220%);
  transition:transform .65s ease;
}
.primary-action:hover::before,.header-action:hover::before{transform:rotate(18deg) translateX(620%)}

.hero{
  min-height:calc(100svh - 104px);
  padding:76px 0 126px;
  gap:82px;
}
.hero-copy{position:relative;z-index:2}
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-80px;
  top:-100px;
  width:330px;
  height:330px;
  background:radial-gradient(circle,rgba(51,158,226,.13),transparent 68%);
}
.kicker,.step-number,.next-label{letter-spacing:.16em}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:23px}
.hero .kicker::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--primary),#59bde7);border-radius:99px}
.hero h1{max-width:720px;font-size:clamp(3.65rem,5.65vw,6rem);line-height:.91;letter-spacing:-.067em;text-wrap:balance}
.hero h1 em{
  color:transparent;
  background:linear-gradient(100deg,#07579d 5%,#1682ce 58%,#47b2df 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-lead{max-width:650px;margin-top:31px;color:#526679;font-size:1.08rem;line-height:1.78}
.hero .primary-action{min-height:60px;margin-top:38px;padding:0 25px;border-radius:18px;box-shadow:0 16px 36px rgba(8,83,148,.24)}
.hero .primary-action:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(8,83,148,.29)}
.hero-visual{min-height:650px;perspective:1200px}
.glow{
  width:520px;
  height:540px;
  background:linear-gradient(145deg,#074d8e,#1775bc 55%,#39a9d5);
  box-shadow:0 40px 100px rgba(12,76,132,.24);
  animation:blobMorph 14s ease-in-out infinite alternate;
}
.teacher-card{
  top:45px;
  left:50%;
  width:250px;
  border-color:#25323e;
  box-shadow:0 34px 70px rgba(8,42,75,.30);
  transform:translateX(-50%) rotate(-2.5deg);
  animation:deviceFloat 6.5s ease-in-out infinite;
}

.story{padding:115px 0 150px}
.section-heading{margin-bottom:72px;padding-left:30px;border-left:4px solid var(--primary)}
.section-heading h2{max-width:900px;font-size:clamp(3.2rem,5vw,5.25rem);text-wrap:balance}
.story-step{
  position:relative;
  margin-bottom:28px;
  padding:92px 70px;
  overflow:hidden;
  border:1px solid rgba(95,127,155,.13);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.58);
  box-shadow:0 20px 70px rgba(22,66,108,.055);
  backdrop-filter:blur(8px);
}
.story-step::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:310px;
  height:310px;
  right:-190px;
  top:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(45,150,218,.12),transparent 68%);
}
.story-step.cancel::before{background:radial-gradient(circle,rgba(185,83,71,.11),transparent 68%)}
.story-step.feedback::before{background:radial-gradient(circle,rgba(44,153,122,.11),transparent 68%)}
.story-step .step-copy{top:118px}
.step-number{
  width:max-content;
  margin-bottom:21px;
  padding:8px 11px;
  color:var(--primary);
  background:var(--primary-soft);
  border:1px solid rgba(8,99,180,.08);
  border-radius:999px;
  font-size:.59rem;
}
.step-copy h3{font-size:clamp(2.15rem,3.25vw,3.35rem);line-height:1.01;text-wrap:balance}
.step-copy>p:last-child{color:#5a6d80;font-size:1rem;line-height:1.78}
.comparison .device,.action-flow .device{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --lift:0px;
  position:relative;
  border-color:#24323f!important;
  box-shadow:0 30px 65px rgba(8,44,79,.20),0 3px 0 rgba(255,255,255,.75) inset;
  transform:perspective(1200px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style:preserve-3d;
  transition:transform .22s ease,box-shadow .35s ease;
}
.comparison .device:hover,.action-flow .device:hover{--lift:-9px;box-shadow:0 42px 86px rgba(8,44,79,.25)}
.comparison .device::before,.action-flow .device::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:7px;
  pointer-events:none;
  border-radius:29px;
  background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 28%);
  mix-blend-mode:screen;
}

.platform-section,.next-section{margin-bottom:128px}
.platform-heading h2{font-size:clamp(3.3rem,5vw,4.8rem);line-height:.98;text-wrap:balance}
.platform-grid{gap:18px}
.platform-grid article{
  border-color:rgba(90,126,157,.14);
  border-radius:30px;
  box-shadow:var(--shadow-soft);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.platform-grid article:hover{transform:translateY(-10px);border-color:rgba(8,99,180,.22);box-shadow:0 30px 72px rgba(22,72,115,.15)}
.platform-visual{height:205px}.platform-grid article>div:last-child{padding:27px 27px 30px}.platform-grid h3{font-size:1.28rem}.platform-grid p{font-size:.86rem}
.mini-phone{animation:miniDevice 5.7s ease-in-out infinite}.mini-tablet{animation:miniDevice 6.8s .5s ease-in-out infinite}.mini-desktop{animation:miniDevice 6.2s 1s ease-in-out infinite}
.identity-logo{transition:transform .35s ease,box-shadow .35s ease}.platform-grid article:hover .identity-logo:first-child{transform:translateY(-5px) rotate(-3deg)}.platform-grid article:hover .identity-logo:last-child{transform:translateY(5px) rotate(3deg)}
.real-install-preview img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}.platform-grid article:hover .real-install-preview img{transform:scale(1.055)}
.install-guide{
  border-radius:34px;
  border-color:rgba(91,126,157,.14);
  background:rgba(255,255,255,.76);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(12px);
}
.install-platforms article{border:1px solid transparent;transition:transform .32s ease,background .32s ease,border-color .32s ease}
.install-platforms article:hover{transform:translateY(-6px);background:#fff;border-color:rgba(8,99,180,.14)}
.install-shot img{transition:transform .65s cubic-bezier(.2,.8,.2,1)}.install-platforms article:hover .install-shot img{transform:scale(1.04)}

.next-section{
  position:relative;
  overflow:hidden;
  padding:82px;
  border-color:rgba(91,126,157,.14);
  background:linear-gradient(145deg,rgba(230,240,249,.92),rgba(247,250,253,.9));
  box-shadow:var(--shadow-soft);
}
.next-heading h2{font-size:clamp(3.2rem,5vw,4.9rem)}
.roadmap-release,.learning-roadmap{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.roadmap-release:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 38px 84px rgba(11,68,123,.28)}
.learning-roadmap:hover{transform:translateY(-8px);box-shadow:0 32px 70px rgba(25,62,99,.14)}
.release-qr{animation:qrHover 6s ease-in-out infinite}.release-qr>i{animation:qrScan 2.7s ease-in-out infinite}
.step-node{animation:nodePulse 3.2s ease-in-out infinite}.variants-step .step-node{animation-delay:.45s}.grade-step .step-node{animation-delay:.9s}
.learning-step{transition:background .28s ease,transform .28s ease}.learning-step:hover{background:#f7fafc;transform:translateX(5px)}

.summary.cta-section{
  min-height:520px;
  display:grid;
  place-items:center;
  border-radius:48px;
  background:linear-gradient(120deg,#073f75 0%,#0966b2 46%,#1b8cc8 100%);
  background-size:180% 180%;
  animation:ctaGradient 12s ease infinite;
}
.cta-section .summary-copy{max-width:900px}.cta-section .summary-copy h2{font-size:clamp(3.6rem,6vw,6.2rem)}
.cta-section .summary-copy>p:last-of-type{font-size:1.12rem}
.cta-action{min-height:64px;padding:0 28px;border-radius:19px}.cta-action:hover{transform:translateY(-5px) scale(1.015)}
footer{margin-bottom:16px;border-top-color:rgba(89,124,154,.18)}

.motion-ready [data-reveal]{opacity:0;transform:translateY(34px);filter:blur(5px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease;transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal="left"]{transform:translateX(-44px)}
.motion-ready [data-reveal="right"]{transform:translateX(44px)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none;filter:none}

@keyframes blobMorph{0%{border-radius:44% 56% 49% 51%/50% 43% 57% 50%;transform:rotate(-8deg) scale(1)}50%{border-radius:53% 47% 58% 42%/44% 58% 42% 56%;transform:rotate(-2deg) scale(1.035)}100%{border-radius:47% 53% 43% 57%/57% 45% 55% 43%;transform:rotate(-11deg) scale(.98)}}
@keyframes deviceFloat{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2.5deg)}50%{transform:translateX(-50%) translateY(-14px) rotate(-.8deg)}}
@keyframes miniDevice{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes qrHover{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-8px)}}
@keyframes qrScan{0%,100%{top:18%;opacity:.35}50%{top:82%;opacity:1}}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 7px #fff,0 0 0 8px rgba(8,99,180,0)}50%{box-shadow:0 0 0 7px #fff,0 0 0 15px rgba(8,99,180,.11)}}
@keyframes ctaGradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

@media(max-width:980px){
  .site-header{top:8px;margin-top:8px}.hero{padding-top:60px}.hero-visual::before,.hero-visual::after{display:none}
  .story-step{padding:72px 48px}.story-step .step-copy{position:static}.next-section{padding:64px 42px}
}
@media(max-width:700px){
  body::before{background-size:32px 32px}.site-header{width:calc(100% - 18px);border-radius:19px}.site-header .brand>img{width:44px;height:44px}.site-header .brand{font-size:1rem}
  .hero{width:calc(100% - 28px);padding:52px 0 88px;gap:24px}.hero h1{font-size:clamp(3rem,14vw,4.25rem)}.hero-lead{font-size:.97rem}.hero-visual{min-height:530px}.glow{width:350px;height:430px}.teacher-card{width:215px}
  .story{padding:82px 0 105px}.section-heading{padding-left:20px;margin-bottom:48px}.story-step{width:calc(100% - 20px);margin-bottom:16px;padding:58px 22px;border-radius:30px}.step-copy>p:last-child{font-size:.95rem}
  .comparison .device:hover,.action-flow .device:hover{--lift:0px}.platform-section,.next-section{width:calc(100% - 20px);margin-bottom:92px}.platform-heading h2{font-size:clamp(2.7rem,12vw,3.8rem)}.platform-grid{margin-top:34px}.platform-grid article:hover,.install-platforms article:hover{transform:none}.install-guide{padding:31px 18px}.install-guide-heading h3{font-size:2rem}.install-shot{height:270px}
  .next-section{padding:52px 18px;border-radius:30px}.roadmap-release:hover,.learning-roadmap:hover{transform:none}.summary.cta-section{width:calc(100% - 20px);min-height:480px;padding:70px 22px;border-radius:32px}.cta-section .summary-copy h2{font-size:clamp(3rem,13vw,4.4rem)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .motion-ready [data-reveal]{opacity:1;transform:none;filter:none}
}

/* Установка: реальные экраны Tutor Pack в понятных устройствах. */
.quick-install-visual{display:grid;place-items:center;background:linear-gradient(145deg,#e4eff9,#f7fbfe)}
.quick-laptop{position:relative;width:210px;height:132px;padding:7px 7px 15px;background:#26323d;border-radius:13px 13px 9px 9px;box-shadow:0 22px 38px rgba(25,58,89,.22);transform:rotate(-2deg)}
.quick-laptop::after{content:"";position:absolute;left:-20px;right:-20px;bottom:-6px;height:8px;background:#35424e;border-radius:2px 2px 12px 12px}
.quick-laptop i{display:block;width:100%;height:100%;background:#f5f7fa url("screenshots/home.png") center top/cover no-repeat;border-radius:7px}
.quick-laptop b{position:absolute;left:50%;bottom:4px;width:28px;height:2px;background:#73808b;border-radius:5px;transform:translateX(-50%)}
.quick-install-badge{position:absolute;right:22px;bottom:24px;padding:11px 14px;color:#fff;background:var(--primary);border:5px solid #edf5fc;border-radius:13px;box-shadow:0 12px 26px rgba(8,76,137,.22);font-size:.65rem;font-weight:850;animation:installBadge 3.6s ease-in-out infinite}

.install-platforms article{overflow:hidden}
.install-device{position:relative;height:265px;overflow:hidden;background:radial-gradient(circle at 72% 24%,rgba(102,183,229,.2),transparent 34%),linear-gradient(145deg,#dfebf6,#f8fbfe);border:1px solid #d4e0ea;border-radius:17px}
.install-device::after{content:"";position:absolute;width:190px;height:190px;right:-82px;top:-92px;border:1px solid rgba(87,167,218,.2);border-radius:50%;box-shadow:0 0 0 34px rgba(87,167,218,.055)}
.device-app-screen,.device-companion-screen{position:absolute;z-index:1;display:block;background:#f5f7fa url("screenshots/home.png") center top/cover no-repeat;border-style:solid;border-color:#26323d;box-shadow:0 18px 34px rgba(19,54,85,.22)}
.phone-install-device .device-app-screen{left:50%;top:17px;width:124px;aspect-ratio:390/844;border-width:8px;border-radius:29px;transform:translateX(-50%) rotate(-2deg)}
.phone-install-device .device-app-screen::before{content:"";position:absolute;z-index:3;top:5px;left:50%;width:7px;height:7px;background:#111b24;border:2px solid #34414c;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.phone-install-device .device-app-screen::after{content:"";position:absolute;z-index:3;left:50%;bottom:6px;width:38px;height:4px;background:#e7edf2;border-radius:99px;transform:translateX(-50%);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tablet-install-device .device-app-screen{left:58%;top:25px;width:154px;height:210px;border-width:10px;border-radius:18px;transform:translateX(-42%) rotate(1.5deg)}
.tablet-install-device .device-app-screen::before{content:"";position:absolute;z-index:3;top:4px;left:50%;width:5px;height:5px;background:#111b24;border-radius:50%;transform:translateX(-50%)}
.tablet-install-device .device-companion-screen{left:18%;bottom:18px;width:78px;height:166px;border-width:7px;border-radius:24px;transform:rotate(-5deg)}
.tablet-install-device .device-companion-screen::before{content:"";position:absolute;z-index:3;top:5px;left:50%;width:29px;height:7px;background:#111b24;border-radius:99px;transform:translateX(-50%)}
.tablet-install-device .device-companion-screen::after{content:"";position:absolute;z-index:3;left:50%;bottom:5px;width:28px;height:3px;background:#eef2f5;border-radius:99px;transform:translateX(-50%)}
.desktop-install-device .device-app-screen{left:50%;top:34px;width:232px;height:148px;border-width:10px 10px 14px;border-radius:12px 12px 6px 6px;transform:translateX(-50%)}
.desktop-install-device .device-app-screen::before{content:"";position:absolute;z-index:3;top:4px;left:50%;width:5px;height:5px;background:#101820;border-radius:50%;transform:translateX(-50%)}
.desktop-stand{position:absolute;z-index:2;left:50%;top:178px;width:270px;height:17px;background:linear-gradient(180deg,#465461,#26323d);border-radius:3px 3px 15px 15px;transform:translateX(-50%);box-shadow:0 13px 20px rgba(21,52,82,.2)}
.desktop-stand::before{content:"";position:absolute;top:0;left:50%;width:64px;height:5px;background:#7b8791;border-radius:0 0 7px 7px;transform:translateX(-50%)}
.install-copy{padding:0 6px!important}.install-copy h4{margin:0;font-size:1.15rem;line-height:1.2}.install-copy p{margin-top:13px;font-size:.82rem;line-height:1.68}

/* CTA: компактная композиция вместо типографического плаката. */
.summary.cta-section{min-height:0;padding:76px 82px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);place-items:center stretch;gap:64px;text-align:left}
.cta-section .summary-copy{max-width:650px;margin:0}.cta-section .summary-copy h2{max-width:650px;font-size:clamp(3.25rem,4.7vw,4.85rem);line-height:.96;letter-spacing:-.058em;text-wrap:balance}.cta-section .summary-copy>p:last-of-type{max-width:600px;margin:25px 0 0;font-size:1.02rem}.cta-section .cta-action{margin:32px 0 0}
.cta-device-showcase{position:relative;min-height:370px;display:grid;place-items:center;isolation:isolate}.cta-orbit{position:absolute;z-index:-1;width:330px;height:330px;border:1px solid rgba(255,255,255,.23);border-radius:50%;box-shadow:0 0 0 48px rgba(255,255,255,.035),0 0 0 96px rgba(255,255,255,.025)}.cta-phone{position:relative;width:168px;aspect-ratio:390/844;padding:8px;background:#24313c;border-radius:31px;box-shadow:0 30px 64px rgba(1,31,58,.32);transform:rotate(4deg);animation:ctaPhoneFloat 6s ease-in-out infinite}.cta-phone::before{content:"";position:absolute;z-index:3;top:15px;left:50%;width:52px;height:7px;background:#17212a;border-radius:99px;transform:translateX(-50%)}.cta-phone i{display:block;width:100%;height:100%;background:#f5f7fa url("screenshots/home.png") center top/cover no-repeat;border-radius:24px}.cta-phone b{position:absolute;inset:8px;border-radius:24px;background:linear-gradient(125deg,rgba(255,255,255,.16),transparent 30%);pointer-events:none}.cta-status{position:absolute;right:2%;bottom:17%;padding:12px 15px;display:flex;align-items:center;gap:9px;color:#195846;background:rgba(238,252,247,.94);border:1px solid rgba(255,255,255,.8);border-radius:999px;box-shadow:0 14px 30px rgba(2,39,65,.18);font-size:.62rem;font-weight:850}.cta-status i{width:8px;height:8px;background:#35ac80;border-radius:50%;box-shadow:0 0 0 5px rgba(53,172,128,.13)}
@keyframes installBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ctaPhoneFloat{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}

@media(max-width:980px){.summary.cta-section{grid-template-columns:1fr;gap:28px;text-align:center}.cta-section .summary-copy{margin:auto}.cta-section .summary-copy>p:last-of-type{margin-right:auto;margin-left:auto}.cta-section .cta-action{margin-right:auto;margin-left:auto}.cta-device-showcase{min-height:310px}.cta-phone{width:142px}.cta-orbit{width:270px;height:270px}}
@media(max-width:700px){.install-device{height:285px}.phone-install-device .device-app-screen{width:128px}.tablet-install-device .device-app-screen{width:164px;height:224px}.tablet-install-device .device-companion-screen{left:22%;width:80px;height:170px}.desktop-install-device .device-app-screen{width:246px;height:157px}.desktop-stand{top:187px;width:282px}.summary.cta-section{padding:58px 22px}.cta-section .summary-copy h2{font-size:clamp(2.75rem,12vw,3.7rem)}.cta-device-showcase{min-height:270px}.cta-phone{width:125px}.cta-orbit{width:230px;height:230px}.cta-status{right:4%;bottom:13%}}

/* Главный переход в приложение — визуальный приоритет навигации. */
.site-header .header-action{min-height:58px;padding:0 8px 0 22px;gap:16px;color:#fff;background:linear-gradient(115deg,#07579f 0%,#0872c9 58%,#2b98da 100%);background-size:160% 160%;border:1px solid rgba(4,67,124,.28);border-radius:17px;box-shadow:0 14px 30px rgba(7,86,157,.26),inset 0 1px 0 rgba(255,255,255,.2);font-size:.86rem;font-weight:850;animation:headerCtaGlow 5s ease-in-out infinite}
.site-header .header-action span{width:42px;height:42px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:12px;font-size:1rem;transition:transform .25s ease,background .25s ease}
.site-header .header-action:hover{color:#fff;background-position:100% 50%;box-shadow:0 20px 38px rgba(7,86,157,.34),inset 0 1px 0 rgba(255,255,255,.23);transform:translateY(-3px)}
.site-header .header-action:hover span{background:rgba(255,255,255,.24);transform:translate(2px,-2px)}
.site-header .header-action:focus-visible{outline:4px solid rgba(49,154,219,.3);outline-offset:4px}
@keyframes headerCtaGlow{0%,100%{box-shadow:0 14px 30px rgba(7,86,157,.26),0 0 0 0 rgba(40,149,216,0)}50%{box-shadow:0 17px 35px rgba(7,86,157,.32),0 0 0 7px rgba(40,149,216,.08)}}
@media(max-width:700px){.site-header .header-action{width:auto;min-height:50px;padding:0 6px 0 14px;gap:9px;border-radius:14px;font-size:.72rem}.site-header .header-action span{width:36px;height:36px;border-radius:10px;font-size:.9rem}}
@media(max-width:390px){.site-header .header-action{padding-left:10px;font-size:.66rem}.site-header .header-action span{width:33px;height:33px}}

/* Главный CTA находится в точке принятия решения — в первом экране. */
.site-nav{display:flex;align-items:center;gap:6px}.site-nav a{min-height:44px;padding:0 14px;display:flex;align-items:center;color:#587086;border-radius:12px;font-size:.72rem;font-weight:750;transition:color .22s ease,background .22s ease}.site-nav a:hover{color:var(--primary);background:var(--primary-soft)}.site-nav a:focus-visible{outline:3px solid rgba(18,87,154,.22);outline-offset:2px}
.hero-actions{margin-top:38px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}.hero-actions .primary-action{margin-top:0}.hero-app-action{min-height:64px!important;padding:0 9px 0 25px!important;gap:20px!important;background:linear-gradient(115deg,#07579f,#0873cb 62%,#2c99d9)!important;background-size:160% 160%!important;border-radius:19px!important;box-shadow:0 18px 40px rgba(7,86,157,.30)!important;font-size:.9rem!important}.hero-app-action span{width:46px;height:46px;display:grid;place-items:center;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.2);border-radius:13px;font-size:1.08rem;transition:transform .25s ease,background .25s ease}.hero-app-action:hover{background-position:100% 50%!important;box-shadow:0 24px 50px rgba(7,86,157,.38)!important}.hero-app-action:hover span{background:rgba(255,255,255,.25);transform:translate(2px,-2px)}
.secondary-action{min-height:60px;padding:0 19px;display:inline-flex;align-items:center;gap:15px;color:#405c73;background:rgba(255,255,255,.62);border:1px solid rgba(85,123,154,.16);border-radius:18px;backdrop-filter:blur(10px);font-size:.8rem;font-weight:780;transition:color .25s ease,background .25s ease,transform .25s ease}.secondary-action:hover{color:var(--primary);background:#fff;transform:translateY(-3px)}.secondary-action:focus-visible{outline:3px solid rgba(18,87,154,.24);outline-offset:3px}
@media(max-width:700px){.site-nav{display:none}.site-header{width:max-content;max-width:calc(100% - 18px);margin-left:9px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions .primary-action,.hero-actions .secondary-action{width:100%;justify-content:space-between}.hero-app-action{padding-left:20px!important}}

/* Нижняя кромка исходных PNG содержит элементы окна и полосы прокрутки.
   Финальное кадрирование применяется после всех ранних переопределений рамок. */
.comparison .device,
.action-flow .device,
.phone.device,
.student-phone.device,
.action-card.device{
  aspect-ratio:1/2.048;
  background-position:center 34px;
  background-size:100% auto;
  background-repeat:no-repeat;
}
.hero-card{
  aspect-ratio:1/2.052;
  background-position:center 23px;
  background-size:100% auto;
  background-repeat:no-repeat;
}
.phone-install-device .device-app-screen,
.tablet-install-device .device-companion-screen,
.mini-phone,
.cta-phone i{
  background-position:center top;
  background-size:auto 101.5%;
  background-repeat:no-repeat;
}

/* OAuth-бренды должны считываться сразу, а не сливаться с фоном карточки. */
.identity-logos{gap:24px}
.identity-logos>span{display:none}
.identity-logo{width:108px;height:108px;border-radius:30px}
.yandex-logo{
  border:3px solid #ffcc00;
  background:#fff;
  box-shadow:0 18px 36px rgba(255,204,0,.22),0 8px 18px rgba(21,52,82,.11);
}
.yandex-logo img{width:88px;max-width:88px;max-height:none;filter:contrast(1.25)}
.vk-logo{
  border-color:#0077ff;
  background:linear-gradient(145deg,#1687ff,#0066e6);
  box-shadow:0 18px 36px rgba(0,119,255,.28),0 8px 18px rgba(21,52,82,.12);
}
.vk-logo img{width:64px;height:64px;filter:drop-shadow(0 3px 8px rgba(0,54,122,.18))}

/* Скриншот задаёт геометрию рамки, а не наоборот. Никакого cover/crop. */
.comparison .device,
.action-flow .device,
.phone.device,
.student-phone.device,
.action-card.device{
  height:auto!important;
  aspect-ratio:auto!important;
  padding:34px 0 0!important;
  background-image:none!important;
  line-height:0;
}
.comparison .device>:not(.real-screen):not(.device-speaker),
.action-flow .device>:not(.real-screen):not(.device-speaker){display:none!important}
.hero-card{
  height:auto;
  aspect-ratio:auto;
  padding:23px 0 0;
  background-image:none;
  line-height:0;
}
.hero-card>:not(.real-screen){display:none!important}
.real-screen{
  width:100%;
  height:auto;
  display:block;
  visibility:visible!important;
  object-fit:contain;
  object-position:center;
}
.cta-phone{height:auto;aspect-ratio:auto;overflow:hidden}
.cta-phone>.real-screen{border-radius:24px}

/* В инструкции по установке показываются сами устройства, без имитации меню. */
.device-app-screen,.device-companion-screen{
  background:linear-gradient(145deg,#f9fcff,#e6f1fa);
  display:grid;
  place-items:center;
}
.device-brand-mark{position:relative;z-index:2;width:42%;height:auto;display:block;filter:drop-shadow(0 8px 15px rgba(12,76,132,.15))}
.mini-phone,.mini-tablet,.mini-desktop{
  background-image:url("images/tutor-pack-mark.svg"),linear-gradient(145deg,#f9fcff,#e6f1fa);
  background-position:center,center;
  background-repeat:no-repeat;
  background-size:42%,100%;
}
.quick-laptop i{display:grid;place-items:center;background:linear-gradient(145deg,#f9fcff,#e6f1fa)}
.quick-laptop i img{width:58px;height:auto;display:block;filter:drop-shadow(0 8px 15px rgba(12,76,132,.16))}

/* Телефон в финальном CTA повторяет устройство из первого экрана. */
.cta-phone{
  width:min(218px,55vw);
  height:auto;
  aspect-ratio:auto;
  padding:23px 0 0;
  overflow:hidden;
  background:#fff;
  border:0;
  border-radius:28px;
  box-shadow:0 0 0 7px #26313c,0 30px 64px rgba(1,31,58,.32);
}
.cta-phone::before{
  content:"9:41";
  position:absolute;
  z-index:8;
  inset:0 0 auto;
  width:auto;
  height:23px;
  padding:0 10px;
  display:flex;
  align-items:center;
  color:#101820;
  background:#fff;
  border-radius:22px 22px 0 0;
  transform:none;
  font-size:6px;
  font-weight:800;
}
.cta-phone::after{
  content:"▮▮ 5G ▰";
  position:absolute;
  z-index:9;
  top:0;
  right:0;
  height:23px;
  padding:0 9px;
  display:flex;
  align-items:center;
  color:#101820;
  font-family:"Segoe UI Symbol","Segoe UI",sans-serif;
  font-size:4.5px;
}
.cta-phone>.real-screen{border-radius:0 0 22px 22px}
.cta-phone>b{display:none}

/* Названия сценариев поддерживают скриншот, а не конкурируют с ним. */
.story-step>.step-copy h3{font-size:clamp(1.7rem,2.45vw,2.55rem);line-height:1.08;letter-spacing:-.045em}