:root {
  --bg: #fbfaf8; --surface: #ffffff; --surface-2: #f2efea; --text: #17181c; --muted: #5b5f6b; --line: #e4e0d8;
  --brand: #c8102e; --brand-ink: #fff; --tef: #c8102e; --tcf: #1d4ed8; --celpip: #0f766e;
  --ok: #157a46; --ok-bg: #e5f5ec; --bad: #b42318; --bad-bg: #fdecea; --focus: #2f6fed;
  --shadow: 0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.06); --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101114; --surface: #17191e; --surface-2: #1f2229; --text: #eceef3; --muted: #a1a6b3; --line: #2b2f38;
    --brand: #e0314c; --tef: #e0314c; --tcf: #5b80f0; --celpip: #2bb3a5; --ok: #4fd18b; --ok-bg: #12301f; --bad: #ff8a80; --bad-bg: #3a1714; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #101114; --surface: #17191e; --surface-2: #1f2229; --text: #eceef3; --muted: #a1a6b3; --line: #2b2f38;
  --brand: #e0314c; --tef: #e0314c; --tcf: #5b80f0; --celpip: #2bb3a5; --ok: #4fd18b; --ok-bg: #12301f; --bad: #ff8a80; --bad-bg: #3a1714; --shadow: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 Inter, system-ui, sans-serif; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.leaf { width: 22px; height: 22px; border-radius: 6px; background: var(--brand); display: inline-block;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 2l2.6 6 5.7-1.8-2 5.3 4.4 2.1-5.9 2.6.7 6.5-5.5-3.9-5.5 3.9.7-6.5-5.9-2.6 4.4-2.1-2-5.3L13.4 8z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 2l2.6 6 5.7-1.8-2 5.3 4.4 2.1-5.9 2.6.7 6.5-5.5-3.9-5.5 3.9.7-6.5-5.9-2.6 4.4-2.1-2-5.3L13.4 8z'/></svg>") center/contain no-repeat; }
.links { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.links a:not(.btn) { text-decoration: none; color: var(--muted); }
.links a:not(.btn):hover { color: var(--text); }

.btn { display: inline-block; background: var(--brand); color: var(--brand-ink); text-decoration: none; border: 0; border-radius: 12px;
  padding: 13px 20px; font: 600 16px Inter, sans-serif; cursor: pointer; text-align: center; }
.btn:hover { filter: brightness(1.08); }
.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--muted); filter: none; }

main { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.hero { padding: 72px 0 40px; max-width: 820px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }
h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 18px; font-weight: 800; }
h1 span { color: var(--muted); }
.lead { font-size: 19px; color: var(--muted); max-width: 680px; margin: 0 0 26px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stats { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stats li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.stats b { display: block; font-size: 26px; letter-spacing: -.02em; }
.stats span { font-size: 13px; color: var(--muted); }

.section { padding: 56px 0; }
.section.alt { position: relative; }
.section.alt::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: var(--surface-2); z-index: -1; }
h2 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; margin: 0 0 8px; }
.sub { color: var(--muted); margin: 0 0 26px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.product { display: flex; flex-direction: column; border-top: 5px solid var(--c); }
.product .tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.product h3 { font-size: 24px; margin: 6px 0 4px; letter-spacing: -.01em; }
.product .lang { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.product ul { padding: 0; margin: 0 0 20px; list-style: none; flex: 1; }
.product li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px dashed var(--line); font-size: 15px; }
.product li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 10px; height: 6px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.product .btn { background: var(--c); margin-top: 12px; }
.product .note { font-size: 13px; color: var(--muted); margin-top: 8px; text-align: center; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.feature h3 { font-size: 17px; margin: 0 0 6px; }
.feature p { margin: 0; color: var(--muted); font-size: 15.5px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 16px; font: 600 14px Inter, sans-serif; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.sample { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.doc { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; line-height: 1.7; background: var(--surface-2); border-radius: 12px; padding: 16px 18px; white-space: pre-wrap; margin: 10px 0 16px; }
.doc b { font-family: Inter, sans-serif; display: block; margin-bottom: 6px; }
.stem { font-weight: 600; margin: 8px 0 10px; }
.opt { display: flex; gap: 12px; width: 100%; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px; margin: 7px 0; font: 16px Inter, sans-serif; cursor: pointer; }
.opt:hover:not([disabled]) { border-color: var(--focus); }
.opt .k { font-weight: 700; color: var(--muted); }
.opt.right { background: var(--ok-bg); border-color: var(--ok); } .opt.wrong { background: var(--bad-bg); border-color: var(--bad); }
.opt[disabled] { cursor: default; }
.expl { border-left: 3px solid var(--ok); padding: 6px 14px; margin-top: 12px; font-size: 15px; }
.expl.bad { border-left-color: var(--bad); }
.listen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.muted { color: var(--muted); font-size: 14px; }

.steps { counter-reset: s; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; }
.steps li { counter-increment: s; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; margin-bottom: 10px; }
.steps b { display: block; }

details { border-bottom: 1px solid var(--line); padding: 14px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 17px; }
details p { color: var(--muted); margin: 10px 0 0; max-width: 760px; }

.logins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.login { text-decoration: none; display: flex; gap: 12px; align-items: center; font-weight: 600; padding: 18px 20px; }
.login:hover { border-color: var(--muted); }
.badge { color: #fff; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.badge.tef { background: var(--tef); } .badge.tcf { background: var(--tcf); } .badge.celpip { background: var(--celpip); }

.foot { text-align: center; padding: 40px 20px 56px; color: var(--muted); font-size: 15px; }
.foot .fine { font-size: 12.5px; max-width: 720px; margin: 10px auto 0; }

@media (max-width: 860px) {
  .cards, .features, .steps, .logins { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .links a:not(.btn) { display: none; }
  .hero { padding-top: 44px; }
}

/* ---------- brand ---------- */
.logo .leafsvg, .foot-brand .leafsvg { width: 24px; height: 24px; color: var(--brand); flex: none; }
.logo span { font-weight: 600; } .logo b { font-weight: 800; color: var(--brand); }
.foot-brand { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 18px; color: var(--text); margin: 0 0 10px; }
.foot-brand b { color: var(--brand); }

/* ---------- hero with device mockups ---------- */
.hero { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; }
.hero .stats { grid-column: 1 / -1; margin-top: 8px; }
.hero-art { position: relative; min-height: 420px; }
.laptop { position: relative; }
.laptop .screen { background: #0d0f14; border-radius: 14px 14px 4px 4px; padding: 10px 10px 12px; box-shadow: var(--shadow); }
.laptop .screen img { display: block; width: 100%; height: auto; border-radius: 6px; }
.laptop .base { height: 14px; margin: 0 -6%; background: linear-gradient(#c9ccd3, #a7abb5); border-radius: 0 0 14px 14px; }
.phone { background: #0d0f14; border-radius: 34px; padding: 9px; box-shadow: 0 18px 40px rgba(0,0,0,.25); width: 230px; }
.phone img { display: block; width: 100%; height: auto; border-radius: 26px; }
.hero-art .laptop { width: 92%; margin-left: 8%; margin-top: 10px; }
.hero-art .ph-a { position: absolute; left: 0; bottom: -30px; width: 180px; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 28px; align-items: end; }
.gallery figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gallery .phone { width: 100%; max-width: 250px; }
.gallery .laptop { width: 100%; }
.gallery figcaption { font-size: 15px; color: var(--muted); text-align: center; max-width: 360px; }
.gallery figcaption b { display: block; color: var(--text); font-size: 16px; margin-bottom: 2px; }

/* ---------- books ---------- */
.books-title { text-align: center; margin: 48px 0 18px; font-size: 20px; }
.books { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; perspective: 900px; }
.book { width: 170px; transform: rotateY(-18deg); transform-style: preserve-3d; transition: transform .3s ease; }
.book:hover { transform: rotateY(-4deg); }
.cover { aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
  color: #fff; padding: 18px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  box-shadow: inset 6px 0 0 rgba(0,0,0,.18), 10px 14px 24px rgba(0,0,0,.22); position: relative; }
.cover .leafsvg { position: absolute; top: 16px; right: 14px; width: 30px; height: 30px; color: rgba(255,255,255,.85); }
.cover small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cover b { font-size: 21px; line-height: 1.1; }
.cover span { font-size: 12px; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .book, .book:hover { transform: none; transition: none; } }

/* ---------- comparison table ---------- */
.table-wrap { overflow-x: auto; margin-top: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.compare th, .compare td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.compare tbody th { font-weight: 500; color: var(--muted); }
.compare td { font-weight: 600; }
.c-tef { color: var(--tef); } .c-tcf { color: var(--tcf); } .c-celpip { color: var(--celpip); }
.features { margin-top: 8px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 0; margin: 8px 0 30px; }
  .hero-art .ph-a { width: 34%; bottom: -24px; }
  .gallery { grid-template-columns: 1fr; gap: 40px; }
  .gallery .phone { max-width: 240px; }
  .book { width: 140px; }
}
/* dark mode: keep white text on product buttons readable */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .product .btn { background: color-mix(in srgb, var(--c) 78%, #000); } }
:root[data-theme="dark"] .product .btn { background: color-mix(in srgb, var(--c) 78%, #000); }
body { overflow-x: clip; }
@media (max-width: 860px) { .laptop .base { margin: 0 -2%; } .hero-art .laptop { width: 94%; margin-left: 4%; } }

/* ---------- HTML device mockups (fixed light UI, like the real screens) ---------- */
.mk-frame { position: relative; overflow: hidden; border-radius: 6px; background: #f6f7fb; }
.phone .mk-frame { border-radius: 26px; }
.mk-frame > .mk { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.mk { background: #f6f7fb; color: #18202f; font: 16px/1.55 Inter, system-ui, sans-serif; overflow: hidden; display: flex; flex-direction: column; }
.mk-top { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #fff; border-bottom: 1px solid #dde2ec; font-size: 14px; white-space: nowrap; }
.mk-leaf svg { width: 20px; height: 20px; color: var(--b); display: block; }
.mk-mark { background: var(--b); color: #fff; border-radius: 8px; padding: 3px 7px; font-size: 13px; font-weight: 700; }
.mk-name { font-weight: 700; color: #1f2a44; }
.mk-crumb { color: #5d6779; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mk-out { border: 1px solid #dde2ec; border-radius: 10px; padding: 5px 10px; font-size: 13px; }
.mk-main { padding: 20px 18px; flex: 1; overflow: hidden; }
.mk[style*="1d4ed8"] .mk-main, .mk-main:has(.mk-grid) { padding: 28px 18% 20px; }
.mk-doc { font-family: "Source Serif 4", Georgia, serif; font-size: 16.5px; line-height: 1.7; background: #eef1f7; border-radius: 12px; padding: 14px 16px; white-space: pre-wrap; margin: 12px 0; }
.mk-stem { font-weight: 600; margin: 16px 0 8px; }
.mk-opt { display: flex; gap: 12px; background: #fff; border: 1px solid #dde2ec; border-radius: 10px; padding: 10px 13px; margin: 7px 0; }
.mk-opt b { color: #5d6779; } .mk-opt.ok { background: #e5f5ec; border-color: #157a46; } .mk-opt.ok b { color: #157a46; }
.mk-opt.no { background: #fdecea; border-color: #b42318; } .mk-opt.no b { color: #b42318; }
.mk-expl { border-left: 3px solid #b42318; padding: 6px 12px; margin-top: 10px; font-size: 15px; }
.mk-pager { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid #dde2ec; background: #f6f7fb; font-size: 15px; }
.mk-ghost, .mk-sel { border: 1px solid #dde2ec; border-radius: 10px; padding: 8px 11px; white-space: nowrap; }
.mk-sel { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mk-btn { background: var(--b); color: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 600; white-space: nowrap; }
.mk-tag { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--b); margin-top: 6px; }
.mk-h1 { font-size: 27px; font-weight: 700; color: #1f2a44; line-height: 1.2; margin: 4px 0 10px; }
.mk-h2 { font-size: 20px; font-weight: 700; color: #1f2a44; margin: 14px 0 4px; }
.mk-sub { color: #5d6779; }
.mk-ta { border: 2px solid #2f6fed; border-radius: 10px; background: #fff; padding: 12px 14px; min-height: 120px; white-space: pre-wrap; font-family: "Source Serif 4", Georgia, serif; }
.mk-ta i { display: inline-block; width: 1px; height: 18px; background: #18202f; vertical-align: middle; animation: mkblink 1s steps(1) infinite; }
@keyframes mkblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-ta i { animation: none; } }
.mk-wc { font-size: 13px; color: #5d6779; margin-top: 6px; }
.mk-det { font-weight: 600; color: #1f2a44; margin-top: 12px; }
.mk-timer { display: flex; gap: 12px; align-items: center; background: #eef1f7; border-radius: 12px; padding: 12px; margin: 12px 0; }
.mk-timer b { font-size: 22px; font-variant-numeric: tabular-nums; } .mk-timer span:last-child { font-size: 13px; color: #5d6779; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.mk-tile { background: #fff; border: 1px solid #dde2ec; border-radius: 14px; padding: 16px; }
.mk-lv { font-size: 30px; font-weight: 700; color: var(--b); line-height: 1; }
.mk-n { font-weight: 600; margin: 6px 0 2px; } .mk-small { font-size: 13px; color: #5d6779; }
.mk-bar { height: 6px; background: #eef1f7; border-radius: 99px; overflow: hidden; margin-top: 10px; } .mk-bar span { display: block; height: 100%; background: #157a46; }

/* billing toggle + bundle */
.billing { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin: 0 0 22px; }
.billing button { border: 0; background: transparent; color: var(--muted); border-radius: 999px; padding: 9px 18px; font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; }
.billing button[aria-checked="true"] { background: var(--text); color: var(--bg); }
.billing button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.billing .save { font-size: 12px; font-weight: 700; color: var(--ok); margin-left: 6px; }
.billing button[aria-checked="true"] .save { color: inherit; opacity: .8; }
.price s { font-size: 18px; font-weight: 600; color: var(--muted); margin-right: 8px; }
.bundle { margin-top: 18px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.bundle::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--tef), var(--tcf), var(--celpip)); }
.bundle .tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bundle h3 { font-size: 26px; margin: 6px 0 6px; letter-spacing: -.01em; }
.bundle p { margin: 0; color: var(--muted); }
.bundle .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.bundle .chips span { font-size: 13px; font-weight: 700; color: #fff; border-radius: 999px; padding: 4px 10px; }
.bundle .buy { text-align: center; }
.bundle .buy .btn { width: 100%; margin-top: 10px; }
.bundle .note { font-size: 13px; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) { .bundle { grid-template-columns: 1fr; } .billing { display: flex; } .billing button { flex: 1; padding: 9px 10px; } }