/* Branded product/architecture names — rendered in Sora, uppercased. */
.inf {
  font-family: 'Sora', system-ui, sans-serif;
  text-transform: uppercase
}

:root {
  --bg: #000000;
  --text: #f3f7fb;
  --dim: rgba(243, 247, 251, 0.72);
  --dimmer: rgba(243, 247, 251, 0.55);
  --accent: #ff8c25;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --frame-gutter: clamp(64px, 15vw, 420px);
  --headline-bits-font: 'Sora', system-ui, sans-serif;
  --headline-decoded-font: 'Sora', system-ui, sans-serif
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem
}

body {
  font-family: 'Sora';
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

/* Framed page: content column padded in from both edges. Wide screens only —
   full-bleed below 1024px. */
@media (min-width: 1024px) {
  body {
    padding-inline: var(--frame-gutter)
  }

  /* The 1px frame rules that used to run down both gutters were removed at user
     request (2026-08-01). The gutter itself (body padding-inline) stays. */
}

.content {
  position: relative;
  z-index: 2
}

/* Nav is anchored at the top of the page and scrolls away with the content —
   it does not follow. Etched-style styling: transparent, no border. */
nav {
  /* Follows the scroll (terafab.ai pattern). Sticky, not fixed: it stays in flow,
     so it keeps the frame-gutter alignment and the page needs no top padding. */
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.7rem clamp(1.5rem, 5vw, 4rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border-bottom: 0;
  transition: color 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease
}

/* All-black theme: the white logo mark is the permanent one. */
.logo-mark--dark {
  opacity: 0
}

.logo-mark--light {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1
}

.nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center
}

.nav-links a {
  font-family: var(--headline-decoded-font);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.9);
  text-decoration: none;
  transition: color 0.3s
}

.nav-links a:hover {
  color: #f3f7fb
}

/* Homepage product index: one editorial list, a hairline row per product —
   mono index number, decoded name, mono descriptor, one line of copy, and the
   figure on the right. Replaces the four stacked teaser sections. */
.prod-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12)
}

.prod-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12)
}

#products .group-label {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem)
}

.prod-head {
  display: flex;
  align-items: baseline;
  gap: 1.1rem
}

.prod-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: rgba(243, 247, 251, 0.4)
}

.prod-name {
  font-family: var(--headline-decoded-font);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #f3f7fb;
  margin: 0
}

.prod-desc {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.9rem
}

.prod-line {
  font-size: clamp(1.02rem, 1.3vw, 1.12rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--dim);
  max-width: 46ch;
  margin-top: 0.9rem
}

.prod-row .sec-more {
  margin-top: 1.6rem
}

/* The figure enters a beat after its row's copy — the delay lives in the
   transition so the stagger holds on the load sequence and on scroll alike. */
.prod-fig.fade {
  transition-delay: 0.42s
}

/* the index reveals at a calmer pace than ordinary scroll fades */
.prod-row.fade,
.prod-fig.fade {
  transition-duration: 1.15s
}

/* Figures: one consistent column, whatever their native max-widths are. */
.prod-fig {
  display: flex;
  justify-content: center
}

.prod-fig svg,
.prod-fig img {
  display: block;
  width: 100%;
  height: auto
}

.prod-fig .tile-svg { max-width: 440px }
.prod-fig .photon-grid-svg { max-width: 330px }
.prod-fig .rack-teaser-img { max-width: 440px }
.prod-fig .luma-stack-svg { max-width: 360px }

@media (max-width: 900px) {
  .prod-row {
    grid-template-columns: 1fr;
    gap: 1.8rem
  }

  .prod-fig {
    order: 2
  }

  .prod-fig svg,
  .prod-fig img {
    max-width: min(100%, 420px)
  }
}

/* "Explore <product>" link closing each homepage product section, pointing at
   that product's own page. */
.sec-more {
  margin-top: clamp(1.5rem, 3vw, 2.25rem)
}

.sec-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3f7fb;
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 247, 251, 0.35);
  padding-bottom: 0.35rem;
  transition: border-color 0.25s ease, gap 0.25s ease
}

