/* HexGram Stream v2.2 — Glassmorphism Blue Neon */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#050510;--bg2:#0a0a1e;--bg3:#0f0f28;--glass:rgba(15,15,40,0.6);--glass2:rgba(15,15,40,0.4);--gb:rgba(80,120,255,0.12);--gbh:rgba(80,120,255,0.25);--neon:#3b82ff;--neon2:#60a5fa;--ng:rgba(59,130,255,0.4);--ns:rgba(59,130,255,0.08);--cyan:#06d6f0;--cg:rgba(6,214,240,0.3);--purple:#8b5cf6;--pg:rgba(139,92,246,0.3);--text:#e8ecf4;--text2:#8892b0;--text3:#4a5276;--green:#22c55e;--gg:rgba(34,197,94,0.3);--orange:#f97316;--r:14px;--rs:8px;--rl:24px;--t:0.25s cubic-bezier(0.4,0,0.2,1)}
html{scroll-behavior:smooth}
body{font-family:'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:0 2rem}
.mono{font-family:'JetBrains Mono',monospace}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(59,130,255,0.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(139,92,246,0.04) 0%,transparent 50%);pointer-events:none;z-index:0}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:var(--glass);backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--gb);transition:var(--t)}
.nav-brand{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1rem}
.nav-logo{width:32px;height:32px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.875rem;color:var(--text2);transition:color var(--t);font-weight:500}
.nav-links a:hover{color:var(--neon)}
.nav-live{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--green);font-family:'JetBrains Mono',monospace}
.nav-live .dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--gg)}50%{opacity:.5;box-shadow:0 0 0 8px transparent}}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:8rem 0 6rem;position:relative;overflow:hidden}
.hero-orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(100px)}
.orb-1{width:500px;height:500px;background:var(--ng);top:-10%;right:5%;opacity:.35;animation:float 8s ease-in-out infinite}
.orb-2{width:350px;height:350px;background:var(--pg);bottom:5%;left:-5%;opacity:.25;animation:float 10s ease-in-out 2s infinite}
.orb-3{width:250px;height:250px;background:var(--cg);top:40%;left:30%;opacity:.15;animation:float 12s ease-in-out 4s infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
.hero-content{position:relative;z-index:1;max-width:700px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;background:var(--ns);border:1px solid var(--gbh);border-radius:100px;font-size:.8rem;color:var(--neon);font-family:'JetBrains Mono',monospace;margin-bottom:2rem;animation:fadeUp .6s ease both}
.hero h1{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:1.5rem;animation:fadeUp .6s ease .1s both}
.hero h1 .glow{background:linear-gradient(135deg,var(--neon),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px var(--ng))}
.hero-desc{font-size:1.15rem;color:var(--text2);max-width:540px;margin-bottom:2.5rem;font-weight:400;line-height:1.7;animation:fadeUp .6s ease .2s both}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUp .6s ease .3s both}
.btn{padding:.75rem 1.75rem;border-radius:var(--rs);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:all var(--t);display:inline-flex;align-items:center;gap:.5rem}
.btn-neon{background:var(--neon);color:#fff;box-shadow:0 0 20px var(--ng),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-neon:hover{transform:translateY(-2px);box-shadow:0 0 40px var(--ng),0 8px 30px rgba(0,0,0,.3)}
.btn-glass{background:var(--glass);color:var(--text);border:1px solid var(--gb);backdrop-filter:blur(12px)}
.btn-glass:hover{border-color:var(--neon);color:var(--neon)}

/* SECTION */
.section{padding:6rem 0;position:relative;z-index:1}
.section-header{margin-bottom:3.5rem}
.section-header h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.75rem}
.section-header p{color:var(--text2);font-size:1.05rem}

