/* 01 / HERO */
.hero {
  display: grid;
  align-content: center;
  min-height: 112vh;
  padding-top: calc(var(--header-h) + clamp(88px, 10vw, 150px));
  background:
    linear-gradient(to bottom, transparent 78%, var(--bg-1) 100%),
    radial-gradient(circle at 72% 34%, rgba(74,168,255,.13), transparent 29%);
}
.hero-grid,
.ending-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 78%, transparent 100%);
}
.hero-orbit {
  position: absolute;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  right: -18vw;
  top: 6vh;
  opacity: .22;
  pointer-events: none;
}
.hero-orbit::before,
.hero-orbit::after,
.hero-orbit i { content: ""; position: absolute; inset: 50%; border: 1px solid rgba(74,168,255,.34); transform: translate(-50%,-50%) rotate(45deg); }
.hero-orbit::before { width: 100%; height: 100%; }
.hero-orbit::after { width: 72%; height: 72%; }
.hero-orbit i:nth-child(1) { width: 44%; height: 44%; }
.hero-orbit i:nth-child(2) { width: 18%; height: 18%; background: rgba(74,168,255,.03); }
.hero-orbit i:nth-child(3) { width: 4px; height: 4px; border: none; background: var(--nebula-blue); box-shadow: 0 0 36px rgba(74,168,255,.7); }
.hero h1 {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 18px 0 0;
  font-size: clamp(76px, 13vw, 210px);
  line-height: .72;
  letter-spacing: -.075em;
  font-weight: 950;
}
.hero h1 span { display: block; }
.hero h1 span:last-child {
  color: transparent;
  -webkit-text-stroke: 1px rgba(241,243,245,.65);
  text-stroke: 1px rgba(241,243,245,.65);
}
.hero-cn {
  position: relative;
  z-index: 2;
  margin: 32px 0 0;
  font-size: clamp(32px, 4.4vw, 72px);
  font-weight: 800;
  letter-spacing: -.04em;
}
.hero-lead {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.75;
}
.hero-window {
  position: relative;
  z-index: 4;
  width: min(61vw, 930px);
  margin: -110px 0 0 auto;
  transform: translate3d(0, var(--parallax-y, 0), 0);
}
.hero-meta {
  display: flex;
  gap: 16px 30px;
  flex-wrap: wrap;
  margin-top: 36px;
  color: var(--muted-2);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .12em;
}

/* 02 / BUILDING */
.building-scene { background: var(--bg-1); }
.building-scene::before {
  content: "BUILD / OWN / OPERATE";
  position: absolute;
  right: -4vw;
  top: 14%;
  color: rgba(241,243,245,.025);
  font-size: clamp(100px, 18vw, 260px);
  font-weight: 950;
  letter-spacing: -.08em;
  white-space: nowrap;
  transform: rotate(90deg) translateX(40%);
  transform-origin: top right;
}
.building-scene h2,
.economy-scene h2,
.ending-scene h2 {
  margin: 0 0 28px;
  font-size: clamp(44px, 7vw, 108px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 900;
}
.build-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: clamp(50px, 7vw, 90px) 0 0;
  border-block: 1px solid var(--line);
}
.build-flow li {
  position: relative;
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 28px clamp(18px, 2vw, 34px);
  border-right: 1px solid var(--line);
}
.build-flow li:last-child { border-right: 0; }
.build-flow strong { color: var(--nebula-blue); font: 700 11px/1 var(--mono); letter-spacing: .15em; }
.build-flow span { font-size: clamp(22px, 2vw, 34px); font-weight: 750; }
.build-flow small { color: var(--muted); line-height: 1.5; }
.screenshot-stack {
  position: relative;
  min-height: clamp(560px, 55vw, 830px);
  margin-top: clamp(70px, 10vw, 140px);
}
.screenshot-stack .game-window { position: absolute; width: min(66%, 920px); }
.stack-a { top: 0; left: 0; z-index: 1; transform: rotate(-1.25deg); }
.stack-b { top: 22%; right: 2%; z-index: 2; transform: rotate(1.2deg); }
.stack-c { bottom: 0; left: 12%; z-index: 3; transform: rotate(-.45deg); }

/* 03 / APTITUDE */
.aptitude-scene {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: center;
  background:
    linear-gradient(90deg, rgba(74,168,255,.04), transparent 44%),
    var(--bg-0);
}
.aptitude-scene > .scene-kicker { grid-column: 1 / -1; width: min(100%, var(--max)); }
.aptitude-copy,
.aptitude-media { width: 100%; max-width: none; margin: 0; }
.aptitude-copy h2 {
  margin: 0 0 30px;
  font-size: clamp(48px, 6vw, 92px);
  line-height: .96;
  letter-spacing: -.055em;
}
.aptitude-copy > p { color: var(--muted); line-height: 1.85; font-size: 17px; }
.aptitude-list { list-style: none; padding: 0; margin: 40px 0 24px; border-top: 1px solid var(--line); }
.aptitude-list li { display: flex; align-items: center; gap: 18px; min-height: 54px; border-bottom: 1px solid var(--line); font-size: 18px; }
.aptitude-list span { color: var(--nebula-blue); font: 700 10px/1 var(--mono); }
.aptitude-note { font-size: 13px !important; color: var(--muted-2) !important; }
.aptitude-media { position: relative; padding: 44px 0 74px 30px; }
.aptitude-wide { width: 100%; }
.detail-window { position: absolute; width: min(46%, 420px); right: -3%; bottom: 0; }

