:root{--a:#ff2bd6;--b:#00f0ff;--c:#b6ff00;--d:#7a2bff;--bg:#0a0014}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#f3eaff;font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}
a{color:var(--b)}
nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.2rem;background:rgba(10,0,20,.55);backdrop-filter:blur(10px);flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;margin-left:1rem;font-weight:600;font-size:.9rem}nav .logo{margin:0;letter-spacing:.2em;background:linear-gradient(90deg,var(--a),var(--b),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{min-height:min(92vh,860px);display:grid;place-items:center;align-content:center;text-align:center;padding:4rem 1rem;position:relative;overflow:hidden}
.mandala{position:absolute;width:min(90vw,720px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ff2bd633 0 10deg,#00f0ff22 10deg 20deg,#b6ff0022 20deg 30deg);mask:radial-gradient(circle,transparent 18%,#000 19%,#000 40%,transparent 41%,transparent 48%,#000 49%,#000 70%,transparent 71%);-webkit-mask:radial-gradient(circle,transparent 18%,#000 19%,#000 40%,transparent 41%,transparent 48%,#000 49%,#000 70%,transparent 71%);animation:spin 40s linear infinite;z-index:-1}
@keyframes spin{to{transform:rotate(360deg)}}
.glitch{font-size:clamp(3.5rem,16vw,11rem);line-height:1;margin:0;font-weight:900;letter-spacing:.04em;position:relative;background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--d),var(--a));background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:iri 6s linear infinite;filter:drop-shadow(0 0 25px #ff2bd688)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
.glitch::before{animation:g1 2.8s infinite steps(1);transform:translate(-3px,0);opacity:.7}.glitch::after{animation:g2 3.3s infinite steps(1);transform:translate(3px,0);opacity:.7}
@keyframes iri{to{background-position:300% 0}}
@keyframes g1{0%,92%{clip-path:inset(0 0 0 0);transform:none}93%{clip-path:inset(20% 0 55% 0);transform:translate(-8px,2px)}96%{clip-path:inset(65% 0 10% 0);transform:translate(6px,-2px)}}
@keyframes g2{0%,88%{clip-path:inset(0 0 0 0);transform:none}90%{clip-path:inset(40% 0 35% 0);transform:translate(9px,0)}94%{clip-path:inset(5% 0 80% 0);transform:translate(-6px,1px)}}
.tag{font-size:clamp(1.1rem,3.5vw,1.8rem);margin:.6rem 0 0;letter-spacing:.3em;text-transform:uppercase;color:var(--c);text-shadow:0 0 12px #b6ff0088}
.sub{max-width:34rem;margin:1rem auto 2rem;opacity:.9}
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:999px;color:#fff;text-decoration:none;font-weight:700;background:linear-gradient(90deg,var(--d),var(--a),var(--b));background-size:200%;box-shadow:0 0 24px #ff2bd666;transition:.3s}.btn:hover{background-position:100% 0;transform:translateY(-2px) scale(1.03)}
.portal{max-width:1200px;margin:3rem auto;padding:2.5rem 1.2rem;border-radius:32px;background:radial-gradient(ellipse at top,#2a0a4a99,#0a001488 70%);border:1px solid #ffffff1a;box-shadow:inset 0 0 80px #7a2bff33}
h2{text-align:center;font-size:clamp(2rem,6vw,3.4rem);margin:0 0 1.5rem;background:linear-gradient(90deg,var(--b),var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}h2 span{-webkit-text-fill-color:initial;color:var(--c);font-size:.6em;vertical-align:middle}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tile{display:block;border-radius:18px;overflow:hidden;aspect-ratio:1;position:relative;background:#1a0630}
.tile img,.reel video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .5s}
.tile:hover img{transform:scale(1.08) rotate(1deg);filter:saturate(1.4) hue-rotate(20deg)}
.tile::after,.reel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px #ffffff22}
.tile:hover::after{box-shadow:inset 0 0 0 3px var(--a),0 0 30px var(--b)}
.hint{text-align:center;opacity:.7;margin-top:-1rem}
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.reel{margin:0;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:9/16;background:#1a0630;cursor:pointer}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem;font-weight:700;font-size:.9rem;background:linear-gradient(transparent,#000c)}
.reel.on::after{box-shadow:inset 0 0 0 3px var(--c),0 0 30px var(--a)}
.about p{max-width:44rem;margin:0 auto 1.2rem;font-size:1.1rem}
.ai{max-width:44rem;margin:0 auto;padding:1rem 1.2rem;border-radius:16px;border:2px dashed var(--c);background:#b6ff0011}
.follow{text-align:center}.links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.ig{background:linear-gradient(90deg,#f58529,#dd2a7b,#8134af)}.fb{background:linear-gradient(90deg,#1877f2,#7a2bff)}
footer{text-align:center;padding:2rem;opacity:.7}
#lb{position:fixed;inset:0;z-index:20;background:#05000cf2;display:grid;place-items:center;padding:1rem}#lb[hidden]{display:none}
#lb img{max-width:94vw;max-height:84vh;border-radius:12px;box-shadow:0 0 60px #ff2bd655}
#lb p{position:absolute;bottom:.5rem;margin:0;font-weight:700}
#lb button{position:absolute;background:#ffffff1a;border:0;color:#fff;font-size:2.2rem;width:3rem;height:3rem;border-radius:50%;cursor:pointer}
.x{top:1rem;right:1rem}.pv{left:1rem;top:50%}.nx{right:1rem;top:50%}
@media (max-width:600px){nav span a{margin-left:.6rem;font-size:.8rem}.grid{grid-template-columns:repeat(2,1fr);gap:8px}.reels{grid-template-columns:repeat(2,1fr);gap:10px}.portal{margin:1.5rem .5rem;padding:1.8rem .7rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.hero{min-height:0;padding:3rem 1rem 1.5rem}.mandala{width:min(80vw,520px)}.sub{margin-bottom:.5rem}
.tabs{position:sticky;top:0;z-index:6;display:flex;justify-content:center;gap:.5rem;padding:.6rem;background:rgba(10,0,20,.7);backdrop-filter:blur(10px);border-block:1px solid #ffffff1a}
.tabs a{color:#fff;text-decoration:none;font-weight:700;padding:.55rem 1.1rem;border-radius:999px;border:1px solid #ffffff2a;white-space:nowrap}
.tabs a[aria-selected=true]{background:linear-gradient(90deg,var(--d),var(--a),var(--b));border-color:transparent;box-shadow:0 0 20px #ff2bd677}
nav{position:static}.portal{margin-top:1.5rem}.portal[hidden]{display:none}
@media (max-width:600px){.tabs{gap:.3rem;padding:.5rem .3rem}.tabs a{padding:.5rem .7rem;font-size:.85rem}.hero{padding:2rem 1rem 1rem}}