:root{
  --ink:#0B0F12;
  --glass-bg:rgba(255,255,255,.06);
  --glass-hover:rgba(255,255,255,.1);
  --glass-border:rgba(255,255,255,.1);
  --glass-border-hover:rgba(20,184,166,.4);
  --cream:#F5F5F5;
  --muted:#A1A1AA;
  --orange-1:#F97316;
  --orange-2:#fb923c;
  --orange-3:#fdba74;
  --turquoise-1:#14B8A6;
  --turquoise-2:#2DD4BF;
  --turquoise-3:#5eead4;
  --radius-lg:8px;
  --radius-md:6px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  top:-160px;
  left:-160px;
  width:500px;
  height:500px;
  background:var(--orange-1);
  border-radius:50%;
  filter:blur(120px);
  opacity:.25;
  pointer-events:none;
  z-index:-1;
}

body::after{
  content:'';
  position:fixed;
  bottom:-160px;
  right:-160px;
  width:500px;
  height:500px;
  background:var(--turquoise-1);
  border-radius:50%;
  filter:blur(120px);
  opacity:.25;
  pointer-events:none;
  z-index:-1;
}

a{color:inherit;text-decoration:none;}

.page{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:0 25px 50px -12px rgba(249,115,22,.1);
  position:relative;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:visible;
  padding:32px 24px 24px;
}

.circuit{
  display:none;
}

.hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:18px;
}

.avatar-wrap{
  position:relative;
  width:120px;
  height:120px;
  border-radius:var(--radius-lg);
  padding:2px;
  background:linear-gradient(135deg, var(--orange-1), var(--turquoise-1));
  z-index:2;
}

.avatar-glow{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:140px;
  height:140px;
  background:radial-gradient(circle, rgba(249,115,22,.4), rgba(20,184,166,.4));
  filter:blur(24px);
  opacity:.4;
  z-index:1;
}

.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius-md);
  display:block;
}

.name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:-0.02em;
  color:var(--cream);
  margin:20px 0 8px;
  text-shadow:0 0 20px rgba(45,212,191,.3);
}

.tagline{
  font-size:.9rem;
  line-height:1.6;
  color:#d4d4d8;
  max-width:340px;
  margin:0 auto;
  font-weight:400;
}

.quick-links{
  display:flex;
  gap:12px;
  margin-top:20px;
}

.quick-link{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.quick-link svg{
  width:20px;
  height:20px;
  color:var(--orange-1);
}

.quick-link:hover{
  transform:scale(1.05);
  background:var(--glass-hover);
  border-color:rgba(20,184,166,.6);
  box-shadow:0 0 16px rgba(20,184,166,.35);
}

.quick-link:active{transform:translateY(0);}

/* ---------- BIO ---------- */
.bio{
  padding:32px 24px 24px;
}

.bio p{
  font-size:.9rem;
  line-height:1.7;
  color:var(--cream);
  margin:0 0 16px;
  text-align:center;
}

.bio p:last-child{margin-bottom:0;}

/* ---------- LINKS ---------- */
.links{
  padding:24px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.link-box{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:16px;
  transition:all .2s ease;
  box-shadow:0 4px 6px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.08);
}

.link-box:hover{
  background:var(--glass-hover);
  border-color:rgba(20,184,166,.4);
  transform:scale(.98);
  box-shadow:0 8px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.12);
}

.link-box:active{transform:translateY(0);}

.link-logo{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:var(--radius-md);
  object-fit:contain;
  background:linear-gradient(135deg, rgba(249,115,22,.2), rgba(20,184,166,.2));
  padding:8px;
}

.link-title{
  flex:1;
  font-size:.95rem;
  font-weight:500;
  color:var(--cream);
  letter-spacing:-0.005em;
  font-family:var(--font-body);
}

.link-title em{
  display:block;
  font-style:normal;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.75rem;
  color:var(--muted);
  margin-top:2px;
}

.link-arrow{
  flex:0 0 auto;
  font-size:1.3rem;
  color:#71717a;
  line-height:1;
}

/* ---------- FOOTER ---------- */
.footer{
  padding:32px 24px 40px;
  text-align:center;
  border-top:1px solid var(--glass-border);
}

.footer p{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:.01em;
  word-break:break-word;
}

/* ---------- FOCUS STATES ---------- */
a:focus-visible{
  outline:2px solid var(--turquoise-2);
  outline-offset:2px;
  border-radius:12px;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .quick-link, .link-box{transition:none;}
  body::before, body::after{display:none;}
}

/* ---------- MOBILE RESPONSIVE ---------- */
@media (max-width:480px){
  .page{
    border-radius:0;
    border-left:none;
    border-right:none;
  }
  
  .hero{
    padding:24px 20px 20px;
  }
  
  .avatar-wrap{
    width:100px;
    height:100px;
  }
  
  .avatar-glow{
    width:120px;
    height:120px;
  }
  
  .name{
    font-size:1.4rem;
  }
  
  .bio{
    padding:24px 20px 20px;
  }
  
  .links{
    padding:20px 16px 24px;
  }
  
  .link-box{
    padding:14px;
  }
  
  .footer{
    padding:24px 20px 32px;
  }
}

/* ---------- SMALL SCREENS ---------- */
@media (max-width:360px){
  .name{font-size:1.3rem;}
  .link-box{padding:12px;}
  .quick-link{width:44px;height:44px;}
}