@charset "UTF-8";
/* =============================================================
   SKYENGINEX — sections
   Hero, contrast engine, arms, philosophy, mobile showcase,
   work, stack, team, join, contact.
   ============================================================= */

/* Blueprint column rules — thin vertical hairlines behind content */
.rules {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rules span { border-left: 1px solid rgba(237, 238, 242, 0.035); }
.rules span:last-child { border-right: 1px solid rgba(237, 238, 242, 0.035); }
@media (max-width: 760px) { .rules { grid-template-columns: repeat(2, 1fr); } }

/* Card with technical corner ticks */
.tick { position: relative; }
.tick::before, .tick::after {
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none;
  border-color: var(--accent-line); border-style: solid; border-width: 0;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.tick::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.tick::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.tick:hover::before, .tick:hover::after { opacity: 1; }

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 40px);
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img.hero-plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-media video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-media video.is-ready { opacity: 1; }

/* Scrims: keep text legible, push the plate into the background */
.hero-scrim { position: absolute; inset: 0; }
.hero-scrim--v {
  background:
    linear-gradient(180deg, rgba(8,9,12,0.86) 0%, rgba(8,9,12,0.34) 26%, rgba(8,9,12,0.5) 62%, var(--bg) 99%);
}
.hero-scrim--h {
  background: linear-gradient(96deg, rgba(8,9,12,0.95) 0%, rgba(8,9,12,0.78) 34%, rgba(8,9,12,0.22) 68%, rgba(8,9,12,0.6) 100%);
}
.hero-scrim--vig {
  background: radial-gradient(120% 90% at 50% 46%, transparent 32%, rgba(8,9,12,0.72) 100%);
}
@media (max-width: 860px) {
  .hero-scrim--h { background: linear-gradient(180deg, rgba(8,9,12,0.55) 0%, rgba(8,9,12,0.8) 100%); }
}

.hero-lattice { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }

.hero-body { position: relative; z-index: 2; padding-bottom: clamp(34px, 5vh, 62px); }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2);
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line-2); border-radius: 100px;
  background: rgba(8, 9, 12, 0.5);
  backdrop-filter: blur(8px);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.hero-kicker .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(153,102,204,0.6);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(153,102,204,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(153,102,204,0); }
  100% { box-shadow: 0 0 0 0 rgba(153,102,204,0); }
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: clamp(22px, 3vw, 34px);
  font-weight: 300;
}
.hero h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(96deg, var(--accent-bright) 8%, var(--accent) 52%, #7E5AB0 96%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-lede { max-width: 52ch; margin-bottom: clamp(28px, 4vw, 40px); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bottom instrument rail */
.hero-rail {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  background: rgba(8, 9, 12, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.hero-rail-inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-rail dl {
  margin: 0; padding: 18px 0;
  display: grid; gap: 5px; align-content: start;
}
.hero-rail-inner > dl + dl {
  border-left: 1px solid var(--line);
  padding-left: clamp(14px, 1.7vw, 24px);
}
.hero-rail dt {
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
}
.hero-rail dd {
  margin: 0; font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--ink-2);
}
.hero-rail dd b { color: var(--ink); font-weight: 400; }
@media (max-width: 860px) {
  .hero-rail-inner { grid-template-columns: repeat(2, 1fr); }
  .hero-rail-inner > dl:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-rail-inner > dl:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .hero-rail-inner { grid-template-columns: 1fr; }
  .hero-rail-inner > dl + dl { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .hero-rail dl { padding-block: 13px; }
}

.hero-scroll {
  position: absolute; right: max(18px, calc(var(--gutter) - 26px)); bottom: 148px; z-index: 3;
  display: grid; gap: 10px; justify-items: center;
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.2em;
  color: var(--faint); text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scrolldrop 2.4s var(--ease) infinite;
}
@keyframes scrolldrop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 1080px) { .hero-scroll { display: none; } }

/* =========================================================
   MARQUEE — capability strip
   ========================================================= */

.marquee {
  border-block: 1px solid var(--line);
  background: var(--void);
  overflow: hidden;
  padding-block: 15px;
  --marquee-speed: 46s;
}
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-speed) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-group span {
  display: inline-flex; align-items: center; gap: 26px;
  padding-inline: 13px;
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap;
}
.marquee-group span::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); opacity: 0.75; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* =========================================================
   01 — CONTRAST ENGINE (project-by-project vs reusable systems)
   ========================================================= */

