/* ----- Reset / base ----- */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root {
  /* Dark-only palette */
  --bg: #0a0a0a;
  --fg: #eaeaea;
  --muted: #a3a3a3;
  --primary: #ffffff;
  --accent: 248 80% 60%;
  --card: #0f1012;
  --border: #1b1e22;
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Background layers (dynamic but minimal) ----- */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: -1; }
.bg .grain {
  position: absolute; inset: -20%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.06%22/></svg>');
  mix-blend-mode: soft-light;
  animation: slow-pan 30s linear infinite;
}
.bg .radial {
  position: absolute; inset: -20%;
  background: radial-gradient(120vmax 80vmax at 70% 20%, hsl(var(--accent) / 0.14), transparent 50%),
              radial-gradient(120vmax 80vmax at 10% 80%, hsl(var(--accent) / 0.10), transparent 50%);
  filter: blur(36px);
  animation: float 24s ease-in-out infinite alternate;
}
.bg .grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(transparent 95%, var(--border) 95%),
                    linear-gradient(90deg, transparent 95%, var(--border) 95%);
  background-size: 28px 28px;
  mask-image: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0.35), transparent 70%);
  opacity: 0.35;
  animation: pulse 6s ease-in-out infinite;
}

@keyframes slow-pan { to { transform: translate3d(-10%, -10%, 0); } }
@keyframes float { to { transform: translate3d(2%, -2%, 0) scale(1.03); } }
@keyframes pulse { 0%,100% { opacity: 0.32 } 50% { opacity: 0.42 } }

/* ----- Layout ----- */
.wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 6vh 4vw;
}
.card {
  width: min(720px, 96vw);
  background: linear-gradient(180deg, color-mix(in oklab, var(--card), transparent 0%), color-mix(in oklab, var(--card), transparent 50%));
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(20px, 4vw, 40px);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hover/tilt affordance */
.card:hover { outline: 1px dashed color-mix(in oklab, var(--border), transparent 25%); }

.header h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 5.5vw, 44px);
  letter-spacing: 0.2px;
}
.header .role {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: clamp(14px, 3.8vw, 16px);
}

/* Contact grid: mobile-first vertical, desktop two-column labels */
.contact { display: grid; gap: 14px; margin-block: 16px 24px; }
.item { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; }
.label { color: var(--muted); letter-spacing: 0.4px; font-size: 12px; text-transform: uppercase; }
.value { color: var(--fg); text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--fg), transparent 70%); padding-bottom: 2px; word-break: break-word; }
.value:focus, .value:hover { border-bottom-style: solid; }

@media (min-width: 560px) {
  .item { grid-template-columns: 120px 1fr; gap: 12px; }
  .label { text-align: right; }
}

/* Actions: bigger tap targets */
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.btn {
  appearance: none;
  border: 1px solid var(--border);
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 650;
  text-decoration: none;
  color: var(--fg);
  background: color-mix(in oklab, var(--card), transparent 15%);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--fg), transparent 60%); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: conic-gradient(from 180deg at 50% 50%, hsl(var(--accent) / 0.18), transparent 40%, hsl(var(--accent) / 0.18));
  border-color: color-mix(in oklab, var(--fg), transparent 55%);
}
.btn.outline { background: transparent; }

.foot { margin-top: 22px; color: var(--muted); font-size: 13px; }

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg * { animation: none !important; }
  .card { transition: none; }
}