:root {
  --bg: #090b0e;
  --panel: rgba(20, 23, 28, .9);
  --line: rgba(255, 255, 255, .09);
  --text: #f4f6f8;
  --muted: #a7afb9;
  --lime: #b7f36b;
  --purple: #9a72ff;
  --sans: "Noto Sans Thai", "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.glow { position: fixed; pointer-events: none; width: 520px; height: 520px; border-radius: 50%; filter: blur(130px); opacity: .11; }
.glow-one { background: var(--lime); top: -330px; left: 14%; }
.glow-two { background: var(--purple); right: -300px; bottom: -220px; }
main { width: min(1120px, calc(100% - 48px)); margin: 0 auto; position: relative; }
header { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font: 700 13px var(--sans); letter-spacing: .08em; }
.brand > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--lime); color: #0a0c0f; font-size: 15px; }
.status { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--muted); font: 11px var(--mono); letter-spacing: .08em; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(183,243,107,.12); }
.hero { padding: 82px 0 42px; max-width: 760px; }
.eyebrow, .kicker { color: var(--lime); font: 500 12px var(--mono); letter-spacing: .14em; margin: 0 0 12px; }
h1 { margin: 0 0 17px; font-size: clamp(42px, 6vw, 72px); line-height: 1.1; letter-spacing: -.05em; }
.hero > p:last-child { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.choice { min-height: 430px; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: inherit; text-decoration: none; overflow: hidden; position: relative; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.choice::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--lime); }
.growth-choice::before { background: var(--purple); }
.choice:hover { transform: translateY(-4px); border-color: rgba(183,243,107,.35); background: rgba(25,29,35,.96); }
.growth-choice:hover { border-color: rgba(154,114,255,.42); }
.choice-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.choice-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: var(--lime); color: #0b0d10; font: 700 22px var(--sans); }
.growth-choice .choice-icon { background: var(--purple); color: white; }
.live { color: var(--lime); background: rgba(183,243,107,.1); border: 1px solid rgba(183,243,107,.15); border-radius: 999px; padding: 7px 10px; font: 600 10px var(--mono); letter-spacing: .08em; }
.growth-choice .kicker { color: #b9a2ff; }
.choice h2 { margin: 0 0 14px; font-size: 32px; letter-spacing: -.04em; }
.description { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.facts { display: flex; gap: 22px; margin-top: auto; padding-top: 32px; color: #c2c8cf; font-size: 13px; }
.facts b { color: var(--text); font: 600 16px var(--mono); }
.open { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; }
.open b { color: var(--lime); font-size: 22px; transition: transform .2s ease; }
.growth-choice .open b { color: #b9a2ff; }
.choice:hover .open b { transform: translateX(4px); }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 34px 4px 48px; color: #737b86; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
  main { width: min(100% - 28px, 1120px); }
  header { height: 70px; }
  .hero { padding: 58px 3px 32px; }
  .hero > p:last-child { font-size: 16px; }
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 390px; padding: 26px; }
  .choice h2 { font-size: 28px; }
  footer { line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }