/* ─────────────────────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────────────────────── */
:root {
  --bg: #0F0F14;
  /* obsidian */
  --surface: #16161E;
  /* card */
  --surface-2: #1A1A24;
  /* card hover */
  --text: #F1F5F9;
  --muted: #A1B2C8;
  --border: #26262B;
  --border-strong: #2E2E34;
  --accent: #7C3AED;
  /* brand purple */
  --accent-2: #06B6D4;
  /* brand cyan */
  --accent-deep: #5B21B6;
  --accent-dim: rgba(124, 58, 237, 0.20);
  --gradient: linear-gradient(135deg, #7C3AED, #06B6D4);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

/* Blueprint grid — scoped to The Pitch + Process sections only */
#pitch::before,
#how::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0, 0 0;
  pointer-events: none;
  z-index: 0;
  animation: grid-drift 28s linear infinite;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 95%);
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 40px 40px, 40px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #pitch::before,
  #how::before {
    animation: none;
  }
}

#pitch,
#how {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

#pitch>.wrap,
#how>.wrap {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
}

/* Selection */
::selection {
  background: var(--accent);
  color: #000;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid var(--bg);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-deep);
}

html {
  scrollbar-color: var(--accent) var(--bg);
}

/* Type */
.mono {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.mono-accent {
  color: var(--accent);
}

h1,
h2,
h3,
h4 {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Layout */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 720px) {
  .wrap {
    padding: 0 24px;
  }
}

section {
  padding: 140px 0;
  border-top: 1px solid var(--border);
  position: relative;
}

@media (max-width: 720px) {
  section {
    padding: 88px 0;
  }
}

/* Scroll reveal — bidirectional unveil.
   Items lift, scale up, and resolve from a soft blur — like coming into
   focus. easeOutCubic distributes motion across the full duration
   (no aggressive front-load), so the unveil reads as deliberate. */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 825ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 825ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 825ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Reveal variants */
.reveal.reveal-right {
  transform: translateX(60px) scale(0.99);
}
.reveal.reveal-right.in {
  transform: translateX(0) scale(1);
}

.reveal.reveal-left {
  transform: translateX(-60px) scale(0.99);
}
.reveal.reveal-left.in {
  transform: translateX(0) scale(1);
}

.reveal.reveal-up {
  transform: translateY(54px) scale(0.985);
}
.reveal.reveal-up.in {
  transform: translateY(0) scale(1);
}

.reveal.reveal-down {
  transform: translateY(-54px) scale(0.985);
}
.reveal.reveal-down.in {
  transform: translateY(0) scale(1);
}

.reveal.reveal-inline {
  display: inline-block;
}

/* Watermark reveal — no opacity/transform, only color shifts from bg-matched
   to its final tone. Quick but smooth. */
.reveal.reveal-watermark {
  opacity: 1;
  transform: none;
  filter: none;
  transition: color 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal.in {
    transition-duration: 0.01ms;
    transform: none;
    filter: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Nav
   ───────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 40px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 36px;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 300ms var(--ease), backdrop-filter 300ms var(--ease), border-color 300ms var(--ease), padding 300ms var(--ease);
}

.nav.nav-centered {
  grid-template-columns: 1fr auto 1fr;
}

.nav.nav-centered .nav-links {
  justify-self: center;
}

.nav-brand {
  justify-self: start;
}

.nav-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-cta-faq {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 250ms var(--ease);
}


.nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gradient);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity 400ms var(--ease), transform 500ms var(--ease);
  pointer-events: none;
}

