:root{--bg:#150C2B;--violet:#7C5CFF;--pink:#FF4D8D;--gold:#FFB92E}
html{scroll-behavior:smooth;scroll-padding-top:0px}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:#fff;overflow-x:hidden}
/* gradients */
.gtext{background:linear-gradient(110deg,var(--violet),var(--pink),var(--gold),var(--violet));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
.grad-bg{background:linear-gradient(110deg,var(--violet),var(--pink),var(--gold),var(--violet));background-size:300% 100%;animation:flow 6s linear infinite}
.glass{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
/* keyframes */
@keyframes flow{to{background-position:300% 0}}
@keyframes float{50%{transform:translateY(-16px)}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.2)}66%{transform:translate(-50px,50px) scale(.9)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes shine{to{transform:translateX(250%) skewX(-20deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(124,92,255,.6)}100%{box-shadow:0 0 0 22px rgba(124,92,255,0)}}
@keyframes pop{from{opacity:0;transform:translateY(60px) rotateX(-70deg)}to{opacity:1;transform:none}}
.float{animation:float 6s ease-in-out infinite}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:blob 14s ease-in-out infinite;pointer-events:none}
.pulse{animation:pulseRing 2s infinite}
.ch{display:inline-block;opacity:0;animation:pop .8s cubic-bezier(.2,.9,.3,1.2) forwards}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.left{transform:translateX(-70px)}.reveal.right{transform:translateX(70px)}.reveal.zoom{transform:scale(.85)}
.reveal.show{opacity:1;transform:none}
/* buttons and cards */
.btn{position:relative;overflow:hidden;display:inline-block;padding:.85rem 1.8rem;border-radius:999px;font-weight:600;color:#fff;transition:transform .2s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,92,255,.45)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:rgba(255,255,255,.35);transform:skewX(-20deg)}
.btn:hover::after{animation:shine .8s}
.tilt{transform-style:preserve-3d;transition:transform .15s ease-out}
.card-hover{transition:border-color .3s,box-shadow .3s}.card-hover:hover{border-color:rgba(255,77,141,.6);box-shadow:0 20px 50px rgba(124,92,255,.25)}

/* header (dark glass bar + big transparent logo) */
#hdr{height:120px;transition:height .3s,background .3s,border-color .3s;border-bottom:1px solid transparent}
#hdr.scrolled{height:92px;background:rgba(21,12,43,.88);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.1)}
.logo-link{display:inline-block;transition:transform .3s}
.logo-link img{display:block;height:96px;width:auto;transition:height .3s}
.logo-link:hover{transform:scale(1.06)}

#hdr.scrolled .logo-link img{height:70px}
.logo-link.ft img{height:150px}
@media (max-width:767px){#hdr{height:90px}#hdr.scrolled{height:76px}.logo-link img{height:64px}#hdr.scrolled .logo-link img{height:54px}}
.nav-link{position:relative;padding:.25rem 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--pink));transition:width .3s}
.nav-link:hover::after,.nav-link.active::after{width:100%}
#progress{position:absolute;left:0;bottom:-1px;height:3px;width:0}
#cursorGlow{position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(124,92,255,.35),transparent 70%);transform:translate(-50%,-50%);z-index:0;left:-500px;top:-500px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.ch{opacity:1;transform:none}}