.sec-more a:hover {
  gap: 0.85rem;
  border-color: #f3f7fb
}

.sec-more svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto
}

/* Product mega-dropdown, following lightmatter.co: a full-width band under the
   nav rather than a card, columns spread across it, each column an accent-ruled
   list. Hover opens after a beat and closes after a slightly longer one so
   crossing the nav diagonally doesn't flicker it. */
.nav-drop {
  display: flex;
  align-items: center
}

/* A <button>, not a link: the trigger only reveals the panel, it never navigates.
   Needs the native button chrome reset so it matches the sibling nav links. */
.nav-drop-trigger {
  font-family: var(--headline-decoded-font);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.9);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.3s
}

.nav-drop-trigger:hover,
.nav-drop.open .nav-drop-trigger {
  color: #f3f7fb
}

.nav-drop-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* solid surface: the hero dot field must not show through the panel */
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s
}

.nav-drop.open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.nav-drop-inner {
  display: grid;
  /* minmax(0,1fr): a bare 1fr has an auto minimum, and the long nowrap
     descriptors were inflating their columns to unequal widths */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 clamp(1.5rem, 5vw, 4rem)
}

/* one product per cell: index, name, one-line descriptor; the whole cell is
   the link. Hairlines between cells, generous hit target, hover lifts the
   surface — same idiom as the homepage product index. */
.nav-drop-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: clamp(1.4rem, 2.2vw, 2rem) clamp(1.1rem, 1.8vw, 1.6rem);
  text-decoration: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease
}

.nav-drop-item:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.08)
}

.nav-drop-item:hover,
.nav-drop-item:focus-visible {
  background: rgba(255, 255, 255, 0.045);
  outline: none
}

.nav-drop-num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: rgba(243, 247, 251, 0.38)
}

.nav-drop-name {
  font-family: var(--headline-decoded-font);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #f3f7fb;
  text-transform: none;
  transition: color 0.2s ease
}

.nav-drop-item:hover .nav-drop-name {
  color: #ffffff
}

.nav-drop-desc {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--dim)
}

/* The panel surface runs edge to edge past the frame gutter (like the dot
   fields); the cells stay aligned to the content column inside it. */
@media (min-width: 1024px) {
  .nav-drop-menu {
    left: calc(-1 * var(--frame-gutter));
    right: calc(-1 * var(--frame-gutter))
  }

  .nav-drop-inner {
    padding: 0 calc(var(--frame-gutter) + clamp(1.5rem, 5vw, 4rem))
  }
}

@media (max-width: 1279px) {
  .nav-drop-inner {
    grid-template-columns: repeat(2, 1fr)
  }

  .nav-drop-item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
  }

}

.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
  line-height: 0;
  margin: 0;
  text-decoration: none;
  opacity: 1;
  position: relative
}

.logo img,
.logo svg {
  display: block;
  height: 2.2rem;
  width: auto;
  transform: translateY(8.1%)
}

.logo-wordmark {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  color: #f3f7fb;
  /* terafab-style retract: the span is its own overflow-hidden track, and the
     scrolled state collapses it to width 0 so the wordmark slides away while
     the logo mark stays put (timings lifted from terafab.ai). */
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 160px;
  /* overflow:hidden clips at the padding box, and with line-height:1 the "g"
     descender falls outside it — grow the box symmetrically and cancel the
     growth with negative margins so nothing moves. */
  padding-block: 0.35em;
  margin-block: -0.35em;
  transition: max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1)
}

nav.nav-scrolled .logo-wordmark {
  max-width: 0;
  opacity: 0
}

/* Scrolled nav gets a floor so the links stay readable over figures — terafab
   stays fully transparent, but their pages are light; over this site's dense
   dark artwork the links would collide with content. */
nav.nav-scrolled {
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px)
}

.pad {
  padding: 0 clamp(1.5rem, 5vw, 4rem)
}

