:root {
  --ink: #050608;
  --surface: #0a0d11;
  --surface-raised: #10151b;
  --paper: #f3f1eb;
  --muted: #9ca4ab;
  --ocean: #071b2b;
  --cyan: #50b6c8;
  --cyan-bright: #8ce7f0;
  --red: #b82f32;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --shell: min(91vw, 1600px);
  --header-height: 88px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 220ms;
  --duration: 600ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 5px; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 1000; padding: .8rem 1rem;
  transform: translateY(-160%); background: var(--paper); color: var(--ink);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; padding-inline: 4.5vw;
  border-bottom: 1px solid transparent; transition: background var(--duration-fast), border-color var(--duration-fast), height var(--duration-fast);
}
.site-header.is-scrolled { height: 72px; background: rgba(5, 6, 8, .82); border-color: rgba(255,255,255,.09); backdrop-filter: blur(18px); }
.brand { position: relative; z-index: 102; display: inline-flex; align-items: center; gap: .75rem; }
.brand__mark { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.brand__name { display: grid; line-height: 1; letter-spacing: .08em; }
.brand__name strong { font: 700 .78rem/1 var(--font-display); }
.brand__name small { margin-top: .35rem; color: var(--muted); font-size: .48rem; letter-spacing: .21em; }
.site-nav__inner { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 2rem); }
.nav-link { position: relative; padding-block: .7rem; color: rgba(243,241,235,.72); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: color var(--duration-fast); }
.nav-link::after { content: ""; position: absolute; inset: auto 0 3px; height: 1px; transform: scaleX(0); transform-origin: right; background: var(--cyan); transition: transform var(--duration-fast); }
.nav-link:hover, .nav-link.is-active { color: var(--paper); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; }

.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; padding: .9rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), border-color var(--duration-fast); }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--paper); color: var(--ink); }
.button--primary:hover { background: var(--cyan-bright); }
.button--ghost { border-color: rgba(255,255,255,.3); background: rgba(5,6,8,.18); backdrop-filter: blur(10px); }
.button--ghost:hover, .button--outline:hover { border-color: var(--cyan); background: rgba(80,182,200,.1); }
.button--compact { min-height: 42px; padding: .65rem 1rem; font-size: .65rem; }
.button--outline { border-color: rgba(255,255,255,.26); }
.play-icon { font-size: .62rem; }