.contrast { position: relative; }
.contrast-pin { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(8px, 2vh, 28px); }

.contrast-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 980px) {
  .contrast-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Stage first so the diagram and the copy that explains it share the
     screen while the scrub runs. */
  .contrast-stage { order: -1; }
}
@media (max-width: 520px) {
  .contrast-legend { font-size: 0.5625rem; letter-spacing: 0.09em; }
}

.contrast-copy { position: relative; min-height: 250px; }
.contrast-state {
  display: grid; gap: 18px;
  grid-area: 1 / 1;
}
.contrast-copy { display: grid; }
.contrast-state h3 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.contrast-state .tagline {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.contrast-state .tagline b { color: var(--accent); font-weight: 400; }
.contrast-state ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.contrast-state li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 0.9375rem; color: var(--ink-2);
}
.contrast-state li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px;
  border: 1px solid currentColor; opacity: 0.5;
}
.contrast-state--b li::before { background: var(--accent); border-color: var(--accent); opacity: 1; }

.contrast-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(153,102,204,0.07), transparent 70%),
    var(--surface);
  padding: clamp(20px, 2.6vw, 30px);
  overflow: hidden;
}
.contrast-stage::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(237,238,242,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,238,242,0.028) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 90%);
  pointer-events: none;
}
.contrast-svg { position: relative; width: 100%; height: auto; overflow: visible; }

/* Static fallback when the motion layer is off or unavailable:
   the same idea as a photograph instead of a scrubbed diagram. */
.contrast-static { display: none; width: 100%; border-radius: var(--radius); }
.no-motion .contrast-static { display: block; }
.no-motion .contrast-svg,
.no-motion .contrast-progress,
.no-motion .contrast-legend { display: none; }
.no-motion .contrast-copy { gap: 36px; }
.no-motion .contrast-state { grid-area: auto; }
.no-motion .contrast-pin { min-height: 0; }

.cx-slab { fill: #232936; stroke: rgba(237,238,242,0.22); stroke-width: 1; }
.cx-slab--dup { fill: #1A1E28; stroke: rgba(237,238,242,0.14); }
.cx-shared { fill: rgba(153,102,204,0.2); stroke: var(--accent); stroke-width: 1.4; }
.cx-prod { fill: #2B3444; stroke: rgba(237,238,242,0.4); stroke-width: 1; }
.cx-prod--lit { fill: rgba(153,102,204,0.28); stroke: var(--accent-bright); }
.cx-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; fill: var(--ink-2);
}
.cx-wire { stroke: var(--accent); stroke-width: 1; fill: none; opacity: 0.55; }

.contrast-progress {
  margin-top: 24px; height: 1px; background: var(--line-2); position: relative; overflow: hidden;
}
.contrast-progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.contrast-legend {
  margin-top: 12px; display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
}
.contrast-legend b { font-weight: 500; transition: color 0.4s var(--ease); }

/* One team / many products footnote band */
.multiband {
  margin-top: clamp(48px, 6vw, 84px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3.5vw, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
@media (max-width: 760px) { .multiband { grid-template-columns: 1fr; gap: 24px; } }
.multiband div { display: grid; gap: 8px; }
.multiband h4 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.multiband p { font-size: 0.875rem; color: var(--muted); max-width: 34ch; }

/* =========================================================
   02 — ENGINEERING ARMS
   Full-bleed film panels. The video carries the section; the
   copy is one line per arm.
   ========================================================= */

.arms { display: grid; }

.arm {
  position: relative;
  min-height: clamp(380px, 62vh, 620px);
  display: flex; align-items: flex-end;
  padding-block: clamp(34px, 5vh, 60px);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.arm:last-of-type { border-bottom: 1px solid var(--line); }

.arm-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.arm-media img, .arm-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.6s var(--ease);
}
.arm-media video { opacity: 0; transition: opacity 1.5s var(--ease), transform 1.6s var(--ease); }
.arm-media video.is-ready { opacity: 1; }
.arm:hover .arm-media img, .arm:hover .arm-media video,
.arm.is-active .arm-media img, .arm.is-active .arm-media video { transform: scale(1.09); }
.arm-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.72) 38%, rgba(8,9,12,0.3) 72%, rgba(8,9,12,0.6) 100%),
    linear-gradient(180deg, rgba(11,12,16,0.7) 0%, transparent 30%, rgba(8,9,12,0.72) 100%);
}

.arm-inner { position: relative; display: grid; gap: clamp(12px, 1.6vw, 18px); width: 100%; }

.arm-idx {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.2em; color: var(--accent-bright);
}
.arm-idx::after {
  content: ""; width: 26px; height: 1px; background: var(--accent-line);
  transition: width 0.6s var(--ease);
}
.arm:hover .arm-idx::after, .arm.is-active .arm-idx::after { width: 56px; }

.arm-inner h3 { max-width: none; }
.arm-line {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--ink-2); max-width: 42ch;
}

