/* ============================================================
   LANDING v5 — на дизайн-системі «пастель + індиго».
   Один світлий світ (крем · папір · персик · лаванда), єдиний
   темний якір — футер (індиго-ink). Hero-«листівка»: текст графітом
   на папері, фото = предмет-листівка. Кнопки — примітиви системи
   (фізика печатки). Шрифти: Fixel · JetBrains Mono · Fraunces italic.
   Бренд-токени: ../assets/design-tokens.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.landing {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.01em; }

.l-wrap { width: min(1180px, 92vw); margin-inline: auto; }
.eyebrow {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-700);
}

/* ============================================================
   ПРИМІТИВИ КНОПОК (дзеркало системних .btn-primary / .btn-ticket:
   фізика печатки — грань знизу, ховер підйом −1, прес +2).
   ============================================================ */
.btn-primary, .btn-secondary {
    position: relative; font: inherit; font-weight: 700; font-size: var(--fs-small);
    padding: 12px 22px; border-radius: var(--radius-btn); cursor: pointer;
    border: 1.5px solid transparent; text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease,
                background var(--dur-fast) ease, color var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-accent); box-shadow: 0 3px 0 var(--color-primary-700); }
.btn-primary::after { content: ''; position: absolute; inset: 4px; border-radius: 8px; border: 1px dashed currentColor; opacity: .4; pointer-events: none; }
.btn-primary:hover  { background: var(--color-primary-600); transform: translateY(-1px); box-shadow: 0 4px 0 var(--color-primary-700); filter: saturate(1.08); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-primary-700), inset 0 -2px 5px rgba(0,30,40,.25); }
.btn-primary:disabled { background: var(--color-border-strong); box-shadow: 0 3px 0 rgba(0,0,0,.12); cursor: default; transform: none; filter: none; }
.btn-primary:disabled::after { opacity: 0; }
.btn-secondary { background: var(--color-surface); color: var(--color-primary-700); border-color: var(--color-border-strong); box-shadow: 0 3px 0 var(--color-border-strong); }
.btn-secondary:hover  { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: 0 4px 0 var(--color-border-strong); }
.btn-secondary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--color-border-strong); }

/* ============================================================
   NAV — світлий, тихий, графіт
   ============================================================ */
body.landing > header {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: color-mix(in srgb, var(--color-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}
.l-nav {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px; width: min(1180px, 92vw); margin-inline: auto;
}
.l-logo {
    display: inline-flex; align-items: baseline; gap: .3ch;
    font-family: var(--font-head); font-weight: 800; font-size: 1.22rem;
    letter-spacing: -.02em; color: var(--color-text); text-decoration: none;
}
.l-logo .dot   { color: var(--color-secondary-600); font-weight: 700; }
.l-logo .world { color: var(--color-primary); }
.l-nav-right { display: flex; align-items: center; gap: var(--space-4); }

/* Перемикач мови = chip-switch системи (світлий трек + перивінкл-заливка обраного) */
.l-lang {
    display: inline-flex; gap: 3px; padding: 3px;
    background: var(--color-primary-050); border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
}
.l-lang button {
    border: 0; background: transparent; cursor: pointer; padding: 5px 12px;
    color: var(--color-primary-700); font: inherit; border-radius: var(--radius-pill);
    transition: var(--transition);
}
.l-lang button.is-active { background: var(--color-primary); color: var(--color-on-accent); }
.l-login { color: var(--color-primary-700); text-decoration: none; font-weight: 700; font-size: var(--fs-small); }
.l-login:hover { color: var(--color-primary); }

/* ============================================================
   HERO — «листівка на папері»: текст графітом зліва, фото-предмет справа.
   ============================================================ */
.hero {
    position: relative; isolation: isolate;
    padding: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(3rem, 7vh, 5rem);
}
/* мʼяке декоративне «повітря» — тон-у-тон, ніколи під текстом як контраст */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(48% 60% at 88% 8%, color-mix(in srgb, var(--color-secondary) 26%, transparent) 0%, transparent 62%),
        radial-gradient(52% 62% at 6% 96%, color-mix(in srgb, var(--color-lavender) 60%, transparent) 0%, transparent 60%);
}
.hero-inner {
    width: min(1180px, 92vw); margin-inline: auto;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-copy { max-width: 34rem; }
.hero-copy h1 {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
    line-height: 1.06; letter-spacing: -.02em; text-wrap: balance;
    margin: 14px 0 var(--space-4); color: var(--color-text);
}
.hero-copy h1 .em { font-family: var(--font-example); font-style: italic; font-weight: 500; color: var(--color-primary); }
.hero-sub {
    color: var(--color-text-muted); max-width: 46ch;
    font-size: clamp(1.02rem, .98rem + .25vw, 1.16rem);
    margin: 0 0 var(--space-5);
}
.hero-sub b { color: var(--color-text); font-weight: 600; }

/* Фото-листівка (предмет-об'єкт: біла рамка, скотч, штамп) */
.hero-photo-wrap { display: flex; justify-content: center; }
.postcard {
    position: relative; margin: 0; background: var(--color-surface);
    padding: 14px 14px 18px; border-radius: 6px; box-shadow: var(--shadow-lg);
    transform: rotate(2deg); max-width: 420px; width: 100%;
}
.postcard img { display: block; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: 3px; }
.postcard-tape {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg);
    width: 128px; height: 28px; background: color-mix(in srgb, var(--color-bg-warm) 74%, transparent);
    box-shadow: 0 1px 3px rgba(60,50,30,.18);
}
.postcard-stamp {
    position: absolute; right: 16px; bottom: 22px; width: 62px; height: 62px;
    border: 2px dashed var(--color-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding: 5px;
    transform: rotate(-12deg); text-align: center; opacity: .78;
    font-family: var(--font-mono); font-size: 8px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--color-primary);
}

/* Word-піни — картки-слова просто на фото-листівці (фішка) */
.hero-pins { position: absolute; inset: 14px 14px 18px; pointer-events: none; }
.pin { position: absolute; left: var(--x); top: var(--y); opacity: 0; transform: translateY(6px); animation: pinin .6s var(--ease) forwards; }
.pin:nth-child(1) { animation-delay: .7s; }
.pin:nth-child(2) { animation-delay: 1.05s; }
.pin:nth-child(3) { animation-delay: 1.4s; }
@keyframes pinin { to { opacity: 1; transform: none; } }
.pin-dot {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 2px 6px rgba(54,50,66,.35);
}
.pin-card {
    position: absolute; left: 18px; top: -9px; white-space: nowrap;
    background: var(--color-surface); border-radius: var(--radius-sm); padding: 6px 11px;
    box-shadow: var(--shadow-card); display: flex; align-items: baseline; gap: 8px;
}
.pin-card b { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--color-text); }
.pin-card i { font-style: normal; font-family: var(--font-mono); font-size: .68rem; color: var(--color-primary); }
.pin-card em { font-style: normal; font-family: var(--font-example); font-size: .8rem; color: var(--color-text-muted); }
@media (max-width: 600px) { .hero-pins { display: none; } }

/* ============================================================
   WAITLIST — поле + дія (кнопка-примітив)
   ============================================================ */
