:root{
  --bg:#F3F5F9; --bg-alt:#E7ECF5; --panel:#FFFFFF; --line:#DCE2ED;
  --accent:#00C2FF; --accent-soft:#9FE6FF; --blue:#1565FF; --blue-deep:#0F2A78;
  --ink:#0A1128; --muted:#6B7280;
}
*{ box-sizing:border-box; }
html,body{ background:var(--bg); color:var(--ink); overflow-x:hidden; }
body{ font-family:'Inter', sans-serif; }
.font-display{ font-family:'Fraunces', serif; font-optical-sizing:auto; }
.font-mono{ font-family:'IBM Plex Mono', monospace; }
::selection{ background:var(--accent); color:#FFFFFF; }
.eyebrow{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.18em; text-transform:uppercase; font-size:0.72rem; color:var(--blue); }
.hero{
  background:
    radial-gradient(60% 50% at 78% 8%, rgba(21,101,255,0.10), transparent 60%),
    radial-gradient(45% 40% at 15% 20%, rgba(0,194,255,0.10), transparent 60%);
}
.avatar-lg{
  width:7rem; height:7rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--accent-soft); font-family:'IBM Plex Mono', monospace; font-size:1.8rem; letter-spacing:0.02em;
  box-shadow:0 0 0 6px var(--bg), 0 0 0 7px var(--line);
}
.card{ background:var(--panel); border:1px solid var(--line); border-radius:1.25rem; box-shadow:0 1px 2px rgba(21,23,28,0.03); }
.btn-primary{
  background:linear-gradient(135deg, var(--ink) 0%, var(--blue-deep) 130%); color:#FFFFFF; font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
  letter-spacing:0.04em; padding:0.9rem 1.7rem; border-radius:999px; transition:transform .25s ease, filter .25s ease;
  display:inline-flex; align-items:center; gap:0.6rem; box-shadow:0 1px 2px rgba(10,17,40,0.08), 0 12px 28px -8px rgba(21,101,255,0.35);
}
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-2px); }
.btn-ghost{
  border:1px solid var(--line); color:var(--ink); font-family:'IBM Plex Mono', monospace; font-size:0.8rem;
  padding:0.9rem 1.7rem; border-radius:999px; background:var(--panel); transition:border-color .25s ease, color .25s ease;
}
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
a:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }