/* ═══════════════════════════════════════════════════════════════
   ACADEMIA ONLINE — สไตล์หลัก
   จุดที่แก้บ่อย: ตัวแปรสีใน :root ด้านล่างนี้ชุดเดียวจบ
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── สีหลัก (แก้ธีมทั้งเว็บได้ที่นี่) ── */
  --bg:            #0a0b0e;
  --bg-2:          #0e1014;
  --panel:         #14161c;
  --panel-2:       #1a1d25;
  --line:          rgba(229,185,84,.18);
  --line-soft:     rgba(255,255,255,.08);

  --text:          #f2ece1;
  --muted:         #9b9689;

  --gold:          #e5b954;
  --gold-deep:     #b78a2e;
  --ember:         #e0713c;
  --ember-deep:    #b84a22;
  --green:         #4ade80;

  /* ── รูปทรง / เงา / จังหวะ ── */
  --radius:        6px;
  --radius-lg:     14px;
  --shell:         1200px;
  --shadow:        0 24px 60px rgba(0,0,0,.45);
  --ease:          cubic-bezier(.22,1,.36,1);

  /* ── ฟอนต์ ── */
  --font-display:  "Kanit", "Noto Sans Thai", system-ui, sans-serif;
  --font-body:     "Noto Sans Thai", "Kanit", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.25; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.shell{ width:min(100% - 40px, var(--shell)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:#000; padding:10px 16px; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ── ป้ายกำกับเล็ก ── */
.eyebrow{
  font-family:var(--font-display);
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .9em;
  display:flex; align-items:center; gap:.6em;
}
.dot-gold{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }

.pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.45em 1.1em; border:1px solid var(--line);
  border-radius:100px; color:var(--gold); background:rgba(229,185,84,.06);
}
.pill-live::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:ping 2s infinite;
}
@keyframes ping{
  70%{ box-shadow:0 0 0 9px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

.fineprint{ font-size:.8rem; color:var(--muted); margin:.8em 0 0; }

/* ═══ ปุ่ม ═══════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display); font-weight:500; font-size:.95rem;
  padding:.85em 1.9em; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  background:linear-gradient(100deg, var(--gold) 0%, var(--ember) 100%);
  color:#14100a; font-weight:600;
  box-shadow:0 10px 30px rgba(224,113,60,.25);
}
.btn-primary:hover{ box-shadow:0 16px 40px rgba(224,113,60,.38); }

.btn-ghost{ background:rgba(255,255,255,.06); border-color:var(--line-soft); color:var(--text); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }

.btn-outline{ border-color:var(--line); color:var(--gold); background:transparent; }
.btn-outline:hover{ background:rgba(229,185,84,.1); }

.btn-plain{ color:var(--muted); padding-inline:.6em; }
.btn-plain:hover{ color:var(--text); }

/* ═══ HEADER ════════════════════════════════════════════════ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(10,11,14,.88);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px; }

.brand{ display:flex; align-items:center; gap:.7em; }
.brand-mark{
  width:38px; height:38px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:#12100b;
  background:linear-gradient(140deg, var(--gold), var(--gold-deep));
  border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(229,185,84,.35), 0 6px 18px rgba(0,0,0,.4);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:var(--font-display); font-weight:600; letter-spacing:.14em; font-size:.95rem; }
.brand-text small{ font-size:.6rem; letter-spacing:.3em; color:var(--muted); }

.site-nav{ display:flex; align-items:center; gap:4px; }
.nav-link{
  font-family:var(--font-display); font-size:.85rem; font-weight:400;
  padding:.5em .9em; border-radius:var(--radius); color:var(--muted);
  transition:color .2s, background .2s;
}
.nav-link:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-link.is-active{ color:var(--gold); background:rgba(229,185,84,.08); }

.nav-cta{
  margin-left:10px; font-family:var(--font-display); font-size:.85rem; font-weight:500;
  padding:.55em 1.3em; border-radius:var(--radius);
  border:1px solid var(--line); color:var(--gold);
  transition:background .2s;
}
.nav-cta:hover{ background:rgba(229,185,84,.12); }

.nav-toggle{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0 10px;
}
.nav-toggle span{ height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-scrim{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }

/* ═══ HERO ══════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 0 90px; overflow:hidden;
}
/* พื้นหลัง hero — เปลี่ยนเป็นรูปจริงได้ที่ background-image ด้านล่าง
   เช่น: background-image:url("img/hero.jpg"); background-size:cover; */
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%,   rgba(224,113,60,.20) 0%, transparent 55%),
    radial-gradient(90% 70% at 15% 100%,  rgba(229,185,84,.12) 0%, transparent 60%),
    linear-gradient(180deg, #10121a 0%, var(--bg) 70%);
}
.hero-grid{
  position:absolute; inset:0; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 45%, #000 30%, transparent 75%);
}
.hero-corners i{
  position:absolute; width:60px; height:60px; border:1px solid var(--line); opacity:.55;
}
.hero-corners i:nth-child(1){ top:92px;  left:24px;  border-right:0; border-bottom:0; }
.hero-corners i:nth-child(2){ top:92px;  right:24px; border-left:0;  border-bottom:0; }
.hero-corners i:nth-child(3){ bottom:24px; left:24px;  border-right:0; border-top:0; }
.hero-corners i:nth-child(4){ bottom:24px; right:24px; border-left:0;  border-top:0; }

.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow{ justify-content:center; }

.hero-title{
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  font-weight:700; letter-spacing:-.02em; line-height:1.08;
  margin:.5em 0 .3em;
}
.hero-title .line-1,
.hero-title .line-2{ display:block; }
.hero-title .line-2{
  background:linear-gradient(100deg, var(--gold) 10%, var(--ember) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-date{
  font-family:var(--font-display); font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.6em;
}

/* นับถอยหลัง */
.countdown{ display:flex; align-items:flex-start; gap:clamp(6px,2vw,18px); margin-bottom:1.8em; }
.cd-unit{
  min-width:clamp(64px, 14vw, 92px);
  padding:.7em .4em .6em;
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.03); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center;
}
.cd-unit b{
  font-family:var(--font-display); font-size:clamp(1.4rem,4vw,2.1rem); font-weight:600;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--text);
}
.cd-unit span{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.6em; }
.cd-sep{ font-size:1.4rem; color:var(--line); line-height:2.2; }
.countdown.is-ended{
  border:1px solid var(--line); border-radius:100px; padding:.6em 1.6em;
  font-family:var(--font-display); letter-spacing:.16em; text-transform:uppercase;
  font-size:.8rem; color:var(--gold); background:rgba(229,185,84,.07);
}

.hero-lead{ max-width:46ch; color:var(--muted); margin-bottom:1.8em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:2.6em; }

.server-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; justify-content:center;
  padding:.8em 1.4em; border:1px solid var(--line-soft); border-radius:100px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(8px);
}
.srv{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em; color:var(--muted);
}
.srv i{ width:8px; height:8px; border-radius:50%; background:#555; }
.srv.is-on i{ background:var(--green); box-shadow:0 0 10px rgba(74,222,128,.8); }
.srv.is-on{ color:var(--text); }
.srv-note{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.16em;
  color:var(--gold); padding-left:18px; border-left:1px solid var(--line-soft);
}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-display); font-size:.64rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted); padding-bottom:26px;
}
.scroll-cue::after{
  content:""; position:absolute; bottom:0; left:50%; width:1px; height:20px;
  background:linear-gradient(var(--gold), transparent);
  animation:cue 1.8s infinite;
}
@keyframes cue{ 0%,100%{ opacity:.2; transform:translateY(0); } 50%{ opacity:1; transform:translateY(5px); } }

