.landing-page { --land-line: rgba(142,168,190,.16); background: #09111b; color: #e8f3f3; }
.landing-page::before { background: radial-gradient(750px 500px at 12% 2%, rgba(28,190,168,.1), transparent 70%), radial-gradient(600px 460px at 95% 28%, rgba(50,114,164,.09), transparent 68%); }
.landing-container { width: min(1270px, calc(100% - 64px)); margin-inline: auto; }
.landing-header { border-bottom: 1px solid var(--land-line); background: rgba(9,17,27,.93); }
.header-inner { min-height: 82px; display: flex; align-items: center; gap: 48px; }
.landing-header .brand { gap: 12px; white-space: nowrap; }
.landing-header .brand .mark { border-radius: 9px; }
.landing-header .brand small { color: #829aab; }
.landing-nav { display: flex; gap: 32px; margin-left: auto; }
.landing-nav a { color: #a8b9c8; font-weight: 600; font-size: 13px; }
.landing-nav a:hover, .landing-account:hover { color: #37ddc2; text-decoration: none; }
.landing-nav .discord-link { display: inline-flex; align-items: center; gap: 6px; color: #8eaafa; }
.landing-nav .discord-link:hover { color: #bacaff; }
.landing-account { min-width: 112px; padding: 11px 15px; border: 1px solid var(--land-line); border-radius: 8px; text-align: center; color: #e8f3f3; font-size: 13px; font-weight: 700; white-space: nowrap; }
.landing-account span { margin-left: 10px; color: #37ddc2; }

.landing-kicker { color: #44dcc5; font: 700 11px/1.4 var(--font-mono); letter-spacing: .13em; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #3bddc2; box-shadow: 0 0 0 4px rgba(59,221,194,.1); }
.landing-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 625px; border-bottom: 1px solid var(--land-line); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 60px 52px 60px 0; }
.hero-copy h1 { margin: 22px 0 22px; font: 700 clamp(48px, 5.2vw, 76px)/1.04 var(--font-display); letter-spacing: -.06em; }
.hero-copy h1 span { color: #42ddc4; }
.hero-copy > p { max-width: 520px; margin: 0; color: #a1b2c1; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.landing-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 49px; padding: 0 18px; border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; }
.landing-button:hover { text-decoration: none; transform: translateY(-2px); }
.landing-button.primary { color: #08221f; background: #38d9be; box-shadow: 0 8px 28px rgba(40,202,177,.16); }
.landing-button.primary:hover { background: #62ead3; }
.landing-button.secondary { color: #e8f3f3; border: 1px solid var(--land-line); background: rgba(255,255,255,.02); }
.landing-button.secondary:hover { border-color: #45d9c0; }
.hero-foot { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 65px; color: #73899a; font: 600 10px var(--font-mono); letter-spacing: .03em; }
.hero-display { position: relative; align-self: center; height: 455px; overflow: hidden; border: 1px solid rgba(84,205,191,.22); border-radius: 12px; background: radial-gradient(circle at 52% 42%, rgba(39,195,175,.2), transparent 33%), linear-gradient(145deg, #102b35, #0e1c2b 58%, #102337); box-shadow: 0 32px 80px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.025); }
.hero-display::after { content: ''; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(112,222,205,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(112,222,205,.12) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); pointer-events: none; }
.display-top, .display-bottom { position: absolute; z-index: 2; left: 24px; right: 24px; display: flex; justify-content: space-between; color: #aac9c9; font: 600 10px var(--font-mono); letter-spacing: .1em; }
.display-top { top: 22px; }.display-bottom { bottom: 20px; }
.display-bottom span:last-child { color: #52e5d0; font-size: 18px; }
.display-orbit { position: absolute; left: 50%; top: 51%; border: 1px solid rgba(77,224,201,.17); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 350px; height: 350px; }.orbit-two { width: 540px; height: 540px; }
.display-core { position: absolute; top: 51%; left: 50%; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 28px; border: 1px solid rgba(83,229,203,.28); background: linear-gradient(145deg, #1c5b60, #102f40); box-shadow: 0 30px 60px rgba(0,0,0,.28), inset 0 0 30px rgba(63,220,193,.13); transform: translate(-50%,-50%) rotate(-10deg); }
.core-ring { position: absolute; width: 132px; height: 132px; border: 1px solid rgba(101,234,209,.3); border-radius: 50%; }
.core-letter { color: #64ecd6; font: 700 96px var(--font-display); transform: rotate(10deg); text-shadow: 0 0 40px rgba(65,221,195,.38); }
.display-label { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgba(129,214,208,.23); border-radius: 6px; background: rgba(12,31,42,.88); color: #53dfc8; font: 700 9px var(--font-mono); letter-spacing: .06em; box-shadow: 0 10px 25px rgba(0,0,0,.16); }
.display-label b { color: #a3bfc2; font-weight: 500; }.label-pip { width: 5px; height: 5px; border-radius: 50%; background: #50e0c9; }
.label-one { top: 112px; left: 34px; }.label-two { right: 28px; bottom: 102px; }

.landing-paths { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; padding-top: 28px; }
.path-card { position: relative; display: block; min-height: 225px; padding: 26px 30px; overflow: hidden; border: 1px solid var(--land-line); border-radius: 10px; background: linear-gradient(120deg, #112c32, #101d2b 75%); color: inherit; }
.path-card::after { content: ''; position: absolute; width: 240px; height: 240px; top: -110px; right: -70px; border: 1px solid rgba(58,213,190,.16); border-radius: 50%; box-shadow: 0 0 0 45px rgba(58,213,190,.025), 0 0 0 95px rgba(58,213,190,.018); }
.path-card:hover { border-color: rgba(59,219,193,.55); transform: translateY(-3px); text-decoration: none; }
.suite-path { background: linear-gradient(120deg, #1b2941, #101c2b 75%); }
.path-index { color: #5ddcc7; font: 700 10px var(--font-mono); letter-spacing: .09em; }
.path-icon { position: absolute; top: 24px; right: 30px; color: #5ee0ca; font-size: 21px; }
.path-card h2 { margin: 30px 0 7px; color: #eff8f8; font: 600 24px var(--font-display); letter-spacing: -.03em; }
.path-card p { max-width: 420px; margin: 0; color: #9fb4c3; font-size: 13px; line-height: 1.6; }
.path-link { display: inline-flex; gap: 15px; margin-top: 20px; color: #67e3ce; font-size: 12px; font-weight: 700; }

.landing-catalog { padding-top: 96px; padding-bottom: 96px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 29px; }
.section-head h2 { margin: 12px 0 5px; font: 700 clamp(32px,3.6vw,48px) var(--font-display); letter-spacing: -.045em; }
.title-period { color: #42ddc4; }.section-head p { margin: 0; color: #8fa5b6; }
.text-link { color: #5edec9; font-weight: 700; font-size: 13px; white-space: nowrap; }.text-link:hover { color: #85f4df; }
.text-link span { margin-left: 12px; }
.landing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.landing-product { min-width: 0; overflow: hidden; border: 1px solid var(--land-line); border-radius: 10px; background: #101c2b; }
.landing-product:hover { border-color: rgba(76,215,193,.48); transform: translateY(-3px); }
.landing-art { position: relative; display: grid; place-items: center; height: 170px; overflow: hidden; background: radial-gradient(circle at 50% 85%, rgba(47,209,182,.21), transparent 42%), linear-gradient(140deg,#164247,#122837 75%); }
.landing-art::after { content: ''; position: absolute; width: 210px; height: 210px; border: 1px solid rgba(185,239,230,.12); border-radius: 34px; transform: rotate(35deg); }
.landing-art.art-combat { background: radial-gradient(circle at 50% 85%, rgba(216,91,116,.23), transparent 42%), linear-gradient(140deg,#402e49,#172a39 75%); }
.landing-art.art-automation { background: radial-gradient(circle at 50% 85%, rgba(116,138,239,.25), transparent 42%), linear-gradient(140deg,#2b3158,#152a3a 75%); }
.landing-art.art-world { background: radial-gradient(circle at 50% 85%, rgba(226,165,87,.24), transparent 42%), linear-gradient(140deg,#3e3c38,#172c39 75%); }
.landing-art.art-suite { background: radial-gradient(circle at 50% 85%, rgba(57,217,195,.3), transparent 42%), linear-gradient(140deg,#17514d,#132f3c 75%); }
.landing-art.art-access { background: radial-gradient(circle at 50% 85%, rgba(92,133,245,.3), transparent 42%), linear-gradient(140deg,#263d62,#122837 75%); }
.art-index, .art-flag { position: absolute; z-index: 1; top: 17px; color: #a9d4d0; font: 700 10px var(--font-mono); letter-spacing: .07em; }
.art-index { left: 18px; }.art-flag { right: 16px; color: #63e5ce; }
.art-mark { z-index: 1; color: #d4fcf3; font: 700 62px var(--font-display); letter-spacing: -.08em; text-shadow: 0 10px 30px rgba(0,0,0,.28); }
.landing-product-body { display: flex; flex-direction: column; min-height: 230px; padding: 20px; }
.product-type { display: flex; justify-content: space-between; color: #52d9c4; font: 700 9px var(--font-mono); letter-spacing: .08em; }
.product-type span { color: #879baa; }
.landing-product h3 { margin: 13px 0 8px; font: 600 19px var(--font-display); letter-spacing: -.025em; }
.landing-product h3 a { color: #e8f3f3; }.landing-product h3 a:hover { color: #68e8d0; text-decoration: none; }
.landing-product-body > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0 0 20px; color: #98aab9; font-size: 12px; line-height: 1.6; }
.product-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--land-line); }
.landing-price { color: #f0f9f9; font: 700 21px var(--font-display); }
.product-bottom a { color: #61e1ca; font-size: 12px; font-weight: 700; white-space: nowrap; }.product-bottom a span { margin-left: 5px; }
.catalog-empty { padding: 60px 24px; border: 1px dashed rgba(87,215,193,.3); border-radius: 12px; background: rgba(19,45,54,.35); text-align: center; }
.empty-symbol { color: #51d8c2; font-size: 36px; }.catalog-empty h3 { margin: 8px 0; font-size: 21px; }.catalog-empty p { color: #9db0bf; }.catalog-empty a { color: #68e8d0; font-weight: 700; }

.landing-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 72px; padding: 34px 38px; border: 1px solid rgba(75,218,195,.25); border-radius: 12px; background: linear-gradient(100deg,#123b3f,#142436 75%); }
.landing-cta h2 { margin: 8px 0 4px; font: 700 32px var(--font-display); letter-spacing: -.04em; }.landing-cta p { margin: 0; color: #abc1c9; }
.landing-footer { margin-top: 0; border-color: var(--land-line); }.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }.landing-footer a { color: #b3c9d3; }

@media (max-width: 950px) { .landing-hero { grid-template-columns: 1fr; }.hero-copy { padding-right: 0; }.hero-display { width: 100%; max-width: 660px; margin-bottom: 40px; }.landing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.landing-nav { gap: 16px; } }
@media (max-width: 650px) { .landing-container { width: min(100% - 32px,1270px); }.header-inner { gap: 12px; min-height: 72px; }.landing-nav { margin-left: auto; }.landing-nav a:not(.discord-link) { display: none; }.landing-nav .discord-link span { display: none; }.landing-account { margin-left: 0; min-width: 84px; }.hero-copy { padding: 60px 0 40px; }.hero-copy h1 { font-size: clamp(46px,12vw,67px); }.hero-foot { margin-top: 44px; gap: 11px; }.hero-display { height: 340px; }.display-core { width: 135px; height: 135px; }.core-ring { width: 100px; height: 100px; }.core-letter { font-size: 74px; }.display-label { font-size: 8px; }.label-one { left: 14px; top: 78px; }.label-two { right: 12px; bottom: 67px; }.landing-paths,.landing-grid { grid-template-columns: 1fr; }.landing-catalog { padding-block: 70px; }.section-head { align-items: start; flex-direction: column; }.landing-cta { flex-direction: column; align-items: start; padding: 28px; }.landing-footer { padding-block: 25px; } }
@media (prefers-reduced-motion: reduce) { .landing-button:hover,.path-card:hover,.landing-product:hover { transform: none; } }