@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Nunito:wght@700;800;900&display=swap');

:root { --jade:#0d806d; --jade-deep:#07594d; --mint:#c9f3df; --leaf:#62ba86; --sun:#ffba45; --ink:#13241e; --muted:#5c6d66; --ground:#f7f8f3; --card:#fffef9; --line:#dce7df; --night:#101713; --night-card:#18241e; --night-ink:#edf5ef; --night-muted:#a7b7ae; --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:"Be Vietnam Pro",system-ui,sans-serif; line-height:1.55; }
a { color:inherit; }
.shell { width:min(calc(100% - 40px),var(--max)); margin:auto; }
.skip { position:absolute; left:-999px; top:auto; }.skip:focus { left:20px; top:20px; z-index:10; padding:10px 14px; background:#fff; border-radius:10px; }
.nav { min-height:76px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:Nunito,sans-serif; font-size:19px; font-weight:900; }.brand img { width:34px; height:34px; border-radius:10px; box-shadow:0 8px 20px #0d806d30; }
.links { display:flex; align-items:center; gap:18px; font-size:14px; font-weight:700; }.links a { color:var(--muted); text-decoration:none; }.links a:hover,.links a:focus { color:var(--jade-deep); text-decoration:underline; text-underline-offset:4px; }
.hero { overflow:hidden; padding:54px 0 72px; background:radial-gradient(circle at 74% 10%,#d7f7e6 0,transparent 34%),radial-gradient(circle at 10% 80%,#f9e4ad 0,transparent 27%),var(--ground); }.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }.eyebrow { color:var(--jade-deep); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.hero h1,.section h2 { font-family:Nunito,sans-serif; font-weight:900; line-height:1.05; letter-spacing:-.04em; }.hero h1 { font-size:clamp(42px,6vw,72px); max-width:10ch; margin:12px 0 20px; }.hero h1 em { color:var(--jade); font-style:normal; }.lede { color:var(--muted); font-size:18px; max-width:55ch; }.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 20px; border-radius:999px; background:var(--jade); color:white; font-weight:800; text-decoration:none; box-shadow:0 10px 22px #0d806d3a; }.button:hover,.button:focus { background:var(--jade-deep); transform:translateY(-1px); }.button.ghost { color:var(--jade-deep); background:#fff; border:1px solid #bcdacf; box-shadow:none; }
.phone { width:min(100%,380px); justify-self:center; padding:14px; border-radius:42px; background:linear-gradient(145deg,#1d2b25,#0c1310); box-shadow:0 32px 70px #234b3a40; }.screen { min-height:530px; padding:25px 19px; border-radius:30px; background:linear-gradient(180deg,#8cc7af 0,#d6f2df 33%,#f7f8f3 58%); }.screen-top { display:flex; justify-content:space-between; color:#123b2e; font-size:13px; font-weight:800; }.screen h3 { margin:64px 0 4px; font:900 36px/1 Nunito,sans-serif; color:#123b2e; }.screen p { margin:0; color:#396555; font-size:14px; }.study-card { margin-top:23px; padding:18px; border-radius:22px; background:#fffefb; box-shadow:0 14px 28px #1d65532b; }.photo { height:130px; border-radius:16px; background:linear-gradient(135deg,#ffcc75,#e87d4b 48%,#4caa81); }.study-card h4 { margin:13px 0 2px; font:900 25px Nunito,sans-serif; }.ladder { display:flex; gap:5px; margin-top:14px; }.ladder span { flex:1; height:8px; border-radius:99px; background:#dbe8df; }.ladder span:first-child,.ladder span:nth-child(2) { background:var(--jade); }
.section { padding:90px 0; }.section.tint { background:var(--night); color:var(--night-ink); }.section h2 { font-size:clamp(32px,4vw,52px); max-width:14ch; margin:9px 0 16px; }.section-intro { color:var(--muted); max-width:61ch; }.tint .section-intro { color:var(--night-muted); }.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }.tile { padding:24px; background:var(--card); border:1px solid var(--line); border-radius:22px; }.tint .tile { background:var(--night-card); border-color:#2e4237; }.tile .mark { display:block; font-size:29px; margin-bottom:18px; }.tile h3 { margin:0 0 8px; font:900 21px Nunito,sans-serif; }.tile p { margin:0; color:var(--muted); font-size:14px; }.tint .tile p { color:var(--night-muted); }
.track-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:34px; }.track { padding:18px 14px; min-height:130px; border-radius:19px; display:flex; flex-direction:column; justify-content:flex-end; color:white; font:900 18px/1.1 Nunito,sans-serif; }.track small { font:500 12px "Be Vietnam Pro"; margin-top:8px; }.toeic{background:linear-gradient(150deg,#0b8170,#66c59a)}.ielts{background:linear-gradient(150deg,#326ec0,#78aee5)}.thpt{background:linear-gradient(150deg,#d85f55,#f19b6e)}.talk{background:linear-gradient(150deg,#a95d9a,#e29dc8)}.cefr{background:linear-gradient(150deg,#bd8635,#f1c45d)}
.wall { margin-top:36px; display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }.wall-art { min-height:310px; padding:20px; border-radius:24px; background:linear-gradient(130deg,#235b4b,#10251d); display:grid; grid-template-columns:repeat(5,1fr); gap:8px; transform:rotate(-1deg); }.word { min-height:86px; border-radius:13px; background:linear-gradient(145deg,#d7a261,#8e5040); box-shadow:inset 0 0 0 1px #ffffff22; }.word:nth-child(2n){background:linear-gradient(145deg,#81b9c3,#306d7b)}.word:nth-child(3n){background:linear-gradient(145deg,#de7c66,#895038)}.word:nth-child(5n){background:linear-gradient(145deg,#c4cd6e,#657a42)}.wall-copy { padding:28px; border-radius:24px; background:#e1f4e8; }.wall-copy h3 { font:900 30px/1 Nunito,sans-serif; margin:0 0 12px; }.wall-copy p { color:#3d6354; }.rungs { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:8px; }.rungs li { font-weight:700; }.rungs b { color:var(--jade-deep); }
.cta-band { text-align:center; padding:96px 0; background:linear-gradient(150deg,#d8f5e5,#fff4d6); }.cta-band h2 { font:900 clamp(34px,5vw,58px)/1 Nunito,sans-serif; letter-spacing:-.04em; margin:0 auto 16px; max-width:14ch; }.cta-band p { color:var(--muted); max-width:55ch; margin:0 auto; }.foot { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:34px 0 55px; color:var(--muted); font-size:13px; }.foot nav { display:flex; gap:18px; }.foot a { text-decoration:none; }.foot a:hover { text-decoration:underline; }
.legal { max-width:760px; padding:56px 0 90px; }.legal h1 { font:900 clamp(38px,6vw,56px)/1 Nunito,sans-serif; letter-spacing:-.04em; margin:22px 0 14px; }.legal h2 { font:900 24px/1.15 Nunito,sans-serif; margin:40px 0 12px; }.legal p,.legal li { color:var(--muted); }.legal a { color:var(--jade-deep); }.legal .meta { color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:25px; }
:focus-visible { outline:3px solid var(--sun); outline-offset:3px; }
@media (max-width:800px) { .hero-grid,.wall { grid-template-columns:1fr; }.phone { margin-top:16px; }.grid { grid-template-columns:1fr; }.track-grid { grid-template-columns:repeat(2,1fr); }.track:last-child { grid-column:span 2; }.section { padding:68px 0; } }
@media (max-width:520px) { .shell { width:min(calc(100% - 28px),var(--max)); }.links { gap:10px; font-size:12px; }.hero { padding-top:28px; }.hero h1 { font-size:45px; }.screen { min-height:470px; }.foot { align-items:flex-start; flex-direction:column; }.track-grid { grid-template-columns:1fr; }.track:last-child { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transform:none !important; } }