:root { color-scheme: dark; --bg:#080f20; --surface:#0e1930; --panel:#101e37; --line:#233350; --text:#f4f7ff; --muted:#b1bfd5; --accent:#4bdcc4; --accent-strong:#2bb79e; --max:1200px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,sans-serif; line-height:1.8; }
/* Explicit locale-first Unicode shaping. Installed-font fallback remains device-dependent. */
html[lang="my"] body { font-family:'Noto Sans Myanmar','Padauk',sans-serif; }
html[lang="th"] body { font-family:'Noto Sans Thai',system-ui,sans-serif; }
html[lang="en"] body { font-family:system-ui,-apple-system,sans-serif; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset:4px; }
.container { width:min(calc(100% - 40px),var(--max)); margin:auto; }
.skip-link { position:absolute; top:-80px; left:10px; z-index:100; background:white; color:#111; padding:8px 16px; }
.skip-link:focus { top:10px; }
.preview-ribbon { padding:6px 12px; text-align:center; background:#1b2a47; color:#dfedff; font-size:12px; letter-spacing:.02em; border-bottom:1px solid #384867; }
.site-header { position:sticky; top:0; background:rgba(8,15,32,.97); border-bottom:1px solid rgba(255,255,255,.09); z-index:30; }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:84px; }
.brand { display:inline-flex; align-items:center; gap:5px; color:white; font-weight:900; font-size:20px; line-height:1.2; white-space:nowrap; text-decoration:none; letter-spacing:-.04em; }
.brand span { color:var(--accent); font-size:14px; letter-spacing:.09em; }
.brand i { background:var(--accent); width:7px; height:7px; transform:rotate(45deg); margin:0 0 10px 5px; }
.main-nav { display:flex; gap:23px; flex-wrap:wrap; align-items:center; }
.main-nav a { font-size:13px; color:var(--muted); text-decoration:none; font-weight:600; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color:white; }
.language-switcher { display:flex; gap:4px; padding:5px; background:#13213a; border:1px solid var(--line); border-radius:13px; white-space:nowrap; }
.language-switcher a { font-size:11px; text-decoration:none; padding:5px 8px; border-radius:8px; color:#c4d1e3; }
.language-switcher a.selected { color:#05221e; background:var(--accent); font-weight:800; }
.menu-toggle { display:none; color:white; background:transparent; border:1px solid var(--line); padding:7px 12px; border-radius:9px; cursor:pointer; }
.hero { background:radial-gradient(ellipse at 70% 45%, #19375b 0%, transparent 46%),linear-gradient(130deg,#0a152a,#0b1428 74%); border-bottom:1px solid var(--line); overflow:hidden; }
.hero-grid { min-height:620px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:45px; padding-top:90px; padding-bottom:100px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.16em; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(75,220,196,.12); }
h1, h2, p { margin-top:0; } h1, h2 { line-height:1.45; letter-spacing:-.025em; }
h1 { font-size:clamp(34px,4.2vw,64px); margin:20px 0 24px; max-width:780px; }
.hero-subtitle { max-width:620px; color:var(--muted); font-size:clamp(15px,1.35vw,18px); }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; border-radius:11px; padding:10px 25px; text-decoration:none; font-weight:800; font-size:14px; }
.button-primary { background:var(--accent); color:#06201c; } .button-primary:hover { background:#87f2e0; }
.button-ghost { border:1px solid #45617c; color:white; background:rgba(255,255,255,.03); } .button-ghost:hover { background:#223451; }
.hero-art { min-height:410px; position:relative; display:grid; place-items:center; }
.orbit { position:absolute; border:1px solid rgba(110,244,228,.15); border-radius:50%; transform:rotate(-30deg); }
.orbit-one { width:380px; height:380px; }.orbit-two { width:480px; height:280px; }
.art-card { position:relative; width:min(90%,370px); padding:48px 30px 42px; text-align:center; border:1px solid #345373; border-radius:32px; background:linear-gradient(150deg,rgba(48,91,127,.7),rgba(10,26,53,.95)); box-shadow:0 30px 95px #020b1b; transform:rotate(-5deg); }
.art-symbol { display:grid; place-items:center; margin:0 auto 26px; width:145px; height:145px; border-radius:35px; background:linear-gradient(135deg,#63ffde,#259eaf); color:#08252c; font-size:85px; font-weight:900; box-shadow:0 10px 70px #30cbbd4d; line-height:1; }
.art-card p { font-weight:800; font-size:17px; margin-bottom:8px; } .art-card small { color:var(--muted); }
.art-star { position:absolute; color:#84ffe9; } .star-one { top:30px; right:24px; font-size:46px; }.star-two { bottom:20px; left:36px; font-size:26px; }
.section { padding:90px 0; } .section-alt { background:#0b1629; border-top:1px solid #192740; border-bottom:1px solid #192740; }
.section-heading { display:flex; justify-content:space-between; margin-bottom:32px; }
.section-kicker { font-weight:900; letter-spacing:.2em; font-size:12px; color:var(--accent); margin-bottom:12px; }
h2 { font-size:clamp(27px,2.6vw,40px); margin-bottom:15px; } .section-heading p:not(.section-kicker),.about-panel>p,.contact-panel p:not(.section-kicker){ color:var(--muted); }
.empty-state { min-height:230px; border:1px dashed #425373; border-radius:22px; background:linear-gradient(125deg,#101e34,#101a2e); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px; text-align:center; color:#c8d5e4; }
.empty-state span { font-size:42px; color:var(--accent); margin-bottom:13px; }.empty-state p { margin:0; }
.campaign-empty { background:radial-gradient(circle at 90% 10%,#1e3b4c,#111c31 50%); }
.about-panel,.contact-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:65px; }
.about-panel>p { font-size:17px; margin-bottom:0; }.contact-panel { border:1px solid #2b4159; border-radius:24px; background:linear-gradient(125deg,#162944,#112032); padding:45px; }
.contact-panel p { margin-bottom:0; }.contact-pending { padding:26px; border-radius:15px; background:#0e1b31; border:1px solid #30435f; color:#c7d6e5; text-align:center; }
.site-footer { padding:35px 0; border-top:1px solid var(--line); }.footer-row { display:flex; justify-content:space-between; align-items:center; gap:16px; }.footer-row p { font-size:13px; color:var(--muted); margin:0; }
@media(max-width:1020px){ .header-row{flex-wrap:wrap; padding:15px 0; gap:12px;} .menu-toggle{display:block;margin-left:auto;} .main-nav{display:none;order:4;width:100%;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);padding-top:8px;} .main-nav.is-open{display:flex;} .main-nav a{padding:10px;} .language-switcher{order:3;} .hero-grid{gap:20px;} }
@media(max-width:760px){ .container{width:min(calc(100% - 32px),var(--max));}.hero-grid{grid-template-columns:1fr; padding-top:65px; padding-bottom:60px; min-height:0;}h1{font-size:clamp(32px,8vw,45px);} .hero-art{min-height:310px;} .orbit-one{width:290px;height:290px;}.orbit-two{width:335px;height:220px;}.art-card{width:275px;padding:24px 20px;}.art-symbol{width:100px;height:100px;font-size:60px;border-radius:24px;} .section{padding:64px 0;}.about-panel,.contact-panel{grid-template-columns:1fr;gap:22px;}.contact-panel{padding:25px;}.footer-row{flex-direction:column;align-items:flex-start;} }
@media(max-width:450px){ .brand{font-size:17px;}.brand span{font-size:12px;}.language-switcher{width:100%;justify-content:center;order:4;}.main-nav{order:5;}.hero-actions .button{width:100%;}.hero-art{min-height:270px;}.art-card{width:240px;} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}