.nav.scrolled {
  padding: 12px 40px;
  background: rgba(10, 10, 11, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.nav.scrolled::after {
  opacity: 0.55;
  transform: scaleX(1);
}

@media (max-width: 720px) {
  .nav {
    padding: 16px 24px;
  }
  .nav.scrolled {
    padding: 10px 24px;
  }
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.nav-brand-mark {
  height: 24px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 250ms var(--ease);
}

.nav-brand:hover .nav-brand-mark {
  transform: translateY(-1px);
}

.nav-brand-wordmark {
  letter-spacing: 0.22em;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms var(--ease), max-width 400ms var(--ease), transform 400ms var(--ease);
}

.nav.scrolled .nav-brand-wordmark {
  opacity: 0;
  max-width: 0;
  transform: translateX(-6px);
}

.nav-brand-wordmark .tld {
  color: var(--muted);
  letter-spacing: 0.14em;
}

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}

.nav-link-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 240px;
  padding: 8px;
  margin-top: 14px;
  background: rgba(22, 22, 30, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 220ms var(--ease), transform 280ms var(--ease);
}

.nav-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav-menu::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: inherit;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-menu .nav-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: 6px;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}

.nav-menu .nav-menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-menu .nav-menu-item-arr {
  opacity: 0;
  transform: translate(-4px, 0);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  color: var(--accent);
}

.nav-menu .nav-menu-item:hover .nav-menu-item-arr {
  opacity: 1;
  transform: translate(0, 0);
}

.nav-links a {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 250ms var(--ease);
}

.nav-link:hover {
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 50%, #7C3AED 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: btn-gradient 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .nav-link:hover {
    animation: none;
  }
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-link::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  box-shadow: 0 0 8px var(--accent);
}

.nav-link.is-active {
  color: var(--text);
}

.nav-link.is-active::before {
  opacity: 1;
  transform: scale(1);
}

.nav-cta .contact-pill {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  transition: border-color 250ms var(--ease), background 250ms var(--ease), color 250ms var(--ease);
}

.nav-cta .contact-pill:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

@media (max-width: 720px) {
  .nav-links {
    gap: 18px;
  }

  .nav-links a:not(.contact-pill):not(.keep) {
    display: none;
  }

  .nav-cta-faq {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: 140px;
  padding-bottom: 120px;
  border-top: none;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: hero-canvas-in 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Page-load intro: the canvas resolves from a soft blur + slight zoom
   so it feels like the hill is materializing. Reveal items (eyebrow,
   h1, sub, CTAs) handle their own stagger via the .reveal observer. */
@keyframes hero-canvas-in {
  from {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-bottom {
  animation: hero-fade-up 900ms cubic-bezier(0.16, 1, 0.3, 1) 700ms both;
}

.marquee {
  animation: hero-fade-up 900ms cubic-bezier(0.16, 1, 0.3, 1) 850ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas,
  .hero-bottom,
  .marquee {
    animation: none;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-mark-top {
  position: absolute;
  top: 96px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

.hero-mark-top-img {
  display: block;
  height: 64px;
  -webkit-mask: url('/assets/labrynth-logo.png') center / contain no-repeat;
          mask: url('/assets/labrynth-logo.png') center / contain no-repeat;
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 50%, #7C3AED 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  opacity: 0.78;
  filter: drop-shadow(0 0 18px rgba(124, 58, 237, 0.32));
  animation: mark-float 6s ease-in-out infinite, btn-gradient 7s ease-in-out infinite;
}

@media (max-width: 720px) {
  .hero-mark-top {
    top: 80px;
  }
  .hero-mark-top-img {
    height: 52px;
    width: 57px;
  }
}

@keyframes mark-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark-top-img {
    animation: none;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(20, 20, 22, 0.55);
  backdrop-filter: blur(6px);
}

.hero-eyebrow .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.6);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(124, 58, 237, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}

.hero h1 {
  margin-top: 36px;
  font-size: clamp(56px, 10vw, 148px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.92;
  max-width: 14ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  margin-top: 32px;
  max-width: 620px;
  font-size: 20px;
  line-height: 1.5;
  color: #C9C9CF;
}

@media (max-width: 720px) {
  .hero-sub {
    font-size: 17px;
  }
}

.hero-ctas {
  margin-top: 48px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease);
  cursor: pointer;
}

.btn .arr {
  transition: transform 300ms var(--ease);
}

.btn:hover .arr {
  transform: translateX(4px);
}

.btn-primary {
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 50%, #7C3AED 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  color: #FFFFFF;
  box-shadow: 0 0 24px -4px rgba(124, 58, 237, 0.35);
  animation: btn-gradient 7s ease-in-out infinite;
}

.btn-primary:hover {
  opacity: 0.92;
  box-shadow: 0 0 36px -2px rgba(124, 58, 237, 0.55);
}

@keyframes btn-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    animation: none;
  }
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--text);
}

/* Hero bottom rail */
.hero-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 40px;
  pointer-events: none;
}

@media (max-width: 720px) {
  .hero-bottom {
    padding: 0 24px;
  }
}

.scroll-ind {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scroll-ind .bar {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--muted), transparent);
  animation: scrollbar 2.2s ease-in-out infinite;
}

@keyframes scrollbar {

  0%,
  100% {
    opacity: 0.3;
    transform: translateY(-4px);
  }

  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}

.hero-meta {
  text-align: right;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}

.hero-meta .dot {
  color: var(--accent);
}

/* Marquee */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: scroll-x 44s linear infinite;
  width: max-content;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 56px;
}

