@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #090a13;
  --bg-soft: #0e101c;
  --panel: rgba(18, 20, 36, .82);
  --panel-solid: #121424;
  --line: rgba(189, 194, 232, .13);
  --line-bright: rgba(189, 194, 232, .25);
  --text: #f4f5ff;
  --muted: #a2a8c0;
  --muted-dim: #747c9b;
  --purple: #a78bfa;
  --purple-strong: #8b5cf6;
  --cyan: #63e5ff;
  --pink: #ff72ca;
  --red: #ff3d5e;
  --green: #72ffb5;
  --content: 1160px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
body::selection { color: #fff; background: #7154cf; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.page-wrap { width: min(var(--content), calc(100% - 64px)); margin-inline: auto; position: relative; z-index: 1; }
.ambient { position: fixed; z-index: -2; pointer-events: none; width: 43vw; height: 43vw; min-width: 380px; min-height: 380px; filter: blur(105px); border-radius: 50%; opacity: .15; animation: ambient-drift 19s ease-in-out infinite alternate; }
.ambient-a { top: -17vw; left: -12vw; background: #7650ff; }
.ambient-b { top: 27vh; right: -22vw; background: #1d98ee; animation-delay: -7s; }
.ambient-c { bottom: -28vw; left: 23vw; background: #b445cf; animation-delay: -12s; opacity: .1; }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 28px; width: min(1280px, calc(100% - 48px)); min-height: 78px; margin: 0 auto; padding: 13px 0; background: linear-gradient(180deg, rgba(9,10,19,.94), rgba(9,10,19,.76)); backdrop-filter: blur(22px); border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(167,139,250,.35); border-radius: 12px; color: #fff; background: linear-gradient(145deg, rgba(167,139,250,.22), rgba(99,229,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 28px rgba(167,139,250,.08); transform: rotate(-4deg); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.brand:hover .brand-mark { transform: rotate(0) scale(1.06); border-color: rgba(99,229,255,.6); box-shadow: 0 0 22px rgba(99,229,255,.12); }
.brand-mark span { font-size: 20px; font-weight: 800; line-height: 1; }
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.brand-name b { color: #c6b8ff; }
.main-nav { display: flex; align-items: center; gap: clamp(15px, 2.3vw, 31px); margin-left: auto; }
.main-nav a { position: relative; padding-block: 9px; color: #a9aec4; font-size: 11px; font-weight: 700; transition: color .25s; white-space: nowrap; }
.main-nav a::after { position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; background: linear-gradient(90deg, var(--purple), var(--cyan)); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav a:hover { color: #fff; }.main-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 13px; flex-shrink: 0; }
.language-switch { display: inline-flex; align-items: center; gap: 5px; color: #666e8a; font: 10px "DM Mono", monospace; }
.language-switch button { padding: 5px 4px; border: 0; background: none; color: #747c98; cursor: pointer; font: inherit; transition: color .2s; }
.language-switch button.active, .language-switch button:hover { color: white; }
.discord-mini { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(129,137,255,.25); border-radius: 10px; color: #d8d9ff; background: rgba(88,101,242,.08); font-size: 10px; font-weight: 800; transition: transform .25s var(--ease), border-color .25s, background .25s; }
.discord-mini:hover { transform: translateY(-2px); border-color: rgba(129,137,255,.55); background: rgba(88,101,242,.15); }
.discord-mini span:first-child { font-size: 16px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 12px; border: 1px solid rgba(255,61,94,.55); border-radius: 10px; color: #fff; background: linear-gradient(100deg, rgba(255,61,94,.22), rgba(255,61,94,.08)); box-shadow: 0 0 24px rgba(255,61,94,.12), inset 0 0 14px rgba(255,61,94,.05); font-size: 9px; font-weight: 900; letter-spacing: .1em; animation: live-border 2.2s ease-in-out infinite; }
.live-dot, .video-label-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255,61,94,.55); animation: live-pulse 1.6s ease-out infinite; }
.live-arrow { font-size: 14px; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); gap: 45px; align-items: center; min-height: 590px; padding-block: 74px 78px; }
.hero-copy { position: relative; z-index: 2; max-width: 600px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 10px; color: #aaa3d9; font: 500 9px "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { margin-bottom: 24px; }
.eyebrow-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 13px rgba(99,229,255,.65); transform: rotate(45deg); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 710px; margin-bottom: 22px; font-size: clamp(48px, 6.6vw, 83px); font-weight: 800; letter-spacing: -.075em; line-height: .98; }
.gradient-text { color: transparent; background: linear-gradient(100deg, #d8c9ff 5%, #a78bfa 33%, #63e5ff 73%, #ff91db 100%); background-clip: text; -webkit-background-clip: text; background-size: 180% 100%; animation: gradient-sweep 8s ease-in-out infinite alternate; }
.hero-description { max-width: 490px; margin-bottom: 28px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 16px; overflow: hidden; border: 1px solid transparent; border-radius: 12px; font-size: 11px; font-weight: 800; transition: transform .28s var(--ease), box-shadow .28s, border-color .28s, background .28s; }
.button::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.19) 45%, transparent 65%); content: ""; transform: translateX(-130%); transition: transform .65s var(--ease); }
.button:hover { transform: translateY(-3px); }.button:hover::before { transform: translateX(130%); }
.button-arrow { font-size: 14px; transition: transform .25s var(--ease); }.button:hover .button-arrow { transform: translate(2px,-2px); }
.button-twitch { border-color: rgba(255,61,94,.32); color: white; background: linear-gradient(105deg, #ff3d5e, #dd3159); box-shadow: 0 10px 25px rgba(255,61,94,.16); }
.button-twitch:hover { box-shadow: 0 14px 34px rgba(255,61,94,.27); }
.button-icon { font-size: 16px; }
.button-glass { border-color: var(--line-bright); color: #e6e8fa; background: rgba(255,255,255,.035); }.button-glass:hover { border-color: rgba(167,139,250,.45); background: rgba(167,139,250,.08); }
.button-primary { border-color: rgba(167,139,250,.25); color: #fff; background: linear-gradient(105deg, #7653df, #795de0 45%, #3d8da9 130%); box-shadow: 0 10px 25px rgba(113,83,223,.18); }.button-primary:hover { box-shadow: 0 15px 32px rgba(113,83,223,.28); }
.hero-footnote { display: flex; align-items: center; gap: 11px; margin-top: 29px; color: #7e86a3; font: 9px "DM Mono", monospace; letter-spacing: .06em; }.footline { width: 31px; height: 1px; background: linear-gradient(90deg, var(--purple), transparent); }
.hero-visual { position: relative; display: grid; place-items: center; min-height: 420px; isolation: isolate; perspective: 800px; }
.visual-grid { position: absolute; inset: 4% -6%; opacity: .22; background-image: linear-gradient(rgba(167,139,250,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(167,139,250,.15) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse, #000 18%, transparent 70%); transform: perspective(500px) rotateX(18deg); }
.visual-ring { position: absolute; border: 1px solid rgba(167,139,250,.18); border-radius: 50%; transform-style: preserve-3d; }.ring-one { width: 350px; height: 350px; animation: orbit-rotate 28s linear infinite; }.ring-two { width: 285px; height: 285px; border-color: rgba(99,229,255,.2); transform: rotateX(63deg) rotateZ(-27deg); animation: orbit-rotate-reverse 22s linear infinite; }.ring-three { width: 385px; height: 178px; border-color: rgba(255,114,202,.19); transform: rotateX(63deg) rotateZ(32deg); animation: orbit-rotate 35s linear infinite; }
.visual-orb { position: absolute; width: 8px; height: 8px; border-radius: 50%; filter: blur(.2px); }.orb-one { top: 17%; right: 17%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); animation: orb-float 4s ease-in-out infinite; }.orb-two { bottom: 22%; left: 15%; background: var(--pink); box-shadow: 0 0 16px var(--pink); animation: orb-float 5s -2s ease-in-out infinite; }.orb-three { top: 31%; left: 15%; width: 4px; height: 4px; background: var(--purple); box-shadow: 0 0 13px var(--purple); animation: orb-float 3.6s -1s ease-in-out infinite; }
.hero-logo-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 275px; height: 300px; border: 1px solid rgba(202,194,255,.23); border-radius: 27px; background: linear-gradient(145deg, rgba(27,29,52,.89), rgba(13,15,27,.84)); box-shadow: 0 30px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07), 0 0 70px rgba(117,91,226,.09); backdrop-filter: blur(14px); transform: rotateY(-6deg) rotateX(2deg); animation: logo-hover 7s ease-in-out infinite; }
.hero-logo-card::before { position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.04); border-radius: 20px; content: ""; pointer-events: none; }
.logo-kicker, .logo-caption { color: #8e97b9; font: 9px "DM Mono", monospace; letter-spacing: .19em; }
.hero-logo { margin-top: 19px; font-size: 49px; font-weight: 800; letter-spacing: -.075em; line-height: .88; text-align: center; text-shadow: 0 0 42px rgba(167,139,250,.16); }.hero-logo span { color: var(--cyan); }.hero-logo b { color: #f5f2ff; font-weight: 800; }
.logo-divider { width: 86px; height: 2px; margin: 22px 0 15px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent); box-shadow: 0 0 15px rgba(99,229,255,.35); }
.logo-caption { font-size: 8px; letter-spacing: .14em; }
.float-tag { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid rgba(190,190,240,.19); border-radius: 11px; background: rgba(12,14,27,.82); box-shadow: 0 12px 28px rgba(0,0,0,.2); color: #d9def6; font: 9px "DM Mono", monospace; letter-spacing: .08em; backdrop-filter: blur(12px); animation: tag-float 5s ease-in-out infinite; }.float-tag span { color: var(--cyan); font-size: 15px; }.tag-minecraft { top: 14%; left: 0; animation-delay: -1s; }.tag-pvp { top: 28%; right: -1%; animation-delay: -2.5s; }.tag-pvp span { color: var(--pink); }.tag-community { bottom: 14%; left: 3%; animation-delay: -3.1s; }.tag-community span { color: var(--purple); }
.visual-spark { position: absolute; width: 3px; height: 3px; border-radius: 100%; background: white; box-shadow: 0 0 12px white; animation: spark-blink 3s ease-in-out infinite; }.spark-a { top: 21%; right: 34%; }.spark-b { bottom: 25%; right: 13%; animation-delay: -1.5s; }.spark-c { top: 49%; left: 6%; animation-delay: -2.2s; }
.ticker { position: relative; z-index: 1; overflow: hidden; border-block: 1px solid rgba(255,255,255,.065); background: rgba(255,255,255,.018); }.ticker-track { display: flex; align-items: center; justify-content: space-around; gap: 28px; width: max-content; min-width: 100%; padding: 17px 0; color: #888eaa; font: 9px "DM Mono", monospace; letter-spacing: .17em; animation: ticker-scroll 36s linear infinite; }.ticker-track i { color: var(--purple); font-style: normal; }

.section-block { padding-block: 94px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }.section-kicker { margin-bottom: 13px; font-size: 8px; }.section-heading h2, .badge-intro h2, .about-copy h2 { margin-bottom: 0; font-size: clamp(31px, 4vw, 43px); font-weight: 800; line-height: 1.07; letter-spacing: -.06em; }.section-intro { max-width: 350px; margin-bottom: 3px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: #cfcbf1; font-size: 10px; font-weight: 800; white-space: nowrap; transition: color .2s; }.text-link span:last-child { transition: transform .25s var(--ease); }.text-link:hover { color: white; }.text-link:hover span:last-child { transform: translate(3px,-3px); }
.latest-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(115deg, rgba(20,22,40,.92), rgba(13,15,27,.9)); box-shadow: 0 18px 70px rgba(0,0,0,.13); transition: border-color .35s, box-shadow .35s, transform .4s var(--ease); }.latest-card:hover { border-color: rgba(167,139,250,.3); box-shadow: 0 24px 80px rgba(0,0,0,.2), 0 0 30px rgba(167,139,250,.04); }
.video-preview { position: relative; display: block; min-height: 300px; overflow: hidden; background: #111426; }.video-preview::after { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(0deg, rgba(6,7,14,.52), transparent 50%), linear-gradient(120deg, rgba(120,93,245,.12), transparent 55%); pointer-events: none; }.video-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .7s; }.video-preview:hover img { transform: scale(1.045); filter: saturate(1.1); }
.video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 28% 25%, rgba(167,139,250,.45), transparent 40%), radial-gradient(circle at 80% 80%, rgba(99,229,255,.25), transparent 40%), #101222; }.video-placeholder::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 35px 35px; mask-image: radial-gradient(ellipse, #000, transparent 78%); }.placeholder-logo { position: relative; z-index: 1; font-size: clamp(26px, 4vw, 45px); font-weight: 900; letter-spacing: -.07em; text-shadow: 0 0 30px rgba(167,139,250,.35); }.placeholder-logo span { color: var(--cyan); }.placeholder-play { position: absolute; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; padding-left: 3px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: white; background: rgba(10,11,23,.55); backdrop-filter: blur(7px); box-shadow: 0 0 35px rgba(167,139,250,.23); transform: translateY(58px); }.placeholder-caption { position: absolute; right: 16px; bottom: 17px; z-index: 3; color: rgba(255,255,255,.72); font: 9px "DM Mono", monospace; letter-spacing: .15em; }
.video-play { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; padding-left: 3px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: white; background: rgba(12,13,24,.65); backdrop-filter: blur(7px); box-shadow: 0 0 36px rgba(167,139,250,.28); opacity: .8; transform: translate(-50%,-50%) scale(.88); transition: opacity .3s, transform .3s var(--ease); }.video-preview:hover .video-play { opacity: 1; transform: translate(-50%,-50%) scale(1.03); }.video-label { position: absolute; left: 18px; bottom: 17px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: #f5f4ff; background: rgba(9,10,19,.62); backdrop-filter: blur(10px); font: 8px "DM Mono", monospace; letter-spacing: .12em; }
.latest-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(24px, 4vw, 43px); }.content-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 19px; color: #aaa2d4; font: 8px "DM Mono", monospace; letter-spacing: .1em; }.badge-dot { width: 5px; height: 5px; border-radius: 2px; background: var(--cyan); transform: rotate(45deg); }
.latest-copy h3 { max-width: 480px; margin-bottom: 13px; font-size: clamp(21px, 2.8vw, 31px); font-weight: 800; line-height: 1.16; letter-spacing: -.05em; overflow-wrap: anywhere; }.latest-copy p { margin-bottom: 19px; color: var(--muted); font-size: 11px; line-height: 1.85; }.latest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 17px; }.auto-update-note { display: inline-flex; align-items: center; gap: 7px; color: #777f9b; font-size: 9px; }.refresh-icon { color: var(--cyan); font-size: 15px; animation: refresh-spin 8s linear infinite; }.api-note { margin: 15px 0 0 !important; color: #8e95ae !important; font-size: 10px !important; }

.games-section { padding-top: 40px; }.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.game-card { position: relative; min-width: 0; padding: 13px 13px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(21,23,41,.86), rgba(13,15,27,.88)); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }.game-card::after { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 85% 0, rgba(167,139,250,.11), transparent 47%); content: ""; transition: opacity .35s; pointer-events: none; }.game-card:hover { transform: translateY(-6px); border-color: rgba(167,139,250,.37); box-shadow: 0 16px 35px rgba(0,0,0,.17); }.game-card:hover::after { opacity: 1; }.game-art { position: relative; display: grid; place-items: center; height: 126px; margin-bottom: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: #15182d; }.game-art::after { position: absolute; inset: 0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.03), transparent); content: ""; transform: translateX(-100%); transition: transform .65s; }.game-card:hover .game-art::after { transform: translateX(100%); }
.art-blocks { grid-template-columns: repeat(3, 21px); grid-template-rows: repeat(3, 21px); gap: 3px; background: radial-gradient(circle at center, rgba(90,213,151,.12), transparent 65%), #121729; }.art-blocks span { width: 21px; height: 21px; border: 1px solid rgba(118,255,185,.24); border-radius: 3px; background: linear-gradient(140deg, rgba(100,221,153,.65), rgba(45,110,83,.35)); box-shadow: inset 0 1px rgba(255,255,255,.13); transition: transform .3s var(--ease); }.art-blocks span:nth-child(2n) { opacity: .4; }.game-card:hover .art-blocks span:nth-child(odd) { transform: translateY(-4px); }
.art-dungeons { background: radial-gradient(circle at 50% 57%, rgba(255,105,96,.26), transparent 40%), linear-gradient(135deg, #22172f, #101222); }.dungeon-moon { position: absolute; top: 25px; width: 51px; height: 51px; border: 1px solid rgba(255,170,140,.43); border-radius: 50%; box-shadow: 0 0 40px rgba(255,92,105,.18), inset 0 0 20px rgba(255,92,105,.11); }.dungeon-sword { z-index: 2; color: #ffe4be; font-size: 43px; text-shadow: 0 0 21px rgba(255,116,100,.8); animation: sword-float 4s ease-in-out infinite; }.dungeon-glow { position: absolute; bottom: 20px; width: 95px; height: 2px; background: linear-gradient(90deg, transparent, #ff7468, transparent); }
.art-fortnite { background: radial-gradient(circle at 55% 48%, rgba(88,113,255,.26), transparent 42%), linear-gradient(145deg, #161a37, #121222); }.fortnite-ring { position: absolute; width: 70px; height: 70px; border: 1px solid rgba(117,174,255,.55); border-radius: 50%; box-shadow: 0 0 29px rgba(100,133,255,.13); animation: orbit-rotate 12s linear infinite; }.fortnite-bolt { z-index: 1; color: #b2e9ff; font-size: 56px; text-shadow: 0 0 22px rgba(99,229,255,.6); }.fortnite-stars { position: absolute; bottom: 19px; color: #ff8fd8; font: 11px "DM Mono", monospace; letter-spacing: .2em; }
.art-mario { background: radial-gradient(circle at 50% 50%, rgba(255,134,118,.2), transparent 40%), linear-gradient(125deg,#201a31,#111629); }.mario-orbit { position: absolute; width: 82px; height: 35px; border: 2px solid rgba(255,111,133,.65); border-radius: 50%; transform: rotate(-33deg); }.orbit-mario-b { transform: rotate(54deg); border-color: rgba(99,229,255,.6); }.mario-star { z-index: 1; color: #ffe79c; font-size: 44px; text-shadow: 0 0 27px rgba(255,220,115,.6); animation: star-bounce 3s ease-in-out infinite; }
.art-bananza { background: radial-gradient(circle at 50% 50%, rgba(255,201,65,.18), transparent 50%), linear-gradient(140deg,#27241c,#121525); }.banana { position: absolute; width: 19px; height: 52px; border: 3px solid #ffda58; border-left-color: transparent; border-radius: 50%; filter: drop-shadow(0 0 9px rgba(255,206,75,.25)); transform: rotate(28deg); }.banana-a { margin-left: -28px; margin-top: 3px; }.banana-b { margin-left: 0; margin-top: -5px; transform: rotate(8deg); }.banana-c { margin-left: 28px; margin-top: 3px; transform: rotate(-24deg); }.banana-glow { position: absolute; bottom: 25px; width: 100px; height: 1px; background: linear-gradient(90deg,transparent,#ffda58,transparent); }
.art-more { background: radial-gradient(circle at center, rgba(167,139,250,.15), transparent 53%), #111426; }.art-more > span { position: relative; z-index: 1; color: #e4dbff; font-size: 45px; font-weight: 300; transition: transform .4s var(--ease); }.game-more:hover .art-more > span { transform: rotate(90deg); }.more-orbit { position: absolute; width: 73px; height: 73px; border: 1px solid rgba(167,139,250,.45); border-radius: 50%; animation: orbit-rotate 16s linear infinite; }.more-orbit::after { position: absolute; top: -3px; left: 27px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); content: ""; }
.game-meta { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }.game-category { color: #8790ad; font: 8px "DM Mono", monospace; letter-spacing: .11em; }.game-out { color: #8188a4; transition: transform .25s, color .25s; }.game-card:hover .game-out { color: var(--cyan); transform: translate(2px,-2px); }.game-card h3 { position: relative; margin-bottom: 7px; font-size: 16px; font-weight: 800; letter-spacing: -.04em; }.game-card p { position: relative; margin-bottom: 0; color: var(--muted); font-size: 10px; line-height: 1.75; }

.plan-section { position: relative; overflow: hidden; border-block: 1px solid rgba(255,255,255,.06); background: linear-gradient(110deg, rgba(167,139,250,.035), transparent 38%, rgba(99,229,255,.025)); }.plan-section::before { position: absolute; top: 16%; right: -180px; width: 400px; height: 400px; border: 1px solid rgba(167,139,250,.08); border-radius: 50%; content: ""; box-shadow: 0 0 0 45px rgba(167,139,250,.018), 0 0 0 90px rgba(167,139,250,.012); pointer-events: none; }.plan-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }.plan-card { position: relative; min-height: 279px; padding: 20px 18px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(13,15,28,.64); transition: transform .35s var(--ease), border-color .35s, background .35s; }.plan-card:hover { transform: translateY(-5px); border-color: rgba(167,139,250,.32); background: rgba(19,21,39,.89); }.plan-index { color: #767e9b; font: 8px "DM Mono", monospace; letter-spacing: .12em; }.plan-icon { display: grid; place-items: center; width: 39px; height: 39px; margin: 22px 0 17px; border: 1px solid var(--line); border-radius: 13px; font-size: 17px; }.plan-icon-red { color: #ff7086; background: rgba(255,61,94,.1); border-color: rgba(255,61,94,.16); }.plan-icon-purple { color: #c4afff; background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.16); }.plan-icon-cyan { color: #7beaff; background: rgba(99,229,255,.08); border-color: rgba(99,229,255,.16); }.plan-icon-blue { color: #a9b3ff; background: rgba(106,125,255,.1); border-color: rgba(106,125,255,.16); }.plan-card h3 { margin-bottom: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.04em; }.plan-card p { min-height: 82px; margin-bottom: 15px; color: var(--muted); font-size: 10px; line-height: 1.8; }.plan-link { display: inline-flex; align-items: center; gap: 6px; color: #d2ccf5; font-size: 10px; font-weight: 800; transition: color .2s, gap .2s; }.plan-link:hover { gap: 10px; color: white; }.plan-line { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), transparent); opacity: 0; transform: scaleX(.3); transition: opacity .35s, transform .4s var(--ease); }.plan-card:hover .plan-line { opacity: 1; transform: scaleX(1); }.plan-multi-links { display: flex; gap: 14px; }

.badge-section { padding-block: 92px; }.badge-panel { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 46px; padding: clamp(26px, 4.4vw, 52px); overflow: hidden; border: 1px solid rgba(167,139,250,.22); border-radius: 27px; background: linear-gradient(125deg, rgba(22,23,44,.97), rgba(12,14,26,.96) 70%); box-shadow: 0 26px 80px rgba(0,0,0,.16); }.badge-panel::before { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(167,139,250,.07), transparent 35%, rgba(99,229,255,.035)); content: ""; pointer-events: none; }.badge-panel-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }.badge-panel-bg span { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(167,139,250,.12); border-radius: 50%; animation: badge-orbit 18s linear infinite; }.badge-panel-bg span:nth-child(1) { top: -140px; left: 35%; }.badge-panel-bg span:nth-child(2) { top: -110px; left: 39%; width: 275px; height: 275px; animation-direction: reverse; }.badge-panel-bg span:nth-child(3) { right: -100px; bottom: -155px; width: 300px; height: 300px; border-color: rgba(99,229,255,.1); }.badge-panel-bg span:nth-child(4) { right: -60px; bottom: -115px; width: 220px; height: 220px; animation-duration: 25s; }
.badge-intro, .badge-showcase { position: relative; z-index: 1; }.badge-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }.badge-intro .section-kicker { margin-bottom: 18px; }.badge-intro h2 { max-width: 390px; margin-bottom: 18px; }.badge-intro > p:not(.section-kicker) { max-width: 430px; margin-bottom: 23px; color: var(--muted); font-size: 11px; line-height: 1.9; }.button-subscribe { border-color: rgba(99,229,255,.25); color: #fff; background: linear-gradient(110deg, #6c52cf, #5649a7 55%, #247f91); box-shadow: 0 10px 28px rgba(99,229,255,.08); }.button-subscribe:hover { box-shadow: 0 15px 36px rgba(99,229,255,.17); }.badge-fineprint { max-width: 430px; margin-top: 17px; color: #747c98; font-size: 9px; line-height: 1.7; }
.badge-showcase { padding: 21px; border: 1px solid rgba(255,255,255,.085); border-radius: 18px; background: rgba(7,9,19,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }.badge-topline { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.07); color: #8a91ad; font: 8px "DM Mono", monospace; letter-spacing: .15em; }.badge-shimmer { color: #dbcfff; font-size: 17px; animation: star-bounce 3s ease-in-out infinite; }.badge-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 21px 12px; padding-block: 24px 22px; }.badge-item { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; animation: badge-float 5s ease-in-out infinite; }.badge-item:nth-child(2n) { animation-delay: -2.2s; }.badge-item:nth-child(3n) { animation-delay: -3.6s; }.sub-badge { position: relative; display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 4px; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 10px 25px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.26); transition: transform .3s var(--ease), box-shadow .3s; }.badge-item:hover .sub-badge { transform: translateY(-4px) rotate(-3deg) scale(1.06); box-shadow: 0 13px 30px rgba(0,0,0,.28), 0 0 22px rgba(167,139,250,.1); }.sub-badge::before { position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; content: ""; }.sub-badge span { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.35); }.badge-blue { background: linear-gradient(145deg,#5c8dff,#3158cf 65%,#2833a3); box-shadow: 0 9px 22px rgba(54,99,226,.19); }.badge-silver { color: #28304a; background: linear-gradient(145deg,#fafbff,#a9b8d4 56%,#737d9c); border-color: rgba(255,255,255,.6); }.badge-silver span { text-shadow: 0 1px 0 rgba(255,255,255,.5); }.badge-silver::before { border-color: rgba(63,73,100,.25); }.badge-gold { color: #483115; background: linear-gradient(145deg,#fff0a3,#e8b84c 55%,#a46b20); border-color: rgba(255,226,146,.7); }.badge-gold span { text-shadow: 0 1px 0 rgba(255,255,255,.35); }.badge-gold::before { border-color: rgba(115,74,15,.25); }.badge-diamond { border-radius: 22px; color: #20415f; background: linear-gradient(145deg,#ddfbff,#74cfff 60%,#3989dd); border-color: rgba(185,250,255,.6); transform: rotate(45deg) scale(.84); }.badge-diamond span { transform: rotate(-45deg); font-size: 27px; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.8); }.badge-ruby { color: #fff; background: linear-gradient(145deg,#ff8498,#cf234f 58%,#761537); border-color: rgba(255,149,172,.6); }.badge-anniversary { display: flex; flex-direction: column; gap: 0; background: linear-gradient(145deg,#9977ff,#5544bc 60%,#18216a); border-color: rgba(191,172,255,.6); }.badge-anniversary i { position: relative; z-index: 1; margin-top: 2px; color: #c7f7ff; font-size: 8px; font-style: normal; letter-spacing: .02em; }.badge-item strong { margin-top: 2px; font-size: 10px; font-weight: 800; }.badge-item small { color: #7e87a4; font-size: 8px; text-align: center; }.badge-equalizer { display: flex; align-items: end; gap: 5px; height: 17px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }.badge-equalizer i { flex: 1; height: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--purple), var(--cyan)); opacity: .6; animation: equalize 1.7s ease-in-out infinite alternate; }.badge-equalizer i:nth-child(3n) { animation-delay: -.8s; }.badge-equalizer i:nth-child(4n) { animation-delay: -.4s; }.badge-equalizer i:nth-child(1), .badge-equalizer i:nth-child(8), .badge-equalizer i:nth-child(15) { height: 11px; }.badge-equalizer i:nth-child(2), .badge-equalizer i:nth-child(9) { height: 7px; }.badge-equalizer i:nth-child(3), .badge-equalizer i:nth-child(11) { height: 15px; }

.about-section { padding-top: 10px; }.about-card { display: grid; grid-template-columns: 67px minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 30px 33px; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(105deg, rgba(167,139,250,.045), rgba(255,255,255,.012) 52%, rgba(99,229,255,.025)); }.about-avatar { position: relative; display: grid; place-items: center; width: 63px; height: 63px; border: 1px solid rgba(167,139,250,.27); border-radius: 19px; color: #eee9ff; background: linear-gradient(145deg, rgba(167,139,250,.18), rgba(99,229,255,.07)); font-size: 33px; font-weight: 800; box-shadow: inset 0 1px rgba(255,255,255,.08); }.about-avatar span { position: absolute; top: -6px; right: -4px; color: var(--cyan); font-size: 13px; animation: star-bounce 4s ease-in-out infinite; }.about-copy .section-kicker { margin-bottom: 10px; }.about-copy h2 { margin-bottom: 10px; font-size: clamp(24px,3vw,32px); }.about-copy > p:last-child { max-width: 730px; margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.85; }.about-socials { display: flex; gap: 8px; }.about-socials a { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 10px; color: #c9c2ff; background: rgba(255,255,255,.025); transition: transform .25s var(--ease), border-color .25s, color .25s; }.about-socials a:hover { transform: translateY(-3px); border-color: rgba(99,229,255,.35); color: white; }
.socials-section { padding-top: 82px; }.social-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }.social-link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); transition: transform .27s var(--ease), border-color .27s, background .27s; }.social-link:hover { transform: translateY(-4px); border-color: rgba(167,139,250,.34); background: rgba(167,139,250,.045); }.social-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(167,139,250,.15); border-radius: 10px; color: #d5caff; background: rgba(167,139,250,.09); font-size: 15px; font-weight: 800; }.social-link > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.social-link strong { font-size: 10px; font-weight: 800; }.social-link small { color: #868eaa; font-size: 8px; line-height: 1.3; }.social-arrow { align-self: flex-start; margin-left: auto; color: #7a829f; font-size: 12px; transition: transform .2s; }.social-link:hover .social-arrow { transform: translate(2px,-2px); }.social-twitch .social-icon { color: #d3b9ff; background: rgba(145,89,255,.1); }.social-youtube .social-icon { color: #ffaaaa; background: rgba(255,81,81,.08); }.social-discord .social-icon { color: #c7caff; background: rgba(88,101,242,.12); }.social-instagram .social-icon { color: #ffbbe5; background: rgba(231,111,201,.08); }.social-tiktok .social-icon { color: #9deaff; background: rgba(87,201,255,.08); }
.final-cta { padding-block: 8px 73px; }.final-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 30px 34px; overflow: hidden; border: 1px solid rgba(167,139,250,.2); border-radius: 21px; background: linear-gradient(100deg, rgba(167,139,250,.07), rgba(99,229,255,.025) 70%, rgba(255,255,255,.012)); }.final-cta-inner::after { position: absolute; top: -115px; right: 18%; width: 190px; height: 190px; border-radius: 50%; background: rgba(120,135,255,.1); filter: blur(48px); content: ""; pointer-events: none; }.final-cta-inner > * { position: relative; z-index: 1; }.final-cta h2 { margin-bottom: 8px; font-size: clamp(24px,3vw,34px); font-weight: 800; letter-spacing: -.055em; }.final-cta p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 90px; border-top: 1px solid var(--line); }.footer-brand .brand-mark { width: 30px; height: 30px; border-radius: 10px; }.footer-brand .brand-mark span { font-size: 16px; }.footer-brand .brand-name { font-size: 12px; }.site-footer > p, .copyright { margin: 0; color: #7e859f; font-size: 9px; }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease) var(--reveal-delay,0ms), transform .7s var(--ease) var(--reveal-delay,0ms); }.js .reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-on-load { animation: fade-rise .8s var(--ease) both; }.hero-visual.reveal-on-load { animation-delay: .15s; }

@keyframes fade-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gradient-sweep { from { background-position: 0 50%; } to { background-position: 100% 50%; } }
@keyframes ambient-drift { from { transform: translate3d(-15px,-12px,0) scale(.94); } to { transform: translate3d(32px,26px,0) scale(1.08); } }
@keyframes orbit-rotate { to { transform: rotate(360deg); } }
@keyframes orbit-rotate-reverse { to { transform: rotateX(63deg) rotateZ(-387deg); } }
@keyframes logo-hover { 0%,100% { transform: rotateY(-6deg) translateY(0); } 50% { transform: rotateY(-2deg) translateY(-7px); } }
@keyframes tag-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes orb-float { 0%,100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(-13px); opacity: 1; } }
@keyframes spark-blink { 0%,100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.4); } }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,61,94,.55); } 80%,100% { box-shadow: 0 0 0 8px rgba(255,61,94,0); } }
@keyframes live-border { 0%,100% { box-shadow: 0 0 17px rgba(255,61,94,.1), inset 0 0 14px rgba(255,61,94,.04); } 50% { box-shadow: 0 0 28px rgba(255,61,94,.2), inset 0 0 18px rgba(255,61,94,.09); } }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@keyframes sword-float { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-5px) rotate(8deg); } }
@keyframes star-bounce { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(7deg); } }
@keyframes badge-orbit { to { transform: rotate(360deg); } }
@keyframes badge-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes equalize { from { opacity: .35; transform: scaleY(.5); transform-origin: bottom; } to { opacity: .9; transform: scaleY(1); transform-origin: bottom; } }

@media (max-width: 1080px) {
  .site-header { gap: 18px; width: calc(100% - 36px); }.main-nav { gap: 15px; }.main-nav a { font-size: 10px; }.discord-mini { padding-inline: 9px; }
  .hero { grid-template-columns: minmax(0,1fr) minmax(330px,.85fr); gap: 25px; }.hero-visual { transform: scale(.92); }.plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.plan-card { min-height: 235px; }.plan-card p { min-height: 64px; }.badge-panel { gap: 28px; }.social-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  html { scroll-padding-top: 125px; }.page-wrap { width: calc(100% - 34px); }.site-header { flex-wrap: wrap; gap: 11px 18px; min-height: 0; padding-block: 11px; }.brand-mark { width: 33px; height: 33px; }.brand-name { font-size: 13px; }.main-nav { order: 3; width: 100%; justify-content: flex-start; gap: clamp(14px,4vw,25px); overflow-x: auto; padding-bottom: 3px; }.main-nav a { font-size: 10px; }.header-actions { margin-left: auto; gap: 9px; }.discord-mini { padding: 7px 9px; font-size: 9px; }.live-pill { min-height: 30px; padding: 7px 9px; font-size: 8px; }
  .hero { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding-block: 62px 50px; }.hero-copy { max-width: 660px; }.hero-visual { min-height: 345px; margin-top: 12px; transform: scale(.9); }.hero-logo-card { width: 245px; height: 265px; }.hero-logo { font-size: 43px; }.ring-one { width: 315px; height: 315px; }.ring-two { width: 255px; height: 255px; }.ring-three { width: 330px; height: 150px; }.tag-minecraft { left: 1%; }.tag-pvp { right: 2%; }.tag-community { left: 4%; }
  .section-block { padding-block: 69px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 23px; }.section-intro { max-width: 490px; }.latest-card { grid-template-columns: 1fr; }.video-preview { min-height: unset; aspect-ratio: 16 / 9; }.latest-copy { padding: 25px; }.games-section { padding-top: 16px; }.games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.game-art { height: 110px; }.game-card { padding: 10px 10px 15px; }.game-card h3 { font-size: 14px; }.game-card p { font-size: 9px; }
  .badge-section { padding-block: 68px; }.badge-panel { grid-template-columns: 1fr; gap: 30px; padding: 26px; }.badge-intro h2 { max-width: 600px; }.badge-showcase { padding: 17px; }.about-card { grid-template-columns: 55px minmax(0,1fr); gap: 17px; padding: 23px; }.about-avatar { width: 52px; height: 52px; border-radius: 16px; font-size: 28px; }.about-socials { grid-column: 2; }.social-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.final-cta-inner { align-items: flex-start; flex-direction: column; padding: 25px; }.site-footer { flex-wrap: wrap; min-height: 100px; padding-block: 22px; }.site-footer > p { order: 3; width: 100%; }
}
@media (max-width: 440px) {
  h1 { font-size: clamp(43px, 13vw, 58px); }.hero-description { font-size: 12px; }.hero-buttons { align-items: stretch; }.hero-buttons .button { flex: 1 1 100%; justify-content: space-between; }.hero-visual { min-height: 315px; margin-inline: -13px; transform: scale(.83); }.float-tag { padding: 9px 10px; font-size: 8px; }.tag-minecraft { left: 0; }.tag-pvp { right: 0; }.tag-community { left: 0; }.section-heading h2, .badge-intro h2 { font-size: 31px; }.games-grid { gap: 9px; }.game-art { height: 94px; }.game-card h3 { font-size: 13px; }.game-card p { font-size: 9px; }.plan-grid { grid-template-columns: 1fr; }.plan-card { min-height: 0; }.plan-card p { min-height: 0; }.plan-icon { margin: 17px 0 13px; }.badge-panel { padding: 18px; }.badge-showcase { padding: 12px; }.badge-cards { gap: 17px 7px; }.sub-badge { width: 52px; height: 52px; border-radius: 15px; font-size: 11px; }.sub-badge::before { inset: 4px; border-radius: 11px; }.badge-diamond { border-radius: 19px; }.badge-diamond span { font-size: 23px; }.badge-item strong { font-size: 9px; }.badge-item small { font-size: 7px; }.about-card { padding: 18px; }.social-grid { grid-template-columns: 1fr; }.social-link { padding: 12px; }.copyright { font-size: 8px; }.footer-brand .brand-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* Cinematic campaign layer — inspired by narrative game microsites, built for UCL_ILIUS. */
:root { --cinema-surface: rgba(10, 12, 26, .8); --cinema-edge: rgba(255,255,255,.15); }
.page-progress { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #ff4d72, #a78bfa 48%, #63e5ff); box-shadow: 0 0 18px rgba(167,139,250,.45); pointer-events: none; }
.hero-cinematic { isolation: isolate; position: relative; display: block; width: 100%; min-height: min(790px, calc(100svh - 70px)); margin: 0; padding: 0; overflow: clip; border-bottom: 1px solid rgba(255,255,255,.08); background: #080911; }
.hero-backdrop { --parallax-y: 0px; position: absolute; z-index: -2; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 76% 36%, rgba(95,75,190,.35), transparent 43%), linear-gradient(120deg, #080911, #14142a 58%, #0a101e); }
.hero-backdrop-image { position: absolute; inset: -5% 0 0; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: center 38%; opacity: .53; filter: saturate(.94) contrast(1.07) brightness(.76); transform: translate3d(0, var(--parallax-y), 0) scale(1.045); transition: opacity 1.1s ease, filter .9s ease; animation: cinematic-image-breathe 24s ease-in-out infinite alternate; }
.hero-backdrop:has(.hero-backdrop-image:not([hidden])) .hero-backdrop-image { opacity: .59; }
.hero-backdrop-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,7,15,.97) 0%, rgba(7,8,17,.88) 28%, rgba(7,8,17,.57) 51%, rgba(7,8,17,.16) 82%, rgba(7,8,17,.37) 100%), linear-gradient(0deg, #090a13 0%, rgba(9,10,19,.55) 9%, transparent 37%, rgba(7,8,15,.24) 100%); }
.hero-backdrop::after { position: absolute; inset: 0; z-index: 2; background-image: radial-gradient(rgba(255,255,255,.19) .55px, transparent .7px); background-size: 4px 4px; opacity: .05; content: ''; pointer-events: none; }
.hero-backdrop-placeholder { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 62% 46%, rgba(125,94,255,.22), transparent 34%), radial-gradient(ellipse at 83% 15%, rgba(99,229,255,.13), transparent 29%), linear-gradient(120deg,#070810,#151326 62%,#0e1726); }
.backdrop-grid { position: absolute; inset: -25%; opacity: .24; transform: perspective(450px) rotateX(67deg) translateY(28%); transform-origin: center; background-image: linear-gradient(rgba(185,163,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(185,163,255,.28) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(transparent, black 25%, black 70%, transparent); animation: grid-drift 24s linear infinite; }
.backdrop-orbit { position: absolute; display: block; width: min(62vw, 690px); aspect-ratio: 1; border: 1px solid rgba(167,139,250,.16); border-radius: 50%; box-shadow: inset 0 0 70px rgba(167,139,250,.035); animation: orbit-rotate 55s linear infinite; }
.orbit-a { right: 1%; top: -20%; }.orbit-b { right: 8%; top: -10%; width: min(48vw, 530px); border-color: rgba(99,229,255,.16); animation-direction: reverse; animation-duration: 68s; }.orbit-c { right: 14%; top: 0%; width: min(34vw, 375px); border-style: dashed; opacity: .5; animation-duration: 95s; }
.backdrop-monogram { position: absolute; right: 6%; top: 24%; color: rgba(255,255,255,.026); font-size: clamp(90px, 20vw, 260px); font-weight: 900; letter-spacing: -.105em; white-space: nowrap; transform: rotate(-9deg); }
.backdrop-monogram span { color: rgba(167,139,250,.12); }
.hero-backdrop-glow { position: absolute; width: 35vw; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: orb-float 12s ease-in-out infinite; }
.glow-left { left: -15%; top: 8%; background: rgba(112,71,246,.16); }.glow-right { right: 10%; bottom: -32%; background: rgba(37,174,219,.15); animation-delay: -5s; }
.hero-inner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 760px) minmax(100px, 1fr); align-items: center; gap: 25px; width: min(1320px, calc(100% - 84px)); min-height: min(680px, calc(100svh - 145px)); margin-inline: auto; padding-block: 80px 90px; }
.hero-cinematic .hero-copy { max-width: 720px; padding-top: 16px; }
.hero-cinematic .eyebrow { margin-bottom: 26px; color: #dfd6ff; font-size: 10px; letter-spacing: .19em; }
.hero-cinematic h1 { max-width: 730px; margin-bottom: 26px; font-size: clamp(56px, 7.4vw, 104px); letter-spacing: -.083em; line-height: .91; text-wrap: balance; text-shadow: 0 10px 44px rgba(0,0,0,.18); }
.hero-cinematic .gradient-text { background-image: linear-gradient(105deg, #f4edff 0%, #c4a8ff 27%, #76e7ff 61%, #ff96db 97%); background-size: 220% auto; animation: gradient-sweep 6s ease-in-out infinite alternate; }
.hero-cinematic .hero-description { max-width: 525px; margin-bottom: 32px; color: #c0c4d8; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.9; }
.hero-cinematic .hero-buttons { gap: 12px; }
.hero-cinematic .button { min-height: 51px; padding-inline: 19px; border-radius: 13px; font-size: 11px; }
.hero-cinematic .button-twitch { border-color: rgba(167,139,250,.65); background: linear-gradient(115deg, #8155ef, #6841c7); box-shadow: 0 12px 38px rgba(113,77,223,.25); }
.hero-cinematic .button-twitch:hover { box-shadow: 0 16px 42px rgba(124,82,244,.38); }
.hero-cinematic .button-glass { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.055); backdrop-filter: blur(16px); }
.hero-current-drop { display: flex; align-items: stretch; gap: 13px; max-width: 595px; margin-top: 46px; animation: fade-rise .9s .22s both; }
.current-drop-line { display: block; width: 2px; flex: 0 0 2px; border-radius: 2px; background: linear-gradient(var(--purple),var(--cyan)); box-shadow: 0 0 14px rgba(167,139,250,.45); }
.hero-current-drop > div { min-width: 0; }
.current-drop-label { display: block; margin-bottom: 8px; color: #8f98b9; font: 500 9px 'DM Mono', monospace; letter-spacing: .15em; }
.hero-current-drop a { display: flex; align-items: center; gap: 22px; color: #fff; font-size: clamp(12px, 1.25vw, 15px); font-weight: 800; line-height: 1.5; transition: color .2s; }
.hero-current-drop a span:first-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero-current-drop a:hover { color: #c7f4ff; }.drop-arrow { flex: 0 0 auto; color: var(--cyan); font-size: 18px; transition: transform .25s; }.hero-current-drop a:hover .drop-arrow { transform: translate(4px,-3px); }
.hero-side-note { display: flex; position: absolute; right: 0; top: 19%; align-items: center; gap: 12px; writing-mode: vertical-rl; color: rgba(255,255,255,.58); font: 500 8px 'DM Mono', monospace; letter-spacing: .17em; }
.hero-side-rule { height: 70px; width: 1px; background: linear-gradient(transparent,rgba(255,255,255,.58),transparent); }
.hero-side-number { color: rgba(160,222,255,.82); }
.hero-baseline { position: absolute; z-index: 4; right: max(42px, calc((100vw - 1320px)/2)); bottom: 27px; left: max(42px, calc((100vw - 1320px)/2)); display: flex; align-items: center; gap: 17px; color: #8e95b0; font: 500 8px 'DM Mono', monospace; letter-spacing: .15em; }
.baseline-label { max-width: 70%; }.baseline-coordinate { margin-left: auto; color: #747d9d; }.scroll-cue { position: relative; display: block; width: 24px; height: 36px; border: 1px solid rgba(255,255,255,.3); border-radius: 20px; }.scroll-cue span { position: absolute; top: 7px; left: 10px; width: 2px; height: 7px; border-radius: 2px; background: var(--cyan); animation: scroll-cue 1.6s ease-in-out infinite; }
.chapter-transition { display: flex; align-items: center; gap: 14px; width: min(1320px,calc(100% - 84px)); margin: 0 auto; padding: 14px 0 2px; color: #69718e; font: 500 8px 'DM Mono',monospace; letter-spacing: .16em; }.chapter-transition-line { height: 1px; flex: 1; overflow: hidden; background: rgba(255,255,255,.08); }.chapter-transition-line span { display: block; width: 20%; height: 100%; background: linear-gradient(90deg,var(--purple),var(--cyan)); animation: chapter-run 5s ease-in-out infinite alternate; }
.ticker { position: relative; margin-top: 10px; border-block: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.012); }
.latest-section { padding-top: 75px; }
.latest-card { position: relative; isolation: isolate; border-color: rgba(180,178,225,.18); box-shadow: 0 25px 90px rgba(0,0,0,.17); transition: border-color .4s, box-shadow .4s, transform .5s var(--ease); }
.latest-card::before { position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: linear-gradient(125deg, rgba(167,139,250,.27), transparent 34%, transparent 70%, rgba(99,229,255,.13)); opacity: 0; transition: opacity .4s; content: ''; pointer-events: none; }
.latest-card:hover { border-color: rgba(167,139,250,.38); box-shadow: 0 34px 100px rgba(0,0,0,.32); }.latest-card:hover::before { opacity: 1; }
.video-preview img { transition: transform .9s cubic-bezier(.18,.75,.18,1), filter .5s; }.latest-card:hover .video-preview img { transform: scale(1.045); filter: saturate(1.14); }
.recent-videos-block { margin-top: 57px; padding-top: 31px; border-top: 1px solid rgba(255,255,255,.08); }
.recent-rail-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.recent-rail-head .section-kicker { margin-bottom: 9px; }.recent-rail-head h3 { margin: 0; font-size: clamp(26px,4vw,42px); font-weight: 800; letter-spacing: -.065em; line-height: 1.05; }
.rail-controls { display: flex; gap: 8px; flex: 0 0 auto; }.rail-controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: rgba(255,255,255,.035); cursor: pointer; font-size: 19px; transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s; }.rail-controls button:hover { transform: translateY(-3px); border-color: rgba(99,229,255,.5); background: rgba(99,229,255,.1); box-shadow: 0 7px 24px rgba(99,229,255,.09); }
.recent-video-track { display: grid; grid-auto-columns: minmax(235px, 30%); grid-auto-flow: column; gap: 15px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 3px 22px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(167,139,250,.4) transparent; }
.recent-video-track::-webkit-scrollbar { height: 5px; }.recent-video-track::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 9px; }.recent-video-track::-webkit-scrollbar-thumb { background: rgba(167,139,250,.35); border-radius: 9px; }
.recent-video-card { --tilt-x: 0deg; --tilt-y: 0deg; --pointer-x: 50%; --pointer-y: 50%; position: relative; display: flex; min-width: 0; flex-direction: column; align-self: stretch; overflow: hidden; border: 1px solid rgba(255,255,255,.105); border-radius: 16px; background: linear-gradient(150deg,rgba(23,25,45,.94),rgba(12,13,25,.96)); scroll-snap-align: start; transform: perspective(950px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0); transform-style: preserve-3d; transition: transform .24s ease, border-color .3s, box-shadow .3s; animation: video-card-in .65s var(--ease) both; animation-delay: calc(var(--card-order,0) * 65ms); }
.recent-video-card::after { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(330px circle at var(--pointer-x) var(--pointer-y),rgba(167,139,250,.15),transparent 45%); opacity: 0; content: ''; pointer-events: none; transition: opacity .25s; }.recent-video-card:hover { z-index: 2; border-color: rgba(167,139,250,.48); box-shadow: 0 20px 50px rgba(0,0,0,.3),0 0 28px rgba(126,89,230,.09); }.recent-video-card:hover::after { opacity: 1; }
.recent-video-cover { position: relative; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(135deg,#232046,#101d30); }.recent-video-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .8s var(--ease),opacity .4s,filter .4s; }.recent-video-card:hover .recent-video-cover img { transform: scale(1.075); opacity: 1; filter: saturate(1.16); }.recent-video-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(4,5,12,.68),transparent 65%); pointer-events: none; }.recent-video-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; padding-left: 3px; border: 1px solid rgba(255,255,255,.47); border-radius: 50%; color: white; background: rgba(11,10,24,.44); backdrop-filter: blur(9px); opacity: 0; transform: translate(-50%,-42%) scale(.75); transition: opacity .35s, transform .35s var(--ease); }.recent-video-card:hover .recent-video-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }.recent-video-number { position: absolute; right: 12px; bottom: 9px; color: rgba(255,255,255,.72); font: 500 10px 'DM Mono',monospace; letter-spacing: .1em; }
.recent-video-copy { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; padding: 17px 17px 15px; }.recent-video-label { margin-bottom: 9px; color: #9da6ca; font: 500 8px 'DM Mono',monospace; letter-spacing: .15em; }.recent-video-copy h4 { display: -webkit-box; min-height: 3.2em; margin: 0 0 18px; overflow: hidden; color: #f3f4ff; font-size: 13px; font-weight: 800; letter-spacing: -.025em; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.recent-video-watch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); color: #b1a5ff; font: 500 8px 'DM Mono',monospace; letter-spacing: .14em; }.recent-video-watch b { color: var(--cyan); font: 700 15px Manrope,sans-serif; transition: transform .2s; }.recent-video-card:hover .recent-video-watch b { transform: translate(3px,-2px); }
.recent-video-fallback { display: flex; grid-column: 1 / -1; align-items: center; gap: 15px; min-height: 125px; padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; color: #c7cbe0; background: rgba(255,255,255,.025); transition: border-color .25s,background .25s; }.recent-video-fallback:hover { border-color: rgba(167,139,250,.45); background: rgba(167,139,250,.055); }.fallback-play { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; color: white; background: linear-gradient(135deg,#ff557b,#a56cff); box-shadow: 0 7px 24px rgba(165,108,255,.16); }.recent-video-fallback > span:nth-child(2) { flex: 1; font-size: 12px; }.recent-video-fallback > span:last-child { color: var(--cyan); font-size: 18px; }
.recent-rail-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 2px; }.recent-rail-footer > span { color: #7f87a5; font-size: 9px; }.recent-rail-footer .text-link { flex: 0 0 auto; font-size: 10px; }
/* Make the existing page read like chapters rather than disconnected cards. */
.section-block { position: relative; }.games-section::before, .plan-section::before, .badge-section::before { position: absolute; z-index: -1; top: 12%; left: 50%; width: min(90vw,1080px); height: 420px; border-radius: 50%; background: radial-gradient(ellipse,rgba(112,80,211,.055),transparent 68%); content: ''; transform: translateX(-50%); pointer-events: none; }.games-section { padding-top: 86px; }.games-grid { perspective: 1100px; }.game-card { transform-style: preserve-3d; }.game-card .game-art { position: relative; overflow: hidden; }.game-card .game-art::after { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,.12),transparent 38%,rgba(0,0,0,.16)); content: ''; pointer-events: none; }.game-card:hover .game-art { filter: saturate(1.14); }.plan-card { transition: transform .45s var(--ease),border-color .35s,background .35s,box-shadow .35s; }.plan-card:hover { transform: translateY(-7px); box-shadow: 0 20px 60px rgba(0,0,0,.2); }.badge-panel { isolation: isolate; }.badge-panel-bg span { will-change: transform; }
.section-heading h2, .about-copy h2, .badge-intro h2 { text-wrap: balance; }.section-heading .section-kicker { margin-bottom: 13px; }
@keyframes cinematic-image-breathe { 0% { transform: translate3d(0,var(--parallax-y),0) scale(1.045); } 100% { transform: translate3d(0,calc(var(--parallax-y) - 7px),0) scale(1.105); } }
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 0 104px; } }
@keyframes scroll-cue { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes chapter-run { from { transform: translateX(-100%); } to { transform: translateX(500%); } }
@keyframes video-card-in { from { opacity: 0; transform: perspective(950px) rotateX(4deg) translateY(18px); } to { opacity: 1; transform: perspective(950px) rotateX(0) translateY(0); } }
@media (min-width: 1500px) { .hero-cinematic { min-height: min(860px, calc(100svh - 75px)); }.hero-inner { min-height: min(745px, calc(100svh - 155px)); }.hero-cinematic h1 { font-size: clamp(76px, 6.8vw, 116px); } }
@media (max-width: 900px) { .hero-inner { width: calc(100% - 46px); grid-template-columns: minmax(0,1fr); min-height: auto; padding-block: 77px 95px; }.hero-cinematic { min-height: 0; }.hero-cinematic .hero-copy { max-width: 690px; }.hero-side-note { right: 2px; top: auto; bottom: 115px; }.hero-backdrop-image { object-position: 64% center; }.hero-backdrop-shade { background: linear-gradient(90deg,rgba(6,7,15,.95),rgba(7,8,17,.76) 54%,rgba(7,8,17,.43)),linear-gradient(0deg,#090a13,transparent 35%,rgba(7,8,15,.25)); }.hero-baseline { right: 23px; left: 23px; bottom: 20px; }.recent-video-track { grid-auto-columns: minmax(225px,42%); }.chapter-transition { width: calc(100% - 46px); } }
@media (max-width: 600px) { .hero-inner { width: calc(100% - 36px); padding-block: 65px 95px; }.hero-cinematic h1 { font-size: clamp(51px, 13.5vw, 77px); }.hero-cinematic .eyebrow { max-width: 300px; font-size: 8px; line-height: 1.7; }.hero-cinematic .hero-description { font-size: 12px; }.hero-current-drop { margin-top: 34px; }.hero-side-note { display: none; }.hero-backdrop-image { object-position: 66% center; opacity: .38; }.hero-backdrop:has(.hero-backdrop-image:not([hidden])) .hero-backdrop-image { opacity: .42; }.hero-backdrop-shade { background: linear-gradient(90deg,rgba(6,7,15,.92),rgba(7,8,17,.72) 68%,rgba(7,8,17,.53)),linear-gradient(0deg,#090a13,transparent 40%,rgba(7,8,15,.2)); }.hero-baseline { gap: 10px; font-size: 7px; }.baseline-coordinate { display: none; }.chapter-transition { width: calc(100% - 36px); gap: 8px; font-size: 7px; }.latest-section { padding-top: 60px; }.recent-videos-block { margin-top: 41px; }.recent-rail-head { align-items: flex-start; }.recent-rail-head h3 { font-size: 29px; }.rail-controls button { width: 36px; height: 36px; }.recent-video-track { grid-auto-columns: minmax(76vw,76vw); gap: 11px; margin-right: -17px; padding-right: 17px; }.recent-video-copy { padding: 14px; }.recent-video-copy h4 { min-height: 0; font-size: 12px; }.recent-rail-footer { align-items: flex-start; flex-direction: column; gap: 12px; }.recent-rail-footer > span { line-height: 1.6; }.video-api-note { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-backdrop-image, .backdrop-grid, .backdrop-orbit, .hero-backdrop-glow, .scroll-cue span, .chapter-transition-line span, .recent-video-card { animation: none !important; transition: none !important; }.recent-video-card { transform: none !important; } }