.arm-caps { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; max-width: 60ch; }
.chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line-2); border-radius: 100px;
  font-family: var(--mono); font-size: 0.5938rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(8, 9, 12, 0.42);
  backdrop-filter: blur(6px);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease);
}
.arm:hover .chip, .arm.is-active .chip { border-color: rgba(153,102,204,0.3); color: var(--ink); }
.chip:hover { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-wash); }

@media (max-width: 700px) {
  .arm { min-height: clamp(340px, 54vh, 480px); }
}

/* =========================================================
   03 — PHILOSOPHY + ARCHITECTURE DIAGRAM
   ========================================================= */

.philos-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 940px) { .philos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .philos-grid { grid-template-columns: 1fr; } }

.philos-card {
  position: relative;
  background: var(--bg);
  padding: clamp(24px, 2.8vw, 34px);
  display: grid; gap: 12px; align-content: start;
  min-height: 220px;
  transition: background 0.5s var(--ease);
  overflow: hidden;
}
.philos-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(100% 110% at 12% 0%, rgba(153,102,204,0.14), transparent 62%);
  opacity: 0; transition: opacity 0.55s var(--ease);
}
.philos-card:hover { background: var(--surface); }
.philos-card:hover::before { opacity: 1; }
.philos-card > * { position: relative; }
.philos-card .n {
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.2em;
  color: var(--accent); text-transform: uppercase;
}
.philos-card h3 { font-size: 1.25rem; letter-spacing: -0.025em; }
.philos-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.62; }

/* Architecture diagram */
.arch {
  position: relative;
  margin-top: clamp(44px, 5.5vw, 76px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(20px, 3vw, 38px);
  isolation: isolate;
}
.arch-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.arch-media img, .arch-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5;
}
.arch-media video { opacity: 0; transition: opacity 1.4s var(--ease); }
.arch-media video.is-ready { opacity: 0.5; }
.arch-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,18,25,0.9), rgba(16,18,25,0.82)),
    radial-gradient(70% 120% at 50% 100%, rgba(153,102,204,0.1), transparent 70%);
}
.arch > *:not(.arch-media) { position: relative; }
.arch-head {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(20px, 2.5vw, 30px);
}
.arch-head h3 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.arch-svg { width: 100%; min-width: 720px; height: auto; }

/* The diagram needs 720px to stay readable, so it scrolls inside its own
   container on narrow screens. Advertise that rather than hiding it. */