.hero {
  position: relative;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  /* Extra headroom above the headline (user: "lower this section down a bit"). */
  padding: clamp(10rem, 19vw, 18rem) clamp(1.5rem, 5vw, 4rem) clamp(4.5rem, 8vw, 7rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  color: #f3f7fb
}

/* Mobile navigation: below 480px the desktop links are hidden, so a hamburger
   opens a solid panel under the nav with the product + company links. */
.nav-menu-btn {
  display: none;
  background: none;
  border: 0;
  padding: 0.45rem;
  margin: 0;
  color: rgba(243, 247, 251, 0.9);
  cursor: pointer
}

.nav-menu-btn svg {
  display: block;
  width: 1.25rem;
  height: auto
}

.nav-mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14)
}

nav.nav-open .nav-mobile {
  display: flex
}

.nav-mobile a {
  font-family: var(--headline-decoded-font);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.9);
  text-decoration: none;
  padding: 0.95rem clamp(1.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07)
}

.nav-mobile a:last-child {
  border-bottom: 0
}

.nav-mobile a:active {
  background: rgba(255, 255, 255, 0.05)
}

.js .nav-menu-btn {
  opacity: 0;
  transform: translateY(6px)
}

nav.nav-links-in .nav-menu-btn {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s
}

@media (max-width: 480px) {
  .nav-menu-btn {
    display: flex
  }
}

/* Narrative trio spacing: sections that continue an argument sit closer
   together than independent sections do. .sec-lead trims a section's bottom
   padding, .sec-flow trims the next one's top — half-rhythm seams. */
.sec.sec-lead {
  padding-bottom: clamp(2.25rem, 4.5vw, 4rem)
}

.sec.sec-flow {
  padding-top: clamp(2.25rem, 4.5vw, 4rem)
}

/* Scroll cue: a floating chevron, bottom-centre of the hero. Hidden until the
   load sequence finishes (.cue-in), gone for good on the first scroll
   (.cue-done). Clicking it scrolls to the product index. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  /* hangs well below the hero box, in the dot field's overhang zone */
  bottom: calc(-1 * clamp(11rem, 16vw, 15rem));
  transform: translate(-50%, 0);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(243, 247, 251, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, color 0.2s ease
}

.hero-scroll-cue svg {
  width: 1.2rem;
  height: 1.2rem
}

.hero-scroll-cue.cue-in {
  opacity: 1;
  pointer-events: auto;
  animation: cueFloat 2.2s ease-in-out infinite
}

.hero-scroll-cue:hover {
  color: #ffffff
}

.hero-scroll-cue.cue-done {
  opacity: 0;
  pointer-events: none
}

@keyframes cueFloat {
  0%, 100% { transform: translate(-50%, 0) }
  50% { transform: translate(-50%, 7px) }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue.cue-in {
    animation: none
  }
}

/* Load sequence, terafab.ai's boot: logo -> hero copy -> grid intro.
   Initial hidden states are gated behind html.js (set by a one-line inline
   script in <head>) so nothing is hidden without JavaScript. Timings and the
   blur-drift keyframe are lifted from terafab's styles.css. */
@keyframes heroLineIn {
  from {
    opacity: 0;
    filter: blur(11px);
    transform: translate3d(0, 18%, 0)
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0)
  }
}

/* Logo entrance in two steps: the mark rises first, then the wordmark slides
   out of its retract track (same property the scroll retract animates).
   :not(.nav-scrolled) keeps the scrolled retract authoritative afterwards. */
.js nav .logo-mark--light {
  opacity: 0;
  /* compose with the mark's standing 8.1% optical offset — ending on
     transform:none would wipe it and leave the mark riding high */
  transform: translateY(calc(8.1% + 8px))
}

nav.nav-logo-in .logo-mark--light {
  opacity: 1;
  transform: translateY(8.1%);
  transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
              transform 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.06s
}

.js nav:not(.nav-logo-in) .logo-wordmark {
  max-width: 0;
  opacity: 0
}

nav.nav-logo-in:not(.nav-scrolled) .logo-wordmark {
  transition: max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.32s,
              opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.32s
}

.hero-line {
  display: block
}

/* per-line hidden states: headline lines, sub words (grouped into visual
   lines by JS, each group sharing one delay), and the nav links, which
   close the sequence */
/* pre-split guard: the sub is hidden as a whole until JS wraps its words
   (the split hands visibility back via an inline opacity) — otherwise the
   full text flashes for the ~300ms before hero-ready */
.js .hero .hero-sub-seq {
  opacity: 0
}

.js .hero .hero-line,
.js .hero .sub-seq-word {
  opacity: 0;
  filter: blur(11px);
  transform: translate3d(0, 18%, 0);
  will-change: opacity, filter, transform
}

.sub-seq-word {
  display: inline-block
}

.hero.hero-ready .hero-line,
.hero.hero-ready .sub-seq-word {
  animation: heroLineIn 0.82s cubic-bezier(0.22, 1, 0.36, 1) var(--seq-delay, 0.08s) forwards
}

.hero.hero-ready .hero-line:nth-child(1) { --seq-delay: 0.08s }
.hero.hero-ready .hero-line:nth-child(2) { --seq-delay: 0.22s }

.js .nav-links {
  opacity: 0;
  transform: translateY(6px)
}

nav.nav-links-in .nav-links {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s
}

@media (prefers-reduced-motion: reduce) {
  .js nav .logo-mark--light,
  .js nav:not(.nav-logo-in) .logo-wordmark,
  .js .nav-links,
  .js .hero .hero-sub-seq,
  .js .hero .hero-line,
  .js .hero .sub-seq-word {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none
  }

  .js nav:not(.nav-logo-in) .logo-wordmark {
    max-width: 160px
  }
}

/* CTA dot-grid field (terafab footer preset) — same stacking recipe as the hero's. */
.cta-grid-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none
}

/* Ambient dot-grid field behind the hero (terafab.ai's makeDotGrid, ported).
   z-index -1 keeps it under the hero's in-flow text inside main's stacking
   context; pointer-events none so it never eats clicks. */
.hero-grid-fx {
  position: absolute;
  inset: 0;
  /* the field hangs lower than the hero box: it starts well below the nav and
     runs to the hero's bottom edge */
  top: clamp(0.5rem, 1vw, 1rem);
  /* taller than the hero: the field runs past the section's bottom edge and
     fades out behind the start of the content below */
  height: calc(100% - clamp(0.5rem, 1vw, 1rem) + clamp(6rem, 10vw, 9.5rem));
  z-index: -1;
  display: block;
  width: 100%;
  pointer-events: none
}

/* Both dot fields bleed past the frame gutter to the viewport edges (the
   sections themselves stay gutter-bound; only the field extends). Below 1024px
   there is no gutter and the sections are already full-bleed. */
@media (min-width: 1024px) {
  .hero-grid-fx,
  .cta-grid-fx {
    /* canvas is a replaced element: width:auto would collapse to the buffer's
       intrinsic size, so size it explicitly — section width plus both gutters */
    left: calc(-1 * var(--frame-gutter));
    right: auto;
    width: calc(100% + 2 * var(--frame-gutter))
  }
}

/* Hero hardware figure: the rack-scale system elevation from the whitepaper,
   kept in its native dark drawing style inside a black panel (etched-style
   "the hardware is the hero"). */
.hero-rack {
  align-self: center;
  width: 100%;
  max-width: 880px;
  margin-bottom: clamp(2.8rem, 6vw, 4.5rem)
}

.hero-rack-panel {
  background: transparent;
  padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(0.9rem, 2.2vw, 1.6rem) clamp(0.8rem, 2vw, 1.3rem)
}

.hero-rack-h {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.9rem
}

.hero-rack-panel svg,
.hero-rack-panel .hero-rack-img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin-inline: auto
}


.hero-rack-panel svg text {
  font-family: 'Sora', system-ui, sans-serif
}

.hero-rack-cap {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--dim)
}

.hero h1,
.hero .hero-headline,
.hero .sub {
  margin-left: 0;
  margin-right: 0
}

.hero .sub {
  max-width: 580px
}

