/* The universe is intentionally dark; the collection follows the visitor's theme. */
.landing-page { --space:#080f1c; --starlight:#f5f1e8; --copper:#efba9d; --ice:#99c8ed; background:var(--bg-0); }
html:root body.landing-page header.topbar { --text:#f5f1e8; --muted:#bec5d1; --gold:#efba9d; box-shadow:none; background:rgba(8,15,28,.94); border-bottom:1px solid #ffffff10; color:#f5f1e8; }
.landing-page .nav-wrap { max-width:1440px; width:92%; gap:20px; min-height:84px; }
.landing-page .brand { color:#f5f1e8; font-size:23px; letter-spacing:-1px; }
.landing-page .brand img { width:36px; height:36px; }
.landing-page .brand span span { color:#efba9d!important; }
.landing-page .topbar nav { margin-left:auto; gap:25px; }
.landing-page .topbar nav a,.landing-page .nav-signin { color:#bec5d1; font-size:13px; }
.landing-page .topbar nav a:hover { color:white; }
.landing-page .topbar .btn-primary { background:#eec3a6; color:#171922; border:0; box-shadow:none; font-size:13px; padding:11px 18px; border-radius:8px; }
.landing-page .language-switcher { background:#ffffff08; border-color:#ffffff20; }
.landing-page .language-switcher button { color:#bbc5d6; }
.landing-page .language-switcher button.active { color:#fff; background:#ffffff20; }
.landing-page .theme-toggle-btn { color:#c8d1df; }
.landing-page .nav-toggle span { background:#fff; }
.landing-page :focus-visible { outline:2px solid #d39262; outline-offset:5px; }
.landing-page [hidden] { display:none!important; }
.landing-skip { position:fixed; z-index:2000; left:20px; top:-100px; padding:14px; background:#fff; color:#111; }
.landing-skip:focus { top:10px; }
.landing-shell { width:88%; max-width:1280px; margin-inline:auto; }
.landing-page h1,.landing-page h2,.landing-page h3,.landing-page p { text-wrap:pretty; }
.landing-page h2 { font-weight:500; letter-spacing:-1.4px; line-height:1.35; }
.landing-page section { scroll-margin-top:100px; }
.landing-page .universe-hero { --text:#f5f1e8; background:var(--space); color:var(--starlight); position:relative; overflow:hidden; border-bottom:1px solid #ffffff15; opacity:1; transform:none; }
.universe-inner { max-width:1500px; width:92%; margin:auto; position:relative; display:grid; grid-template-columns:.95fr 1.25fr; align-items:center; padding:74px 0 32px; column-gap:0; }
.universe-copy { position:relative; z-index:2; padding:22px 0 58px; }
.universe-eyebrow { font-family:Manrope,sans-serif; font-size:10px; letter-spacing:2.8px; color:#acbcd0; display:flex; align-items:center; gap:12px; margin:0 0 30px; }
.status-star { color:var(--copper); font-size:19px; }
.universe-copy h1 { font-family:Sarabun,sans-serif; font-size:clamp(40px,4.5vw,70px); font-weight:500; line-height:1.38; letter-spacing:-2.5px; margin:0 0 24px; }
.universe-copy h1 em { font-style:normal; color:var(--copper); }
.universe-description { font-size:16px; line-height:1.95; color:#b7c1d1; max-width:425px; margin:0 0 32px; }
.universe-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.universe-button { display:inline-flex; justify-content:center; align-items:center; gap:25px; padding:15px 23px; background:var(--copper); color:#161923; border:1px solid transparent; border-radius:7px; font-size:15px; font-weight:700; transition:background .2s,transform .2s; }
.universe-button:hover { background:#ffd8be; transform:translateY(-2px); }
.universe-button>span:last-child { font-size:20px; }
.universe-secondary { display:inline-flex; align-items:center; gap:15px; color:inherit; font-size:14px; }
.universe-secondary:hover { text-decoration:underline; text-underline-offset:6px; }
.universe-note { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:25px 0 0; font-size:11px; color:#91a0b5; }
.identity-icon { font-size:19px; color:#c3d0e2; }
.universe-art { position:relative; width:112%; margin-left:-5%; height:520px; isolation:isolate; }
.universe-art::before { content:''; position:absolute; inset:10%; background:radial-gradient(ellipse at 30% 48%,#4588be14,transparent 55%),radial-gradient(ellipse at 72% 48%,#eeb58d10,transparent 55%); z-index:-1; }
#universe-canvas,.infinity-fallback { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.universe-art.has-canvas .infinity-fallback { opacity:0; }
.infinity-fallback { opacity:.55; }
.constellation-nodes { position:absolute; inset:0 0 28px; }
.constellation-node { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); min-height:44px; padding:8px 7px; display:flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:7px; background:#080f1c88; color:#b8c3d3; font-family:Manrope,sans-serif; font-size:10px; white-space:nowrap; cursor:pointer; transition:color .2s,border-color .2s,background .2s; }
.constellation-node i { width:5px; height:5px; border-radius:50%; background:var(--app-color); box-shadow:0 0 10px var(--app-color); }
.constellation-node:hover,.constellation-node[aria-pressed="true"] { color:#fff; border-color:color-mix(in srgb,var(--app-color) 55%,transparent); background:#111d30e8; }
.constellation-node[aria-pressed="true"] i { width:6px; height:6px; }
.universe-center { position:absolute; top:49%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; text-shadow:0 2px 20px #080f1c; padding:12px 6px; background:radial-gradient(ellipse,#080f1cf2,transparent 72%); }
.universe-center>span { font-size:28px; font-weight:800; letter-spacing:-1.6px; }
.universe-center>span span { color:var(--copper); }
.universe-center small { display:block; font-size:7px; letter-spacing:2.5px; color:#9cb0cb; margin-top:6px; }
.universe-art-caption { position:absolute; bottom:0; left:15%; right:10%; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#8f9fb4; font-family:Manrope,sans-serif; font-size:8px; letter-spacing:1.6px; }
#motion-toggle { color:#a8b7ca; background:transparent; border:1px solid #ffffff20; border-radius:5px; padding:8px 10px; font-size:10px; cursor:pointer; min-height:36px; }
#motion-toggle:hover { border-color:#b5c0d3; }
.app-preview-dialog { width:min(440px,calc(100% - 32px)); padding:0; border:1px solid color-mix(in srgb,var(--app-color) 55%,#ffffff20); border-radius:16px; background:#101a2a; color:#f5f1e8; box-shadow:0 24px 80px #000b; overflow:hidden; }
.app-preview-dialog::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--app-color),#efba9d); }
.app-preview-dialog::backdrop { background:#030811b8; backdrop-filter:blur(7px); }
.app-preview-dialog>form { position:absolute; z-index:1; top:14px; right:14px; }
.app-preview-close { display:grid; place-items:center; width:40px; height:40px; border:1px solid #ffffff20; border-radius:50%; background:#ffffff08; color:#dce5f1; font:300 25px/1 Manrope,sans-serif; cursor:pointer; }
.app-preview-close:hover { background:#ffffff15; border-color:#ffffff42; }
.app-preview-heading { display:flex; align-items:center; gap:16px; padding:30px 62px 18px 28px; }
.app-preview-logo { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; padding:7px; border-radius:14px; background:#f3f6f9; color:#387949; box-shadow:0 0 28px color-mix(in srgb,var(--app-color) 25%,transparent); }
.app-preview-logo img,.app-preview-logo svg { width:100%; height:100%; object-fit:contain; }
.app-preview-domain { display:block; color:var(--app-color); font:9px Manrope,sans-serif; letter-spacing:1px; text-transform:uppercase; }
.app-preview-dialog h2 { margin:5px 0 0; color:#fff; font:700 27px/1.15 Manrope,sans-serif; letter-spacing:-1px; }
.app-preview-dialog>p { min-height:50px; margin:0; padding:0 28px 25px; color:#b7c3d2; font-size:14px; line-height:1.8; }
.app-preview-link { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 14px 14px; padding:15px 16px 15px 18px; border-radius:9px; background:var(--app-color); color:#08101c; font-size:14px; font-weight:700; }
.app-preview-link:hover { filter:brightness(1.12); }
.app-preview-link>span:last-child { font-size:21px; }
.universe-spotlight { display:grid; grid-template-columns:auto auto 1fr auto; gap:18px; align-items:center; grid-column:1/-1; color:#f4f1ea; padding:22px 0; margin-top:22px; border-top:1px solid #ffffff20; border-bottom:1px solid #ffffff12; }
.spotlight-label { font-size:9px; letter-spacing:1.7px; color:#b5a493; padding-right:18px; border-right:1px solid #ffffff20; }
#spotlight-name { font-size:15px; font-weight:700; }
#spotlight-description { color:#9dacc0; font-size:13px; }
.spotlight-arrow { font-size:25px; color:var(--copper); }
.universe-scroll { grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:20px; margin-top:28px; color:#93a3b9; font:8px Manrope,sans-serif; letter-spacing:2px; }
.universe-scroll span { font-size:16px; }
.landing-kicker { font:10px Manrope,sans-serif; letter-spacing:2px; color:var(--muted); margin:0 0 24px; }
.landing-intro { padding:100px 0 90px; display:grid; grid-template-columns:1fr 1fr; column-gap:100px; }
.landing-intro>.landing-kicker { grid-column:1/-1; }
.landing-intro h2 { font-size:clamp(29px,3vw,44px); margin:0; }
.landing-intro h2>span:last-child,.connection-section h2>span:last-child,.landing-partner h2>span:last-child { color:var(--muted); }
.intro-aside p { font-size:16px; line-height:1.9; color:var(--muted); margin:0 0 22px; }
.intro-aside a,.connection-link { font-size:14px; border-bottom:1px solid var(--line); padding-bottom:7px; color:var(--text); }
.app-discovery { padding:30px 0 85px; }
.discovery-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; }
.discovery-heading h2 { font-size:clamp(28px,3vw,42px); margin:0; }
.discovery-heading .landing-kicker { margin-bottom:18px; }
.collection-total { display:flex; align-items:center; gap:12px; font:42px Manrope,sans-serif; font-weight:500; letter-spacing:-2px; }
.collection-total small { font-size:8px; max-width:65px; letter-spacing:1.5px; line-height:1.9; color:var(--muted); }
.discovery-filters { display:flex; flex-wrap:wrap; gap:8px; margin:36px 0 12px; }
.discovery-filters button { display:flex; align-items:center; gap:10px; padding:11px 16px; min-height:44px; border:1px solid var(--line); border-radius:30px; color:var(--muted); background:transparent; cursor:pointer; font:13px Sarabun,sans-serif; transition:background .2s,color .2s; }
.discovery-filters button[aria-pressed="true"] { background:var(--text); color:var(--bg-0); border-color:var(--text); }
.discovery-filters button:hover { border-color:var(--muted); }
.filter-count { font:10px Manrope,sans-serif; opacity:.7; }
.discovery-status { min-height:18px; margin:0 0 12px; font-size:11px; color:var(--muted); }
.discovery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.discovery-card { display:flex; flex-direction:column; position:relative; padding:25px; min-height:282px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface); transition:transform .25s,border-color .25s,box-shadow .25s; overflow:hidden; }
.discovery-card::before { content:''; height:2px; position:absolute; top:0; left:25px; width:32px; background:var(--app-color); opacity:.85; }
.discovery-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--app-color) 75%,var(--line)); box-shadow:0 14px 35px #0a18300d; }
.discovery-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.app-logo { display:grid; place-items:center; width:44px; height:44px; border-radius:11px; background:#f3f6f9; color:#387949; padding:5px; }
.app-logo img,.app-logo svg { width:100%; height:100%; object-fit:contain; }
.card-arrow { font-size:22px; color:var(--muted); }
.app-domain { font:9px Manrope,sans-serif; color:var(--muted); letter-spacing:.6px; }
.discovery-card h3 { font:700 22px Manrope,sans-serif; letter-spacing:-.8px; margin:7px 0 12px; }
.discovery-card p { color:var(--muted); line-height:1.8; font-size:13px; margin:0 0 22px; }
.card-cta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--muted); }
.discovery-footnote { text-align:center; font-size:12px; margin-top:28px; color:var(--muted); }
.connection-section { background:var(--bg-1); border-block:1px solid var(--line); padding:85px 0; }
.connection-section h2 { font-size:clamp(30px,3.6vw,48px); margin:0; }
.connection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin:50px 0 35px; }
.connection-grid article { border-top:1px solid var(--line); padding-top:25px; }
.connection-symbol { font-size:30px; color:var(--gold); }
.connection-grid h3 { font-size:19px; font-weight:500; margin:18px 0 13px; }
.connection-grid p { font-size:14px; color:var(--muted); line-height:1.9; margin:0; }
.landing-page .explainer-video-section { padding:70px 0 0; max-width:1280px; width:88%; }
.landing-page .explainer-video-section h2 { font-size:clamp(26px,2.8vw,38px); }
.landing-page .explainer-video-section .eyebrow { background:none; border:0; padding:0; font:10px Manrope,sans-serif; letter-spacing:2px; color:var(--muted); }
/* กล่องวิดีโอในแถบ .dnafinity-video-section อยู่บนพื้นเข้มถาวรที่ล็อกโทนไว้
   var(--bg-1) ทำให้กรอบกลายเป็นพื้นสว่างในธีมสว่าง แล้วป้าย TH/EN/中文 ข้างใน
   ซึ่งใช้ --muted ของโทนมืดเหลือ 1.81:1 — ให้กรอบเข้มตามแถบที่มันอยู่ */
.landing-page .explainer-video-wrap { border-radius:12px; overflow:hidden; background:var(--bg-1); box-shadow:none; border:1px solid var(--line); }
.landing-page .dnafinity-video-section .explainer-video-wrap { background:rgba(7,13,33,.92); border-color:rgba(141,244,255,.2); }
.landing-page .explainer-video { max-height:550px; }
.landing-page .explainer-video-section + .explainer-video-section { padding-top:55px; }
.landing-partner { display:flex; justify-content:space-between; align-items:center; gap:65px; padding:100px 0 80px; }
.landing-partner h2 { font-size:clamp(28px,3vw,42px); margin:0 0 24px; }
.landing-partner p:not(.landing-kicker) { font-size:15px; line-height:1.9; color:var(--muted); max-width:620px; }
.partner-actions { display:flex; flex-direction:column; gap:22px; align-items:center; flex-shrink:0; }
.landing-archive { border-block:1px solid var(--line); padding:22px 0; }
.landing-archive summary { font-size:13px; cursor:pointer; color:var(--muted); }
.landing-archive .section { width:100%; }
.landing-page .faq-section { background:transparent; padding:70px 0; }
.landing-page .faq-section h2 { font-size:27px; }
.landing-page .faq-item { background:var(--surface); box-shadow:none; }
.landing-page footer { background:var(--bg-1); }
.landing-page .progress-inner { background:var(--copper); }
@media(min-width:1500px) { .universe-art { height:590px; } }
@media(max-width:1100px) { .landing-page .nav-wrap { gap:14px; } .landing-page .topbar nav { gap:16px; } .universe-copy h1 { font-size:47px; } .universe-art { height:470px; width:107%; margin-left:0; } .universe-inner { grid-template-columns:1fr 1fr; padding-top:45px; } .universe-eyebrow { font-size:8px; letter-spacing:2px; } .constellation-node { font-size:9px; gap:4px; padding:6px 4px; } .discovery-card { padding:20px; } .landing-intro { column-gap:50px; } }
@media(max-width:900px) { .universe-inner { grid-template-columns:1fr; padding-top:25px; } .universe-copy { text-align:center; padding:25px 0 0; } .universe-eyebrow,.universe-actions,.universe-note { justify-content:center; } .universe-copy h1 { font-size:54px; } .universe-description { margin:0 auto 26px; max-width:510px; } .universe-art { width:100%; margin:0 auto; max-width:700px; height:450px; } .universe-art-caption { left:5%; right:5%; } .constellation-node { font-size:10px; } .universe-spotlight { margin-top:25px; gap:14px; } #spotlight-description { font-size:12px; } .discovery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .landing-intro { column-gap:35px; padding-block:75px; } .landing-partner { gap:30px; } .connection-grid { gap:25px; } }
@media(max-width:600px) { .landing-page .nav-wrap { min-height:68px; width:92%; gap:8px; } .landing-page .brand { font-size:20px; } .landing-page .brand img { width:28px; height:28px; } .landing-page .topbar .btn-primary { font-size:11px; padding:9px 11px; } .landing-page .language-switcher button { min-width:28px; } .universe-inner { width:90%; padding:25px 0; } .universe-copy { padding:5px 0 0; } .universe-eyebrow { font-size:7.5px; letter-spacing:1.5px; margin-bottom:21px; } .universe-copy h1 { font-size:clamp(36px,9.8vw,53px); letter-spacing:-1.6px; margin-bottom:18px; } .universe-description { font-size:14px; line-height:1.85; max-width:340px; } .universe-actions { gap:20px; } .universe-button { font-size:13px; padding:13px 18px; gap:18px; } .universe-secondary { font-size:12px; } .universe-note { font-size:9px; gap:6px; margin-top:21px; } .universe-art { height:345px; margin-top:12px; } .constellation-nodes { inset:8px 4px 22px; } .constellation-node { font-size:8px; gap:3px; min-height:38px; } .constellation-node i { width:3px; height:3px; } .universe-center>span { font-size:20px; } .universe-center small { font-size:5px; letter-spacing:1.6px; } .universe-art-caption { left:1%; right:1%; font-size:6px; letter-spacing:1px; } #motion-toggle { font-size:9px; padding:5px 8px; } .universe-spotlight { grid-template-columns:auto 1fr auto; gap:10px; padding:17px 0; margin-top:20px; } .spotlight-label { font-size:8px; padding-right:10px; letter-spacing:.5px; } #spotlight-name { font-size:13px; } #spotlight-description { grid-column:1/3; grid-row:2; font-size:11px; line-height:1.7; } .spotlight-arrow { grid-column:3; grid-row:1/3; } .universe-scroll { font-size:7px; margin-top:20px; } .landing-shell { width:89%; } .landing-intro { grid-template-columns:1fr; gap:22px; padding:60px 0; } .landing-intro>.landing-kicker { margin:0; } .landing-intro h2 { font-size:32px; } .intro-aside p { font-size:14px; } .landing-kicker { font-size:8px; letter-spacing:1.4px; } .discovery-heading { align-items:center; gap:15px; } .discovery-heading h2 { font-size:27px; letter-spacing:-1px; } .collection-total { font-size:32px; } .collection-total small { display:none; } .discovery-filters { gap:7px; margin-top:26px; } .discovery-filters button { padding:9px 12px; font-size:11px; gap:8px; } .discovery-grid { gap:10px; } .discovery-card { padding:16px 14px; min-height:280px; border-radius:9px; } .discovery-top { margin-bottom:22px; } .app-domain { font-size:8px; letter-spacing:0; } .discovery-card h3 { font-size:18px; } .discovery-card p { font-size:12px; } .card-cta { font-size:10px; } .connection-section { padding:60px 0; } .connection-grid { grid-template-columns:1fr; gap:25px; margin-top:30px; } .connection-grid article { display:grid; grid-template-columns:36px 1fr; column-gap:15px; } .connection-symbol { grid-row:1/3; } .connection-grid h3 { margin:3px 0 10px; } .connection-grid p { grid-column:2; } .landing-page .explainer-video-section { padding-top:50px; } .landing-page .split-head { align-items:flex-start; gap:15px; } .landing-page .ghost-link { font-size:12px; white-space:nowrap; } .landing-partner { flex-direction:column; align-items:flex-start; padding:65px 0 50px; gap:15px; } .partner-actions { flex-direction:row; flex-wrap:wrap; gap:20px; } }
@media(prefers-reduced-motion:reduce) { .landing-page *, .landing-page *::before,.landing-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:370px) { .landing-page .brand img { display:none; } .landing-page .brand { font-size:18px; } .landing-page .nav-wrap { gap:6px; flex-wrap:nowrap; } .landing-page .topbar .btn-primary { padding:9px 8px; font-size:10px; } .landing-page .nav-toggle { width:38px; flex-shrink:0; } }