.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

main {
  position: relative;
  z-index: 1;
}

/* One canvas, one background — sections are transparent and the body-fixed
   atmosphere shows through the entire page. Only content moves. */
section {
  position: relative;
  padding-block: var(--space-10);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  max-width: 760px;
}

.section-head .mono {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.section-head .mono::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--border);
}

.section-head h2 {
  max-width: 18ch;
}

.section-head p {
  color: var(--text-muted);
  font-size: var(--fs-18);
  max-width: 60ch;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  padding: var(--space-5) clamp(20px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  mix-blend-mode: normal;
  transform: translateZ(0);
}

.site-header > * {
  pointer-events: auto;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.site-header .brand .logo {
  width: 74px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-header nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-header nav a {
  color: var(--text-muted);
  position: relative;
  transition: color var(--dur-base) var(--ease-out-expo);
}

.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 200ms var(--ease-out-expo);
}

.site-header nav a:hover {
  color: var(--text);
}

.site-header nav a:hover::after {
  width: 100%;
}

@media (max-width: 900px) {
  .site-header {
    padding: var(--space-4) clamp(16px, 4vw, 32px);
  }
  .site-header .brand {
    font-size: var(--fs-18);
    gap: var(--space-2);
    letter-spacing: 0.14em;
  }
  .site-header .brand .logo {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 768px) {
  .site-header nav {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-header .brand .logo {
    width: 36px;
    height: 36px;
  }
}

/* Hero (asymmetric, left-anchored) */
.hero {
  min-height: 100dvh;
  padding-top: clamp(120px, 16vh, 200px);
  padding-bottom: var(--space-10);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  position: relative;
  isolation: isolate;
  border-top: 0 !important;
}

/* Hero container narrows on desktop so the asymmetric grid reads tucked-in.
   On tablet/mobile we let it use the full container width — 71vw would
   leave roughly 240px of usable content on a phone, which crushes the
   headline and the CTA row. */
.hero-container {
  max-width: 71vw;
}

/* Below 900px the hero collapses to a single column (see .hero-inner rule)
   and the hero-ide aside drops below the headline — at that point the 71vw
   cap just chokes the content, so let it grow to the full container. */
@media (max-width: 900px) {
  .hero-container {
    max-width: var(--container);
  }
}

/* Atmosphere canvas — fixed to viewport, sits behind everything. nodes.js
   continues to animate it; the pointer-active fields and scroll-driven
   field-strength still work because the canvas covers the whole viewport. */
.atmosphere-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Subtle vignette over the canvas to anchor content; sits between the canvas
   and the page so content reads cleanly. */
.atmosphere-canvas::after {
  content: none;
}

body {
  position: relative;
}

main {
  position: relative;
  z-index: 1;
  background: transparent;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-4);
  align-items: start;
}

.hero-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 50ch;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-eyebrow .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse-ring 2.4s var(--ease-in-out) infinite;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 173, 254, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(34, 173, 254, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 173, 254, 0); }
}

.hero h1 {
  font-size: clamp(3.25rem, 8.4vw, 7rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-weight: 500;
}

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

.hero-lede {
  color: var(--text-muted);
  font-size: clamp(var(--fs-16), 1.4vw, var(--fs-22));
  line-height: 1.4;
  max-width: 38ch;
  font-weight: 400;
}

.hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.hero-meta {
  align-self: end;
  display: grid;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  border-left: 0;
  padding-left: 0;
}

.hero-meta .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

.hero-meta .label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero-meta .value {
  font-size: var(--fs-16);
  color: var(--text);
}

/* Desktop pushes content to the bottom of a 100dvh grid (align-content:
   end) so the headline rises out of the tech-orb space above it. On phones
   and portrait tablets that math leaves ~300-450px of empty space above
   the eyebrow — the user lands and sees nothing but background. Reset
   alignment to start (content sits just below the fixed header) and trim
   the floor so the next section peeks in below. Applied at ≤1100px to
   also catch iPad Pro 12.9" portrait (1024px wide). */
@media (max-width: 1100px) {
  .hero {
    align-content: start;
    min-height: 80dvh;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .hero-stack {
    max-width: none;
  }
  .hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: clamp(100px, 14vh, 140px);
  }
  .hero-ctas {
    width: 100%;
    gap: var(--space-2);
  }
  .hero-ctas .magnetic {
    width: 100%;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* Trust strip */
.trust {
  padding-block: var(--space-7);
  overflow: hidden;
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
}

.service-card {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-card.wide {
  grid-column: span 7;
}

.service-card.narrow {
  grid-column: span 5;
}

@media (max-width: 900px) {
  .service-card,
  .service-card.wide,
  .service-card.narrow {
    grid-column: span 12;
  }
}

@media (max-width: 600px) {
  .services-grid {
    gap: var(--space-4);
  }
  .service-card {
    padding: var(--space-5);
  }
}

/* Process */
.process {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-8);
  position: relative;
}

.process-rail {
  position: sticky;
  top: 12vh;
  align-self: start;
  height: 60vh;
  padding-left: var(--space-4);
}

.process-rail::before,
.process-rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}

.process-rail::before {
  background: var(--hairline);
}

.process-rail::after {
  background: var(--accent);
  height: calc(var(--p, 0) * 100%);
  transition: height 80ms linear;
  box-shadow: 0 0 12px rgba(34, 173, 254, 0.45);
}

.process-steps {
  display: grid;
  gap: var(--space-7);
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: baseline;
}

.process-step .num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--text-dim);
  min-width: 3ch;
}

.process-step h3 {
  font-size: var(--fs-28);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.process-step p {
  color: var(--text-muted);
  font-size: var(--fs-16);
  max-width: 56ch;
}

@media (max-width: 900px) {
  .process {
    grid-template-columns: 1fr;
  }
  .process-rail {
    display: none;
  }
}

/* Work — horizontal sticky-pin scroll. Section's height is set by JS so
   1px of vertical scroll equals 1px of horizontal track translation. */
section[data-section="hscroll"] {
  padding: 0;
}

.hscroll-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.hscroll-head {
  flex: 0 0 auto;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 48px) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}

.hscroll-head h2 {
  max-width: 22ch;
}

.hscroll-head p {
  color: var(--text-muted);
  font-size: var(--fs-18);
  max-width: 60ch;
}

.hscroll-track-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 0;
  padding-bottom: clamp(56px, 8vh, 110px);
}