.hero h1,
.hero .hero-headline {
  font-size: clamp(1.85rem, 5.1vw, 3.9rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 18ch;
  font-family: var(--headline-decoded-font);
  text-wrap: balance
}

.bit-headline {
  position: relative;
  text-transform: capitalize
}

.bit-headline .headline-source {
  transition: none
}

.bit-headline.is-encoded .headline-source {
  opacity: 0
}

.bit-headline.is-decoded .headline-source {
  opacity: 1
}

.bit-headline .headline-bits-overlay {
  /* capitalization is baked per-character in JS — see buildBitOverlay */
  text-transform: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: none;
  white-space: pre;
  font-family: var(--headline-decoded-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  letter-spacing: inherit
}

.bit-headline.is-decoded .headline-bits-overlay {
  opacity: 0
}

.bit-headline .headline-bits-line {
  display: block
}

.bit-headline .headline-bit-char {
  display: inline;
  color: currentColor;
  transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease
}

.bit-headline .headline-bit-char.is-bit {
  opacity: 0.82;
  letter-spacing: -0.1em
}

.bit-headline .headline-bit-char.is-accent {
  color: #f3f7fb;
  font-weight: 300;
}

.bit-headline .headline-bit-char.is-accent.is-bit {
  opacity: 0.92
}

.bit-headline .headline-bit-char.is-final {
  filter: none;
  opacity: 1
}

.bit-headline .headline-bit-char.is-caps {
  text-transform: uppercase
}

.bit-headline .headline-bit-char.is-super.is-final {
  font-size: 0.52em;
  vertical-align: super;
  line-height: 0
}

.hero h1 em,
.hero .hero-headline em {
  font-weight: 300;
  color: inherit
}

.hero h1 em,
.hero .hero-headline em,
.sec h2 em,
.sec h1 em,
.cta-end h2 em {
  font-style: normal;
  font-weight: 300;
  color: inherit;
}

.hero .sub {
  margin-top: 1.6rem;
  font-size: clamp(1.12rem, 1.48vw, 1.28rem);
  font-weight: 300;
  color: rgba(243, 247, 251, 0.78);
  max-width: 540px;
  line-height: 1.75
}

.hero .cta-wrap {
  margin-top: 2.5rem
}

.cta-end .cta-wrap {
  margin-top: 2.5rem
}

/* Etched-style CTA: solid rectangular block, monospace label — white on the black theme. */
/* Contact CTA, terafab.ai's .link-cta idiom (their "View Jobs" button): a quiet
   text button — medium weight, dimmed white, chevron arrow — that lifts to full
   white on hover. Replaces the old bordered mono box. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--headline-decoded-font);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: rgba(243, 247, 251, 0.62);
  text-decoration: none;
  padding: 6px 2px 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.22s ease
}

.btn:hover {
  color: #ffffff
}

.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  margin-right: -1px;
  transition: transform 0.22s ease
}

.btn-arrow svg {
  display: block;
  width: 100%;
  height: 100%
}

.btn:hover .btn-arrow {
  transform: translateX(2px)
}

.btn-solid {
  background: rgba(255, 140, 37, 0.12);
  border-color: rgba(255, 140, 37, 0.4)
}

/* Full-bleed content sections escape the parent padding, then reapply the
   same inset internally so the content stays on the main reading column. */
.sec {
  --panel-bg: transparent;
  --panel-text: #f3f7fb;
  --panel-surface: rgba(255, 255, 255, 0.05);
  --panel-surface-hover: rgba(255, 255, 255, 0.08);
  --panel-border: rgba(255, 255, 255, 0.14);
  --panel-divider: rgba(255, 255, 255, 0.08);
  position: relative;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--panel-bg);
  color: var(--panel-text)
}


.sec h2,
.sec h1 {
  font-family: var(--headline-decoded-font);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 16ch;
  margin-bottom: 1.8rem;
  transition: color 0.4s
}

.sec h2 em,
.sec h1 em {
  font-weight: 300;
  color: inherit;
  transition: color 0.4s
}

.sec .prose {
  font-size: clamp(1.1rem, 1.46vw, 1.24rem);
  font-weight: 300;
  line-height: 1.8;
  max-width: 580px;
  transition: color 0.4s
}

.sec .prose+.prose {
  margin-top: 0.9rem
}

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem
}

.group-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 4.25rem
}

.group-label+.card-row {
  margin-top: 1.2rem
}