.waitlist { max-width: 30rem; }
.wl-form {
    position: relative; display: flex; gap: 6px;
    background: var(--color-surface); border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill); padding: 6px 6px 6px 18px; box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.wl-form:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.wl-form input[type=email] {
    flex: 1; border: 0; background: transparent; font: inherit; color: var(--color-text);
    outline: none; min-width: 0;
}
.wl-form input[type=email]::placeholder { color: var(--color-muted-cool); }
.wl-btn {
    border: 0; cursor: pointer; white-space: nowrap;
    background: var(--color-primary); color: var(--color-on-accent);
    font-weight: 700; font-size: var(--fs-small);
    padding: 12px 22px; border-radius: var(--radius-pill);
    transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, filter var(--dur-fast) ease;
}
.wl-btn:hover  { background: var(--color-primary-600); filter: saturate(1.08); }
.wl-btn:active { transform: scale(.97); }
.wl-btn:disabled { background: var(--color-border-strong); cursor: default; }
.wl-note { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.wl-ok {
    display: none; margin-top: var(--space-3);
    background: var(--color-success-100); color: var(--color-success-700);
    border-radius: var(--radius-md); padding: 12px 16px; font-weight: 600; font-size: var(--fs-small);
}
.wl-ok.show { display: block; }
.wl-privacy { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 540px) {
    .wl-form { flex-direction: column; border-radius: var(--radius-lg); padding: 12px; }
    .wl-form input[type=email] { padding: 6px 8px; }
    .wl-btn { padding: 13px; }
}

/* ============================================================
   КАРТА — світла секція «спробуй зараз», карта у вікні-boarding-pass
   ============================================================ */
.try {
    position: relative; background: var(--color-bg-warm);
    border-block: 1px solid var(--color-border);
    padding: clamp(3rem, 7vh, 5rem) 4vw clamp(3.5rem, 8vh, 5.5rem);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.try-head { text-align: center; max-width: 44rem; margin: 0 auto var(--space-2); }
.try-title {
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.1;
    margin: 6px 0 var(--space-3); color: var(--color-text);
}
.try-lead { margin: 0 auto; color: var(--color-text-muted); font-size: clamp(1rem, .96rem + .25vw, 1.12rem); max-width: 46ch; }
.try .app-frame { width: min(1040px, 94vw); box-shadow: var(--shadow-lg); }
.try .chips { justify-content: center; max-width: 1040px; }
.try-meta { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: .04em; }

/* Вікно застосунку — «квиток на борт» */
.app-frame {
    background: var(--color-surface); border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden;
}
.frame-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px; background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.fdot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.fdot:nth-child(1) { background: var(--color-secondary); }
.frame-title {
    margin-left: 8px; flex: 1; min-width: 0;
    font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-primary-700); white-space: nowrap; }
.frame-count b { font-family: inherit; color: var(--color-primary); }
.frame-body { position: relative; aspect-ratio: 1010 / 560; background: var(--map-water); }
.frame-body .worldmap { position: absolute; inset: 0; display: grid; place-items: center; }
.frame-body .worldmap svg { width: 97%; height: 92%; overflow: visible; }
.frame-body .graticule path { stroke: color-mix(in srgb, var(--color-primary) 12%, transparent); stroke-width: .5; fill: none; }
.frame-body svg path[id^="c-"] { fill: var(--map-land); stroke: var(--map-land-stroke); stroke-width: .5; transition: fill var(--dur) var(--ease); }
.frame-body svg path.lit { fill: color-mix(in srgb, var(--color-secondary) 42%, var(--map-land)); cursor: pointer; }
.frame-body svg path.lit:hover { fill: var(--map-hover); }
.frame-body svg path.lit.picked { fill: var(--map-active); }
.frame-body svg path.done { fill: var(--color-success); }
.frame-body .marker { fill: var(--color-primary); stroke: #fff; stroke-width: .8; cursor: pointer; }
.frame-body .marker-ring {
    fill: none; stroke: var(--color-primary); stroke-width: 1;
    transform-box: fill-box; transform-origin: center; animation: mping 2.4s var(--ease) infinite;
}
@keyframes mping { 0% { opacity: .75; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(3.2); } }
.map-hint { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted-cool); }

/* Мікроурок — картка-квиток усередині вікна */
.lesson {
    position: absolute; right: 12px; bottom: 12px; z-index: 2; width: min(252px, 74%);
    background: var(--color-surface); color: var(--color-text);
    border-radius: var(--radius-md); box-shadow: var(--shadow-modal); padding: 16px 18px;
}
.lesson[hidden] { display: none; }
.lesson-close {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--color-bg); color: var(--color-text-muted); font-size: .95rem; line-height: 1;
}
.lesson-close:hover { background: var(--color-primary-050); color: var(--color-primary-700); }
.lesson-top { display: flex; align-items: center; gap: .6ch; font-family: var(--font-mono); font-weight: 600; color: var(--color-text-muted); font-size: var(--fs-xs); margin-bottom: 8px; padding-right: 26px; text-transform: uppercase; letter-spacing: .05em; }
.lesson-top .flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 1px 2px rgba(54,50,66,.2); }
.lesson-word { font-family: var(--font-head); font-weight: 800; font-size: 1.85rem; line-height: 1; letter-spacing: -.02em; margin: 0; }
.lesson-ipa { font-family: var(--font-mono); color: var(--color-primary); font-size: .85rem; margin: .35rem 0 .1rem; }
.lesson-uk { font-family: var(--font-example); font-style: italic; color: var(--color-text-muted); font-size: .98rem; margin: 0 0 12px; }
.lesson-actions { display: flex; gap: 8px; }
.btn-hear, .btn-learn {
    border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: var(--fs-xs);
    padding: 9px 13px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: .5ch; transition: var(--transition);
}
.btn-hear { background: var(--color-primary-050); color: var(--color-primary-700); }
.btn-hear:hover { background: var(--color-primary-100); }
.btn-learn { background: var(--color-primary); color: var(--color-on-accent); flex: 1; justify-content: center; }
.btn-learn:hover { background: var(--color-primary-600); }
.btn-learn.done { background: var(--color-success); color: var(--color-success-700); }

/* Чипи-країни — примітив chip системи */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.chip-country {
    display: inline-flex; align-items: center; gap: .55ch;
    border: 1px solid var(--color-border-strong); background: var(--color-surface);
    border-radius: var(--radius-pill); padding: 6px 12px;
    font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text);
    cursor: pointer; transition: var(--transition);
}
.chip-country .cflag { width: 17px; height: 12px; border-radius: 2px; object-fit: cover; }
.chip-country:hover { border-color: var(--color-primary); color: var(--color-primary-700); transform: translateY(-1px); }
.chip-country.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-accent); }
.chip-country.done { border-color: var(--color-success); }
.chip-country.done::after { content: "✓"; color: var(--color-success-700); font-weight: 700; }
.chip-country.active.done::after { color: var(--color-on-accent); }

/* ============================================================
   METHOD — журнальний розворот: полароїди + підписи-піни
   ============================================================ */
.method {
    position: relative; isolation: isolate;
    padding: clamp(4rem, 9vh, 6.5rem) 0;
    background:
        radial-gradient(52% 68% at 12% 14%, color-mix(in srgb, var(--color-secondary) 30%, transparent) 0%, transparent 60%),
        radial-gradient(52% 68% at 88% 20%, color-mix(in srgb, var(--color-lavender) 66%, transparent) 0%, transparent 60%),
        radial-gradient(58% 66% at 84% 94%, color-mix(in srgb, var(--color-secondary) 20%, transparent) 0%, transparent 58%),
        radial-gradient(58% 66% at 14% 92%, color-mix(in srgb, var(--color-lavender) 52%, transparent) 0%, transparent 58%),
        var(--color-bg);
}
.method::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .12; mix-blend-mode: soft-light;
}
.method-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.method-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1.12; margin: 0 0 var(--space-4); text-wrap: balance; color: var(--color-text); }
.method-head p { color: var(--color-text-muted); max-width: 56ch; margin: 0 auto; }
.method-head .example-em { font-family: var(--font-example); font-style: italic; color: var(--color-text); }

.polas {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.4rem, 4vw, 2.4rem); max-width: 640px; margin-inline: auto;
}
.pola {
    position: relative; margin: 0; background: var(--color-surface);
    padding: 10px 10px 13px; border-radius: 5px; box-shadow: var(--shadow-hover);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease); z-index: 1;
}
.pola img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.pola:nth-child(odd)  { transform: rotate(-2deg); }
.pola:nth-child(even) { transform: rotate(2deg); }
.pola:hover { transform: rotate(0deg) scale(1.03); box-shadow: var(--shadow-lg); z-index: 20; }
.pola-pin {
    position: absolute; left: 13px; bottom: 26px; white-space: nowrap;
    background: var(--color-surface); border-radius: var(--radius-sm); padding: 6px 11px;
    box-shadow: var(--shadow-card); display: inline-flex; align-items: baseline; gap: 8px;
}
.pola-pin b { font-family: var(--font-head); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; color: var(--color-text); }
.pola-pin i { font-style: normal; font-family: var(--font-mono); font-size: .68rem; color: var(--color-primary); }
.pola-pin em { font-style: normal; font-family: var(--font-example); font-size: .8rem; color: var(--color-text-muted); }

@media (min-width: 881px) {
    .polas { position: relative; display: block; max-width: min(1160px, 96vw); margin-inline: auto; height: clamp(420px, 33vw, 470px); }
    .pola { position: absolute; width: clamp(216px, 22.5vw, 292px); }
    .pola:nth-child(1) { left: 0%;   top: 18px;  transform: rotate(-6deg);  z-index: 1; }
    .pola:nth-child(2) { left: 13%;  top: 118px; transform: rotate(3deg);   z-index: 2; }
    .pola:nth-child(3) { left: 27%;  top: 4px;   transform: rotate(-3deg);  z-index: 3; }
    .pola:nth-child(4) { left: 40%;  top: 104px; transform: rotate(4.5deg); z-index: 4; }
    .pola:nth-child(5) { left: 53%;  top: 14px;  transform: rotate(-4deg);  z-index: 5; }
    .pola:nth-child(6) { left: 65%;  top: 120px; transform: rotate(3.5deg); z-index: 6; }
    .pola:nth-child(7) { left: 78%;  top: 34px;  transform: rotate(-5deg);  z-index: 7; }
    .pola:hover { transform: rotate(0deg) scale(1.05); z-index: 20; }
}