.marquee-track .sep {
  color: var(--accent);
  opacity: 0.7;
}

@keyframes scroll-x {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ─────────────────────────────────────────────────────────────
   Pitch (01/02/03)
   ───────────────────────────────────────────────────────────── */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 80px;
}

@media (max-width: 860px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }
}

.section-head h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.section-head .mono,
.about-body > .mono {
  color: var(--accent);
}

.section-head.section-head-stacked {
  grid-template-columns: 1fr;
  gap: 18px;
}

.section-head h2 em,
.about-body h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 50%, #7C3AED 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: btn-gradient 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .section-head h2 em,
  .about-body h2 em {
    animation: none;
  }
}

.section-head .lede {
  color: var(--muted);
  font-size: 17px;
  max-width: 52ch;
}

/* Keep "Three things your site should do." on one line and force the
   em onto its own line. Below 1100px we let it wrap naturally so the
   heading doesn't overflow the column. */
#pitch .section-head h2 .pitch-h2-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  #pitch .section-head h2 .pitch-h2-line {
    white-space: normal;
    display: inline;
  }
}

.pitch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

.pitch-grid>* {
  border-right: 1px solid var(--border);
  padding: 44px 32px;
}

.pitch-grid>*:last-child {
  border-right: none;
}

@media (max-width: 860px) {
  .pitch-grid {
    grid-template-columns: 1fr;
  }

  .pitch-grid>* {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 32px 0;
  }

  .pitch-grid>*:last-child {
    border-bottom: none;
  }
}

.pitch-cell .label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--muted);
}

.pitch-cell .num {
  color: var(--accent);
}

.pitch-cell h3 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.pitch-cell p {
  color: var(--muted);
  font-size: 15px;
  max-width: 36ch;
}

/* ─────────────────────────────────────────────────────────────
   Demo Hook (concentric arcs)
   ───────────────────────────────────────────────────────────── */
.demo {
  background: #17181D;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.demo .mono-accent {
  color: var(--accent);
}

.demo-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  position: relative;
  z-index: 2;
}

@media (max-width: 960px) {
  .demo-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.demo h2 {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.0;
}

.demo h2 em {
  font-style: italic;
  color: #E2E8F0;
  position: relative;
  display: inline-block;
}

.demo h2 em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #06B6D4, #7C3AED);
  border-radius: 2px;
  opacity: 0.9;
}

.demo-watermark {
  position: relative;
  display: inline-block;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  text-transform: uppercase;
  user-select: none;
  margin-bottom: 44px;
  color: #17181D;
}

.demo-watermark.in {
  color: #0C0D11;
}

.demo-watermark-shine {
  position: absolute;
  inset: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 50%, #7C3AED 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
}

.demo-watermark.in .demo-watermark-shine {
  opacity: 0.8;
  animation: btn-gradient 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .demo-watermark.in .demo-watermark-shine {
    animation: none;
  }
}