.arch-scroll { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.arch-hint {
  display: none;
  margin-top: 14px;
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
  align-items: center; gap: 9px;
}
.arch-hint svg { width: 13px; height: 13px; color: var(--accent); }
@media (max-width: 820px) {
  .arch-hint { display: flex; }
  .arch::after {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    top: 1px; right: 1px; bottom: 54px; width: 56px;
    border-radius: 0 var(--radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, rgba(16,18,25,0.96));
  }
}

.ar-box { fill: #131720; stroke: rgba(237,238,242,0.16); stroke-width: 1; rx: 4; }
.ar-box--accent { fill: rgba(153,102,204,0.1); stroke: var(--accent-line); }
.ar-title { font-family: var(--display); font-size: 12.5px; font-weight: 400; fill: var(--ink); letter-spacing: -0.004em; }
.ar-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; fill: var(--muted); text-transform: uppercase; }
.ar-cap { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; fill: var(--faint); text-transform: uppercase; }
.ar-path { fill: none; stroke: rgba(237,238,242,0.18); stroke-width: 1; }
.ar-flow {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 12 190; stroke-linecap: round;
  animation: flowdash 3.4s linear infinite;
}
.ar-flow--2 { animation-delay: 0.55s; }
.ar-flow--3 { animation-delay: 1.1s; }
.ar-flow--4 { animation-delay: 1.65s; }
.ar-flow--5 { animation-delay: 2.2s; }
@keyframes flowdash { from { stroke-dashoffset: 202; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ar-flow { animation: none; opacity: 0.4; stroke-dasharray: none; } }

/* =========================================================
   04 — MOBILE PRODUCT SHOWCASE
   ========================================================= */

.showcase { position: relative; background: var(--void); border-top: 1px solid var(--line); }

/* Backdrop is atmosphere only — heavily defocused so it reads as the
   lighting of the room, never as a second device competing with the mockup. */
.showcase-media { position: absolute; inset: 0; overflow: hidden; }
.showcase-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5; filter: blur(34px) saturate(0.8); transform: scale(1.3);
}
.showcase-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(8,9,12,0.5) 24%, rgba(8,9,12,0.62) 74%, var(--void) 100%),
    radial-gradient(110% 80% at 50% 50%, transparent 26%, rgba(8,9,12,0.9) 100%);
}

.showcase-inner { position: relative; z-index: 1; }

/* Full-bleed product film */
/* The runway gives the scrub something to scroll through; the film sticks to
   the viewport while the app's launch sequence follows the scroll position.
   Full height on desktop so the whole device stays in frame. */
.filmpin { position: relative; z-index: 1; margin-bottom: clamp(38px, 5vw, 74px); }
.filmstrip {
  position: relative;
  height: clamp(300px, 62vh, 620px);
  overflow: hidden;
  isolation: isolate;
  margin: 0;
}
@media (min-width: 981px) {
  .filmpin { height: 260vh; }
  .filmstrip { position: sticky; top: 0; height: 100svh; }
}
.filmstrip img, .filmstrip video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 48%;
}
.filmstrip video { opacity: 0; transition: opacity 1.5s var(--ease); }
.filmstrip video.is-ready { opacity: 1; }
.filmstrip::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--void) 0%, transparent 22%, transparent 62%, rgba(8,9,12,0.94) 100%),
    linear-gradient(90deg, var(--void) 0%, transparent 16%, transparent 84%, var(--void) 100%);
}
.filmstrip figcaption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  max-width: var(--container); margin-inline: auto;
  padding: 0 var(--gutter) clamp(16px, 2vw, 26px);
  display: grid; gap: 6px;
}
.filmstrip .fs-title {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.filmstrip .fs-title::before {
  content: ""; width: 16px; height: 1px; background: var(--accent);
}
.filmstrip .fs-meta {
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); padding-left: 26px;
}
.filmstrip .fs-scrub {
  display: block; margin: 10px 0 0 26px;
  width: min(220px, 44vw); height: 1px;
  background: var(--line-2); overflow: hidden;
}
.filmstrip .fs-scrub i {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}

.showcase-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 1024px) { .showcase-stage { grid-template-columns: 1fr; gap: 40px; } }