/* ═══ เซคชันทั่วไป ══════════════════════════════════════════ */
.section{ padding:clamp(70px, 10vw, 130px) 0; position:relative; }
.section-alt{ background:var(--bg-2); border-block:1px solid var(--line-soft); }

.section-head{ max-width:62ch; margin-bottom:clamp(36px,5vw,64px); }
.section-head h2{ font-size:clamp(1.9rem, 4.2vw, 3rem); }
.section-lead{ color:var(--muted); font-size:1.05rem; margin:0; }
.grad{
  background:linear-gradient(100deg, var(--gold), var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* เอฟเฟกต์ค่อย ๆ ปรากฏตอนเลื่อน */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ═══ 01 · คลาสอาชีพ ════════════════════════════════════════ */
.roster-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.rt{
  font-family:var(--font-display); font-size:.85rem; font-weight:400;
  padding:.6em 1.4em; border-radius:100px; cursor:pointer;
  border:1px solid var(--line-soft); background:transparent; color:var(--muted);
  transition:all .25s var(--ease);
}
.rt:hover{ color:var(--text); border-color:var(--line); }
.rt.is-active{
  background:linear-gradient(100deg, var(--gold), var(--ember));
  color:#14100a; font-weight:500; border-color:transparent;
}

.roster-panel{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(20px,4vw,50px);
  align-items:center;
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--panel) 0%, var(--bg) 100%);
  padding:clamp(20px,3.2vw,40px);
  box-shadow:var(--shadow);
  animation:fadeUp .5s var(--ease);
}
.roster-panel[hidden]{ display:none; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.portrait{ position:relative; }
.portrait-ph{
  aspect-ratio:3/4; border-radius:var(--radius); display:grid; place-content:center; gap:.4em;
  text-align:center; font-size:.8rem; color:var(--muted);
  border:1px dashed var(--line);
  background:
    radial-gradient(70% 50% at 50% 20%, rgba(224,113,60,.16), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.portrait-ph::before{
  content:attr(data-initial);
  display:block; font-family:var(--font-display); font-size:2rem; font-weight:600;
  color:var(--gold); opacity:.55; letter-spacing:.1em;
}
.class-body h3{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:.35em; }
.quote{
  font-family:var(--font-display); font-size:1.05rem; font-weight:300; font-style:italic;
  color:var(--gold); border-left:2px solid var(--line); padding-left:1em; margin-bottom:1.2em;
}
.class-body p{ color:var(--muted); }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.4em; }
.tag-list li{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.45em 1em; border:1px solid var(--line-soft); border-radius:100px; color:var(--muted);
}

/* ═══ 02 · เริ่มเล่น ════════════════════════════════════════ */
.start-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start; }
.start-left h2{ font-size:clamp(1.9rem,4.2vw,3rem); }
.start-left > p{ color:var(--muted); }

.callout{
  border-left:2px solid var(--gold); padding:.2em 0 .2em 1.1em;
  color:var(--text); font-size:.95rem; background:rgba(229,185,84,.05);
}

.stat-row{ display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,42px); margin:1.8em 0; }
.stat b{
  display:block; font-family:var(--font-display); font-size:2rem; font-weight:600; line-height:1;
  background:linear-gradient(100deg, var(--gold), var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.steps{ display:grid; gap:10px; margin:1.6em 0; }
.steps li{
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center;
  padding:.9em 1.2em; border:1px solid var(--line-soft); border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  transition:border-color .25s, transform .25s var(--ease);
}
.steps li:hover{ border-color:var(--line); transform:translateX(4px); }
.step-no{
  grid-row:1/3; width:38px; height:38px; display:grid; place-items:center;
  font-family:var(--font-display); font-size:.85rem; color:var(--gold);
  border:1px solid var(--line); border-radius:50%;
}
.steps b{ font-family:var(--font-display); font-weight:500; }
.steps small{ color:var(--muted); font-size:.82rem; }

.start-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:1.6em; }

/* ภารกิจสะสม */
.milestones{
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  background:linear-gradient(170deg, var(--panel) 0%, var(--bg) 100%);
  padding:clamp(20px,3vw,34px); box-shadow:var(--shadow);
}
.ms-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.ms-head h3{ font-size:1.6rem; margin:0; }
.ms-counter{ text-align:right; }
.ms-counter b{
  display:block; font-family:var(--font-display); font-size:1.7rem; font-weight:600; line-height:1;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.ms-counter span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ms-lead{ color:var(--muted); font-size:.92rem; margin:1.2em 0 1.6em; }

.ms-list{ display:grid; gap:12px; }
.ms-item{
  padding:1em 1.2em; border:1px solid var(--line-soft); border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}
.ms-item p{ margin:.2em 0 .8em; font-size:.9rem; color:var(--muted); }
.ms-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ms-top b{ font-family:var(--font-display); font-size:1.05rem; color:var(--text); }
.ms-state{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ms-item.is-done .ms-state{ color:var(--green); }
.bar{ height:4px; border-radius:100px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar i{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg, var(--gold), var(--ember));
  transition:width 1.2s var(--ease);
}
.ms-item.is-done .bar i{ background:linear-gradient(90deg, #34d399, var(--green)); }

/* ═══ 03 · โรดแมป ══════════════════════════════════════════ */
.road-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:16px; }
.road-card{
  position:relative; padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  background:linear-gradient(170deg, var(--panel) 0%, var(--bg) 100%);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.road-card:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:var(--shadow); }
.road-card.is-current{
  border-color:var(--gold);
  background:linear-gradient(170deg, rgba(229,185,84,.12) 0%, var(--bg) 70%);
}
.road-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2em; }
.road-no{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--line); }
.road-card.is-current .road-no{ color:var(--gold); }
.chip{
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.35em .9em; border-radius:100px; border:1px solid var(--line-soft); color:var(--muted);
}
.chip-done{ color:var(--green); border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.07); }
.chip-now{ color:#14100a; background:linear-gradient(100deg, var(--gold), var(--ember)); border-color:transparent; font-weight:600; }
.road-card h3{ font-size:1.15rem; margin-bottom:.3em; }
.road-when{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1em;
}
.road-card > p{ font-size:.9rem; color:var(--muted); }
.road-card ul{ display:grid; gap:.5em; margin:1.2em 0; }
.road-card li{
  position:relative; padding-left:1.2em; font-size:.85rem; color:var(--muted); line-height:1.6;
}
.road-card li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.7;
}
.os-row{ display:flex; gap:8px; padding-top:1em; border-top:1px solid var(--line-soft); }
.os-row span{
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.14em;
  padding:.3em .8em; border:1px solid var(--line-soft); border-radius:4px; color:var(--muted);
}

/* ═══ 04 · แกลเลอรี ════════════════════════════════════════ */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.shot{ margin:0; cursor:zoom-in; }
.shot-wide{ grid-column:span 4; }
.shot > div, .shot > img{
  border-radius:var(--radius-lg); border:1px solid var(--line-soft);
  transition:transform .4s var(--ease), border-color .3s;
}
.shot:hover > div, .shot:hover > img{ transform:scale(1.015); border-color:var(--line); }
.shot-ph{
  aspect-ratio:4/3; display:grid; place-content:center;
  font-size:.82rem; color:var(--muted);
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(229,185,84,.10), transparent 70%),
    linear-gradient(150deg, var(--panel-2), var(--panel));
}
.shot-wide .shot-ph{ aspect-ratio:16/7; }
.shot figcaption{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-top:.8em;
}

