:root{
  --bg: #121110;
  --surface: #1B1A17;
  --ink: #EFEBE3;
  --muted: #8C877D;
  --accent: #FF6A3D;
  --accent2: #48C9B0;
  --line: #2D2B26;
  --line-soft: #2D2B2680;

  --light-bg: #EFEBE3;
  --light-ink: #16150F;

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --gutter: clamp(24px, 6vw, 72px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
::selection{ background: var(--accent); color: var(--bg); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Nav ---------- */
header.nav{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  background: rgba(18,17,16,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav .name{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.nav ul{ list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.nav a{
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
}
.nav a::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:hover::after{ transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: clamp(64px, 12vw, 120px) var(--gutter) clamp(72px, 10vw, 110px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-grid{
  position: absolute;
  top: 0; right: -6%;
  width: min(620px, 60vw);
  height: min(620px, 60vw);
  opacity: 0.55;
  pointer-events: none;
}
.hero-inner{ position: relative; max-width: 720px; }
.hero .eyebrow{ margin-bottom: 18px; }
.hero h1{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(42px, 7.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.hero .role{
  font-family: var(--mono);
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--accent2);
  letter-spacing: 0.04em;
  margin: 0 0 26px;
}
.hero p{
  max-width: 58ch;
  font-size: clamp(15px, 1.