@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}/* ============================================================
   Sprechai / Шпрехай — shared design system
   Base tokens & components reproduced from the existing homepage,
   extended with new components for course, pSEO, club, contact,
   link-in-bio and Performance Max landing pages.
   ============================================================ */

:root{
  /* ===== AUDIT-FIX токен-слой (єдиний із кабінетом; теплий нейтраль) ===== */
  /* поверхні */
  --bg:#FFFFFF; --card:#FFFFFF; --soft:#F1EFE6; --soft-2:#E9E6DB;
  /* текст — контраст підтверджено (на білому): ink 17:1, ink-2 7.9:1, ink-3 5.4:1 */
  --ink:#1B1A17; --ink-2:#54514A; --ink-3:#6F6A5C; --ink-press:#34322A;
  /* лінії */
  --line:#E6E3D8; --line-2:#D9D5C7;
  /* бренд — accent-deep тепер 6.0:1 на жовтому (було #A9791A = 3.4:1) */
  --accent:#FFCE2E; --accent-soft:#FFF4CC; --accent-deep:#7A560F;
  --brand:#FFCE2E; --brand-soft:#FFF4CC; --brand-ink:#7A560F;
  /* семантика — текст на *-bg ≥ 4.5:1 */
  --ok:#136B30; --ok-soft:#E7F4EA; --ok-bg:#E7F4EA;
  --warn:#8F4A1E; --warn-bg:#FBEDE3; --bad:#B23B2E; --bad-bg:#FBE8E5; --info:#1F4FB0; --info-bg:#E9EFFB;
  /* типографіка — шкала ~1.2–1.25 (для компонентів; rem-розміри сторінок мігрують окремо) */
  --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:16px;
  --fs-lg:18px;--fs-xl:21px;--fs-2xl:25px;--fs-3xl:31px;--fs-display:39px;
  --lh-tight:1.2;--lh:1.5;--lh-loose:1.6;
  /* відступи 4/8 */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;
  /* радіуси — 6 ступенів; legacy --r/--r-sm збережені як аліаси (16→14, 10→8) */
  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px; --r:14px;
  /* тіні (теплі) */
  --shadow:0 1px 2px rgba(28,27,22,.05),0 12px 28px -16px rgba(28,27,22,.16);
  --shadow-sm:0 1px 2px rgba(28,27,22,.05);
  --maxw:1180px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent-soft);color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap--narrow{max-width:860px}
