/* ============ BASE ============ */
:root{
  --bg:#0a0e17; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.1);
  --txt:#e5e7eb; --muted:#94a3b8;
  --a1:#7c3aed; --a2:#22d3ee;
  --grad:linear-gradient(90deg,var(--a1),var(--a2));
  --btn:linear-gradient(135deg,var(--a1),var(--a2));
  --sora:'Sora',sans-serif; --inter:'Inter',sans-serif;
}
body[data-theme="2"]{--a1:#f472b6;--a2:#fb923c}
body[data-theme="3"]{--a1:#34d399;--a2:#38bdf8}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--inter);line-height:1.6;overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:var(--inter);border:none;cursor:pointer}

.glow{position:fixed;width:340px;height:340px;border-radius:50%;filter:blur(120px);opacity:.35;z-index:-1;transition:background .5s}
.glow-1{top:-120px;left:-120px;background:var(--a1)}
.glow-2{bottom:-120px;right:-120px;background:var(--a2)}

.page{max-width:480px;margin:0 auto;padding:24px 20px 40px}

/* ============ COVER + PROFILE ============ */
.cover{height:150px;border-radius:24px;background:linear-gradient(120deg,var(--a1),var(--a2),var(--a1));background-size:200% 200%;animation:shift 8s ease infinite;position:relative;overflow:hidden}
.cover::after{content:'';position:absolute;inset:0;background:radial-gradient(140px 70px at 20% 30%,rgba(255,255,255,.35),transparent),radial-gradient(160px 80px at 80% 65%,rgba(255,255,255,.25),transparent)}
.profile{margin-top:-58px;text-align:center}
.avatar-ring{position:relative;width:116px;height:116px;margin:0 auto 16px}
.avatar-ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--a1),var(--a2),transparent 70%,var(--a1));animation:spin 5s linear infinite}
.avatar{position:absolute;inset:6px;border-radius:50%;background:#131a2a;border:4px solid var(--bg);display:grid;place-items:center;font:800 32px var(--sora);color:var(--txt);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.verified{position:absolute;bottom:2px;right:2px;width:28px;height:28px;border-radius:50%;background:#22c55e;border:3px solid var(--bg);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;z-index:2}
.online{position:absolute;bottom:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#22c55e;border:3px solid var(--bg);z-index:2}
.profile h1{font:800 28px var(--sora);color:#fff;letter-spacing:-.02em}
.handle{color:var(--muted);font-size:14px;margin-top:4px}
.bio{color:#cbd5e1;font-size:15px;max-width:340px;margin:12px auto 20px}
.socials{display:flex;justify-content:center;gap:12px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--muted);transition:.3s}
.socials a svg{width:18px;height:18px}
.socials a:hover{background:var(--btn);color:#fff;border-color:transparent;transform:translateY(-3px)}

/* ============ MARQUEE ============ */
.marquee{margin:26px -20px 0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:scroll 16s linear infinite}
.marquee-track span{white-space:nowrap;margin-right:34px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.marquee-track b{color:var(--a2)}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0 4px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center}
.stat h3{font:800 20px var(--sora);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-top:4px}

/* ============ SECTION TITLE ============ */
.sec-title{display:flex;align-items:center;gap:10px;font:700 16px var(--sora);color:#fff;margin:28px 0 12px}
.sec-title::before{content:'';width:4px;height:16px;border-radius:4px;background:var(--grad)}

/* ============ FEATURED ============ */
.featured{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:linear-gradient(#101624,#101624) padding-box,var(--grad) border-box;border:1px solid transparent;position:relative;overflow:hidden;transition:.3s}
.featured::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);animation:shine 3.5s ease infinite}
.featured:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.f-icon{font-size:30px}
.f-text{flex:1;display:flex;flex-direction:column}
.f-text small{color:var(--a2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.f-text strong{color:#fff;font-size:15px;font-family:var(--sora)}
.f-arrow{color:var(--muted);font-size:18px;transition:.3s}
.featured:hover .f-arrow{color:var(--a2);transform:translateX(4px)}

/* ============ LINKS ============ */
.link-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px;transition:.3s}
.link-card:hover{border-color:var(--a1);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.4)}
.l-icon{width:44px;height:44px;min-width:44px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:20px}
.l-text{flex:1;display:flex;flex-direction:column}
.l-text strong{color:#fff;font-size:15px;font-family:var(--sora);font-weight:700}
.l-text small{color:var(--muted);font-size:12.5px}
.l-arrow{color:var(--muted);transition:.3s}
.link-card:hover .l-arrow{color:var(--a2);transform:translateX(4px)}

/* ============ HIGHLIGHTS ============ */
.h-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.h-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);transition:.3s}
.h-card:hover{transform:translateY(-3px);border-color:var(--a1)}
.h-thumb{display:grid;place-items:center;height:76px;font-size:28px}
.g1{background:linear-gradient(135deg,#312e81,#7c3aed)}
.g2{background:linear-gradient(135deg,#082f49,#0ea5e9)}
.g3{background:linear-gradient(135deg,#3b0764,#db2777)}
.h-card p{padding:8px 4px;text-align:center;font-size:11.5px;color:var(--muted)}

/* ============ SHOUTOUTS ============ */
.s-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:10px}
.s-card p{color:#e2e8f0;font-size:14px}
.s-card span{display:block;margin-top:8px;color:var(--a2);font-size:12.5px;font-weight:600}

/* ============ SUBSCRIBE ============ */
.subscribe{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 20px;text-align:center;margin-top:26px}
.subscribe h3{font:700 18px var(--sora);color:#fff}
.subscribe p{color:var(--muted);font-size:13.5px;margin:6px 0 14px}
.subscribe form{display:flex;gap:8px}
.subscribe input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:#fff;font:400 14px var(--inter)}
.subscribe input:focus{outline:none;border-color:var(--a1)}
.btn{background:var(--btn);color:#fff;font:600 14px var(--inter);padding:12px 20px;border-radius:12px;transition:.3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.form-status{font-size:13px;color:#34d399;margin-top:10px;min-height:18px}

/* ============ FOOTER ============ */
.foot{margin-top:32px;text-align:center}
.themes{display:flex;justify-content:center;gap:10px;margin-bottom:14px}
.dot{width:20px;height:20px;border-radius:50%;transition:.3s;opacity:.8}
.dot.active{outline:2px solid #fff;outline-offset:2px;opacity:1}
.dot-1{background:linear-gradient(135deg,#7c3aed,#22d3ee)}
.dot-2{background:linear-gradient(135deg,#f472b6,#fb923c)}
.dot-3{background:linear-gradient(135deg,#34d399,#38bdf8)}
.foot p{color:var(--muted);font-size:12.5px}

/* ============ ANIMATION ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shine{0%{left:-80%}60%,100%{left:120%}}
@keyframes scroll{to{transform:translateX(-50%)}}

@media(min-width:768px){.page{padding-top:48px}}
.subscribe input{min-width:0}