@font-face{font-family:Sora;font-weight:700;font-display:swap;src:url(fonts/sora-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Sora;font-weight:800;font-display:swap;src:url(fonts/sora-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Lao;font-weight:500;font-display:swap;src:url(fonts/noto-sans-lao-lao-500-normal.woff2) format("woff2")}

:root{
  --green:#16924F; --deep:#0B5E34; --ink:#063D22; --text:#1E2B24; --muted:#4A5C52;
  --line:#D5E6DB; --soft:#F0F6F2; --yolk:#FFC400; --white:#FFFFFF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--deep)}
a:hover{color:var(--ink)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.lao{font-family:Lao,"Noto Sans Lao",sans-serif}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--white)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:72px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:52px;height:auto;display:block}
.brand span{font:800 26px/1 Sora,sans-serif;letter-spacing:-.03em}
.nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--text);font-weight:600;font-size:15px}
.nav a:hover{color:var(--deep)}

/* hero */
.hero{background:linear-gradient(135deg,var(--green),var(--deep));color:var(--white)}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-top:72px;padding-bottom:72px}
.hero .copy{flex:1 1 420px;min-width:0}
.hero .art{flex:0 1 340px;margin:0 auto}
.hero .art img{width:100%;height:auto;display:block}
.hero h1{font:800 clamp(34px,5vw,54px)/1.08 Sora,sans-serif;letter-spacing:-.03em;margin:0 0 14px}
.hero .sub{font-size:19px;margin:0 0 6px;max-width:34em}
.hero .lao{font-size:20px;margin:0 0 28px}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--yolk);color:var(--ink);font-weight:600;text-decoration:none}
.btn:hover{background:#FFD23F;color:var(--ink)}

/* sections */
section{padding:64px 0}
section.alt{background:var(--soft)}
h2{font:800 32px/1.2 Sora,sans-serif;letter-spacing:-.02em;color:var(--ink);margin:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px}
.card h3{font:700 19px/1.3 Sora,sans-serif;color:var(--ink);margin:0 0 8px}
.card p{margin:0;color:var(--muted)}
.step{display:flex;gap:16px;align-items:flex-start}
.num{flex:0 0 40px;height:40px;border-radius:20px;background:var(--deep);color:var(--white);font:700 18px/40px Sora,sans-serif;text-align:center}

/* legal pages */
.doc{max-width:760px;margin:0 auto;padding:56px 20px 72px}
.doc h1{font:800 clamp(30px,4vw,40px)/1.15 Sora,sans-serif;color:var(--ink);letter-spacing:-.02em;margin:0 0 8px}
.doc .updated{color:var(--muted);margin:0 0 32px}
.doc h2{font-size:22px;margin:36px 0 10px}
.doc ul{padding-left:22px}
.doc li{margin:4px 0}
.note{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px 20px}

/* footer */
footer{background:var(--ink);color:#D8EADF;font-size:15px}
footer .wrap{padding-top:36px;padding-bottom:36px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
footer a{color:#FFFFFF}

@media (max-width:600px){.hero .art{flex-basis:200px;max-width:200px}.hero .wrap{padding-top:48px;padding-bottom:48px}}