/* Тест на уровень чешского. Токены те же, что у /czech/start/ и приложения Choice. */
:root {
  --bg: #F5F6F8;
  --card: #FFFFFF;
  --ink: #111114;
  --ink-2: #3A3C44;
  --muted: #696B73;
  --line: #E7E8EC;
  --orange: #FF6A13;
  --orange-soft: #FFF0E6;
  --pink: #FF5FA2;
  --grad: linear-gradient(90deg, #FF7A1A 0%, #FF8A3D 45%, #FF5FA2 100%);
  --green: #16B97A;
  --green-soft: #E6F7EF;
  --red: #E5484D;
  --red-soft: #FDECEC;
  --indigo: #5558DE;
  --indigo-soft: #ECEBFD;
  --btn: linear-gradient(180deg, #3A3A3E 0%, #111114 100%);
  --radius-l: 28px;
  --radius-m: 20px;
  --radius-s: 14px;
  --shadow: 0 1px 2px rgba(17,17,20,.04), 0 8px 24px rgba(17,17,20,.06);
  --font: "Geist Variable", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1160px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.025em; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
i[lang="cs"] { font-style: normal; font-weight: 500; }

.container { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.container.narrow { max-width: 720px; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px;
  border-radius: 999px; border: 0; cursor: pointer;
  font: 500 17px/1 var(--font); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
  background: var(--btn); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(17,17,20,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(17,17,20,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.btn-ghost:hover { background: #F8F9FB; }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 15px; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.link-btn { background: none; border: 0; padding: 8px 4px; font: 500 15px/1.3 var(--font); color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }

/* ---------- шапка ---------- */
/* Only the logo, centred over the centred hero; it scrolls away with the page. */
.header { position: relative; z-index: 1; }
.header .row { display: flex; align-items: center; justify-content: center; height: 64px; }
.header .logo img { width: 96px; height: auto; }

/* ---------- фон и hero ---------- */
/* The gradient belongs to the top of the page, not to the hero: it starts at the very top behind
   the logo and keeps its height when the hero shrinks during the test, so the question card lies on
   its lower part. It fades out towards the bottom instead of ending at an edge. */
.page-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 900px; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
main { position: relative; z-index: 1; }
.orb { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.orb.soft { filter: blur(34px) saturate(.9); opacity: .42; }
/* The blurred orbs are drawn in CSS: tilted ellipses in the colours of the landing's orb images, which
   weighed 186 KB, more than half the page, and one of which counted as the page's largest paint. The
   boxes keep the images' sizes and proportions, capped at the screen width as the images were. */
.orb-top { width: 520px; max-width: 100%; aspect-ratio: 404 / 288; left: 50%; top: -260px; margin-left: -260px; }
.orb-left { width: 380px; max-width: 100%; aspect-ratio: 451 / 317; left: -160px; top: 200px; }
.orb-right { width: 440px; max-width: 100%; aspect-ratio: 451 / 317; right: -180px; top: 140px; }
.orb::before { content: ""; position: absolute; left: 4%; right: 8%; top: 11%; bottom: 6%; border-radius: 50%; transform: rotate(-13deg); }
.orb-top::before { background: linear-gradient(200deg, #FFF26A 0%, #FFC46A 30%, #FF9A5E 60%, #FF7F72 85%, #FF6FA6 100%); }
.orb-left::before { background: linear-gradient(200deg, #B5FFE6 0%, #6DFFC9 40%, #4CF5B4 75%, #5FE6D2 100%); }
.orb-right::before { background: linear-gradient(200deg, #8AF4FF 0%, #78C4FF 40%, #6FA4FF 75%, #8A9BFF 100%); }
.hero { position: relative; padding-block: 72px 36px; text-align: center; }
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 820px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.85); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22,185,122,.18); }
.hero h1 { margin-top: 26px; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; max-width: 13em; }
.hero .lead { margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 32em; }
.hero .lead b { color: var(--ink); font-weight: 600; }
.hero-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-cta .btn { min-width: 280px; }
.micro-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.micro { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--muted); }
.micro.center { justify-content: center; text-align: center; }
.micro svg { width: 17px; height: 17px; flex: none; }
/* Once the test is open the hero button is gone: the card below is the thing to look at. */
.testing .hero { padding-block: 40px 8px; }
.testing .hero-cta, .testing .hero .lead, .testing .eyebrow { display: none; }
.testing .hero h1 { font-size: clamp(26px, 3.6vw, 36px); margin-top: 0; }

/* ---------- секции ---------- */
.section { padding-block: 72px; position: relative; overflow-x: clip; }
.section.tight { padding-block: 56px; }
/* Empty until the test starts, so it adds no gap under the hero; the card brings its own margin. */
.section.quiz-section { padding-block: 0; }
.quiz, .result { margin: 8px 0 32px; }
.h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; max-width: 20em; }
.center { text-align: center; }
.center .h2, .center .sub { margin-inline: auto; }
.sub { margin-top: 16px; font-size: 18px; color: var(--ink-2); max-width: 36em; }

/* ---------- карточка теста ---------- */
.quiz, .result {
  background: var(--card); border-radius: var(--radius-l); box-shadow: var(--shadow);
  padding: 28px 28px 30px; scroll-margin-top: 16px;
}
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.quiz-skill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo); font-weight: 500; }
.quiz-skill[data-skill="words"] { background: var(--orange-soft); color: #B84C0B; }
.quiz-skill[data-skill="reading"] { background: var(--green-soft); color: #0D7C50; }
.quiz-count { font-variant-numeric: tabular-nums; }
.progress { height: 6px; margin-top: 16px; border-radius: 999px; background: #EEF0F3; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .35s ease; }
.quiz-task { margin-top: 26px; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
/* Focused by script after each question and at the result, not by a tap: no ring on text. */
.quiz-task:focus, .result-title:focus { outline: none; }
.quiz-czech { margin-top: 12px; font-size: 24px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; }
.quiz-czech.long { font-size: 19px; font-weight: 500; line-height: 1.5; padding: 16px 18px; border-radius: var(--radius-s); background: #F6F7F9; }
.options { display: grid; gap: 10px; margin-top: 22px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 18px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card);
  font: 500 17px/1.4 var(--font); color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.option:hover { border-color: #C9CCD3; }
.option:active { transform: scale(.995); }
.option-key { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #F0F1F4; font-size: 13px; font-weight: 600; color: var(--muted); }
.option[lang="cs"] { font-weight: 560; }
.options.answered .option { cursor: default; }
.options.answered .option:not(.right):not(.wrong) { opacity: .5; }
.option.right { border-color: var(--green); background: var(--green-soft); }
.option.right .option-key { background: #0D7C50; color: #fff; }
.option.wrong { border-color: var(--red); background: var(--red-soft); }
.option.wrong .option-key { background: #C8373C; color: #fff; }
.feedback { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.feedback-title { font-weight: 700; font-size: 17px; }
.feedback-title.ok { color: #0D7C50; }
.feedback-title.ko { color: #C8373C; }
.feedback-why { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.feedback .btn { margin-top: 18px; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .quiz.swap .quiz-task, .quiz.swap .quiz-czech, .quiz.swap .options { animation: rise .28s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}

/* ---------- результат ---------- */
.result-head { text-align: center; }
/* The result breathes more than a question: wider padding, a bit more room under the heading. */
.result { margin-top: 20px; padding: 40px; }
.result-badge {
  width: 112px; height: 112px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-size: 44px; font-weight: 800; letter-spacing: -0.04em;
  box-shadow: 0 18px 40px -12px rgba(255,106,19,.55);
}
.result-badge.beginner { font-size: 36px; }
.result-title { margin-top: 20px; font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.result-score { margin-top: 8px; color: var(--muted); font-size: 16px; }
.result-score b { color: var(--ink); font-weight: 600; }
.result-meaning { margin-top: 32px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.skills { margin-top: 32px; display: grid; gap: 10px; }
.skill { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 12px; font-size: 15px; }
.skill-name { color: var(--ink-2); font-weight: 500; }
.skill-bar { height: 8px; border-radius: 999px; background: #EEF0F3; overflow: hidden; }
.skill-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .6s ease; }
.skill-count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.result-h3 { margin-top: 40px; font-size: 19px; font-weight: 700; }
.next { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.next li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.next li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--grad); }
.result-cta { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.result-cta .btn { width: 100%; }
.result-actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
.result-retry { margin-top: 20px; text-align: center; }
/* Answer review: plain cards, the verdict is a small round mark in front of the question. */
.review { margin: 24px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.review li { position: relative; padding: 14px 16px 15px 50px; border-radius: 16px; background: #F8F9FB; font-size: 15px; line-height: 1.5; }
.review-mark { position: absolute; left: 16px; top: 14px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.review-mark svg { width: 12px; height: 12px; }
.review li.ok .review-mark { background: var(--green-soft); color: #0D7C50; }
.review li.ko .review-mark { background: var(--red-soft); color: #C8373C; }
.review .review-q { color: var(--muted); font-size: 14px; }
.review .review-cz { font-weight: 600; margin-top: 2px; }
.review .review-a { margin-top: 6px; }
.review .review-a b { font-weight: 600; }
.review .review-a s { color: var(--muted); }
.review .review-why { margin-top: 4px; color: var(--ink-2); }

/* ---------- о тесте, уровни ---------- */
#about .h2, #levels .h2 { text-align: center; margin-inline: auto; }
.cards { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { background: var(--card); border-radius: var(--radius-m); padding: 22px 22px 24px; box-shadow: var(--shadow); }
.card p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.card-tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.tag-words { background: var(--orange-soft); color: #B84C0B; }
.tag-grammar { background: var(--indigo-soft); color: var(--indigo); }
.tag-reading { background: var(--green-soft); color: #0D7C50; }
.levels { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.level-card { background: var(--card); border-radius: var(--radius-m); padding: 22px 22px 24px; box-shadow: var(--shadow); }
.level-mark { display: inline-block; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.level-card h3 { margin-top: 6px; font-size: 19px; font-weight: 700; }
.level-card p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq { margin: 32px auto 0; max-width: 820px; display: grid; gap: 10px; text-align: left; }
.faq details { background: var(--card); border-radius: var(--radius-m); padding: 0 22px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); font-size: 16px; }

/* ---------- финал ---------- */
.final { text-align: center; }
.final-copy { display: flex; flex-direction: column; align-items: center; }
/* Before the result the page leads to the test; after it, the last block leads to the app. */
.final-after { display: none; }
.done .final-before { display: none; }
.done .final-after { display: flex; }
.section-cta { margin-top: 28px; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- футер ---------- */
.footer { padding-block: 40px 56px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.footer .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.footer .logo-img { width: 84px; height: auto; margin-bottom: 10px; }
.footer p { max-width: 36em; line-height: 1.5; }
.footer p + p { margin-top: 8px; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .legal { line-height: 1.9; text-align: right; }

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  .cards, .levels { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-block: 48px 24px; }
  .hero h1 { font-size: clamp(32px, 9.2vw, 40px); }
  .hero .lead { font-size: 17px; }
  .hero-cta .btn, .section-cta .btn { width: 100%; min-width: 0; }
  .section-cta .micro { width: 100%; justify-content: center; text-align: center; }
  .section { padding-block: 56px; }
  .section.tight { padding-block: 44px; }
  .quiz, .result { padding: 20px 18px 22px; border-radius: 24px; }
  .result { padding: 28px 24px 30px; }
  .quiz-czech { font-size: 21px; }
  .quiz-czech.long { font-size: 17px; }
  .option { padding: 13px 14px; font-size: 16px; }
  .skill { grid-template-columns: 96px 1fr 40px; font-size: 14px; }
  .result-actions .btn { flex: 1 1 auto; }
  .footer .grid { grid-template-columns: 1fr; }
  .footer .legal { text-align: left; }
}