/* =============================================================================
   home.css — page-specific styles for /home.html ONLY.
   -----------------------------------------------------------------------------
   Anything in here is layout/decoration unique to the homepage hero, marquee,
   capabilities grid, work cards, process strip, and tweaks panel. Patterns
   reused on more than one page belong in shared.css or components.css.

   Tokens come from shared.css (--bg-0/1/2, --fg-0/1, --accent, --r-md, etc.).
   ============================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 96px;
  overflow: hidden;
}
.hero-canvas {
  position: absolute;
  inset: 0 0 0 35%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}
.hero-canvas canvas { width: 100%; height: 100%; display: block; }

.hero-glow {
  position: absolute;
  inset: 20% 20% 20% 20%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 80px var(--pad-x) 120px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 80px;
  min-height: calc(100vh - 96px);
}
.hero-headline {
  max-width: none;
  position: relative;
  z-index: 3;
}
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: end;
  text-align: right;
}
.hero-meta .lede { text-align: right; }

.hero-marquee {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  background: color-mix(in oklab, var(--bg-0) 70%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-marquee-track {
  display: inline-flex;
  gap: 60px;
  padding: 18px 0;
  animation: marquee 40s linear infinite;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.hero-marquee-track span { display: inline-flex; align-items: center; gap: 60px; }
.hero-marquee-track span::after { content: '◆'; color: var(--accent); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Stats strip
   ---------------------------------------------------------------------------
   IMPORTANT: components.css also defines a `.stat` (BEM-style with
   `.stat__value`/`.stat__label`) used by the design-system showcase. Both
   files load on home.html. To prevent the components.css rule (which has
   only `.stat`) from clobbering this hero-strip variant, every rule below
   is scoped with `.stats >` so the home tile wins without `!important`.
   The components-style stat keeps working anywhere outside `.stats`. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats > .stat {
  padding: 48px 32px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.stats > .stat:last-child { border-right: 0; }
.stat-num {
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Services grid
   ---------------------------------------------------------------------------
   Same scoping rationale as .stat: components.css defines a generic
   `.service-card` for the design-system showcase. Both files load on
   home.html, so we scope the home capabilities tile under
   `.services-grid >` to keep the home-specific 12-col span layout. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.services-grid > .service-card {
  grid-column: span 4;
  min-height: 360px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.services-grid > .service-card.wide { grid-column: span 8; }
.service-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-2);
}
.service-icon {
  width: 64px; height: 64px;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.service-icon img { width: 40px; height: 40px; object-fit: contain; }

/* Process timeline */
.process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.process-step:last-child { border-bottom: 1px solid var(--line); }
.process-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.process-step h3 { margin-bottom: 12px; }
.process-step p { color: var(--fg-1); max-width: 50ch; }
.process-sticky {
  position: sticky;
  top: 120px;
}

/* Featured work */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.work-card {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-1);
  cursor: pointer;
}
.work-card-bg {
  position: absolute; inset: 0;
  background-size: 40px 40px;
  background-image:
    linear-gradient(45deg, var(--line) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line) 25%, transparent 25%);
  opacity: 0.5;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .work-card-bg { transform: scale(1.05); }
.work-card-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px;
  background: linear-gradient(0deg, color-mix(in oklab, var(--bg-0) 85%, transparent), transparent);
}
.work-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.work-card h3 { font-size: 28px; }

/* CTA strip */
.cta {
  padding: 120px var(--pad-x);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center top, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%);
}
.cta-canvas {
  position: absolute; inset: 0;
  opacity: 0.6;
  pointer-events: none;
}

/* Variation B specific (mono dev style) */
.var-mono .display { font-family: 'JetBrains Mono', monospace; font-weight: 500; letter-spacing: -0.02em; }
.var-mono .hero-content { grid-template-columns: 1fr; padding-bottom: 80px; }
.var-mono .hero-meta { align-items: start; text-align: left; }
.var-mono .hero-meta .lede { text-align: left; }

/* Tablet */
@media (max-width: 1100px) {
  .hero-content { gap: 48px; padding-top: 56px; padding-bottom: 80px; }
  .hero-canvas { inset: 0 0 0 25%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > .stat:nth-child(2n) { border-right: 0; }
  .stats > .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .services-grid > .service-card { grid-column: span 6; }
  .services-grid > .service-card.wide { grid-column: span 12; }
}

/* Mobile */
@media (max-width: 900px) {
  .hero { padding-top: 80px; }
  .hero-canvas { inset: 0; opacity: 0.55; }
  .hero-content { grid-template-columns: 1fr; gap: 40px; padding: 32px var(--pad-x) 80px; min-height: auto; }
  .hero-meta { align-items: start; text-align: left; gap: 20px; }
  .hero-meta .lede { text-align: left; }
  .hero-meta > div { width: 100%; }
  .hero-marquee-track { gap: 32px; padding: 14px 0; font-size: 11px; }
  .hero-marquee-track span { gap: 32px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > .stat { padding: 32px 20px; border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .stats > .stat:nth-child(2n) { border-right: 0; }
  .services-grid { gap: 16px; }
  .services-grid > .service-card, .services-grid > .service-card.wide { grid-column: span 12; min-height: auto; padding: 24px; }
  .process { grid-template-columns: 1fr; gap: 24px; }
  .process-sticky { position: static; }
  .process-step { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .work-grid { grid-template-columns: 1fr; gap: 16px; }
  .work-card { aspect-ratio: 16/10; }
  .cta { padding: 80px var(--pad-x); }
}

/* Mobile portrait */
@media (max-width: 600px) {
  .hero-content { padding-bottom: 56px; }
  .stats { grid-template-columns: 1fr; }
  .stats > .stat { border-bottom: 1px solid var(--line); padding: 24px 16px; }
  .stats > .stat:last-child { border-bottom: 0; }
}