/* 04 / ECONOMY */
.economy-scene { background: var(--bg-1); }
.economy-scene h2 span { color: var(--muted); }
.economy-chain {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .42fr 1.1fr .42fr 1.1fr .42fr 1.1fr .42fr 1.1fr;
  grid-template-rows: auto 70px auto;
  align-items: center;
  margin-top: clamp(60px, 9vw, 130px);
}
.economy-node { min-height: 142px; padding: 24px; border: 1px solid var(--line); background: rgba(12,13,15,.55); display: grid; align-content: center; gap: 7px; position: relative; }
.economy-node b { font-size: clamp(18px, 1.6vw, 26px); }
.economy-node small { color: var(--muted); }
.economy-node em { position: absolute; right: 14px; top: 14px; color: var(--muted-2); font: normal 700 9px/1 var(--mono); letter-spacing: .12em; }
.chain-link { text-align: center; color: var(--muted-2); font: 700 10px/1 var(--mono); letter-spacing: .12em; }
.chain-link::after { content: "→"; display: block; margin-top: 10px; color: var(--nebula-blue); font-size: 18px; }
.node-school { grid-column: 1; grid-row: 1; }
.link-1 { grid-column: 2; grid-row: 1; }
.node-market { grid-column: 3; grid-row: 1; }
.link-2 { grid-column: 4; grid-row: 1; }
.node-factory { grid-column: 5; grid-row: 1; }
.link-3 { grid-column: 6; grid-row: 1; }
.node-shop { grid-column: 7; grid-row: 1; }
.link-4 { grid-column: 8; grid-row: 1; }
.node-customer { grid-column: 9; grid-row: 1; }
.supply { grid-column: 4 / 7; grid-row: 3; border-color: rgba(243,196,78,.35); }
.supply::before { content: "↑ SUPPLY TO JOBS"; position: absolute; top: -42px; left: 50%; transform: translateX(-50%); color: var(--warm); font: 700 9px/1 var(--mono); white-space: nowrap; letter-spacing: .12em; }
.side { grid-column: 7 / 10; grid-row: 3; border-color: rgba(70,200,90,.3); }

/* 05 / FACILITIES */
.facilities-scene { background: var(--bg-0); }
.section-heading h2 {
  font-size: clamp(48px, 6vw, 90px);
  line-height: .95;
  letter-spacing: -.05em;
}
.facility-stage,
.school-demo-stage {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
}
.facility-copy .status-line { display: inline-flex; margin-bottom: 42px; }
.facility-en { margin: 0 0 10px; color: var(--muted-2); font: 700 12px/1.3 var(--mono); letter-spacing: .16em; }
.facility-copy h3 { margin: 0 0 20px; font-size: clamp(38px, 4.6vw, 76px); line-height: 1; letter-spacing: -.05em; }
.facility-copy > p:not(.facility-en) { color: var(--muted); line-height: 1.85; max-width: 520px; }
.facility-media { min-height: 520px; display: grid; place-items: center; }
.facility-media .game-window { width: 100%; }