/* Roster rows (leadership + advisors): keep cards at their natural width and
   left-aligned instead of stretching to fill the row (auto-fill preserves
   empty tracks), so both people rows share one consistent card width. */
.card-row.roster-row {
  /* capped max (not 1fr): cards keep a fixed, slightly smaller width instead
     of stretching, which sizes the avatars down with them */
  grid-template-columns: repeat(auto-fill, minmax(220px, 240px))
}

/* Two-column feature pattern. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem
}

@media (max-width: 768px) {
  nav {
    top: 0;
    gap: 1.25rem
  }

  .logo {
    min-width: 0;
    flex: 0 1 auto
  }

  nav .logo img {
    /* definite height, like the desktop rule: with height:auto + max-height,
       the SVG mark (no intrinsic px size) contributes ZERO intrinsic width,
       undersizing the logo's flex chain by one mark and clipping the
       wordmark's overflow-hidden track */
    height: 2.2rem;
    width: auto
  }

  .footer-logo img {
    height: 2.2rem
  }

  .nav-links {
    flex: 0 0 auto;
    gap: 1rem
  }

  .nav-links a {
    font-size: 0.78rem;
    letter-spacing: 0.06em
  }

  .two-col {
    grid-template-columns: 1fr
  }
}

@media (max-width: 480px) {
  .nav-links {
    display: none
  }

  nav .logo img {
    height: 2.3rem
  }
}

.two-col .col-card {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 0;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  transition: border-color 0.3s ease, background 0.3s ease
}

.two-col .col-card:hover {
  border-color: rgba(255, 140, 37, 0.28);
  background: transparent
}

.two-col .col-card h3 {
  font-family: var(--headline-decoded-font);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  transition: color 0.4s
}

.two-col .col-card p {
  font-size: clamp(1.1rem, 1.46vw, 1.22rem);
  line-height: 1.75;
  font-weight: 300
}

/* Numbered list pattern. */
.numbered-list {
  margin-top: 2rem
}

.numbered-block {
  display: grid;
  grid-template-columns: minmax(4rem, 6rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(2.2rem, 4vw, 3.2rem) 0
}

.numbered-block:first-child {
  padding-top: 0
}

.numbered-block-num {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 400;
  color: #f3f7fb;
  letter-spacing: 0.08em;
  line-height: 1.4;
  opacity: 0.9
}

.numbered-block h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
  max-width: none
}

@media (max-width: 640px) {
  .numbered-block {
    grid-template-columns: 1fr;
    gap: 0.5rem
  }
}

.card {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 0;
  padding: 1.6rem 1.8rem;
  position: relative;
  transition: border-color 0.3s ease, background 0.3s ease
}

.card:hover {
  border-color: rgba(255, 140, 37, 0.28);
  background: transparent
}

.card h3 {
  font-family: var(--headline-decoded-font);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  transition: color 0.4s
}

.card p {
  font-size: 1.04rem;
  line-height: 1.65;
  font-weight: 300;
  transition: color 0.4s
}

.product-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
  padding: clamp(1.9rem, 3.4vw, 2.8rem);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: transparent;
  align-items: start
}

.product-panel-solo {
  grid-template-columns: 1fr
}

/* All-black theme: sections are natively dark, so .sec-dark no longer needs
   the backdrop-filter invert trick — it just re-asserts the shared palette. */
.sec-dark {
  --panel-bg: transparent;
  --panel-text: #f3f7fb;
  --panel-surface: rgba(255, 255, 255, 0.05);
  --panel-surface-hover: rgba(255, 255, 255, 0.08);
  --panel-border: rgba(255, 255, 255, 0.14);
  --panel-divider: rgba(255, 255, 255, 0.08);
  --text: #f3f7fb;
  --dim: rgba(243, 247, 251, 0.75);
  --dimmer: rgba(243, 247, 251, 0.6);
}

.dark-block {
  position: relative;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.dark-block > .sec {
  margin-inline: 0;
  padding-inline: 0
}

.product-panel-copy {
  max-width: 720px
}

.product-panel-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(255, 140, 37, 0.32);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3f7fb
}