/* ═══ 05 · ทัวร์ ═══════════════════════════════════════════ */
.tour{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr); gap:clamp(20px,3vw,34px); align-items:center; }
.tour-ph{
  aspect-ratio:16/9; border-radius:var(--radius-lg); border:1px dashed var(--line);
  display:grid; place-content:center; gap:.6em; text-align:center; padding:20px;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(224,113,60,.14), transparent 70%),
    linear-gradient(160deg, var(--panel-2), var(--bg));
}
.tour-ph b{ font-family:var(--font-display); font-size:clamp(1.2rem,3vw,2rem); letter-spacing:.2em; color:var(--gold); }
.tour-ph span{ font-size:.85rem; color:var(--muted); max-width:38ch; }
.tour-controls{ display:grid; gap:10px; align-content:center; }
.tour-btn{ width:100%; }

/* ═══ 06 · คอมมูนิตี้ ═══════════════════════════════════════ */
.community-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,56px); align-items:start; }
.community-intro h2{ font-size:clamp(1.9rem,4.2vw,3rem); }
.community-intro p{ color:var(--muted); }
.community-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cm-card{
  display:block; padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  background:linear-gradient(165deg, var(--panel) 0%, var(--bg) 100%);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.cm-card:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:var(--shadow); }
.cm-lg{ grid-column:span 2; }
.cm-ico{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:1em;
  font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--gold);
  border:1px solid var(--line); border-radius:var(--radius); background:rgba(229,185,84,.07);
}
.cm-card h3{ font-size:1.3rem; margin-bottom:.3em; }
.cm-card p{ font-size:.9rem; color:var(--muted); margin-bottom:1em; }
.cm-go{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

.support-bar{
  grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-top:10px; padding:1.2em 1.6em;
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); background:rgba(255,255,255,.02);
}
.support-bar p{ margin:0; color:var(--muted); }

