/* Direction C: Object. Ink field, ultramarine glow, lime tags, heavy condensed grotesk. */
:root {
  --bg: #0b0a12;
  --bg-2: #14121e;
  --fg: #f3efe6;
  --muted: #aaa6b8;
  --line: rgba(243, 239, 230, 0.13);
  --accent: #d6ff3c;
  --violet: #5b3bff;
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-body: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: clamp(16px, 4vw, 40px);
}

body { font-stretch: 100%; }
.nav { border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, rgba(11, 10, 18, .6), transparent); }
.nav__brand { font-weight: 500; }
.nav__mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fg); color: var(--bg); font: 800 11px/1 var(--font-display); letter-spacing: 0; }
.nav__cta { background: var(--accent); color: var(--bg); border-radius: 999px; font-weight: 500; }
.nav__cta:hover { background: var(--fg); }

/* ---------- Pinned stage: hero + work ---------- */
.stage { position: relative; height: 460vh; }
/* Where the nav's Work link lands: the scroll point at which the first project panel is showing */
.stage__anchor { position: absolute; left: 0; top: 118vh; width: 1px; height: 1px; }
.reduced .stage__anchor, .no-3d .stage__anchor { top: 100vh; }
.stage__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 60%, #15112a, var(--bg) 70%); }

.glow {
  --gx: 50vw; --gy: 50vh; --go: 1; --gs: 1;
  position: absolute; left: 0; top: 0; width: 80vmax; height: 80vmax; pointer-events: none;
  transform: translate(calc(var(--gx) - 50%), calc(var(--gy) - 50%)) scale(var(--gs));
  background: radial-gradient(circle, rgba(104, 76, 255, 0.95) 0%, rgba(140, 70, 255, 0.45) 22%, rgba(91, 59, 255, 0.12) 42%, transparent 62%);
  opacity: var(--go); filter: blur(10px);
}

.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity 1.2s ease; }
.stage__canvas.is-ready { opacity: 1; }
.stage__fallback { display: none; position: absolute; left: 50%; top: 50%; width: min(56vw, 380px); transform: translate(-50%, -50%); z-index: 2; }
.no-3d .stage__fallback { display: block; }

.hero { --out: 0; position: absolute; inset: 0; }
.big {
  position: absolute; z-index: 1;
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase;
  font-size: clamp(84px, 15.5vw, 270px); line-height: 0.8; letter-spacing: -0.02em; color: var(--fg);
  opacity: calc(1 - var(--out));
}
.big--1 { left: var(--pad); top: 92px; transform: translateX(calc(var(--out) * -30vw)); }
.big--2 { right: var(--pad); top: 92px; transform: translateX(calc(var(--out) * 30vw)); }
.big--3 { right: var(--pad); bottom: 28px; transform: translateX(calc(var(--out) * 30vw)); }
.hero__copy { position: absolute; left: var(--pad); bottom: 32px; max-width: 290px; z-index: 3; line-height: 1.6; color: var(--fg); opacity: calc(1 - var(--out)); }

.tag {
  position: absolute; left: 0; top: 0; z-index: 4;
  padding: 6px 10px; background: var(--fg); color: var(--bg);
  font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; will-change: transform, opacity;
}
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.leaders line { stroke: var(--fg); stroke-width: 1; opacity: 0; }

.panels { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(440px, 38vw); height: 400px; z-index: 4; pointer-events: none; opacity: 0; }
.panels__kicker { display: flex; justify-content: space-between; color: var(--accent); font-weight: 500; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.panels__count { color: var(--muted); }
.panels__count b { color: var(--fg); font-weight: 500; }
.panel { position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: column; gap: 16px; opacity: 0; }
.panel__no { font: 500 12px/1 var(--font-mono); color: var(--accent); }
.panel h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 76px); line-height: .88; letter-spacing: -0.01em; }
.panel p { color: var(--muted); font-size: 17px; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; }
.chips li:first-child { border-color: var(--accent); color: var(--accent); }