.hscroll-track {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  padding-inline: clamp(20px, 4vw, 48px);
  will-change: transform;
}

.hscroll-rail {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(18px, 2.6vh, 32px);
  height: 1px;
  background: var(--hairline);
  z-index: 2;
  pointer-events: none;
}

.hscroll-rail-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--hscroll-progress, 0));
  box-shadow: 0 0 12px rgba(34, 173, 254, 0.5);
}

@media (max-width: 768px) {
  section[data-section="hscroll"] {
    padding-block: var(--space-9);
    height: auto !important;
  }
  .hscroll-pin {
    position: static;
    height: auto;
    overflow: visible;
  }
  .hscroll-head {
    padding: 0 clamp(20px, 4vw, 48px) var(--space-6);
  }
  .hscroll-track-wrap {
    overflow: visible;
    min-height: auto;
  }
  .hscroll-track {
    flex-direction: column;
    transform: none !important;
    padding-inline: clamp(20px, 4vw, 48px);
  }
  .hscroll-rail {
    display: none;
  }
}

/* Why TAGS — pinned IDE. The section is tall so .ide (sticky inside)
   stays in view while the editor's pages cross-fade. Each of pages 1..5
   gets ~30vh of pin scroll (~3 wheel notches). */
section[data-section="ide"] {
  height: clamp(320vh, 360vh, 400vh);
  padding-block: var(--space-9) 0;
}

section[data-section="ide"] .container {
  height: 100%;
}

@media (max-width: 900px) {
  section[data-section="ide"] {
    height: auto;
    padding-block: var(--space-10);
  }
}

/* Why TAGS — bento with varied sizing (legacy, unused) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-3);
  overflow: hidden;
}

.why-tile {
  background: var(--bg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 220px;
  position: relative;
  isolation: isolate;
}

.why-tile.span-3 { grid-column: span 3; }
.why-tile.span-2 { grid-column: span 2; }
.why-tile.span-4 { grid-column: span 4; }

@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
  .why-tile.span-3,
  .why-tile.span-2,
  .why-tile.span-4 {
    grid-column: span 1;
  }
  .why-tile {
    min-height: auto;
    padding: var(--space-6);
  }
}

/* Global */
.global {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: center;
}

.global-statement h2 {
  font-size: clamp(var(--fs-28), 3.4vw, var(--fs-48));
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.global-statement p {
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* Globe — canvas-rendered 3D sphere with city dots. The container is square
   so the canvas reads cleanly; the overlay sits in the top-left corner. */
.global-globe {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}

.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.globe-overlay {
  position: absolute;
  top: clamp(8px, 2vh, 20px);
  left: clamp(8px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-mono);
  z-index: 1;
  pointer-events: none;
}

.globe-overlay__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.globe-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4cd964;
  box-shadow: 0 0 10px rgba(76, 217, 100, 0.7);
  animation: globe-status-blink 2.4s ease-in-out infinite;
}

@keyframes globe-status-blink {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

.globe-overlay__count {
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.globe-overlay__count [data-globe-online] {
  color: #4cd964;
  font-weight: 500;
}

.globe-overlay__count [data-globe-total] {
  color: var(--text-muted);
}

.globe-overlay__sep {
  color: var(--text-dim);
}

.globe-overlay__suffix {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: 4px;
}

.globe-overlay__zones {
  display: grid;
  gap: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.globe-zone {
  display: grid;
  grid-template-columns: 44px auto;
  gap: 8px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.globe-zone span:first-child {
  color: var(--text-muted);
}

.globe-zone__name {
  color: var(--text-dim);
}

.global-map {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-3);
  overflow: hidden;
  background-image:
    radial-gradient(rgba(122, 155, 194, 0.18) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: center;
  border: 1px solid var(--hairline);
}

.global-map .pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.global-map .pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.6;
  animation: pulse-out 3.6s var(--ease-out-expo) infinite;
}

.global-map .pulse:nth-child(2)::after { animation-delay: 0.6s; }
.global-map .pulse:nth-child(3)::after { animation-delay: 1.2s; }

.global-map .label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
}

@keyframes pulse-out {
  0%   { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(4.5); opacity: 0; }
}

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

/* Contact */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-8);
}

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

/* Footer */
.site-footer {
  padding: var(--space-9) 0 var(--space-7);
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-meta {
    flex-direction: column;
    align-items: start;
    gap: var(--space-3);
  }
}