.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--ocean); }
.hero__media, .hero__scrim { position: absolute; inset: 0; }
.hero__media { z-index: -3; overflow: hidden; background: radial-gradient(circle at 67% 20%, #174d5a 0, #092737 30%, #05080c 75%); }
.hero__ocean { position: absolute; inset: -8%; background: linear-gradient(150deg, rgba(80,182,200,.16), transparent 38%), radial-gradient(ellipse at 72% 48%, rgba(30,91,107,.42), transparent 35%); filter: saturate(.8); }
.hero__light { position: absolute; top: -28%; left: 53%; width: 40vw; height: 95vh; transform: rotate(13deg); opacity: .3; background: linear-gradient(90deg, transparent, rgba(154,235,239,.26), transparent); filter: blur(35px); }
.hero__structure { position: absolute; right: 3%; bottom: -12%; width: min(48vw, 760px); aspect-ratio: .9; opacity: .68; background: linear-gradient(155deg, transparent 0 38%, rgba(2,5,7,.86) 39%), linear-gradient(25deg, transparent 0 53%, rgba(2,5,7,.96) 54%); clip-path: polygon(23% 0, 100% 13%, 92% 100%, 0 100%, 8% 29%); filter: drop-shadow(-28px -12px 45px rgba(0,0,0,.75)); }
.hero__structure::after { content: ""; position: absolute; inset: 31% 17% 19% 31%; border: 1px solid rgba(80,182,200,.16); box-shadow: 0 0 50px rgba(80,182,200,.08) inset; }
.hero__particles { position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(circle, rgba(203,248,250,.8) 0 1px, transparent 1.5px); background-size: 97px 83px; mask-image: linear-gradient(to right, transparent, #000 45%); }
.hero__scrim { z-index: -2; background: linear-gradient(90deg, rgba(5,6,8,.96) 0%, rgba(5,6,8,.66) 43%, rgba(5,6,8,.18) 75%), linear-gradient(0deg, rgba(5,6,8,.88), transparent 42%); }
.hero__content { min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-block: calc(var(--header-height) + 4rem) clamp(7rem, 13vh, 10rem); }
.eyebrow { margin: 0 0 1.2rem; display: flex; align-items: center; gap: .8rem; color: var(--cyan-bright); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.hero__title { max-width: 11ch; margin: 0; font: 600 clamp(3.65rem, 10.7vw, 10.5rem)/.78 var(--font-display); letter-spacing: -.075em; text-transform: uppercase; }
.hero__title span { color: transparent; -webkit-text-stroke: 1px rgba(243,241,235,.68); }
.hero__tagline { margin: 1.7rem 0 .7rem; font: 500 clamp(1.2rem, 2vw, 1.8rem)/1.2 var(--font-display); }
.hero__description { max-width: 580px; margin: 0; color: #bac2c7; font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height: 1.75; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__meta { position: absolute; right: 4.5vw; bottom: 2.6rem; display: grid; gap: .4rem; color: rgba(243,241,235,.47); font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-align: right; text-transform: uppercase; }
.scroll-cue { position: absolute; left: 4.5vw; bottom: 2.2rem; display: flex; align-items: center; gap: .8rem; color: rgba(243,241,235,.58); font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue i { width: 38px; height: 1px; overflow: hidden; background: rgba(255,255,255,.2); }
.scroll-cue i::after { content: ""; display: block; width: 50%; height: 100%; background: var(--cyan); }
.phase-anchor { height: 1px; background: var(--ink); scroll-margin-top: 72px; }
.section-index { margin: 0; display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.section-index span { color: var(--cyan-bright); }
.section-kicker { margin: 0; color: rgba(243,241,235,.38); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.depth-feature { position: relative; min-height: 100vh; padding-block: clamp(6.5rem, 12vw, 12rem); overflow: hidden; isolation: isolate; scroll-margin-top: 70px; background: linear-gradient(180deg, #050608, #08131b 35%, #070a0e 100%); }
.depth-feature__atmosphere { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 8% 38%, rgba(17,72,87,.3), transparent 35%), radial-gradient(ellipse at 90% 72%, rgba(80,182,200,.08), transparent 30%); }
.depth-feature__atmosphere::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgba(115,199,210,.07) 10px); mask-image: linear-gradient(90deg, #000, transparent 60%); }
.depth-feature__heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.depth-feature__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-items: center; gap: clamp(3rem, 7vw, 9rem); }
.depth-visual { position: relative; min-height: clamp(540px, 70vw, 880px); overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #06151e; box-shadow: 0 35px 90px rgba(0,0,0,.42); }
.depth-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,15,20,.1), transparent 45%, rgba(3,6,8,.92)), linear-gradient(90deg, rgba(3,6,8,.72), transparent 46%); }
.depth-visual__water { position: absolute; inset: -8%; background: radial-gradient(ellipse at 64% 17%, rgba(120,219,228,.38), transparent 27%), linear-gradient(150deg, #123d49, #061822 44%, #020507 88%); }
.depth-visual__water::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: radial-gradient(circle, rgba(212,249,250,.85) 0 1px, transparent 1.5px); background-size: 83px 71px; }
.depth-visual__beam { position: absolute; top: -18%; left: 47%; width: 48%; height: 80%; opacity: .27; transform: rotate(12deg); background: linear-gradient(90deg, transparent, rgba(174,238,239,.42), transparent); filter: blur(26px); }
.depth-visual__station { position: absolute; right: -5%; bottom: 5%; width: 72%; height: 62%; transform: perspective(800px) rotateY(-8deg); background: linear-gradient(145deg, #061016 0 17%, #010304 18% 68%, #081117 69%); clip-path: polygon(19% 0, 100% 13%, 93% 100%, 0 100%, 7% 28%); filter: drop-shadow(-35px -18px 38px rgba(0,0,0,.9)); }
.depth-visual__station::before { content: ""; position: absolute; inset: 12% 10% 12% 18%; border: 1px solid rgba(108,197,210,.13); background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(116,201,214,.06) 18.4% 18.8%); }
.depth-visual__station i { position: absolute; z-index: 1; width: 7%; aspect-ratio: 1; border-radius: 50%; background: #8bdce5; box-shadow: 0 0 14px #68c6d2, 0 0 38px rgba(80,182,200,.55); }
.depth-visual__station i:nth-child(1) { left: 29%; top: 33%; }
.depth-visual__station i:nth-child(2) { left: 51%; top: 35%; opacity: .55; }
.depth-visual__station i:nth-child(3) { left: 73%; top: 38%; opacity: .28; }
.depth-visual__signal { position: absolute; z-index: 2; inset: 1.5rem 1.5rem auto; display: flex; justify-content: space-between; color: rgba(214,244,245,.52); font: 600 .55rem/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.depth-visual__warning { position: absolute; z-index: 2; left: 1.5rem; bottom: 1.5rem; margin: 0; display: flex; align-items: center; gap: .6rem; color: rgba(243,241,235,.74); font-size: .58rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.depth-visual__warning span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 15px rgba(184,47,50,.85); }
.depth-copy { padding-block: 2rem; }
.depth-copy h2 { margin: 0; font: 600 clamp(3.2rem, 6.2vw, 7.4rem)/.9 var(--font-display); letter-spacing: -.065em; text-transform: uppercase; }
.depth-copy__lead { max-width: 610px; margin: 2rem 0 1.1rem; color: var(--paper); font: 500 clamp(1.08rem, 1.55vw, 1.4rem)/1.55 var(--font-display); }
.depth-copy__body { max-width: 610px; margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.8; }
.project-specs { margin: 2.8rem 0 0; border-top: 1px solid rgba(255,255,255,.11); }
.project-specs div { display: grid; grid-template-columns: minmax(90px, .36fr) 1fr; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid rgba(255,255,255,.11); }
.project-specs dt { color: rgba(243,241,235,.48); font-size: .61rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.project-specs dd { margin: 0; color: #d7dcdd; font-size: .8rem; line-height: 1.55; }
.depth-copy__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.2rem; }
.text-link { display: inline-flex; align-items: center; gap: .75rem; padding-block: .8rem; border-bottom: 1px solid rgba(255,255,255,.25); font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color var(--duration-fast), border-color var(--duration-fast); }
.text-link:hover { color: var(--cyan-bright); border-color: var(--cyan); }
.depth-feature__quote { width: var(--shell); margin: clamp(5rem, 10vw, 10rem) auto -2vw; color: rgba(243,241,235,.035); font: 600 clamp(4rem, 11vw, 12rem)/.8 var(--font-display); letter-spacing: -.075em; white-space: nowrap; text-transform: uppercase; }

.projects { position: relative; padding-block: clamp(7rem, 12vw, 13rem); scroll-margin-top: 70px; background: var(--surface); }
.projects::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
.projects__intro { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 3rem; margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.projects__intro h2 { margin: 1.5rem 0 0; font: 600 clamp(3.5rem, 7.5vw, 8.4rem)/.84 var(--font-display); letter-spacing: -.07em; text-transform: uppercase; }
.projects__intro h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(243,241,235,.55); }
.projects__intro > p { max-width: 460px; margin: 0 0 .5rem auto; color: var(--muted); font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.8; }
.projects-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.project-card { position: relative; min-width: 0; overflow: hidden; background: #080a0c; }
.project-card--flagship { grid-column: 1 / span 8; aspect-ratio: 16 / 10; }
.project-card--nela { grid-column: 9 / -1; aspect-ratio: 4 / 5; }
.project-card--combat { grid-column: 1 / span 5; aspect-ratio: 4 / 5; margin-top: clamp(0rem, 4vw, 5rem); }
.project-card--toy { grid-column: 6 / -1; aspect-ratio: 16 / 10; margin-top: clamp(0rem, 4vw, 5rem); }
.project-card__link { position: absolute; inset: 0; display: block; overflow: hidden; }
.project-card__media { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1s var(--ease-out), filter .7s var(--ease-out); }
.project-card--nela .project-card__media { object-position: center; }
.project-card--combat .project-card__media { object-position: 51% center; }
.project-card--toy .project-card__media { object-position: 57% center; }
.project-card__media--depth { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 64% 21%, #2a7786 0, #0b2935 30%, #030709 76%); }
.project-card__media--depth::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(circle, rgba(222,250,251,.8) 0 1px, transparent 1.5px); background-size: 79px 67px; }
.project-card__depth-light { position: absolute; top: -34%; left: 49%; width: 38%; height: 110%; transform: rotate(13deg); opacity: .3; background: linear-gradient(90deg, transparent, rgba(155,229,235,.5), transparent); filter: blur(24px); }
.project-card__depth-form { position: absolute; right: -4%; bottom: -12%; width: 61%; height: 74%; background: #020405; clip-path: polygon(20% 0, 100% 16%, 91% 100%, 0 100%, 9% 30%); filter: drop-shadow(-28px -15px 35px rgba(0,0,0,.8)); }
.project-card__depth-form::after { content: ""; position: absolute; inset: 25% 18%; border: 1px solid rgba(80,182,200,.18); background: repeating-linear-gradient(90deg, transparent 0 23%, rgba(80,182,200,.09) 23.5% 24%); }
.project-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,5,6,.08) 25%, rgba(3,5,6,.92) 100%); transition: background .6s var(--ease-out); }
.project-card__number { position: absolute; top: 1.4rem; right: 1.4rem; margin: 0; color: rgba(255,255,255,.6); font-size: .58rem; font-weight: 700; letter-spacing: .15em; }
.project-card__content { position: absolute; inset: auto clamp(1.3rem, 2.5vw, 2.5rem) clamp(1.3rem, 2.5vw, 2.5rem); transform: translateY(3.3rem); transition: transform .65s var(--ease-out); }
.project-card__meta { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin: 0 0 .9rem; color: rgba(236,243,243,.66); font-size: .58rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.project-card__meta span + span::before { content: "•"; margin-right: 1.2rem; color: var(--cyan); }
.project-card h3 { margin: 0; font: 600 clamp(2.1rem, 4.2vw, 5rem)/.9 var(--font-display); letter-spacing: -.055em; text-transform: uppercase; }
.project-card__summary { max-width: 560px; margin: .9rem 0 0; color: #c4cbcd; font-size: clamp(.78rem, 1vw, .92rem); line-height: 1.65; opacity: 0; transition: opacity .45s var(--ease-out); }
.project-card__action { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.2rem; color: var(--paper); font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; opacity: 0; transition: opacity .45s var(--ease-out); }
.project-card__action i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-style: normal; }
.project-card__link:hover .project-card__media, .project-card__link:focus-visible .project-card__media { transform: scale(1.045); filter: saturate(1.06); }
.project-card__link:hover .project-card__shade, .project-card__link:focus-visible .project-card__shade { background: linear-gradient(180deg, rgba(3,5,6,.14), rgba(3,5,6,.96)); }
.project-card__link:hover .project-card__content, .project-card__link:focus-visible .project-card__content { transform: none; }
.project-card__link:hover .project-card__summary, .project-card__link:hover .project-card__action, .project-card__link:focus-visible .project-card__summary, .project-card__link:focus-visible .project-card__action { opacity: 1; }
.projects__footer { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: clamp(4rem, 8vw, 8rem); padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.12); }
.projects__footer p { margin: 0; font: 500 clamp(1.15rem, 2.2vw, 2rem)/1.3 var(--font-display); }

.manifesto { position: relative; min-height: 100svh; padding-block: clamp(8rem, 14vw, 15rem) 5rem; overflow: hidden; isolation: isolate; scroll-margin-top: 70px; background: #07090c; }
.manifesto::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 7vw 7vw; mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); }
.manifesto__orb { position: absolute; z-index: -1; top: 10%; right: -12vw; width: min(58vw, 900px); aspect-ratio: 1; border: 1px solid rgba(80,182,200,.15); border-radius: 50%; background: radial-gradient(circle at 38% 34%, rgba(80,182,200,.22), rgba(7,9,12,.05) 42%, rgba(7,9,12,.9) 70%); box-shadow: inset 30px -30px 120px rgba(0,0,0,.8), 0 0 100px rgba(80,182,200,.06); }
.manifesto__orb::after { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(255,255,255,.05); border-radius: inherit; }
.manifesto__top { display: flex; align-items: center; justify-content: space-between; }
.manifesto h2 { position: relative; margin: clamp(5rem, 10vw, 10rem) 0 0; font: 600 clamp(4.2rem, 10.4vw, 12rem)/.82 var(--font-display); letter-spacing: -.078em; text-transform: uppercase; }
.manifesto h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(243,241,235,.54); }
.manifesto__copy { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4rem; margin: clamp(3rem, 6vw, 6rem) 0 8rem auto; max-width: 890px; }
.manifesto__copy > p { margin: 0; color: #d1d5d6; font: 500 clamp(1.15rem, 2vw, 1.65rem)/1.65 var(--font-display); }
.manifesto__copy > span { padding-left: 1.5rem; border-left: 1px solid var(--cyan); color: var(--muted); font-size: .58rem; font-weight: 700; line-height: 1.8; letter-spacing: .15em; text-transform: uppercase; }
.manifesto__marquee { display: flex; width: max-content; margin: 0; color: rgba(243,241,235,.035); font: 600 clamp(5rem, 10vw, 11rem)/1 var(--font-display); letter-spacing: -.05em; white-space: nowrap; }

.capabilities { position: relative; padding-block: clamp(7rem, 12vw, 13rem); scroll-margin-top: 70px; background: #0d1014; }
.capabilities__heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 3rem; margin-bottom: clamp(4rem, 7vw, 7rem); }
.capabilities__heading h2 { margin: 1.5rem 0 0; font: 600 clamp(3.4rem, 7.2vw, 8rem)/.87 var(--font-display); letter-spacing: -.065em; text-transform: uppercase; }
.capabilities__heading > p { max-width: 470px; margin: 0 0 .5rem auto; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.capability-list { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.capability { position: relative; min-height: 590px; padding: clamp(1.5rem, 2.7vw, 3rem); overflow: hidden; isolation: isolate; background: #0a0d11; }
.capability--primary { background: linear-gradient(145deg, #10212a, #090d11 66%); }
.capability__number { margin: 0; color: var(--cyan-bright); font: 600 .64rem/1 var(--font-display); letter-spacing: .16em; }
.capability__copy { position: relative; z-index: 2; display: flex; height: 100%; flex-direction: column; justify-content: flex-end; }
.capability__label { margin: 0 0 1rem; color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.capability h3 { margin: 0; font: 600 clamp(2.6rem, 4.5vw, 5.5rem)/.88 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; }
.capability:not(.capability--primary) h3 { font-size: clamp(2.2rem, 3.4vw, 4rem); }
.capability__copy > p:last-child { max-width: 520px; margin: 1.5rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.75; }
.capability__graphic { position: absolute; inset: 0; z-index: -1; opacity: .75; }
.capability__graphic--game span { position: absolute; border: 1px solid rgba(80,182,200,.17); border-radius: 50%; }
.capability__graphic--game span:nth-child(1) { width: 62%; aspect-ratio: 1; top: -15%; right: -9%; }
.capability__graphic--game span:nth-child(2) { width: 42%; aspect-ratio: 1; top: 1%; right: 1%; }
.capability__graphic--game span:nth-child(3) { width: 6px; height: 6px; top: 22%; right: 20%; border: 0; background: var(--cyan-bright); box-shadow: 0 0 24px var(--cyan); }
.capability__graphic--form span { position: absolute; top: 5%; right: -35%; width: 110%; aspect-ratio: 1; transform: rotate(28deg); border: 1px solid rgba(255,255,255,.1); background: linear-gradient(135deg, transparent 38%, rgba(255,255,255,.055) 39% 62%, transparent 63%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.capability__graphic--ai { inset: 7% -20% auto 20%; height: 48%; opacity: .5; }
.capability__graphic--ai::before, .capability__graphic--ai::after { content: ""; position: absolute; inset: 20%; border: 1px solid rgba(184,47,50,.25); transform: rotate(45deg); }
.capability__graphic--ai::after { inset: 35%; border-color: rgba(80,182,200,.25); }
.capability__graphic--ai i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.capability__graphic--ai i:nth-child(1) { left: 17%; top: 25%; }.capability__graphic--ai i:nth-child(2) { right: 26%; top: 8%; }.capability__graphic--ai i:nth-child(3) { left: 42%; bottom: 4%; }.capability__graphic--ai i:nth-child(4) { right: 12%; bottom: 26%; background: var(--red); box-shadow: 0 0 16px var(--red); }

.showreel { padding-block: clamp(7rem, 12vw, 13rem); overflow: hidden; background: #050608; }
.showreel__heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
.showreel__heading h2 { margin: 0; font: 600 clamp(3.1rem, 6.5vw, 7.2rem)/.88 var(--font-display); letter-spacing: -.065em; text-align: right; text-transform: uppercase; }
.reel { position: relative; aspect-ratio: 16 / 7.5; overflow: hidden; border: 1px solid rgba(255,255,255,.11); background: radial-gradient(circle at 50% 42%, rgba(41,105,117,.48), transparent 18%), linear-gradient(135deg, #11191f, #040608 60%); }
.reel::before { content: ""; position: absolute; inset: -50%; opacity: .3; background: repeating-conic-gradient(from 0deg, rgba(80,182,200,.1) 0 1deg, transparent 1deg 12deg); mask-image: radial-gradient(circle, #000, transparent 58%); }
.reel::after { content: "BITGRAPHICX / MOTION STUDIES / 001"; position: absolute; right: 1.5rem; bottom: 1.2rem; color: rgba(255,255,255,.33); font-size: .52rem; font-weight: 700; letter-spacing: .15em; }
.reel__button { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 0; background: transparent; cursor: pointer; }
.reel__rings { position: relative; width: clamp(90px, 10vw, 150px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; transition: transform .6s var(--ease-out), border-color .3s; }
.reel__rings::before, .reel__rings::after { content: ""; position: absolute; inset: -18%; border: 1px solid rgba(80,182,200,.13); border-radius: 50%; transition: inset .6s var(--ease-out), border-color .3s; }
.reel__rings::after { inset: -38%; }
.reel__rings i { font-style: normal; font-size: .9rem; }
.reel__button:hover .reel__rings { transform: scale(1.08); border-color: var(--cyan-bright); }
.reel__button:hover .reel__rings::before { inset: -28%; border-color: rgba(80,182,200,.35); }
.reel__button:hover .reel__rings::after { inset: -48%; }
.reel__button strong { font: 600 clamp(1rem, 1.7vw, 1.35rem)/1.2 var(--font-display); letter-spacing: .04em; }
.reel__button small { margin-top: .55rem; color: var(--muted); font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; padding: 0; border-top: 1px solid rgba(255,255,255,.12); list-style: none; }
.process li { min-width: 0; padding: 1.7rem clamp(1rem, 2vw, 2rem) 0 0; }
.process li + li { padding-left: clamp(1rem, 2vw, 2rem); border-left: 1px solid rgba(255,255,255,.12); }
.process span { display: block; margin-bottom: 2rem; color: var(--cyan); font-size: .58rem; font-weight: 700; letter-spacing: .15em; }
.process strong { display: block; font: 600 clamp(.95rem, 1.35vw, 1.2rem)/1.3 var(--font-display); }
.process p { margin: .8rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.65; }

.about { padding-block: clamp(7rem, 12vw, 13rem); background: #0c1014; }
.about__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); gap: clamp(4rem, 9vw, 10rem); align-items: center; }
.about__identity { position: relative; }
.about__logo-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(255,255,255,.11); background: radial-gradient(circle at 50% 40%, #182c34, #07090c 65%); }
.about__logo-frame::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(80,182,200,.12); }
.about__logo-frame img { width: 100%; height: 100%; object-fit: contain; transform: scale(.76); filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.about__identity > p { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; color: var(--muted); font-size: .55rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.about__copy h2 { margin: 1.5rem 0 2rem; font: 600 clamp(3rem, 5.5vw, 6.5rem)/.9 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; }
.about__lead { color: var(--paper) !important; font: 500 clamp(1.1rem, 1.7vw, 1.45rem)/1.6 var(--font-display) !important; }
.about__copy > p { max-width: 650px; margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; line-height: 1.8; }
.studio-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 3rem 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.studio-facts div { padding: 1.25rem 1rem 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.studio-facts div:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.12); }
.studio-facts dt { margin-bottom: .55rem; color: var(--muted); font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.studio-facts dd { margin: 0; font: 500 .85rem/1.4 var(--font-display); }

.updates { padding-block: clamp(7rem, 12vw, 13rem); background: #07090b; }
.updates__heading { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 3rem; margin-bottom: clamp(3.5rem, 7vw, 7rem); }
.updates__heading h2 { margin: 1.5rem 0 0; font: 600 clamp(3.5rem, 7vw, 7.8rem)/.86 var(--font-display); letter-spacing: -.065em; text-transform: uppercase; }
.updates__heading > p { max-width: 430px; margin: 0 0 .5rem auto; color: var(--muted); line-height: 1.8; }
.updates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2.5rem); }
.update-card a { display: block; }
.update-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: #0c1014; }
.update-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s var(--ease-out), filter .5s; }
.update-card:nth-child(1) img { object-position: center; }.update-card:nth-child(2) img { object-position: 54% center; }.update-card:nth-child(3) img { object-position: 60% center; }
.update-card a:hover img, .update-card a:focus-visible img { transform: scale(1.045); filter: brightness(.8); }
.update-card__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; color: var(--muted); font-size: .53rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.update-card__meta span { color: var(--cyan-bright); }
.update-card h3 { margin: 1.1rem 0 .8rem; font: 600 clamp(1.5rem, 2.4vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -.035em; }
.update-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.update-card .text-link { margin-top: 1.2rem; }.update-card .text-link i { font-style: normal; }

.contact { position: relative; min-height: 90svh; display: grid; place-items: center; padding-block: clamp(8rem, 14vw, 15rem); overflow: hidden; isolation: isolate; scroll-margin-top: 70px; background: #07131a; text-align: center; }
.contact__glow { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(90vw, 1300px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(39,120,135,.28), rgba(7,19,26,0) 63%); }
.contact__glow::after { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(80,182,200,.09); border-radius: 50%; }
.contact .section-index { justify-content: center; }
.contact h2 { margin: 2.5rem 0 2rem; font: 600 clamp(3.5rem, 8vw, 9rem)/.85 var(--font-display); letter-spacing: -.075em; text-transform: uppercase; }
.contact h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(243,241,235,.55); }
.contact__lead { max-width: 680px; margin: 0 auto; color: #b8c2c6; font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.8; }
.contact__actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .8rem 1.5rem; margin-top: 2.5rem; }
.contact__note { margin: 2.2rem 0 0; color: rgba(243,241,235,.42); font-size: .6rem; letter-spacing: .08em; }

.site-footer { padding-block: 3rem 1.5rem; background: #040506; border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; }
.footer-nav a, .back-to-top { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color var(--duration-fast); }
.footer-nav a:hover, .back-to-top:hover { color: var(--paper); }
.back-to-top { display: inline-flex; align-items: center; gap: .7rem; }
.back-to-top span { color: var(--cyan); }
.site-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); color: rgba(243,241,235,.37); font-size: .52rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__bottom p { margin: 0; }.site-footer__bottom > span { text-align: right; }
.footer-socials { text-align: center; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 2rem; padding: .9rem 1.15rem; transform: translate(-50%, calc(100% + 4rem)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-pill); background: rgba(10,13,17,.94); color: var(--paper); font-size: .8rem; opacity: 0; transition: transform .4s var(--ease-out), opacity .4s; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.no-script { position: fixed; z-index: 300; right: 1rem; bottom: 1rem; max-width: 320px; margin: 0; padding: 1rem; background: var(--surface-raised); font-size: .8rem; }