/* HiScore — лендинг */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { overflow-x: hidden; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.btn--ink { --bg: var(--ink); --fg: #fff; }
.btn--line { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.kicker--light { color: var(--pink); }
h2.t-display { margin: 0; font-size: clamp(40px, 6vw, 84px); max-width: 14ch; text-wrap: balance; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink); }
.sec { padding: clamp(80px, 10vw, 130px) 0; }

.reveal { opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease), translate .8s var(--ease), transform .4s var(--ease), box-shadow .4s, background .3s; transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- шапка с волнистым краем ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: box-shadow .3s; }
.hdr::after { /* волна, как у бумажной салфетки */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  background: radial-gradient(circle at 10px -2px, var(--bg) 10px, transparent 10.5px) 0 0 / 20px 12px repeat-x;
}
.hdr.is-scrolled { box-shadow: 0 10px 30px -26px rgba(80, 20, 30, .6); }
.hdr__in { display: flex; align-items: center; gap: 28px; height: 76px; }
.hdr__nav { display: flex; gap: 4px; margin-left: auto; }
.hdr__nav a:not(.btn) { padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 550; text-decoration: none; transition: background .2s; }
.hdr__nav a:not(.btn):hover { background: var(--bg-2); }
.hdr__btns { display: flex; gap: 8px; }
.hdr__m { display: none; }
.hdr__burger { display: none; }

/* ---------- первый экран ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 8vw, 110px); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 640px; height: 640px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(circle, var(--pink) 0, transparent 68%); opacity: .7; pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.hero__eyebrow { margin: 0 0 22px; font-size: 14px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 30px; font-size: clamp(54px, 8.4vw, 124px); }
.tape { display: inline-block; padding: .06em .16em .02em; background: #fff; box-shadow: 0 14px 30px -22px rgba(80, 20, 30, .6); animation: tape .8s var(--ease) both; }
.tape:nth-child(1) { transform: rotate(-1.6deg); }
.tape:nth-child(2) { transform: rotate(1.2deg); margin-left: .5em; animation-delay: .12s; }
.tape:nth-child(3) { transform: rotate(-.8deg); animation-delay: .24s; }
.tape--red { background: var(--red); color: #fff; }
@keyframes tape { from { opacity: 0; translate: -30px 0; } }
.hero__lead { max-width: 30em; margin: 0 0 32px; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); animation: tape .8s .36s var(--ease) both; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; animation: tape .8s .46s var(--ease) both; }

.polaroid {
  position: relative; margin: 0 auto; width: min(100%, 420px);
  padding: 16px 16px 22px; background: #fff;
  transform: rotate(2.5deg);
  box-shadow: 0 40px 70px -40px rgba(80, 20, 30, .55);
  animation: drop 1s .2s var(--ease) both;
}
@keyframes drop { from { opacity: 0; transform: rotate(9deg) translateY(50px); } }
.polaroid__tape { position: absolute; top: -16px; left: 50%; width: 120px; height: 34px; margin-left: -60px; background: rgba(255, 201, 210, .85); transform: rotate(-3deg); }
.polaroid__photo {
  position: relative; aspect-ratio: 4 / 4.6; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #F2B8C0, var(--red) 70%);
}
.polaroid__photo::after { /* фото положить в img/teacher.jpg */
  content: ""; position: absolute; inset: 0;
  background: url("../img/teacher.jpg") center 22% / cover no-repeat;
}
.polaroid__mono { font: 800 clamp(110px, 12vw, 170px)/1 var(--f); font-stretch: 62%; color: #fff; letter-spacing: -.02em; }
.polaroid figcaption { padding-top: 16px; }
.polaroid figcaption b { display: block; font-size: 19px; font-weight: 750; }
.polaroid figcaption span { font-size: 14px; color: var(--muted); }
.bubble {
  position: absolute; z-index: 2;
  padding: 11px 16px; border-radius: 18px;
  background: var(--ink); color: #fff;
  font-size: 14.5px; font-weight: 650; white-space: nowrap;
  box-shadow: var(--shadow);
}
.bubble::after { content: ""; position: absolute; bottom: -7px; width: 16px; height: 16px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
.bubble--1 { left: -54px; top: 18%; transform: rotate(-4deg); }
.bubble--1::after { right: 26px; }
.bubble--2 { right: -36px; bottom: 30%; background: var(--blue); transform: rotate(3deg); }
.bubble--2::after { left: 26px; }
.stamp {
  position: absolute; right: -34px; top: -30px; z-index: 3;
  width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--butter); color: var(--ink);
  transform: rotate(10deg);
  box-shadow: 0 0 0 6px var(--butter), 0 0 0 7.5px var(--ink);
}
.stamp b { font: 800 19px/1 var(--f); font-stretch: 62%; text-transform: uppercase; }
.stamp small { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.hero__scribble { position: absolute; left: -110px; bottom: -40px; width: 200px; fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: scribble 1.6s 1s var(--ease) forwards; }
@keyframes scribble { to { stroke-dashoffset: 0; } }

/* ---------- полоса заявки ---------- */
.leadbar { position: relative; z-index: 2; margin-top: -30px; }
.leadbar__in {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: center;
  padding: 22px; border-radius: var(--r-l);
  background: var(--red); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(174, 26, 46, .7);
}
.leadbar__title b { display: block; font-size: 19px; font-weight: 750; line-height: 1.2; }
.leadbar__title span { display: block; margin-top: 4px; font-size: 13.5px; opacity: .8; }
.leadbar .input { border: 0; min-height: 52px; color: var(--ink); }
.leadbar .btn { --bg: var(--ink); min-height: 52px; box-shadow: none; }
.leadbar .btn:hover { --bg: #000; }
.leadbar__consent { grid-column: 2 / 5; color: rgba(255, 255, 255, .8); font-size: 12.5px; }
.leadbar__consent a { color: #fff; }
.leadbar__consent input { accent-color: var(--ink); }
.leadbar__consent.is-bad { color: var(--butter); }
.leadbar__msg { grid-column: 5; margin: 0; font-size: 13px; font-weight: 600; text-align: center; color: var(--butter); }
.leadbar .input.is-bad { box-shadow: 0 0 0 3px var(--butter); }
.leadbar__done { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 8px 4px; font-size: 17px; }
.leadbar__done .i { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: #fff; color: var(--red); stroke-width: 3; }
.leadbar__done b { display: block; font-size: 21px; }

/* ---------- цифры ---------- */
.stats { padding: clamp(60px, 7vw, 90px) 0 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 26px 24px 28px; border-radius: var(--r); background: var(--sky); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.stat b { font: 800 clamp(48px, 5vw, 70px)/.9 var(--f); font-stretch: 62%; text-transform: uppercase; color: var(--blue); }
.stat span { font-size: 15.5px; font-weight: 500; line-height: 1.4; color: #1E356F; }
.stat--red { background: var(--red); transform: rotate(-2deg); }
.stat--red b, .stat--red span { color: #fff; }

/* ---------- преподаватель ---------- */
.teacher__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.teacher__grid p { color: var(--ink-2); max-width: 36em; }
.teacher__grid .lead { margin-top: 26px; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 550; }
.ticks .i { margin-top: 2px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; stroke-width: 3.4; }
.quote { position: relative; margin: 0; padding: clamp(34px, 4vw, 54px); border-radius: var(--r-l); background: var(--ink); color: #fff; transform: rotate(-1.5deg); }
.quote__label { display: inline-block; padding: 7px 13px; border-radius: 999px; background: var(--butter); color: var(--ink); font-size: 12.5px; font-weight: 700; }
.quote blockquote { margin: 26px 0 18px; font: 800 clamp(40px, 4.6vw, 64px)/.98 var(--f); font-stretch: 62%; text-transform: uppercase; }
.quote figcaption { font-size: 17px; font-weight: 600; color: var(--pink); }
.quote__heart { position: absolute; right: 30px; bottom: 26px; width: 48px; height: 48px; fill: var(--red); stroke: none; animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } }

/* ---------- как учимся ---------- */
.how { background: #fff; border-radius: clamp(30px, 5vw, 60px); margin: 0 clamp(8px, 1.4vw, 20px); }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 90px); align-items: center; margin-top: clamp(50px, 7vw, 100px); }
.feat--rev .feat__text { order: 2; }
.feat__n { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--red-soft); color: var(--red-d); font-weight: 800; }
.feat h3 { margin: 20px 0 16px; font-size: clamp(32px, 3.6vw, 50px); max-width: 15ch; }
.feat p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 30em; }
.mock { border-radius: var(--r); background: var(--bg); padding: 0 0 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 40px 60px -45px rgba(80, 20, 30, .5); transform: rotate(1deg); transition: transform .6s var(--ease); }
.feat--rev .mock { transform: rotate(-1deg); }
.mock:hover { transform: none; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--muted); }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--red-soft); }
.mock__bar span { margin-left: 8px; }
.call { padding: 18px 22px 0; display: grid; gap: 12px; }
.call__slide { padding: 26px; border-radius: 16px; background: #fff; display: grid; gap: 6px; }
.call__slide b { font: 800 34px/1 var(--f); font-stretch: 62%; text-transform: uppercase; color: var(--red); }
.call__slide span { font-weight: 600; color: var(--muted); }
.call__slide em { margin-top: 12px; font-style: normal; font-size: 17px; line-height: 1.6; }
.call__slide u { text-decoration-color: var(--red); text-decoration-thickness: 2.5px; text-underline-offset: 3px; }
.call__people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.call__p { aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; background: var(--sky); font-weight: 800; color: var(--blue); }
.call__p--t { background: var(--red); color: #fff; box-shadow: 0 0 0 3px var(--butter); }
.mtask { padding: 22px 22px 0; display: grid; gap: 10px; }
.mtask p { margin: 0 0 6px; font-size: 18px; font-weight: 550; }
.mtask u { text-decoration: none; border-bottom: 2.5px solid var(--green); padding: 0 4px; background: #E8F7EF; }
.mtask small { color: var(--muted); }
.mopt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line-2); font-weight: 500; }
.mopt span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font-size: 12.5px; font-weight: 800; }
.mopt--ok { border-color: var(--green); background: #E8F7EF; }
.mopt--ok span { background: var(--green); color: #fff; }
.mopt--bad { opacity: .55; }
.mexp { padding: 12px 14px; border-radius: 12px; background: #E8F7EF; font-size: 14.5px; }
.mcrit { padding: 22px 22px 0; display: grid; gap: 8px; }
.mcrit div { display: flex; justify-content: space-between; gap: 10px; padding: 13px 16px; border-radius: 12px; background: #fff; font-weight: 550; }
.mcrit b { font: 800 20px/1 var(--f); font-stretch: 70%; color: var(--green); }
.mcrit div:nth-child(3) b { color: var(--red); }
.mcomment { margin: 8px 0 0; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--butter); font-size: 15px; }
.mchart { display: flex; align-items: flex-end; gap: 12px; height: 220px; padding: 26px 26px 0; }
.mchart i { flex: 1; height: var(--h); border-radius: 10px 10px 4px 4px; background: var(--sky); transform-origin: bottom; }
.mchart i:last-child { background: var(--red); }
.feat.is-in .mchart i { animation: grow 1s var(--ease) both; }
.feat.is-in .mchart i:nth-child(2) { animation-delay: .06s; } .feat.is-in .mchart i:nth-child(3) { animation-delay: .12s; }
.feat.is-in .mchart i:nth-child(4) { animation-delay: .18s; } .feat.is-in .mchart i:nth-child(5) { animation-delay: .24s; }
.feat.is-in .mchart i:nth-child(6) { animation-delay: .3s; } .feat.is-in .mchart i:nth-child(7) { animation-delay: .36s; }
@keyframes grow { from { transform: scaleY(0); } }
.mchart__legend { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 0; font-size: 13px; color: var(--muted); }
.mchart__legend b { color: var(--green); font-size: 15px; }

/* ---------- демо ---------- */
.demo { margin: clamp(60px, 8vw, 100px) 0 0; padding: clamp(70px, 9vw, 120px) 0; background: var(--ink); color: #fff; }
.demo__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.demo p { color: rgba(255, 255, 255, .72); font-size: 17.5px; max-width: 32em; margin-top: 22px; }
.demo__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 250px; padding: 26px; border: 0; border-radius: var(--r);
  background: #fff; color: var(--ink); text-align: left; cursor: pointer;
  transition: transform .4s var(--ease);
}
.demo-card:hover { transform: translateY(-6px) rotate(-1deg); }
.demo-card > .i { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--red-soft); color: var(--red); margin-bottom: auto; }
.demo-card b { font: 800 34px/1 var(--f); font-stretch: 62%; text-transform: uppercase; }
.demo-card span { font-size: 14.5px; color: var(--muted); }
.demo-card em { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-style: normal; font-weight: 700; color: var(--red); }
.demo-card--red { background: var(--red); color: #fff; transform: rotate(1.5deg); }
.demo-card--red > .i { background: rgba(255, 255, 255, .18); color: #fff; }
.demo-card--red span { color: rgba(255, 255, 255, .8); }
.demo-card--red em { color: #fff; }
.demo-card[disabled] { opacity: .6; pointer-events: none; }

/* ---------- программа ---------- */
.parts__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 50px; }
.part { padding: 24px 22px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .4s var(--ease), background .3s; }
.part:hover { transform: translateY(-5px); background: var(--red-soft); }
.part span { font-size: 13px; font-weight: 800; color: var(--red); }
.part h3 { margin: 46px 0 10px; font-size: 21px; font-weight: 750; line-height: 1.15; }
.part p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---------- тест ---------- */
.quiz { background: var(--bg-2); }
.quiz__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.quiz__grid .lead { color: var(--ink-2); margin-top: 22px; }
.qcard { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow); min-height: 420px; display: flex; flex-direction: column; }
.qcard__top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.qcard__bar { flex: 1; height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.qcard__bar i { display: block; height: 100%; width: 0; background: var(--red); border-radius: inherit; transition: width .5s var(--ease); }
.qcard__body { flex: 1; display: flex; flex-direction: column; }
.q-text { margin: 0 0 22px; font-size: clamp(20px, 2vw, 25px); font-weight: 600; line-height: 1.35; }
.q-text u { text-decoration: none; display: inline-block; min-width: 3em; border-bottom: 3px solid var(--red); }
.q-opts { display: grid; gap: 9px; }
.q-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; text-align: left; font-size: 16.5px; font-weight: 500; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.q-opt:hover:not(:disabled) { border-color: var(--ink); transform: translateX(4px); }
.q-opt__k { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font-size: 13px; font-weight: 800; }
.q-opt.is-right { border-color: var(--green); background: #E8F7EF; }
.q-opt.is-right .q-opt__k { background: var(--green); color: #fff; }
.q-opt.is-wrong { border-color: var(--red); background: #FFF0F2; }
.q-opt.is-wrong .q-opt__k { background: var(--red); color: #fff; }
.q-opt:disabled { cursor: default; }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 20px; min-height: 72px; }
.q-tip { margin: 0; font-size: 14.5px; color: var(--muted); }
.q-result { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.q-result__score { font: 800 92px/1 var(--f); font-stretch: 62%; color: var(--red); }
.q-result__score small { font-size: 40px; color: var(--muted); }
.q-result h3 { margin: 0; font-size: 26px; font-weight: 750; }
.q-result p { margin: 0; max-width: 28em; color: var(--ink-2); }
.q-result .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* ---------- тарифы ---------- */
.plans__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 50px; }
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { position: relative; z-index: 1; min-width: 92px; padding: 12px 22px; border: 0; background: none; border-radius: 999px; font-weight: 700; color: var(--muted); cursor: pointer; transition: color .3s; }
.seg button[aria-checked="true"] { color: #fff; }
.seg__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--red); transition: transform .4s var(--ease); }
.seg[data-exam="ege"] .seg__thumb { transform: translateX(100%); }
body:not(.is-oge) [data-oge], body.is-oge [data-ege] { display: none; }
.plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--r-l); background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.plan h3 { margin: 0; font-size: 46px; }
.plan__desc { margin: 10px 0 0; font-size: 15px; color: var(--muted); min-height: 2.8em; }
.plan__price { margin: 24px 0; padding: 22px 0; border-block: 1.5px dashed var(--line-2); display: flex; align-items: baseline; gap: 10px; }
.plan__price b { font: 800 clamp(46px, 4.4vw, 60px)/1 var(--f); font-stretch: 62%; }
.plan__price span { color: var(--muted); font-size: 15px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; flex: 1; align-content: start; }
.plan li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.4; }
.plan li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317151C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 3.8 3.8L18 8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.plan li.no { opacity: .4; text-decoration: line-through; }
.plan li.no::before { background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%2317151C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 13px no-repeat; }
.plan--mid { background: var(--sky); box-shadow: none; }
.plan--max { background: var(--red); color: #fff; box-shadow: 0 30px 60px -30px rgba(174, 26, 46, .7); }
.plan--max .plan__desc { color: rgba(255, 255, 255, .8); }
.plan--max .plan__price { border-color: rgba(255, 255, 255, .35); }
.plan--max .plan__price span { color: rgba(255, 255, 255, .75); }
.plan--max li::before { background-color: #fff; }
.plan__badge { position: absolute; top: -16px; right: 24px; padding: 9px 15px; border-radius: 999px; background: var(--butter); color: var(--ink); font-size: 13px; font-weight: 750; transform: rotate(4deg); }
.plans__note { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 36px 0 0; text-align: center; color: var(--ink-2); font-weight: 500; }
.plans__note .i { color: var(--red); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.faq__grid > div:first-child { position: sticky; top: 110px; }
.faq__list { display: grid; gap: 10px; }
.faq details { border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 24px; font-size: 18px; font-weight: 650; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%2317151C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat; transition: transform .35s var(--ease), background-color .3s; }
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--red-soft); }
.faq details p { margin: 0; padding: 0 24px 24px; color: var(--ink-2); max-width: 42em; }

/* ---------- финал и подвал ---------- */
.final { padding: 0 0 clamp(70px, 8vw, 110px); }
.final__in { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 80px); border-radius: clamp(30px, 4vw, 48px); background: var(--red); color: #fff; }
.final__in::after { content: ""; position: absolute; right: -90px; top: -90px; width: 360px; height: 360px; border-radius: 50%; border: 54px solid rgba(255, 255, 255, .1); }
.final h2.t-display { max-width: 12ch; }
.final p { max-width: 34em; margin: 22px 0 30px; font-size: 18px; color: rgba(255, 255, 255, .85); }
.final__btns { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.ftr { padding: 40px 0 50px; background: var(--ink); color: rgba(255, 255, 255, .6); font-size: 14px; }
.ftr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ftr .logo { color: #fff; }
.ftr .logo__word small { color: rgba(255, 255, 255, .5); }
.ftr nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ftr a { text-decoration: none; transition: color .2s; }
.ftr a:hover { color: #fff; }

/* ========== адаптив ========== */
@media (max-width: 1100px) {
  .hdr__nav a:not(.btn) { padding: 10px 9px; font-size: 14px; }
  .leadbar__in { grid-template-columns: 1fr 1fr; }
  .leadbar__title { grid-column: 1 / -1; }
  .leadbar .btn { grid-column: 1 / -1; }
  .leadbar__consent, .leadbar__msg { grid-column: 1 / -1; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hdr__in { height: 66px; gap: 12px; }
  .hdr__btns .btn--ghost { display: none; }
  .hdr__burger { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
  .hdr__burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease); }
  .hdr.is-open .hdr__burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .hdr.is-open .hdr__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hdr__btns { margin-left: auto; }
  .hdr__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; padding: 12px clamp(18px, 4vw, 40px) 22px; background: var(--bg); box-shadow: 0 20px 30px -20px rgba(80, 20, 30, .4); }
  .hdr.is-open .hdr__nav { display: flex; }
  .hdr__nav a:not(.btn) { font-size: 18px; padding: 12px 6px; }
  .hdr__m { display: inline-flex; margin-top: 8px; }
  .hero__grid, .teacher__grid, .demo__in, .quiz__grid, .faq__grid { grid-template-columns: 1fr; }
  .polaroid { width: min(86%, 380px); margin-top: 30px; }
  .bubble--1 { left: -24px; }
  .bubble--2 { right: -18px; }
  .stamp { right: -4px; width: 100px; height: 100px; }
  .stamp b { font-size: 16px; }
  .hero__scribble { display: none; }
  .feat, .feat--rev { grid-template-columns: 1fr; }
  .feat--rev .feat__text { order: 0; }
  .plans__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 26px; }
  .faq__grid > div:first-child { position: static; }
  .parts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hdr__btns .btn { padding: 0 14px; }
  .hero__title { font-size: clamp(48px, 15vw, 70px); }
  .hero__cta .btn { width: 100%; }
  .bubble { font-size: 12.5px; padding: 9px 12px; }
  .leadbar__in { grid-template-columns: 1fr; padding: 18px; }
  .stats__grid { gap: 10px; }
  .stat { min-height: 160px; padding: 20px 18px; }
  .stat b { font-size: 38px; }
  .hdr .logo__word small { display: none; }
  .stat span { font-size: 14px; }
  .demo__cards { grid-template-columns: 1fr; }
  .demo-card { min-height: 190px; }
  .parts__grid { grid-template-columns: 1fr; }
  .part h3 { margin-top: 20px; }
  .qcard { min-height: 0; }
  .ftr__in { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; translate: none; }
}