.device-wrap { display: grid; place-items: center; perspective: 1400px; }

/* Code-built device — crisp at any DPI */
.device {
  --dw: clamp(232px, 26vw, 306px);
  width: var(--dw);
  aspect-ratio: 9 / 19.5;
  position: relative;
  border-radius: calc(var(--dw) * 0.145);
  padding: calc(var(--dw) * 0.032);
  background: linear-gradient(155deg, #3A3F4C 0%, #14171E 26%, #0C0E13 52%, #22262F 78%, #4A5060 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.85),
    0 40px 90px -20px rgba(0,0,0,0.9),
    0 0 90px -12px rgba(153,102,204,0.32);
  transform-style: preserve-3d;
}
.device::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 40%, rgba(187,147,234,0.26) 49%, transparent 57%);
  opacity: 0.26; pointer-events: none; z-index: 3;
  mix-blend-mode: screen;
}
.device-screen {
  position: relative;
  height: 100%;
  border-radius: calc(var(--dw) * 0.118);
  background: #0A0B0F;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.device-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(153,102,204,0.14), transparent 58%);
}
.device-island {
  position: absolute; top: calc(var(--dw) * 0.035); left: 50%; transform: translateX(-50%);
  width: 30%; height: calc(var(--dw) * 0.075);
  background: #000; border-radius: 100px; z-index: 5;
}

.dev-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--dw) * 0.052) calc(var(--dw) * 0.062) calc(var(--dw) * 0.028);
  font-family: var(--mono); font-size: calc(var(--dw) * 0.031);
  letter-spacing: 0.1em; color: var(--faint);
}
.dev-head {
  padding: calc(var(--dw) * 0.05) calc(var(--dw) * 0.062) calc(var(--dw) * 0.036);
  border-bottom: 1px solid rgba(255,255,255,0.055);
  display: grid; gap: calc(var(--dw) * 0.018);
}
.dev-head b {
  font-family: var(--display); font-weight: 400;
  font-size: calc(var(--dw) * 0.062); letter-spacing: -0.014em; color: var(--ink);
}
.dev-head span {
  font-family: var(--mono); font-size: calc(var(--dw) * 0.029);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}

.dev-trace {
  flex: 1; overflow: hidden;
  padding: calc(var(--dw) * 0.055) calc(var(--dw) * 0.062);
  display: flex; flex-direction: column; gap: calc(var(--dw) * 0.055);
  font-family: var(--mono); font-size: calc(var(--dw) * 0.036);
  line-height: 1.5;
}
.trace-row {
  display: grid; grid-template-columns: calc(var(--dw) * 0.06) 1fr;
  gap: calc(var(--dw) * 0.032);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.trace-row.is-in { opacity: 1; transform: none; }
.trace-row > i {
  font-style: normal; color: var(--accent); opacity: 0.8;
  font-size: calc(var(--dw) * 0.028); padding-top: 0.28em;
}
.trace-row p { color: var(--ink-2); }
.trace-row p b { color: var(--ink); font-weight: 500; }
.trace-row--tool p {
  color: var(--accent-bright);
  border-left: 1px solid var(--accent-line);
  padding-left: calc(var(--dw) * 0.035);
}
.trace-row--out { color: var(--ink); }

/* Block, not inline: as a span the height and width were ignored and the
   bar overflowed across the row text. */
.trace-bar {
  display: block; width: 100%;
  height: calc(var(--dw) * 0.013); border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,0.08); margin-top: calc(var(--dw) * 0.018);
}
.trace-bar i { display: block; height: 100%; background: var(--accent); width: 0; }
.trace-row.is-in .trace-bar i { animation: fillbar 1.1s var(--ease) forwards; }
@keyframes fillbar { to { width: 100%; } }

