:root{
  --bg:#0c0d14;
  --glass: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.12);
  --text:#e9ecff;
  --muted:#9aa0b5;
  --accent:#6aa8ff;
  --accent-2:#9b6bff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* BG + grain */
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 800px at 10% 10%, #183055 0%, transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, #2a1750 0%, transparent 60%),
    linear-gradient(180deg, #0b0c12 0%, #0c0d14 100%);
  filter:saturate(120%); z-index:-2;
  animation:float 18s ease-in-out infinite alternate;
}
@keyframes float{0%{transform:translateY(-8px)}100%{transform:translateY(8px)}}
.grain{
  position:fixed; inset:0; z-index:-1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.08'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.4; mix-blend-mode:soft-light;
}

/* cursor glow */
.cursor-glow{
  position:fixed; width:200px; height:200px; border-radius:50%;
  pointer-events:none; z-index:1; opacity:.35;
  background: radial-gradient(closest-side, rgba(106,168,255,.35), transparent 65%),
              radial-gradient(closest-side, rgba(155,107,255,.35), transparent 65%);
  filter: blur(24px);
  transform: translate(-200px,-200px);
}

/* layout */
.wrap{width:min(1100px, 92%); margin-inline:auto; padding:72px 0 56px}

/* hero */
.hero{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; margin-top:8px}
.pfp-wrap{position:relative; width:148px; height:148px}
.pfp{
  width:100%; height:100%; object-fit:cover; border-radius:22px;
  border:1px solid var(--stroke);
  box-shadow:0 10px 40px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,0.02) inset;
}
.ring{
  position:absolute; inset:-12px; border-radius:28px;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
  filter: blur(20px); opacity:.45; z-index:-1;
}
.title{font-size:48px; line-height:1.05; letter-spacing:.5px; margin:4px 0 0}
.tagline{color:var(--muted); min-height:24px; margin:0 0 8px; font-size:18px}