.demo-body {
  color: var(--muted);
  font-size: 17px;
  max-width: 52ch;
  line-height: 1.65;
}

.demo-body strong {
  color: var(--text);
  font-weight: 500;
}

.demo-steps {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.demo-step {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.demo-step .n {
  color: #CBD3E0;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  position: relative;
  padding-left: 14px;
}

.demo-step .n::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #06B6D4;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.55);
}

.demo-step .t {
  font-size: 17px;
  font-weight: 500;
}

.demo-step .time {
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.arcs {
  position: absolute;
  left: -40px;
  bottom: -80px;
  width: 520px;
  height: 520px;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}

.arcs-rotor {
  transform-origin: 0px 520px;
  transform-box: view-box;
  animation: arcs-rotor-spin 110s linear infinite;
}

@keyframes arcs-rotor-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 960px) {
  .arcs {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcs-rotor {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Work
   ───────────────────────────────────────────────────────────── */
#work {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
}

#work > .wrap {
  flex: 1 1 auto;
  width: 100%;
}

#work .section-head {
  margin-bottom: 56px;
}

#work .work-item {
  padding: 22px 8px;
}

@media (max-width: 720px) {
  #work {
    min-height: auto;
    padding: 88px 0;
  }
  #work .work-item {
    padding: 22px 0;
  }
}

.work-list {
  display: flex;
  flex-direction: column;
}

.work-item {
  display: grid;
  grid-template-columns: 80px max-content 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 36px 8px;
  border-top: 1px solid var(--border);
  position: relative;
  transition: background 300ms var(--ease);
  cursor: pointer;
}

.work-item:last-child {
  border-bottom: 1px solid var(--border);
}

.work-item:hover {
  background: rgba(255, 255, 255, 0.015);
}

.work-item .num {
  color: var(--muted);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.work-item .name {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 250ms var(--ease);
}

.work-item:hover .name {
  color: var(--accent);
}

.work-item .desc {
  color: var(--muted);
  font-size: 15px;
}

.work-item .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 250ms var(--ease);
}

.work-item:hover .cta {
  color: var(--text);
}

.work-item .cta .arr {
  transition: transform 300ms var(--ease);
}

.work-item:hover .cta .arr {
  transform: translateX(4px);
}

