:root {
  --ink: #1a1826;
  --muted: #5e5b78;
  --canvas: #fafaf8;
  --line: rgba(26, 24, 38, 0.12);
  --violet: #6b5dd4;
  --violet-text: #5b4cc9;
  --mint: #16a778;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: Manrope, "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
  --page-gutter: clamp(1.5rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
}

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

button { font: inherit; }

:focus-visible {
  outline: 3px solid rgba(107, 93, 212, 0.55);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: 1rem;
  padding: .65rem .85rem;
  color: #fff;
  background: var(--ink);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.page-shell { position: relative; overflow: clip; background: var(--canvas); isolation: isolate; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid transparent;
  background: rgba(250, 250, 248, 0);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled {
  border-color: rgba(26, 24, 38, .08);
  background: rgba(250, 250, 248, .96);
  box-shadow: 0 8px 24px rgba(26, 24, 38, .04);
}

.wordmark { color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }

.site-nav { display: flex; gap: clamp(.85rem, 1.8vw, 1.5rem); align-items: center; }

.site-nav a, .eyebrow, .project-meta, .section-label, .site-footer span, .contact__location {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.6;
  text-transform: uppercase;
}

.site-nav a { color: var(--muted); text-decoration: none; transition: color 160ms ease; }
.site-nav a:hover { color: var(--violet-text); }

.section { position: relative; padding: 92px var(--page-gutter); }
.section + .section { border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(107, 93, 212, .52), rgba(45, 212, 168, .42), rgba(107, 93, 212, .52), transparent) 1; }

.hero { min-height: calc(100svh - 54px); display: grid; align-items: end; padding-top: 100px; padding-bottom: clamp(5rem, 10vh, 8.5rem); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 88% 15%, rgba(124, 110, 245, .19), transparent 31%), radial-gradient(circle at 48% 84%, rgba(45, 212, 168, .15), transparent 25%); }

.hero__noise, .section--texture::before, .project-card::after, .projects::before, .contact::before {
  position: absolute;
  content: "";
  pointer-events: none;
  opacity: .34;
  background-image: url("./assets/figma-noise.png");
  background-size: 180px;
  mix-blend-mode: multiply;
}

.hero__noise { inset: 0; opacity: .12; }
.hero__content { max-width: 1280px; }
.eyebrow { margin: 0; color: var(--muted); }

h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--display); color: var(--ink); letter-spacing: -.05em; }
h1 { max-width: 760px; margin: 24px 0 10px; font-size: clamp(3.45rem, 7.2vw, 5.1rem); font-weight: 800; line-height: .98; }
h2 { max-width: 900px; margin: 22px 0 40px; font-size: clamp(2.15rem, 4.35vw, 3.25rem); font-weight: 800; line-height: 1.05; }
h2 em { color: var(--muted); font-weight: 400; font-style: normal; }
.accent-rule { width: 40px; height: 2px; margin: 0 0 18px; background: var(--violet); }

