/* FT420 academy landing — scene art and spatial sections. No app/API styling. */
:root {
  --color-paper: #071319;
  --color-paper-2: #0d1d23;
  --color-ink: #f4eee3;
  --color-ink-2: #cfdbd8;
  --color-muted: #a9bdba;
  --color-accent: #dfbc80;
  --color-accent-2: #ffe1aa;
  --color-accent-ink: #101a1c;
  --color-up: #71dec9;
  --color-glass: rgb(9 26 33 / .54);
  --color-glass-hi: rgb(11 34 41 / .70);
  --color-silver: rgb(197 226 222 / .20);
  --color-rule-2: rgb(201 225 220 / .14);
  --color-accent-wash: rgb(223 188 128 / .10);
  --color-accent-glow: rgb(223 188 128 / .25);
  --wrap: 1480px;
}
html { scroll-padding-top: 68px; }
body { background: #061319; color: var(--color-ink); }
.topbar {
  position: fixed; width: 100%; min-height: 70px; padding: 8px 0;
  background: linear-gradient(180deg, rgb(5 16 22 / .86), rgb(5 16 22 / .42));
  border-color: rgb(230 224 209 / .10); box-shadow: 0 12px 35px rgb(0 0 0 / .12);
}
.brand-mark { background: none; border: 0; width: 42px; height: 42px; }
.brand-name, .brand-sub { display: block; }
.brand-name { font-size: 1.35rem; letter-spacing: .035em; }
.brand-sub { color: #bbd0cb; }
.topnav { gap: 12px; }
.topnav a:not(.btn) { font-weight: 500; color: #e2e9e4; }
.topnav a:not(.btn):hover { color: #fff; background: rgb(255 255 255 / .10); }
.btn-fill {
  background: linear-gradient(135deg, #d9b67f, #f2d6a4 48%, #ba8b4c);
  box-shadow: inset 0 1px rgb(255 255 255 / .34), 0 12px 32px rgb(5 9 9 / .30);
}
.btn-ghost { background: rgb(8 27 33 / .42); border-color: rgb(235 232 216 / .45); }
.btn-fill::after { display: none; }

.hero, .academy-library, .academy-corridor, .academy-ledger {
  isolation: isolate; width: 100%; max-width: none; margin: 0;
}
.hero {
  min-height: max(740px, 100svh); display: flex; align-items: center;
  padding: 115px max(28px, calc((100vw - 1480px) / 2)) 80px;
  position: relative; background: #0b1820;
}
.hero::before, .academy-library::before, .academy-corridor::before, .academy-ledger::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
.hero::before { background-image: url('/img/landing-hero-v3.webp'); }
.hero::after, .academy-library::after, .academy-corridor::after, .academy-ledger::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.hero::after {
  background: linear-gradient(90deg, rgb(3 17 24 / .80) 0%, rgb(3 17 24 / .64) 32%, transparent 66%),
    linear-gradient(0deg, #071319 0%, transparent 25%);
}
.academy-depth { display: none; }
.hero-grid {
  position: relative; z-index: 2; width: min(100%, 1480px); margin: auto;
  display: block; text-align: left;
}
.hero-grid > div:first-child { max-width: 750px; }
.hero h1 {
  font-family: 'Noto Serif Thai', 'Anuphan', serif;
  font-size: clamp(3.25rem, 6vw, 6.5rem); font-weight: 500;
  line-height: 1.11; letter-spacing: -.055em; text-shadow: 0 7px 34px rgb(0 0 0 / .55);
  margin: 0 0 26px;
}
.hero .gild { background: linear-gradient(100deg, #fff0d5, #e8bf7c 65%, #fff2d8); -webkit-background-clip: text; background-clip: text; }
.hero-sub { max-width: 36ch; color: #e0e6e2; font-size: clamp(1.12rem, 1.5vw, 1.4rem); line-height: 1.8; text-shadow: 0 3px 12px #000; }
.hero-note { color: #b8c9c4; letter-spacing: .01em; }
.hero-cta .btn { min-height: 54px; font-size: .98rem; }
.academy-scroll {
  display: inline-flex; align-items: center; gap: 20px; color: #e0ddd2;
  margin-top: clamp(48px, 9vh, 110px); letter-spacing: .08em; text-transform: uppercase;
  font-size: .72rem; border-bottom: 1px solid rgb(231 225 207 / .45); padding-bottom: 10px;
}
.academy-scroll span { font-size: 1.1rem; }
.academy-ornament {
  position: absolute; right: min(8vw, 150px); top: 24%; width: min(34vw, 510px);
  aspect-ratio: 1; z-index: 1; pointer-events: none; filter: drop-shadow(0 25px 24px rgb(0 0 0 / .55));
}
.academy-ornament canvas { width: 100%; height: 100%; display: block; }
.mock-stage { display: none; }

.academy-library, .academy-corridor, .academy-ledger { position: relative; padding: 110px max(28px, calc((100vw - 1480px) / 2)); }
.academy-library { min-height: 920px; background: #07141b; }
.academy-library::before { background-image: url('/img/landing-library-v3.webp'); background-position: center bottom; }
.academy-library::after {
  background: linear-gradient(90deg, rgb(4 17 24 / .93), rgb(4 17 24 / .78) 40%, rgb(4 17 24 / .30)),
    linear-gradient(180deg, #071319 0%, transparent 18%, transparent 78%, #071319 100%);
}
.academy-library .sec-head { max-width: 750px; margin-bottom: 54px; }
.sec-head h2 { font-family: 'Noto Serif Thai', 'Anuphan', serif; font-weight: 500; letter-spacing: -.035em; }
.kicker { color: #eac994; font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; }
.sec-head p { color: #d1e0da; font-size: 1.05rem; }
.academy-library .bento {
  max-width: 1170px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 60px; border-top: 1px solid rgb(233 232 214 / .28);
}
.academy-library .cell:nth-child(n) {
  grid-column: auto; min-height: 160px; display: grid;
  grid-template-columns: 38px 58px minmax(0, 1fr); align-content: center; column-gap: 16px;
  padding: 28px 4px; border: 0; border-bottom: 1px solid rgb(233 232 214 / .24);
  border-radius: 0; background: none; backdrop-filter: none; box-shadow: none;
}
.academy-library .cell:hover { transform: none; border-color: rgb(233 232 214 / .45); }
.academy-library .cell::before { display: none; }
.academy-library .cell-idx { grid-row: 1 / 3; align-self: start; margin: 8px 0 0; color: #e3ba7b; }
.academy-library .cell-ico {
  grid-row: 1 / 3; width: 49px; height: 49px; border-radius: 50%; margin: 0;
  color: #d3eee9; background: rgb(5 56 61 / .64); border-color: rgb(106 211 201 / .45);
}
.academy-library .cell h3 { grid-column: 3; font-size: 1.36rem; margin: 0 0 6px; }
.academy-library .cell p { grid-column: 3; color: #d0dbd7; font-size: .92rem; max-width: 45ch; }

.academy-corridor { min-height: 790px; background: #061319; }
.academy-corridor::before { background-image: url('/img/landing-corridor-v3.webp'); }
.academy-corridor::after { background: linear-gradient(180deg, #061319 0%, rgb(4 17 22 / .45) 30%, rgb(4 17 22 / .25) 70%, #061319 100%); }
.academy-corridor .sec-head { max-width: none; text-align: center; margin: 0 auto 250px; }
.academy-corridor .steps { max-width: 1360px; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.academy-corridor .step {
  position: relative; padding: 26px 16px 18px 30px; border: 0; border-left: 1px solid rgb(221 190 130 / .72);
  border-radius: 0; background: linear-gradient(90deg, rgb(3 15 21 / .72), rgb(3 15 21 / .14));
  backdrop-filter: blur(7px);
}
.academy-corridor .step-num { font-size: 3.5rem; -webkit-text-stroke-color: #ddbf8c; color: rgb(221 191 140 / .18); }
.academy-corridor .step h3 { font-size: 1.38rem; }
.academy-corridor .step p { color: #d3ded9; }

.academy-ledger { min-height: 920px; background: #0b1b20; }
.academy-ledger::before { background-image: url('/img/landing-ledger-v3.webp'); background-position: center center; }
.academy-ledger::after { background: linear-gradient(180deg, #061319 0%, rgb(5 18 22 / .42) 18%, rgb(5 18 22 / .15) 72%, #061319 100%); }
.academy-ledger .sec-head { margin: 0 0 44px; text-shadow: 0 5px 16px rgb(0 0 0 / .7); }
.academy-ledger .tiers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 1290px; margin: 0 auto; }
.academy-ledger .tier-card,
.academy-ledger .tier-card.is-best {
  margin: 0; padding: 32px clamp(18px, 2.7vw, 46px); min-height: 520px; gap: 22px;
  border: 0; border-left: 1px solid rgb(65 41 24 / .35); border-radius: 0;
  background: rgb(250 225 184 / .82); backdrop-filter: blur(5px);
  box-shadow: inset 0 1px rgb(255 252 235 / .38); color: #222322;
}
.academy-ledger .tier-card:first-child { border-left: 0; border-radius: 16px 0 0 16px; }
.academy-ledger .tier-card:last-child { border-radius: 0 16px 16px 0; }
.academy-ledger .tier-card.is-best { background: rgb(255 235 198 / .91); box-shadow: inset 0 1px #fff2d6, 0 18px 32px rgb(0 0 0 / .24); }
.academy-ledger .tier-crown { top: 0; background: #173b3b; color: #e7eedf; font-size: .63rem; }
.academy-ledger .tier-card .t-name { color: #202b2b; font-size: 1.65rem; }
.academy-ledger .tier-card .t-price { color: #84602f; font-size: 2.5rem; }
.academy-ledger .tier-card .t-blurb, .academy-ledger .tier-list li { color: #3e443f; }
.academy-ledger .tier-list { gap: 9px; }
.academy-ledger .tier-list li.off { color: #555a52; opacity: .72; }
.academy-ledger .tier-mark { background: rgb(17 93 89 / .13); color: #166b68; }
.academy-ledger .tier-list li.off .tier-mark { background: rgb(52 52 44 / .10); color: #555; }
.academy-ledger .tier-card .btn-ghost { color: #153638; border-color: #295657; background: rgb(255 255 255 / .22); }
.academy-ledger .tier-foot { color: #f5eadc; margin-top: 32px; text-shadow: 0 2px 8px #000; }

.close-cta { max-width: 1050px; margin-inline: auto; background: rgb(13 36 42 / .88); border-color: rgb(120 199 185 / .34); }
.close-cta h2 { font-family: 'Noto Serif Thai', 'Anuphan', serif; }
.foot { background: #061319; }

@media (max-width: 900px) {
  .topnav { background: rgb(5 21 27 / .97); }
  .hero { min-height: 830px; padding: 110px 24px 90px; align-items: flex-start; }
  .hero::before { background-position: 58% center; }
  .hero::after { background: linear-gradient(180deg, rgb(3 16 23 / .65), rgb(3 16 23 / .42) 48%, #071319 100%); }
  .hero-grid { margin-top: 22vh; }
  .hero-grid > div:first-child { max-width: 620px; }
  .hero h1 { font-size: clamp(3rem, 9vw, 5.1rem); }
  .academy-ornament { top: 105px; right: 4%; width: 34vw; opacity: .8; }
  .academy-library, .academy-corridor, .academy-ledger { padding: 95px 28px; }
  .academy-library .bento { gap: 0 28px; }
  .academy-library .cell:nth-child(n) { grid-template-columns: 28px 43px minmax(0, 1fr); column-gap: 10px; }
  .academy-library .cell-ico { width: 40px; height: 40px; }
  .academy-corridor .sec-head { margin-bottom: 180px; }
  .academy-corridor .steps { gap: 12px; }
  .academy-ledger .tier-card, .academy-ledger .tier-card.is-best { padding: 25px 16px; }
}
@media (max-width: 680px) {
  .hero { min-height: 100svh; padding: 100px 20px 60px; }
  .hero::before { background-position: 61% center; }
  .hero::after { background: linear-gradient(180deg, rgb(3 17 24 / .38) 0%, rgb(3 17 24 / .63) 25%, rgb(3 17 24 / .80) 55%, #071319 100%); }
  .hero-grid { margin-top: clamp(185px, 30vh, 280px); }
  .hero h1 { font-size: clamp(2.75rem, 11vw, 4.1rem); line-height: 1.2; }
  .hero-sub { font-size: 1.03rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; min-height: 50px; }
  .hero-cta .btn-ghost { border: 1px solid rgb(255 255 255 / .4); color: #fff; padding: 14px 20px; background: rgb(5 20 27 / .38); }
  .academy-scroll { margin-top: 36px; }
  .academy-ornament { top: 79px; right: -30px; width: min(62vw, 310px); opacity: .9; }
  .academy-library, .academy-corridor, .academy-ledger { padding: 80px 20px; }
  .academy-library { min-height: auto; }
  .academy-library::before { background-position: 62% top; }
  .academy-library::after { background: linear-gradient(180deg, #071319 0%, rgb(4 17 24 / .79) 20%, rgb(4 17 24 / .91) 75%, #071319 100%); }
  .academy-library .bento { grid-template-columns: 1fr; }
  .academy-library .cell:nth-child(n) { min-height: 138px; }
  .academy-library .cell h3 { font-size: 1.18rem; }
  .academy-corridor { min-height: auto; }
  .academy-corridor::before { background-position: 59% center; }
  .academy-corridor .sec-head { text-align: left; margin-bottom: 145px; }
  .academy-corridor .steps { grid-template-columns: 1fr; gap: 14px; }
  .academy-corridor .step { background: rgb(3 16 23 / .66); padding: 16px 20px; }
  .academy-corridor .step-num { font-size: 2.3rem; margin-bottom: 5px; }
  .academy-ledger::before { background-position: center top; }
  .academy-ledger::after { background: linear-gradient(180deg, #061319, rgb(4 15 19 / .23) 17%, rgb(4 15 19 / .4) 70%, #061319); }
  .academy-ledger .tiers-grid { grid-template-columns: 1fr; max-width: 480px; gap: 16px; }
  .academy-ledger .tier-card, .academy-ledger .tier-card.is-best, .academy-ledger .tier-card:first-child, .academy-ledger .tier-card:last-child {
    min-height: auto; padding: 26px 22px; border-radius: 14px; border: 1px solid rgb(255 244 219 / .55);
  }
  .academy-ledger .tier-crown { left: auto; right: 14px; translate: 0 -50%; }
}
@media (prefers-reduced-motion: reduce) {
  .academy-ornament { display: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}