.fg { position: absolute; z-index: 5; pointer-events: none; transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); }
.fg--1 { left: -6vw; bottom: -14vh; width: 34vw; max-width: 460px; filter: blur(9px); opacity: .55; }
.fg--2 { right: 8vw; top: 18vh; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3efe6, #8e7bff 45%, #2a1f6b 80%); filter: blur(14px); opacity: .7; }
.scrollcue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4; color: var(--muted); opacity: calc(1 - var(--out, 0)); }

@media (max-width: 760px) {
  .stage { height: 420vh; }
  .big { font-size: 25vw; }
  .big--1, .big--2 { top: 84px; }
  .big--3 { bottom: 150px; }
  .hero__copy { right: var(--pad); max-width: none; bottom: 76px; }
  .panels { top: auto; bottom: 64px; transform: none; width: auto; right: var(--pad); height: 290px; }
  .panels__kicker { margin-bottom: 0; }
  .panel { top: 52px; gap: 12px; }
  .panel h3 { font-size: 40px; }
  .panel p { font-size: 15px; }
  .fg--1 { width: 60vw; }
  .scrollcue { display: none; }
}
.reduced .stage, .no-3d .stage { height: auto; }
.reduced .stage__sticky, .no-3d .stage__sticky { position: relative; height: auto; min-height: 100vh; overflow: visible; }
.reduced .hero, .no-3d .hero { position: relative; height: 100vh; height: 100svh; }
.reduced .panels, .no-3d .panels { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; opacity: 1; padding: 96px var(--pad); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.reduced .panels__kicker, .no-3d .panels__kicker { grid-column: 1 / -1; }
.reduced .panel, .no-3d .panel { position: relative; top: auto; opacity: 1; }
.reduced .stage__canvas { position: absolute; height: 100vh; }
@media (max-width: 760px) { .reduced .panels, .no-3d .panels { grid-template-columns: 1fr; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; background: var(--accent); color: var(--bg); }
.marquee__inner { display: flex; gap: 40px; width: max-content; animation: marquee 28s linear infinite; }
.marquee span { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: clamp(32px, 4vw, 56px); text-transform: uppercase; line-height: 1; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- About ---------- */
.about { padding: clamp(110px, 14vw, 200px) var(--pad); max-width: 1360px; margin: 0 auto; }
.about__title { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(48px, 8vw, 140px); line-height: .86; letter-spacing: -0.015em; max-width: 12ch; }
.about__title em { font-style: normal; color: var(--accent); }
.about__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); max-width: 1000px; margin-left: auto; }
.about__cols p { font-size: clamp(17px, 1.45vw, 21px); color: var(--muted); line-height: 1.55; }
.about__more { margin-top: 48px; max-width: 1000px; margin-left: auto; }
@media (max-width: 760px) { .about__cols { grid-template-columns: 1fr; } }

/* ---------- Capabilities ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 var(--pad) clamp(100px, 12vw, 180px); max-width: 1360px; margin: 0 auto; }
.cap { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; min-height: 300px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .3s; }
.cap::after { content: ''; position: absolute; right: -40%; bottom: -60%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(91, 59, 255, .45), transparent 65%); opacity: .5; transition: opacity .4s; pointer-events: none; }
.cap:hover { border-color: rgba(214, 255, 60, .5); transform: translateY(-4px); }
.cap:hover::after { opacity: 1; }
.cap__tag { color: var(--accent); }
.cap h3 { margin-top: auto; font-family: var(--font-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(30px, 2.8vw, 42px); line-height: .92; }
.cap p { color: var(--muted); }
@media (max-width: 860px) { .caps { grid-template-columns: 1fr; } .cap { min-height: 220px; } }

/* ---------- Contact ---------- */
.contact { position: relative; padding: clamp(120px, 15vw, 220px) var(--pad); text-align: center; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(91, 59, 255, .55), transparent 70%); }
.contact__title { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(56px, 12vw, 210px); line-height: .84; letter-spacing: -0.02em; }
.contact__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 36px; margin-top: 48px; }
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 30px; border-radius: 999px; background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 700; font-size: 18px; }
.btn .todo { color: var(--bg); }
.btn:hover { background: var(--fg); }
.link { text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); }
.link:hover { border-color: var(--accent); }

.footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px var(--pad) 84px; border-top: 1px solid var(--line); color: var(--muted); }