/* ============================================================
   CLOSER — світлий фінал зі штампом (без темного фону)
   ============================================================ */
.closer {
    position: relative; overflow: hidden; text-align: center;
    background:
        radial-gradient(70% 90% at 50% 0%, var(--color-primary-100) 0%, transparent 60%),
        var(--color-primary-050);
    border-top: 1px solid var(--color-border);
    padding: clamp(6.5rem, 16vh, 10rem) 0;
}
.closer-in { position: relative; z-index: 1; }
.closer h2 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); line-height: 1.08; margin: 0 auto var(--space-3); max-width: 18ch; color: var(--color-text); }
.closer p { color: var(--color-text-muted); margin: 0 auto var(--space-6); max-width: 44ch; }
.closer .waitlist { margin-inline: auto; }
.stamp-svg {
    position: absolute; z-index: 0; width: clamp(110px, 14vw, 170px); height: auto;
    right: clamp(4%, 8vw, 12%); top: 12%;
    color: color-mix(in srgb, var(--color-primary) 34%, transparent); transform: rotate(12deg);
}
@media (max-width: 760px) { .stamp-svg { display: none; } }

/* ============================================================
   FOOTER (єдиний темний якір — індиго-ink) / TOAST / MOTION
   ============================================================ */
.l-foot-band { background: var(--color-ink); color: var(--color-on-ink-muted); }
.l-foot {
    padding: var(--space-6) 0; display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-small);
}
.l-foot span:first-child { color: var(--color-on-ink); font-weight: 600; }

.toast {
    position: fixed; z-index: var(--z-modal); left: 50%; top: 22px;
    transform: translateX(-50%) translateY(-12px);
    background: var(--color-ink); color: var(--color-on-ink); font-weight: 700; font-size: var(--fs-small);
    padding: 9px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-modal);
    opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 880px) {
    .hero-inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .hero-copy { max-width: none; text-align: center; margin-inline: auto; }
    .hero-copy .waitlist { margin-inline: auto; }
    .hero-photo-wrap { order: -1; }
}
@media (max-width: 560px) {
    .l-nav { height: 60px; }
    .l-logo { font-size: 1.04rem; }
    .l-login { display: none; }
    .lesson { right: 8px; bottom: 8px; width: min(230px, 82%); padding: 13px 14px; }
    .polas { grid-template-columns: 1fr; max-width: 340px; gap: var(--space-5); }
    .postcard { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .pin { opacity: 1; transform: none; animation: none; }
    .frame-body .marker-ring { animation: none; }
    .pola, .lesson, .toast, .btn-primary, .btn-secondary, .wl-btn, .chip-country { transition: none; }
}

/* ============================================================
   ПОВНИЙ ЛЕНДІНГ v2: нав-якорі, hero-CTA, рівні, бенто, ціни, FAQ
   ============================================================ */

/* --- Нав: якірні лінки + CTA --- */
.l-anchors { display: flex; gap: var(--space-5); }
.l-anchors a {
    color: var(--color-text-muted); text-decoration: none;
    font-weight: 600; font-size: var(--fs-small);
    transition: color var(--dur-fast) ease;
}
.l-anchors a:hover { color: var(--color-primary); }
.l-nav-cta { text-decoration: none; padding: 9px 18px; }
@media (max-width: 880px) { .l-anchors { display: none; } }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 76px; }

/* --- Hero: CTA + смужка цифр --- */
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.btn-big { text-decoration: none; padding: 14px 26px; font-size: var(--fs-body); }
.hero-stats {
    display: flex; gap: var(--space-6); list-style: none;
    margin: 0; padding: var(--space-4) 0 0;
    border-top: 1px dashed var(--color-border-strong);
}
.hero-stats li { display: flex; flex-direction: column; gap: 2px; }
.hero-stats b { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--color-text); letter-spacing: -.01em; }
.hero-stats span { font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 880px) {
    .hero-cta { justify-content: center; }
    .hero-stats { justify-content: center; }
}

/* --- LEVELS: шлях A1 → C1 --- */
.levels { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.levels-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.levels-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); margin: 10px 0 var(--space-3); color: var(--color-text); }
.levels-head p { color: var(--color-text-muted); max-width: 48ch; margin: 0 auto; }
.levels-path {
    list-style: none; counter-reset: none;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4);
    margin: 0 0 var(--space-6); padding: 0;
}
.levels-path li {
    position: relative; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4); box-shadow: var(--shadow-sm);
}
/* пунктирна «траса» між картками рівнів */
.levels-path li:not(:last-child)::after {
    content: ''; position: absolute; top: 30px; right: calc(-1 * var(--space-4));
    width: var(--space-4); border-top: 2px dashed var(--color-border-strong);
}
.lv-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 30px; padding: 0 10px; margin-bottom: var(--space-3);
    background: var(--color-primary-050); color: var(--color-primary-700);
    border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-small);
}
.levels-path li:nth-child(4) .lv-badge,
.levels-path li:nth-child(5) .lv-badge { background: var(--color-primary); color: var(--color-on-accent); border-color: var(--color-primary); }
.levels-path h3 { font-size: 1.02rem; margin: 0 0 .35rem; color: var(--color-text); }
.levels-path p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.levels-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.side-route {
    background: var(--color-bg-warm); border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.side-route h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--color-primary-700); }
.side-route p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
@media (max-width: 1020px) {
    .levels-path { grid-template-columns: repeat(2, 1fr); }
    .levels-path li:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
    .levels-path { grid-template-columns: 1fr; }
    .levels-side { grid-template-columns: 1fr; }
}

/* --- INSIDE: бенто «що всередині» --- */
.inside { padding: clamp(3.5rem, 9vh, 6rem) 0; background: var(--color-bg-warm); border-block: 1px solid var(--color-border); }
.inside-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.inside-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); margin: 10px 0 var(--space-3); color: var(--color-text); }
.inside-head p { max-width: 56ch; margin: 0 auto; color: var(--color-text); }   /* як в інших секцій */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.b-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease;
}
.b-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.b-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: var(--space-3);
    background: var(--color-primary-050); color: var(--color-primary);
    border-radius: var(--radius-md);
}
.b-icon svg { width: 22px; height: 22px; }
.b-card h3 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--color-text); }
.b-card p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
@media (max-width: 880px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

/* --- PRICING --- */
.pricing { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.pricing-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.pricing-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); margin: 10px 0 var(--space-3); color: var(--color-text); }
.pricing-head p { color: var(--color-text-muted); max-width: 46ch; margin: 0 auto; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: stretch; }
.plan {
    position: relative; display: flex; flex-direction: column;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-5);
    box-shadow: var(--shadow-sm); text-align: center;
}
.plan.is-featured {
    border: 2px solid var(--color-primary); box-shadow: var(--shadow-card);
    transform: translateY(-6px);
}
.plan-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; padding: 4px 12px;
    background: var(--color-primary); color: var(--color-on-accent);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
}
.plan-badge-soft { background: var(--color-primary-050); color: var(--color-primary-700); border: 1px solid var(--color-border-strong); }
.plan h3 { margin: 4px 0 var(--space-2); font-size: 1rem; color: var(--color-text-muted); font-weight: 600; }
.plan-price { margin: 0 0 var(--space-2); display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.plan-price b { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; letter-spacing: -.02em; color: var(--color-text); }
.plan-price span { font-size: var(--fs-small); color: var(--color-text-muted); }
.plan-note { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--color-text-muted); flex: 1; }
.plan .btn-primary, .plan .btn-secondary { text-decoration: none; display: inline-block; }
.pricing-fine { text-align: center; margin: var(--space-5) auto 0; max-width: 60ch; font-size: var(--fs-small); color: var(--color-text-muted); }
@media (max-width: 1020px) {
    .plans { grid-template-columns: 1fr 1fr; }
    .plan.is-featured { transform: none; }
}
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* --- FAQ --- */
.faq { padding: clamp(3.5rem, 9vh, 6rem) 0; background: var(--color-bg-warm); border-block: 1px solid var(--color-border); }
.faq-wrap { max-width: 760px; }
.faq-head { text-align: center; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.faq-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); margin: 10px 0 0; color: var(--color-text); }
.faq-list details {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}
.faq-list summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 16px 46px 16px 20px;
    font-weight: 700; color: var(--color-text); font-size: var(--fs-body);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: ''; position: absolute; right: 18px; top: 50%;
    width: 9px; height: 9px; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--dur-fast) ease;
}
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-list details p { margin: 0; padding: 0 20px 18px; color: var(--color-text-muted); font-size: var(--fs-small); line-height: 1.6; }