.dev-foot {
  padding: calc(var(--dw) * 0.04) calc(var(--dw) * 0.062) calc(var(--dw) * 0.055);
  border-top: 1px solid rgba(255,255,255,0.055);
  display: flex; align-items: center; gap: calc(var(--dw) * 0.035);
}
.dev-foot .pill {
  flex: 1; height: calc(var(--dw) * 0.105);
  border-radius: 100px; border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; padding-inline: calc(var(--dw) * 0.05);
  font-family: var(--mono); font-size: calc(var(--dw) * 0.03);
  color: var(--faint); letter-spacing: 0.06em;
}
.dev-foot .go {
  width: calc(var(--dw) * 0.105); height: calc(var(--dw) * 0.105);
  border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; flex: none;
}
.dev-foot .go svg { width: 42%; height: 42%; color: #0B0C10; }

.dev-bar {
  position: absolute; bottom: calc(var(--dw) * 0.022); left: 50%; transform: translateX(-50%);
  width: 32%; height: calc(var(--dw) * 0.0125); border-radius: 100px;
  background: rgba(255,255,255,0.3); z-index: 6;
}

/* Showcase copy column */
.showcase-copy { display: grid; gap: clamp(22px, 2.6vw, 30px); }
.showcase-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.spec-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.spec-list div {
  background: rgba(11,12,16,0.72); padding: 14px 16px;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  transition: background 0.4s var(--ease);
}
.spec-list div:hover { background: rgba(20,24,33,0.9); }
.spec-list dt, .spec-list .k {
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); flex: none;
}
.spec-list .v { font-size: 0.8125rem; color: var(--ink); text-align: right; }
.spec-list .v em { font-style: normal; color: var(--accent-bright); }

.showcase-note {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  line-height: 1.7; text-transform: uppercase; color: var(--faint);
  display: flex; align-items: flex-start; gap: 9px; max-width: 46ch;
}
.showcase-note::before {
  content: ""; width: 5px; height: 5px; margin-top: 0.62em;
  border-radius: 50%; background: var(--accent); flex: none;
}

@media (max-width: 1024px) {
  .device { --dw: clamp(258px, 62vw, 330px); }
  .showcase-copy { justify-items: start; }
}

/* =========================================================
   05 — WORK
   ========================================================= */

.work-list { display: grid; gap: clamp(18px, 2.4vw, 28px); }

.work-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease);
}
.work-card:hover { border-color: var(--accent-line); }
@media (max-width: 900px) { .work-card { grid-template-columns: 1fr; } }

.work-media { position: relative; overflow: hidden; min-height: 260px; background: var(--void); }
.work-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.72;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.work-card:hover .work-media img { transform: scale(1.07); opacity: 0.9; }
.work-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,18,25,0.94) 0%, rgba(16,18,25,0.24) 46%, transparent 100%);
}
@media (max-width: 900px) {
  .work-media { min-height: 200px; order: -1; }
  .work-media::after { background: linear-gradient(180deg, transparent 20%, rgba(16,18,25,0.9) 100%); }
}

