:root{--ink:#3B4754;--mute:#5F6B7A;--blue:#3B73C4;--blue-deep:#2B5FA8;--teal:#19D6BE;--ice:#F2F8FD;--line:#D3E1EC;--font:'Lato','Segoe UI',Roboto,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.6 var(--font);color:var(--ink);background:var(--ice);overflow-x:hidden}
a{color:var(--blue)}a:hover{color:var(--blue-deep)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
img{max-width:100%}
.in{max-width:1120px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left))}
/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#2E63B8 0%,#3F7BD0 55%,#5B8FE0 100%);padding-bottom:clamp(110px,12vw,150px);color:#fff}
.hero::before{content:"";position:absolute;right:-180px;top:-200px;width:620px;height:620px;border-radius:50%;background:rgba(255,255,255,.09)}
.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:28px}
.top img{display:block;height:56px;width:auto}
.top a.site{color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.top a.site:hover{text-decoration:underline}
.head{position:relative;padding:clamp(36px,6vw,60px) 0 clamp(20px,3vw,36px)}
.tag{margin:0 0 20px;font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#E3EEFF}
h1{margin:0;font-size:clamp(2.1rem,6vw,4rem);line-height:1.05;font-weight:900;max-width:880px;text-wrap:balance}
.sub{margin:24px 0 0;font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.55;color:#fff;max-width:44ch;text-wrap:pretty}
/* уроки */
.picks{position:relative;display:grid;gap:18px;margin-top:-96px}
.pick{display:grid;grid-template-columns:72px 1fr auto;gap:28px;align-items:center;padding:28px 32px;border-radius:22px;text-decoration:none;color:var(--ink);background:#fff;border:2px solid transparent;box-shadow:0 14px 40px rgba(30,70,130,.16);min-width:0}
.pick:hover,.pick:focus-visible{border-color:var(--teal)}
.play{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--teal);color:#1E2A38;box-shadow:0 8px 20px rgba(25,214,190,.35)}
.pt{min-width:0}
.kick{display:block;margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.pick h2{margin:0 0 8px;font-size:clamp(1.25rem,2.6vw,1.65rem);line-height:1.2;font-weight:900}
.desc{display:block;font-size:1rem;line-height:1.6;color:var(--mute);max-width:620px}
.meta{text-align:right;font-size:14px;line-height:1.6;color:var(--mute);display:flex;flex-direction:column}
.meta b{color:var(--ink);font-size:20px}
/* кто ведёт */
.band{padding-top:clamp(56px,8vw,96px)}
.about{margin:0 auto;max-width:760px;text-align:center;font-size:1.125rem;line-height:1.65;color:var(--mute)}
.who{display:flex;flex-wrap:wrap;align-items:stretch;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 14px 40px rgba(30,70,130,.10)}
.who img{width:360px;max-width:100%;min-height:440px;height:auto;align-self:stretch;object-fit:cover;object-position:80% 12%;display:block;flex:0 0 auto}
.who .tx{flex:1 1 380px;min-width:0;padding:clamp(28px,4vw,48px)}
.eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
.who h2{margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.1;font-weight:900}
.who .role{margin:0 0 22px;font-size:1.125rem;line-height:1.6;font-weight:700;color:var(--ink)}
.who .lb{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.who ul{margin:0 0 18px;padding-left:20px;color:var(--mute);line-height:1.65}
.who p.t{margin:0 0 18px;color:var(--mute);line-height:1.65}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin-top:10px}
.stat{background:var(--ice);border-radius:16px;padding:18px 20px}
.stat b{display:block;font-size:clamp(1.4rem,3vw,2rem);line-height:1.1;font-weight:900;color:var(--blue-deep);white-space:nowrap}
.stat span{display:block;font-size:14px;line-height:1.4;color:var(--mute);margin-top:6px}
/* курс */
.course{display:flex;flex-wrap:wrap;gap:40px;align-items:center;background:linear-gradient(135deg,#2E63B8,#4A86D8);border-radius:28px;padding:clamp(28px,5vw,56px);color:#fff}
.course .l{flex:1 1 440px;min-width:0}
.course .r{flex:1 1 280px;display:grid;gap:12px}
.course .eyebrow{color:#D7E6FF}
.course h2{margin:0 0 16px;font-size:clamp(1.8rem,4.4vw,2.5rem);line-height:1.1;font-weight:900}
.course p{margin:0 0 28px;font-size:1.125rem;line-height:1.6;color:#fff}
.course .btn{display:inline-block;background:#fff;color:var(--blue-deep);font-weight:900;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:18px 36px;border-radius:999px;min-height:52px}
.course .btn:hover{background:#EAF1FF;color:#1E4A85}
.course .r div{background:rgba(255,255,255,.16);border-radius:14px;padding:16px 20px}
.course .r b{display:block}.course .r small{font-size:14px;color:#fff}
/* FAQ */
.band h2.sec{margin:0 0 24px;font-size:clamp(1.8rem,4vw,2.4rem);font-weight:900}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:1.125rem;padding:22px 0;display:flex;justify-content:space-between;gap:16px;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;color:var(--blue-deep);font-size:1.4rem;line-height:1}
.faq details[open] .pm{transform:rotate(45deg)}
.faq p a{color:var(--blue-deep);font-weight:700}.faq p{margin:0 0 22px;color:var(--mute);line-height:1.65;max-width:760px}
footer.site{margin-top:clamp(56px,8vw,96px);background:#333C47;color:#C9D2DD;font-size:14px;line-height:1.7}
footer.site .in{padding-block:40px}
footer.site .cookie{margin-top:14px;max-width:760px;font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.66)}
footer.site p{margin:0 0 6px}footer.site a{color:#C9D2DD}
@media (max-width:760px){
  .pick{grid-template-columns:56px 1fr;gap:16px 18px;padding:22px 20px}
  .play{width:56px;height:56px}.play svg{width:22px;height:22px}
  .meta{grid-column:1 / -1;text-align:left;flex-direction:row;gap:12px;align-items:baseline;padding-top:4px;border-top:1px solid var(--line)}
  .who img{width:100%;min-height:0;height:340px}
  .stats{gap:10px}.stat{padding:14px 12px}
  .picks{margin-top:-72px}
}
@media (prefers-reduced-motion:no-preference){.pick{transition:border-color .15s,transform .15s}.pick:hover{transform:translateY(-3px)}}