/* --- CLOSER: кнопка замість waitlist --- */
.closer-cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.closer-note { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.closer-note a { color: var(--color-primary-700); font-weight: 700; }



/* ============================================================
   v3: БОАРДЛЕС + СКЛО + ФІРМОВИЙ ГРАДІЄНТ (рецепт еталона courses/style.css)
   Фон = 4 великі плями палітри + зерно; секційні смуги зняті; картки — скло;
   паперові «предмети» (листівка, полароїди, штамп) лишаються паперовими.
   ============================================================ */

/* Фон сторінки — лендінгове комбо: перивінкл + пісок + лаванда + персик.
   НЕ background-attachment: fixed (ламає композитинг зі склом і iOS Safari),
   а fixed-псевдошар — той самий прийом, що body.country-bg::before на сайті. */
html { background: #e9e5ee; }
body.landing { background: transparent; }
body.landing::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    --grain-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.62'/%3E%3C/svg%3E");
    background-color: #e9e5ee;
    background-image: var(--grain-tex),
        radial-gradient(96% 98% at 90% 10%, rgba(88, 117, 220, 0.80), transparent 60%),
        radial-gradient(92% 90% at 8% 88%,  rgba(88, 117, 220, 0.55), transparent 58%),
        radial-gradient(90% 88% at 8% 6%,   rgba(234, 215, 184, 0.90), transparent 62%),
        radial-gradient(86% 86% at 92% 92%, rgba(255, 179, 138, 0.60), transparent 58%),
        radial-gradient(80% 82% at 50% 50%, rgba(228, 213, 232, 0.65), transparent 62%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 170px 170px, cover, cover, cover, cover, cover;
    background-blend-mode: overlay, normal, normal, normal, normal, normal;
}

/* Нав — скляний тулбар */
body.landing > header {
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
    box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* Секційні смуги зняті — контент прямо на градієнті */
.hero::before { content: none; }
.try, .inside, .faq { background: transparent; border-block: 0; }
.method { background: transparent; }
.method::after { content: none; }
.closer { background: transparent; border-top: 0; }

/* Eyebrow — скляний pill */
.eyebrow {
    display: inline-flex; align-items: center; padding: 5px 14px;
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    border: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--color-text) 20%, transparent);
}

/* Голий muted-текст на градієнті фейлить контраст (Б-аудит) → графіт */
.hero-sub, .try-lead, .try-meta,
.levels-head p, .levels-path p, .side-route p,
.inside-head p, .pricing-head p, .plan-note, .pricing-fine,
.method-head p, .closer p, .closer-note { color: var(--color-text); }

/* Смужка цифр героя — пунктир білим по склу */
.hero-stats { border-top: 2px dashed color-mix(in srgb, var(--color-surface) 80%, transparent); }
.hero-stats span { color: var(--color-text); }

/* Скляні картки: рамки зняті, тримаються на склі + тіні */
.levels-path li, .side-route, .b-card, .plan, .faq-list details {
    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    border: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
    box-shadow: var(--shadow-card);
}
.side-route { border-style: dashed; }
.plan.is-featured { border: 2px solid var(--color-primary); }
.b-card:hover { box-shadow: var(--shadow-lg); }
.b-icon { background: color-mix(in srgb, var(--color-primary-050) 80%, transparent); }
.lv-badge { background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.levels-path li:nth-child(4) .lv-badge,
.levels-path li:nth-child(5) .lv-badge { background: var(--color-primary); }
.levels-path li:not(:last-child)::after { border-top-color: color-mix(in srgb, var(--color-surface) 85%, transparent); }

/* Вікно карти — скляний «квиток на борт» */
.app-frame {
    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.frame-bar { background: color-mix(in srgb, var(--color-surface) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent); }

/* Чипи-країни — скляні pill */
.chip-country {
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-color: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.chip-country:hover { border-color: var(--color-primary); }
.chip-country.active { background: var(--color-primary); border-color: var(--color-primary); }

/* Футер — крем + графіт, без темного якоря (патерн 6 еталона) */
.l-foot-band { background: var(--color-bg); color: var(--color-text); }
.l-foot span:first-child { color: var(--color-text); }
.l-foot-links a { color: var(--color-primary-700); }
.l-foot-links a:hover { color: var(--color-primary); }

/* ============================================================
   v4: ВІЗУАЛЬНІ БАНДИ — темна карта, фото-секції з блюром/затемненням,
   однотонна смуга цін, стрічка справжніх обкладинок уроків
   ============================================================ */

/* --- Темна «нічна» смуга (карта): глибокий індиго, не яскравий ink --- */
.band-dark {
    background:
        radial-gradient(90% 90% at 85% 10%, color-mix(in srgb, var(--color-ink) 34%, transparent), transparent 60%),
        radial-gradient(80% 80% at 10% 90%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 58%),
        color-mix(in srgb, var(--color-ink) 36%, #14132b);
}
.band-dark .try-title { color: #fff; }
.band-dark .try-lead { color: rgba(255,255,255,.82); }
.band-dark .try-meta { color: rgba(255,255,255,.72); }
.band-dark .app-frame {
    background: color-mix(in srgb, var(--color-surface) 10%, transparent);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
}
.band-dark .frame-bar { background: rgba(255,255,255,.06); border-bottom-color: rgba(255,255,255,.12); }
.band-dark .frame-title { color: rgba(255,255,255,.65); }
.band-dark .frame-count { color: rgba(255,255,255,.75); }
.band-dark .frame-count b { color: #fff; }
.band-dark .map-hint { color: rgba(255,255,255,.55); }
.band-dark .chip-country {
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff;
}
.band-dark .chip-country:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.band-dark .chip-country.active { background: var(--color-primary); border-color: var(--color-primary); }
.band-dark .chip-country.done::after { color: #9ff0c6; }

/* --- Фото-банд: картинка з легким блюром + затемнення, текст білим --- */
.band-photo { position: relative; isolation: isolate; overflow: hidden; }
.band-photo::before {
    content: ''; position: absolute; inset: -20px; z-index: -2;
    background: var(--band-img) center / cover no-repeat;
    filter: blur(7px) saturate(1.05);
    transform: scale(1.04);
}
.band-photo::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(23,21,44,.58) 0%, rgba(23,21,44,.44) 45%, rgba(23,21,44,.62) 100%);
}
.band-photo h2, .band-photo h3 { color: #fff; }
.band-photo .eyebrow { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.band-photo .levels-head p { color: rgba(255,255,255,.85); }

/* Скляні картки на фото — трохи щільніші, щоб текст тримався */
.band-photo .levels-path li, .band-photo .side-route {
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
}
.band-photo .levels-path h3 { color: var(--color-text); }
.band-photo .side-route h3 { color: var(--color-primary-700); }
.band-photo .levels-path li:not(:last-child)::after { border-top-color: rgba(255,255,255,.55); }

/* Глибший фінал: більше затемнення, білий штамп і текст */
/* затемнення фіналу = рецепт героя (радіальне під текстом + вертикальний градієнт) */
.band-photo-deep::after {
    background:
        linear-gradient(180deg, rgba(23,21,44,.40) 0%, rgba(23,21,44,.32) 45%, rgba(23,21,44,.46) 100%);
}
/* мінімальний блур: кулі впізнавані, але фото не сперечається з текстом */
.band-photo-deep::before { filter: blur(2.5px); transform: scale(1.02); }
/* .closer І Є .band-photo-deep, тому селектор має бути без пробілу (був баг: текст лишався графітовим) */
.band-photo-deep.closer p { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.32); }
.band-photo-deep .closer-note { color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.band-photo-deep.closer h2 { text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.band-photo-deep .closer-note a { color: #fff; text-decoration: underline; }
.band-photo-deep .stamp-svg { color: rgba(255,255,255,.4); }
.band-photo-deep .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); box-shadow: 0 3px 0 rgba(0,0,0,.3); }

/* --- Однотонна спокійна смуга (ціни) --- */
.band-solid { background: var(--color-bg); border-block: 1px solid var(--color-border); }
.band-solid .plan, .band-solid .faq-list details {
    background: var(--color-surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--color-border);
}

/* --- Стрічка обкладинок уроків (marquee) --- */
.covers { padding: clamp(3rem, 7vh, 4.5rem) 0; overflow: hidden; }
.covers-head { text-align: center; margin-bottom: clamp(1.6rem, 4vh, 2.4rem); padding-inline: 4vw; }
.covers-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); margin: 0 0 var(--space-3); color: var(--color-text); }
.covers-head p { max-width: 56ch; margin: 0 auto; color: var(--color-text); text-wrap: pretty; }
.cov-row { display: flex; gap: 16px; width: max-content; margin-bottom: 16px; animation: cov-scroll 72s linear infinite; }
.cov-row.rev { animation-direction: reverse; animation-duration: 84s; }
.cov-row:hover { animation-play-state: paused; }
@keyframes cov-scroll { to { transform: translateX(-50%); } }
.cov-card {
    position: relative; margin: 0; width: clamp(190px, 22vw, 250px); flex: none;
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
    background: var(--color-surface);
}
.cov-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cov-card::after {
    content: ''; position: absolute; inset: 40% 0 0 0;
    background: linear-gradient(180deg, transparent, rgba(23,21,44,.78));
}
.cov-card figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 9px;
}
.cov-title {
    font-family: var(--font-head); font-weight: 700; font-size: .88rem; line-height: 1.25;
    color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cov-tag {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: #fff;
    letter-spacing: .03em; text-shadow: 0 1px 4px rgba(0,0,0,.45);
}

@media (prefers-reduced-motion: reduce) {
    .cov-row { animation: none; }
}

/* ============================================================
   v6: HERO-ФОТО — big sur на весь герой, контент по центру білим
   ============================================================ */
.hero-photo {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(4rem, 11vh, 7rem) 0 clamp(4.5rem, 12vh, 7.5rem);
}
.hero-photo::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: url('img/hero-bigsur.jpg') center 38% / cover no-repeat;
}
/* затемнення: щільніше по центру знизу, де текст */
.hero-photo::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(90% 80% at 50% 62%, rgba(23,21,44,.38), transparent 75%),
        linear-gradient(180deg, rgba(23,21,44,.42) 0%, rgba(23,21,44,.30) 45%, rgba(23,21,44,.55) 100%);
}
.hero-photo .hero-inner { display: block; }
.hero-photo .hero-copy {
    max-width: 46rem; margin-inline: auto; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.hero-photo .hero-copy h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-photo .hero-copy h1 .em { color: #cdd8ff; }
.hero-photo .eyebrow { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.hero-photo .hero-sub { color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.hero-photo .hero-sub b { color: #fff; }
.hero-photo .hero-cta { justify-content: center; }
.hero-photo .btn-secondary { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.hero-photo .btn-secondary:hover { border-color: #fff; }
.hero-photo .hero-stats { justify-content: center; border-top-color: rgba(255,255,255,.4); }
.hero-photo .hero-stats b { color: #fff; }
.hero-photo .hero-stats span { color: rgba(255,255,255,.85); }

/* Піни-слова на фоновому фото: по краях, не під текстом */
.hero-photo .hero-pins { position: absolute; inset: 0; z-index: 0; }
.hero-photo .hero-inner { position: relative; z-index: 1; }
@media (max-width: 880px) {
    .hero-photo .hero-pins { display: none; } /* мобільний: піни ховаємо, текст головний */
}

/* ============================================================
   v7: 11 ремарок дизайн-ревʼю — пауза-стрічка, ієрархія CTA/цін,
   ритм заголовків, старт-рівень, клікабельна стрічка, футер
   ============================================================ */

/* 1. Пауза між героєм і темною картою — тези на кремі */
.pause-strip {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 10px 18px; padding: 22px 4vw;
    background: var(--color-bg);
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-700);
}
.pause-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-secondary); }

/* 4. Ритм заголовків: метод = маніфест, найбільший після h1 */
.method-head h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem); }
.try-head .eyebrow { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); margin-bottom: 6px; }
.covers-head .eyebrow, .method-head .eyebrow { margin-bottom: 6px; }

/* 5. A1 — точка входу */
.lv-start { border: 2px solid var(--color-primary); }
.lv-start-tag {
    display: inline-block; margin-left: 8px; padding: 4px 10px;
    background: var(--color-primary); color: var(--color-on-accent);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
    vertical-align: 4px;
}

/* 6. Стрічка обкладинок — клікабельна */
.cov-link { display: block; flex: none; text-decoration: none; cursor: pointer; }
.cov-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-md); }


/* 2. CTA після стрічки */
.covers-cta { text-align: center; margin-top: clamp(1.4rem, 3vh, 2.2rem); padding-inline: 4vw; }
.covers-cta p { margin: 0 0 var(--space-3); color: var(--color-text); font-weight: 600; }

/* 3. Пробний тиждень — окремий «квиток» під сіткою з 3 планів */
.plans { grid-template-columns: repeat(3, 1fr); max-width: 920px; margin-inline: auto; }
.trial-ticket {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    max-width: 640px; margin: var(--space-5) auto 0;
    background: var(--color-surface); border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.tt-copy { display: flex; flex-direction: column; gap: 2px; }
.tt-copy b { color: var(--color-text); }
.tt-copy span { font-size: var(--fs-small); color: var(--color-text-muted); }
.tt-price { color: var(--color-primary-700); }
@media (max-width: 880px) { .plans { grid-template-columns: 1fr; max-width: 420px; } }

/* Футер: колонки + нижня смужка */
.l-foot { flex-direction: column; align-items: stretch; gap: var(--space-5); padding: clamp(2.4rem, 5vh, 3.4rem) 0 var(--space-6); }
.l-foot-cols {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(1.4rem, 3vw, 3rem);
}
.l-foot-brand { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--color-text); }
.l-foot-brandcol p {
    margin: 8px 0 0; max-width: 30ch;
    font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted);
}
.l-foot-col { display: flex; flex-direction: column; gap: 8px; }
.l-foot-col h3 {
    margin: 0 0 2px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--color-text);
}
.l-foot-col a {
    font-size: var(--fs-small); color: var(--color-text-muted); text-decoration: none;
    transition: color var(--dur-fast) ease;
}
.l-foot-col a:hover { color: var(--color-primary); }
.l-foot-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
    padding-top: var(--space-4); border-top: 1px solid var(--color-border);
    font-size: var(--fs-xs); color: var(--color-text-muted);
}
@media (max-width: 820px) {
    .l-foot-cols { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
    .l-foot-brandcol { grid-column: 1 / -1; }
    /* «Документи» лишаються самі на третьому рядку — даємо їм усю ширину,
       інакше довгі назви й пошта переносяться в півколонці (Юля, 06.08).
       Посилання стають рядком, що переноситься, — простір використано. */
    .l-foot-col:last-child {
        grid-column: 1 / -1;
        flex-flow: row wrap; align-items: baseline; column-gap: 20px; row-gap: 8px;
    }
    .l-foot-col:last-child h3 { flex: 0 0 100%; }
}

/* Блок «від авторки» (заготовка): стилі готові наперед */
.author { padding: clamp(3.5rem, 8vh, 5.5rem) 0; }
.author-in {
    display: grid; grid-template-columns: 340px 1fr; gap: clamp(1.8rem, 4vw, 3.2rem);
    align-items: center; max-width: 980px;
}
.author-photo {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 6px; background: var(--color-surface);
    padding: 10px 10px 14px; box-shadow: var(--shadow-lg); transform: rotate(-2deg);
}
.author-copy h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); margin: 10px 0 var(--space-3); }
.author-copy p { color: var(--color-text); margin: 0 0 var(--space-3); }
.author-call {
    font-family: var(--font-example); font-style: italic;
    font-size: 1.06rem; line-height: 1.5; color: var(--color-primary-700);
}
.author-sign { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--color-text); }
@media (max-width: 700px) {
    .author-in { grid-template-columns: 1fr; max-width: 420px; justify-items: center; text-align: center; }
    .author-photo { max-width: 300px; margin-inline: auto; transform: rotate(-2deg); }
    .author-copy { text-align: left; }        /* сам текст лишається зліва, читабельніше */
    .author-copy .eyebrow { align-self: center; }
}

