/* Головна «/» — стилі (винесено з index.hbs). Дизайн-система «Sentinel». */
/* ==========================================================================
   Andrew Academy — тестова головна «MAX». Дизайн-система «Sentinel» (світла).
   Self-contained: усі стилі тут, контент статичний (UA), фото з assets/.
   ========================================================================== */
:root{
  --st-bg:#ffffff; --st-surface:#ffffff; --st-soft:#fafafa; --st-soft2:#f5f6f7;
  --st-fg:#1a1a1a; --st-text:#4b5563; --st-muted:#6b7280;
  --st-accent:#ff5722; --st-accent-soft:#fff1ec; --st-accent-fg:#fff;
  --st-ink:#121212; --st-border:#f3f4f6; --st-border-strong:#e5e7eb; --st-border-hard:#d1d5db;
  --st-shadow:0 15px 35px -5px rgba(0,0,0,.1);
  --st-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --st-shadow-lg:0 20px 60px -15px rgba(0,0,0,.10);
  --st-radius:16px; --st-radius-sm:6px; --st-max:1180px;
  --st-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --st-serif:'Newsreader',Georgia,"Times New Roman",serif;
  --grn:#0a7d3f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:93.75%;scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{
  background:var(--st-bg); color:var(--st-text); font-family:var(--st-font);
  font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--st-max); margin:0 auto; padding:0 24px}
.serif{font-family:var(--st-serif)}
.accent{color:var(--st-accent)}
em.mk{color:var(--st-accent); font-style:italic; font-family:var(--st-serif)}