@media (max-width: 960px) {
  .work-item {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .work-item .desc,
  .work-item .cta {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Process
   ───────────────────────────────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.process-cell {
  padding: 40px 24px 48px;
  border-right: 1px solid var(--border);
  position: relative;
}

.process-cell:last-child {
  border-right: none;
}

.process-cell .n {
  color: var(--accent);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.process-cell h4 {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.process-cell p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-cell:nth-child(2n) {
    border-right: none;
  }

  .process-cell {
    border-bottom: 1px solid var(--border);
  }

  .process-cell:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-cell {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .process-cell:last-child {
    border-bottom: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   About
   ───────────────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: stretch;
}

.about-body {
  display: flex;
  flex-direction: column;
}

@media (max-width: 860px) {
  .about {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.about-photo {
  width: 100%;
  aspect-ratio: 4/5;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
}

.about-photo-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(10, 10, 11, 0.7);
  padding: 6px 10px;
  border: 1px solid var(--border);
}

.about-body h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.about-body p {
  margin-top: 20px;
  color: #B8B8BF;
  font-size: 16.5px;
  max-width: 52ch;
}

.about-facts {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
  .about-facts {
    grid-template-columns: 1fr;
  }
  .about-fact {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .about-fact:last-child {
    border-bottom: none;
  }
}

.about-fact {
  padding: 20px 16px 20px 0;
  border-right: 1px solid var(--border);
  padding-left: 16px;
}

.about-fact:first-child {
  padding-left: 0;
}

.about-fact:last-child {
  border-right: none;
}

.about-fact .k {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

.about-fact .v {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.about-fact .v em {
  font-style: normal;
  color: var(--accent);
}

.about-watermark {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--bg);
  user-select: none;
  text-transform: uppercase;
  text-align: right;
  margin-top: auto;
  padding-top: 36px;
}

.about-watermark.in {
  color: #1B1C22;
}

@media (max-width: 860px) {
  .about-watermark {
    margin-top: 36px;
    padding-top: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────── */

/* FAQ page (standalone): one-screen layout. No static line above the
   section — the only divider above the content is the nav's gradient
   underline, which already only appears on scroll. */
body.faq-page #faq {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 96px 0 64px;
  border-top: none;
}

body.faq-page #faq > .wrap {
  width: 100%;
}

body.faq-page #faq .section-head {
  margin-bottom: 40px;
}

body.faq-page #faq .faq-q {
  padding: 22px 0;
  font-size: 19px;
}

@media (max-width: 720px) {
  body.faq-page #faq {
    padding: 80px 0 40px;
    min-height: auto;
  }
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color 250ms var(--ease);
}

.faq-q:hover {
  color: var(--accent);
}

.faq-q .plus {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  transition: transform 400ms var(--ease);
}

.faq-q .plus::before,
.faq-q .plus::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.faq-q .plus::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
}

.faq-q .plus::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  transition: transform 400ms var(--ease);
}

.faq-item.open .faq-q .plus::after {
  transform: scaleY(0);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  transition: max-height 500ms var(--ease), padding 500ms var(--ease);
}

.faq-item.open .faq-a {
  max-height: 260px;
  padding: 0 0 28px;
}

.faq-a p {
  max-width: 62ch;
}

/* ─────────────────────────────────────────────────────────────
   Contact
   ───────────────────────────────────────────────────────────── */
.contact {
  background: #17181D;
  position: relative;
  overflow: hidden;
}

.contact .mono-accent {
  color: var(--accent);
}

.contact-dot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.contact-dot-purple {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22), transparent 65%);
}

.contact-dot-cyan {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.18), transparent 65%);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  position: relative;
  z-index: 2;
}

