*{box-sizing:border-box} :root{--blue:#315bb0;--ink:#121a2b;--muted:#596274}
body{margin:0;background:#f5f7fc;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.site{max-width:1100px;margin:24px auto;background:#fff;border:1px solid #e4e8f1;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px #23365b12}
.topbar{height:76px;display:flex;align-items:center;padding:0 30px;gap:30px;border-bottom:1px solid #e7ebf3}
.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:800;color:#111827;text-decoration:none;letter-spacing:.3px}
.brand-mark{font-size:27px;color:#2870dc;transform:skew(-20deg)}
nav{display:flex;gap:34px;margin:auto;font-size:14px;font-weight:700}nav a{color:#222b3b;text-decoration:none}nav a span{margin-left:5px;color:#69758a}
.tools{display:flex;gap:15px}.tools button{border:0;background:none;font-size:24px;color:#1b2434}
.hero{min-height:315px;background:linear-gradient(105deg,#eaf3ff,#d9eaff 60%,#c8e0fb);display:flex;position:relative;overflow:hidden}
.hero-copy{padding:44px 5.5%;width:57%;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:2px;color:#4169ad;font-weight:800}
h1{font-size:32px;line-height:1.2;margin:16px 0 12px;max-width:490px} .hero-copy>p:not(.eyebrow):not(.hero-script){font-size:16px;line-height:1.5;color:#303b50}
.primary-btn,.enroll{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:white;text-decoration:none;border:0;border-radius:12px;font-weight:700}
.primary-btn{padding:13px 24px;margin-top:4px;min-width:155px}.primary-btn span,.enroll span{font-size:23px;margin-left:12px;line-height:14px}
.hero-script{position:absolute;left:54%;bottom:38px;font-family:"Trebuchet MS",sans-serif;font-style:italic;font-weight:700;font-size:19px;line-height:1.1;transform:rotate(-7deg);color:#25354f}
.hero-visual{position:absolute;right:2%;bottom:0;width:43%;height:100%;overflow:hidden}
.sun{position:absolute;width:260px;height:260px;border-radius:50%;background:#ffffff77;right:15px;top:18px}
.student{position:absolute;width:270px;height:290px;right:35px;bottom:-25px}
.head{position:absolute;z-index:3;width:112px;height:137px;border-radius:48% 48% 45% 45%;background:#efc5a7;right:80px;top:28px;transform:rotate(-8deg)}
.hair{position:absolute;z-index:4;right:65px;top:10px;width:145px;height:160px;border-radius:55% 48% 38% 55%;background:#3a2925;transform:rotate(-10deg)}
.face{position:absolute;inset:35px 12px 5px 18px;border-radius:45%;background:#efc5a7}
.headphone{position:absolute;right:-11px;top:15px;width:28px;height:112px;border:9px solid #f8f8f8;border-left:0;border-radius:0 25px 25px 0}
.neck{position:absolute;z-index:2;right:116px;top:145px;width:40px;height:55px;background:#e9b89a}
.body{position:absolute;right:15px;bottom:0;width:220px;height:150px;border-radius:90px 90px 0 0;background:#f8f6f1;box-shadow:inset 0 0 0 2px #e5e1da}
.laptop{position:absolute;z-index:5;right:125px;bottom:0;width:170px;height:92px;background:linear-gradient(145deg,#d7e3ef,#8ea8c3);transform:skew(-13deg);border:5px solid #f6f8fb;border-radius:8px}
.courses{padding:28px 30px 34px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-heading h2{font-size:21px;margin:0;border-left:5px solid var(--blue);padding-left:12px}.section-heading a{color:#2863bd;text-decoration:none;font-weight:700;font-size:14px}
.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.course-card{border:1px solid #e1e6ef;border-radius:14px;padding:10px;box-shadow:0 3px 10px #14264b0c;min-width:0}
.course-image{height:112px;border-radius:10px;position:relative;padding:10px 14px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.course-image .mini-brand{position:absolute;top:9px;left:13px;font-size:10px;font-weight:800;color:#25324a}
.course-image strong{font-size:27px;font-style:italic;letter-spacing:-1px;margin-top:10px}.course-image strong i{color:#e24c5b}.course-image small{font-size:11px;font-weight:700;margin-top:3px}
.course-image b{position:absolute;right:18px;top:29px;font-size:45px}
.toeic{background:linear-gradient(110deg,#f4f7ff,#fff5ad)}.speaking{background:linear-gradient(110deg,#f3f6ff,#cfe2ff)}.grammar{background:linear-gradient(110deg,#f7f4ff,#e7ddff)}.business{background:linear-gradient(110deg,#f1fbf8,#c7f1e8)}
.course-info{padding:8px 4px 2px}.course-info h3{font-size:14px;margin:2px 0 5px}.course-info p{font-size:11px;color:#667085;margin:0 0 11px;min-height:14px}
.price{display:flex;align-items:center;gap:12px;margin-bottom:12px}.price strong{font-size:20px;color:#36935c}.price del{font-size:12px;color:#7d8491}.price em{font-style:normal;background:#df4b5a;color:white;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700}
.enroll{width:100%;height:39px;border-radius:9px;font-size:14px;cursor:pointer}.enroll:hover,.primary-btn:hover{filter:brightness(1.08)}
footer{text-align:center;padding:18px;color:#8a93a3;font-size:12px;border-top:1px solid #edf0f5}
.test-panel{max-width:1100px;margin:12px auto 30px;background:#fff;border:1px solid #e3e8f1;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:15px;font-size:12px;color:#586174;flex-wrap:wrap}
.test-panel strong{color:#24334d}.test-panel button{margin-left:auto;border:1px solid #ccd5e4;background:#f7f9fc;padding:7px 10px;border-radius:7px;cursor:pointer;color:#34415a}.test-panel small{width:100%;color:#8992a1}
@media(max-width:700px){.site{margin:0;border-radius:0}.topbar{height:auto;min-height:65px;padding:12px 16px;gap:10px;flex-wrap:wrap}.brand{font-size:20px}nav{order:3;width:100%;justify-content:space-between;gap:8px;font-size:11px}.tools{margin-left:auto}.hero{min-height:330px}.hero-copy{width:72%;padding:32px 20px}.hero-copy h1{font-size:25px;max-width:280px}.hero-copy>p:not(.eyebrow):not(.hero-script){font-size:13px}.hero-visual{right:-22%;width:65%;opacity:.72}.hero-script{left:35%;bottom:25px;font-size:15px}.courses{padding:22px 14px}.section-heading h2{font-size:18px}.course-grid{gap:10px}.course-card{padding:7px}.course-image{height:85px;padding:7px}.course-image strong{font-size:19px}.course-image b{font-size:31px;right:8px;top:30px}.course-info h3{font-size:12px}.course-info p{font-size:10px;min-height:27px}.price{gap:6px}.price strong{font-size:16px}.price del{font-size:10px}.price em{font-size:9px;padding:3px 5px}.enroll{height:34px;font-size:11px}.test-panel{margin:10px}}