/* small rounded social buttons (like Email) */
.social-buttons{
  margin-top:10px;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.sm-button{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  color:var(--text); text-decoration:none; font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sm-button:hover{
  transform:translateY(-1px);
  border-color:rgba(106,168,255,.45);
  box-shadow:0 10px 30px rgba(106,168,255,.18), 0 0 0 1px rgba(106,168,255,.25) inset;
}
.sm-ico{
  width:18px; height:18px; display:block; background:white;
  mask:no-repeat center/contain;
}

/* section headers */
.sec-title{font-size:22px; margin:28px 0 14px; letter-spacing:.3px}

/* link grids */
.links{
  display:grid;
  gap:16px;
  grid-template-columns:1fr; /* mobile: stacked */
  margin-bottom:10px;
}
@media (min-width:720px){
  .links.two-col{ grid-template-columns:1fr 1fr; }
}

.card{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:18px; border-radius:16px;
  background:var(--glass); border:1px solid var(--stroke);
  text-decoration:none; color:var(--text);
  overflow:hidden; backdrop-filter: blur(8px);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:16px;
  background:
    radial-gradient(120px 60px at 10% 50%, rgba(106,168,255,.18), transparent 70%),
    radial-gradient(120px 60px at 90% 50%, rgba(155,107,255,.18), transparent 70%);
  opacity:0; transition:opacity .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(106,168,255,.4);
  box-shadow:0 14px 44px rgba(0,0,0,.45)
}
.card:hover::after{opacity:1}

.icon{
  width:44px; height:44px; border-radius:12px; flex:0 0 44px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  display:grid; place-items:center;
}
.icon::before{
  content:""; display:block; width:22px; height:22px; background:white;
  mask-size:contain; mask-position:center; mask-repeat:no-repeat;
}

/* brand icon masks for big cards */
.spotify::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 1.6a10.4 10.4 0 1 0 0 20.8 10.4 10.4 0 0 0 0-20.8zm4.79 15.1a.77.77 0 0 1-1.06.26 12.82 12.82 0 0 0-9.38-.86.77.77 0 1 1-.48-1.46c3.65-1.2 7.76-1 11.06.94.36.21.48.67.26 1.02zm1.42-3.1a.96.96 0 0 1-1.32.32 14.96 14.96 0 0 0-10.96-1.02.96.96 0 0 1-.56-1.84c4.32-1.3 9.16-.98 13.08 1.1.47.25.64.84.36 1.32zm.13-3.27a1.15 1.15 0 0 1-1.58.38c-4.2-2.47-9.6-2.84-14.1-1.02a1.15 1.15 0 1 1-.84-2.14c5.12-2 11.1-1.57 15.86 1.18.54.32.72 1.02.36 1.6z"/></svg>');}
.apple::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.1 13.1c-.03-2.3 1.9-3.4 1.98-3.4-1.08-1.6-2.76-1.8-3.36-1.82-1.43-.14-2.8.83-3.52.83-.73 0-1.86-.81-3.05-.79-1.57.02-3.02.92-3.82 2.32-1.64 2.84-.42 7.03 1.18 9.33.79 1.13 1.72 2.4 2.95 2.35 1.19-.05 1.64-.76 3.08-.76s1.86.76 3.06.74c1.27-.02 2.07-1.15 2.86-2.29.9-1.28 1.27-2.52 1.28-2.58-.03-.01-2.45-.94-2.48-3.33zM13.5 5.7c.63-.77 1.06-1.86.95-2.94-.92.04-2.05.62-2.71 1.39-.58.68-1.1 1.79-.97 2.86.99.08 2.01-.54 2.73-1.31z"/></svg>');}
.soundcloud::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.5 10.5A3.5 3.5 0 0 1 22 14a3.5 3.5 0 0 1-3.5 3.5H7.8a3.8 3.8 0 0 1 0-7.6c.3 0 .6.03.88.09a5.2 5.2 0 0 1 9.82.5z"/></svg>');}
.instagram::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5.8a5.2 5.2 0 1 0 0 10.4 5.2 5.2 0 0 0 0-10.4zM19 6.3a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z"/></svg>');}
.youtube::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23 7.3a4 4 0 0 0-2.8-2.8C18.5 4 12 4 12 4s-6.5 0-8.2.5A4 4 0 0 0 1 7.3 41.2 41.2 0 0 0 1 12a41.2 41.2 0 0 0 .5 4.7 4 4 0 0 0 2.8 2.8C5.5 20 12 20 12 20s6.5 0 8.2-.5a4 4 0 0 0 2.8-2.8A41.2 41.2 0 0 0 23 12a41.2 41.2 0 0 0 0-4.7zM10 15.2V8.8l6 3.2-6 3.2z"/></svg>');}
.tiktok::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.6 6.5c1.4 1.2 3 1.9 4.8 2v3a9.4 9.4 0 0 1-5-1.4v5.8a6 6 0 1 1-6-6c.34 0 .67.03 1 .1v3.1a3 3 0 1 0 3 3V2h3.2a6.7 6.7 0 0 0 1 4.5z"/></svg>');}
/* Snapchat mask */
.snapchat::before{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c3.1 0 5.6 2.44 5.7 5.5.03.86.1 1.33.67 2.03.49.61 1.39 1.02 2.07 1.2.4.11.66.5.57.91-.1.41-.5.68-.92.6-.5-.1-1.1-.2-1.6-.38.03.87.02 2-.46 3.05-.82 1.79-2.62 2.64-4.07 3.1-.15.56-.26 1.39-.26 1.39-.05.35-.35.61-.7.61H9.63c-.35 0-.64-.26-.7-.61 0 0-.11-.83-.26-1.39-1.45-.46-3.25-1.31-4.07-3.1-.48-1.05-.49-2.18-.46-3.05-.5.18-1.1.28-1.6.38-.42.08-.82-.19-.92-.6-.09-.41.17-.8.57-.91.68-.18 1.58-.59 2.07-1.2.57-.7.64-1.17.67-2.03C6.4 4.44 8.9 2 12 2z"/></svg>');}

/* small-button icon masks reuse same class names */
.sm-ico.instagram{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5.8a5.2 5.2 0 1 0 0 10.4 5.2 5.2 0 0 0 0-10.4zM19 6.3a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z"/></svg>');}
.sm-ico.tiktok{mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.6 6.5c1.4 1.2 3 1.9 4.8 2v3a9.4 9.4 0 0 1-5-1.4v5.8a6 6 0 1 1-6-6c.34 0 .67.03 1 .1v3.1a3 3 0 1 0 3 3V2h3.2a6.7 6.7 0 0 0 1 4.5z"/></svg>');}

.meta h3{margin:0 0 4px; font-size:18px}
.meta p{margin:0; color:var(--muted); font-size:14px}
.arrow{margin-left:auto; font-weight:700; opacity:.65}

/* embed */
.embed{margin:6px 0 10px}
.player{padding:10px; border-radius:16px; border:1px solid var(--stroke); background:var(--glass)}

/* footer */
.footer{margin-top:36px; display:flex; gap:10px; align-items:center; justify-content:center; color:var(--muted); font-size:14px}
.footer .dot{opacity:.6}

/* small screens */
@media (max-width:420px){
  .title{font-size:38px}
  .pfp-wrap{width:128px; height:128px}
}

.footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.footer a:hover {
  text-decoration: underline;
}