/* METRICS */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;padding:3rem 0}
.metric-glass{text-align:center;padding:2rem 1rem;background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--gb);border-radius:var(--r);transition:all .3s}
.metric-glass:hover{border-color:var(--gbh);box-shadow:0 0 30px rgba(59,130,255,.08)}
.metric-val{font-size:2.5rem;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-.04em}
.metric-val.blue{color:var(--neon);text-shadow:0 0 20px var(--ng)}
.metric-val.cyan{color:var(--cyan);text-shadow:0 0 20px var(--cg)}
.metric-val.purple{color:var(--purple);text-shadow:0 0 20px var(--pg)}
.metric-val.green{color:var(--green);text-shadow:0 0 20px var(--gg)}
.metric-lbl{color:var(--text2);font-size:.85rem;margin-top:.5rem}

/* VIDEO GRID */
.vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.vid-card{position:relative;border-radius:var(--r);overflow:hidden;background:#000;border:1px solid var(--gb);cursor:pointer;transition:all .3s}
.vid-card:hover{border-color:var(--neon);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 25px var(--ng)}
.vid-card.featured{grid-column:1/-1}
.vid-card video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.vid-card img.poster{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}
.vid-card:hover img.poster{transform:scale(1.03)}
.vid-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s}
.vid-card:hover .vid-overlay{opacity:1}
.vid-play{width:64px;height:64px;border-radius:50%;background:var(--neon);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;box-shadow:0 0 30px var(--ng);transition:transform .2s}
.vid-play:hover{transform:scale(1.15)}
.vid-badge{position:absolute;top:.75rem;left:.75rem;padding:.25rem .7rem;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--gb);border-radius:100px;font-size:.7rem;font-family:'JetBrains Mono',monospace;color:var(--neon)}
.vid-dur{position:absolute;bottom:.75rem;right:.75rem;padding:.2rem .6rem;background:rgba(0,0,0,.7);border-radius:4px;font-size:.7rem;font-family:'JetBrains Mono',monospace;color:#fff}
.vid-info{position:absolute;bottom:.75rem;left:.75rem;display:flex;gap:.5rem}
.vid-tag{padding:.2rem .5rem;background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--gb);border-radius:4px;font-size:.6rem;font-family:'JetBrains Mono',monospace;color:var(--text2)}

/* FULLSCREEN PLAYER */
.fs-player{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.95);align-items:center;justify-content:center;flex-direction:column}
.fs-player.active{display:flex}
.fs-player video{max-width:90vw;max-height:80vh;border-radius:var(--r);box-shadow:0 0 60px rgba(59,130,255,.15)}
.fs-close{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--gb);color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t);backdrop-filter:blur(12px)}
.fs-close:hover{border-color:var(--neon);color:var(--neon)}
.fs-controls{display:flex;align-items:center;gap:1.5rem;margin-top:1.5rem;padding:1rem 2rem;background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--gb);border-radius:var(--rl)}
.fs-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:1.1rem;transition:color var(--t);padding:4px}
.fs-btn:hover{color:var(--neon)}
.fs-btn.main{width:44px;height:44px;border-radius:50%;background:var(--neon);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px var(--ng)}
.fs-progress{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:2px;cursor:pointer;min-width:300px}
.fs-progress-fill{height:100%;background:linear-gradient(90deg,var(--neon),var(--cyan));border-radius:2px;width:0%}
.fs-time{font-size:.75rem;color:var(--text2);font-family:'JetBrains Mono',monospace;min-width:90px}

/* PHOTO GALLERY */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.photo-item{position:relative;border-radius:var(--rs);overflow:hidden;cursor:pointer;border:1px solid var(--gb);transition:all .3s;aspect-ratio:1}
.photo-item:hover{border-color:var(--neon);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 15px var(--ng)}
.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.photo-item:hover img{transform:scale(1.08)}
.photo-cdn{position:absolute;top:.5rem;right:.5rem;padding:.15rem .5rem;background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--gb);border-radius:100px;font-size:.6rem;font-family:'JetBrains Mono',monospace;color:var(--cyan)}
.photo-speed{position:absolute;bottom:.5rem;left:.5rem;padding:.15rem .5rem;background:rgba(0,0,0,.6);border-radius:4px;font-size:.6rem;font-family:'JetBrains Mono',monospace;color:var(--green)}