.work-body { padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; align-content: start; }
.work-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; width: max-content;
  border: 1px solid var(--line-2); color: var(--ink-2);
}
.work-status .led { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.work-status--live { border-color: rgba(120, 210, 150, 0.35); color: #86D9A6; }
.work-status--live .led { background: #86D9A6; box-shadow: 0 0 8px rgba(134,217,166,0.8); animation: pulse 2.6s infinite; }
.work-status--build { border-color: var(--accent-line); color: var(--accent-bright); }
.work-status--build .led { background: var(--accent); }
.work-status--research { border-color: rgba(237,238,242,0.2); color: var(--ink-2); }

.work-body h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
.work-body p { font-size: 0.9375rem; color: var(--ink-2); max-width: 48ch; }
.work-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.work-foot { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; padding-top: 6px; }

.work-card--research { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.disclaimer {
  border-left: 1px solid var(--accent-line);
  padding: 10px 0 10px 14px;
  font-size: 0.8125rem; color: var(--muted); line-height: 1.58;
  max-width: 52ch;
}

/* =========================================================
   06 — STACK
   ========================================================= */

.stack-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 1280px) { .stack-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .stack-grid { grid-template-columns: 1fr; } }

.stack-col { background: var(--bg); padding: clamp(18px, 1.7vw, 22px); display: grid; gap: 14px; align-content: start; }
.stack-col > header { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.stack-col h3 { font-size: 1rem; letter-spacing: -0.02em; }
.stack-col .cnt { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; }
.stack-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stack-col li {
  position: relative;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 5px 0 5px 14px;
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
  cursor: default;
}
.stack-col li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 5px; height: 1px; background: var(--ghost);
  transition: width 0.35s var(--ease), background 0.3s var(--ease);
}
.stack-col li:hover { color: var(--accent-bright); padding-left: 20px; }
.stack-col li:hover::before { width: 11px; background: var(--accent); }

/* =========================================================
   07 — TEAM
   ========================================================= */

.team-top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  margin-bottom: clamp(40px, 5vw, 68px);
}
@media (max-width: 940px) { .team-top { grid-template-columns: 1fr; } }

.team-photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 16 / 10;
}
.team-photo img, .team-photo video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.82;
}
.team-photo video { opacity: 0; transition: opacity 1.5s var(--ease); }
.team-photo video.is-ready { opacity: 0.82; }
.team-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(11,12,16,0.86) 100%);
}
.team-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 20px 22px;
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.team-photo figcaption b { color: var(--accent-bright); font-weight: 400; }

.team-counts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 22px; }
.team-counts div { flex: 1 1 110px; background: var(--bg); padding: 16px; display: grid; gap: 5px; }
.team-counts b { font-family: var(--display); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 300; letter-spacing: -0.03em; }
.team-counts span { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
@media (max-width: 820px) { .units { grid-template-columns: 1fr; } }
.unit {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  display: grid; gap: 12px; align-content: start;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  overflow: hidden;
  transition: border-color 0.5s var(--ease);
}
.unit:hover { border-color: var(--accent-line); }
.unit-glyph { width: 30px; height: 30px; color: var(--accent); margin-bottom: 4px; }
.unit h3 { font-size: 1.35rem; }
.unit .role { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.unit p { font-size: 0.875rem; color: var(--ink-2); }

.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(16px, 2vw, 20px); }
@media (max-width: 700px) { .founders { grid-template-columns: 1fr; } }
.founder {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--surface);
  transition: border-color 0.5s var(--ease);
}
.founder:hover { border-color: var(--accent-line); }
.founder .mono-mark {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius);
  border: 1px solid var(--accent-line); background: var(--accent-wash);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--accent-bright);
}
.founder b { display: block; font-family: var(--display); font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.014em; }
.founder span { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* Trust strip */
.trust {
  margin-top: clamp(40px, 5vw, 68px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--void);
  padding: clamp(22px, 2.8vw, 32px);
  display: grid; gap: clamp(20px, 2.4vw, 28px);
}
.trust-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
@media (max-width: 820px) { .trust-items { grid-template-columns: 1fr; } }
.trust-item { display: grid; gap: 7px; padding-left: 15px; border-left: 1px solid var(--accent-line); }
.trust-item b { font-size: 0.9375rem; font-weight: 400; font-family: var(--display); letter-spacing: -0.01em; }
.trust-item span { font-size: 0.8125rem; color: var(--muted); line-height: 1.55; }
.certs { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; border-top: 1px solid var(--line); }
.certs .lbl { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); padding: 6px 0; margin-right: 6px; }

/* =========================================================
   08 — JOIN
   ========================================================= */

.join { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg), var(--void)); }
.join-grid {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 76px);
}
@media (max-width: 980px) { .join-grid { grid-template-columns: 1fr; } }

.join-aside { display: grid; gap: 24px; align-content: start; position: relative; }
@media (min-width: 981px) { .join-aside { position: sticky; top: calc(var(--header-h) + 40px); height: max-content; } }
.join-aside h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.join-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.join-points li { display: flex; gap: 12px; font-size: 0.9375rem; color: var(--ink-2); }
.join-points li svg { flex: none; width: 15px; height: 15px; color: var(--accent); margin-top: 4px; }

