@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --red:#e30613; --black:#161616; --yellow:#ffd500; --cream:#f7f7f5;
  --text:#1c1c1c; --muted:#666; --white:#fff; --line:#e6e6e6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--text);font-family:Inter,Arial,sans-serif}
.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:18px}.brand img{width:190px;height:auto}.brand span{font-weight:800;letter-spacing:.08em;font-size:12px;color:var(--red)}
.progress-wrap{width:260px}.progress-wrap span{font-size:12px;font-weight:700}.progress{height:6px;background:#eee;border-radius:9px;margin-top:6px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:var(--red);transition:.35s}
main{min-height:calc(100vh - 122px);max-width:1180px;margin:auto;padding:44px 28px}
.screen{display:none;animation:fade .35s ease}.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero{min-height:650px;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.hero-copy{background:var(--black);color:#fff;border-radius:26px;padding:70px 64px;position:relative;overflow:hidden}
.hero-copy:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:var(--red);right:-80px;bottom:-100px}
.eyebrow{display:inline-block;background:var(--red);color:#fff;font-weight:800;letter-spacing:.12em;padding:8px 12px;border-radius:4px;font-size:12px}
h1,h2,h3{font-family:"Barlow Condensed",Impact,sans-serif;margin:0}
h1{font-size:76px;line-height:.9;margin:20px 0}.hero-copy strong,h2 strong{color:var(--yellow)}
.lead{font-size:20px;line-height:1.5;max-width:620px}.hero-card{background:var(--yellow);border-radius:26px;padding:42px;box-shadow:0 16px 40px #0001}.hero-card-title{font:800 34px "Barlow Condensed";margin-bottom:30px}.steps{display:flex;align-items:center;justify-content:space-between;gap:10px}.steps span{font-size:42px;text-align:center}.steps b{display:block;font:700 20px "Barlow Condensed";margin-top:8px}.steps em{font-size:30px;font-style:normal}
.section-head{max-width:800px;margin-bottom:32px}.section-head h2{font-size:56px;line-height:.95;margin:14px 0}.section-head p{color:var(--muted);font-size:18px;line-height:1.55}
.btn{border:0;border-radius:10px;padding:15px 22px;font-weight:800;cursor:pointer;font-size:15px;margin-top:26px}.btn-primary{background:var(--red);color:#fff}.btn-dark{background:var(--black);color:#fff}.btn:hover{transform:translateY(-1px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card,.quote-card,.role-card,.quiz,.challenge{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}.card h3{font-size:30px;margin-bottom:20px}.card label{display:block;padding:12px 0;border-bottom:1px solid #eee}.card input{accent-color:var(--red);margin-right:10px}.quote-card{background:var(--yellow);display:flex;align-items:center;gap:20px;font-size:25px;font-weight:600;line-height:1.35}.quote-card span{font-size:48px}
.examples{display:grid;gap:14px;max-width:800px}.example{display:flex;gap:18px;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--line)}.example>span{font-size:24px;font-weight:900}.example.good>span{color:var(--red)}.example.bad{background:#fff0f0}.example.bad>span{color:var(--red)}.example b,.example small{display:block}.example small{color:var(--muted);margin-top:5px}.tip{margin-top:20px;background:#fff5b5;padding:18px;border-left:6px solid var(--yellow);max-width:800px}
.quiz{max-width:820px}.scenario{background:#f4f4f4;padding:16px;border-radius:10px}.quiz h3{font-size:28px;margin:25px 0}.answer{display:block;width:100%;text-align:left;background:#fff;border:2px solid #ddd;border-radius:12px;padding:16px;margin:10px 0;font-size:15px;cursor:pointer}.answer:hover{border-color:var(--red)}.answer.correct{border-color:#1a8f45;background:#eaf8ef}.answer.wrong{border-color:var(--red);background:#fff0f0}.feedback{font-weight:700;margin-top:16px;min-height:24px}.hidden{display:none!important}
.roleplay{display:grid;grid-template-columns:1fr 1fr;gap:22px}.role-card{min-height:300px}.role-card.client{border-top:8px solid var(--yellow)}.role-card.seller{border-top:8px solid var(--red)}.role{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--red)}.role-card h3{font-size:32px;margin:12px 0}.role-card li{margin:12px 0}.timer-box{display:flex;align-items:center;gap:18px;margin-top:24px}.timer-box #timer{font:800 52px "Barlow Condensed";min-width:100px}
.challenge{max-width:760px;border-top:10px solid var(--yellow)}.challenge-icon{font-size:42px}.challenge h3{font-size:40px}.challenge p{font-size:18px}.challenge-lines{display:grid;gap:14px;margin-top:24px}.challenge-lines input{display:block;width:100%;border:0;border-bottom:2px solid #bbb;padding:8px;background:transparent;outline:none}.takeaway{margin-top:22px;max-width:760px;background:var(--black);color:#fff;padding:25px;border-radius:16px;display:flex;gap:18px;align-items:center;font-size:20px}.takeaway span{color:var(--yellow);font-size:38px}
.final{text-align:center;padding:100px 20px}.completion{width:86px;height:86px;background:#eaf8ef;color:#178743;border-radius:50%;display:grid;place-items:center;font-size:44px;margin:0 auto 20px}.final h2{font-size:72px;margin:15px}.final-steps{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:30px 0}.final-steps b{background:#fff;border:1px solid var(--line);padding:14px 18px;border-radius:12px}.muted{color:var(--muted)}
footer{text-align:center;padding:22px;color:#888;font-size:12px;border-top:1px solid var(--line);background:#fff}
@media(max-width:800px){.topbar{height:auto;padding:15px 20px;gap:12px;align-items:flex-start}.brand{flex-direction:column;align-items:flex-start;gap:6px}.brand img{width:150px}.progress-wrap{width:140px}.hero,.grid-2,.roleplay{grid-template-columns:1fr}.hero-copy{padding:45px 28px}.hero{min-height:auto}.hero h1{font-size:58px}.section-head h2{font-size:45px}.steps{flex-direction:column}.hero-card{padding:28px}}