:root{
  --ink:#0E0E0F;
  --surface:#16171A;
  --surface2:#1D1F23;
  --line:rgba(255,255,255,.10);
  --lemon:#FBE700;
  --muted:rgba(255,255,255,.60);
}

html,body{margin:0;background:#0E0E0F}
*{box-sizing:border-box}
body{color:#fff;font-family:Manrope,system-ui,sans-serif;overflow-x:hidden;background:#0E0E0F}
a{color:#FBE700;text-decoration:none}
a:hover{color:#fff}
::selection{background:#FBE700;color:#0E0E0F}
img{max-width:100%}

/* ===== keyframes ===== */
@keyframes fill1{0%,3%{fill-opacity:0}9%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes fill2{0%,13%{fill-opacity:0}19%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes fill3{0%,23%{fill-opacity:0}29%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes fill4{0%,33%{fill-opacity:0}39%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes fill5{0%,43%{fill-opacity:0}49%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes fill6{0%,53%{fill-opacity:0}59%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes fill7{0%,63%{fill-opacity:0}69%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes fill8{0%,73%{fill-opacity:0}79%,90%{fill-opacity:1}95%,100%{fill-opacity:0}}
@keyframes faceBob{0%,56%{transform:translateY(0) scale(1)}80%{transform:translateY(-10px) scale(1.07)}92%,100%{transform:translateY(0) scale(1)}}
@keyframes barFill{0%,4%{width:0}79%,90%{width:100%}95%,100%{width:0}}
@keyframes moodCry{0%,30%{opacity:1}40%,92%{opacity:0}100%{opacity:1}}
@keyframes moodSmile{0%,30%{opacity:0}40%,60%{opacity:1}70%,100%{opacity:0}}
@keyframes moodWow{0%,60%{opacity:0}70%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-13px) rotate(-3deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(2.5deg)}50%{transform:translateY(-15px) rotate(2.5deg)}}
@keyframes floatC{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes floatD{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes wiggle{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-3.5deg)}93%{transform:rotate(3deg)}96%{transform:rotate(-2deg)}}
@keyframes coinSpin{0%,80%,100%{transform:rotateY(0)}88%{transform:rotateY(180deg)}96%{transform:rotateY(360deg)}}
@keyframes pctFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-7px) rotate(-8deg)}}
@keyframes pctFloat2{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-9px) rotate(10deg)}}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(251,231,0,.45)}50%{box-shadow:0 0 0 10px rgba(251,231,0,0)}}
@keyframes tenPop{0%,70%,100%{transform:scale(1) rotate(-6deg)}80%{transform:scale(1.15) rotate(-6deg)}90%{transform:scale(.96) rotate(-6deg)}}
@keyframes qBounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes qPop{0%,60%,100%{transform:scale(1)}75%{transform:scale(1.18)}88%{transform:scale(.94)}}

@media(prefers-reduced-motion:reduce){
  .bubble,.fun-anim{animation:none !important}
}

/* ===== reels scroller ===== */
.cases-scroller{scrollbar-width:none}
.cases-scroller::-webkit-scrollbar{display:none}

/* ===== format bubbles ===== */
.cloud{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(12px,1.8vw,22px);max-width:940px;margin:clamp(28px,5vh,56px) auto 0}
.bubble{display:inline-flex;align-items:center;gap:11px;border-radius:999px;font-family:'Dela Gothic One',sans-serif;font-weight:400;line-height:1.14;will-change:transform;transition:transform .3s,box-shadow .3s}
.bubble:hover{box-shadow:0 14px 34px rgba(0,0,0,.4)}
.bdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%}

/* ===== fun cards (pricing promos, ask cta) ===== */
.fun-card{transition:transform .3s}
.fun-card:hover{transform:translateY(-4px)}
.fun-card:hover .fun-icon{animation-duration:.6s !important}

/* ===== author responsive ===== */
@media(max-width:820px){
  .author-grid{grid-template-columns:1fr !important}
  .author-photo{min-height:clamp(300px,50vh,460px) !important;order:-1}
}

/* ===== generic hover states (from prototype's style-hover) ===== */
/* !important is needed because the base state is set via inline style
   (kept inline to stay pixel-identical to the source design), which
   otherwise beats a stylesheet :hover rule on specificity. */
.why-card{transition:transform .3s}
.why-card:hover{transform:rotate(0deg) translateY(-4px) !important}

.ig-link{transition:color .2s}
.ig-link:hover{color:#fff !important}

.hero-cta{transition:background .22s ease,color .22s ease}
.hero-cta:hover{background:var(--ink) !important;color:var(--lemon) !important}

.btn-brighten{transition:filter .2s}
.btn-brighten:hover{filter:brightness(1.06)}
.btn-brighten-strong:hover{filter:brightness(1.15)}

.reel-nav-btn{transition:background .2s}
.reel-nav-prev:hover{background:#2a2c33 !important}
.reel-nav-next:hover{filter:brightness(1.06)}

.plan-cta-outline{transition:background .2s}
.plan-cta-outline:hover{background:#26282e !important}

/* ===== accordion (program modules) ===== */
.acc-item{border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.acc-item--bonus{border:1.5px dashed rgba(251,231,0,.4);background:rgba(251,231,0,.04)}
.acc-btn{width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:none;cursor:pointer;padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px);background:var(--surface);transition:background .3s}
.acc-item--bonus .acc-btn{padding:clamp(20px,2.6vw,28px) clamp(20px,2.6vw,32px);background:transparent}
.acc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--lemon);margin-bottom:8px;transition:color .3s}
.acc-title{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(19px,2.6vw,31px);line-height:1.04;color:#fff;transition:color .3s}
.acc-item--bonus .acc-title{font-size:clamp(18px,2.4vw,28px)}
.acc-chev{flex:0 0 auto;width:clamp(40px,4.2vw,48px);height:clamp(40px,4.2vw,48px);border-radius:50%;border:1.5px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;color:#fff;transition:all .3s}
.acc-chev svg{transform:rotate(0deg);transition:transform .25s}
.acc-bonus-icon{flex:0 0 auto;width:clamp(44px,5vw,54px);height:clamp(44px,5vw,54px);border-radius:14px;background:rgba(255,255,255,.04);border:1.5px solid var(--line);display:grid;place-items:center;color:#fff;transition:all .3s}
.acc-panel{display:none;padding:clamp(26px,3vw,38px) clamp(20px,2.6vw,34px);background:#121316;border-top:1px solid var(--line)}
.acc-item--bonus .acc-panel{border-top:1.5px dashed rgba(251,231,0,.35);padding:clamp(24px,3vw,34px) clamp(20px,2.6vw,32px)}
.acc-item.is-open .acc-panel{display:block}
.acc-item.is-open .acc-btn{background:linear-gradient(135deg,#FBE700 0%,#EAD500 100%)}
.acc-item.is-open .acc-eyebrow{color:rgba(14,14,15,.62)}
.acc-item.is-open .acc-title{color:#0E0E0F}
.acc-item.is-open .acc-chev,
.acc-item.is-open .acc-bonus-icon{background:rgba(14,14,15,.12);border-color:rgba(14,14,15,.28);color:#0E0E0F}
.acc-item.is-open .acc-chev svg{transform:rotate(180deg)}

.acc-block-title{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(15px,1.8vw,20px);text-transform:uppercase;letter-spacing:.02em;margin:0 0 15px}
.acc-lesson-list{display:flex;flex-direction:column;gap:12px}
.acc-lesson{display:flex;gap:13px;align-items:flex-start;font-size:clamp(14px,1.55vw,16px);line-height:1.5;color:rgba(255,255,255,.84)}
.acc-lesson-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--lemon);margin-top:.55em}
.acc-material-list{display:flex;flex-direction:column;gap:11px}
.acc-material{display:flex;gap:12px;align-items:flex-start;font-size:clamp(14px,1.55vw,16px);line-height:1.5;color:rgba(255,255,255,.84)}
.acc-material-icon{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:rgba(251,231,0,.13);display:grid;place-items:center}
.acc-material span:last-child{padding-top:4px}
.acc-result-label{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(15px,1.8vw,20px);text-transform:uppercase;letter-spacing:.02em;color:var(--lemon);margin:0 0 13px}
.acc-result-text{margin:0;font-size:clamp(15px,1.7vw,18px);line-height:1.5;font-weight:700;color:#fff;max-width:660px}
.acc-bonus-box{border:1.5px solid rgba(251,231,0,.32);background:rgba(251,231,0,.055);border-radius:16px;padding:clamp(14px,1.7vw,18px) clamp(15px,1.8vw,20px)}
.acc-bonus-head{display:flex;align-items:center;gap:9px;margin:0 0 13px}
.acc-bonus-badge{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--lemon);display:grid;place-items:center}
.acc-bonus-badge-label{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(14px,1.6vw,17px);text-transform:uppercase;letter-spacing:.02em}
.acc-bonus-tags{display:flex;flex-wrap:wrap;gap:9px}
.acc-bonus-tag{display:inline-flex;align-items:center;gap:9px;background:rgba(251,231,0,.1);border:1.5px solid rgba(251,231,0,.42);border-radius:999px;padding:8px 15px 8px 11px;font-size:clamp(12.5px,1.4vw,14px);line-height:1.3;color:rgba(255,255,255,.92)}
.acc-divider{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.acc-divider-line{height:1px;flex:1;background:var(--line)}
.acc-divider-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.acc-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.acc-item-card{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.86)}
.acc-item-card span:last-child{padding-top:3px}
.acc-item-card-icon{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:rgba(251,231,0,.13);display:grid;place-items:center}
.acc-item-card--accent{background:var(--lemon);color:#0E0E0F;font-weight:700}
.acc-item-card--accent .acc-item-card-icon{background:rgba(14,14,15,.12)}

/* ===== telegram-style review cards (2nd marquee block) — sized to match the
   screenshot rows above so both blocks read as one consistent strip ===== */
.tg-card{flex:0 0 auto;width:clamp(150px,17vw,190px);height:clamp(74px,8vw,104px);border-radius:12px;padding:4px;background:linear-gradient(155deg,#8fc491,#6ea973);box-shadow:0 10px 24px rgba(0,0,0,.4);overflow:hidden}
.tg-bubble{background:#fff;border-radius:9px;padding:5px 7px 4px;width:100%;height:100%;display:flex;flex-direction:column;gap:2px;overflow:hidden;box-sizing:border-box}
.tg-head{display:flex;align-items:center;gap:4px}
.tg-avatar{flex:0 0 auto;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:800}
.tg-review-name{font-weight:700;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-review-text{white-space:pre-line;color:#15181c;font-size:9.5px;line-height:1.24;overflow:hidden;flex:1;min-height:0}
.tg-review-foot{display:flex;align-items:center;gap:4px;margin-top:auto;flex:0 0 auto}
.tg-pill{display:inline-flex;align-items:center;gap:2px;background:#f0f1f3;border-radius:999px;padding:0 5px;font-size:8.5px;font-weight:700;color:#333}
.tg-time{margin-left:auto;color:#9aa1a8;font-size:8px}

/* ===== FAQ ===== */
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
.faq-plus{display:inline-block;transition:transform .2s}
details[open] .faq-plus,
details.is-open .faq-plus{transform:rotate(45deg)}

/* ===== intro video frame (right after hero) — lemon border + glow, invites the click ===== */
.intro-video{
  position:relative; aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:#000;
  border:2px solid rgba(251,231,0,.5);
  box-shadow:0 0 0 5px rgba(251,231,0,.07), 0 22px 60px rgba(0,0,0,.55), 0 10px 44px rgba(251,231,0,.12);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.intro-video:hover{
  border-color:var(--lemon);
  box-shadow:0 0 0 5px rgba(251,231,0,.14), 0 26px 72px rgba(0,0,0,.6), 0 14px 54px rgba(251,231,0,.22);
  transform:translateY(-2px);
}
@media(prefers-reduced-motion:reduce){
  .intro-video{transition:none}
  .intro-video:hover{transform:none}
}

/* ===== "seats running out" mini-grid in the $10 booking card ===== */
.seats{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;max-width:196px;margin:9px 0 11px}
.seat{aspect-ratio:1/1;border-radius:2px}
.seat--taken{background:#0E0E0F}
.seat--free{background:transparent;border:1.2px solid rgba(14,14,15,.30)}

/* ============================================================
   DESKTOP & TABLET SPACING REFINEMENTS
   Every rule here is min-width gated, so the mobile layout
   (≤767px) is left exactly as before — nothing below applies
   under 768px.
   ============================================================ */

/* Tablet & up (≥768px): hold body copy to a comfortable reading
   measure in the full-width "Для кого навчання" rows instead of
   letting lines stretch the whole card on wide screens. */
@media (min-width:768px){
  #for-whom p{max-width:70ch}
}

/* Desktop / landscape tablet (≥821px): the author portrait is tall,
   so vertically centering the text left an awkward void under the
   eyebrow tag. Top-align the column so the name sits right below its
   label. (≤820px still stacks via the author-responsive rule above.) */
@media (min-width:821px){
  .author-grid{align-items:start !important}
}