:root{
  --violet:#6B3BF5; --violet-700:#4F22D6; --violet-500:#7C55F7;
  --violet-200:#D7C8FF; --violet-100:#EDE6FF; --violet-50:#F6F2FF;
  --ink:#150F2E; --ink-2:#332A55; --muted:#736E8C; --line:#E7E1F7; --white:#fff;
  --mint:#18B78C; --mint-bg:#E6F8F2; --coral:#F2506B; --coral-bg:#FFECEF;
  --sun:#FFB43D; --sun-bg:#FFF3E0;
  --r-lg:32px; --r-md:22px; --r-sm:14px;
  --shadow:0 18px 50px -22px rgba(60,25,150,.35);
  --shadow-sm:0 8px 24px -14px rgba(60,25,150,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.45}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:800}
h1{font-size:clamp(32px,5.2vw,60px)}
h2{font-size:clamp(25px,3.3vw,40px)}
h3{font-size:clamp(18px,2.1vw,24px)}
h4{font-size:16px}
p{margin:0}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.screen{display:block;animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.muted{color:var(--muted)} .center{text-align:center}

/* atoms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;
  border-radius:100px;font-weight:700;font-size:16px;background:var(--violet);color:#fff;transition:.18s;white-space:nowrap}
.btn:hover{background:var(--violet-700);transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--violet)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.btn--ghost{background:var(--violet-100);color:var(--violet-700)}
.btn--ghost:hover{background:var(--violet-200);box-shadow:none}
.btn--sm{padding:11px 20px;font-size:14px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:100px;
  background:var(--violet-100);color:var(--violet-700);font-size:13px;font-weight:700}
.pill--mint{background:var(--mint-bg);color:#0E7A5D}
.pill--sun{background:var(--sun-bg);color:#9A5B00}
.pill--coral{background:var(--coral-bg);color:#C22745}
.card{background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);padding:26px}

/* topbar */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top__in{max-width:1180px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em;font-size:19px}
.logo__mark{width:32px;height:32px;border-radius:10px;background:var(--violet);position:relative;flex:none}
.logo__mark:before,.logo__mark:after{content:'';position:absolute;background:#fff;border-radius:100px}
.logo__mark:before{width:4px;height:13px;left:10px;top:9px}
.logo__mark:after{width:4px;height:13px;left:18px;top:9px;opacity:.55}
.logo small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0}
.top__sp{flex:1}
.lives{display:flex;gap:5px;align-items:center}
.heart{width:22px;height:22px;transition:.3s}
.heart.dead{opacity:.22;transform:scale(.82)}
.prog{display:flex;gap:6px;align-items:center}
.prog__dot{width:9px;height:9px;border-radius:100px;background:var(--violet-200)}
.prog__dot.done{background:var(--violet)}
.prog__dot.now{background:var(--sun);box-shadow:0 0 0 4px var(--sun-bg)}

/* intro */
.hero{position:relative;overflow:hidden;padding:64px 0 90px}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.blob.b1{width:520px;height:520px;background:var(--violet-200);top:-190px;right:-120px}
.blob.b2{width:420px;height:420px;background:#FFE1C2;bottom:-200px;left:-140px;opacity:.5}
.hero__in{position:relative;z-index:1}
.hero h1 span{color:var(--violet)}
.hero__sub{font-size:clamp(16px,1.9vw,20px);color:var(--muted);max-width:620px;margin-top:22px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.role{position:relative;text-align:left;padding:32px;border-radius:var(--r-lg);background:#fff;
  border:2px solid var(--line);transition:.22s;overflow:hidden}
.role:hover{border-color:var(--violet);transform:translateY(-6px);box-shadow:var(--shadow)}
.role__ico{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;margin-bottom:20px}
.role h3{margin-bottom:9px}
.role p{color:var(--muted);font-size:15px}
.role__meta{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.role__go{margin-top:24px;display:flex;align-items:center;gap:9px;font-weight:700;color:var(--violet)}
.role:hover .role__go .arr{transform:translateX(5px)}
.arr{transition:.22s}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;padding-top:38px;border-top:1px solid var(--line)}
.fact b{display:block;font-size:30px;letter-spacing:-.03em}
.fact span{color:var(--muted);font-size:14px}

/* brief */
.brief{padding:52px 0 90px;max-width:760px;margin:0 auto}
.steps{display:grid;gap:13px;margin:32px 0}
.stepc{display:flex;gap:18px;padding:19px 22px;border-radius:var(--r-md);background:var(--violet-50);align-items:flex-start}
.stepc b{width:30px;height:30px;flex:none;border-radius:100px;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:14px}
.stepc p{font-size:15px;color:var(--ink-2)}
.note{padding:18px 22px;border-radius:var(--r-md);background:var(--sun-bg);font-size:14px;color:#7A4A00}

/* ===== КОМНАТА ===== */
.room{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  background:linear-gradient(180deg,#F3EDFF,#FBF9FF)}
.room svg{display:block;width:100%;height:auto}
.hot{cursor:pointer}
.hot:hover .hl{opacity:.35}
.hl{opacity:0;transition:.25s}
.mote{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.tip{position:absolute;right:22px;bottom:20px;max-width:262px;font-size:13px;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 16px;
  box-shadow:0 10px 30px -18px rgba(60,25,150,.7)}
.hud{position:absolute;left:22px;top:20px;display:flex;gap:10px;flex-wrap:wrap}
.glass{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px;
  box-shadow:0 8px 26px -18px rgba(60,25,150,.5)}
.glass b{display:block;font-size:17px;letter-spacing:-.02em}
.glass span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* глаза-моргание */
.lid{transform-origin:center;animation:blink 5.5s infinite}
@keyframes blink{0%,96%,100%{transform:scaleY(0)}97.5%{transform:scaleY(1)}}
.breathe{animation:breathe 4.5s ease-in-out infinite;transform-origin:center bottom}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.014)}}
.walkin{animation:walkin 1.3s cubic-bezier(.3,.9,.3,1) both}
@keyframes walkin{from{transform:translate(-250px,26px);opacity:0}to{transform:translate(0,0);opacity:1}}

/* ===== СТОЛ С КАРТОЧКАМИ ===== */
.desk{margin-top:26px;padding:26px 22px 30px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#EFE7FF,#F9F6FF);border:1px solid var(--line)}
.desk__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding:0 6px}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{position:relative;text-align:left;background:#fff;border-radius:20px;padding:20px;
  border:2px solid transparent;box-shadow:0 14px 30px -20px rgba(60,25,150,.55);transition:.24s;
  transform:rotate(var(--rot))}
.pcard:nth-child(1){--rot:-1.6deg}
.pcard:nth-child(2){--rot:1.1deg}
.pcard:nth-child(3){--rot:-.7deg}
.pcard:hover{transform:rotate(0) translateY(-8px);box-shadow:0 26px 46px -24px rgba(60,25,150,.6)}
.pcard.sel{transform:rotate(0) translateY(-8px);border-color:var(--violet);box-shadow:0 26px 46px -24px rgba(60,25,150,.6)}
.pcard.done{opacity:.45;filter:grayscale(.5)}
.pcard__clip{position:absolute;top:-11px;left:26px;width:26px;height:26px;border-radius:8px;
  background:var(--violet-200);border:3px solid #fff}
.pcard__top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.pcard__face{width:60px;height:60px;border-radius:18px;flex:none;overflow:hidden;background:var(--violet-50)}
.pcard__face svg{width:100%;height:100%;display:block}
.pcard__name{font-weight:800;font-size:17px}
.pcard__job{font-size:13px;color:var(--muted)}
.pcard__q{font-size:14.5px;color:var(--ink-2);font-style:italic;padding:12px 14px;background:var(--violet-50);border-radius:12px;margin-bottom:12px}
.pcard__row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:600}
.pcard__note{font-size:13px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.pcard__cta{margin-top:16px}

/* ===== СЦЕНА ПРИЁМА ===== */
.stage{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  background:linear-gradient(180deg,#F1EAFF,#FCFAFF)}
.stage svg{display:block;width:100%;height:auto}
.speech{position:absolute;left:30%;top:4%;width:46%;background:#fff;border-radius:22px;
  padding:16px 20px;font-size:15.5px;color:var(--ink-2);box-shadow:0 16px 40px -20px rgba(60,25,150,.7);
  animation:popc .4s cubic-bezier(.2,.9,.3,1) both;z-index:3;transform:translateX(-50%)}
.speech:after{content:'';position:absolute;left:50%;margin-left:-14px;bottom:-13px;width:0;height:0;
  border:14px solid transparent;border-top-color:#fff;border-bottom:0}
.speech b{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--violet);margin-bottom:6px}
@keyframes popc{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.94)}to{opacity:1;transform:translateX(-50%)}}
.think{display:flex;gap:6px;padding:6px 2px}
.think i{width:8px;height:8px;border-radius:100px;background:var(--violet-200);animation:blk 1.2s infinite}
.think i:nth-child(2){animation-delay:.2s}.think i:nth-child(3){animation-delay:.4s}
@keyframes blk{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.stage__hud{position:absolute;right:20px;top:18px;z-index:3;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.contact{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px;min-width:210px;
  box-shadow:0 8px 26px -18px rgba(60,25,150,.5)}
.contact__l{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.contact__b{height:9px;border-radius:100px;background:var(--violet-100);overflow:hidden}
.contact__f{height:100%;border-radius:100px;transition:.7s cubic-bezier(.2,.8,.2,1)}
.stage__mood{position:absolute;left:20px;bottom:18px;z-index:3;font-size:12.5px;font-weight:700;color:var(--violet-700);
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:9px 14px;border-radius:100px}

/* реплики */
.replies{margin-top:24px}
.replies__q{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--violet);margin-bottom:14px}
.opts{display:grid;gap:11px}
.opt{display:flex;gap:14px;text-align:left;padding:17px 20px;border-radius:var(--r-sm);border:2px solid var(--line);
  background:#fff;font-size:15px;transition:.16s;line-height:1.45;align-items:flex-start}
.opt__n{width:24px;height:24px;flex:none;border-radius:8px;background:var(--violet-50);color:var(--violet-700);
  font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:1px}
@media (hover:hover){.opt:hover{border-color:var(--violet);background:var(--violet-50)}}
.opt.good{border-color:var(--mint);background:var(--mint-bg)}
.opt.mid{border-color:var(--sun);background:var(--sun-bg)}
.opt.bad{border-color:var(--coral);background:var(--coral-bg)}
.opt.dim{opacity:.38}
.fb{margin-top:18px;padding:20px 22px;border-radius:var(--r-md);font-size:15px;animation:fade .3s ease both}
.fb b{display:block;margin-bottom:6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.fb--good{background:var(--mint-bg);color:#0B6B51}
.fb--mid{background:var(--sun-bg);color:#8A5200}
.fb--bad{background:var(--coral-bg);color:#B01F3F}
.fb__best{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.09);font-size:14px;opacity:.92}

/* result */
.res{padding:52px 0 90px;max-width:840px;margin:0 auto}
.scorewrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0}
.scorec{padding:22px;border-radius:var(--r-md);background:var(--violet-50);text-align:center}
.scorec b{display:block;font-size:32px;letter-spacing:-.03em;color:var(--violet-700)}
.scorec span{font-size:13px;color:var(--muted)}
.drow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.drow:last-child{border:0}

/* email */
.mail{max-width:660px;margin:0 auto;padding:64px 24px 100px;text-align:center}
.field{display:flex;gap:10px;margin-top:26px}
.field input{flex:1;padding:17px 22px;border-radius:100px;border:2px solid var(--line);font-size:16px;outline:0;transition:.18s}
.field input:focus{border-color:var(--violet)}
.field input.err{border-color:var(--coral)}
.consent{font-size:12.5px;color:var(--muted);margin-top:15px}

/* ===== КАРТА ===== */
.map{padding:40px 0 90px}
.mapcard{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
.mapcard__top{background:linear-gradient(135deg,var(--violet-700),var(--violet) 55%,#9B6BFF);color:#fff;padding:44px;position:relative;overflow:hidden}
.mapcard__top:after{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.09);right:-90px;top:-120px}
.mapcard__top h2{color:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.18);font-size:13px;font-weight:700;margin-bottom:16px}
.money{font-size:clamp(34px,5.4vw,58px);font-weight:800;letter-spacing:-.04em;margin:16px 0 4px}
.sect{padding:38px 40px;border-top:1px solid var(--line)}
.sect__h{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.sect__n{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--violet);text-transform:uppercase}
.sect>p.muted{font-size:14.5px;margin-bottom:24px}
.skill{margin-bottom:18px}
.skill__h{display:flex;justify-content:space-between;font-size:14.5px;font-weight:700;margin-bottom:7px}
.skill__h em{font-style:normal;color:var(--muted);font-weight:600;font-size:13px}
.skill__bar{height:11px;border-radius:100px;background:var(--violet-100);overflow:hidden}
.skill__fill{height:100%;border-radius:100px;transition:1.1s cubic-bezier(.2,.8,.2,1);width:0}
.skill__t{font-size:13.5px;color:var(--muted);margin-top:7px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.box{padding:24px;border-radius:var(--r-md)}
.box h4{margin-bottom:13px}
.box ul{margin:0;padding-left:19px;font-size:14.5px;color:var(--ink-2)}
.box li{margin-bottom:9px}
.box--mint{background:var(--mint-bg)} .box--sun{background:var(--sun-bg)} .box--vio{background:var(--violet-50)}
.rev{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px}
.rev__h{display:flex;gap:14px;align-items:center;padding:15px 20px;background:var(--violet-50)}
.rev__h b{font-size:15px}
.rev__q{font-size:13px;color:var(--muted)}
.rev__b{padding:18px 20px}
.rev__line{display:flex;gap:12px;font-size:14.5px;margin-bottom:12px;align-items:flex-start}
.rev__line:last-child{margin-bottom:0}
.rev__tag{flex:none;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:7px;margin-top:2px}
.t-you{background:var(--violet-100);color:var(--violet-700)}
.t-best{background:var(--mint-bg);color:#0E7A5D}
.t-why{background:#F2F0F7;color:var(--muted)}
.plan{display:grid;gap:14px}
.planc{display:flex;gap:18px;padding:20px 22px;border-radius:var(--r-md);background:var(--violet-50);align-items:flex-start}
.planc b{flex:none;font-size:13px;font-weight:800;color:#fff;background:var(--violet);padding:6px 12px;border-radius:100px;margin-top:2px}
.planc p{font-size:14.5px;color:var(--ink-2)}
.foot{padding:32px 40px 40px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

@media (max-width:640px){
  .top__in{padding:12px 16px;gap:10px}
  .logo{font-size:16px}.logo small{display:none}.logo__mark{width:27px;height:27px}
  .prog{display:none}
  .wrap{padding:0 16px}
  .btn{padding:14px 22px;font-size:15px}
  .speech{position:static;width:auto;left:auto;top:auto;transform:none;font-size:14px;
    padding:16px 18px;border-radius:0;box-shadow:none;border-top:1px solid var(--line);animation:fade .3s ease both}
  .speech:after{display:none}
  .stage__mood{position:static;display:inline-block;margin:0 0 0 18px}
  .stage{padding-bottom:14px}
  .stage__hud{right:12px;top:12px}
  .contact{min-width:150px;padding:9px 12px}
  .tip{display:none}
}
@media (max-width:900px){
  .roles{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:14px}
  .two{grid-template-columns:1fr}
  .scorewrap{grid-template-columns:1fr}
  .pcards{grid-template-columns:1fr}
  .pcard{transform:none}
  .mapcard__top,.sect,.foot{padding:26px}
  .hud{position:static;padding:14px 14px 0}
}

/* ---------- форма регистрации (GetCourse) ---------- */
.gcin{display:block;width:100%;padding:16px 22px;margin-bottom:11px;border:2px solid var(--line);
  border-radius:100px;font-size:16px;outline:0;transition:.18s;background:#fff;color:var(--ink)}
.gcin::placeholder{color:#A9A3BE}
.gcin:focus{border-color:var(--violet)}
.gcin.err{border-color:var(--coral)}
.legal{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.legal a{color:inherit}
.reglist{margin:0;padding-left:19px;font-size:14.5px;color:var(--ink-2);line-height:1.7}
.reglist li{margin-bottom:8px}

/* ---------- подвал (как на лендинге Talentsy) ---------- */
.lpfoot{max-width:1180px;margin:0 auto;padding:28px 24px 52px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line)}
.lpfoot img{height:26px;display:block}
.lpfoot p{color:var(--muted)}
.lpfoot a{color:inherit}
@media (max-width:640px){.lpfoot{padding:24px 16px 40px}}
@media print{
  .top,.foot,.no-print{display:none!important}
  .mapcard{box-shadow:none;border:0}
  .sect{break-inside:avoid}
}

${css}