.hero__intro { max-width: 1160px; margin-bottom: 15px; font-size: clamp(.9rem, 1.2vw, 1rem); line-height: 1.78; }
.hero__intro strong { font-weight: 600; }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag-list--hero { margin: 18px 0 28px; }
.tag { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 10px; border-radius: 8px; font-family: var(--mono); font-size: 8px; letter-spacing: .11em; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.tag--violet { color: #5b4cc9; background: rgba(107, 93, 212, .09); }
.tag--blue { color: #2563eb; background: rgba(59, 130, 246, .12); }
.tag--mint { color: #0a7a5f; background: rgba(26, 175, 139, .09); }
.tag--green { color: #16874a; background: rgba(34, 197, 94, .12); }
.tag--amber { color: #946005; background: rgba(245, 158, 11, .12); }
.tag--orange { color: #a84e0d; background: rgba(249, 115, 22, .12); }
.tag--rose { color: #dc2642; background: rgba(244, 63, 94, .12); }
.tag--neutral { color: #5c5874; background: rgba(160, 156, 184, .12); }

.hero__actions, .contact__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 9px 19px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.22); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; line-height: 1; text-decoration: none; text-transform: uppercase; transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.button:hover { border-color: rgba(107, 93, 212, .34); color: var(--violet-text); transform: translateY(-2px); box-shadow: 0 7px 14px rgba(26,24,38,.07); }
.button--primary { border-color: var(--violet); color: #fff; background: var(--violet); }
.button--primary:hover { color: #fff; background: #5e4fca; }

.section-label { display: flex; align-items: center; gap: 12px; color: var(--violet-text); }
.section-label span:last-child { width: min(100%, 400px); height: 1px; background: rgba(26, 24, 38, .08); }

.section--texture { background: #f8f7fb; }
.section--texture::before { inset: 0; opacity: .18; }
.experience > *, .contact > *, .work > *, .projects > * { position: relative; }
.experience h2 { max-width: 1050px; }
.experience__note { max-width: 632px; padding: 20px 24px; border-left: 2px solid var(--violet); background: rgba(107, 93, 212, .035); }
.experience__note .eyebrow { margin-bottom: 18px; color: var(--violet-text); }
.experience__note p:not(.eyebrow) { margin-bottom: 12px; font-size: 12px; line-height: 1.74; }
.experience__note p:last-child { margin-bottom: 0; }
.company-list { margin-top: 23px; }
.company-list .eyebrow { margin-bottom: 10px; }
.company-list ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }

.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.featured-grid .project-card:last-child { grid-column: 1; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.project-card { position: relative; display: flex; min-height: 100%; flex-direction: column; overflow: hidden; padding: clamp(1.5rem, 3.5vw, 3rem); border: 1px solid rgba(26,24,38,.08); border-radius: 16px; background: rgba(255,255,255,.78); box-shadow: 0 1px 1px rgba(26,24,38,.01); transition: transform 210ms cubic-bezier(.2,.8,.2,1), box-shadow 210ms ease, border-color 210ms ease; }
.project-card::after { right: 0; bottom: 0; left: 0; height: 100%; z-index: 0; opacity: .17; }
.project-card > * { position: relative; z-index: 1; }
.project-card:hover { border-color: rgba(107,93,212,.22); box-shadow: 0 17px 32px rgba(33, 26, 64, .1); transform: translateY(-5px); }
.project-card:focus-within { border-color: rgba(107,93,212,.42); box-shadow: 0 13px 28px rgba(33, 26, 64, .12); }
.project-card__bar { position: absolute; top: -1px; right: -1px; left: -1px; height: 4px; }
.project-card__bar--mint { background: linear-gradient(90deg, #6b5dd4, #2dd4a8); }
.project-card__bar--blue { background: linear-gradient(90deg, #3b82f6, #6b5dd4); }
.project-card__bar--green { background: linear-gradient(90deg, #22c55e, #2dd4a8); }
.project-card__bar--orange { background: linear-gradient(90deg, #f59e0b, #f97316); }
.project-card__bar--rose { background: linear-gradient(90deg, #f43f5e, #8b5cf6); }
.project-meta { margin-bottom: 18px; color: var(--muted); }
.project-preview { display: grid; min-height: 116px; place-items: center; margin-bottom: 14px; border-radius: 8px; color: #9b98ad; background: rgba(26,24,38,.035); font-family: var(--mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.tag-list--small { gap: 4px; margin-bottom: 15px; overflow: hidden; flex-wrap: nowrap; }
.tag-list--small .tag { min-height: 19px; padding: 4px 8px; border-radius: 6px; font-size: 7px; }
.project-title { margin: 0 0 10px; padding: 0; border: 0; color: var(--ink); background: none; font-family: var(--display); font-size: clamp(1.12rem, 1.7vw, 1.55rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.16; text-align: left; cursor: pointer; transition: color 160ms ease; }
.project-title:hover { color: var(--violet-text); }
.project-card > p:not(.project-meta) { margin-bottom: 18px; font-size: 12px; line-height: 1.6; }
.inline-link { width: 100%; min-height: 37px; margin-top: auto; padding: 10px 14px; border: 1px solid rgba(124,110,245,.25); border-radius: 10px; color: var(--violet-text); background: rgba(255,255,255,.45); font-family: var(--mono); font-size: 8px; letter-spacing: .13em; text-align: center; text-transform: uppercase; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease, border-color 160ms ease; }
.inline-link:hover { border-color: rgba(107, 93, 212, .55); background: #fff; transform: translateY(-1px); }

.project-card--supporting { padding: 27px; min-height: 288px; }
.project-card--supporting .project-meta { min-height: 25px; margin-bottom: 11px; font-size: 7px; }
.project-card--supporting .project-title { font-size: 20px; }
.project-card--supporting > p:not(.project-meta) { font-size: 11px; }

.projects { background: rgba(255,255,255,.27); }
.projects::before { inset: 0; opacity: .15; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; background: rgba(255,255,255,.3); }
.contact::before { inset: 0; opacity: .15; }
.contact h2 { margin-bottom: 0; }
.contact__details { padding-top: 38px; }
.contact__email { display: inline-block; margin: 8px 0 22px; color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 600; letter-spacing: -.03em; text-decoration: none; }
.contact__email:hover { color: var(--violet-text); }
.contact__location { margin: 24px 0 0; color: var(--muted); }

.site-footer { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 var(--page-gutter); border-top: 1px solid var(--line); }
.site-footer a { color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.site-footer span { color: var(--muted); }

.ambient { position: absolute; z-index: -1; width: 600px; height: 600px; border-radius: 50%; pointer-events: none; filter: blur(2px); transform: translate3d(0, 0, 0); will-change: transform; }
.ambient--violet { top: 1300px; left: -180px; background: radial-gradient(circle, rgba(124,110,245,.11), transparent 70%); }
.ambient--mint { top: 2200px; right: -220px; background: radial-gradient(circle, rgba(45,212,168,.11), transparent 70%); }
.ambient--rose { top: 3380px; left: -130px; background: radial-gradient(circle, rgba(244,63,94,.07), transparent 68%); }
.ambient--amber { top: 4210px; right: -90px; background: radial-gradient(circle, rgba(245,158,11,.07), transparent 70%); }

.project-dialog { width: min(600px, calc(100vw - 32px)); max-height: min(650px, calc(100svh - 32px)); padding: 0; border: 1px solid rgba(107,93,212,.21); border-radius: 18px; color: var(--ink); background: rgba(250,250,248,.99); box-shadow: 0 30px 80px rgba(26,24,38,.26); }
.project-dialog::backdrop { background: rgba(26,24,38,.26); backdrop-filter: blur(3px); }
.dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.dialog__close { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.dialog__close:hover { color: var(--violet-text); border-color: rgba(107,93,212,.38); }
.dialog__content { padding: 28px 28px 32px; }
.dialog__content h2 { margin: 10px 0 15px; font-size: clamp(1.85rem, 5vw, 2.5rem); }
.dialog__content > p:not(.project-meta):not(.eyebrow) { font-size: 15px; line-height: 1.75; }
.dialog__divider { height: 1px; margin: 22px 0; background: var(--line); }
.dialog__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.dialog__tags li { padding: 4px 8px; border-radius: 6px; color: var(--violet-text); background: rgba(107,93,212,.08); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 760px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 14px; padding-bottom: 13px; }
  .site-nav { width: 100%; gap: 13px; overflow-x: auto; padding-bottom: 1px; }
  .site-nav a { flex: 0 0 auto; }
  .hero { min-height: calc(100svh - 86px); padding-top: 70px; }
  .section { padding-top: 66px; padding-bottom: 66px; }
  h1 { font-size: clamp(3.25rem, 15vw, 4.8rem); }
  h2 { margin-bottom: 28px; }
  .featured-grid, .project-grid, .contact { grid-template-columns: 1fr; }
  .featured-grid .project-card:last-child { grid-column: auto; }
  .contact { gap: 10px; }
  .contact__details { padding-top: 0; }
  .site-footer { min-height: 72px; }
  .site-footer span { font-size: 7px; letter-spacing: .08em; }
}

@media (max-width: 430px) {
  .tag-list--hero .tag:nth-child(n+7) { display: none; }
  .project-card, .project-card--supporting { padding: 23px; }
  .company-list ul { gap: 7px 15px; }
  .site-footer { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ambient { transform: none; }
}