/* ============================================================
   v8: НАВ — прозорий на фото-герої → скло після скролу (40px),
   scrollspy, ховер-підкреслення, мобільний бургер зі скляним меню
   ============================================================ */

/* Дефолт (верх сторінки, фото-герой): панель повністю прозора, текст білий.
   fixed (не sticky) — щоб фото героя заходило ПІД панель. */
body.landing > header {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* компенсуємо висоту панелі верхнім відступом героя */
.hero-photo { padding-top: clamp(6rem, 15vh, 9.5rem); }
body.landing > header .l-logo { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
body.landing > header .l-globe { color: #fff; }
body.landing > header .l-anchors a { color: rgba(255,255,255,.88); }
body.landing > header .l-anchors a:hover { color: #fff; }
body.landing > header .l-login { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* Після скролу >40px (або з відкритим меню) — щільне світле скло.
   85% білого + saturate: на темному фото 55% давало брудно-сіру плівку. */
body.landing > header.is-solid {
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
    border-bottom-color: var(--color-border);
    box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--color-text) 16%, transparent);
}
body.landing > header.is-solid .l-logo { color: var(--color-text); text-shadow: none; }
body.landing > header.is-solid .l-globe { color: var(--color-primary); }
body.landing > header.is-solid .l-anchors a { color: var(--color-text-muted); }
body.landing > header.is-solid .l-anchors a:hover { color: var(--color-primary); }
body.landing > header.is-solid .l-login { color: var(--color-primary-700); text-shadow: none; }

/* Ховер-підкреслення якорів (виїжджає зліва) + активний стан scrollspy */
.l-anchors a {
    position: relative; padding-bottom: 4px;
}
.l-anchors a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: currentColor; border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .15s var(--ease);
}
.l-anchors a:hover::after { transform: scaleX(1); }
.l-anchors a.active { color: #fff; }
body.landing > header.is-solid .l-anchors a.active { color: var(--color-primary); }
.l-anchors a.active::after { transform: scaleX(1); }

/* Бургер: три білі/графітові риски, ховається на десктопі */
.l-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 10px;
    background: transparent; border: 0; cursor: pointer;
}
.l-burger span {
    display: block; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .2s var(--ease), opacity .15s ease;
}
body.landing > header.is-solid .l-burger span { background: var(--color-text); }
.l-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.l-burger.open span:nth-child(2) { opacity: 0; }
.l-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Випадне скляне меню (мобільне) */
.l-menu {
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
    box-shadow: 0 18px 32px -18px rgba(54,50,66,.35);
    padding: 6px 4vw 12px;
}
.l-menu[hidden] { display: none; }
.l-menu a {
    padding: 13px 4px; text-decoration: none; font-weight: 700;
    color: var(--color-text); border-bottom: 1px dashed var(--color-border);
    font-size: var(--fs-body);
}
.l-menu a:last-child { border-bottom: 0; }
.l-menu a.active { color: var(--color-primary); }
.l-menu-login { color: var(--color-primary-700); }

@media (max-width: 880px) {
    .l-burger { display: flex; }
    .l-login { display: none; }
}
@media (min-width: 881px) {
    .l-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.landing > header, .l-anchors a::after, .l-burger span { transition: none; }
}

/* Лого = бренд платформи: глобус + назва одним кольором (без різнокольорових слів) */
.l-logo { align-items: center; gap: 8px; }
.l-globe { display: inline-flex; align-items: center; transition: transform .5s var(--ease); }
.l-logo:hover .l-globe { transform: rotate(28deg) scale(1.12); }
@media (prefers-reduced-motion: reduce) { .l-globe { transition: none; } }

/* ============================================================
   v9: ЯКОРІ-КАПСУЛА — скляна піґулка-сегмент замість голих слів
   (дзеркало chip-switch системи: трек + залитий активний сегмент)
   ============================================================ */
.l-anchors {
    gap: 4px; padding: 5px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background .2s ease, border-color .2s ease;
}
.l-anchors a {
    padding: 7px 15px; border-radius: var(--radius-pill);
    transition: background .15s ease, color .15s ease;
}
/* старе ховер-підкреслення більше не потрібне */
.l-anchors a::after { content: none; }
.l-anchors a:hover { background: rgba(255,255,255,.16); }
/* активний сегмент на фото — біла заливка з графітом */
body.landing > header .l-anchors a.active { background: rgba(255,255,255,.92); color: var(--color-text); }

/* на скляній скрол-панелі: без спільного контейнера — голі лінки,
   активний лишається сегментом-піґулкою */
body.landing > header.is-solid .l-anchors {
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.landing > header.is-solid .l-anchors a { color: var(--color-primary-700); }
body.landing > header.is-solid .l-anchors a:hover { background: color-mix(in srgb, var(--color-primary-100) 70%, transparent); color: var(--color-primary-700); }
body.landing > header.is-solid .l-anchors a.active { background: var(--color-primary); color: var(--color-on-accent); }

/* Вузький мобільний: скорочена назва «ETG World» (повна переносилась на 2 рядки) */
.l-name-short { display: none; }
@media (max-width: 560px) {
    .l-name-full { display: none; }
    .l-name-short { display: inline; }
}

/* ============================================================
   v10: ГЕРОЙ — повний екран, більший заголовок, живі піни, scroll-хінт
   ============================================================ */
.hero-photo {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(5rem, 12vh, 7rem); padding-bottom: clamp(4rem, 10vh, 6rem);
}
.hero-photo .hero-copy h1 {
    font-size: clamp(2.6rem, 1.6rem + 3.9vw, 4.6rem);
    letter-spacing: -.03em;
}

/* Живі піни: погойдування, ховер, клік = слово.
   z-index 2 — вище центрованого контенту (hero-inner z:1), інакше його
   прозоре полотно з'їдає кліки по бокових пінах; контейнер сам не клікабельний. */
.hero-photo .hero-pins { pointer-events: none; z-index: 2; }
.hero-photo .pin {
    pointer-events: auto; cursor: pointer;
    background: transparent; border: 0; padding: 0; text-align: left;
    animation: pinin .6s var(--ease) forwards, pin-float 4.2s ease-in-out infinite alternate;
}
.hero-photo .pin:nth-child(1) { animation-delay: .7s, .9s; }
.hero-photo .pin:nth-child(2) { animation-delay: 1.05s, 0s; }
.hero-photo .pin:nth-child(3) { animation-delay: 1.4s, 1.8s; }
@keyframes pin-float { from { translate: 0 0; } to { translate: 0 -7px; } }
.hero-photo .pin .pin-card { transition: transform .15s var(--ease), box-shadow .15s ease; }
.hero-photo .pin:hover .pin-card,
.hero-photo .pin:focus-visible .pin-card { transform: scale(1.07); box-shadow: var(--shadow-lg); }
.hero-photo .pin:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 10px; }

/* Scroll-хінт: стрілочка внизу, м'яко пульсує */
.hero-scroll {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
    animation: hint-bob 2.2s ease-in-out infinite;
    transition: color .15s ease, border-color .15s ease;
}
.hero-scroll:hover { color: #fff; border-color: rgba(255,255,255,.7); }
@keyframes hint-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
    .hero-photo .pin { animation: pinin .01s forwards; }
    .hero-scroll { animation: none; }
}

/* H1 героя: другий рядок «до вільної англійської.» одним рядком на широких */
@media (min-width: 881px) {
    .hero-photo .h1-l2 { white-space: nowrap; }
    .hero-photo .hero-copy { max-width: 56rem; }
}

/* Пін-крапки героя: персик замість перивінклу — теплий контраст на холодному фото */
.hero-photo .pin-dot {
    background: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 12px rgba(255,179,138,.55), 0 2px 6px rgba(54,50,66,.35);
}

/* Ховер/актив на білій панелі губились — легка обводка піґулки (без зсуву макета) */
body.landing > header.is-solid .l-anchors a:hover {
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
body.landing > header.is-solid .l-anchors a.active {
    box-shadow: inset 0 0 0 1px var(--color-primary-700);
}

/* ============================================================
   v11: НІЧНА КАРТА — індиго-вода, темна суша, країни світяться персиком;
   CTA після 3 слів; чипи скрол-рядом; рамка 1180px
   ============================================================ */

/* 4. Рамка ширша */
.try .app-frame { width: min(1180px, 94vw); }

/* 1. Нічний режим вікна карти (перша версія — Юля обрала її після проб) */
.band-dark .frame-body { background: #191833; }
.band-dark .frame-body .graticule path { stroke: rgba(255,255,255,.05); }
.band-dark .frame-body svg path[id^="c-"] {
    fill: #2c2b52; stroke: #3a3968; stroke-width: .5;
}
.band-dark .frame-body svg path.lit {
    fill: color-mix(in srgb, var(--color-secondary) 55%, #2c2b52);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-secondary) 45%, transparent));
}
.band-dark .frame-body svg path.lit:hover { fill: var(--color-secondary); }
.band-dark .frame-body svg path.lit.picked {
    fill: var(--color-secondary);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-secondary) 75%, transparent));
}
.band-dark .frame-body svg path.done { fill: var(--color-success); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-success) 55%, transparent)); }
.band-dark .frame-body .marker { fill: var(--color-secondary); stroke: rgba(255,255,255,.85); }
.band-dark .frame-body .marker-ring { stroke: var(--color-secondary); }

