/* Cabal Zypher: silver typography, blue energy, and dark glass surfaces. */
:root { --mint: #71d8ff; --muted: #a0b0c3; --panel-line: #88cfff2b; }
body { background: transparent; }
.gradient { background-image: linear-gradient(115deg, #e5f7ff 0%, #71d8ff 46%, #428af7 100%); }
.banner-shade { background: linear-gradient(90deg, #030914ed, #050d1c9c 52%, #06112770), linear-gradient(0deg, #050b16ed, transparent 65%); }
.nav { top: 20px; left: 4%; right: 4%; height: 78px; max-width: 1440px; margin-inline: auto; padding: 0 24px; border: 1px solid var(--panel-line); border-radius: 12px; background: linear-gradient(120deg, #14253ac9, #07111cd9); backdrop-filter: blur(18px); box-shadow: 0 12px 35px #0003, inset 0 1px #d4edff0d; }
.logo img { width: 108px; height: 67px; }
.nav nav { gap: 24px; font-size: 12px; }
.nav-register { border-color: #70cfff55; background: #17476744; color: #c6ecff; }
#motion { border-color: #84c6ed26; background: #8bcaff08; }
.primary { background: linear-gradient(110deg, #b5eeff, #63ccff 55%, #4ca3f8); color: #031628; border-radius: 5px; box-shadow: 0 0 26px #36a7ff29, inset 0 1px #ffffffa0; }
.primary:hover { box-shadow: 0 8px 32px #2496ff45, inset 0 1px #fff; }
.secondary { background: #10243a8c; backdrop-filter: blur(12px); border-color: #8bcfff42; border-radius: 5px; }
.section-label { color: #88b7d5; letter-spacing: .2em; }
.hero { height: auto; min-height: 840px; max-height: none; max-width: 1600px; margin: auto; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 16px; padding: 133px 6% 95px; }
.hero-copy { padding: 0; text-align: left; pointer-events: auto; }
.hero .eyebrow { border: 0; border-left: 2px solid #76dcff; border-radius: 0; padding: 4px 0 4px 12px; background: transparent; margin: 0 0 12px; color: #b5d1e3; font-size: 9px; letter-spacing: .2em; }
.hero .eyebrow > span { display: none; }
.hero-brand { margin: 0 0 7px; }
.hero-brand img { width: clamp(290px, 27vw, 370px); max-width: 100%; max-height: none; height: auto; margin-left: -10px; filter: drop-shadow(0 0 22px #258cff40); }
.hero-headline { font-family: 'Space Grotesk', Manrope, sans-serif; font-size: clamp(46px, 4.4vw, 68px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; margin: 0 0 24px; }
.hero-sub { color: #acbfd3; font-size: 16px; line-height: 1.85; margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-actions .primary, .hero-actions .secondary { min-height: 54px; padding: 14px 19px; font-size: 13px; gap: 23px; }
.hero-signature { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 26px; color: #8daac1; font-size: 8px; letter-spacing: .12em; line-height: 1.6; }
.hero-signature i { width: 3px; height: 3px; background: #53caff; transform: rotate(45deg); }
.hero-signature a { color: #b9dfee; }
.hero-signature a:hover { color: #fff; }
.hero-showcase { height: 630px; position: relative; min-width: 0; isolation: isolate; }
.hero-halo { position: absolute; top: 9%; left: 4%; width: 92%; aspect-ratio: 1; border: 1px solid #65c8ff26; border-radius: 50%; background: radial-gradient(circle, #077cf330 0%, #0976d91a 42%, transparent 68%); box-shadow: inset 0 0 65px #1174ff15, 0 0 65px #177eff10; }
.hero-halo::before { content: ''; position: absolute; inset: 6%; border: 1px dashed #53beff3b; border-radius: 50%; animation: zypher-orbit 90s linear infinite; }
.hero-halo::after { content: ''; position: absolute; inset: 14%; border: 1px solid #73c4ff21; border-left-color: #72d9ffb3; border-right-color: #72d9ffb3; border-radius: 50%; animation: zypher-orbit 45s linear infinite reverse; }
.hero-halo span { position: absolute; inset: -3%; background: repeating-linear-gradient(0deg, transparent 0 5px, #53c5ff09 5px 6px); border-radius: 50%; mask-image: radial-gradient(circle, #000 50%, transparent 70%); }
.hero-platform { position: absolute; left: 11%; right: 11%; bottom: 23px; height: 90px; border: 1px solid #4ebcf86b; border-radius: 50%; background: radial-gradient(ellipse, #63d6ff36 0%, #1b75ce18 48%, transparent 70%); box-shadow: 0 0 30px #0e8cff21, inset 0 0 25px #399cff2e; transform: scaleY(.5); }
.hero-platform::after { content: ''; position: absolute; inset: 12px 30px; border: 1px dashed #71ccff70; border-radius: 50%; }
.hero-character-float { position: absolute; inset: -8px -5% 30px; animation: zypher-float 8s ease-in-out infinite; }
.hero-character-float img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 25px #0009) drop-shadow(0 0 15px #359cff26); -webkit-user-drag: none; }
.hero-character-float > img { position: absolute; inset: 0; }
.hero-character-float .hero-character-previous { opacity: 0; pointer-events: none; }
.hero-orbit-label { position: absolute; top: 8%; left: 4%; color: #75aed1; font-size: 8px; letter-spacing: .2em; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
.hero-side-label { position: absolute; top: 29%; right: -10px; writing-mode: vertical-rl; color: #6589a8; font-size: 8px; letter-spacing: .22em; }
.hero-class-caption { position: absolute; bottom: 20px; right: 4%; width: 235px; padding: 16px 22px; border: 1px solid #96d1fb36; border-left: 2px solid #82dcff; border-radius: 4px; background: linear-gradient(110deg, #122c46e6, #071427c4); backdrop-filter: blur(14px); box-shadow: 0 15px 45px #0005; }
.hero-class-caption > span { display: block; font-size: 8px; color: #85c8eb; letter-spacing: .2em; margin-bottom: 8px; }
.hero-class-caption strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 500; }
.hero-class-caption small { display: block; color: #9cbed4; margin-top: 4px; font-size: 11px; }
.hero-class-caption b { position: absolute; right: 18px; top: 15px; color: #8edcff; font-size: 18px; font-weight: 400; }
.hero-class-caption:hover { border-color: #81d8ff9e; }
.hero-bottom { inset: auto 6% 43px; }
.hero-bottom .chapter-label { display: inline; font-size: 8px; color: #7e9fba; }
.hero-bottom .scroll-label { font-size: 8px; letter-spacing: .2em; color: #9cc7df; }
.server-bar { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(4, 1fr); width: calc(100% - 12%); max-width: 1280px; margin: -8px auto 56px; border: 1px solid #79cfff40; border-radius: 10px; background: linear-gradient(120deg, #10263ce8, #081321f0); backdrop-filter: blur(20px); box-shadow: 0 18px 55px #0004, inset 0 1px #cceaff12; }
.server-metric { padding: 26px 27px; min-width: 0; }
.server-metric + .server-metric { border-left: 1px solid #8accf51f; }
.metric-label { display: block; color: #85b0cf; font-size: 8px; letter-spacing: .17em; margin-bottom: 12px; }
.server-metric strong { display: flex; align-items: center; gap: 9px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(16px, 1.5vw, 23px); font-weight: 500; font-variant-numeric: tabular-nums; color: #d7efff; }
.server-metric small { display: block; font-size: 10px; line-height: 1.6; margin-top: 8px; color: #7692aa; }
#server-state i { width: 6px; height: 6px; border-radius: 50%; background: #7892a5; flex-shrink: 0; }
#server-state[data-state=online] i { background: #75ecc3; box-shadow: 0 0 12px #47dabd8a; }
#server-state[data-state=offline] i { background: #e39090; }
#server-state[data-state=maintenance] i { background: #e3ba7a; }
.classic-story { position: relative; isolation: isolate; width: calc(100% - 12%); max-width: 1280px; margin: 0 auto 70px; overflow: hidden; border: 1px solid #66b8ee38; border-radius: 14px; background: radial-gradient(ellipse at 90% 30%, #0c295538, transparent 65%), #080a0c; box-shadow: 0 20px 65px #0004, 0 0 50px #076cde0b; }
.classic-story::before { content: ''; position: absolute; z-index: 2; top: 0; left: -55%; width: 55%; height: 1px; background: linear-gradient(90deg, transparent, #a4e6ff, transparent); animation: zypher-trace 14s ease-in-out infinite; pointer-events: none; }
.classic-story::after { content: ''; position: absolute; bottom: 12px; right: 12px; width: 22px; height: 22px; border-bottom: 1px solid #70caff99; border-right: 1px solid #70caff99; pointer-events: none; }
.classic-copy { padding-right: 26px; }
.classic-copy .classic-kicker { color: #c2e3f5; font-size: 12px; letter-spacing: .23em; }
.classic-copy > p:not(.classic-kicker) { color: #a8b9cd; font-size: 15px; }
.zc-section { border-block: 1px solid #6abcee1a; background: radial-gradient(ellipse at 50% 38%, #13375950, transparent 65%), linear-gradient(#06101be8, #081422ed 65%, #060f1bd9); }
.zc-section::before { background: linear-gradient(90deg, transparent calc(50% - .5px), #5babf614 50%, transparent calc(50% + .5px)), radial-gradient(ellipse, #1168bb26, transparent 65%); }
.zc-card { border-radius: 8px; background: radial-gradient(ellipse at 50% 50%, #1c72ab30, transparent 75%), linear-gradient(145deg, #18324adc, #091827f2); }
.zc-card::before { border-radius: 4px; border-color: #93d9ff12; }
.zc-card[aria-pressed=true] { border-color: #86d7ffc9; box-shadow: 0 25px 65px #0009, 0 0 50px #329cff30, inset 0 1px #d2f3ff45; }
.zc-card-foot { background: linear-gradient(transparent, #071524e8 60%, #0b1c31); }
.zc-card-line { background: #67b8fa66; }
.zc-card[aria-pressed=true] .zc-card-line { background: #9be7ff; }
.zc-selector { border-radius: 4px; font-size: 12px; }
.zc-selector[aria-pressed=true] { background: #20507a66; color: #d4f4ff; border-color: #7ad7ff9c; box-shadow: inset 0 -2px #74d7ff; }
.zc-arrow { border-radius: 6px; background: #112b43d9; backdrop-filter: blur(12px); }
.zc-profile { display: grid; grid-template-columns: .75fr 1.5fr; gap: 34px; width: calc(100% - 12%); max-width: 960px; min-height: 190px; margin: 0 auto 30px; padding: 30px 34px; border: 1px solid #75c6f42b; border-radius: 8px; background: linear-gradient(115deg, #1a3a553d, #0c1a2bba); box-shadow: inset 3px 0 #74cfff9c; }
.zc-profile .section-label { font-size: 8px; margin: 0 0 14px; color: #7daed0; }
.zc-profile h3 { font-family: 'Space Grotesk', sans-serif; font-size: 31px; line-height: 1.1; letter-spacing: -.035em; font-weight: 500; margin: 0 0 11px; }
.zc-role { font-size: 11px; color: #8fd7ff; }
.zc-profile-body { align-self: center; }
.zc-profile-body p { color: #adc2d6; font-size: 14px; line-height: 1.85; margin: 0 0 18px; }
.zc-traits { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.zc-traits li { font-size: 10px; color: #b9dff4; border: 1px solid #66b2e52b; border-radius: 3px; padding: 6px 10px; background: #21537920; }
.intro { background: radial-gradient(ellipse at 70% 50%, #153c6a38, transparent 65%), #071321c9; border-bottom: 1px solid #70b6e819; }
.intro-glow { background: radial-gradient(ellipse, #146baa3a, transparent 65%); }
.orbit { border-color: #59a8ff30; }
.spark-two, .spark-three { color: #83baff; }
.mascot-tag { border-color: #6eb6ed45; background: #102a437a; }
.player-hub, .community-section { background: #071321d9; }
.hub-card, .community-panel { position: relative; isolation: isolate; background: linear-gradient(125deg, #18365180, #091626d9); backdrop-filter: blur(16px); border: 1px solid #79c8f538; border-radius: 9px; box-shadow: inset 0 1px #c7ecff10, 0 20px 45px #0002; }
.hub-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hub-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#66c5ff05 1px, transparent 1px), linear-gradient(90deg, #66c5ff05 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.hub-card::after, .community-panel::after { content: ''; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-top: 1px solid #7ecaff6b; border-right: 1px solid #7ecaff6b; pointer-events: none; }
.hub-card:hover { transform: translateY(-5px); border-color: #89d4ff80; box-shadow: inset 0 1px #c7ecff1f, 0 18px 45px #00111b66, 0 0 25px #187fcb1c; }
.card-number { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #5faee84a; border-radius: 5px; color: #9fdfff; background: #16406b42; }
.hub-button { border-color: #73c5fa4a; background: #1b4a722e; color: #bce9ff; border-radius: 4px; }
.hub-button:hover { background: #28629b42; border-color: #87d9ff; }
.availability { color: #90abc0; border-color: #6c9cbb2b; border-radius: 4px; }
.text-link { border-color: #4d9cc461; }
.community-panel { background: radial-gradient(ellipse at right, #1a598d3d, transparent 65%), linear-gradient(120deg, #132b4280, #091626d9); }
.closing { border-top-color: #80cefa26; background: radial-gradient(ellipse at 50% 110%, #144d815c, transparent 64%), #061222e8; }
.round-link { border-color: #67b2eb7d; background: #0d2c4540; }
.round-link:hover { background: #1c507973; }
footer { background: #050e1bea; color: #65829c; }
.account-dialog { border-color: #6fc2fa66; box-shadow: 0 25px 100px #000b, 0 0 55px #076fc026; }
.motion-off .hero-character-float, .motion-off .hero-halo::before, .motion-off .hero-halo::after, .motion-off .classic-story::before { animation-play-state: paused; }
.motion-off .hub-card { transition: none; }
.motion-off .hub-card:hover { transform: none; }
@keyframes zypher-float { 50% { transform: translateY(-10px) rotate(.5deg); } }
@keyframes zypher-orbit { to { transform: rotate(360deg); } }
@keyframes zypher-trace { 0%, 12% { transform: translateX(0); opacity: 0; } 22%, 60% { opacity: 1; } 80%, 100% { transform: translateX(285%); opacity: 0; } }
@media (min-width: 1500px) { .hero-showcase { height: 690px; } }
@media (max-width: 1100px) {
  .nav nav { gap: 15px; font-size: 11px; }
  .nav { padding-inline: 18px; }
  .hero { padding-inline: 5%; gap: 0; min-height: 770px; }
  .hero-showcase { height: 550px; }
  .hero-headline { font-size: 49px; }
  .hero-brand img { width: 300px; }
  .hero-actions .primary, .hero-actions .secondary { font-size: 12px; gap: 13px; padding: 13px 15px; }
  .hero-side-label { display: none; }
  .hero-class-caption { right: 0; width: 210px; }
  .server-bar { width: 90%; }
  .server-metric { padding: 24px 18px; }
  .server-metric strong { font-size: 17px; }
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding: 164px 7% 84px; min-height: 0; gap: 24px; }
  .hero-copy { text-align: center; }
  .hero .eyebrow { display: inline-flex; font-size: 8px; }
  .hero-brand img { width: 320px; margin-left: 0; }
  .hero-headline { font-size: clamp(46px, 8vw, 61px); }
  .hero-sub { font-size: 15px; }
  .hero-actions, .hero-signature { justify-content: center; }
  .hero-showcase { height: clamp(380px, 78vw, 600px); width: 100%; max-width: 580px; margin: auto; }
  .hero-class-caption { right: 1%; bottom: 0; }
  .hero-orbit-label { left: 1%; }
  .hero-bottom { flex-direction: row; inset: auto 7% 32px; gap: 10px; }
  .hero-bottom .chapter-label { font-size: 7px; }
  .hero-bottom .scroll-label { font-size: 7px; }
  .server-bar { grid-template-columns: repeat(2, 1fr); margin-top: 0; margin-bottom: 40px; }
  .server-metric:nth-of-type(3) { border-left: 0; }
  .server-metric:nth-of-type(n + 3) { border-top: 1px solid #8accf51f; }
  .server-metric strong { font-size: 19px; }
  .classic-story { width: 90%; margin-bottom: 45px; }
  .classic-copy { padding: 24px 7% 45px; }
  .zc-profile { gap: 25px; padding: 26px; }
}
@media (max-width: 760px) {
  .nav { top: 12px; left: 4%; right: 4%; padding: 5px 15px 0; min-height: 112px; height: auto; border-radius: 9px; }
  .nav #motion { margin-top: 16px; }
  .nav nav { gap: 20px; font-size: 11px; padding-bottom: 15px; }
  .nav nav a:first-child { display: block; }
  .nav-register { display: none; }
  .logo img { width: 100px; height: 63px; }
  .classic-copy .classic-kicker { font-size: 11px; }
  .zc-profile { grid-template-columns: 1fr; width: 90%; gap: 20px; min-height: 0; text-align: center; }
  .zc-profile h3 { font-size: 30px; }
  .zc-traits { justify-content: center; }
  .zc-profile-body p { font-size: 14px; }
  .zc-selector { font-size: 11px; padding: 10px 11px; }
}
@media (max-width: 420px) {
  .hero { padding-inline: 5%; }
  .hero-brand img { width: 285px; }
  .hero-headline { font-size: 47px; }
  .hero-actions { gap: 8px; }
  .hero-actions .primary, .hero-actions .secondary { font-size: 11px; padding: 13px 11px; gap: 12px; }
  .hero-signature { gap: 8px; font-size: 7px; }
  .hero-class-caption { width: 195px; }
  .server-metric { padding: 22px 13px; }
  .server-metric strong { font-size: 16px; }
  .metric-label { font-size: 7px; letter-spacing: .12em; }
  .server-metric small { font-size: 9px; }
  .nav nav { display: flex; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-character-float, .hero-halo::before, .hero-halo::after, .classic-story::before { animation: none; }
  .hub-card { transition: none; }
  .hub-card:hover { transform: none; }
}