*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e0e13;--surface: #131318;--surface-low: #1b1b20;--surface-mid: #1f1f25;--surface-high: #2a292f;--surface-highest: #35343a;--on-surface: #e4e1e9;--on-surface-variant: #b9cacb;--outline: #849495;--outline-variant: #3b494b;--cyan: #00f0ff;--cyan-glow: rgba(0, 240, 255, .55);--cyan-soft: rgba(0, 240, 255, .18);--pink: #fe00fe;--pink-glow: rgba(254, 0, 254, .55);--pink-soft: rgba(254, 0, 254, .18);--lime: #2ae500;--lime-glow: rgba(121, 255, 91, .6)}html,body{min-height:100%;background:var(--bg);color:var(--on-surface);font-family:Be Vietnam Pro,system-ui,sans-serif;overflow-x:hidden}body{display:flex;flex-direction:column;min-height:100vh;position:relative}.bg-grid{position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to right,rgba(0,240,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,240,255,.05) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}.bg-deco{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.bg-pixel{position:absolute}.bg-pixel.pixel-1{top:80px;left:10%;width:8px;height:8px;background:var(--cyan-soft);box-shadow:0 0 14px var(--cyan-glow)}.bg-pixel.pixel-2{top:240px;right:14%;width:12px;height:12px;background:transparent;border:1px solid rgba(254,0,254,.3);transform:rotate(45deg)}.bg-pixel.pixel-3{bottom:180px;left:6%;width:6px;height:6px;background:var(--lime);opacity:.5;box-shadow:0 0 10px var(--lime-glow)}.bg-frame{position:absolute;border-style:solid;pointer-events:none}.bg-frame.frame-1{bottom:-90px;left:-90px;width:280px;height:280px;border:4px solid rgba(0,240,255,.06);transform:rotate(12deg)}.bg-frame.frame-2{top:-90px;right:-90px;width:320px;height:320px;border:2px solid rgba(254,0,254,.06);transform:rotate(-12deg)}.bg-scan{position:absolute;left:0;right:0;height:25%;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.03) 50%,transparent 100%);animation:scan 8s linear infinite;pointer-events:none}@keyframes scan{0%{transform:translateY(-100%)}to{transform:translateY(400%)}}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0px,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:1;opacity:.5}#app{flex:1 0 auto;display:flex;flex-direction:column;position:relative;z-index:2}.layout{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 48px;width:100%;max-width:1280px;margin:0 auto;gap:56px}.hero{text-align:center}.hero-title{font-family:Space Grotesk,system-ui,sans-serif;font-weight:700;font-style:italic;font-size:clamp(40px,8vw,72px);letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 18px var(--cyan-glow),0 0 40px rgba(0,240,255,.35);margin-bottom:12px}.hero-sub{font-family:Space Grotesk,system-ui,sans-serif;font-weight:600;font-size:clamp(14px,2.2vw,18px);letter-spacing:.08em;text-transform:uppercase;color:var(--pink);text-shadow:0 0 10px var(--pink-glow)}.carousel{position:relative;width:100%;max-width:1100px;display:flex;align-items:center;gap:16px}.carousel-viewport{flex:1;overflow:hidden;padding:24px 8px;margin:0 -8px}.carousel-track{display:flex;gap:32px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 4px}.carousel-track::-webkit-scrollbar{display:none}.carousel-arrow{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid rgba(0,240,255,.3);background:var(--surface-mid);color:var(--cyan);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px #00f0ff40;transition:transform .15s ease,background .15s,box-shadow .15s,opacity .15s}.carousel-arrow svg{width:22px;height:22px}.carousel-arrow:hover:not(:disabled){background:var(--surface-high);transform:scale(1.06);box-shadow:0 0 18px var(--cyan-glow)}.carousel-arrow:disabled{opacity:.25;cursor:not-allowed;box-shadow:none}.card{flex:0 0 320px;scroll-snap-align:center;display:flex;flex-direction:column;background:var(--surface-low);border:2px solid var(--accent-soft, rgba(0, 240, 255, .18));border-radius:12px;text-decoration:none;color:inherit;overflow:hidden;position:relative;cursor:pointer;transform:translateY(0);transition:transform .25s ease,border-color .2s,box-shadow .25s ease;box-shadow:0 4px #00000080}.card[data-accent=cyan]{--accent: var(--cyan);--accent-glow: var(--cyan-glow);--accent-soft: var(--cyan-soft)}.card[data-accent=pink]{--accent: var(--pink);--accent-glow: var(--pink-glow);--accent-soft: var(--pink-soft)}.card[data-accent=lime]{--accent: var(--lime);--accent-glow: var(--lime-glow);--accent-soft: rgba(42, 229, 0, .18)}.card.is-active{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow),0 0 60px #ffffff0a,0 8px #0009}.card-image{position:relative;width:100%;aspect-ratio:4 / 3;background:var(--surface-highest);overflow:hidden}.card-image img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.card.is-active .card-image img{transform:scale(1.06)}.card-image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent-soft);mix-blend-mode:overlay;transition:opacity .25s ease;opacity:.5}.card.is-active .card-image-overlay{opacity:1}.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;background:var(--surface-low);position:relative}.card-title{font-family:Space Grotesk,system-ui,sans-serif;font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;color:var(--accent);text-shadow:0 0 8px var(--accent-glow);line-height:1.05}.card-desc{font-family:Be Vietnam Pro,system-ui,sans-serif;font-size:14px;line-height:1.55;color:var(--on-surface-variant);min-height:44px}.card-cta{margin-top:6px;padding-top:12px;border-top:1px solid var(--accent-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}.card-cta-label{font-family:Space Grotesk,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--outline)}.card-play{font-family:Space Grotesk,system-ui,sans-serif;font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--accent);text-shadow:0 0 6px var(--accent-glow);padding:6px 14px;border:1.5px solid var(--accent);border-radius:4px;transition:background .2s,color .2s,box-shadow .2s}.card.is-active .card-play{background:var(--accent);color:#0e0e13;text-shadow:none;box-shadow:0 0 18px var(--accent-glow)}.card-placeholder{flex:0 0 320px;scroll-snap-align:center;border:2px dashed var(--outline-variant);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:.5;cursor:default;box-shadow:none;min-height:360px}.placeholder-icon{font-family:Space Grotesk,system-ui,sans-serif;font-size:56px;color:var(--outline-variant);line-height:1}.placeholder-text{font-family:Space Grotesk,system-ui,sans-serif;font-size:12px;letter-spacing:.22em;color:var(--outline-variant);text-transform:uppercase}.hint{font-family:Space Grotesk,system-ui,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--outline);opacity:.7;text-align:center}.site-footer{width:100%;padding:24px 32px;border-top:1px solid var(--surface-high);background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative;z-index:2}.footer-copy{font-family:Space Grotesk,system-ui,sans-serif;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);opacity:.7}@media (max-width: 700px){.layout{gap:36px;padding:40px 12px 32px}.carousel{gap:8px}.carousel-arrow{width:40px;height:40px}.carousel-arrow svg{width:18px;height:18px}.card,.card-placeholder{flex-basis:280px}}