/* 2. CTA-плашка в вікні карти (темне скло, зʼявляється знизу по центру) */
.demo-cta {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    z-index: 3; width: min(440px, 92%);
    display: flex; align-items: center; gap: 14px;
    background: rgba(23,21,44,.82);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-md); padding: 14px 40px 14px 18px;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.6);
    animation: demo-cta-in .35s var(--ease);
}
.demo-cta[hidden] { display: none; }
@keyframes demo-cta-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }
.demo-cta p { margin: 0; flex: 1; color: #fff; font-size: var(--fs-small); line-height: 1.4; }
.demo-cta .btn-primary { text-decoration: none; white-space: nowrap; padding: 10px 16px; font-size: var(--fs-small); }
.demo-cta-close {
    position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
    border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
}
.demo-cta-close:hover { background: rgba(255,255,255,.2); color: #fff; }

/* 3. Чипи одним скрол-рядом */
.band-dark .chips {
    flex-wrap: nowrap; justify-content: flex-start;
    max-width: min(1180px, 94vw); width: min(1180px, 94vw);
    overflow-x: auto; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.band-dark .chips::-webkit-scrollbar { display: none; }
.band-dark .chip-country { flex: none; }

/* ============================================================
   v12: КАРТКА КРАЇНИ в демо — маршрут з уроків замість картки слова
   ============================================================ */
.country-card { width: min(320px, 88%); padding: 16px 16px 14px; }
.cc-meta {
    margin: 2px 0 10px; font-size: var(--fs-small); color: var(--color-text-muted);
}
.cc-meta b { font-family: var(--font-head); font-weight: 800; color: var(--color-text); font-size: 1.05rem; }
.cc-lessons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cc-lesson {
    display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px;
    background: var(--color-bg); border-radius: var(--radius-sm);
    padding: 6px 8px 6px 6px; text-decoration: none;
    transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.cc-lesson:hover { background: var(--color-primary-050); transform: translateX(2px); }
.cc-lesson img { width: 52px; height: 38px; object-fit: cover; border-radius: 6px; display: block; }
.cc-t {
    font-size: var(--fs-xs); font-weight: 600; color: var(--color-text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-lv {
    font-style: normal; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
    color: var(--color-primary-700); background: var(--color-primary-050);
    border-radius: var(--radius-pill); padding: 3px 8px;
}
/* слово-сувенір: тихий рядок-кнопка з динаміком */
.cc-word {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; width: 100%;
    background: transparent; border: 0; border-top: 1px dashed var(--color-border-strong);
    padding: 10px 2px 10px; margin: 0 0 10px; cursor: pointer; text-align: left;
    color: var(--color-primary); font-size: var(--fs-small);
}
.cc-word svg { align-self: center; flex: none; }
.cc-word:hover .ccw-en { color: var(--color-primary); }
.ccw-en { font-family: var(--font-head); font-weight: 700; color: var(--color-text); }
.ccw-ipa { font-style: normal; font-family: var(--font-mono); font-size: .72rem; color: var(--color-primary); white-space: nowrap; }
.ccw-tr { font-style: normal; font-family: var(--font-example); font-size: .85rem; color: var(--color-text-muted); white-space: nowrap; }
.cc-cta { width: 100%; text-decoration: none; font-size: var(--fs-small); padding: 11px 16px; }

@media (max-width: 560px) {
    .country-card { right: 6px; bottom: 6px; width: min(300px, 94%); }
}

/* ============================================================
   v13: СПРАВЖНЄ ЗАВДАННЯ в картці країни (single_choice з уроку)
   ============================================================ */
.cc-task {
    border-top: 1px dashed var(--color-border-strong);
    padding-top: 10px; margin-bottom: 2px;
}
.cc-task[hidden] { display: none; }
.cc-task-instr {
    margin: 0 0 6px; font-family: var(--font-mono); font-size: var(--fs-xs);
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-700);
}
.cc-task-q { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 600; color: var(--color-text); }
.cc-task-q[hidden] { display: none; }
.cc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-opt {
    font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
    background: var(--color-bg); color: var(--color-text);
    border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill);
    padding: 7px 13px; transition: var(--transition);
}
.cc-opt:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary-700); }
.cc-opt.ok { background: var(--color-success-100); border-color: var(--color-success); color: var(--color-success-700); }
.cc-opt.bad { background: var(--color-danger-100, #fdecec); border-color: var(--color-danger, #d9534f); color: var(--color-danger-700, #a33); opacity: .8; cursor: default; }
.cc-opts.solved .cc-opt:not(.ok) { opacity: .45; cursor: default; }
.cc-why { margin: 8px 0 0; font-size: var(--fs-xs); line-height: 1.45; }
.cc-why[hidden] { display: none; }
.cc-why.is-ok { color: var(--color-success-700); }
.cc-why.is-bad { color: var(--color-danger-700, #a33); }
.cc-from {
    margin: 8px 0 0; font-size: 11px; color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Картка стала вищою — трохи ширша й з власним скролом, якщо не влазить */
.country-card { width: min(300px, 88%); max-height: calc(100% - 24px); overflow-y: auto; }

/* Мобільний: карта зверху, картка країни під нею (раніше обрізалась рамкою) */
@media (max-width: 700px) {
    .band-dark .app-frame { overflow: visible; }
    .band-dark .frame-body { aspect-ratio: auto; display: block; border-radius: 0 0 var(--radius-md) var(--radius-md); }
    .band-dark .frame-body .worldmap { position: relative; inset: auto; height: 52vw; min-height: 190px; }
    .band-dark .map-hint { position: static; display: block; text-align: center; padding: 4px 0 0; }
    .band-dark .country-card {
        position: static; width: auto; max-height: none; overflow: hidden;
        margin: 10px; border-radius: var(--radius-md);
    }
    .band-dark .demo-cta { position: static; transform: none; width: auto; margin: 0 10px 10px; animation: none; }
}

/* v14: розклад уроків за рівнями — тихий рядок чисел */
.cc-split {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 12px;
    font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted);
}
.cc-split span { display: inline-flex; align-items: baseline; gap: 4px; }
.cc-split i { font-style: normal; font-weight: 700; color: var(--color-primary); }

/* v15: фото країни, що розчиняється в картці (блур + світлішання донизу) */
.country-card { overflow: hidden auto; }   /* position лишається absolute з .lesson */
.cc-hero {
    position: relative; aspect-ratio: 720 / 270; height: auto;
    margin: -16px -16px -14px;
    background-position: center 40%; background-size: cover; background-repeat: no-repeat;
    pointer-events: none;
}
/* перехід: до низу картинка розмивається і йде в колір картки */
.cc-hero::after {
    content: ''; position: absolute; inset: 0;
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        color-mix(in srgb, var(--color-surface) 55%, transparent) 55%,
        var(--color-surface) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 72%);
            mask-image: linear-gradient(180deg, transparent 34%, #000 72%);
}
/* назва країни — під фото, графітом (на світлому хвості переходу) */
.country-card .lesson-top { position: relative; z-index: 1; margin-bottom: 6px; }
/* хрестик — скляний поверх фото */
.country-card .lesson-close {
    background: rgba(255,255,255,.32); color: var(--color-text);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.country-card .lesson-close:hover { background: rgba(255,255,255,.6); }


/* ============================================================
   v16: МЕТОД — анатомія одного справжнього уроку (замість полароїдів)
   ============================================================ */
.anat {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.6rem);
}
.an-card {
    position: relative;
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    border: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
    border-radius: var(--radius-lg); padding: var(--space-5);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column;
}
.an-num {
    font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .1em; color: var(--color-primary); margin-bottom: 8px;
}
.an-card h3 { font-size: 1.05rem; margin: 0 0 .35rem; color: var(--color-text); }
.an-card > p { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--color-text); }
.an-demo {
    margin-top: auto; background: var(--color-bg);
    border-radius: var(--radius-md); padding: 12px 14px;
}

/* 01 — фото місця */
.an-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.an-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.an-q { margin: 10px 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text); }

/* 02 — факт */
.an-fact-lbl {
    display: block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-secondary-700); margin-bottom: 6px;
}
.an-fact p { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--color-text); }

/* 03/04 — слова й вимова (клікабельні, грають озвучку) */
.an-words, .an-pron { display: flex; flex-wrap: wrap; gap: 6px; }
.an-word {
    display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
    font: inherit; font-size: var(--fs-xs);
    background: var(--color-surface); color: var(--color-primary);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
    padding: 6px 12px; transition: var(--transition);
}
.an-word:hover { border-color: var(--color-primary); }
.an-word svg { align-self: center; flex: none; }
.an-word b { font-family: var(--font-head); color: var(--color-text); }
.an-word u { text-decoration: none; color: var(--color-primary); font-weight: 800; }
.an-word em { font-style: normal; font-family: var(--font-example); color: var(--color-text-muted); }
.an-example {
    flex-basis: 100%; margin: 4px 0 0; font-family: var(--font-example);
    font-size: var(--fs-xs); color: var(--color-text-muted);
}

/* 05 — вправа */
.an-ex-q { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text); }
.an-ex-chip {
    display: inline-block; margin-right: 6px; padding: 5px 12px;
    border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600;
    background: var(--color-surface); border: 1.5px solid var(--color-border-strong); color: var(--color-text);
}
.an-ex-chip.is-ok {
    background: var(--color-success-100); border-color: var(--color-success); color: var(--color-success-700);
}
.an-ex-chip.is-ok::after { content: " ✓"; }

/* 06 — фрази */
.an-say p {
    margin: 0 0 5px; font-family: var(--font-example); font-size: var(--fs-xs);
    color: var(--color-text);
}
.an-say p:last-child { margin-bottom: 0; }

.anat-foot {
    width: min(1180px, 92vw); margin: clamp(1.6rem, 4vh, 2.4rem) auto 0;
    text-align: center;
}
.anat-foot p {
    max-width: 68ch; margin: 0 auto;
    font-size: var(--fs-small); line-height: 1.6; color: var(--color-text);
}
.anat-foot b { color: var(--color-text); }

@media (max-width: 980px) { .anat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .anat { grid-template-columns: 1fr; } }


/* ============================================================
   v17: «Один світ, два маршрути» — дві великі картки, без зайвого
   ============================================================ */
.ways {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
.way {
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--color-surface) 60%, transparent);
    border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.6vw, 2rem);
    box-shadow: var(--shadow-lg);
}
/* без плашки — сама лінійна іконка (плашка зливалася з карткою) */
.way-ico {
    display: block; margin-bottom: 12px; color: var(--color-primary);
}
.way-ico svg { display: block; width: 28px; height: 28px; }
.way h3 { font-size: 1.25rem; margin: 0 0 .5rem; color: var(--color-text); }
.way > p {
    margin: 0 0 var(--space-5); font-size: var(--fs-small); line-height: 1.6;
    color: var(--color-text);
}