.product-panel h3 {
  margin-top: 1rem;
  font-family: var(--headline-decoded-font);
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em
}

.product-panel-copy p {
  margin-top: 1rem;
  font-size: clamp(1.06rem, 1.42vw, 1.18rem);
  line-height: 1.75;
  font-weight: 300;
  color: var(--text)
}

.product-panel-meta {
  display: grid;
  gap: 1rem
}

.product-panel-stat {
  padding-top: 0.7rem;
  border-top: 1px solid var(--panel-border)
}

.product-panel-stat:first-child {
  border-top: 0;
  padding-top: 0
}

.product-panel-stat > span {
  display: block;
  margin-bottom: 0.28rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dimmer)
}

.product-panel-stat strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text)
}

.scale-mark {
  text-transform: uppercase;
  color: inherit
}

.scale-mark sup {
  font-size: 0.52em;
  line-height: 0;
  vertical-align: super;
  position: relative;
  top: -0.02em
}

@media (max-width: 768px) {
  .product-panel {
    grid-template-columns: 1fr
  }
}

.cta-end {
  position: relative;
  text-align: left;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  margin-bottom: -1px;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--panel-bg, rgba(255, 255, 255, 0.62));
  color: var(--panel-text, #0f1b2b)
}

.cta-end h2 {
  font-family: var(--headline-decoded-font);
  font-size: clamp(1.85rem, 5.1vw, 3.9rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-left: 0;
  margin-right: 0;
  max-width: 550px;
  transition: color 0.4s
}

.cta-end h2 em {
  color: inherit;
  transition: color 0.4s
}

.cta-end .prose {
  margin-left: 0;
  margin-right: 0;
  margin-top: 1.2rem;
  max-width: 460px;
  transition: color 0.4s
}

footer {
  padding: 2.6rem clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #000;
  border-top: 1px solid rgba(243, 247, 251, 0.08);
  position: relative;
  z-index: 2;
  gap: 0.9rem;
  --dimmer: rgba(243, 247, 251, 0.55)
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 0;
  text-decoration: none
}

.footer-wordmark {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  color: #f3f7fb
}

.footer-logo img {
  display: block;
  height: 2.2rem;
  width: auto;
  max-width: min(78vw, 302px);
  transform: translateY(8.1%)
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem
}

.footer-address {
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.55)
}

.footer-subs {
  display: flex;
  flex-direction: column;
  gap: 0.18rem
}

.footer-subs-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.5);
  margin-bottom: 0.22rem
}

.footer-subs span:not(.footer-subs-label) {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.82)
}

footer span {
  font-size: 0.78rem;
  color: var(--dimmer);
  letter-spacing: 0.05em
}

.footer-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem 4rem
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 1.8rem 4rem
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.62rem
}

.footer-col h4 {
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.5)
}

.footer-col a {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.82);
  text-decoration: none;
  transition: color 0.25s
}

.footer-col a:hover {
  color: #f3f7fb
}

.footer-col a sup {
  font-size: 0.62em;
  vertical-align: 0.42em
}

.footer-soon {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.4)
}

.footer-legal {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(243, 247, 251, 0.08)
}

@media (max-width: 720px) {
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2rem
  }
}

.footer-fine {
  font-size: 0.72rem;
  color: rgba(243, 247, 251, 0.4)
}

.footer-fine sup {
  font-size: 0.7em;
  vertical-align: 0.4em
}

/* Small gray note under the advisors grid (unnamed backers). */
.backers-note {
  margin-top: 2.2rem;
  font-family: var(--mono);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--dim);
  line-height: 1.65
}

.fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)
}

.fade.vis {
  opacity: 1;
  transform: translateY(0)
}

.fade.d1 {
  transition-delay: 0.1s
}

.fade.d2 {
  transition-delay: 0.2s
}

.sub.fade,
.prose.fade,
.card-row.fade {
  filter: blur(10px);
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1)
}

.sub.fade.vis,
.prose.fade.vis,
.card-row.fade.vis {
  filter: none;
  transform: translateY(0)
}

.sec h2.fade+.prose.fade,
.sec h1.fade+.prose.fade,
.cta-end h2.fade+.prose.fade {
  transition-delay: 0.12s
}

