@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=ZCOOL+QingKe+HuangYou&display=swap');

:root {
  --night: #071a24;
  --night-deep: #041117;
  --night-soft: #0d2a35;
  --land: #4f8f78;
  --land-bright: #72aa86;
  --ice: #d7f1e8;
  --mist: #8fafb2;
  --gold: #c6a15b;
  --signal: #e05a47;
  --line: rgba(166, 209, 203, 0.18);
  --sans: 'Noto Sans SC', sans-serif;
  --display: 'ZCOOL QingKe HuangYou', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ice); font-family: var(--sans); overflow-x: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: var(--gold); color: var(--night); }

.site-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 78px; padding: 0 clamp(24px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; transition: .35s ease; }
.site-header.is-scrolled { height: 66px; background: rgba(4, 17, 23, .86); border-color: var(--line); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-weight: 600; letter-spacing: .08em; }
.brand small { color: var(--mist); font: 400 10px var(--sans); letter-spacing: .12em; padding-left: 10px; border-left: 1px solid var(--line); }
.brand-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--land-bright); transform: rotate(30deg) skew(-5deg); }
.brand-mark span { width: 8px; height: 8px; background: var(--gold); }
.site-header nav { display: flex; gap: 38px; font-size: 13px; color: var(--mist); }
.site-header nav a { position: relative; transition: color .2s; }
.site-header nav a::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px; background: var(--gold); transition: width .25s; }
.site-header nav a:hover { color: var(--ice); }
.site-header nav a:hover::after { width: 100%; }
.menu-button { display: none; border: 0; background: transparent; padding: 8px; }

