@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root{
  --bg:#07080d;--bg2:#0c0e15;--text:#f5f7fb;--muted:#a6adbd;--line:rgba(255,255,255,.10);
  --card:rgba(15,17,26,.68);--accent:#8b5cf6;--accent2:#22d3ee;--max:1160px;
  --shadow:0 25px 80px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:radial-gradient(circle at 50% -10%,#17122d 0,#090a10 35%,#07080d 70%);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.65;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to bottom,#000,transparent 80%);z-index:-2}
a{color:inherit;text-decoration:none}.section{max-width:var(--max);margin:auto;padding:110px 24px}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.aurora{position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(100px);opacity:.16;pointer-events:none;z-index:-1}.aurora-a{background:#7c3aed;top:-250px;left:-180px}.aurora-b{background:#06b6d4;right:-280px;top:45vh}
#particles-js{position:fixed;inset:0;z-index:-1;opacity:.32;pointer-events:none}
.site-header{position:sticky;top:14px;z-index:30;max-width:calc(var(--max) - 30px);margin:14px auto 0;padding:11px 13px 11px 16px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:rgba(8,9,14,.72);backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:10px;font:700 12px/1 "Space Grotesk";letter-spacing:.09em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:11px;color:#fff;box-shadow:0 0 25px rgba(139,92,246,.35)}
.nav{display:flex;gap:4px}.nav a{padding:9px 13px;border-radius:10px;color:#9299aa;font-size:13px;transition:.25s}.nav a:hover,.nav a.active{color:#fff;background:rgba(255,255,255,.07)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:19px}
.hero{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:center;padding-top:90px}
.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:#aeb5c5;font-size:11px;font-weight:800;letter-spacing:.14em}.pulse{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 5px rgba(74,222,128,.10),0 0 16px #4ade80}
h1,h2,h3,.brand,.profile-name{font-family:"Space Grotesk",sans-serif}h1{font-size:clamp(48px,6.5vw,82px);line-height:1.02;letter-spacing:-.055em;margin:20px 0}h1 span,h2 em{font-style:normal;background:linear-gradient(100deg,#fff 10%,#a78bfa 52%,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{max-width:680px;color:var(--muted);font-size:17px}.hero-lead strong{color:#e9eaf0}.hero-actions{display:flex;gap:12px;margin:30px 0}.btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);padding:12px 17px;border-radius:12px;font-size:13px;font-weight:700;transition:.25s}.btn-primary{background:#fff;color:#090a0f;border-color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(255,255,255,.15)}.btn-ghost{background:rgba(255,255,255,.035);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.08)}
.hero-meta{display:flex;gap:20px;flex-wrap:wrap;color:#777f91;font-size:12px}.hero-meta i{color:#a78bfa;margin-right:5px}
.hero-card{position:relative;overflow:hidden;padding:36px 28px 25px;text-align:center;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:var(--shadow)}.hero-glow{position:absolute;width:220px;height:220px;background:#8b5cf6;filter:blur(100px);opacity:.22;top:-120px;left:50%;transform:translateX(-50%)}.avatar-wrap{position:relative;width:132px;margin:0 auto 18px}.avatar{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.12);display:block;box-shadow:0 0 0 10px rgba(255,255,255,.025),0 20px 50px rgba(0,0,0,.4)}.status-dot{position:absolute;right:4px;bottom:7px;width:22px;height:22px;border-radius:50%;background:#4ade80;border:5px solid #11131b;box-shadow:0 0 16px rgba(74,222,128,.7)}.profile-name{font-size:21px;font-weight:700}.profile-name i{font-size:13px;color:#60a5fa}.profile-role{color:#858da0;font-size:12px;margin-top:2px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:28px 0 18px}.mini-stats div{padding:12px 6px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.16)}.mini-stats strong,.mini-stats span{display:block}.mini-stats strong{font-size:11px}.mini-stats span{font-size:10px;color:#767e91;margin-top:3px}.availability{font-size:11px;color:#8d95a6}.availability span{display:inline-block;width:6px;height:6px;background:#4ade80;border-radius:50%;margin-right:5px}
.section-heading{max-width:700px;margin-bottom:45px}.section-heading h2{font-size:clamp(34px,4.2vw,52px);line-height:1.08;letter-spacing:-.04em;margin:12px 0}.section-heading p{color:var(--muted);max-width:600px}.section-heading.compact{margin-bottom:30px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.glass-card{padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--card);backdrop-filter:blur(16px);transition:.3s}.glass-card:hover{transform:translateY(-5px);border-color:rgba(167,139,250,.3);background:rgba(20,22,33,.82)}.icon-box{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(139,92,246,.12);color:#b69cff;margin-bottom:22px}.glass-card h3{font-size:19px;margin:0 0 8px}.glass-card p{font-size:13px;color:#8f97a8;margin:0}.skills{margin-top:28px;padding-top:25px;border-top:1px solid var(--line)}.skills-title{font-size:10px;font-weight:800;letter-spacing:.16em;color:#656d7d;margin-bottom:14px}.skill-list{display:flex;gap:8px;flex-wrap:wrap}.skill-list span{padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);font-size:11px;color:#b5bbc8}.skill-list i{color:#a78bfa;margin-right:5px}
.project-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:15px}.project-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card);transition:.3s}.project-card:hover{transform:translateY(-5px);border-color:rgba(103,232,249,.25);box-shadow:var(--shadow)}.project-image{height:245px;position:relative;display:flex;align-items:flex-end;padding:22px;background-size:cover;background-position:center}.project-one{background:linear-gradient(135deg,#17152c,#0d2a3b)}.project-two{background:linear-gradient(135deg,#25182c,#11192e)}.project-image:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 20%,rgba(139,92,246,.35),transparent 30%),linear-gradient(transparent 35%,rgba(0,0,0,.55))}.project-image span{position:relative;z-index:1;font-size:10px;letter-spacing:.15em;color:#c7cbd5}.project-body{padding:23px}.tag{font-size:9px;color:#9da5b6;padding:5px 8px;border:1px solid var(--line);border-radius:6px;margin-right:5px}.project-body h3{font-size:23px;margin:17px 0 7px}.project-body p{font-size:12px;color:#8991a2;margin:0 0 20px}.project-link{font-size:11px;font-weight:700}.project-link i{margin-left:5px;color:#a78bfa}
.gallery{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:13px;grid-auto-rows:230px}.gallery-item{position:relative;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#11131a;cursor:pointer}.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:.45s}.gallery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.7));opacity:.8}.gallery-item span{position:absolute;z-index:2;bottom:15px;left:16px;color:#fff;font-size:11px;font-weight:700}.gallery-item:hover img{transform:scale(1.045)}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}
.contact-card{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:48px;border:1px solid rgba(167,139,250,.2);border-radius:28px;background:radial-gradient(circle at 85% 20%,rgba(139,92,246,.15),transparent 35%),rgba(15,17,26,.75);box-shadow:var(--shadow)}.contact-card h2{font-size:clamp(32px,4vw,48px);line-height:1.05;margin:12px 0}.contact-card p{color:#8f97a8;max-width:600px}.contact-actions{text-align:center}.socials{display:flex;justify-content:center;gap:8px;margin-top:16px}.socials a{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:#9aa2b2;transition:.2s}.socials a:hover{color:#fff;background:rgba(255,255,255,.08)}
.bank-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.bank-card{padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--card);text-align:center}.bank-top{display:flex;justify-content:space-between;color:#aeb5c5;font-size:11px;font-weight:800;letter-spacing:.1em}.bank-number{font:700 25px "Space Grotesk";letter-spacing:.04em;margin:22px 0 0}.bank-card p:not(.bank-number){font-size:11px;color:#7d8596}.bank-card img{width:185px;height:185px;object-fit:contain;border-radius:12px;background:#fff;padding:6px;margin:10px auto 18px;display:block}.copy-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#d6dae2;border-radius:9px;padding:9px 12px;font-size:11px;cursor:pointer;transition:.2s}.copy-btn:hover{background:rgba(255,255,255,.09)}
.music-player{position:fixed;z-index:40;left:50%;bottom:18px;transform:translateX(-50%);width:min(650px,calc(100% - 30px));padding:10px 12px;display:grid;grid-template-columns:42px 1fr minmax(100px,220px) 34px;gap:12px;align-items:center;background:rgba(10,11,17,.82);border:1px solid var(--line);backdrop-filter:blur(20px);border-radius:16px;box-shadow:0 15px 50px rgba(0,0,0,.4)}.music-art,.music-next{border:0;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff;cursor:pointer}.music-next{width:32px;height:32px;background:rgba(255,255,255,.07)}.music-info{min-width:0}.music-info strong,.music-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-info strong{font-size:11px}.music-info span{font-size:9px;color:#747c8d;margin-top:2px}#progressBar{width:100%;accent-color:#a78bfa}
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:30px;background:rgba(2,3,7,.86);backdrop-filter:blur(14px)}.modal.open{display:grid}.modal-inner{max-width:min(1100px,92vw);max-height:90vh;text-align:center}.modal-inner img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:14px;box-shadow:0 30px 100px #000}.modal-inner p{font-size:12px;color:#b5bbc8}.modal-close{position:fixed;top:24px;right:25px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:17px}.toast{position:fixed;z-index:110;left:50%;bottom:95px;transform:translate(-50%,10px);padding:9px 14px;background:#fff;color:#08090d;border-radius:9px;font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
footer{max-width:var(--max);margin:auto;padding:25px 24px 100px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#626a7a;font-size:10px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:850px){.site-header{margin:8px 12px 0}.nav{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;padding:8px;background:rgba(8,9,14,.95);border:1px solid var(--line);border-radius:15px}.nav.open{display:flex}.nav-toggle{display:block}.hero{grid-template-columns:1fr;gap:40px;text-align:center;padding-top:65px}.hero-copy{display:flex;flex-direction:column;align-items:center}.hero-lead{font-size:15px}.hero-meta{justify-content:center}.hero-card{max-width:390px;width:100%;margin:auto}.about-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.contact-card{grid-template-columns:1fr;text-align:center}.contact-card p{margin-left:auto;margin-right:auto}.bank-grid{grid-template-columns:1fr}}
@media(max-width:600px){.section{padding:78px 18px}h1{font-size:45px}.brand span:last-child{display:none}.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}.contact-card{padding:30px 22px}.music-player{grid-template-columns:40px 1fr 32px}.music-player #progressBar{grid-column:1/-1;grid-row:2}.music-player{padding-bottom:12px}footer{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none}.gallery-item img,.glass-card,.project-card{transition:none}}


/* Discord live profile */
.discord-live-card{padding-top:26px}
.discord-label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;padding:6px 10px;border:1px solid rgba(88,101,242,.25);border-radius:999px;background:rgba(88,101,242,.08);color:#aeb7ff;font-size:9px;font-weight:800;letter-spacing:.12em}
.discord-label i{font-size:12px}
.discord-avatar-wrap{z-index:1}
.discord-avatar-wrap .avatar{transition:border-color .25s,box-shadow .25s}
.discord-avatar-wrap .status-dot{transition:background .25s,box-shadow .25s}
.dot-online{background:#43b581;box-shadow:0 0 16px rgba(67,181,129,.75)}
.dot-idle{background:#faa61a;box-shadow:0 0 16px rgba(250,166,26,.65)}
.dot-dnd{background:#f04747;box-shadow:0 0 16px rgba(240,71,71,.65)}
.dot-offline{background:#747f8d;box-shadow:none}
.discord-custom{position:relative;z-index:1;min-height:27px;margin:10px auto 0;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);color:#aeb5c5;font-size:10px;max-width:300px}
.discord-custom p,.discord-custom span{margin:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activities{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;max-height:235px;overflow:auto;margin-top:8px;padding-right:2px;text-align:left;scrollbar-width:thin}
.activity-card{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(0,0,0,.18);min-width:0}
.activity-left{position:relative;flex:0 0 48px;height:48px}.large-icon{width:48px;height:48px;object-fit:cover;border-radius:10px;display:block;background:#181b25}.large-icon.empty{border:1px solid rgba(255,255,255,.07)}
.small-icon{width:18px;height:18px;object-fit:cover;border-radius:5px;margin-left:4px;vertical-align:middle}.activity-right{min-width:0;flex:1;color:#8f97a8;font-size:9px;line-height:1.45}.activity-right b{color:#e9ebf1;font-size:10px}.activity-right>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-right .time{color:#70788a;margin-top:3px;font-variant-numeric:tabular-nums}.activity-empty{padding:14px 8px;text-align:center;color:#737b8d;font-size:10px}
.project-image{overflow:hidden;padding:0;align-items:flex-end}.project-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .35s ease;filter:saturate(.9) brightness(.78)}.project-card:hover .project-image img{transform:scale(1.035);filter:saturate(1) brightness(.88)}
.project-image:after{z-index:1}.project-image span{z-index:2;margin:0 22px 22px;padding:5px 8px;border-radius:6px;background:rgba(5,6,10,.5);backdrop-filter:blur(7px)}
@media(max-width:850px){.activities{max-height:260px}.discord-live-card{text-align:center}.activity-card{text-align:left}}