/* Скрін продукту в картці — «вікно» в реальний інтерфейс */
.way-shot { margin: auto 0 0; padding: 0; }
.way-shot img {
    display: block; width: 100%; height: auto; aspect-ratio: 1.68;  /* обидва скріни однакові */
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 26px -12px rgba(54,50,66,.45);
}
.way-shot figcaption {
    margin-top: 8px; font-family: var(--font-mono);
    font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: .02em;
}

@media (max-width: 880px) { .ways { grid-template-columns: 1fr; } }

/* Ліди й підписи: без «висячих» слів в останньому рядку */
.hero-sub, .try-lead, .levels-head p, .method-head p, .inside-head p,
.pricing-head p, .anat-foot p, .covers-cta p, .faq-list details p,
.way > p, .an-card > p {
    text-wrap: pretty;
}


/* ============================================================
   v18: «Що всередині» — акордеон зліва ↔ скрін справа
   ============================================================ */
.feat {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center;
    /* уся секція живе на одній скляній плашці */
    background: color-mix(in srgb, var(--color-surface) 84%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--color-surface) 60%, transparent);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.4rem);
    box-shadow: var(--shadow-lg);
}

/* лівий список */
.feat-list { display: flex; flex-direction: column; gap: 4px; }
.feat-item { border-bottom: 1px dashed var(--color-border-strong); }
.feat-item:last-child { border-bottom: 0; }
.feat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; padding: 16px 4px; cursor: pointer;
    background: transparent; border: 0; text-align: left;
    font: inherit; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
    color: var(--color-text-muted);
    transition: color var(--dur-fast) ease;
}
.feat-head:hover { color: var(--color-text); }
.feat-item.is-open .feat-head { color: var(--color-primary-700); }
/* значок-плюс, що стає мінусом */
.feat-head i {
    position: relative; flex: none; width: 18px; height: 18px;
    border-radius: 50%; border: 1.5px solid currentColor; opacity: .55;
}
.feat-head i::before, .feat-head i::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 1.5px; background: currentColor; border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) ease;
}
.feat-head i::after { transform: translate(-50%, -50%) rotate(90deg); }
.feat-item.is-open .feat-head i { opacity: 1; }
.feat-item.is-open .feat-head i::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.feat-body { padding: 0 4px 18px; }
.feat-body[hidden] { display: none; }
.feat-body p {
    margin: 0 0 10px; font-size: var(--fs-small); line-height: 1.6; color: var(--color-text);
    max-width: 46ch;
}
.feat-body p:last-child { margin-bottom: 0; }
.feat-body b { color: var(--color-primary-700); font-weight: 700; }

