/* Modern Thai Luxury — Thai-Dev 2026 (Cloudflare Pages Upload)
   Files must be in the SAME folder (root): index.html, styles.css, app.js
*/

:root{
  --bg:#07090c; --bg2:#0b0f14; --text:#f3f4f6; --muted:#a7b0bd;
  --gold:#d6b25e; --gold2:#f2d07c;
  --panel:rgba(10,12,16,.62);
  --line:rgba(255,255,255,.10); --line2:rgba(214,178,94,.22);
  --shadow:0 26px 80px rgba(0,0,0,.60);
  --ease:cubic-bezier(.2,.8,.2,1);
  --font-sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Thai","Noto Sans",Arial;
  --font-display:ui-serif,Georgia,serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

html[data-theme="light"]{
  --bg:#f7f3ea; --bg2:#fbf8f1; --text:#141618; --muted:#47505c;
  --panel:rgba(255,255,255,.72);
  --line:rgba(10,12,16,.12); --line2:rgba(214,178,94,.28);
  --shadow:0 26px 80px rgba(20,22,24,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 18% -10%, rgba(214,178,94,.18), transparent 45%),
    radial-gradient(900px 520px at 92% 10%, rgba(0,0,0,.35), transparent 55%),
    radial-gradient(800px 600px at 60% 120%, rgba(214,178,94,.10), transparent 40%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

.woodgrain{
  pointer-events:none;
  position:fixed; inset:0;
  opacity:.20;
  background:
    repeating-linear-gradient(105deg, rgba(214,178,94,.10) 0 2px, rgba(0,0,0,0) 2px 16px),
    radial-gradient(1100px 700px at 30% 30%, rgba(214,178,94,.10), transparent 60%);
  mix-blend-mode: overlay;
}

.wrap{max-width:1160px;margin:0 auto;padding:20px 20px 34px; transition:opacity .55s var(--ease), transform .55s var(--ease);}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0 6px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brandTitle{line-height:1.15}
.brandTitle b{font-family:var(--font-display);letter-spacing:.5px;font-size:16px}
.brandTitle span{display:block;font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:2px}

.logo{
  width:44px;height:44px;border-radius:14px;
  background: radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,0)),
              linear-gradient(135deg, rgba(214,178,94,.95), rgba(242,208,124,.72));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 4px rgba(214,178,94,.10);
  display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.logo:before{
  content:""; position:absolute; inset:-40%;
  background: conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  animation: shine 5.2s var(--ease) infinite; opacity:.55;
}
@keyframes shine{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.logo svg{position:relative;z-index:1}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.controls--tight{gap:8px}

.chip{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  padding:9px 12px;border-radius:999px;
  font-size:13px;color:var(--muted);
  cursor:pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  user-select:none;
}
.chip:hover{transform:translateY(-1px);border-color:var(--line2);color:var(--text)}

.glassCard{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), var(--panel);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  border-radius: 24px;
  position:relative; overflow:hidden;
}
.glassCard:before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(214,178,94,.16), transparent 60%),
    radial-gradient(520px 240px at 100% 30%, rgba(255,255,255,.08), transparent 55%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px);
  opacity:.55; pointer-events:none;
}
.cardPad{padding:22px; position:relative; z-index:1}

.goldBtn{
  border:0;cursor:pointer;
  padding:12px 14px;border-radius:14px;
  font-weight:900; letter-spacing:.2px;
  color:#1a1204;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  box-shadow: 0 14px 30px rgba(214,178,94,.20);
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;
  transition: transform .15s var(--ease), filter .15s var(--ease);
  user-select:none; white-space:nowrap;
}
.goldBtn:hover{transform:translateY(-1px);filter:saturate(1.15)}

.ghostBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  color:var(--text);
  padding:12px 14px;border-radius:14px;
  font-weight:800;
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
  white-space:nowrap;
}
.ghostBtn:hover{transform:translateY(-1px);border-color:var(--line2)}