.sec .prose.fade+.prose.fade {
  transition-delay: 0.2s
}

.sec .prose.fade+.card-row.fade {
  transition-delay: 0.26s
}

/* Team cells, etched-style: large square photo, name, monospace role.
   No card chrome — the photo carries the cell. */
.card.person {
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent
}

.card.person:hover {
  background: transparent
}

.card.person .avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  margin: 0 0 0.9rem;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.4s ease
}

.card.person:hover .avatar {
  border-color: rgba(255, 140, 37, 0.4)
}

.card.person h3 {
  font-size: 1.02rem;
  margin-bottom: 0.3rem
}

.card.person p {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.6
}

/* Animated SVG primitives shared by the Scale¹ switch and the
   photons-vs-mirrors comparison: flowing dashed paths and pulsing rings. */
.ls-flow {
  animation: lsFlow 1s linear infinite;
  will-change: stroke-dashoffset
}

.ls-flow-slow {
  animation: lsFlow 2.4s linear infinite;
  will-change: stroke-dashoffset
}

@keyframes lsFlow {
  to {
    stroke-dashoffset: -72
  }
}

.ls-ring {
  animation: lsRing 1.4s ease-in-out infinite
}

@keyframes lsRing {
  0%, 100% {
    opacity: 0.5
  }
  50% {
    opacity: 1
  }
}

/* Top-down fabric: alternate which destination port the route is gated to. */
.route-a { animation: routeA 3s ease-in-out infinite }
.route-b { animation: routeB 3s ease-in-out infinite }

@keyframes routeA {
  0%, 42% { opacity: 1 }
  58%, 100% { opacity: 0.1 }
}

@keyframes routeB {
  0%, 42% { opacity: 0.1 }
  58%, 100% { opacity: 1 }
}

/* Pause the looping SVG diagram animations while their host is off-screen (perf). */
.anim-paused .ls-flow,
.anim-paused .ls-flow-slow,
.anim-paused .ls-ring,
.anim-paused .route-a,
.anim-paused .route-b {
  animation-play-state: paused
}

/* Side-by-side Scale¹ visuals: any-to-any port view + top-down fabric. */
.scale-vis-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: center
}

/* Cells of unequal height: stretch both to the row height so their captions sit on
   one line (plain centring drops the shorter cell's caption by half the difference),
   then the shorter figure centres itself in its leftover space via `margin: auto`,
   lining its middle up with the taller figure's. */
.scale-vis-row.scale-vis-aligned {
  align-items: stretch
}

.scale-vis-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.scale-vis-cell .fab-h {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem
}

/* Matched to .tile-svg so the two Scale¹ figures share a width in their row. */
.scale-vis-cell .fab-svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: auto
}

.scale-vis-cell .fab-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* 1U chassis front/rear schematics (side-by-side cells). */
.scale-vis-cell .chassis-svg {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin: 0 auto
}

.scale-vis-cell .chassis-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* Photon¹ package tile: one photonic core die + four bonded chiplets. */
.scale-vis-cell .tile-svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: auto
}

.scale-vis-cell .tile-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* Full-width solo figure row: the pod isometric. */
.scale-vis-row.scale-vis-solo {
  grid-template-columns: 1fr
}

.scale-vis-cell .pod-svg,
.scale-vis-cell .pod-img,
.scale-vis-cell .rack-teaser-img {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  margin: 0 auto
}


.scale-vis-cell .pod-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

@media (max-width: 768px) {
  .scale-vis-row {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }
}

/* LUMA stack diagram: 3-level layout (developer code → LUMA → switching + compute),
   reusing the ls-flow keyframe for the orange connecting lines. */
.luma-stack-svg,
.photon-grid-svg {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto
}

.luma-stack-svg text,
.photon-grid-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* Photon¹ chip animation: square aspect ratio, slightly smaller max-width
   so the square doesn't overpower the text column beside it. */
.photon-grid-svg {
  max-width: 300px
}

@media (max-width: 768px) {
  .luma-stack-svg,
  .photon-grid-svg {
    margin-top: 1.6rem
  }
}