:root {
  --about-black: #090909;
  --about-panel: #111111;
  --about-line: #303030;
  --about-signal: #fffa43;
  --about-white: #f7f7f2;
  --about-muted: #8d8d88;
  --about-sans: "Inter", Arial, sans-serif;
  --about-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--about-black); scroll-behavior: smooth; }
body.about-page { margin: 0; overflow-x: hidden; background: var(--about-black); color: var(--about-white); font-family: var(--about-sans); }
body.about-page, body.about-page a, body.about-page button { cursor: none; }
body.about-page img { display: block; max-width: 100%; }
body.about-page svg { display: block; }
a, button { font: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--about-signal); outline-offset: 4px; }
.about-wrap { width: min(1480px, calc(100% - 80px)); margin-inline: auto; }

.about-cursor { position: fixed; z-index: 1000; top: 0; left: 0; width: 46px; height: 46px; opacity: 0; pointer-events: none; border: 1px solid var(--about-signal); background: rgba(255,250,67,.04); transform: translate(-50%,-50%) rotate(45deg); transition: width .22s ease, height .22s ease, background .22s ease, opacity .18s ease; }
.about-cursor.is-visible { opacity: 1; }
.about-cursor.is-active { width: 68px; height: 68px; background: var(--about-signal); }
.about-cursor i::before, .about-cursor i::after { content: ""; position: absolute; top: 50%; left: 50%; background: #111; transform: translate(-50%,-50%); }
.about-cursor i::before { width: 8px; height: 1px; }
.about-cursor i::after { width: 1px; height: 8px; }
.about-cursor span { position: absolute; top: 50%; left: 52px; color: var(--about-signal); white-space: nowrap; font: 600 9px/1 var(--about-mono); letter-spacing: .12em; transform: translateY(-50%) rotate(-45deg); }

.about-header { position: fixed; z-index: 100; inset: 0 0 auto; height: 82px; padding: 0 40px; display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 30px; background: rgba(9,9,9,.86); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); font: 600 11px/1 var(--about-mono); letter-spacing: .13em; }
.about-header a { color: var(--about-white); text-decoration: none; }
.about-header > span { color: var(--about-signal); }
.about-progress { height: 1px; overflow: hidden; background: #353535; }
.about-progress i { display: block; width: 100%; height: 100%; background: var(--about-signal); transform: scaleX(0); transform-origin: left; }

.about-hero { min-height: 100svh; padding: 122px 0 0; overflow: hidden; border-bottom: 1px solid var(--about-line); }
.about-hero__top { padding-bottom: 17px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--about-line); color: #797974; font: 600 9px/1 var(--about-mono); letter-spacing: .13em; }
.about-hero__main { min-height: calc(100svh - 230px); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(390px,.8fr); gap: 70px; align-items: center; padding-block: 48px; }
.about-hero__copy { position: relative; z-index: 3; }
.about-hero h1 { max-width: 960px; margin: 0; font-size: clamp(66px,8.2vw,138px); line-height: .84; letter-spacing: -.075em; }
.about-hero__copy p { max-width: 700px; margin: 40px 0 0; color: #aaa9a4; font-size: clamp(18px,1.65vw,25px); line-height: 1.4; letter-spacing: -.025em; }
.about-hero__proof { --proof-x: 0px; --proof-y: 0px; position: relative; height: min(62vh,610px); perspective: 1200px; }
.about-hero__proof-card { position: absolute; inset: 5% 2% 8% 8%; overflow: hidden; background: #181818; border: 1px solid #3a3a3a; color: white; text-decoration: none; box-shadow: 0 35px 70px rgba(0,0,0,.45); transform: translate3d(calc((var(--proof-index) * -18px) + var(--proof-x)),calc((var(--proof-index) * 18px) + var(--proof-y)),calc(var(--proof-index) * -35px)) rotate(calc((var(--proof-index) - 1.5) * 2.4deg)); transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .3s ease, opacity .3s ease; }
.about-hero__proof-card:nth-child(1) { z-index: 4; }
.about-hero__proof-card:nth-child(2) { z-index: 3; }
.about-hero__proof-card:nth-child(3) { z-index: 2; }
.about-hero__proof-card:nth-child(4) { z-index: 1; }
.about-hero__proof-card:hover { z-index: 10; border-color: var(--about-signal); transform: translate3d(-34px,-18px,80px) rotate(-1deg); }
.about-hero__proof-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) brightness(.78); transition: filter .45s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.about-hero__proof-card:hover img { filter: none; transform: scale(1.025); }
.about-hero__proof-card span { position: absolute; right: 0; bottom: 0; left: 0; padding: 16px 18px; background: rgba(9,9,9,.86); border-top: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); font: 600 8px/1 var(--about-mono); letter-spacing: .11em; }
.about-role-rail { overflow: hidden; border-top: 1px solid var(--about-line); background: var(--about-signal); color: #090909; }
.about-role-rail__track { width: max-content; display: flex; animation: role-rail 30s linear infinite; will-change: transform; }
.about-role-rail__group { min-width: 100vw; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; }
.about-role-rail span { position: relative; padding: 17px 36px 16px; white-space: nowrap; font: 700 11px/1 var(--about-mono); letter-spacing: .1em; }
.about-role-rail span::after { content: "+"; position: absolute; right: -4px; }
@keyframes role-rail { to { transform: translate3d(-50%, 0, 0); } }

.about-capabilities { padding: 125px 0 155px; }
.about-section-head { margin-bottom: 50px; }
.about-section-head > span, .about-section-head > div > span, .about-method > div > span { color: var(--about-signal); font: 600 9px/1 var(--about-mono); letter-spacing: .14em; }
.about-section-head h2 { margin: 15px 0 0; font-size: clamp(54px,7vw,108px); line-height: .84; letter-spacing: -.075em; }
.about-section-head--split { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,420px); gap: 80px; align-items: end; }
.about-section-head--split > p { margin: 0; color: #8d8d88; font-size: 16px; line-height: 1.5; }
.about-section-head--split > a { justify-self: end; padding-bottom: 7px; border-bottom: 1px solid var(--about-signal); color: var(--about-signal); text-decoration: none; font: 600 9px/1 var(--about-mono); letter-spacing: .1em; }

.capability-list { border-top: 1px solid var(--about-line); }
.capability-row { min-height: 176px; padding: 26px 0; display: grid; grid-template-columns: 55px 78px minmax(260px,1.05fr) minmax(280px,.9fr) minmax(240px,.7fr); gap: 22px; align-items: center; border-bottom: 1px solid var(--about-line); transition: color .35s ease, background .35s ease, padding .35s ease; }
.about-motion .capability-row { opacity: 0; transform: translateY(36px); transition: color .35s ease, background .35s ease, padding .35s ease, opacity .55s ease var(--reveal-delay,0ms), transform .65s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms); }
.about-motion .capability-row.is-visible { opacity: 1; transform: none; }
.capability-row:hover, .capability-row:focus-visible { padding-inline: 24px; background: var(--about-signal); color: #090909; outline-offset: -2px; }
.capability-row__number { color: #686864; font: 600 8px/1 var(--about-mono); transition: color .3s ease; }
.capability-row:hover .capability-row__number, .capability-row:focus-visible .capability-row__number { color: #090909; }
.capability-row__icon { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #424242; transition: border-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.capability-row__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.capability-row:hover .capability-row__icon, .capability-row:focus-visible .capability-row__icon { border-color: #090909; background: #090909; color: var(--about-signal); transform: rotate(-6deg) scale(1.06); }
.capability-row h3 { margin: 0; font-size: clamp(31px,3.7vw,58px); line-height: .92; letter-spacing: -.06em; }
.capability-row p { margin: 0; color: #92928d; font-size: 14px; line-height: 1.55; transition: color .3s ease; }
.capability-row:hover p, .capability-row:focus-visible p { color: rgba(9,9,9,.7); }
.capability-row ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; list-style: none; }
.capability-row li { padding: 7px 9px; border: 1px solid #363636; border-radius: 999px; color: #858581; font: 600 7px/1 var(--about-mono); letter-spacing: .08em; text-transform: uppercase; transition: color .3s ease, border-color .3s ease; }
.capability-row:hover li, .capability-row:focus-visible li { border-color: rgba(9,9,9,.35); color: #090909; }

.about-work-proof { padding: 120px 0 155px; overflow: hidden; border-top: 1px solid var(--about-line); background: #0d0d0d; }
.about-proof-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--about-line); border-left: 1px solid var(--about-line); }
.proof-card { min-width: 0; padding: 28px; display: block; border-right: 1px solid var(--about-line); border-bottom: 1px solid var(--about-line); color: white; text-decoration: none; transition: background .35s ease; }
.about-motion .proof-card { opacity: 0; transform: translateY(42px); transition: background .35s ease, opacity .55s ease var(--reveal-delay,0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms); }
.about-motion .proof-card.is-visible { opacity: 1; transform: none; }
.proof-card:hover { background: #151515; }
.proof-card__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #171717; }
.proof-card__image::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.proof-card__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.65) brightness(.72); transform: scale(1.02); transition: filter .45s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.proof-card:nth-child(4) .proof-card__image img { object-fit: contain; background: #f2efe7; }
.proof-card:hover .proof-card__image img { filter: none; transform: scale(1.055); }
.proof-card__meta { padding-top: 20px; display: grid; grid-template-columns: 38px 1fr auto; gap: 15px; align-items: start; }
.proof-card__meta > span { padding-top: 5px; color: var(--about-signal); font: 600 8px/1 var(--about-mono); }
.proof-card h3 { margin: 0; font-size: clamp(28px,3vw,47px); line-height: .94; letter-spacing: -.055em; }
.proof-card p { margin: 8px 0 0; color: #858581; font-size: 13px; }
.proof-card__meta > i { color: var(--about-signal); font-style: normal; font-size: 23px; opacity: 0; transform: translate(-8px,8px); transition: opacity .25s ease, transform .25s ease; }
.proof-card:hover .proof-card__meta > i { opacity: 1; transform: none; }

.about-stack-grid { padding: 120px 0 155px; border-top: 1px solid var(--about-line); }
.tech-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--about-line); border-left: 1px solid var(--about-line); }
.tech-logo { --logo-x: 0deg; --logo-y: 0deg; --logo-reveal: 0px; min-height: 230px; padding: 26px; display: grid; grid-template-rows: 1fr auto auto; border-right: 1px solid var(--about-line); border-bottom: 1px solid var(--about-line); background: #111; transform: perspective(850px) translateY(var(--logo-reveal)) rotateX(var(--logo-x)) rotateY(var(--logo-y)); transition: color .35s ease, background .35s ease, transform .2s ease, opacity .55s ease var(--reveal-delay,0ms); }
.about-motion .tech-logo { --logo-reveal: 35px; opacity: 0; }
.about-motion .tech-logo.is-visible { --logo-reveal: 0px; opacity: 1; }
.tech-logo:hover { background: var(--brand); color: white; }
.tech-logo--dark:hover { color: #090909; }
.tech-logo > b { align-self: center; justify-self: center; color: var(--brand); font-size: clamp(30px,3vw,50px); letter-spacing: -.07em; transition: color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.tech-logo:hover > b { color: currentColor; transform: scale(1.1) rotate(-4deg); }
.tech-logo > span { font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.tech-logo > small { margin-top: 6px; color: #73736f; font: 600 7px/1 var(--about-mono); letter-spacing: .1em; transition: color .35s ease; }
.tech-logo:hover > small { color: currentColor; opacity: .68; }

.about-method { padding: 115px 0 140px; border-top: 1px solid var(--about-line); background: #0d0d0d; }
.about-method__steps { margin-top: 52px; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--about-line); border-left: 1px solid var(--about-line); }
.about-method__steps > div { min-height: 215px; padding: 24px; border-right: 1px solid var(--about-line); border-bottom: 1px solid var(--about-line); transition: color .3s ease, background .3s ease; }
.about-method__steps > div:hover { background: var(--about-signal); color: #090909; }
.about-method__steps b { color: var(--about-signal); font: 600 8px/1 var(--about-mono); }
.about-method__steps > div:hover b { color: #090909; }
.about-method__steps h3 { margin: 78px 0 0; font-size: 25px; letter-spacing: -.045em; }
.about-method__steps p { margin: 8px 0 0; color: #80807c; font-size: 12px; line-height: 1.45; }
.about-method__steps > div:hover p { color: rgba(9,9,9,.68); }

.about-close { min-height: 92svh; padding: 130px 0 60px; display: grid; align-items: center; background: var(--about-signal); color: #090909; }
.about-close span { font: 600 9px/1 var(--about-mono); letter-spacing: .14em; }
.about-close h2 { max-width: 1350px; margin: 35px 0 80px; font-size: clamp(75px,10vw,165px); line-height: .83; letter-spacing: -.08em; }
.about-close > div > div { display: flex; align-items: center; gap: 30px; }
.about-close a { color: #090909; text-decoration: none; }
.about-close a:first-child { position: relative; width: 180px; height: 180px; display: grid; place-items: center; border: 2px solid #090909; border-radius: 50%; text-align: center; font: 600 11px/1 var(--about-mono); letter-spacing: .1em; transition: background .25s ease, color .25s ease, transform .25s ease; }
.about-close a:first-child i { position: absolute; top: 32px; right: 32px; font-style: normal; font-size: 18px; }
.about-close a:first-child:hover { background: #090909; color: var(--about-signal); transform: rotate(-6deg); }
.about-close a:last-child { padding-bottom: 8px; border-bottom: 2px solid #090909; font: 600 10px/1 var(--about-mono); letter-spacing: .09em; }

@media (max-width: 1180px) {
  .about-wrap { width: calc(100% - 48px); }
  .about-hero__main { grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 42px; }
  .capability-row { grid-template-columns: 42px 70px minmax(230px,1fr) minmax(250px,.9fr); }
  .capability-row ul { grid-column: 3 / -1; }
  .tech-logo { min-height: 205px; }
}

@media (max-width: 900px) {
  body.about-page, body.about-page a, body.about-page button { cursor: auto; }
  .about-cursor { display: none; }
  .about-header { height: 70px; padding: 0 22px; grid-template-columns: auto 1fr auto auto; gap: 18px; }
  .about-header > a:nth-of-type(2) { display: none; }
  .about-hero { min-height: auto; padding-top: 104px; }
  .about-hero__main { min-height: auto; grid-template-columns: 1fr; gap: 55px; padding-block: 50px 65px; }
  .about-hero h1 { max-width: 800px; font-size: clamp(70px,13vw,120px); }
  .about-hero__proof { width: min(100%,600px); height: 520px; margin-inline: auto; }
  .about-section-head--split { grid-template-columns: 1fr; gap: 24px; }
  .about-section-head--split > a { justify-self: start; }
  .capability-row { min-height: 230px; grid-template-columns: 40px 65px 1fr; align-items: start; }
  .capability-row h3 { align-self: center; }
  .capability-row p { grid-column: 3; }
  .capability-row ul { grid-column: 3; }
  .about-proof-grid { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .about-method__steps { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 640px) {
  .about-wrap { width: calc(100% - 32px); }
  .about-header { font-size: 9px; letter-spacing: .07em; grid-template-columns: 1fr auto auto; }
  .about-header .about-progress, .about-header > span { display: none; }
  .about-hero__top { font-size: 7px; }
  .about-hero h1 { font-size: clamp(56px,17.5vw,86px); }
  .about-hero__copy p { margin-top: 28px; font-size: 17px; }
  .about-hero__proof { height: 390px; }
  .about-hero__proof-card { inset: 4% 3% 10% 9%; }
  .about-role-rail span { padding: 15px 27px 14px; font-size: 9px; }
  .about-capabilities, .about-work-proof, .about-stack-grid { padding: 86px 0 105px; }
  .about-section-head { margin-bottom: 34px; }
  .about-section-head h2 { font-size: 56px; }
  .capability-row { min-height: 290px; padding: 24px 0; grid-template-columns: 34px 58px 1fr; gap: 15px; }
  .capability-row:hover, .capability-row:focus-visible { padding-inline: 15px; }
  .capability-row__icon { width: 54px; height: 54px; }
  .capability-row h3 { font-size: 31px; }
  .capability-row p, .capability-row ul { grid-column: 2 / -1; }
  .proof-card { padding: 16px; }
  .proof-card__image { aspect-ratio: 4 / 3; }
  .tech-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tech-logo { min-height: 180px; padding: 18px; }
  .tech-logo > span { font-size: 13px; }
  .about-method { padding: 90px 0 105px; }
  .about-method__steps { grid-template-columns: 1fr; }
  .about-method__steps > div { min-height: 130px; }
  .about-method__steps h3 { margin-top: 28px; }
  .about-close { min-height: 760px; padding: 100px 0 45px; }
  .about-close h2 { margin-bottom: 65px; font-size: 61px; }
  .about-close a:first-child { width: 150px; height: 150px; }
}

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