/* 06 / SCHOOL */
.school-scene { background: var(--bg-1); }
.preview-notice { margin-top: 24px; color: var(--warm); font: 700 11px/1.2 var(--mono); letter-spacing: .1em; }
.school-demo-copy > span { color: var(--nebula-blue); font: 700 11px/1 var(--mono); letter-spacing: .15em; }
.school-demo-copy h3 { margin: 20px 0 18px; font-size: clamp(38px, 4vw, 68px); line-height: 1; letter-spacing: -.05em; }
.school-demo-copy p { max-width: 500px; color: var(--muted); line-height: 1.8; }
.course-mini-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.course-mini-list span { border-left: 2px solid var(--nebula-blue); padding: 6px 9px 6px 11px; background: rgba(74,168,255,.05); color: var(--muted); font-size: 12px; }
.school-contact-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 50px; }
.school-contact-sheet figure { margin: 0; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.school-contact-sheet img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.school-contact-sheet figcaption { padding: 10px 12px; color: var(--muted); font: 700 10px/1 var(--mono); letter-spacing: .1em; }

/* 07 / ENDING */
.ending-scene { min-height: 108vh; display: grid; align-content: center; background: radial-gradient(circle at 50% 86%, rgba(74,168,255,.09), transparent 34%), var(--bg-0); }
.ending-grid { transform: perspective(700px) rotateX(66deg) scale(1.35); transform-origin: 50% 85%; opacity: .55; }
.ending-scene h2 { position: relative; z-index: 2; font-size: clamp(64px, 10vw, 155px); max-width: 1200px; }
.ending-cn { position: relative; z-index: 2; margin: 28px 0 16px; font-size: clamp(30px, 4vw, 64px); font-weight: 760; letter-spacing: -.04em; }
.ending-copy { position: relative; z-index: 2; color: var(--muted); line-height: 1.8; font-size: 18px; }
.ending-scene footer { position: relative; z-index: 2; margin-top: 110px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.ending-scene footer strong { font-size: 24px; letter-spacing: -.04em; }
.ending-scene footer span { color: var(--warm); font: 700 10px/1 var(--mono); letter-spacing: .14em; }

@media (min-width: 768px) and (max-width: 1199px) {
  .scene { min-height: auto; }
  .hero { min-height: 105vh; }
  .hero-window { width: 72vw; margin-top: -40px; }
  .screenshot-stack { min-height: 680px; }
  .aptitude-scene, .facility-stage, .school-demo-stage { grid-template-columns: .9fr 1.1fr; }
  .economy-chain { grid-template-columns: repeat(5, 1fr); grid-template-rows: auto 58px auto 58px auto; gap: 10px; }
  .economy-node { min-height: 120px; }
  .node-school { grid-column: 1; grid-row: 1; }
  .link-1 { grid-column: 2; grid-row: 1; }
  .node-market { grid-column: 3; grid-row: 1; }
  .link-2 { grid-column: 4; grid-row: 1; }
  .node-factory { grid-column: 5; grid-row: 1; }
  .link-3 { grid-column: 5; grid-row: 2; transform: rotate(90deg); }
  .node-shop { grid-column: 5; grid-row: 3; }
  .link-4 { grid-column: 4; grid-row: 3; transform: rotate(180deg); }
  .node-customer { grid-column: 3; grid-row: 3; }
  .supply { grid-column: 1 / 3; grid-row: 3; }
  .side { grid-column: 1 / 6; grid-row: 5; }
}

@media (max-width: 767px) {
  :root { --header-h: 58px; }
  .site-header { grid-template-columns: 1fr auto; padding-inline: 18px; }
  .site-nav { display: none; }
  .dev-chip { font-size: 8px; }
  .scene { min-height: auto; padding: 84px 20px; }
  .scene > * { width: 100%; }
  .scene-kicker { font-size: 10px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .section-heading p { justify-self: start; }
  .hero { min-height: 100svh; padding-top: calc(var(--header-h) + 68px); align-content: start; }
  .hero h1 { font-size: clamp(62px, 24vw, 118px); }
  .hero-cn { margin-top: 24px; }
  .hero-window { width: 118%; margin: 58px 0 0 -9%; }
  .hero-meta { gap: 12px 18px; }
  .hero-orbit { width: 100vw; right: -58vw; top: 14vh; }
  .building-scene h2, .economy-scene h2, .ending-scene h2 { font-size: clamp(42px, 14vw, 72px); }
  .build-flow { grid-template-columns: 1fr 1fr; }
  .build-flow li:nth-child(2) { border-right: 0; }
  .build-flow li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .screenshot-stack { min-height: auto; display: grid; gap: 20px; margin-top: 60px; }
  .screenshot-stack .game-window { position: relative; width: 100%; inset: auto; transform: none; }
  .aptitude-scene { display: grid; grid-template-columns: 1fr; gap: 30px; }
  .aptitude-copy, .aptitude-media { width: 100%; }
  .aptitude-copy h2 { font-size: clamp(46px, 14vw, 70px); }
  .aptitude-media { padding: 0; display: grid; gap: 18px; }
  .detail-window { position: relative; width: 78%; right: auto; bottom: auto; justify-self: end; margin-top: -44px; }
  .economy-chain { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  .economy-node, .chain-link, .supply, .side,
  .node-school, .node-market, .node-factory, .node-shop, .node-customer,
  .link-1, .link-2, .link-3, .link-4 { grid-column: 1; grid-row: auto; transform: none; }
  .chain-link { padding: 4px 0; }
  .chain-link::after { content: "↓"; margin-top: 6px; }
  .supply::before { position: static; display: block; transform: none; margin-bottom: 12px; }
  .facility-stage, .school-demo-stage { display: grid; grid-template-columns: 1fr; gap: 36px; }
  .facility-tabs, .school-steps { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .facility-tabs::-webkit-scrollbar, .school-steps::-webkit-scrollbar { display: none; }
  .facility-media { min-height: 0; }
  .school-contact-sheet { grid-template-columns: 1fr 1fr; }
  .ending-scene { min-height: 100svh; }
  .ending-scene footer { margin-top: 80px; }
}