.hero { min-height: 100svh; position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); align-items: center; padding: 120px clamp(24px, 7vw, 118px) 75px; overflow: hidden; background: radial-gradient(circle at 72% 48%, rgba(34, 104, 110, .24), transparent 32%), linear-gradient(135deg, #061923, #071a24 54%, #06151c); }
.hero::before { content: ''; position: absolute; width: 55vw; height: 55vw; border: 1px solid rgba(143, 175, 178, .1); border-radius: 50%; top: 50%; left: 72%; transform: translate(-50%, -50%); box-shadow: 0 0 0 7vw rgba(120, 190, 184, .025), 0 0 0 14vw rgba(120, 190, 184, .018); }
.hero-grid, .join-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent); }
.hero-copy { position: relative; z-index: 5; padding-bottom: 45px; }
.eyebrow, .section-label { margin: 0 0 24px; color: var(--gold); font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { color: var(--mist); margin-right: 18px; }
.hero h1 { margin: 0; font: 400 clamp(56px, 6.4vw, 106px)/.94 var(--display); letter-spacing: -.025em; }
.hero h1 em { color: var(--gold); font-style: normal; text-shadow: 0 0 50px rgba(198, 161, 91, .14); }
.hero-lead { max-width: 590px; color: var(--mist); font-size: 16px; line-height: 1.9; margin: 35px 0; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.button { min-height: 48px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; position: relative; font-size: 13px; font-weight: 600; letter-spacing: .05em; border: 1px solid var(--gold); transition: .25s ease; }
.button::before, .button::after { content: ''; position: absolute; width: 6px; height: 6px; border-color: var(--ice); transition: .25s; }
.button::before { top: -4px; left: -4px; border-top: 1px solid; border-left: 1px solid; }
.button::after { right: -4px; bottom: -4px; border-right: 1px solid; border-bottom: 1px solid; }
.button.primary { color: var(--night-deep); background: var(--gold); }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button:hover::before, .button:hover::after { width: 11px; height: 11px; }
.status { display: flex; align-items: center; gap: 10px; color: var(--mist); font: 11px var(--mono); }
.status i, .join-status i { width: 7px; height: 7px; display: inline-block; background: var(--signal); box-shadow: 0 0 12px var(--signal); animation: pulse 1.8s infinite; }
.hero-earth { height: min(680px, 70vw); position: relative; z-index: 2; }
.earth-loading { height: 100%; display: grid; place-items: center; color: var(--mist); font: 9px var(--mono); letter-spacing: .14em; }
.earth-canvas { height: 100%; position: relative; cursor: grab; }
.earth-canvas:active { cursor: grabbing; }
.earth-orbit { position: absolute; pointer-events: none; border: 1px solid rgba(215, 241, 232, .15); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); }
.earth-orbit-one { width: 73%; height: 31%; }
.earth-orbit-two { width: 56%; height: 82%; transform: translate(-50%, -50%) rotate(56deg); }
.earth-coordinate { position: absolute; color: rgba(215, 241, 232, .55); font: 9px var(--mono); letter-spacing: .1em; }
.earth-coordinate-a { right: 5%; top: 27%; }
.earth-coordinate-b { left: 6%; bottom: 18%; }
.hero-scale { position: absolute; z-index: 5; bottom: 44px; right: clamp(24px, 7vw, 118px); display: grid; text-align: right; }
.hero-scale span, .hero-scale small { color: var(--mist); font: 9px var(--mono); letter-spacing: .13em; }
.hero-scale strong { font: 500 22px var(--mono); margin: 5px 0; }
.hero-scale strong i { color: var(--gold); font-style: normal; }
.scroll-note { position: absolute; left: clamp(24px, 7vw, 118px); bottom: 34px; color: rgba(143,175,178,.7); font: 9px var(--mono); letter-spacing: .14em; display: flex; align-items: center; gap: 12px; }
.scroll-note span { width: 30px; height: 1px; background: var(--gold); }

.manifesto, .civilization, .platform, .event-section, .infrastructure, .evolution { padding: clamp(90px, 11vw, 170px) clamp(24px, 7vw, 118px); position: relative; }
.section-heading { max-width: 650px; margin-bottom: 70px; }
.section-heading.wide { max-width: 920px; }
.section-heading h2, .infra-intro h2, .evolution h2, .join h2 { margin: 0; font: 400 clamp(42px, 5vw, 76px)/1.06 var(--display); letter-spacing: -.02em; }
.section-heading h2 span, .evolution h2 span { color: var(--gold); }
.section-heading > p:last-child, .infra-intro > p:last-child, .evolution-copy > p { color: var(--mist); line-height: 1.9; max-width: 580px; }
.manifesto { background: #e3e1d7; color: var(--night); }
.manifesto .section-label { color: #7c663a; }
.world-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: clamp(45px, 7vw, 110px); align-items: center; }
.world-map { aspect-ratio: 1.55; position: relative; overflow: hidden; border: 1px solid rgba(7, 26, 36, .25); background: #cdd8ce; }
.map-grid, .territory-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(7, 26, 36, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 26, 36, .11) 1px, transparent 1px); background-size: 40px 40px; }
.map-land { position: absolute; background: #768f6f; filter: url('#none'); opacity: .9; }
.land-one { width: 46%; height: 48%; left: 5%; top: 8%; clip-path: polygon(6% 22%, 31% 1%, 58% 14%, 83% 7%, 100% 30%, 84% 51%, 95% 79%, 69% 100%, 48% 78%, 16% 89%, 0 62%); }
.land-two { width: 38%; height: 58%; right: 3%; bottom: -7%; clip-path: polygon(31% 0, 75% 7%, 100% 32%, 79% 53%, 83% 92%, 45% 100%, 24% 72%, 0 53%, 13% 19%); background: #849b75; }
.land-three { width: 20%; height: 19%; left: 39%; bottom: 3%; clip-path: polygon(17% 0, 87% 10%, 100% 65%, 64% 100%, 0 76%); }
.map-route { position: absolute; left: 18%; top: 29%; width: 63%; height: 38%; border: 2px dashed rgba(116, 73, 42, .7); border-left: 0; border-bottom: 0; border-radius: 50%; transform: rotate(8deg); }
.map-route i { position: absolute; width: 9px; height: 9px; background: #8d4c35; border: 2px solid #e3e1d7; box-shadow: 0 0 0 1px #8d4c35; }
.map-route i:nth-child(1) { left: 2%; top: 41%; }.map-route i:nth-child(2) { left: 53%; top: -3%; }.map-route i:nth-child(3) { right: 0; bottom: 23%; }
.map-compass { position: absolute; right: 24px; top: 24px; display: grid; place-items: center; color: rgba(7,26,36,.7); }.map-compass svg { width: 35px; height: 35px; }.map-compass span { font: 11px var(--mono); }
.map-label { position: absolute; padding: 5px 8px; color: #e3e1d7; background: rgba(7, 26, 36, .77); font: 9px var(--mono); }.label-one { left: 12%; bottom: 15%; }.label-two { right: 12%; top: 36%; }
.map-legend { position: absolute; right: 20px; bottom: 18px; display: flex; gap: 16px; padding: 9px; background: rgba(227,225,215,.72); font: 8px var(--mono); }.map-legend span { display: flex; align-items: center; gap: 5px; }.map-legend i { width: 8px; height: 8px; }.map-legend .owned { background: #768f6f; }.map-legend .wild { border: 1px dashed #53616a; }
.world-copy > p { font-size: 16px; line-height: 2; color: #43545b; }
.world-copy blockquote { margin: 45px 0; padding: 0 0 0 20px; border-left: 2px solid var(--gold); font: 28px/1.4 var(--display); }
.world-copy dl { border-top: 1px solid rgba(7,26,36,.2); }
.world-copy dl div { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(7,26,36,.2); font-size: 12px; }.world-copy dt { color: #6f7c7f; }.world-copy dd { margin: 0; font-weight: 600; }

.civilization { background: var(--night-deep); overflow: hidden; }
.civilization::after { content: 'CIVILIZATION'; position: absolute; top: 100px; right: -35px; color: rgba(215,241,232,.025); font: 170px var(--display); writing-mode: vertical-rl; }
.civilization-console { position: relative; z-index: 1; display: grid; grid-template-columns: 190px 1fr 300px; min-height: 520px; border: 1px solid var(--line); background: #071b24; }
.step-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.step-tabs button { flex: 1; cursor: pointer; text-align: left; border: 0; border-bottom: 1px solid var(--line); padding: 20px; background: transparent; display: grid; grid-template-columns: 35px 1fr; align-content: center; transition: .3s; }
.step-tabs button span, .step-tabs button small { color: var(--mist); font: 9px var(--mono); }.step-tabs button strong { font: 24px var(--display); font-weight: 400; }.step-tabs button small { grid-column: 2; margin-top: 4px; }.step-tabs button.active { background: var(--gold); color: var(--night); }.step-tabs button.active span, .step-tabs button.active small { color: #685832; }
.territory { position: relative; overflow: hidden; background: radial-gradient(circle, rgba(79,143,120,.2), transparent 60%), #09232d; transition: .4s; }
.territory::before { content: ''; position: absolute; width: 66%; height: 63%; top: 18%; left: 18%; border: 1px dashed rgba(215,241,232,.25); border-radius: 41% 59% 36% 64%; transition: 1s; }.territory.stage-0::before { transform: scale(.1); opacity: 0; }.territory.stage-1::before { transform: scale(.6); }.territory.stage-2::before { transform: scale(.9); border-color: var(--gold); }.territory.stage-3::before { transform: scale(1.05); border-color: var(--signal); }
.territory-zone { position: absolute; background: rgba(79,143,120,.22); transition: .7s; }.zone-a { width: 45%; height: 43%; left: 16%; top: 26%; clip-path: polygon(20% 0, 90% 9%, 100% 77%, 54% 100%, 0 71%); }.zone-b { width: 37%; height: 39%; right: 10%; bottom: 10%; clip-path: polygon(40% 0, 100% 20%, 87% 87%, 13% 100%, 0 27%); opacity: 0; }.stage-2 .zone-b, .stage-3 .zone-b { opacity: 1; background: rgba(198,161,91,.2); }
.city, .conflict { position: absolute; display: grid; justify-items: center; gap: 5px; color: var(--ice); font: 8px var(--mono); transition: .5s; }.city svg, .conflict svg { width: 21px; padding: 4px; height: 21px; color: var(--night); background: var(--gold); }.city-a { left: 37%; top: 43%; }.city-b { right: 27%; top: 24%; opacity: 0; }.city-c { right: 19%; bottom: 21%; opacity: 0; }.stage-1 .city-b, .stage-2 .city-b, .stage-2 .city-c, .stage-3 .city-b, .stage-3 .city-c { opacity: 1; }.conflict { left: 59%; top: 52%; color: #ff9788; }.conflict svg { background: var(--signal); }
.step-description { border-left: 1px solid var(--line); padding: 45px 30px; display: flex; flex-direction: column; justify-content: flex-end; }.step-description > span { font: 9px var(--mono); color: var(--gold); }.step-description h3 { font: 54px var(--display); font-weight: 400; margin: 10px 0 20px; }.step-description p { color: var(--mist); line-height: 1.85; font-size: 13px; }

.platform { background: #102e38; }.platform-title { margin-left: auto; text-align: right; }.platform-title > p:last-child { margin-left: auto; }
.browser-frame { border: 1px solid rgba(215,241,232,.25); background: #071a24; box-shadow: 0 40px 100px rgba(0,0,0,.28); }
.browser-bar { height: 42px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 0 15px; }.browser-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #47626a; }.browser-bar span { margin-left: 12px; color: var(--mist); font: 9px var(--mono); flex: 1; }.browser-bar svg { color: var(--land-bright); }
.browser-body { min-height: 550px; display: grid; grid-template-columns: 185px 1fr 230px; }
.browser-body aside { border-right: 1px solid var(--line); padding: 18px 12px; }.platform-logo { height: 65px; display: flex; align-items: center; gap: 10px; color: var(--ice); font: 11px var(--mono); }.platform-logo svg { color: var(--gold); }
.browser-body aside button { width: 100%; background: transparent; border: 0; border-left: 2px solid transparent; padding: 15px 10px; text-align: left; display: grid; gap: 3px; cursor: default; }.browser-body aside button span { font-size: 11px; }.browser-body aside button small { color: var(--mist); font: 8px var(--mono); }.browser-body aside button.active { background: rgba(79,143,120,.14); border-left-color: var(--land-bright); }
.satellite-map { position: relative; overflow: hidden; background-color: #183944; background-image: linear-gradient(30deg, rgba(108,143,116,.11) 12%, transparent 12.5%, transparent 87%, rgba(108,143,116,.11) 87.5%), linear-gradient(150deg, rgba(108,143,116,.11) 12%, transparent 12.5%, transparent 87%, rgba(108,143,116,.11) 87.5%), linear-gradient(30deg, rgba(108,143,116,.11) 12%, transparent 12.5%, transparent 87%, rgba(108,143,116,.11) 87.5%); background-size: 80px 140px; }
.satellite-map::before { content: ''; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 30px 30px; }
.scan-line { position: absolute; z-index: 5; left: 0; right: 0; height: 1px; background: rgba(215,241,232,.5); box-shadow: 0 0 20px var(--land-bright); animation: scan 5s linear infinite; }
.map-river { position: absolute; background: #0d697b; width: 12%; height: 110%; left: 49%; top: -5%; transform: rotate(21deg); clip-path: polygon(30% 0, 100% 0, 59% 30%, 90% 58%, 37% 100%, 0 100%, 39% 58%, 6% 30%); }
.claim { position: absolute; display: grid; place-items: center; border: 1px solid; font: 8px var(--mono); }.claim span { padding: 4px 6px; background: rgba(4,17,23,.7); }.claim-a { width: 37%; height: 36%; left: 9%; top: 11%; color: #82cba6; background: rgba(79,143,120,.14); clip-path: polygon(10% 0, 90% 5%, 100% 83%, 25% 100%, 0 55%); }.claim-b { width: 34%; height: 31%; right: 5%; top: 20%; color: #dcb76c; background: rgba(198,161,91,.14); transform: rotate(-4deg); }.claim-c { width: 39%; height: 35%; right: 16%; bottom: 6%; color: #99bec5; border-style: dashed; transform: rotate(5deg); }
.player-marker { position: absolute; z-index: 3; display: flex; gap: 5px; align-items: center; padding: 4px; background: var(--night); font: 7px var(--mono); }.player-marker svg { width: 12px; height: 12px; color: var(--gold); }.marker-one { left: 27%; top: 34%; }.marker-two { right: 22%; bottom: 24%; }.map-preview-tag { position: absolute; bottom: 10px; left: 10px; color: rgba(215,241,232,.55); font: 8px var(--mono); }
.rank-panel { border-left: 1px solid var(--line); padding: 25px 16px; }.rank-panel > span { color: var(--mist); font: 9px var(--mono); letter-spacing: .1em; }.rank-panel > div { display: grid; grid-template-columns: 28px 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); }.rank-panel b { color: var(--gold); font: 10px var(--mono); }.rank-panel strong { font-size: 12px; }.rank-panel small { grid-column: 2; color: var(--mist); margin-top: 4px; font: 8px var(--mono); }

.event-section { background: #d7d5cb; color: var(--night); }.event-section .section-label { color: #856b3e; }
.event-list { border-top: 1px solid rgba(7,26,36,.25); }
.event-row { display: grid; grid-template-columns: 65px 1fr 1.25fr 90px 24px; gap: 25px; align-items: center; min-height: 145px; border-bottom: 1px solid rgba(7,26,36,.25); transition: .25s; }.event-row:hover { padding-left: 12px; background: rgba(255,255,255,.2); }.event-index { font: 11px var(--mono); color: #697b7c; }.event-row small { color: #748385; font: 8px var(--mono); }.event-row h3 { margin: 7px 0 0; font: 28px var(--display); font-weight: 400; }.event-row p { color: #536368; font-size: 13px; line-height: 1.8; }.dev-tag { justify-self: start; color: #8a493c; border: 1px solid #a76b5e; padding: 5px 8px; font: 8px var(--mono); }

.infrastructure { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; background: var(--night); }.infra-intro { align-self: center; }.infra-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.infra-card { min-height: 280px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }.infra-card > span { color: var(--mist); font: 8px var(--mono); }.infra-card svg { width: 22px; margin: 35px 0 auto; color: var(--gold); }.infra-card strong { font: 26px var(--mono); color: var(--ice); }.infra-card h3 { margin: 8px 0; font-size: 13px; }.infra-card p { color: var(--mist); font-size: 11px; margin: 0; }

.evolution { display: grid; grid-template-columns: 1fr .8fr; gap: 10vw; background: #081d27; overflow: hidden; }.evolution-glow { position: absolute; width: 500px; height: 500px; left: -220px; top: 15%; background: rgba(61,139,122,.13); filter: blur(60px); border-radius: 50%; }.evolution-copy, .change-log { position: relative; z-index: 1; }.ai-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }.ai-tools span { border: 1px solid var(--line); padding: 7px 10px; color: var(--mist); font: 8px var(--mono); }
.change-log { border: 1px solid var(--line); align-self: center; background: rgba(4,17,23,.35); }.change-log > div { padding: 17px 20px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font: 9px var(--mono); }.change-log > div small { color: var(--land-bright); }.change-log ol { margin: 0; padding: 0 20px; list-style: none; }.change-log li { min-height: 105px; display: grid; grid-template-columns: 50px 1fr 10px; align-items: center; border-bottom: 1px solid var(--line); }.change-log li:last-child { border: 0; }.change-log time { color: var(--gold); font: 8px var(--mono); }.change-log p { display: grid; gap: 5px; margin: 0; }.change-log strong { font-size: 12px; }.change-log small { color: var(--mist); font-size: 9px; }.change-log li > i { width: 6px; height: 6px; background: var(--land-bright); box-shadow: 0 0 12px var(--land-bright); }

.join { min-height: 750px; padding: 140px 24px; display: grid; place-items: center; position: relative; text-align: center; overflow: hidden; background: radial-gradient(circle at center, #123943 0, var(--night-deep) 52%); }.join::before { content: ''; position: absolute; width: 430px; height: 430px; border-radius: 50%; border: 1px solid var(--line); box-shadow: 0 0 0 55px rgba(79,143,120,.025), 0 0 0 110px rgba(79,143,120,.018); }.join > div:not(.join-grid) { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }.join-icon { color: var(--gold); margin-bottom: 28px; }.join p:not(.section-label) { color: var(--mist); margin: 28px 0; }.join-status { width: min(540px, 90vw); display: grid; grid-template-columns: 1fr 1fr; margin: 5px 0 35px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.join-status span, .join-status strong { padding: 13px; }.join-status span { color: var(--mist); font: 8px var(--mono); display: flex; align-items: center; justify-content: center; gap: 8px; }.join-status strong { color: var(--gold); font: 12px var(--mono); }
footer { min-height: 90px; padding: 0 clamp(24px, 7vw, 118px); display: flex; align-items: center; gap: 40px; border-top: 1px solid var(--line); background: var(--night-deep); color: var(--mist); font-size: 10px; }footer p { flex: 1; }footer > span { font: 8px var(--mono); }

@keyframes pulse { 50% { opacity: .4; box-shadow: 0 0 3px var(--signal); } }
@keyframes scan { from { top: 0; } to { top: 100%; } }

@media (max-width: 1050px) {
  .hero { grid-template-columns: .85fr 1.15fr; padding-left: 5vw; padding-right: 5vw; }.hero h1 { font-size: clamp(52px, 7vw, 78px); }
  .civilization-console { grid-template-columns: 145px 1fr 240px; }.browser-body { grid-template-columns: 155px 1fr; }.rank-panel { display: none; }
  .infrastructure { grid-template-columns: 1fr; }.infra-intro { max-width: 600px; }
}

@media (max-width: 760px) {
  .site-header { height: 66px; padding: 0 20px; }.brand small { display: none; }.site-header nav { display: none; position: absolute; top: 66px; left: 0; right: 0; padding: 30px 24px; flex-direction: column; gap: 25px; background: rgba(4,17,23,.96); border-bottom: 1px solid var(--line); }.site-header nav.open { display: flex; }.menu-button { display: block; }
  .hero { min-height: 920px; display: block; padding: 120px 22px 80px; }.hero-copy { z-index: 4; }.hero h1 { font-size: clamp(48px, 14vw, 68px); }.hero-lead { font-size: 14px; line-height: 1.75; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-earth { position: absolute; height: 520px; width: 115%; left: -7.5%; bottom: 40px; opacity: .8; }.hero-scale { left: 22px; right: auto; bottom: 33px; text-align: left; }.scroll-note { display: none; }.earth-coordinate { display: none; }
  .manifesto, .civilization, .platform, .event-section, .infrastructure, .evolution { padding: 90px 22px; }.section-heading { margin-bottom: 48px; }.section-heading h2, .infra-intro h2, .evolution h2, .join h2 { font-size: 44px; }
  .world-layout { grid-template-columns: 1fr; }.world-map { aspect-ratio: 1.15; }.map-label { display: none; }
  .civilization-console { display: flex; flex-direction: column; min-height: 0; }.step-tabs { flex-direction: row; border-right: 0; overflow-x: auto; }.step-tabs button { min-width: 104px; display: block; padding: 15px; border-right: 1px solid var(--line); }.step-tabs button strong, .step-tabs button small { display: block; }.step-tabs button strong { font-size: 20px; }.territory { height: 340px; }.step-description { min-height: 230px; border-left: 0; border-top: 1px solid var(--line); padding: 28px; }.step-description h3 { font-size: 42px; }
  .platform-title { text-align: left; }.platform-title > p:last-child { margin-left: 0; }.browser-body { display: block; min-height: 520px; }.browser-body aside { height: 70px; display: flex; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); padding: 7px; }.platform-logo { display: none; }.browser-body aside button { min-width: 115px; }.satellite-map { height: 450px; }
  .event-row { grid-template-columns: 38px 1fr 70px; gap: 12px; padding: 22px 0; }.event-row > p { grid-column: 2 / 4; margin: 0; }.event-row > svg { display: none; }.event-row h3 { font-size: 24px; }.event-row:hover { padding-left: 0; }
  .infra-grid { grid-template-columns: 1fr; }.infra-card { min-height: 230px; }.evolution { grid-template-columns: 1fr; }.change-log { margin-top: 20px; }
  .join { min-height: 700px; }.join-status { grid-template-columns: 1fr 1fr; }.join-status span, .join-status strong { padding: 10px 5px; }
  footer { padding: 30px 22px; flex-wrap: wrap; gap: 12px; }footer p { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

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