/* LIGHTBOX */
.lightbox{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.95);align-items:center;justify-content:center}
.lightbox.active{display:flex}
.lightbox img{max-width:85vw;max-height:85vh;object-fit:contain;border-radius:var(--r);box-shadow:0 0 60px rgba(59,130,255,.1)}
.lb-close{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--gb);color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);transition:all var(--t)}
.lb-close:hover{border-color:var(--neon);color:var(--neon)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--glass);border:1px solid var(--gb);color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);transition:all var(--t)}
.lb-nav:hover{border-color:var(--neon);color:var(--neon);box-shadow:0 0 15px var(--ng)}
.lb-prev{left:1.5rem}
.lb-next{right:1.5rem}
.lb-counter{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);font-size:.85rem;color:var(--text2);font-family:'JetBrains Mono',monospace;background:var(--glass);padding:.4rem 1rem;border-radius:100px;border:1px solid var(--gb);backdrop-filter:blur(12px)}

/* AUDIO */
.audio-player{display:flex;align-items:center;gap:1.5rem;padding:1.5rem 2rem;background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--gb);border-radius:var(--rl)}
.audio-art{width:56px;height:56px;border-radius:var(--rs);overflow:hidden;flex-shrink:0;box-shadow:0 0 15px var(--ng)}
.audio-art img{width:100%;height:100%;object-fit:cover}
.audio-info{flex:1;min-width:0}
.audio-title{font-weight:600;font-size:.9rem;margin-bottom:.2rem}
.audio-artist{font-size:.75rem;color:var(--text2)}
.audio-bar{width:100%;height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:.6rem;cursor:pointer}
.audio-fill{height:100%;background:linear-gradient(90deg,var(--neon),var(--cyan));border-radius:2px;width:0%}
.audio-ctrls{display:flex;align-items:center;gap:.75rem}
.audio-btn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1rem;transition:all var(--t)}
.audio-btn:hover{color:var(--neon)}
.audio-btn.play{width:40px;height:40px;border-radius:50%;border:2px solid var(--neon);display:flex;align-items:center;justify-content:center;color:var(--neon)}
.audio-btn.play:hover{background:var(--neon);color:#fff;box-shadow:0 0 20px var(--ng)}
.audio-time{font-size:.7rem;color:var(--text3);font-family:'JetBrains Mono',monospace;min-width:80px;text-align:right}

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feat-card{padding:2rem;background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--gb);border-radius:var(--r);transition:all .3s}
.feat-card:hover{border-color:var(--neon);transform:translateY(-4px);box-shadow:0 0 30px rgba(59,130,255,.1)}
.feat-icon{width:48px;height:48px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.25rem;background:var(--ns);border:1px solid var(--gb)}
.feat-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.75rem}
.feat-card p{color:var(--text2);font-size:.9rem;line-height:1.65}

/* FOOTER */
.footer{padding:5rem 0 3rem;border-top:1px solid var(--gb);position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand{font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.footer-brand img{border-radius:6px}
.footer-desc{color:var(--text2);font-size:.85rem;line-height:1.7;max-width:300px}
.footer-col h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:1.25rem;font-weight:600}
.footer-col a{display:block;color:var(--text2);font-size:.875rem;margin-bottom:.65rem;transition:color var(--t)}
.footer-col a:hover{color:var(--neon)}
.footer-bottom{padding-top:2rem;border-top:1px solid var(--gb);display:flex;justify-content:space-between;font-size:.8rem;color:var(--text3)}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(24px);transition:all .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1024px){.vid-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(3,1fr)}.feat-grid,.metrics-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container{padding:0 1.25rem}.hero{padding:7rem 0 4rem}.section{padding:4rem 0}.photo-grid{grid-template-columns:repeat(2,1fr)}.feat-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}.footer-bottom{flex-direction:column;gap:.5rem;text-align:center}.audio-player{flex-wrap:wrap}}