/* section scaffold */
.sec{padding:42px 0}
.sec--soft{background:var(--st-soft)}
.sec--ink{background:var(--st-ink); color:#e7e7ea}
.sec-head{max-width:720px; margin:0 auto 26px; text-align:center}
@property --kb-angle{syntax:"<angle>"; initial-value:0deg; inherits:false}
.sec-kicker{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--st-accent);
  background:var(--st-accent-soft); border:1px solid #ffd9cc;
  padding:6px 12px; border-radius:100px; margin-bottom:18px;
}
/* анімація обведення (border-beam) — світний промінь біжить по контуру */
.sec-kicker::before{
  content:""; position:absolute; inset:0; border-radius:100px; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--kb-angle), transparent 0deg 250deg, var(--st-accent) 322deg, #ff9a6f 344deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:kb-spin 3.2s linear infinite;
}
@keyframes kb-spin{to{--kb-angle:360deg}}
@media (prefers-reduced-motion:reduce){.sec-kicker::before{animation:none}}
.sec--ink .sec-kicker{background:rgba(255,87,34,.14); border-color:rgba(255,87,34,.3)}
.sec-title{
  font-family:var(--st-serif); font-weight:400; letter-spacing:-.025em; line-height:1.06;
  font-size:clamp(2rem,4.4vw,3rem); color:var(--st-fg); margin-bottom:16px;
}
.sec--ink .sec-title{color:#fff}
.sec-sub{font-size:1.05rem; color:var(--st-muted); line-height:1.65}
.sec--ink .sec-sub{color:#a9abb2}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit;
  font-weight:600; font-size:.98rem; line-height:1; padding:15px 26px; border-radius:var(--st-radius-sm);
  text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn--primary{background:var(--st-ink); color:#fff; box-shadow:0 8px 20px -6px rgba(18,18,18,.5)}
.btn--primary:hover{opacity:.9; transform:translateY(-2px)}
.btn--accent{background:var(--st-accent); color:#fff; box-shadow:0 10px 24px -6px rgba(255,87,34,.55)}
.btn--accent:hover{transform:translateY(-2px); box-shadow:0 14px 30px -6px rgba(255,87,34,.65)}
.btn--ghost{background:#fff; color:var(--st-fg); border-color:var(--st-border-hard)}
.btn--ghost:hover{background:var(--st-soft); transform:translateY(-2px)}
.btn--lg{padding:18px 34px; font-size:1.05rem}
.btn--block{width:100%}
.arw{transition:transform .15s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ===================== topbar (site) ===================== */
.site-topbar{background:var(--st-ink); color:#fff; overflow:hidden; white-space:nowrap}
.site-topbar__track{display:flex; width:max-content; animation:st-marquee 37s linear infinite}
.site-topbar__group{display:flex; flex-shrink:0}
.site-topbar__group span{padding:9px 28px; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.site-topbar__group span:nth-child(even){color:var(--st-accent)}
@keyframes st-marquee{to{transform:translateX(-50%)}}
.site-topbar:hover .site-topbar__track{animation-play-state:paused}

/* ===================== header (site) ===================== */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--st-border)}
.site-header__inner{max-width:var(--st-max); margin:0 auto; padding:9px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px}
.site-header__brand{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.2rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--st-fg); text-decoration:none}
.site-header__brand img{max-height:28px; width:auto; display:block}
.site-header__nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.site-header__link{color:var(--st-text); text-decoration:none; font-weight:500; font-size:.92rem; padding:7px 14px; border-radius:var(--st-radius-sm); transition:color .15s ease, background .15s ease}
.site-header__link:hover{color:var(--st-fg); background:var(--st-border)}
.site-header__btn{background:var(--st-ink); color:#fff; text-decoration:none; font-weight:600; font-size:.92rem; padding:8px 20px; border-radius:var(--st-radius-sm); transition:opacity .15s ease}
.site-header__btn:hover{opacity:.88}
.site-lang{appearance:none; -webkit-appearance:none; background:#fff; color:var(--st-text); border:1px solid var(--st-border-strong); border-radius:var(--st-radius-sm); font:inherit; font-weight:500; font-size:.92rem; padding:6px 12px; cursor:pointer}
.site-lang option{color:#000}
@media(max-width:560px){
  .site-header__inner{padding:8px 16px; gap:8px 10px}
  .site-header__brand{font-size:1rem}
  .site-header__nav{gap:6px}
  .site-header__link, .site-header__btn{padding:7px 14px; font-size:.9rem}
  .site-topbar__group span{padding:10px 18px; font-size:.78rem}
}
/* <380px: назва у 2 рядки, вписана у висоту хедера (width:min-content → «ANDREW»/«ACADEMY») */
@media(max-width:379px){
  .site-header__brand{white-space:normal; width:min-content; overflow:visible; text-overflow:clip; font-size:.95rem; line-height:1.12; letter-spacing:.06em}
}

/* ===================== proof strip (site) ===================== */
.site-main:has(> .proof:first-child){padding-top:0}
.proof{overflow:hidden; padding:28px 0; cursor:grab; touch-action:pan-y; overscroll-behavior:contain}
.proof.is-drag{cursor:grabbing}
.proof img, .proof video{-webkit-user-drag:none; user-select:none; -webkit-user-select:none}
.proof-track{display:flex; width:max-content; animation:proof-scroll 45s linear infinite; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.proof:hover .proof-track{animation-play-state:paused}
.proof-set{display:flex; gap:16px; padding-right:16px; flex-shrink:0}
.proof-img, .proof-vid{height:260px; width:auto; border-radius:14px; object-fit:cover; display:block; background:#f3f4f6}
.proof-vid{pointer-events:none}
.proof-scroll{width:150px; height:260px; border-radius:14px; overflow:hidden; flex-shrink:0; background:rgba(255,255,255,.05)}
.proof-scroll-inner{display:block; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.proof-scroll-inner img{width:100%; display:block}
.proof-acc{height:260px; flex-shrink:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:10px 22px}
.proof-acc-item{display:flex; flex-direction:column; align-items:center; text-align:center}
.proof-acc-ava{width:55px; height:55px; border-radius:50%; overflow:hidden; background:#f3f4f6; display:block}
.proof-acc-ava img{width:100%; height:100%; object-fit:cover; display:block}
.proof-acc-name{margin-top:5px; font-weight:800; font-size:.82rem; color:var(--st-fg); line-height:1.15}
.proof-acc-handle{color:var(--st-muted); font-size:.7rem}
.proof-acc-count{margin-top:3px; font-weight:800; font-size:.9rem; color:var(--st-fg); line-height:1.1}
.proof-acc-label{color:var(--st-muted); font-size:.64rem}
@keyframes proof-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:600px){
  .proof{padding:9px 0}
  .proof-img, .proof-vid{height:250px; border-radius:12px}
  .proof-scroll{width:140px; height:250px; border-radius:12px}
  .proof-set{gap:12px; padding-right:12px}
  .proof-acc{height:250px; padding:8px 18px; gap:8px}
  .proof-acc-ava{width:55px; height:55px}
  .proof-acc-name{font-size:.8rem}
  .proof-acc-count{font-size:.88rem}
}

/* ===================== hero ===================== */
.hero{position:relative; background:
  radial-gradient(1100px 480px at 82% -8%, #fff3ee 0%, transparent 60%),
  radial-gradient(700px 420px at -6% 108%, #f3f4f6 0%, transparent 55%), #fff;
  border-bottom:1px solid var(--st-border); overflow:hidden}
.hero__in{max-width:820px; margin:0 auto; padding:24px 24px 52px; display:flex;
  flex-direction:column; align-items:center; text-align:center}
.hero__in .hero__lead{margin-left:auto; margin-right:auto}
.hero__in .hero__pills,.hero__in .hero__cta,.hero__in .hero__trust{justify-content:center}
.hero__badge{display:inline-flex; align-items:center; gap:9px; font-size:.76rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--st-fg);
  background:#fff; border:1px solid var(--st-border-strong); box-shadow:var(--st-shadow-sm);
  padding:7px 14px; border-radius:100px; margin-bottom:22px}
.hero__badge .pdot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.hero__title{font-family:var(--st-serif); font-weight:400; font-size:clamp(2.7rem,5.4vw,4.3rem);
  line-height:1.02; letter-spacing:-.03em; color:var(--st-fg); margin-bottom:22px}
.hero__lead{font-size:1.12rem; color:var(--st-text); max-width:30em; margin-bottom:14px; line-height:1.6}
.hero__lead b{color:var(--st-fg); font-weight:600}
.hero__pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.hpill{display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:500; color:var(--st-fg);
  background:#fff; border:1px solid var(--st-border-strong); padding:8px 13px; border-radius:100px}
.hpill svg{width:15px;height:15px;color:var(--st-accent);flex-shrink:0}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px}
/* trust: сітка 2×2 (за макетом власника) — [фото][★★★★★] зверху, [підпис][4.8 out of 5] знизу.
   justify-items:center — кожен елемент відцентровано у своїй колонці (фото над підписом, зірки над числом). Однаково десктоп+мобільний */
.hero__trust{display:grid; grid-template-columns:auto auto;
  grid-template-areas:"ava stars" "lbl num"; align-items:center; justify-items:center; gap:8px 15px}
.avstack{grid-area:ava; display:flex}
.avstack span{position:relative; overflow:hidden; width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-10px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff}
.avstack span img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.avstack span:first-child{margin-left:0}
.stars{grid-area:stars; display:flex; gap:2px; color:#f5a623}
.stars svg{width:17px;height:17px}
.hero__trust-t{grid-area:lbl; font-size:.9rem; color:var(--st-muted); line-height:1.25; text-align:center} /* «average student rating» — під фото */
.hero__rate-num{grid-area:num; font-size:.95rem; color:var(--st-muted); white-space:nowrap} /* «4.8 out of 5» — під зірками */
.hero__rate-num b{color:var(--st-fg); font-weight:700}
@media(max-width:560px){ .hero__trust-t{max-width:50vw} } /* довгий підпис (DE) переноситься, а не ламає сітку; fr/es лишаються в 1 рядок */

/* hero visual panel */
.hero__right{position:relative}
.hero__panel{position:relative; height:440px; border-radius:24px;
  background:linear-gradient(160deg,#1b1b1e,#2b2b30); border:1px solid #000;
  box-shadow:var(--st-shadow-lg); overflow:hidden}
.hero__panel::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1.4px,transparent 0); background-size:22px 22px}
.hero__glow{position:absolute; width:280px;height:280px; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,87,34,.55),transparent 62%); filter:blur(14px)}
.hero__phone{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:172px; height:346px;
  background:#000; border:6px solid #313135; border-radius:30px; box-shadow:0 30px 60px -20px rgba(0,0,0,.7); overflow:hidden}
.hero__phone .scr{position:absolute; inset:0; background:linear-gradient(180deg,#ff5722,#e0410f); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; padding:16px}
.hero__phone .scr .pc-big{font-size:2rem; font-weight:800; font-family:var(--st-serif)}
.hero__phone .scr .pc-s{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; opacity:.9; margin-top:4px}
.hero__phone .scr .pc-play{width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin:18px 0 0 6px}
.hcard{position:absolute; background:#fff; border-radius:14px; box-shadow:0 12px 30px -8px rgba(0,0,0,.35); padding:12px 15px; min-width:150px}
.hcard-l{font-size:.66rem; color:var(--st-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px}
.hcard-v{font-size:1.45rem; font-weight:800; color:var(--st-fg); display:flex; align-items:baseline; gap:7px}
.hcard-t{font-size:.76rem; font-weight:700; color:#22c55e}
.hcard--1{top:26px; right:20px}
.hcard--2{bottom:96px; left:-14px}
.hcard--3{bottom:22px; right:34px}
.hcard--v{color:var(--st-accent)}
.float{animation:float 5s ease-in-out infinite}
.float.f2{animation-delay:-1.6s}
.float.f3{animation-delay:-3.1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media(max-width:900px){
  .hero__in{gap:34px; padding:20px 22px 48px}
  .hero__right{order:-1}
  .hero__panel{height:340px}
  .hero__lead{max-width:none}
}
@media(max-width:420px){.hcard--2{left:0}.hero__panel{height:310px}}

/* ===================== stats ===================== */
.stats{background:var(--st-ink); color:#fff; padding:40px 0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center}
.stat{position:relative; padding:4px 14px}
.stat + .stat::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:42px; width:1px; background:rgba(255,255,255,.12)}
.stat b{display:block; font-family:var(--st-serif); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:500; color:#fff; line-height:1; letter-spacing:-.01em}
.stat b .accent{color:var(--st-accent)}
.stat b .accent--plus{font-size:1.6em; font-weight:600; line-height:0} /* серіфний «+» ≈0.43em → ×1.6, щоб дорівнював висоті цифри (0.69em) */
.stat > span{display:block; margin-top:9px; font-size:.68rem; color:#9a9ca3; text-transform:uppercase; letter-spacing:.07em; line-height:1.35}
@media(max-width:640px){
  .stats{padding:24px 0}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:20px 0}
  .stat b{font-size:1.55rem}
  .stat > span{font-size:.62rem; letter-spacing:.05em}
  .stat:nth-child(odd)::before{display:none}
}

/* ===================== problem ===================== */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.pcard{display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid var(--st-border-strong); border-radius:var(--st-radius); padding:22px; position:relative; transition:.2s}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--st-shadow); border-color:var(--st-border-hard)}
.pcard-ic{width:44px;height:44px;border-radius:11px;background:var(--st-accent-soft);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.pcard-b{min-width:0}
.pcard h3{font-size:1.05rem; color:var(--st-fg); margin-bottom:6px; font-weight:700}
.pcard p{font-size:.92rem; color:var(--st-muted); line-height:1.55}
.p-arrow{text-align:center; margin-top:40px; font-size:1.05rem; color:var(--st-fg)}
.p-arrow b{color:var(--st-accent)}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pgrid{grid-template-columns:1fr}}

/* ===================== solution / pillars ===================== */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pill{background:#fff; border:1px solid var(--st-border-strong); border-radius:var(--st-radius); padding:32px 28px; position:relative; overflow:hidden; transition:.2s}
.pill:hover{transform:translateY(-5px); box-shadow:var(--st-shadow-lg)}
.pill-n{font-family:var(--st-serif); font-size:3.4rem; line-height:1; color:var(--st-accent-soft); font-weight:600; position:absolute; top:14px; right:20px}
.pill-badge{display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--st-accent); margin-bottom:14px}
.pill h3{font-family:var(--st-serif); font-size:1.5rem; font-weight:500; color:var(--st-fg); margin-bottom:12px}
.pill p{font-size:.95rem; color:var(--st-muted); line-height:1.6; margin-bottom:16px}
.pill ul{list-style:none; display:flex; flex-direction:column; gap:9px}
.pill li{display:flex; gap:9px; font-size:.9rem; color:var(--st-text)}
.pill li svg{width:17px;height:17px;color:var(--grn);flex-shrink:0;margin-top:2px}
@media(max-width:840px){.pillars{grid-template-columns:1fr}}

/* ===================== curriculum ===================== */
.curr{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.mod{background:#fff; border:1px solid var(--st-border-strong); border-radius:var(--st-radius); padding:26px 26px 22px; transition:.2s}
.mod:hover{box-shadow:var(--st-shadow); border-color:var(--st-border-hard)}
.mod-h{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--st-border)}
.mod-n{width:42px;height:42px;border-radius:11px;background:var(--st-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;flex-shrink:0}
.mod-h h3{font-size:1.12rem; color:var(--st-fg); font-weight:700; line-height:1.2}
.mod-h span{font-size:.8rem; color:var(--st-muted)}
.mod ul{list-style:none; display:flex; flex-direction:column; gap:2px}
.mod li{display:flex; gap:10px; padding:7px 0; font-size:.93rem; color:var(--st-text); align-items:flex-start}
.mod li svg{width:16px;height:16px;color:var(--st-accent);flex-shrink:0;margin-top:3px}
.curr-vip{margin-top:22px; background:linear-gradient(120deg,#1b1b1e,#2b2b30); color:#fff; border-radius:var(--st-radius); padding:28px 30px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; box-shadow:var(--st-shadow-lg)}
.curr-vip .cv-ic{font-size:2.4rem}
.curr-vip .cv-b{flex:1; min-width:240px}
.curr-vip h3{font-family:var(--st-serif); font-size:1.5rem; font-weight:500; margin-bottom:6px}
.curr-vip p{color:#b7b9c0; font-size:.95rem}
.curr-vip .cv-tag{background:var(--st-accent); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:6px 12px; border-radius:100px}
@media(max-width:600px){
  .curr-vip{padding:20px; gap:10px 12px; align-items:center}
  .curr-vip .cv-b{order:1; flex-basis:100%; min-width:0}
  .curr-vip .cv-tag{order:2}
  .curr-vip .cv-ic{order:3; font-size:3.8rem; line-height:1; margin-left:auto; align-self:center}
}
@media(max-width:840px){.curr{grid-template-columns:1fr}}

/* ===================== monetization ===================== */
.money{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.mcard{display:flex; gap:15px; background:#fff; border:1px solid var(--st-border-strong); border-radius:14px; padding:22px; transition:.2s}
.mcard:hover{transform:translateY(-3px); box-shadow:var(--st-shadow); border-color:var(--st-border-hard)}
.mcard-ic{width:46px;height:46px;border-radius:12px;background:var(--st-accent-soft);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.mcard h3{font-size:1rem; color:var(--st-fg); font-weight:700; margin-bottom:5px}
.mcard p{font-size:.87rem; color:var(--st-muted); line-height:1.5}
.mcard .amt{color:var(--st-accent); font-weight:700}
@media(max-width:900px){.money{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.money{grid-template-columns:1fr}}

/* ===================== results ===================== */
/* картка результату (повний текст, висота по найбільшій) */
.rs-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--st-border-strong); border-radius:var(--st-radius); overflow:hidden; box-shadow:var(--st-shadow-sm)}
.rs-photo{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#eef0f1; -webkit-user-drag:none; user-select:none}
.rs-body{padding:16px 18px}
.rs-text{color:var(--st-text); line-height:1.55; font-size:.92rem}
.rs-name{margin-top:12px; font-weight:700; color:var(--st-fg); font-size:.9rem}
.rs-name::before{content:"— "; color:var(--st-accent)}
/* ДЕСКТОП: нескінченна стрічка на всю ширину (rAF) */
.rs-marquee{overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); padding:4px 0}
.rs-mq-track{display:flex; width:max-content; will-change:transform; backface-visibility:hidden}
.rs-mq-group{display:flex; gap:24px; padding-right:24px; flex-shrink:0; align-items:stretch}
.rs-marquee .rs-card{width:320px; flex-shrink:0}
.rs-mq-controls{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px}
/* МОБІЛЬНИЙ: карусель (1 картка) + свайп */
.rs-carousel{display:none; max-width:440px; margin:0 auto; padding:0 20px; touch-action:pan-y}
.rs-cv-viewport{overflow:hidden; border-radius:var(--st-radius)}
.rs-cv-track{display:flex; transition:transform .5s ease}
.rs-cv-slide{min-width:100%; box-sizing:border-box}
.rs-controls{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px}
.rs-nav{width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--st-border-hard); color:var(--st-fg); font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--st-shadow-sm); transition:background .15s ease, color .15s ease}
.rs-nav:hover{background:var(--st-accent); color:#fff; border-color:transparent}
.rs-mq-toggle{font-size:.85rem}
.rs-dots{display:flex; justify-content:center; gap:8px}
.rs-dot{width:8px; height:8px; border-radius:50%; background:var(--st-border-hard); border:0; cursor:pointer; padding:0; transition:width .2s ease, background .2s ease}
.rs-dot.is-active{background:var(--st-accent); width:22px; border-radius:4px}
@media(max-width:720px){
  .rs-marquee, .rs-mq-controls{display:none}
  .rs-carousel{display:block}
}

/* ===================== author ===================== */
.author-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center}
.author-photo{position:relative}
.author-photo .ap-frame{aspect-ratio:4/5; border-radius:20px; background:linear-gradient(160deg,#2b2b30,#151517); overflow:hidden; box-shadow:var(--st-shadow-lg); display:flex; align-items:flex-end; justify-content:center; position:relative}
.author-photo .ap-frame::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1.3px,transparent 0); background-size:20px 20px}
.author-photo .ap-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.author-photo .ap-ini{font-family:var(--st-serif); font-size:6rem; color:rgba(255,255,255,.12); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.author-photo .ap-cap{position:relative; z-index:2; background:rgba(255,255,255,.94); backdrop-filter:blur(4px); margin:0 14px 14px; padding:12px 16px; border-radius:12px; width:calc(100% - 28px)}
.author-photo .ap-cap b{display:block; color:var(--st-fg); font-size:.95rem}
.author-photo .ap-cap span{font-size:.82rem; color:var(--st-muted)}
.author-quote{font-family:var(--st-serif); font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.3; color:var(--st-fg); letter-spacing:-.01em; margin-bottom:22px; font-weight:400}
.author-quote em{color:var(--st-accent); font-style:italic}
.author-body{color:var(--st-text); line-height:1.75; font-size:1.02rem; margin-bottom:24px}
.author-body strong{color:var(--st-fg)}
.author-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.am{background:var(--st-soft); border:1px solid var(--st-border); border-radius:12px; padding:16px 14px; text-align:center}
.am b{display:block; font-family:var(--st-serif); font-size:1.7rem; color:var(--st-fg); font-weight:500}
.am span{font-size:.78rem; color:var(--st-muted)}
@media(max-width:840px){.author-wrap{grid-template-columns:1fr; gap:30px}.author-photo{max-width:340px;margin:0 auto}}

/* ===================== reviews carousel ===================== */
.rv{position:relative; max-width:840px; margin:0 auto}
.rv-vp{overflow:hidden; border-radius:var(--st-radius)}
.rv-track{display:flex; transition:transform .5s ease}
.rv-slide{min-width:100%; box-sizing:border-box; padding:4px}
.rv-card{background:#fff; border:1px solid var(--st-border-strong); border-radius:var(--st-radius); padding:36px; box-shadow:var(--st-shadow); min-height:230px; display:flex; flex-direction:column}
.rv-tag{display:inline-block; align-self:flex-start; font-weight:700; color:var(--st-accent); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; background:var(--st-accent-soft); padding:5px 11px; border-radius:100px; margin-bottom:16px}
.rv-text{color:var(--st-fg); line-height:1.65; font-size:1.02rem; flex:1}
.rv-foot{display:flex; align-items:center; gap:13px; margin-top:22px}
.rv-ava{position:relative; overflow:hidden; width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.05rem;flex-shrink:0}
.rv-ava img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rv-nm{font-weight:700; color:var(--st-fg); font-size:.94rem}
.rv-loc{color:var(--st-muted); font-size:.83rem}
.rv-nav{position:absolute; top:50%; transform:translateY(-50%); width:46px;height:46px; border-radius:50%; background:#fff; border:1px solid var(--st-border-hard); color:var(--st-fg); font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--st-shadow-sm); z-index:2; transition:.15s}
.rv-nav:hover{background:var(--st-accent); color:#fff; border-color:transparent}
.rv-prev{left:-22px} .rv-next{right:-22px}
.rv-dots{display:flex; justify-content:center; gap:8px; margin-top:26px}
.rv-dot{width:8px;height:8px;border-radius:50%;background:var(--st-border-hard);border:0;cursor:pointer;padding:0;transition:.2s}
.rv-dot.on{background:var(--st-accent); width:24px; border-radius:4px}
@media(max-width:900px){.rv-prev{left:4px}.rv-next{right:4px}.rv-card{padding:26px}}
/* мобільний: перемикач як у «Результати учнів» — ‹ [крапки] › в одному рядку під каруселлю */
@media(max-width:720px){
  .rv{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:14px}
  .rv-vp{flex-basis:100%; order:0; margin-bottom:18px}
  .rv-nav{position:static; transform:none; width:42px; height:42px}
  .rv-prev{order:1} .rv-dots{order:2; margin-top:0} .rv-next{order:3}
}

/* ===================== pricing ===================== */
.pr-switch{display:flex; gap:5px; background:#fff; border:1px solid var(--st-border-hard); border-radius:100px; padding:5px; width:max-content; margin:0 auto 12px}
.pr-sw{border:0; background:none; font:inherit; font-weight:600; font-size:.92rem; color:var(--st-muted); padding:10px 22px; border-radius:100px; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:8px}
.pr-sw.on{background:var(--st-ink); color:#fff}
.pr-sw .sv{font-size:.72rem; background:var(--st-accent); color:#fff; padding:2px 8px; border-radius:100px; font-weight:700}
.pr-sw.on .sv{background:#fff; color:var(--st-accent)}
.pr-guarantee-mini{text-align:center; font-size:.86rem; color:var(--st-muted); margin-bottom:40px}
.pr-tiers{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:820px; margin:0 auto; align-items:stretch}
.pr-tier{display:flex; flex-direction:column; background:#fff; border:1px solid var(--st-border-strong); border-radius:20px; padding:32px 30px; position:relative; transition:.2s}
.pr-tier--feat{border:2px solid var(--st-ink); box-shadow:var(--st-shadow-lg)}
.pr-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--st-ink); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:6px 16px; border-radius:100px; white-space:nowrap}
.pr-tier--feat .pr-badge{background:var(--st-accent)}
.pr-name-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.pr-name{font-family:var(--st-serif); font-size:1.6rem; color:var(--st-fg); font-weight:500}
.pr-seats-top{position:relative; isolation:isolate; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--st-accent); background:#2e1d13; border:1px solid rgba(255,87,34,.32); padding:6px 12px; border-radius:100px; white-space:nowrap}
.pr-seats-top::before{content:""; position:absolute; inset:0; border-radius:100px; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--kb-angle), transparent 0deg 250deg, var(--st-accent) 322deg, #ff9a6f 344deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:kb-spin 3.2s linear infinite}
.pr-hl{color:var(--st-accent); font-weight:800}
.pr-for{font-size:.86rem; color:var(--st-muted); margin-bottom:18px}
.pr-saleline{display:flex; align-items:center; gap:9px; margin-bottom:2px}
.pr-old{color:var(--st-muted); text-decoration:line-through; font-size:1.05rem}
.pr-sale{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--st-accent); background:var(--st-accent-soft); padding:3px 9px; border-radius:100px}
.pr-price{display:flex; align-items:baseline; gap:6px; margin-bottom:6px}
.pr-amt{font-family:var(--st-serif); font-size:3rem; font-weight:500; color:var(--st-fg); line-height:1}
.pr-per{color:var(--st-muted); font-size:.98rem; font-weight:500}
.pr-meta{display:flex; flex-direction:column; gap:6px; margin:14px 0 20px; padding:14px 0; border-top:1px solid var(--st-border); border-bottom:1px solid var(--st-border)}
.pr-meta div{font-size:.86rem; display:flex; align-items:center; gap:7px}
.pr-permonth-row{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%}
.pr-permonth{color:var(--st-muted)}
.pr-value{color:var(--st-fg); font-weight:500}
.pr-value--mut{color:var(--st-muted); text-decoration:line-through; text-decoration-color:#e5484d; text-decoration-thickness:2px}
.pr-save{color:var(--grn); font-weight:600}
.pr-seats{color:var(--st-accent); font-weight:600}
.pr-benefits{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1}
.pr-benefits li{display:flex; gap:10px; font-size:.93rem; color:var(--st-text); line-height:1.4}
.pr-benefits li svg{width:18px;height:18px;color:var(--grn);flex-shrink:0;margin-top:1px}
.pr-benefits li.mut{color:var(--st-muted)}
.pr-benefits li.mut svg{color:var(--st-border-hard)}
.pr-benefits li.mut span{text-decoration:line-through; text-decoration-color:#e5484d; text-decoration-thickness:2px}
.pr-note{text-align:center; font-size:.8rem; color:var(--st-muted); margin-top:12px}
@media(max-width:720px){.pr-tiers{grid-template-columns:1fr; max-width:420px}}

/* ===================== guarantee ===================== */
.guar{display:flex; align-items:center; gap:30px; background:#fff; border:1px solid var(--st-border-strong); border-radius:20px; padding:36px 40px; max-width:900px; margin:0 auto; box-shadow:var(--st-shadow-sm)}
.guar-seal{position:relative;width:112px;height:112px;border-radius:50%;background:var(--st-accent-soft);border:2px dashed var(--st-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--st-accent)}
.guar-seal svg{width:50px;height:50px}
.guar-seal .gs-badge{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:var(--st-accent);color:#fff;font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:100px;white-space:nowrap}
.guar h3{font-family:var(--st-serif); font-size:1.5rem; font-weight:500; color:var(--st-fg); margin-bottom:8px}
.guar p{color:var(--st-muted); font-size:.98rem; line-height:1.6}
@media(max-width:640px){.guar{flex-direction:column; text-align:center; padding:30px 24px}}

/* ===================== for whom ===================== */
.whom{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.wcard{display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--st-border-strong); border-radius:14px; padding:20px}
.wcard-ic{font-size:1.5rem; flex-shrink:0}
.wcard b{display:block; color:var(--st-fg); font-size:.98rem; margin-bottom:3px}
.wcard span{font-size:.86rem; color:var(--st-muted); line-height:1.5}
@media(max-width:840px){.whom{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.whom{grid-template-columns:1fr}}

/* ===================== faq ===================== */
.faq{max-width:760px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--st-border)}
.faq-item:first-child{border-top:1px solid var(--st-border)}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; background:none; border:0; color:var(--st-fg); font:inherit; font-weight:600; font-size:1.05rem; padding:22px 4px; cursor:pointer}
.faq-ic{flex-shrink:0; font-size:1.5rem; color:var(--st-accent); transition:transform .2s ease; line-height:1}
.faq-item.on .faq-ic{transform:rotate(45deg)}
.faq-a{overflow:hidden; max-height:0; transition:max-height .3s ease}
.faq-item.on .faq-a{max-height:600px}
.faq-a-in{padding:2px 4px 22px; color:var(--st-muted); line-height:1.7}
.faq-a-in strong{color:var(--st-fg)}

/* ===================== final CTA ===================== */
.final{position:relative; text-align:center; overflow:hidden}
.final .container{position:relative; z-index:2}
.final::before{content:""; position:absolute; inset:0; background:
  radial-gradient(700px 340px at 50% -10%, rgba(255,87,34,.22), transparent 60%)}
.final h2{font-family:var(--st-serif); font-weight:400; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; letter-spacing:-.025em; color:#fff; margin-bottom:18px}
.final h2 em{color:var(--st-accent); font-style:italic}
.final p{color:#a9abb2; font-size:1.1rem; max-width:540px; margin:0 auto 32px}
.final .fcta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.final .fnote{margin-top:22px; font-size:.86rem; color:#82848b; display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.final .fnote span{display:inline-flex; align-items:center; gap:6px}
.final .fnote svg{width:15px;height:15px;color:var(--st-accent)}

/* ===================== footer (site) ===================== */
.site-footer{flex-shrink:0; background:var(--st-soft); border-top:1px solid var(--st-border); margin-top:32px; padding:0}
.site-footer__inner{max-width:var(--st-max); margin:0 auto; padding:20px 24px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
/* десктоп: nav зверху, під ним «© …  [🌐 мова]» одним рядком (мова праворуч від копірайту) */
.site-footer__top{display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center;
  gap:12px 16px; grid-template-areas:"nav nav" "copy lang"}
.site-footer__nav{grid-area:nav; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px}
.site-footer__nav a{color:var(--st-muted); text-decoration:none; font-size:.92rem; transition:color .15s ease}
.site-footer__nav a:hover{color:var(--st-fg)}
.site-footer__copy{grid-area:copy; justify-self:end; margin:0; color:var(--st-muted); font-size:.82rem; letter-spacing:.03em}
.site-footer__lang{grid-area:lang; justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:2px 4px}
.site-footer__globe{width:16px; height:16px; color:var(--st-muted); flex-shrink:0}
.site-footer__inner .site-lang{font-size:.86rem; padding:6px 12px}
/* мобільний: посилання у 2 колонки, селектор мови — справа від них; © окремим рядком під ними */
@media(max-width:560px){
  .site-footer__top{grid-template-areas:"nav lang" "copy copy"; gap:10px 14px}
  .site-footer__nav{display:grid; grid-template-columns:auto auto; gap:7px 16px; justify-content:start; text-align:left}
  .site-footer__nav a{font-size:.86rem} /* трохи менше — щоб «Terms of Service» лишалось в 1 рядок поруч із селектором мови */
  .site-footer__copy{justify-self:center}
  .site-footer__lang{justify-self:end}
}

/* ===================== dark section variants — повністю чорні ===================== */
/* Обидва темні варіанти = чистий чорний із ледь помітною крапковою фактурою */
.sec--night, .sec--graphite{position:relative; background:#000; color:#c2c4cc; overflow:hidden}
.sec--night::after, .sec--graphite::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0); background-size:26px 26px}
.sec--night .container, .sec--graphite .container{position:relative; z-index:2}

/* спільний темний контекст: світлі тексти + чорні картки-панелі */
.on-dark{color:#c2c4cc}
.on-dark .sec-title{color:#fff}
.on-dark .sec-sub{color:#9a9ca4}
.on-dark .sec-kicker{background:rgba(255,87,34,.13); border-color:rgba(255,87,34,.30); color:#ff7a4f}
/* pillars на чорному */
.on-dark .pill{background:#111113; border-color:rgba(255,255,255,.08); box-shadow:none}
.on-dark .pill:hover{transform:translateY(-5px); border-color:rgba(255,255,255,.16); box-shadow:0 26px 60px -26px #000}
.on-dark .pill-n{color:rgba(255,255,255,.3)}
.on-dark .pill-badge{color:#ff7a4f}
.on-dark .pill h3{color:#fff}
.on-dark .pill p{color:#8f9199}
.on-dark .pill li{color:#c2c4cc}
.on-dark .pill li svg{color:#34d399}
/* money-картки на чорному */
.on-dark .mcard{background:#111113; border-color:rgba(255,255,255,.08); box-shadow:none}
.on-dark .mcard:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.16); box-shadow:0 22px 50px -26px #000}
.on-dark .mcard-ic{background:#1a1a1e; border:1px solid rgba(255,255,255,.08)}
.on-dark .mcard h3{color:#fff}
.on-dark .mcard p{color:#8f9199}
.on-dark .mcard .amt{color:#ff7a4f}
/* author на чорному */
.on-dark .author-quote{color:#fff}
.on-dark .author-body{color:#a6a8b0}
.on-dark .author-body strong{color:#fff}
.on-dark .ap-frame{background:linear-gradient(160deg,#161619,#0c0c0e)}
.on-dark .am{background:#111113; border-color:rgba(255,255,255,.08)}
.on-dark .am b{color:#fff}
.on-dark .am span{color:#8f9199}

/* ===================== accent band (mid CTA) ===================== */
.accent-band{position:relative; overflow:hidden; padding:30px 0;
  background:linear-gradient(120deg,#ff5722 0%,#e8480f 100%); color:#fff}
.accent-band::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1.3px, transparent 0); background-size:22px 22px}
.accent-band::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events:none}
.accent-band__in{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.accent-band h2{font-family:var(--st-serif); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.12; letter-spacing:-.02em; color:#fff; max-width:15em}
.accent-band p{color:rgba(255,255,255,.92); margin-top:8px; font-size:1.02rem}
.btn--white{background:#fff; color:#121212; box-shadow:0 12px 30px -8px rgba(0,0,0,.3)}
.btn--white:hover{background:#f4f4f4; transform:translateY(-2px)}
@media(max-width:700px){.accent-band__in{flex-direction:column; text-align:center; align-items:center}.accent-band h2{max-width:none}}

/* ===================== dashboard / інфографіка ===================== */
.dash-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.dash-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--st-border-strong);
  border-radius:20px; padding:22px 22px 24px; box-shadow:var(--st-shadow-sm); transition:transform .2s ease, box-shadow .2s ease}
.dash-card:hover{transform:translateY(-4px); box-shadow:var(--st-shadow)}
.dash-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px}
.dash-title{font-size:.9rem; font-weight:600; color:var(--st-text)}
.dash-dot{width:8px; height:8px; border-radius:50%; background:var(--st-accent); flex-shrink:0}
.dash-chart{height:90px; margin-bottom:16px}
.dash-chart svg{width:100%; height:100%; overflow:visible; display:block}
.dash-num{font-size:2.3rem; font-weight:800; color:var(--st-fg); letter-spacing:-.02em; line-height:1; margin-top:auto}
.dash-foot{display:flex; align-items:center; gap:10px; margin-top:9px}
.dash-trend{font-size:.85rem; font-weight:700; color:var(--st-accent)}
.dash-cap{font-size:.8rem; color:var(--st-muted)}
/* стовпчики */
.dash-bar{fill:#eef0f1; transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; transition:transform 1.58s cubic-bezier(.2,.75,.25,1)}
.dash-bar--on{fill:var(--st-accent)}
.dash-card.in .dash-bar{transform:scaleY(1)}
.dash-peak{fill:var(--st-ink); opacity:0; transition:opacity .68s ease 1.23s}
.dash-card.in .dash-peak{opacity:1}
/* лінія + площа */
.dash-line{fill:none; stroke:var(--st-accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:520; stroke-dashoffset:520; transition:stroke-dashoffset 3.38s ease .33s}
.dash-card.in .dash-line{stroke-dashoffset:0}
.dash-area{opacity:0; transition:opacity 2.03s ease 1.13s}
.dash-card.in .dash-area{opacity:1}
.dash-end{fill:var(--st-accent); stroke:#fff; stroke-width:3; opacity:0; transition:opacity .68s ease 2.13s}
.dash-card.in .dash-end{opacity:1}
/* кільце */
.dash-donut{height:90px; display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:16px}
.dash-donut svg{height:100%; width:auto; overflow:visible}
.dash-ring-bg{fill:none; stroke:#eef0f1; stroke-width:11}
.dash-ring{fill:none; stroke:var(--st-accent); stroke-width:11; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327;
  transition:stroke-dashoffset 3.15s cubic-bezier(.2,.75,.25,1) .45s}
.dash-card.in .dash-ring{stroke-dashoffset:95}
.dash-donut-c{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.75rem; font-weight:800; color:var(--st-fg)}
@media(max-width:980px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dash-grid{grid-template-columns:1fr}}
/* donut-картка на мобільному: donut зліва, текст справа — компактніше (десктоп не чіпаємо) */
@media(max-width:520px){
  .dash-card:has(.dash-donut){display:grid; grid-template-columns:auto 1fr; grid-template-areas:"head head" "donut num" "donut foot"; align-items:center; column-gap:18px}
  .dash-card:has(.dash-donut) .dash-head{grid-area:head; margin-bottom:10px}
  .dash-card:has(.dash-donut) .dash-donut{grid-area:donut; height:110px; margin:0; align-self:center}
  .dash-card:has(.dash-donut) .dash-num{grid-area:num; margin:0; align-self:end}
  .dash-card:has(.dash-donut) .dash-foot{grid-area:foot; margin:0; align-self:start}
}

/* ===== галочки/пункти списків з'являються по черзі, коли картка у в'юпорті ===== */
.pill li, .mod li, .pr-benefits li{opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease}
.pill.lit li, .mod.lit li, .pr-tiers.lit .pr-benefits li{opacity:1; transform:none}
.pill li:nth-child(1),.mod li:nth-child(1),.pr-benefits li:nth-child(1){transition-delay:.1s}
.pill li:nth-child(2),.mod li:nth-child(2),.pr-benefits li:nth-child(2){transition-delay:.3s}
.pill li:nth-child(3),.mod li:nth-child(3),.pr-benefits li:nth-child(3){transition-delay:.5s}
.pill li:nth-child(4),.mod li:nth-child(4),.pr-benefits li:nth-child(4){transition-delay:.7s}
.pill li:nth-child(5),.mod li:nth-child(5),.pr-benefits li:nth-child(5){transition-delay:.9s}
.pr-benefits li:nth-child(6){transition-delay:1.1s}
.pr-benefits li:nth-child(7){transition-delay:1.3s}
.pr-benefits li:nth-child(8){transition-delay:1.5s}
@media (prefers-reduced-motion:reduce){
  .pill li, .mod li, .pr-benefits li{opacity:1; transform:none; transition:none}
}

/* reveal on scroll */
.rvl{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.rvl.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rvl{opacity:1; transform:none; transition:none}}

/* ====== Захист від копіювання (головна автономна — дублюємо з style.css; protect.js вішає .no-copy) ====== */
.no-copy, .no-copy *{-webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none}
.no-copy input, .no-copy textarea, .no-copy select, .no-copy [contenteditable=""], .no-copy [contenteditable="true"]{-webkit-user-select:text; -moz-user-select:text; user-select:text}

/* sticky mobile CTA */
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-top:1px solid var(--st-border); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:12px; box-shadow:0 -8px 24px -12px rgba(0,0,0,.2); transform:translateY(115%); transition:transform .35s ease}
.mcta.is-visible{transform:translateY(0)}
.mcta .mc-p{flex:1; min-width:0}
.mcta .mc-p b{display:block; color:var(--st-fg); font-size:.95rem}
.mcta .mc-p s{color:var(--st-muted); font-size:.8rem}
.mcta .mc-p b .accent{color:var(--st-accent)}
@media(max-width:860px){.mcta{display:flex} body{padding-bottom:76px}}
/* анімація обведення на кнопці sticky-CTA (білий промінь по контуру) */
.mcta-cta{position:relative; overflow:hidden}
.mcta-cta::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--kb-angle), transparent 0deg 248deg, #fff 320deg, rgba(255,255,255,.5) 344deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:kb-spin 2.4s linear infinite}
@media (prefers-reduced-motion:reduce){.mcta-cta::before{animation:none}}
/* мобільний: підняти віджет підтримки (tawk.to) вище sticky-CTA, щоб не перекривались */
@media(max-width:860px){
  .tawk-min-container, .tawk-min-container > *,
  iframe[title="chat widget"], iframe[title*="Chat" i]{bottom:86px !important}
}

/* Легальні лінки під цінником (Terms/Refund/Contact — розкриття в точці покупки) */
.pr-legal{text-align:center; font-size:.82rem; color:var(--st-muted); margin-top:10px}
.pr-legal a{color:var(--st-muted); text-decoration:underline; text-underline-offset:2px}
.pr-legal a:hover{color:var(--st-accent)}
/* Футер: бізнес-ідентифікація + дисклеймер про доходи */
.site-footer__biz{margin:10px 0 0; font-size:.8rem; color:var(--st-muted); line-height:1.5}
.site-footer__biz a{color:var(--st-muted); text-decoration:underline}
.site-footer__disclaimer{margin:8px auto 0; max-width:640px; font-size:.75rem; color:var(--st-muted); line-height:1.5; opacity:.85}