@media (max-width: 960px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.contact h2 {
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.contact h2 em {
  font-style: normal;
  color: #E2E8F0;
  position: relative;
  display: inline-block;
}

.contact h2 em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #06B6D4, #7C3AED);
  border-radius: 2px;
  opacity: 0.9;
}

.contact-sub {
  margin-top: 24px;
  color: var(--muted);
  font-size: 17px;
  max-width: 44ch;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea,
.field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  padding: 10px 0;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 250ms var(--ease);
  border-radius: 0;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--accent);
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 6px top 18px, right 1px top 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field .err {
  color: #FF5B1F;
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  margin-top: 4px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form .btn-primary {
  align-self: flex-start;
  margin-top: 12px;
  padding: 16px 24px;
}

.form-success {
  border: 1px solid var(--accent);
  background: rgba(124, 58, 237, 0.06);
  padding: 32px;
  color: var(--text);
}

.form-success .k {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.form-success h3 {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.form-success p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
footer {
  padding: 80px 0 40px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  align-items: start;
}

@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
  }

  .footer-big-mark {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }
}

@media (max-width: 520px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-big-mark {
    grid-column: auto;
  }
}

.footer-big-mark {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.footer-big-mark>svg,
.footer-big-mark .footer-mark {
  height: 56px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-big-mark .wm {
  font-family: 'Geist Mono', monospace;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

.footer-big-mark .tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 10px;
  display: inline-block;
  line-height: 1.4;
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 50%, #7C3AED 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: btn-gradient 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .footer-big-mark .tag {
    animation: none;
  }
}

.footer-col h5 {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.footer-col li {
  line-height: 1;
}

.footer-col a {
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  transition: color 250ms var(--ease);
  letter-spacing: -0.005em;
}

.footer-col a:hover {
  color: var(--accent);
}

footer .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

footer .row>div {
  white-space: nowrap;
}

footer .row a {
  color: var(--muted);
  transition: color 250ms var(--ease);
}

footer .row a:hover {
  color: var(--text);
}

@media (max-width: 720px) {
  footer .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Work-kind pill (used on Work list + case study nav)
   ───────────────────────────────────────────────────────────── */
.work-item .name {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  min-width: 0;
}

.work-item .name .name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.work-kind {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
}

.work-kind.is-live {
  color: #BFEFFF;
  border-color: rgba(6, 182, 212, 0.45);
  background: rgba(6, 182, 212, 0.08);
}

.work-kind.is-concept {
  color: #D8C7FF;
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.10);
}

/* ─────────────────────────────────────────────────────────────
   Case study page
   ───────────────────────────────────────────────────────────── */
.case-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  background: rgba(15, 15, 20, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: padding 300ms var(--ease), background 300ms var(--ease);
}

.case-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gradient);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity 400ms var(--ease), transform 500ms var(--ease);
  pointer-events: none;
}

.case-nav.scrolled {
  padding: 12px 40px;
  background: rgba(10, 10, 11, 0.78);
}

.case-nav.scrolled::after {
  opacity: 0.55;
  transform: scaleX(1);
}

.case-nav .nav-brand-wordmark {
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms var(--ease), max-width 400ms var(--ease), transform 400ms var(--ease);
}

.case-nav.scrolled .nav-brand-wordmark {
  opacity: 0;
  max-width: 0;
  transform: translateX(-6px);
}

@media (max-width: 720px) {
  .case-nav {
    padding: 14px 20px;
  }
  .case-nav.scrolled {
    padding: 10px 20px;
  }
}

.case-back {
  color: var(--text);
  white-space: nowrap;
  transition: color 250ms var(--ease);
}

.case-back:hover {
  color: var(--accent);
}

.case-nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Live / Concept pill — colored, with a pulsing dot. Lives next to the
   "Start a project" CTA in the case study top nav. */
.case-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  line-height: 1;
}

.case-kind::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.case-kind.is-live {
  color: #BFEFFF;
  border-color: rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.10);
}

.case-kind.is-live::before {
  background: #06B6D4;
  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6);
  animation: case-kind-pulse-live 2.2s infinite;
}

.case-kind.is-concept {
  color: #D8C7FF;
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(124, 58, 237, 0.12);
}

.case-kind.is-concept::before {
  background: #7C3AED;
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.6);
  animation: case-kind-pulse-concept 2.2s infinite;
}

@keyframes case-kind-pulse-live {
  0%   { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(6, 182, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}

@keyframes case-kind-pulse-concept {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .case-kind::before { animation: none; }
}

.case-nav-right .contact-pill {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  transition: border-color 250ms var(--ease), background 250ms var(--ease);
}

.case-nav-right .contact-pill:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

@media (max-width: 640px) {
  .case-nav-right .contact-pill {
    display: none;
  }
}

/* Header */
.case-head {
  padding: 88px 0 48px;
  border-top: none;
}

@media (max-width: 720px) {
  .case-head {
    padding: 72px 0 32px;
  }
}

.case-head .mono {
  margin-bottom: 24px;
}

.case-head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.case-head-eyebrow .mono {
  margin-bottom: 0;
}

.case-head h1 {
  font-size: clamp(40px, 8vw, 96px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  max-width: 16ch;
}

.case-tagline {
  margin-top: 24px;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--muted);
  max-width: 60ch;
}

/* Big preview */
.case-hero {
  padding: 24px 0 96px;
  border-top: none;
}

.case-hero-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(124, 58, 237, 0.12), transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(6, 182, 212, 0.08), transparent 60%),
    linear-gradient(135deg, #141420, #0D0D14);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.6);
}

.case-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}

.case-hero-placeholder .mono {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.18em;
}

.case-hero-placeholder p {
  color: var(--muted);
  font-size: 14px;
  max-width: 50ch;
}

.case-hero-placeholder code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Live demo iframe (browser-chrome bar + frame) */
.case-demo {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.6);
}