/* ═══ FOOTER ═══════════════════════════════════════════════ */
.site-footer{ border-top:1px solid var(--line-soft); background:var(--bg); padding-top:clamp(44px,6vw,72px); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px); }
.footer-brand p{ color:var(--muted); font-size:.9rem; margin-top:1.2em; max-width:38ch; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius);
  border:1px solid var(--line-soft); color:var(--muted); transition:all .25s;
}
.footer-social a:hover{ color:var(--gold); border-color:var(--line); background:rgba(229,185,84,.08); }
.footer-col{ display:flex; flex-direction:column; gap:.6em; }
.footer-col h4{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.4em;
}
.footer-col a{ font-size:.9rem; color:var(--muted); transition:color .2s; }
.footer-col a:hover{ color:var(--text); }

.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
  margin-top:clamp(32px,5vw,56px); padding:1.4em 0; border-top:1px solid var(--line-soft);
}
.footer-bottom p{ margin:0; font-size:.8rem; color:var(--muted); }

/* ═══ LIGHTBOX ═════════════════════════════════════════════ */
[hidden]{ display:none !important; }   /* กัน element ที่ตั้ง display เองทับ attribute hidden */

.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:5vmin;
  background:rgba(5,6,8,.94); backdrop-filter:blur(6px);
  animation:fadeUp .25s var(--ease);
}
.lb-body{ max-width:min(1100px,92vw); width:100%; }
.lb-body .shot-ph{ aspect-ratio:16/9; border-radius:var(--radius-lg); border:1px solid var(--line); }
.lb-close{
  position:absolute; top:22px; right:26px; width:44px; height:44px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft); border-radius:50%;
  color:var(--text); font-size:1rem;
}
.lb-close:hover{ background:rgba(255,255,255,.14); }

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:1024px){
  .start-grid,
  .community-grid,
  .tour{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .shot-wide{ grid-column:span 2; }
}

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; z-index:95;
    width:min(84vw, 330px); padding:96px 24px 32px;
    flex-direction:column; align-items:stretch; gap:6px;
    background:var(--panel); border-left:1px solid var(--line-soft);
    transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .site-nav.is-open{ transform:none; }
  .nav-link{ padding:.9em 1em; font-size:1rem; }
  .nav-cta{ margin:12px 0 0; text-align:center; padding:.9em 1em; }
  .roster-panel{ grid-template-columns:1fr; }
  .portrait{ max-width:300px; margin-inline:auto; }
  .community-cards{ grid-template-columns:1fr; }
  .cm-lg{ grid-column:span 1; }
  .hero-corners{ display:none; }
}

@media (max-width:560px){
  body{ font-size:15px; }
  .shell{ width:calc(100% - 32px); }
  .countdown{ gap:6px; }
  .cd-sep{ display:none; }
  .cd-unit{ min-width:0; flex:1; }
  .hero-actions .btn,
  .start-actions .btn{ flex:1 1 100%; }
  .gallery{ grid-template-columns:1fr; }
  .shot-wide{ grid-column:span 1; }
  .footer-grid{ grid-template-columns:1fr; }
  .stat-row{ gap:24px; }
  .support-bar{ flex-direction:column; align-items:flex-start; }
}