.form { display: grid; gap: clamp(20px, 2.4vw, 26px); }
.form-block {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--surface);
  display: grid; gap: 18px;
}
.form-block > legend, .form-block-title {
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
  padding: 0; margin-bottom: 2px;
}
.form-block { border: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
@media (max-width: 640px) { .skills-grid { grid-template-columns: 1fr; } }

.form-foot { display: grid; gap: 16px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-status {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
}
.form-status.is-ok { color: #86D9A6; }
.form-status.is-err { color: #E0736B; }

/* =========================================================
   09 — CONTACT
   ========================================================= */

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 72px); align-items: end;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; align-items: start; } }
.contact-mail {
  display: inline-block;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.6rem, 4.6vw, 3.4rem); letter-spacing: -0.028em;
  color: var(--ink);
  position: relative; padding-bottom: 6px;
  overflow-wrap: anywhere;
}
.contact-mail::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.55s var(--ease);
}
.contact-mail:hover { color: var(--accent-bright); }
.contact-mail:hover::after { transform: scaleX(1); transform-origin: left; }

.social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.social-list a {
  background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s var(--ease), padding 0.4s var(--ease);
}
.social-list a:hover { color: var(--accent-bright); padding-inline: 12px 2px; }
.social-list svg { width: 13px; height: 13px; transition: transform 0.35s var(--ease); }
.social-list a:hover svg { transform: translate(3px, -3px); }

/* =========================================================
   UNIT IDENTITY MEDIA
   Each internal unit gets its own visual, so Eclipse / Nebula /
   Aurora read as distinct groups rather than three icon cards.
   ========================================================= */

.unit { padding-top: 0; overflow: hidden; }
.unit-media {
  position: relative;
  margin: 0 calc(clamp(22px, 2.6vw, 30px) * -1) clamp(16px, 2vw, 22px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.unit-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.78;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.unit:hover .unit-media img { transform: scale(1.07); opacity: 1; }
.unit-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,18,25,0.42) 0%, transparent 34%, rgba(11,12,16,0.92) 100%);
}
.unit { padding-inline: clamp(22px, 2.6vw, 30px); padding-bottom: clamp(22px, 2.6vw, 30px); }
.unit-glyph { margin-top: 0; }

/* =========================================================
   CLOSING BAND
   Bookends the hero: same slogan, seen from the other end.
   ========================================================= */

.closer {
  position: relative;
  min-height: clamp(460px, 78vh, 760px);
  display: flex; align-items: center;
  padding-block: clamp(64px, 9vh, 120px);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.closer-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.closer-media img, .closer-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 34%;
  filter: saturate(0.94) brightness(0.86);
}
.closer-media video { opacity: 0; transition: opacity 1.6s var(--ease); }
.closer-media video.is-ready { opacity: 1; }
.closer-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(11,12,16,0.5) 26%, rgba(8,9,12,0.7) 74%, var(--void) 100%),
    linear-gradient(90deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.44) 50%, rgba(8,9,12,0.7) 100%);
}

.closer-inner { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 40px); }
.closer-slogan { max-width: 16ch; }
.closer-slogan em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(96deg, var(--accent-bright) 8%, var(--accent) 52%, #7E5AB0 96%);
  -webkit-background-clip: text;
  background-clip: text;
}
.closer-sign {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  padding-top: clamp(6px, 1.4vw, 14px);
  border-top: 1px solid var(--line-2);
  max-width: 46ch;
}
.closer-sign > span {
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  margin-left: auto;
}

@media (max-width: 620px) {
  .closer { min-height: clamp(400px, 62vh, 600px); }
  .closer-sign { max-width: none; }
  .closer-sign > span { margin-left: 0; }
}

/* The arm panels bleed the full viewport width, so the section that holds
   them carries no bottom padding of its own. */
.capabilities { padding-bottom: 0; }