/* ============ Monsters EGE — main styles ============ */
:root {
  --navy: #1b1446;
  --navy-2: #2a1f6b;
  --violet: #7c5cff;
  --violet-light: #a78bff;
  --lime: #b7f34a;
  --lime-dark: #8fd112;
  --pink: #ff5c8a;
  --yellow: #ffc933;
  --bg: #f6f4ff;
  --text: #1f1a3d;
  --muted: #625d85;
  --white: #fff;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(43, 31, 107, .12);
  --shadow-lg: 0 20px 50px rgba(27, 20, 70, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Rubik', 'Nunito', sans-serif; line-height: 1.15; margin: 0 0 .5em; color: inherit; }
p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { max-width: 100%; }
ul { padding: 0; margin: 0; list-style: none; }

.container { width: min(1180px, 100% - 40px); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 40px); }
.center { text-align: center; }
.hl { color: var(--violet); position: relative; white-space: nowrap; }
.hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .05em; height: .22em;
  background: var(--lime); z-index: -1; border-radius: 6px; transform: rotate(-1deg);
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.6em; border-radius: 999px; border: 0; cursor: pointer;
  font: 800 1rem/1 'Nunito', sans-serif; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .tab:focus-visible, summary:focus-visible, .burger:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 3px;
}
.btn--accent { background: var(--lime); color: var(--navy); box-shadow: 0 5px 0 var(--lime-dark); }
.btn--accent:hover { box-shadow: 0 7px 0 var(--lime-dark); }
.btn--accent:active { box-shadow: 0 2px 0 var(--lime-dark); }
.btn--primary { background: var(--violet); color: #fff; box-shadow: 0 5px 0 #5a3fd6; }
.btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 2px solid rgba(255, 255, 255, .35); }
.btn--ghost:hover { background: rgba(255, 255, 255, .22); }
.btn--ghost-dark { background: transparent; color: var(--violet); border: 2px solid var(--violet); }
.btn--ghost-dark:hover { background: var(--violet); color: #fff; }
.btn--small { padding: .7em 1.2em; font-size: .95rem; }
.btn--big { padding: 1.05em 2em; font-size: 1.1rem; }
.btn--full { width: 100%; }

.badge {
  display: inline-block; padding: .4em 1em; border-radius: 999px; font-weight: 800; font-size: .9rem;
  background: rgba(183, 243, 74, .18); color: var(--lime); border: 1px solid rgba(183, 243, 74, .4);
  margin-bottom: 1.2rem;
}
.badge--dark { background: rgba(124, 92, 255, .12); color: var(--violet); border-color: rgba(124, 92, 255, .35); }

/* ============ Header ============ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(27, 20, 70, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.header__inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font: 900 1.35rem/1 'Rubik', sans-serif; }
.logo__mark { font-size: 1.7rem; }
.logo b { color: var(--lime); margin-left: .25em; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 700; font-size: .98rem; transition: color .15s; }
.nav a:hover { color: var(--lime); }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
.burger span { display: block; width: 26px; height: 3px; background: #fff; border-radius: 2px; margin: 5px 0; transition: .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============ Hero ============ */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(124, 92, 255, .55), transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(255, 92, 138, .3), transparent 40%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  padding: 70px 0 90px;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 900; }
.hero .hl { color: var(--lime); }
.hero .hl::after { display: none; }
.lead { font-size: 1.2rem; color: rgba(255, 255, 255, .85); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.8rem 0; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; font-size: .95rem; color: rgba(255, 255, 255, .8); }

.float { position: absolute; font: 900 2.2rem 'Rubik', sans-serif; color: rgba(255, 255, 255, .08); animation: floaty 7s ease-in-out infinite; user-select: none; }
.float--1 { top: 12%; left: 4%; }
.float--2 { top: 62%; left: 8%; font-size: 3.5rem; animation-delay: -2s; }
.float--3 { top: 8%; left: 48%; animation-delay: -4s; }
.float--4 { top: 80%; left: 52%; animation-delay: -1s; }
.float--5 { top: 18%; right: 5%; font-size: 3rem; animation-delay: -3s; }
.float--6 { top: 85%; right: 8%; animation-delay: -5s; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(4deg); } }