.hero{margin-top:14px;display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:stretch}
@media (max-width:980px){.hero{grid-template-columns:1fr}}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line2);
  background: rgba(214,178,94,.10);
  color: rgba(242,208,124,1);
  padding:8px 12px;border-radius:999px;
  font-size:12px;font-family:var(--font-mono);
}
.pulseDot{
  width:8px;height:8px;border-radius:50%;
  background: var(--gold2);
  box-shadow:0 0 18px rgba(242,208,124,.75);
  animation: pd 1.6s var(--ease) infinite;
}
@keyframes pd{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

h1{margin:14px 0 10px;font-family:var(--font-display);letter-spacing:.4px;font-size:46px;line-height:1.05}
@media (max-width:520px){h1{font-size:38px}}
.subtitle{color:var(--muted);line-height:1.75;font-size:16px;margin:0 0 14px;max-width:64ch}

.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.mini{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.7;font-family:var(--font-mono)}

.h2{font-family:var(--font-display);font-size:22px;margin:0 0 8px;letter-spacing:.3px}
.muted{color:var(--muted);margin:0;line-height:1.7}
.small{font-size:13px}

.grid{margin-top:16px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.innerGrid{margin-top:12px}
.col12{grid-column:span 12}
.col6{grid-column:span 6}
.col4{grid-column:span 4}
@media (max-width:980px){.col6,.col4{grid-column:span 12}}

.feat{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  padding:14px;
}
.ico{
  width:40px;height:40px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid var(--line2);
  background: rgba(214,178,94,.10);
  color: var(--gold2);
  font-family:var(--font-mono);
  font-weight:900;
  flex:0 0 auto;
}
.feat b{display:block}
.feat p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.65}

.road{
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  padding:14px;
  margin-top:12px;
}
.row{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background: rgba(0,0,0,.10);
  margin-bottom:10px;
}
html[data-theme="light"] .row{background: rgba(255,255,255,.30); border-color: rgba(10,12,16,.10)}
.row:last-child{margin-bottom:0}

.badge{
  font-family:var(--font-mono);
  font-size:12px;font-weight:900;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  flex:0 0 auto;
  white-space:nowrap;
}
.badge.done{background: rgba(52,211,153,.90); color:#071a12; border-color: rgba(52,211,153,.55)}
.badge.now{background: rgba(214,178,94,.92); color:#1a1204; border-color: rgba(214,178,94,.55)}
.badge.next{background: rgba(96,165,250,.90); color:#071428; border-color: rgba(96,165,250,.55)}

.hbWrap{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 10px;
  background: rgba(0,0,0,.12);
}
html[data-theme="light"] .hbWrap{background: rgba(255,255,255,.35)}
.hbWrap--splash{margin-top:10px}

.hbHeader{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.hbCanvas{
  width:100%;
  height:84px; /* important: gives visible canvas height */
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120px 60px at 20% 50%, rgba(214,178,94,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
html[data-theme="light"] .hbCanvas{
  border-color: rgba(10,12,16,.10);
  background:
    radial-gradient(140px 70px at 20% 50%, rgba(214,178,94,.16), transparent 70%),
    linear-gradient(180deg, rgba(10,12,16,.06), rgba(10,12,16,0));
}

.footer{
  margin:20px 0 6px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:14px;
  color:var(--muted);
  font-size:12px;
  display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
}
.legal{max-width:74ch;line-height:1.65;font-family:var(--font-mono)}
.links{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.link{color:var(--muted);text-decoration:none;border-bottom:1px dotted rgba(214,178,94,.35)}
.link:hover{color:var(--text)}

.flex1{flex:1}
.formRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
input[type="email"]{
  flex:1 1 240px; min-width:220px;
  padding:12px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  color:var(--text);
  outline:none;
}
html[data-theme="light"] input[type="email"]{
  background:rgba(255,255,255,.60);
  border-color:rgba(10,12,16,.12);
}

.splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 560px at 40% 20%, rgba(214,178,94,.18), transparent 55%),
    radial-gradient(900px 560px at 90% 10%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(180deg, #06070a, #0b0f14);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
html[data-theme="light"] .splash{
  background:
    radial-gradient(900px 560px at 40% 20%, rgba(214,178,94,.22), transparent 55%),
    radial-gradient(900px 560px at 90% 10%, rgba(10,12,16,.10), transparent 60%),
    linear-gradient(180deg, #faf6ee, #fffaf1);
}
.splash.hide{opacity:0;transform: translateY(-8px);pointer-events:none}

.splashCard{
  width:min(860px,92vw);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
html[data-theme="light"] .splashCard{
  background: rgba(255,255,255,.60);
  border-color: rgba(10,12,16,.10);
}
.splashPad{padding:22px 22px 18px; position:relative}

.splashTop{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.splashTitle{display:flex; align-items:center; gap:12px}
.splashTitle b{font-family:var(--font-display);letter-spacing:.4px;font-size:18px}
.splashTitle span{display:block;font-family:var(--font-mono);color:var(--muted);font-size:12px;margin-top:2px}
.splashMsg{color:var(--muted);line-height:1.7;margin:8px 0 10px;font-size:13px}

.progressWrap{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background: rgba(0,0,0,.18);
  overflow:hidden;
  height:12px;
}
html[data-theme="light"] .progressWrap{
  background: rgba(10,12,16,.06);
  border-color: rgba(10,12,16,.10);
}
.progressBar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  box-shadow: 0 0 22px rgba(214,178,94,.24);
  transition: width .18s var(--ease);
}

.splashBottom{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}
.loading{display:inline-flex;align-items:center;gap:10px}
.loading i{
  width:8px;height:8px;border-radius:50%;
  background: var(--gold2);
  box-shadow:0 0 16px rgba(242,208,124,.65);
  animation: blink 1.0s var(--ease) infinite;
}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}