.case-demo-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #1A1A24, #14141C);
  border-bottom: 1px solid var(--border);
}

.case-demo-dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.case-demo-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2E2E34;
}

.case-demo-dots span:nth-child(1) { background: #3a3a44; }
.case-demo-dots span:nth-child(2) { background: #3a3a44; }
.case-demo-dots span:nth-child(3) { background: #3a3a44; }

.case-demo-url {
  flex: 1;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  max-width: 360px;
  margin: 0 auto;
  text-transform: lowercase;
}

.case-demo-open {
  flex-shrink: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.case-demo-open:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--accent);
}

.case-demo-open .arr {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s var(--ease);
}

.case-demo-open:hover .arr {
  transform: translate(2px, -2px);
}

.case-hero-frame-live {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #0B0B11;
}

.case-hero-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0B0B11;
}

@media (max-width: 720px) {
  .case-demo-url { display: none; }
}

/* Body — meta sidebar + write-up. Light slab so the writeup reads as
   editorial against the dark hero/header. Same on every case study page.
   Inset top shadow so the dark hero reads as casting onto the gray. */
.case-body {
  background: #ECEDF1;
  color: #0F0F14;
  padding: 80px 0 96px;
  border-top: none;
  box-shadow: inset 0 18px 28px -16px rgba(0, 0, 0, 0.5);
}

.case-body-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
}

@media (max-width: 960px) {
  .case-body-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.case-meta {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(15, 15, 20, 0.14);
}

.case-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(15, 15, 20, 0.12);
}

.case-meta-row .k {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 15, 20, 0.55);
}

.case-meta-row .v {
  font-size: 14px;
  color: #0F0F14;
}

.case-live-cta {
  margin-top: 24px;
  justify-content: center;
}

.case-write {
  max-width: 68ch;
}

.case-summary {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #0F0F14;
  margin-bottom: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(15, 15, 20, 0.14);
}

.case-section {
  margin-bottom: 48px;
}

.case-section:last-child {
  margin-bottom: 0;
}

.case-section h3 {
  font-size: 22px;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
  color: #0F0F14;
}

.case-section p {
  color: rgba(15, 15, 20, 0.7);
  font-size: 16px;
  line-height: 1.7;
}

/* Pager — sleek single-row strip. Just an arrow + project name on each side.
   The bottom edge is the brand gradient so the strip closes with a flourish
   before the footer. */
.case-pager {
  border-top: 1px solid var(--border);
  border-bottom: none;
  position: relative;
}

.case-pager::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gradient);
  pointer-events: none;
}

.case-pager .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 52px;
}

.case-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: color 220ms var(--ease);
}

.case-pager-link:hover {
  color: var(--text);
}

.case-pager-link .case-pager-name {
  font-weight: 500;
}

.case-pager-link .case-pager-arr {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform 380ms var(--ease);
}

.case-pager-link:not(.case-pager-next):hover .case-pager-arr {
  transform: translateX(-4px);
}

.case-pager-link.case-pager-next:hover .case-pager-arr {
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .case-pager .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }
  .case-pager-link {
    padding: 14px 0;
    justify-content: space-between;
  }
  .case-pager-link.case-pager-next {
    border-top: 1px solid var(--border);
  }
}

/* Cross-document view transitions — animates between case studies so it
   feels like the page is moving rather than reloading. Browsers without
   support fall back to the default instant navigation. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Case footer */
.case-footer {
  padding: 32px 0;
  color: var(--muted);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.case-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.case-footer a {
  color: var(--muted);
  transition: color 250ms var(--ease);
}

.case-footer a:hover {
  color: var(--text);
}

.case-footer .dot {
  margin: 0 12px;
  opacity: 0.5;
}

/* Not-found */
.case-not-found {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
}

.case-not-found h1 {
  font-size: clamp(40px, 6vw, 72px);
  margin: 16px 0 12px;
}

.case-not-found p {
  color: var(--muted);
  margin-bottom: 32px;
}