/* player card */
.player-card {
  background: #fff; color: var(--text); border-radius: 28px; padding: 26px;
  box-shadow: var(--shadow-lg); transform: rotate(2deg); transition: transform .3s;
  max-width: 400px; margin-inline: auto;
}
.player-card:hover { transform: rotate(0); }
.player-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.monster svg { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.player-card__name { font: 800 1.2rem 'Rubik', sans-serif; }
.player-card__rank { color: var(--violet); font-weight: 700; font-size: .92rem; }
.xp__row { display: flex; justify-content: space-between; font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.xp__bar { height: 16px; background: #ece8ff; border-radius: 999px; overflow: hidden; }
.xp__fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--pink)); border-radius: 999px; transition: width .6s cubic-bezier(.3, 1.4, .5, 1); }
.badges { display: flex; gap: 10px; margin: 18px 0; }
.ach { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.4rem; background: #fff6d6; border: 2px solid var(--yellow); border-radius: 14px; }
.ach--locked { background: #f0eef8; border: 2px dashed #c9c4e2; filter: grayscale(1); opacity: .7; }
.ach.pop { animation: pop .5s; }
@keyframes pop { 0% { transform: scale(.3); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.player-card__hint { text-align: center; font-size: .85rem; color: var(--muted); margin: 12px 0 0; min-height: 1.4em; }
.floating-xp { position: fixed; z-index: 100; pointer-events: none; font: 900 1.4rem 'Rubik', sans-serif; color: var(--lime-dark); text-shadow: 0 2px 0 #fff; animation: rise 1s ease-out forwards; }
@keyframes rise { to { transform: translateY(-70px); opacity: 0; } }

/* ============ Stats ============ */
.stats { background: var(--navy); color: #fff; padding: 40px 0 20px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat__num { font: 900 clamp(2rem, 4vw, 3rem) 'Rubik', sans-serif; color: var(--lime); }
.stat__label { font-size: .95rem; color: rgba(255, 255, 255, .75); }
.stats__note { font-size: .78rem; color: var(--muted); opacity: .8; margin-top: 12px; }
.stats .stats__note { color: rgba(255, 255, 255, .45); }

/* ============ Sections ============ */
.section { padding: 90px 0; }
.section--dark { background: var(--navy); color: #fff; }
.section--dark .hl { color: var(--lime); }
.section--dark .hl::after { display: none; }
.section--soft { background: var(--bg); }
.section__title { text-align: center; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 900; }
.section__sub { text-align: center; color: var(--muted); font-size: 1.1rem; max-width: 620px; margin: 0 auto 2.5rem; }
.section--dark .section__sub { color: rgba(255, 255, 255, .7); }
.section__title--left, .section__sub--left { text-align: left; margin-left: 0; }
.hl { z-index: 0; }

/* tabs */
.tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.tab {
  padding: .8em 1.6em; border-radius: 999px; border: 2px solid var(--violet); background: #fff; color: var(--violet);
  font: 800 1rem 'Nunito', sans-serif; cursor: pointer; transition: .15s;
}
.tab.is-active { background: var(--violet); color: #fff; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards[hidden] { display: none; }
.card { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; margin: 0; }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(43, 31, 107, .18); }
.card h3 { font-size: 1.25rem; }
.card p { color: var(--muted); margin-bottom: 0; }

.subject { border-top: 6px solid var(--c); }
.subject p { margin-bottom: 14px; }
.tag { display: inline-block; font-size: .82rem; font-weight: 800; padding: .3em .9em; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, white); color: var(--navy); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 50px; counter-reset: s; }
.step { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); padding: 26px; }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.step__top .step__n { margin-bottom: 0; }
.step__pic { width: 64px; height: 64px; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(34, 228, 255, .35)); transition: transform .3s; }
.step:hover .step__pic { transform: translateY(-4px) rotate(-4deg); }
.step__n { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--navy); font: 900 1.3rem 'Rubik', sans-serif; margin-bottom: 14px; }
.step h3 { font-size: 1.2rem; }
.step p { color: rgba(255, 255, 255, .72); margin: 0; font-size: .97rem; }

/* quiz */
.quiz { background: #fff; color: var(--text); border-radius: 28px; padding: 30px; margin-bottom: 40px; box-shadow: var(--shadow-lg); }
.quiz__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.quiz__head h3 { margin: 0; font-size: 1.5rem; }
.hp { min-width: 220px; font-weight: 800; }
.hp__bar { height: 18px; background: #ffe0e8; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.hp__fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5c8a, #ff9a5c); transition: width .5s; }
.quiz__main { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.arena {
  position: relative; height: 220px; border-radius: 20px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(255, 92, 138, .35), transparent 62%), linear-gradient(160deg, #150f3d, #0d0a2a);
  border: 1px solid rgba(255, 92, 138, .5); box-shadow: inset 0 0 30px rgba(255, 92, 138, .2);
}
.arena__boss { width: 170px; height: 170px; animation: bob 2.6s ease-in-out infinite; }
.arena__boss svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px rgba(255, 92, 138, .55)); transition: filter .15s; }
.arena__ouch { display: none; }
.arena__boss.is-hit svg { animation: boss-hit .5s; filter: brightness(2.2) drop-shadow(0 0 20px #fff); }
.arena__boss.is-hit .arena__eyes, .arena__boss.is-dead .arena__eyes { display: none; }
.arena__boss.is-hit .arena__ouch, .arena__boss.is-dead .arena__ouch { display: inline; }
.arena__boss.is-laugh svg { animation: boss-laugh .6s; }
.arena__boss.is-dead { animation: none; }
.arena__boss.is-dead svg { animation: boss-die 1s forwards; }
@keyframes boss-hit { 0% { transform: none; } 20% { transform: translateX(-12px) rotate(-6deg); } 45% { transform: translateX(10px) rotate(5deg); } 70% { transform: translateX(-5px); } 100% { transform: none; } }
@keyframes boss-laugh { 0%, 100% { transform: none; } 25% { transform: translateY(-14px) scale(1.06, .94); } 50% { transform: translateY(0) scale(.96, 1.04); } 75% { transform: translateY(-8px); } }
@keyframes boss-die { 0% { transform: none; opacity: 1; } 30% { transform: rotate(-12deg) scale(1.1); filter: brightness(2.5); } 100% { transform: translateY(60px) rotate(25deg) scale(.4); opacity: 0; } }
.arena__fx { position: absolute; inset: 0; pointer-events: none; }
.arena__dmg { position: absolute; left: 50%; top: 30%; white-space: nowrap; transform: translateX(-50%); font: 900 1.8rem var(--mono); color: var(--yellow); text-shadow: 0 0 12px rgba(255, 201, 51, .8), 0 2px 0 #1b1446; animation: dmg-up .9s ease-out forwards; }
.arena__dmg--miss { color: #fff; font-size: 1.3rem; text-shadow: 0 0 10px rgba(255, 255, 255, .6); }
@keyframes dmg-up { from { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -6px) scale(1.2); } to { opacity: 0; transform: translate(-50%, -50px) scale(1); } }
.arena__slash { position: absolute; left: 50%; top: 50%; width: 180px; height: 8px; margin: -4px 0 0 -90px; border-radius: 999px; background: linear-gradient(90deg, transparent, #fff, var(--cyan), transparent); box-shadow: 0 0 16px var(--cyan); transform: rotate(-35deg) scaleX(0); animation: slash .35s ease-out forwards; }
.arena__slash + .arena__slash { transform: rotate(35deg) scaleX(0); animation-delay: .08s; }
@keyframes slash { 50% { opacity: 1; } to { transform: rotate(var(--r, -35deg)) scaleX(1); opacity: 0; } }
.arena__slash + .arena__slash { --r: 35deg; }
.arena__win { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; animation: pop .5s ease-out; }
.quiz__q { font: 700 1.25rem 'Rubik', sans-serif; margin-bottom: 16px; }
.quiz__answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.quiz__answers button {
  padding: 1em; border-radius: 16px; border: 2px solid #d9d3fa; background: #faf9ff; cursor: pointer;
  font: 800 1.05rem 'Nunito', sans-serif; color: var(--text); transition: .15s;
}
.quiz__answers button:hover:not(:disabled) { border-color: var(--violet); background: #f0ecff; }
.quiz__answers button.ok { background: #d9f7b0; border-color: var(--lime-dark); }
.quiz__answers button.bad { background: #ffd9e2; border-color: var(--pink); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.quiz__result { font-weight: 800; margin: 16px 0 0; min-height: 1.5em; color: var(--violet); }
.quiz__result .btn { margin-top: 10px; }

.feature__icon { font-size: 2.4rem; margin-bottom: 8px; }
.section--dark .feature h3 { color: var(--navy); }

/* ============ Parents ============ */
.parents { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.parents .section__sub { margin-bottom: 1.5rem; }
.checks { margin-bottom: 1.8rem; }
.checks li { position: relative; padding-left: 38px; margin-bottom: 14px; }
.checks li::before {
  content: '✓'; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--lime); color: var(--navy); font-weight: 900; font-size: .9rem;
}
.report { background: var(--bg); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); border: 2px dashed #cfc7fb; }
.report__head { font: 800 1.2rem 'Rubik', sans-serif; margin-bottom: 16px; }
.report__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e3ddfa; }
.up { color: #1fa05a; }
.report__bar { height: 12px; background: #e3ddfa; border-radius: 999px; overflow: hidden; margin: 16px 0; }
.report__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--lime)); border-radius: 999px; }
.report__note { background: #fff; border-radius: 14px; padding: 14px; font-size: .95rem; color: var(--muted); }
.section--dark .report { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); box-shadow: none; }
.section--dark .report__row { border-bottom-color: rgba(255, 255, 255, .15); }
.section--dark .report__note { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); }

/* ============ Students (весёлый блок) ============ */
.students { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.students .section__sub { margin-bottom: 1.5rem; }
.quests { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 12px; }
.quests li {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid #ece8ff; border-radius: 18px;
  padding: 12px 18px; transform: rotate(-.6deg); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.quests li:nth-child(even) { transform: rotate(.6deg); }
.quests li:hover { transform: translateY(-4px) rotate(0deg) scale(1.02); box-shadow: 0 12px 26px rgba(43, 31, 107, .16); border-color: var(--c); }
.quests__icon {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px;
  background: color-mix(in srgb, var(--c) 18%, white); font-size: 1.35rem;
}
.quests li b { display: block; font: 800 1rem 'Nunito', sans-serif; }
.quests li p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }

.quest-card {
  position: relative; overflow: hidden; background: linear-gradient(160deg, #fff, #f3efff);
  border-radius: 28px; padding: 28px; box-shadow: var(--shadow-lg); border: 2px solid #ece8ff;
}
.quest-card__photo {
  margin: -28px -28px 18px; height: 420px; overflow: hidden; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 88%, rgba(124, 92, 255, .22), transparent 62%), linear-gradient(160deg, #f6f4ff, #e9e2ff);
}
.quest-card__photo img { width: auto; height: auto; max-width: 74%; max-height: 97%; display: block; mix-blend-mode: multiply; }
.quest-card__confetti { position: absolute; top: 18px; right: 22px; font-size: 1.6rem; animation: bob 3s ease-in-out infinite; z-index: 1; }
.quest-card__level { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.quest-card__badge {
  flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center; font-size: 1.8rem; border-radius: 18px;
  background: linear-gradient(160deg, var(--violet), var(--cyan)); box-shadow: 0 5px 0 #5a3fd6;
}
.quest-card__title { font: 900 1.3rem 'Rubik', sans-serif; color: var(--navy); }
.quest-card__sub { color: var(--violet); font: 700 .8rem var(--mono); margin-top: 2px; }
.quest-card__row { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; font-weight: 800; color: var(--navy); }
.quest-card__achievements { display: flex; gap: 8px; margin-bottom: 16px; }
.quest-card__note { background: #fff; border-radius: 14px; padding: 14px; font-size: .95rem; color: var(--muted); border: 2px dashed #cfc7fb; }


/* prices */
.prices { align-items: stretch; }
.price { position: relative; display: flex; flex-direction: column; border: 2px solid #ece8ff; }
.price ul { margin: 16px 0 24px; flex: 1; }
.price li { padding: 8px 0 8px 28px; position: relative; color: var(--muted); }
.price li::before { content: '✔'; position: absolute; left: 0; color: var(--violet); font-weight: 900; }
.price__val { font: 900 2.4rem 'Rubik', sans-serif; color: var(--navy); }
.price__val small { font: 700 1rem 'Nunito', sans-serif; color: var(--muted); margin-left: 4px; }
.price { cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.price.is-selected { border-color: var(--violet); background: linear-gradient(180deg, #fff, #f3efff); transform: scale(1.04); box-shadow: 0 0 0 4px rgba(124, 92, 255, .2), var(--shadow); }
.price.is-selected:hover { transform: scale(1.04) translateY(-6px); }
.price:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.price__flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--pink); color: #fff; font-weight: 800; font-size: .82rem; padding: .35em 1.1em; border-radius: 999px; white-space: nowrap; }

/* reviews */
.review { display: flex; flex-direction: column; }
.review p { color: var(--text); flex: 1; }
.review footer { font-weight: 800; color: var(--violet); }
.stars { color: var(--yellow); font-size: 1.2rem; letter-spacing: 2px; margin-bottom: 8px; }
.section--soft .section__title { margin-bottom: 1.6rem; }

/* faq */
.faq details { background: #fff; border: 2px solid #ece8ff; border-radius: 18px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details:hover { border-color: var(--violet-light); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.faq details[open] { border-color: var(--violet); }
.faq summary { cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 800; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--violet); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details.is-closing summary::after { transform: translateY(-50%); }
.faq details p { padding: 0 22px 18px; margin: 0; color: var(--muted); }

/* signup */
.signup { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; }
.signup .hl { color: var(--lime); }
.signup .hl::after { display: none; }
.signup__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.signup h2 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 900; }
.signup__text > p { color: rgba(255, 255, 255, .8); font-size: 1.15rem; }
.signup__list li { margin: 10px 0; font-weight: 700; }
.form { background: #fff; color: var(--text); border-radius: 28px; padding: 32px; box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 800; font-size: .93rem; }
.form label[hidden] { display: none; }
.form input:not([type=checkbox]), .form select {
  padding: .9em 1em; border-radius: 14px; border: 2px solid #d9d3fa; font: 600 1rem 'Nunito', sans-serif; background: #faf9ff; color: var(--text);
}
.form input:focus, .form select:focus { outline: none; border-color: var(--violet); background: #fff; }
.form .invalid { border-color: var(--pink) !important; background: #fff5f8 !important; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .85rem; color: var(--muted); }
.form .check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--violet); }
.form .check a { color: var(--violet); }
.form__msg { margin: 0; text-align: center; font-weight: 800; min-height: 1.4em; }
.form__msg.ok { color: #1fa05a; }
.form__msg.err { color: var(--pink); }

/* footer */
.footer { background: #120d33; color: rgba(255, 255, 255, .75); padding: 50px 0 20px; font-size: .95rem; }
.footer__inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 30px; }
.footer__col { display: grid; gap: 8px; align-content: start; }
.footer__col b { color: #fff; margin-bottom: 4px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--lime); }
.footer__desc { margin-top: 12px; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 20px; font-size: .85rem; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .hero__inner, .parents, .students, .signup__inner { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .section { padding: 64px 0; }
  .price.is-selected { transform: none; }
  .price.is-selected:hover { transform: translateY(-6px); }
}
@media (max-width: 820px) {
  .burger { display: block; }
  .header__cta { display: none; }
  .nav {
    position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    background: var(--navy); padding: 8px 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cards, .cards--3, .steps { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 60px; }
  .hero__actions .btn { width: 100%; }
  .player-card { transform: none; }
  .footer__inner { grid-template-columns: 1fr; }
  .form { padding: 22px; }
  .quest-card__photo { height: 300px; }
  .quiz__main { grid-template-columns: 1fr; gap: 18px; }
  .arena { height: 180px; }
  .arena__boss { width: 140px; height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ Digital theme ============ */
:root {
  --cyan: #22e4ff;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --grid: linear-gradient(rgba(34, 228, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 228, 255, .07) 1px, transparent 1px);
}

/* сетка «как на мониторе» */
.hero::before, .section--dark::before, .signup::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grid); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
}
.section--dark, .signup { position: relative; overflow: hidden; }
.section--dark > .container, .signup > .container { position: relative; }

.header { border-bottom-color: rgba(34, 228, 255, .35); box-shadow: 0 1px 18px rgba(34, 228, 255, .12); }
.logo__text { letter-spacing: -.01em; }
.logo b { color: var(--cyan); text-shadow: 0 0 12px rgba(34, 228, 255, .6); }
.nav a { font-family: var(--mono); font-size: .88rem; }
.nav a::before { content: '/'; color: var(--cyan); opacity: .7; margin-right: 2px; }
.nav a:hover { color: var(--cyan); }

.float { font-family: var(--mono); color: rgba(34, 228, 255, .13); }

.badge { font-family: var(--mono); font-size: .82rem; color: var(--cyan); background: rgba(34, 228, 255, .1); border-color: rgba(34, 228, 255, .45); }
.badge--dark { color: var(--violet); background: rgba(124, 92, 255, .1); border-color: rgba(124, 92, 255, .4); }

/* мигающий курсор в заголовке */
.hero h1::after { content: '_'; color: var(--lime); animation: blink 1s steps(1) infinite; margin-left: 4px; }
@keyframes blink { 50% { opacity: 0; } }
.hero .hl { color: var(--lime); text-shadow: 0 0 22px rgba(183, 243, 74, .45); }

.btn--accent { box-shadow: 0 5px 0 var(--lime-dark), 0 0 22px rgba(183, 243, 74, .35); }
.btn--ghost { border-color: rgba(34, 228, 255, .55); color: var(--cyan); font-family: var(--mono); }
.btn--ghost:hover { background: rgba(34, 228, 255, .12); }

/* заголовок секции — «комментарий» над названием */
.section__title::before {
  content: '// section'; display: block; font: 700 .8rem var(--mono); letter-spacing: .08em;
  color: var(--violet); opacity: .8; margin-bottom: .6rem; text-transform: lowercase;
}
.section--dark .section__title::before, .signup h2::before { color: var(--cyan); }
.signup h2::before { content: '// join'; display: block; font: 700 .8rem var(--mono); letter-spacing: .08em; margin-bottom: .6rem; }
.section__title--left::before { content: '// parents'; }
#students .section__title::before { content: '// students'; }
#parents .section__title::before { content: '// parents'; }
#subjects .section__title::before { content: '// программа'; }
#game .section__title::before { content: '// gameplay'; }
#teachers .section__title::before { content: '// team'; }
#prices .section__title::before { content: '// pricing'; }
#reviews .section__title::before { content: '// feedback'; }
#faq .section__title::before { content: '// faq'; }

/* карточка игрока — тёмное стекло */
.player-card {
  background: linear-gradient(160deg, #150f3d, #0d0a2a); color: #ece9ff;
  border: 1px solid rgba(34, 228, 255, .45);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .4), 0 0 40px rgba(34, 228, 255, .22), var(--shadow-lg);
}
.player-card__rank { color: var(--cyan); font-family: var(--mono); font-size: .8rem; }
.xp__row { font-family: var(--mono); font-size: .85rem; }
.xp__bar { background: #241c5c; }
.xp__fill { background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink)); box-shadow: 0 0 12px rgba(34, 228, 255, .6); }
.ach { background: #221a55; border-color: rgba(255, 201, 51, .7); }
.ach--locked { background: #1a1442; border-color: #3b3178; }
.player-card__hint { color: #a9a3d6; font-family: var(--mono); font-size: .78rem; }

/* окно кода */
.code { background: #090622; border: 1px solid rgba(124, 92, 255, .5); border-radius: 12px; margin-bottom: 18px; overflow: hidden; }
.code__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #1a1442; }
.code__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5c8a; }
.code__bar i:nth-child(2) { background: #ffc933; }
.code__bar i:nth-child(3) { background: #4ade80; }
.code__bar span { margin-left: 8px; font: 500 .75rem var(--mono); color: #8b85c4; }
.code pre { margin: 0; padding: 12px 14px; font: 500 .82rem/1.6 var(--mono); color: #e6e3ff; overflow-x: auto; }
.code .k { color: #ff7ab2; }
.code .n { color: #ffc933; }
.code .s { color: var(--lime); }
.code .f { color: var(--cyan); }
.code .cur { display: inline-block; width: 8px; height: 1em; background: var(--cyan); vertical-align: -2px; margin-left: 3px; animation: blink 1s steps(1) infinite; }

/* статистика */
.stats { border-top: 1px solid rgba(34, 228, 255, .3); }
.stat__num { font-family: var(--mono); color: var(--cyan); text-shadow: 0 0 18px rgba(34, 228, 255, .5); }

/* карточки программы */
.subject { border-top: 0; background: linear-gradient(180deg, #fff, #f8f6ff); border: 1px solid #e3ddfa; position: relative; overflow: hidden; }
.subject::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 14px var(--c); }
.tag { font-family: var(--mono); font-size: .78rem; background: #120d33; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.tag::before { content: '> '; opacity: .7; }

.step__n { font-family: var(--mono); background: transparent; color: var(--cyan); border: 2px solid var(--cyan); box-shadow: 0 0 14px rgba(34, 228, 255, .4); border-radius: 12px; }
.step { border-color: rgba(34, 228, 255, .2); }

.quiz { border: 1px solid rgba(34, 228, 255, .4); box-shadow: 0 0 40px rgba(34, 228, 255, .15), var(--shadow-lg); }
.quiz__q { font-family: var(--mono); font-size: 1.05rem; }
.quiz__answers button { font-family: var(--mono); font-size: .95rem; }

.price__val { font-family: var(--mono); }
.cards--4 .price__val { font-size: 1.9rem; }
.footer { border-top: 1px solid rgba(34, 228, 255, .3); }
.footer__col b { font-family: var(--mono); color: var(--cyan); }

@media (max-width: 620px) {
  .section__title::before { font-size: .72rem; }
}

/* ============ Teacher cards (как карточка в hero) ============ */
.section--dark .stats__note { color: rgba(255, 255, 255, .45); }
.card.teacher {
  background: linear-gradient(160deg, #150f3d, #0d0a2a); color: #ece9ff; text-align: left;
  border: 1px solid rgba(34, 228, 255, .45); position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .4), 0 0 40px rgba(34, 228, 255, .18), var(--shadow-lg);
}
.card.teacher::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--c), var(--cyan)); box-shadow: 0 0 14px var(--c);
}
.card.teacher:hover { box-shadow: 0 0 0 1px var(--c), 0 0 50px color-mix(in srgb, var(--c) 45%, transparent), var(--shadow-lg); }
.teacher__photo { margin: -28px -28px 18px; height: 260px; overflow: hidden; }
.teacher__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teacher__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.teacher__top .monster svg { display: block; }
.teacher__name { font: 800 1.2rem 'Rubik', sans-serif; color: #fff; }
.teacher__rank { color: var(--cyan); font: 700 .8rem var(--mono); margin: 2px 0 6px; }
.teacher__role { display: inline-block; font: 500 .74rem var(--mono); color: #cfc9ff; background: rgba(124, 92, 255, .2); border: 1px solid rgba(124, 92, 255, .45); border-radius: 12px; padding: .2em .8em; }
.teacher__skills { display: grid; gap: 10px; margin-bottom: 16px; }
.teacher .xp__row { color: #cfc9ff; margin-bottom: 4px; }
.teacher .xp__fill { width: var(--w); background: linear-gradient(90deg, var(--c), var(--cyan)); box-shadow: 0 0 12px var(--c); }
.teacher.reveal:not(.in) .xp__fill { width: 0; }
.teacher .badges { margin: 0 0 16px; }
.card.teacher .teacher__text { color: #b9b4e6; margin: 0; font-size: .96rem; }
.code .c { color: #6f69a8; }

/* ============ Boss cards ============ */
.boss {
  position: relative; height: 170px; margin: -6px -6px 18px; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 45%, transparent), transparent 62%),
    var(--grid), linear-gradient(160deg, #150f3d, #0d0a2a);
  background-size: auto, 26px 26px, auto;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--c) 25%, transparent);
}
.boss svg { width: 132px; height: 132px; margin-top: -4px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 60%, transparent)); animation: bob 3s ease-in-out infinite; }
.subject:nth-child(2n) .boss svg { animation-delay: -1s; }
.subject:nth-child(3n) .boss svg { animation-delay: -2s; }
.boss__tag { position: absolute; top: 10px; left: 12px; font: 700 .68rem var(--mono); letter-spacing: .12em; color: var(--c); border: 1px solid var(--c); border-radius: 6px; padding: .15em .55em; background: rgba(9, 6, 34, .6); }
.boss__hp { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.boss__hp i { display: block; width: var(--hp); height: 100%; background: linear-gradient(90deg, var(--pink), var(--c)); border-radius: 999px; box-shadow: 0 0 10px var(--c); }

/* ============ Inner pages (программы, преподаватели) ============ */
.page-hero { padding: 64px 0 56px; }
.page-hero .breadcrumb { display: inline-flex; align-items: center; gap: 6px; font: 700 .85rem var(--mono); color: rgba(255, 255, 255, .6); margin-bottom: 18px; }
.page-hero .breadcrumb a { color: var(--cyan); text-decoration: none; }
.page-hero .breadcrumb a:hover { text-decoration: underline; }
.page-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 900; margin: 0 0 14px; }
.page-hero p.lead { max-width: 680px; color: rgba(255, 255, 255, .78); font-size: 1.08rem; }
.page-hero .badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.prog-section { background: #fff; border: 1px solid #e3ddfa; border-top: 6px solid var(--c); border-radius: var(--radius); padding: 28px; margin-bottom: 22px; box-shadow: var(--shadow); }
.prog-section h3 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; margin: 0; }
.prog-section__num { font: 800 .85rem var(--mono); color: var(--c); border: 2px solid var(--c); border-radius: 10px; padding: .25em .6em; }
.prog-section__meta { font: 700 .85rem var(--mono); color: var(--muted); margin: 8px 0 0; }
.topic-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.topic-list li { padding: 12px 16px; background: var(--bg); border-radius: 12px; font-size: .94rem; line-height: 1.55; color: var(--text); }
.topic-list li b { display: inline-block; min-width: 40px; margin-right: 8px; font: 800 .78rem var(--mono); color: var(--violet); background: #fff; border-radius: 6px; padding: .15em .5em; }

.kim-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 8px; }
.kim-table { width: 100%; border-collapse: collapse; background: #fff; color: var(--text); min-width: 640px; } /* своя тёмная краска: таблица бывает в .section--dark с белым текстом */
.kim-table th, .kim-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #ece8ff; font-size: .9rem; vertical-align: top; }
.kim-table th { background: var(--navy); color: #fff; font: 800 .74rem var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.kim-table tbody tr:last-child td { border-bottom: none; }
.kim-table tbody tr:hover td { background: #faf9ff; }
.kim-table td.num { font: 800 .9rem var(--mono); color: var(--violet); }
.kim-table td.mono { font-family: var(--mono); font-size: .85rem; color: var(--muted); white-space: nowrap; }

/* пример задания КИМ: кнопка в строке таблицы и разворачивающаяся строка с условием и ответом */
.kim-ex__toggle {
  margin-left: 6px; padding: .2em .75em; border: 2px solid var(--violet); border-radius: 999px; background: #fff;
  color: var(--violet); font: 800 .74rem var(--mono); cursor: pointer; white-space: nowrap; vertical-align: 1px;
}
.kim-ex__toggle::after { content: ' ▾'; }
.kim-ex__toggle[aria-expanded="true"] { background: var(--violet); color: #fff; }
.kim-ex__toggle[aria-expanded="true"]::after { content: ' ▴'; }
.kim-table tbody tr.kim-ex td, .kim-table tbody tr.kim-ex:hover td { padding: 0; background: #f6f3ff; }
.kim-ex__wrap { overflow: hidden; } /* анимируется по высоте, поэтому отступы — у вложенного блока */
.kim-ex__box { margin: 12px 14px 16px; border-left: 4px solid var(--violet); padding: 2px 0 2px 16px; max-width: 780px; }
.kim-ex__text { white-space: pre-wrap; line-height: 1.55; font-size: .92rem; }
.kim-ex__text + .kim-ex__text, .kim-code + .kim-ex__text, .kim-ex__text + .kim-code { margin-top: 10px; }
/* вкладки «Вариант 1/2/3» над примером */
.kim-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kim-tabs__tab {
  padding: .35em .95em; border: 2px solid #ddd5ff; border-radius: 999px; background: #fff;
  color: var(--navy); font: 800 .8rem var(--mono); cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.kim-tabs__tab:hover { border-color: var(--violet); }
.kim-tabs__tab[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.kim-tabs__tab:focus-visible { outline: 3px solid rgba(124, 92, 255, .35); outline-offset: 2px; }
.kim-pane[hidden] { display: none; }
/* значок «нужен компьютер» в тексте задания и подсказка над ним */
.pc-badge {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 2px;
  border-radius: 8px; background: #dcf6ff; color: #0f7fa3; vertical-align: -7px; cursor: help;
}
.pc-badge::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 2;
  padding: 6px 10px; border-radius: 8px; background: var(--navy); color: #fff; font: 700 .78rem/1.2 var(--mono);
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s;
}
.pc-badge::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 2px); z-index: 2; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--navy);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.pc-badge:hover::after, .pc-badge:focus::after { opacity: 1; transform: translate(-50%, 0); }
.pc-badge:hover::before, .pc-badge:focus::before { opacity: 1; }
.pc-badge:focus-visible { outline: 3px solid rgba(15, 127, 163, .35); outline-offset: 2px; }
.pc-badge--legend { cursor: default; } /* в легенде под таблицей — без подсказки */
.pc-badge--legend::before, .pc-badge--legend::after { display: none; }
/* картинка в условии/решении: строка ![подпись](assets/img/...) в тексте из CMS */
.kim-fig { margin: 10px 0 0; }
.kim-fig img { display: block; max-width: 100%; height: auto; border: 2px solid #ece8ff; border-radius: 12px; background: #fff; }
.kim-fig + .kim-ex__text, .kim-fig + .kim-code { margin-top: 10px; }
.kim-code {
  margin: 10px 0 0; padding: 12px 16px; overflow-x: auto; background: var(--navy); color: #e8e4ff;
  border-radius: 12px; font: .82rem/1.6 var(--mono); white-space: pre;
}
.kim-ex__answer { margin-top: 12px; overflow: hidden; }
.kim-ex__answer summary { cursor: pointer; font-weight: 800; color: var(--violet); list-style: none; }
.kim-ex__answer summary::-webkit-details-marker { display: none; }
.kim-ex__answer summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform .25s; }
.kim-ex__answer[open] summary::before { transform: rotate(90deg); }
.kim-ex__answer.is-closing summary::before { transform: none; }
.kim-ex__solution { margin-top: 10px; padding: 12px 16px; background: #fff; border-radius: 12px; }
.kim-ex__result { margin: 10px 0 2px; font-size: .95rem; }
.kim-ex__result b { font-family: var(--mono); color: var(--violet); }
.kim-ex[hidden] { display: none; }
.lvl { display: inline-block; font: 800 .72rem var(--mono); padding: .28em .7em; border-radius: 999px; white-space: nowrap; }
.lvl--b { background: #e3f9d5; color: #237a3a; }
.lvl--p { background: #dcf6ff; color: #0f7fa3; }
.lvl--v { background: #ffe0ec; color: #c22461; }

.source-note { background: var(--bg); border: 2px dashed #cfc7fb; border-radius: 18px; padding: 18px 22px; font-size: .92rem; color: var(--muted); margin-top: 28px; }
.source-note a { color: var(--violet); font-weight: 800; }

.cta-strip { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; border-radius: var(--radius); padding: 36px; text-align: center; margin-top: 40px; }
.cta-strip h3 { font-size: 1.5rem; margin: 0 0 10px; }
.cta-strip p { color: rgba(255, 255, 255, .75); margin: 0 0 20px; }

@media (max-width: 620px) {
  .prog-section { padding: 20px; }
}

/* /prepodavateli: 3 карточки в ряд на всю ширину (~33%), на планшете — 2, на телефоне — по одной */
.teachers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.teacher--full { display: flex; flex-direction: column; }
.teacher--full .teacher__photo { height: 280px; }
.teacher--full .teacher__text { margin-bottom: 14px; font-size: .92rem; }
.teacher--full > .btn { margin-top: auto; align-self: stretch; text-align: center; }
@media (max-width: 960px) { .teachers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .teachers-grid { grid-template-columns: 1fr; }
  .teacher--full .teacher__photo { height: 320px; }
}

.prog-links { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
.prog-links__item[hidden] { display: none; }
/* яркая карточка-ссылка на подробную программу: фиолетовый градиент, теги и лаймовая кнопка */
.prog-links__item {
  position: relative; display: flex; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(120deg, var(--violet) 0%, var(--navy-2) 70%, var(--navy) 100%); color: #fff;
  text-decoration: none; box-shadow: var(--shadow-lg); transition: transform .2s, box-shadow .2s;
}
.prog-links__item::after { /* мягкое свечение в углу */
  content: ''; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 243, 74, .35), transparent 70%); pointer-events: none;
}
.prog-links__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px;
  background: rgba(255, 255, 255, .14); font-size: 2.1rem;
}
.prog-links__body { flex: 1; display: grid; gap: 6px; }
.prog-links__title { font: 900 1.4rem/1.2 'Rubik', sans-serif; }
.prog-links__text { color: rgba(255, 255, 255, .82); font-weight: 600; line-height: 1.45; }
.prog-links__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.prog-links__tags i { font: 800 .74rem var(--mono); font-style: normal; padding: .35em .8em; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; }
.prog-links__tags i:last-child { background: var(--lime); color: var(--navy); }
.prog-links__go {
  position: relative; z-index: 1; flex: 0 0 auto; padding: .85em 1.4em; border-radius: 999px;
  background: var(--lime); color: var(--navy); font: 900 1rem 'Rubik', sans-serif; box-shadow: 0 5px 0 var(--lime-dark);
  transition: transform .2s;
}
.prog-links__item:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(124, 92, 255, .45); }
.prog-links__item:hover .prog-links__go { transform: translateX(4px); }
.prog-links__item:focus-visible { outline: 4px solid rgba(124, 92, 255, .45); outline-offset: 3px; }
@media (max-width: 620px) {
  .prog-links__item { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
  .prog-links__icon { width: 56px; height: 56px; font-size: 1.7rem; }
  .prog-links__title { font-size: 1.2rem; }
  .prog-links__go { align-self: stretch; text-align: center; }
}

.checks a { color: inherit; text-decoration-color: var(--lime); }

/* уведомление после отправки заявки */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1000; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 14px 22px; border-radius: 16px;
  background: var(--navy); color: #fff; font-weight: 800; box-shadow: var(--shadow-lg);
  border-left: 5px solid var(--lime); animation: toast-in .3s ease-out; transition: opacity .4s, transform .4s;
}
.toast--err { border-left-color: var(--pink); }
.toast--hide { opacity: 0; transform: translate(-50%, 12px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* юридические страницы */
.legal { font-size: 1.02rem; line-height: 1.65; }
.legal h2 { font-size: 1.35rem; margin: 36px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a, .legal__link { color: var(--violet); font-weight: 700; }
.legal__link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.legal__table { overflow-x: auto; margin: 16px 0; }
.legal__table table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.legal__table th, .legal__table td { border: 1px solid #e3ddff; padding: 10px 12px; text-align: left; vertical-align: top; }
.legal__table th { background: var(--bg); }
.legal__todo { background: #fff3b0; color: #6b4e00; padding: 0 .2em; border-radius: 4px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; opacity: .8; }

/* баннер cookie */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999; margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 18px;
  background: #fff; color: var(--text); box-shadow: var(--shadow-lg); border: 2px solid #ece8ff;
}
.cookie p { margin: 0; font-size: .92rem; color: var(--muted); }
.cookie a { color: var(--violet); font-weight: 700; }
.cookie__btns { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 640px) {
  .cookie { flex-direction: column; align-items: stretch; }
  .cookie__btns { flex-direction: column; }
}

/* онлайн-чат: пузыри сообщений (и на сайте, и в админке) */
.chat-msg { max-width: 85%; align-self: flex-start; }
.chat-msg p { margin: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.chat-msg time { display: block; margin: 3px 6px 0; color: var(--muted); font-size: .75rem; }
.chat-msg--me { align-self: flex-end; text-align: right; }
.chat-msg--me p { background: var(--violet); color: #fff; border-radius: 16px 16px 4px 16px; text-align: left; }

/* онлайн-чат: виджет на сайте */
.chatw { position: fixed; right: 20px; bottom: 20px; z-index: 990; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chatw__btn {
  position: relative; height: 60px; padding: 0 24px 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; gap: 12px; font-family: 'Nunito', sans-serif;
  background: var(--violet); color: #fff; box-shadow: 0 10px 26px rgba(124, 92, 255, .45); transition: transform .15s;
  animation: chatw-nudge 7s ease-in-out 4s infinite; /* раз в 7 секунд — короткое покачивание, чтобы кнопку заметили */
}
.chatw__btn:hover { transform: translateY(-2px); animation-play-state: paused; }
.chatw__btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.chatw__label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; white-space: nowrap; }
.chatw__label b { font-size: 1rem; font-weight: 800; }
.chatw__label small { font-size: .78rem; font-weight: 700; opacity: .9; display: flex; align-items: center; gap: 6px; }
.chatw__label small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(183, 243, 74, .3); }
.chatw__short { display: none; }
/* открыт чат или диалог уже начат — кнопка снова круглая и спокойная */
.chatw.is-open .chatw__btn, .chatw.is-started .chatw__btn { width: 60px; padding: 0; justify-content: center; animation: none; }
.chatw.is-open .chatw__label, .chatw.is-started .chatw__label { display: none; }
.chatw.is-open .chatw__btn { background: var(--navy); }
@keyframes chatw-nudge {
  0%, 82%, 100% { transform: none; box-shadow: 0 10px 26px rgba(124, 92, 255, .45); }
  85% { transform: rotate(-4deg) scale(1.04); }
  88% { transform: rotate(4deg) scale(1.04); box-shadow: 0 10px 26px rgba(124, 92, 255, .45), 0 0 0 8px rgba(124, 92, 255, .18); }
  91% { transform: rotate(-3deg); }
  94% { transform: rotate(2deg); box-shadow: 0 10px 26px rgba(124, 92, 255, .45), 0 0 0 14px rgba(124, 92, 255, 0); }
  97% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .chatw__btn { animation: none; } }
.chatw__badge {
  position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; border: 2px solid #fff;
  background: var(--pink); color: #fff; font: 800 .75rem/18px 'Nunito', sans-serif; font-style: normal;
}
.chatw__panel {
  width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; animation: chatw-in .2s ease-out;
}
.chatw__panel[hidden] { display: none; }
@keyframes chatw-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.chatw__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--navy); color: #fff; }
.chatw__head b { display: block; font-family: 'Rubik', sans-serif; }
.chatw__head small { display: block; color: rgba(255, 255, 255, .7); font-size: .8rem; }
.chatw__ava { font-size: 1.8rem; }
.chatw__close { margin-left: auto; background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; border-radius: 10px; }
.chatw__close:hover { background: rgba(255, 255, 255, .1); }
.chatw__close svg { width: 20px; height: 20px; display: block; }
.chatw__msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; overscroll-behavior: contain; }
.chatw__form { display: grid; gap: 8px; padding: 12px; border-top: 1px solid #ece8ff; }
.chatw__form input[name="name"], .chatw__form textarea { font: inherit; width: 100%; padding: .6em .9em; border: 2px solid #dcd6ff; border-radius: 14px; background: #fff; resize: none; }
.chatw__form input:focus, .chatw__form textarea:focus { outline: none; border-color: var(--violet); }
.chatw__intro { display: grid; gap: 8px; }
.chatw.is-started .chatw__intro { display: none; }
.chatw__agree[hidden] { display: none; }
@media (min-width: 481px) { .chatw__intro { display: none; } }
.chatw__agree { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--muted); }
.chatw__agree a { color: var(--violet); font-weight: 700; }
.chatw__agree input { margin-top: 3px; accent-color: var(--violet); }
.chatw__trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.chatw__row { display: flex; gap: 8px; align-items: flex-end; }
.chatw__send { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--violet); color: #fff; cursor: pointer; display: grid; place-items: center; }
.chatw__send:hover { background: #6a48f5; }
.chatw__send svg { width: 20px; height: 20px; }
.chatw__err { margin: 0; color: #d12a5a; font-size: .85rem; font-weight: 700; }
.chatw__btn:focus-visible, .chatw__send:focus-visible, .chatw__close:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
@media (max-width: 480px) {
  .chatw { right: 12px; bottom: 12px; }
  /* на телефоне — компактная «таблетка» с короткой подписью, не перекрывает контент */
  .chatw__btn { height: 52px; padding: 0 18px 0 14px; gap: 8px; }
  .chatw__btn svg { width: 22px; height: 22px; }
  .chatw__label b, .chatw__label small { display: none; }
  .chatw__short { display: block; font-size: .92rem; font-weight: 800; }
  .chatw.is-started .chatw__btn { width: 52px; }
  /* на телефоне чат на весь экран, закрывается крестиком в шапке */
  .chatw__panel { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .chatw__head { padding-top: max(14px, env(safe-area-inset-top)); }
  .chatw__form { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chatw__close { padding: 10px; }
  .chatw__close svg { width: 24px; height: 24px; }
  .chatw.is-open .chatw__btn { display: none; }
  body.chat-open { overflow: hidden; }
}

/* первый визит: выбор «родитель / ученик» */
.role {
  position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px;
  background: rgba(27, 20, 70, .6); backdrop-filter: blur(4px); animation: role-fade .2s ease-out;
}
.role__card {
  position: relative; width: min(440px, 100%); padding: 32px 28px 28px; border-radius: 28px; text-align: center;
  background: #fff; color: var(--text); box-shadow: var(--shadow-lg); animation: chatw-in .25s ease-out;
}
.role__card h2 { font-size: 1.6rem; margin-bottom: .3em; }
.role__card p { color: var(--muted); margin-bottom: 1.4em; }
.role__mark { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: 10px; }
.role__close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: none; color: var(--muted); font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.role__close:hover { background: var(--bg); }
.role__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role__btn {
  display: grid; gap: 6px; justify-items: center; padding: 18px 10px; border-radius: 20px; cursor: pointer;
  border: 2px solid #ece8ff; background: var(--bg); color: var(--navy); font: 800 1.05rem 'Nunito', sans-serif;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.role__btn span { font-size: 2rem; line-height: 1; }
.role__btn:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: var(--shadow); }
.role__btn:focus-visible, .role__close:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
@keyframes role-fade { from { opacity: 0; } }

/* где мы: карта с карточкой адреса поверх (как на inordic.ru) и лицензия */
.place { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 2px solid #ece8ff; background: #e9e6f5; }
.place__map { display: block; width: 100%; height: 540px; border: 0; }
/* фирменный маркер на карте: «капля» в цветах бренда с монстром и пульсирующим кругом у основания;
   разметка — шаблон Placemark в main.js, точка привязки (0,0) — кончик капли */
.map-pin { position: absolute; left: -28px; top: -68px; width: 56px; height: 68px; pointer-events: none; }
.map-pin__body {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--violet-light), var(--violet) 55%, var(--navy-2));
  border: 3px solid var(--lime); box-shadow: 0 8px 20px rgba(27, 20, 70, .45);
}
.map-pin__face { transform: rotate(45deg); font-size: 1.6rem; line-height: 1; }
.map-pin__pulse {
  position: absolute; left: 50%; bottom: -5px; width: 22px; height: 10px; margin-left: -11px;
  border-radius: 50%; background: rgba(183, 243, 74, .55); animation: map-pin-pulse 1.8s ease-out infinite;
}
@keyframes map-pin-pulse {
  from { transform: scale(.6); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map-pin__pulse { animation: none; } }
.place__card {
  position: absolute; top: 24px; left: 24px; width: min(340px, calc(100% - 48px)); padding: 22px;
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
}
.place__title { font: 800 1.25rem 'Rubik', sans-serif; margin-bottom: 14px; color: var(--navy); }
.place__items { display: grid; gap: 10px; margin-bottom: 18px; }
.place__items li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: .95rem; line-height: 1.35; }
.place__items a { text-decoration: none; }
.place__items a:hover { color: var(--violet); }
.place__icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--bg); font-size: 1rem; }
/* как добраться — чипы над картой: станции метро (кружок с номером линии её цветом) и вокзалы */
.getthere { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.getthere li {
  display: flex; align-items: center; gap: 4px; padding: 8px 14px 8px 10px;
  background: #fff; border: 2px solid #ece8ff; border-radius: 999px; font-weight: 700; font-size: .92rem; line-height: 1.3;
}
.getthere small { margin-left: 4px; color: var(--muted); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.getthere__icon { margin-right: 4px; font-size: 1rem; }
.metro__l { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font: 800 .7rem/1 'Rubik', sans-serif; }
.metro__l + .metro__l { margin-left: -2px; }
.metro__l:last-of-type { margin-right: 4px; }
.license {
  display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 20px 24px;
  background: #fff; border-radius: var(--radius); border: 2px dashed #cfc7fb;
}
.license__img { flex: 0 0 auto; display: block; width: 56px; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s; }
.license__img:hover { transform: scale(1.06); }
.license__img img { display: block; width: 100%; height: auto; }
.license__text { flex: 1; }
.license__text b { display: block; font: 800 1.1rem 'Rubik', sans-serif; color: var(--navy); }
.license__text p { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.license .btn { flex-shrink: 0; }
@media (max-width: 720px) {
  .place__map { height: 300px; }
  .place__card { position: static; width: auto; border-radius: 0; box-shadow: none; }
  .license { flex-direction: column; align-items: flex-start; }
  .license .btn { width: 100%; }
  .license__img { width: 100%; border-radius: 12px; }
  .license__img:hover { transform: none; }
}

/* фото школы: сетка под картой, на телефоне — лента с прокруткой */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; margin-top: 24px; }
.gallery[hidden] { display: none; }
.gallery__item {
  position: relative; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in;
  background: #e9e6f5; box-shadow: var(--shadow);
}
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; text-align: left;
  background: linear-gradient(transparent, rgba(27, 20, 70, .8)); color: #fff; font-weight: 800; font-size: .88rem;
}
@media (max-width: 720px) {
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -20px; padding: 0 20px 6px; }
  .gallery__item, .gallery__item:first-child { flex: 0 0 80%; aspect-ratio: 4 / 3; scroll-snap-align: center; }
}
.lightbox { position: fixed; inset: 0; z-index: 1002; display: grid; place-items: center; padding: 56px 16px; background: rgba(15, 10, 40, .92); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 16px; display: block; margin: 0 auto; }
.lightbox figcaption { color: #fff; font-weight: 700; margin-top: 12px; }
.lightbox__close, .lightbox__nav {
  position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  width: 48px; height: 48px; border-radius: 14px; font-size: 2rem; line-height: 1;
}
.lightbox__close { top: 14px; right: 14px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 3px solid var(--lime); }
body.lightbox-open { overflow: hidden; }

/* старт групп: карточки с плашкой как у тарифов */
.starts { margin-top: 10px; }
.starts__more { margin: 28px 0 0; }
.teachers__more { margin: 36px 0 0; } /* отступ от карточек преподавателей на главной до кнопки «Все преподаватели» */
.start { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 30px; }
.start h3 { margin: 0; font-size: 1.3rem; }
.start__who { align-self: flex-start; padding: .25em .8em; border-radius: 999px; background: var(--bg); color: var(--violet); font-weight: 800; font-size: .85rem; }
.start__facts { display: grid; align-content: start; gap: 8px; margin: 4px 0 8px; flex: 1; }
.start__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e3ddfa; }
.start__facts dt { color: var(--muted); }
.start__facts dd { margin: 0; font-weight: 800; text-align: right; }

/* ===== Ссылки на страницы заданий в таблице КИМ и страница задания /ege-po-informatike/zadanie-N ===== */
.kim-link { color: inherit; text-decoration: none; border-bottom: 1px dashed #cfc7fb; }
.kim-link:hover { color: var(--violet); border-bottom-color: var(--violet); }
/* ряд над примером в таблице КИМ: вкладки «Вариант 1/2/3» и ссылка на страницу задания */
.kim-ex__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.kim-ex__bar .kim-tabs { margin-bottom: 0; }
.kim-ex__all { font: 800 .78rem var(--mono); color: var(--violet); white-space: nowrap; text-decoration: none; padding: .45em .2em; }
.kim-ex__all:hover { text-decoration: underline; }

/* «Поделиться» (components/share.php) */
.share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; max-width: 860px; margin: 28px auto; text-align: center; }
.share__title { font-weight: 800; color: var(--text); }
.share__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.share__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: .55em 1em; border-radius: 999px; border: 2px solid transparent;
  font: 800 .88rem 'Nunito', sans-serif; color: #fff; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s;
}
.share__btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.share__btn--tg { background: #229ed9; }
.share__btn--vk { background: #0077ff; }
.share__btn--wa { background: #25d366; }
.share__btn--copy { background: #fff; color: var(--violet); border-color: #d9d3fa; }
.share__btn--copy.is-done { border-color: var(--violet); }
.share__btn:focus-visible { outline: 3px solid rgba(124, 92, 255, .35); outline-offset: 2px; }
@media (max-width: 480px) { .share__btn { padding: .55em .85em; font-size: .82rem; } }
.task-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.task-facts div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 14px; padding: 10px 16px; }
.task-facts dt { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.task-facts dd { margin: 2px 0 0; font-weight: 800; color: #fff; }
/* пример на странице задания — на всю ширину колонки */
.task-example { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 30px; margin: 0 0 22px; }
.task-example h2 { font-size: 1.25rem; margin: 0 0 12px; }
.task-example .kim-ex__box { margin: 0; max-width: none; }
@media (max-width: 620px) { .task-example { padding: 20px 18px; } }

/* соседние задания (components/task-nav.php): карточки «← Предыдущее» / «Следующее →», по центру — все задания */
.task-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; margin: 0 0 32px; }
.task-nav__item {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 20px; border-radius: 18px;
  background: #fff; border: 2px solid #e3ddfa; box-shadow: var(--shadow); color: var(--text); text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.task-nav__item:hover { transform: translateY(-2px); border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 92, 255, .12), var(--shadow); }
.task-nav__item--next { text-align: right; align-items: flex-end; }
.task-nav__item--empty { visibility: hidden; }
.task-nav__dir { font: 800 .72rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--violet); }
.task-nav__num { font: 900 1.2rem 'Rubik', sans-serif; }
.task-nav__topic { max-width: 100%; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-nav__all {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; border-radius: 18px;
  background: var(--violet); color: #fff; font: 800 .8rem var(--mono); text-decoration: none; box-shadow: 0 5px 0 #5a3fd6; transition: transform .15s;
}
.task-nav__all:hover { transform: translateY(-2px); }
.task-nav__item:focus-visible, .task-nav__all:focus-visible { outline: 3px solid rgba(124, 92, 255, .35); outline-offset: 2px; }
.task-example + .task-nav, #taskExamples > .section__sub + .task-nav { margin: 30px 0 0; } /* нижняя — отступ сверху, не снизу */
@media (max-width: 720px) {
  /* телефон: «назад» и «вперёд» в ряд, без темы; «Все задания» — строкой под ними */
  .task-nav { grid-template-columns: 1fr 1fr; gap: 10px; }
  .task-nav__all { grid-column: 1 / -1; grid-row: 2; flex-direction: row; padding: 10px; box-shadow: 0 4px 0 #5a3fd6; }
  .task-nav__item { padding: 12px 14px; }
  .task-nav__topic { display: none; }
  .task-nav__num { font-size: 1.05rem; }
}
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
.task-grid a { display: block; text-align: center; padding: 10px 0; border-radius: 12px; border: 2px solid #e3ddfa; background: #fff; font: 800 .95rem var(--mono); color: var(--text); text-decoration: none; }
.task-grid a:hover, .task-grid a[aria-current] { border-color: var(--violet); color: var(--violet); }
.task-grid a[aria-current] { background: #f3efff; }
.notfound { text-align: center; }
.notfound .btn { margin: 6px; }