@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono/RobotoMono-Regular.woff2') format('woff2'),
       url('/fonts/roboto-mono/RobotoMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono/RobotoMono-Bold.woff2') format('woff2'),
       url('/fonts/roboto-mono/RobotoMono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Roboto Mono', monospace;
}

:root{
  --bg-color:#181820;
  --text-color:#fff;
  --accent:#39d353;
  --subtle:#b0b0b0;
  --card-bg: rgba(8,8,10,0.55);
  --card-border: rgba(57,211,83,0.18);
  --glass-blur: 6px;
  --card-radius:18px;
}

/* Reset + base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Roboto Mono', monospace;
  color:var(--text-color);
  background: linear-gradient(to bottom, #000000, var(--bg-color));
  overflow-x:hidden;
  line-height:1.5;
  position:relative;
}

/* Header + hero (kept mostly from original) */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 50px; z-index:2; position:relative;
}
header h1{font-weight:700;font-size:1.4rem;letter-spacing:1px}
nav a{color:var(--text-color);text-decoration:none;margin-left:22px;font-weight:500;transition:color .2s}
nav a:hover{color:var(--accent)}

/* Hero */
.hero{
  text-align:center;padding:100px 20px 50px;z-index:2;position:relative;
}
.hero h2{font-size:2.4rem;font-weight:700;margin-bottom:14px}
.hero h2 .accent{color:var(--accent)}
.hero p{color:var(--subtle);font-size:1.05rem;margin-bottom:18px}
.hero button{
  background:transparent;border:2px solid var(--accent);color:var(--accent);
  padding:10px 22px;font-weight:700;border-radius:6px;cursor:pointer;transition:all .2s
}
.hero button:hover{background:var(--accent);color:var(--bg-color)}

/* Canvas sits behind everything */
#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------- PROFILE CARD (middle-right) ---------- */
.profile-card{
  position: absolute;
  right: clamp(14px, 6vw, 70px);
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  max-width: 36vw;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1.5px solid var(--card-border);
  padding: 26px;
  z-index: 3;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(var(--glass-blur));
  color:var(--text-color);
}

/* Rounded top highlight (like your image) */
.profile-avatar{
  width: 110px;
  height: 110px;
  border-radius: 999px;
  margin: 0 auto 12px;
  display:block;
  overflow:hidden;
  border: 3px solid rgba(57,211,83,0.98);
  padding:4px;
  background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 14px rgba(57,211,83,0.04) inset;
}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:999px}

/* Name + meta */
.profile-name{text-align:center;font-size:1.9rem;font-weight:700;margin-top:6px}
.profile-quote{text-align:center;color:var(--subtle);font-size:.92rem;margin:8px 0 10px;opacity:.95}
.profile-meta{display:flex;justify-content:center;gap:18px;color:var(--subtle);font-size:.9rem;margin-bottom:14px}

/* Action buttons (categories) */
.profile-actions{display:flex;flex-direction:column;gap:12px;margin:10px 6px 16px}
.action-btn{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;
  border:1.6px solid rgba(57,211,83,0.18);background:transparent;color:var(--text-color);
  text-decoration:none;font-weight:600;font-size:.98rem;cursor:pointer;transition:transform .15s,background .15s;
}
.action-btn svg{width:18px;height:18px;flex:0 0 18px;opacity:.95}
.action-btn:hover{transform:translateY(-4px);background:rgba(57,211,83,0.03)}

/* Social icons row */
.socials {
  display: flex;
  flex-wrap: wrap;            /* Allow multiple rows */
  justify-content: center;
  gap: 14px 18px;             /* vertical gap 14px, horizontal 18px */
  margin-top: 12px;           /* spacing from profile actions */
}

.socials a {
  width: 48px;                /* bigger icons */
  height: 48px;
  border-radius: 999px;       /* circular border */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.6px solid rgba(57,211,83,0.18);  /* restore the green border */
  background: transparent;    /* keep transparent background */
  color: var(--accent);       /* set icons to green */
  text-decoration: none;
  transition: transform .12s, background .12s;
}

.socials a:hover {
  transform: translateY(-3px);
  background: rgba(57,211,83,0.03);
}

.socials a svg {
  width: 22px;                /* make the SVG slightly bigger */
  height: 22px;
  stroke: currentColor;       /* ensures SVG inherits the a's color */
  fill: none;                 /* keep fill transparent unless needed */
}

.action-btn::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: no-repeat center/contain url(attr(data-icon));
  margin-right: 12px; /* space between icon and text */
  flex-shrink: 0;
}


/* SMALL helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Responsive: stack on small screens ---------- */
@media (max-width:780px){
  .profile-card{
    position:static;
    transform:none;
    margin:18px auto;
    width:92%;
    max-width:520px;
  }
  header{padding:16px 20px}
  .hero{padding:80px 14px 40px}
}