img,svg{display:block}a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.12}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}.skip:focus{left:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font-family:inherit;font-weight:700;font-size:.97rem;padding:13px 22px;border:none;border-radius:var(--r-sm);cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:var(--shadow-sm)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover{background:#2a2e35;transform:translateY(-1px)}.btn:hover .ar{transform:translateX(3px)}
.btn--sec{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn--sec:hover{background:var(--soft);border-color:#D7DAE2;transform:none}
.btn--accent{background:var(--accent);color:var(--ink)}
.btn--accent:hover{background:var(--accent-soft)}
.btn--lg{padding:16px 28px;font-size:1.05rem}
.btn--block{width:100%;justify-content:center}
:where(a,button,[role="button"],input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}

/* header */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-weight:800;font-size:1.3rem;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:2px}
.brand .d{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:3px;margin-bottom:-1px}
.nav-menu{display:flex;align-items:center;gap:30px}
.nav-menu nav{display:flex;gap:28px}
.nav-menu nav a{font-size:.94rem;font-weight:600;color:var(--ink-2);transition:color .2s}
.nav-menu nav a:hover{color:var(--ink)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);display:block}
.mobile{display:none}

/* breadcrumb */
.crumbs{font-size:.86rem;color:var(--ink-3);padding:22px 0 0}
.crumbs a{color:var(--ink-2)}.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 8px;color:var(--line)}

/* hero */
.hero{padding:clamp(48px,7vh,84px) 0 clamp(52px,8vh,92px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.2vw,3.7rem);margin:20px 0 0}
.hl{background:var(--accent-soft);padding:0 .12em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .lead{font-size:1.17rem;color:var(--ink-2);max-width:480px;margin:22px 0 0}
.hero .lead b{color:var(--ink);font-weight:700}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:.93rem;color:var(--ink-2)}
.stars{color:var(--accent-deep);letter-spacing:1px;font-size:.9rem}
.hero-trust .sep{width:4px;height:4px;border-radius:50%;background:var(--ink-3)}

/* hero visual */
.panel{background:var(--soft);border:1px solid var(--line);border-radius:24px;padding:30px}
.lcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.lc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.lc-tag{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);padding:5px 11px;border-radius:999px}
.lc-au{width:38px;height:38px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.lc-au svg{width:14px;height:14px;margin-left:2px}
.lc-word{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.lc-ipa{color:var(--ink-3);font-size:.93rem;font-weight:500;margin-top:2px}
.lc-rule{height:1px;background:var(--line);margin:16px 0}
.lc-tr{font-weight:700;font-size:1.06rem}
.lc-ex{color:var(--ink-3);font-size:.9rem;margin-top:6px}
.mini-row{display:flex;gap:10px;margin-top:14px}
.mini{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm)}
.mini .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.mini .ic.y{background:var(--accent-soft);color:var(--accent-deep)}
.mini .ic.g{background:var(--ok-soft);color:var(--ok)}
.mini .ic svg{width:16px;height:16px}
.mini .t{font-size:.8rem;color:var(--ink-3);font-weight:600;line-height:1.2}
.mini .v{font-size:.98rem;font-weight:700}

/* exam strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.strip .wrap{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;padding:24px 28px}
.strip .lbl{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.strip .ex{display:flex;gap:12px 26px;flex-wrap:wrap}
.strip .ex a,.strip .ex span{font-weight:700;font-size:1.02rem;color:var(--ink-2);transition:color .2s}
.strip .ex a:hover{color:var(--ink)}

/* sections */
.sec{padding:clamp(64px,9vh,108px) 0}
.sec.soft{background:var(--soft)}
.sec.tight{padding:clamp(44px,6vh,72px) 0}
.sec-head{max-width:680px;margin:0 auto;text-align:center}
.sec-head.left{margin:0;text-align:left}
.sec-head .eyebrow{margin-bottom:16px}
.h2{font-size:clamp(1.9rem,3.8vw,2.7rem)}
.lede{color:var(--ink-2);font-size:1.1rem;margin-top:16px}

/* consensus / direct-answer block (GEO / SGE) */
.answer{max-width:760px;margin:30px auto 0;background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:26px 28px}
.answer.left{margin:30px 0 0}
.answer p{font-size:1.12rem;line-height:1.55}
.answer p+p{margin-top:12px}
.answer b{font-weight:700}
.answer .facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.answer .facts span{font-size:.92rem;color:var(--ink-2);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.answer .facts b{color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.step{position:relative}
.step .n{width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.05rem;margin-bottom:18px}
.step h3{font-size:1.22rem;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:1rem}
.step::after{content:"";position:absolute;top:20px;left:56px;right:-12px;height:1px;background:var(--line)}
.steps .step:last-child::after{display:none}

/* curriculum / program (numbered weeks for course page) */
.program{margin-top:44px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.prow{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 26px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow .wk{font-weight:800;color:var(--accent-deep);font-size:.95rem;letter-spacing:.02em}
.prow h4{font-size:1.08rem;margin-bottom:6px}
.prow p{color:var(--ink-2);font-size:.98rem}

/* features */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.fgrid.three{grid-template-columns:repeat(3,1fr)}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;transition:border-color .25s,box-shadow .25s,transform .25s}
.fcard:hover{border-color:#D7DAE2;box-shadow:var(--shadow);transform:translateY(-2px)}
.fcard .ic{width:46px;height:46px;border-radius:12px;background:var(--soft);display:grid;place-items:center;margin-bottom:20px}
.fcard .ic svg{width:23px;height:23px;color:var(--ink)}
.fcard .ic.mas{width:88px;height:88px;border-radius:16px;overflow:hidden;padding:0;background:#FCD24A}
.fcard .ic.mas img{width:100%;height:100%;object-fit:cover;display:block}
.fcard h3{font-size:1.22rem}
.fcard p{color:var(--ink-2);margin-top:9px;font-size:1.01rem}
.sec.soft .fcard{background:#fff}

/* levels */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.level{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:border-color .25s,box-shadow .25s,transform .25s}
.level:hover{border-color:#D7DAE2;box-shadow:var(--shadow);transform:translateY(-2px)}
.level .lh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.level .code{font-weight:800;font-size:1.05rem;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:5px 11px;letter-spacing:.02em}
.level .code.acc{background:var(--accent-soft);border-color:transparent;color:var(--accent-deep)}
.level .go{color:var(--ink-3);transition:transform .25s,color .25s}
.level:hover .go{color:var(--ink);transform:translateX(3px)}
.level h3{font-size:1.18rem;margin-bottom:6px}
.level p{color:var(--ink-2);font-size:.97rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center}
.stat .num{font-size:clamp(2.2rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .num .a{color:var(--accent-deep)}
.stat .lab{color:var(--ink-2);font-size:.96rem;margin-top:10px}

/* testimonials */
.rating-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;font-size:.92rem;margin-bottom:28px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tgrid.two{grid-template-columns:repeat(2,1fr)}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}
.tcard .stars{font-size:.85rem;margin-bottom:14px}
.tcard p{font-size:1.02rem;line-height:1.55;color:var(--ink)}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
.tcard .av{width:42px;height:42px;border-radius:50%;background:var(--soft-2);display:grid;place-items:center;font-weight:700;font-size:.88rem;color:var(--ink)}
.tcard .nm{font-weight:700;font-size:.95rem}.tcard .rl{color:var(--ink-3);font-size:.85rem}

/* teacher / Person card */
.teacher{display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm);max-width:760px;margin:42px auto 0}
.teacher .ava{width:120px;height:120px;border-radius:18px;background:var(--accent-soft);display:grid;place-items:center;font-weight:800;font-size:2rem;color:var(--accent-deep)}
.teacher h3{font-size:1.3rem}
.teacher .role{color:var(--ink-3);font-weight:600;font-size:.95rem;margin:4px 0 12px}
.teacher p{color:var(--ink-2);font-size:1.01rem}
.teacher .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.teacher .tag{font-size:.8rem;font-weight:700;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink-2)}

/* pricing card (single full price — NO instalments anywhere) */
.price-wrap{display:grid;grid-template-columns:1fr;gap:20px;max-width:520px;margin:44px auto 0}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow);text-align:center}
.price .amt{font-size:3rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.price .amt small{font-size:1.05rem;font-weight:700;color:var(--ink-3)}
.price .sub{color:var(--ink-2);margin-top:8px}
.price ul{list-style:none;padding:0;margin:22px 0;text-align:left;display:flex;flex-direction:column;gap:11px}
.price li{display:flex;gap:11px;font-size:1rem;color:var(--ink-2)}
.price li svg{flex:none;color:var(--ok);width:20px;height:20px;margin-top:2px}
.price .note{font-size:.86rem;color:var(--ink-3);margin-top:14px}

/* faq */
.faq{max-width:820px;margin:42px auto 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 24px;font-weight:700;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{position:relative;width:18px;height:18px;flex:none}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--ink-2);transition:transform .25s var(--ease)}
.faq .pm::before{left:0;top:8px;width:18px;height:2px}.faq .pm::after{left:8px;top:0;width:2px;height:18px}
.faq details[open] .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 24px 24px;color:var(--ink-2);font-size:1.02rem;max-width:64ch}

/* cta panels */
.cta-panel{background:var(--ink);border-radius:24px;padding:clamp(40px,6vw,68px) 40px;text-align:center;color:#fff}
.cta-panel .h2{color:#fff;max-width:20ch;margin:0 auto}
.cta-panel p{color:rgba(255,255,255,.7);max-width:46ch;margin:16px auto 0;font-size:1.07rem}
.cta-panel .btn{background:var(--accent);color:var(--ink);margin-top:30px}
.cta-panel .btn:hover{background:var(--accent-soft)}
.cta2{position:relative;border-radius:24px;padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:320px 1fr;gap:36px;align-items:center;overflow:hidden;background:rgb(255,235,146)}
.cta2 .pic{align-self:end;margin-bottom:-2px}
.cta2 .pic img{width:100%;max-width:340px;display:block}
.cta2 .h2{color:var(--ink);max-width:18ch}
.cta2 p{color:#7a5d0e;margin-top:14px;max-width:44ch;font-size:1.07rem;font-weight:600}
.cta2 .btn{margin-top:26px}

/* hero mascot */
.hero-mascot{align-self:center}
.hero-mascot img{width:100%;height:auto;border-radius:24px;display:block;box-shadow:var(--shadow)}

/* forms (contact / club / lead) */
.form{display:grid;gap:16px;max-width:520px}
.form.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.9rem;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:.82rem;color:var(--ink-3)}
.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink-2);line-height:1.45}
.checkbox input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--ink)}
.checkbox a{color:var(--ink);text-decoration:underline}
.form-note{font-size:.82rem;color:var(--ink-3)}

/* split layouts (contact / club) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.facts-list{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:16px}
.facts-list li{display:flex;gap:13px}
.facts-list .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center;flex:none}
.facts-list .ic svg{width:18px;height:18px}
.facts-list h4{font-size:1.02rem}.facts-list p{color:var(--ink-2);font-size:.95rem;margin-top:3px}

/* community buttons (club / link-in-bio) */
.chan{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.chan a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;transition:border-color .2s,box-shadow .2s,transform .15s}
.chan a:hover{border-color:#D7DAE2;box-shadow:var(--shadow);transform:translateY(-1px)}
.chan .ci{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.chan .ci.tg{background:#27A7E7}.chan .ci.wa{background:#25D366}.chan .ci.ig{background:#E1306C}
.chan .ci svg{width:22px;height:22px}
.chan .ct{font-weight:700;font-size:1.02rem}
.chan .cs{color:var(--ink-3);font-size:.88rem}

/* ============ LINK-IN-BIO (mobile-first, single column) ============ */
.bio{max-width:440px;margin:0 auto;padding:0 18px;min-height:100vh;display:flex;flex-direction:column}
.bio-screen{padding:30px 0}
.bio-top{display:flex;align-items:center;gap:12px;padding:22px 0 4px}
.bio-top .brand{font-size:1.15rem}
.bio-hero{text-align:center;padding:14px 0 6px}
.bio-hero .pic{width:130px;height:130px;border-radius:24px;margin:0 auto 18px;background:#FCD24A;overflow:hidden;box-shadow:var(--shadow)}
.bio-hero .pic img{width:100%;height:100%;object-fit:cover}
.bio-hero h1{font-size:1.9rem;line-height:1.15}
.bio-hero p{color:var(--ink-2);margin-top:12px;font-size:1.05rem}
.bio-rate{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;margin-top:16px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 15px}
.promo{background:var(--accent-soft);border:1px dashed var(--accent-deep);border-radius:var(--r);padding:16px 18px;margin:22px 0 6px;text-align:center}
.promo .lbl{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.promo .code{font-size:1.5rem;font-weight:800;letter-spacing:.06em;margin-top:4px}
.promo .sub{font-size:.86rem;color:#7a5d0e;margin-top:4px}
.bio-vids{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.vid{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.vid .thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#1b1e24,#363b45);display:grid;place-items:center}
.vid .thumb .play{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.vid .thumb .play svg{width:22px;height:22px;color:var(--ink);margin-left:3px}
.vid .meta{padding:14px 16px}
.vid .meta h4{font-size:1rem}.vid .meta p{color:var(--ink-3);font-size:.86rem;margin-top:3px}
.bio-foot{margin-top:auto;text-align:center;padding:28px 0 22px;color:var(--ink-3);font-size:.8rem}
.bio-foot a{color:var(--ink-3);text-decoration:underline}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:90}
.sticky-cta .inner{max-width:440px;margin:0 auto}
.has-sticky{padding-bottom:90px}

/* ============ PERFORMANCE MAX LP (focused, low-distraction) ============ */
.lp-bar{border-bottom:1px solid var(--line);background:#fff}
.lp-bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.lp-hero{padding:clamp(40px,6vh,72px) 0 clamp(36px,5vh,56px);background:var(--soft);border-bottom:1px solid var(--line)}
.lp-hero .wrap{max-width:920px}
.lp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.lp-hero h1{font-size:clamp(2.1rem,4.6vw,3.1rem);margin:14px 0 0}
.lp-hero .lead{font-size:1.12rem;color:var(--ink-2);margin-top:18px;max-width:440px}
.urgency{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.86rem;font-weight:700;color:var(--accent-deep)}
.urgency .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent-deep);animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.lp-trust{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.lp-trust .t{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.lp-trust .t b{color:var(--ink)}
.lp-section{padding:clamp(40px,6vh,68px) 0}
.lp-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.lp-foot{border-top:1px solid var(--line);padding:26px 0;text-align:center;color:var(--ink-3);font-size:.84rem}
.lp-foot button.linklike{background:none;border:none;color:var(--ink-3);font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.lp-foot button.linklike:hover{color:var(--ink)}

/* modal (Impressum / Datenschutz inside LP — never navigate away) */
.modal{position:fixed;inset:0;background:rgba(16,20,30,.55);display:none;align-items:flex-start;justify-content:center;padding:5vh 18px;z-index:200;overflow:auto}
.modal.open{display:flex}
.modal .box{background:#fff;border-radius:var(--r);max-width:680px;width:100%;padding:32px;box-shadow:var(--shadow);position:relative}
.modal .box h2{font-size:1.5rem;margin-bottom:14px}
.modal .box h3{font-size:1.05rem;margin:18px 0 6px}
.modal .box p{color:var(--ink-2);font-size:.95rem;margin-top:8px}
.modal .x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.modal .x:hover{background:var(--soft)}

/* footer */
footer{background:var(--bg);border-top:1px solid var(--line);padding:64px 0 30px}
.fgrid-f{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.fbrand .brand{margin-bottom:14px}
.fbrand p{color:var(--ink-2);max-width:280px;font-size:.96rem}
.fsoc{display:flex;gap:10px;margin-top:20px}
.fsoc a{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);transition:.2s}
.fsoc a:hover{background:var(--soft);color:var(--ink);border-color:#D7DAE2}
.fsoc svg{width:18px;height:18px}
.fcol h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;font-weight:700}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fcol a{color:var(--ink-2);font-size:.96rem;transition:color .2s}.fcol a:hover{color:var(--ink)}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:.86rem;color:var(--ink-3)}
.fbot a{color:var(--ink-3)}.fbot a:hover{color:var(--ink)}

/* legal page */
.legal{padding:clamp(48px,7vh,84px) 0}
.legal h1{font-size:clamp(2rem,4vw,2.6rem)}
.legal h2{font-size:1.25rem;margin:34px 0 10px}
.legal p,.legal li{color:var(--ink-2);font-size:1rem}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.legal .meta{color:var(--ink-3);font-size:.9rem;margin-top:8px}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
.s1{transition-delay:.06s}.s2{transition-delay:.12s}.s3{transition-delay:.18s}.s4{transition-delay:.24s}

/* responsive */
@media (max-width:920px){
  .hero-grid,.lp-grid{grid-template-columns:1fr;gap:36px}.panel{order:-1}
  .steps{grid-template-columns:1fr;gap:30px}.step::after{display:none}
  .stats{grid-template-columns:repeat(2,1fr);gap:30px}
  .nav-menu nav,.nav-menu .btn{display:none}.burger{display:flex}
  .fgrid-f{grid-template-columns:1fr 1fr;gap:32px}
  .split{grid-template-columns:1fr;gap:36px}
  .lp-proof{grid-template-columns:1fr}
  .cta2{grid-template-columns:1fr;text-align:center}.cta2 .pic{max-width:260px;margin:0 auto}
  .teacher{grid-template-columns:1fr;text-align:center}.teacher .ava{margin:0 auto}
  .prow{grid-template-columns:1fr;gap:6px}
}
@media (max-width:680px){
  .fgrid,.fgrid.three,.lgrid,.tgrid,.tgrid.two{grid-template-columns:1fr}
  .fgrid-f{grid-template-columns:1fr}
  .mobile.open{display:block}
}
@media (max-width:680px){
  .mobile{position:fixed;inset:70px 0 0;background:#fff;z-index:99;padding:24px 28px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:.28s}
  .mobile.open{transform:none;opacity:1;pointer-events:auto}
  .mobile a{display:block;font-weight:700;font-size:1.3rem;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .mobile .btn{margin-top:22px;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ============ PRICING PLANS (пакеты) ============ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.plan.hit{border-color:var(--accent);box-shadow:var(--shadow)}
.plan .hit-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--ink);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 13px;border-radius:999px;white-space:nowrap}
.plan .tier{font-weight:800;font-size:1.12rem;letter-spacing:.01em}
.plan .lessons{color:var(--ink-3);font-weight:600;font-size:.9rem;margin-top:3px}
.plan .amt{font-size:2.1rem;font-weight:800;letter-spacing:-.025em;margin-top:16px;line-height:1}
.plan .eur{color:var(--ink-2);font-weight:700;font-size:1.02rem;margin-top:5px}
.plan .per{color:var(--ink-3);font-size:.88rem;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.plan .btn{margin-top:auto}
.plan .gift{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:var(--accent-deep);margin-top:14px}
.price-facts{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:center;margin-top:22px}
.price-facts span{font-size:.93rem;color:var(--ink-2);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.price-facts b{color:var(--ink)}
.fmt-switch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.fmt-switch a{font-size:.92rem;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:.2s}
.fmt-switch a:hover{border-color:#D7DAE2;color:var(--ink);background:var(--soft)}
@media (max-width:920px){.plans{grid-template-columns:1fr}}

/* fix: текст согласия одним блоком */
.checkbox span{min-width:0}
/* активный формат на странице цен */
.fmt-switch a.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ════════════════════════════════════════════════════════════
   FLUID-СЛОЙ САЙТА: резиновые размеры под любой экран
   ════════════════════════════════════════════════════════════ */
/* боковые поля контейнера — текут, на узких не прижато к краю */
.wrap{ padding-left:clamp(16px, 5vw, 32px); padding-right:clamp(16px, 5vw, 32px); }

/* любые длинные слова не ломают вёрстку */
h1,h2,h3,p,a,li,.tc-name,.tc-desc{ overflow-wrap:break-word; }

/* hero-заголовок и лид — плавная типографика (уже clamp в index, тут страховка для всех страниц) */
.hero h1{ font-size:clamp(1.85rem, 5.4vw, 3.7rem); }
.hero .lead{ font-size:clamp(1rem, 2.6vw, 1.17rem); }

/* секционные заголовки */
.sec-title,.section-title,h2.center{ font-size:clamp(1.5rem, 4.5vw, 2.3rem); }

/* карточки в сетках — минимальная ширина текучая, не переполняют узкий экран */
@media (max-width:680px){
  .fgrid,.tgrid,.lgrid{ grid-template-columns:1fr; }
  /* любые жёсткие min-width внутри карточек гасим */
  .card,.fcard,.tcard,.panel{ min-width:0; }
}

/* каталог учителей: плашка резиновая */
@media (max-width:760px){
  .tcard{ min-width:0; }
  .tc-name{ font-size:clamp(1.05rem, 4.5vw, 1.18rem); }
}

/* кнопки на узких — полноширинные и крупный тач-таргет */
@media (max-width:560px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; justify-content:center; min-height:50px; }
}

/* изображения никогда не вылезают за контейнер */
img{ max-width:100%; height:auto; }

/* ===== AUDIT-FIX: стани полів, статус-чипи (нецветовий канал), скелетон ===== */
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
.field .err{color:var(--bad);font-size:var(--fs-xs)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);line-height:1.3}
.chip--brand{color:var(--brand-ink);background:var(--brand-soft)}
.chip--ok{color:var(--ok);background:var(--ok-bg)} .chip--ok::before{content:"✓"}
.chip--warn{color:var(--warn);background:var(--warn-bg)} .chip--warn::before{content:"!"}
.chip--bad{color:var(--bad);background:var(--bad-bg)} .chip--bad::before{content:"✕"}
.skeleton{background:linear-gradient(90deg,var(--soft),var(--soft-2),var(--soft));background-size:200% 100%;animation:sk 1.2s var(--ease) infinite;border-radius:var(--r-sm)}
@keyframes sk{to{background-position:-200% 0}}