/* права сцена — «вікно» з панеллю, щоб скрін не зливався з плашкою */
.feat-stage {
    border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--color-border-strong);
    background: var(--color-ink);
    box-shadow: 0 14px 34px -16px rgba(54,50,66,.5);
}
.feat-bar {
    display: flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 12px;
    background: color-mix(in srgb, var(--color-ink) 92%, #000);
}
.feat-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); }
.feat-bar span:first-child { background: var(--color-secondary); }
.feat-shots { position: relative; aspect-ratio: 1100 / 646; }   /* точна пропорція скрінів — без кропу */
.feat-shots img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.015);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.feat-shots img.is-on { opacity: 1; transform: none; }

@media (max-width: 880px) {
    .feat { grid-template-columns: 1fr; }
    .feat-stage { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
    .feat-shots img, .feat-head, .feat-head i::before, .feat-head i::after { transition: none; }
}

/* Посилання на блог в історії авторки */
.author-link {
    color: var(--color-primary-700); font-weight: 600;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.author-link:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); }

/* Слова-піни у фіналі — рима до героя (по краях, подалі від кнопки) */
.closer-pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.closer-pins .pin {
    pointer-events: auto; cursor: pointer;
    background: transparent; border: 0; padding: 0; text-align: left;
    animation: pinin .6s var(--ease) forwards, pin-float 4.6s ease-in-out infinite alternate;
}
.closer-pins .pin:nth-child(1) { animation-delay: .3s, .6s; }
.closer-pins .pin:nth-child(2) { animation-delay: .55s, 2.1s; }
.closer-pins .pin-dot {
    background: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 12px rgba(255,179,138,.55), 0 2px 6px rgba(54,50,66,.35);
}
.closer-pins .pin .pin-card { transition: transform .15s var(--ease), box-shadow .15s ease; }
.closer-pins .pin:hover .pin-card,
.closer-pins .pin:focus-visible .pin-card { transform: scale(1.07); box-shadow: var(--shadow-lg); }
.closer-pins .pin:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 10px; }
.closer .closer-in { position: relative; z-index: 2; }
/* підкладку під текстом прибрано (на мобільному читалась плямою) —
   контраст тримають тіні тексту й загальний градієнт секції */
@media (max-width: 880px) { .closer-pins { display: none; } }
@media (prefers-reduced-motion: reduce) { .closer-pins .pin { animation: pinin .01s forwards; } }

/* ============================================================
   v19: ЮРИДИЧНІ СТОРІНКИ (оферта, політика конфіденційності)
   ============================================================ */
/* специфічність має перебити body.landing::before і body.landing > header */
body.legal-page { background: var(--color-bg); }
body.legal-page::before { content: none; }      /* без градієнтного фону лендінгу */
body.legal-page > header.legal-top {
    position: static; display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); width: min(820px, 92vw); margin: 0 auto;
    padding: var(--space-5) 0;
    background: transparent; border-bottom: 1px solid var(--color-border);
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.legal-page > header .l-logo { color: var(--color-text); font-size: 1.05rem; text-shadow: none; }
body.legal-page > header .l-globe { color: var(--color-primary); }
.legal-back { font-size: var(--fs-small); font-weight: 700; color: var(--color-primary-700); text-decoration: none; }
.legal-back:hover { color: var(--color-primary); }

.legal {
    width: min(820px, 92vw); margin: 0 auto;
    padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(3rem, 8vh, 5rem);
    color: var(--color-text);
}
.legal-eyebrow {
    margin: 0 0 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-700);
}
.legal h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); margin: 0 0 8px; }
.legal-date { margin: 0 0 var(--space-6); font-size: var(--fs-small); color: var(--color-text-muted); }
.legal-intro {
    margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5);
    background: var(--color-surface); border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: var(--fs-body); line-height: 1.6;
}
.legal h2 {
    font-size: 1.18rem; margin: var(--space-6) 0 var(--space-3);
    padding-top: var(--space-4); border-top: 1px dashed var(--color-border-strong);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p { margin: 0 0 10px; font-size: var(--fs-small); line-height: 1.65; }
.legal ul { margin: 0 0 var(--space-4); padding-left: 22px; }
.legal li { margin-bottom: 6px; font-size: var(--fs-small); line-height: 1.6; }
.legal a { color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--color-primary); }
.legal b { font-weight: 700; }
.legal-req {
    font-style: normal; margin-top: var(--space-3);
    padding: var(--space-4) var(--space-5); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: var(--fs-small); line-height: 1.7;
}
.legal-page .l-foot-bottom a { color: var(--color-primary-700); }