/* ============================================================================
   AXELERA v3 — "Porcelain & Prism"
   ----------------------------------------------------------------------------
   The opposite pole from v2. Daylight studio, frosted visionOS-grade panels,
   and the one thing real thick glass always gives you: prismatic dispersion.

   The frosted panel (.fg) is built from:

     1  refraction   backdrop blur + saturate over pastel light washes
     2  body         milk-white translucent fill + pointer specular
     3  bevel        a crisp top inner highlight, like a polished edge
     4  hairline     an outer 0.5px ink line that seats the panel on the page
     5  prism        an iridescent ring that strengthens on hover — the
                     rainbow a lens edge actually throws on a white desk
     6  contact      two shadows: a wide soft drop and a tight dark contact
   ========================================================================= */

/* ------------------------------- tokens --------------------------------- */
:root {
  --paper: #f3f0e9;
  --paper-2: #ece8de;
  --ink: #17150f;
  --ink-2: rgba(23, 21, 15, 0.74);
  --ink-3: rgba(23, 21, 15, 0.55);
  /* the smallest labels on the page need more than 0.55 to clear AA on cream */
  --ink-3-strong: rgba(23, 21, 15, 0.78);
  --gold: #f4be18;
  --gold-bright: #ffd75e;
  --gold-text: #7a5a06;
  --gold-deep: #8a6a10;

  --fg-blur: 30px;
  --fg-sat: 1.5;

  --r-lg: 30px;
  --r-md: 20px;
  --r-pill: 999px;

  --mx: 30%;
  --my: 10%;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --d-fast: 0.28s;
  --d-mid: 0.55s;

  --shadow-fg: 0 24px 60px -28px rgba(60, 45, 10, 0.35),
    0 2px 6px -2px rgba(30, 25, 10, 0.12);

  --pad: clamp(1.25rem, 4vw, 2.25rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

/* ------------------------------- reset ---------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  font-size: clamp(15.5px, 10px + 0.417vw, 22px);
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  font-size: 1.12rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

sup {
  font-size: 0.5em;
  opacity: 0.75;
}

.skip {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: top var(--d-fast) var(--ease-out);
}

.skip:focus-visible {
  top: 1rem;
}

/* ------------------------------- stage -----------------------------------
   A daylight studio: three pastel washes drifting behind the frost, plus a
   slow caustic sheen. Bright enough that panels have light to bend. */
.stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #f6f3ec, var(--paper) 40%, #efeadf);
  overflow: clip;
}

.wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.75;
  will-change: transform;
}

.wash-a {
  width: 58vmax;
  height: 44vmax;
  left: -12vmax;
  top: -14vmax;
  background: radial-gradient(closest-side, rgba(255, 205, 66, 0.4), transparent 70%);
  animation: drift-a 28s ease-in-out infinite alternate;
}

.wash-b {
  width: 50vmax;
  height: 42vmax;
  right: -16vmax;
  top: 4vmax;
  background: radial-gradient(closest-side, rgba(122, 178, 255, 0.32), transparent 70%);
  animation: drift-b 34s ease-in-out infinite alternate;
}

.wash-c {
  width: 52vmax;
  height: 40vmax;
  left: 18vmax;
  bottom: -18vmax;
  background: radial-gradient(closest-side, rgba(255, 150, 190, 0.22), transparent 70%);
  animation: drift-c 40s ease-in-out infinite alternate;
}

.caustic {
  position: absolute;
  inset: -25%;
  background: conic-gradient(
    from 0deg at 60% 35%,
    transparent 0deg,
    rgba(255, 255, 255, 0.5) 30deg,
    transparent 90deg,
    rgba(255, 236, 170, 0.35) 190deg,
    transparent 260deg
  );
  mix-blend-mode: soft-light;
  animation: spin 110s linear infinite;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

@keyframes drift-a {
  to {
    transform: translate(8vmax, 6vmax) scale(1.1);
  }
}

@keyframes drift-b {
  to {
    transform: translate(-7vmax, 8vmax) scale(1.08);
  }
}

@keyframes drift-c {
  to {
    transform: translate(6vmax, -7vmax) scale(1.12);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* ============================ THE FROST =================================== */
.fg {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background:
    radial-gradient(
      140% 110% at var(--mx) var(--my),
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.42) 45%,
      rgba(255, 255, 255, 0.3) 70%
    );
  -webkit-backdrop-filter: blur(var(--fg-blur)) saturate(var(--fg-sat));
  backdrop-filter: blur(var(--fg-blur)) saturate(var(--fg-sat));
  box-shadow: var(--shadow-fg),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 0.5px rgba(23, 21, 15, 0.1);
  transition: transform var(--d-mid) var(--ease-spring),
    box-shadow var(--d-mid) var(--ease-out);
}

/* 5 — the prism ring. Faint at rest, unmistakable on hover. */
.fg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 210deg,
    rgba(255, 90, 90, 0.5),
    rgba(255, 200, 60, 0.5) 17%,
    rgba(110, 220, 130, 0.45) 34%,
    rgba(80, 180, 255, 0.5) 52%,
    rgba(150, 110, 255, 0.45) 70%,
    rgba(255, 110, 200, 0.45) 86%,
    rgba(255, 90, 90, 0.5)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(2px) saturate(1.4);
  opacity: 0.28;
  transition: opacity var(--d-mid) var(--ease-out);
  pointer-events: none;
}

.fg:hover::after {
  opacity: 0.75;
}

/* no backdrop-filter → near-opaque porcelain */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fg {
    background: rgba(252, 250, 245, 0.96);
  }
}

.tilt {
  transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  will-change: transform;
}

.card {
  padding: var(--pad);
}

.card:hover {
  box-shadow: 0 36px 90px -34px rgba(60, 45, 10, 0.45),
    0 3px 8px -2px rgba(30, 25, 10, 0.14),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 0.5px rgba(23, 21, 15, 0.12);
}

/* ------------------------------ buttons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 560;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--d-fast) var(--ease-spring),
    box-shadow var(--d-fast) var(--ease-out), filter var(--d-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-gold {
  color: #241a00;
  background:
    radial-gradient(120% 160% at 30% 0%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #dca90e);
  box-shadow: 0 12px 28px -10px rgba(200, 150, 10, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(122, 84, 0, 0.3);
}

.btn-gold:hover {
  filter: brightness(1.05);
}

.btn-frost {
  color: var(--ink);
  background: radial-gradient(
    130% 130% at 30% 0%,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.55)
  );
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 24px -12px rgba(60, 45, 10, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 0.5px rgba(23, 21, 15, 0.14);
}

.btn-frost:hover {
  box-shadow: 0 14px 32px -14px rgba(60, 45, 10, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 0.5px rgba(23, 21, 15, 0.2);
}

.btn-sm {
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
}

/* -------------------------------- nav ------------------------------------ */
.nav-wrap {
  position: fixed;
  top: 1rem;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  padding: 0.55rem 0.65rem 0.55rem 1.25rem;
  border-radius: var(--r-pill);
  max-width: 58rem;
  width: 100%;
  transition: transform var(--d-mid) var(--ease-out);
}

.nav.condensed {
  transform: scale(0.96);
}

.nav-brand {
  display: flex;
  flex-shrink: 0;
}

.nav-brand img {
  height: 2.3rem;
  width: auto;
}

@media (max-width: 620px) {
  .nav-brand img {
    height: 2rem;
  }
}

.nav-links {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1.4rem);
  margin-inline: auto;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.35rem 0.55rem;
  border-radius: var(--r-pill);
  transition: color var(--d-fast), background var(--d-fast);
}

.nav-links a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.65);
}

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

  .nav {
    max-width: max-content;
    gap: 1rem;
  }
}

/* ------------------------------- type ------------------------------------ */
.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

h1,
h2,
h3 {
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: normal;
}

h2 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  font-weight: 660;
  font-variation-settings: 'wdth' 96;
  margin-top: 0.5rem;
}

.section-lede {
  color: var(--ink-2);
  margin-top: 1rem;
}

/* ------------------------------- hero ------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  /* the pair is centred in the viewport as one block (align-content) and both
     columns hang from its top edge (align-items), so the clips start on the
     headline instead of floating against nothing. */
  align-items: start;
  align-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(6.5rem, 12vh, 9rem) var(--gutter) 4rem;
  max-width: 90rem;
  margin-inline: auto;
}

.hero-h1 {
  /* single unbreakable words ("Performance.") have to fit the copy column,
     which is 0.52 of the measure in the two-column band: see the min() below. */
  font-size: clamp(2.8rem, 1.6rem + 5.6vw, 6rem);
  font-weight: 730;
  font-variation-settings: 'wdth' 100, 'opsz' 144;
  margin-top: 1.1rem;
}

.hero-h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #e2a90c, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin-top: 1.4rem;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

/* ------------- the hero demo pair: one LLM clip, one vision clip --------- */
.hero-demos {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 33rem;
  min-width: 0;
  /* the h1's own top margin plus its cap-line offset, so the first clip's top
     edge lands on the cap line of "Edge". */
  margin-top: calc(1.1rem + 0.137 * min(6.6vw, 6rem));
}

.hero-demo {
  min-width: 0;
}

.hero-demo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}

.hero-demo figcaption {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.45;
  text-wrap: normal;
}

.hero-demo figcaption b {
  font-weight: 640;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

/* ---------- the Gen AI clip, framed on its chat column -------------------- *
 * The clip is rendered at exactly this ratio and fills the frame, so nothing
 * is cropped away at runtime and the type stays readable once the tile is
 * under about 500px wide.                                                    */
.clip-chat {
  position: relative;
  aspect-ratio: 2466 / 1128;
  overflow: clip;
  border-radius: var(--r-md);
}

.clip-chat video {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Below the two-column band the copy and the clips share one left edge, and
   the pair runs the full measure side by side while there is room for it. */
@media (max-width: 1099.98px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-demos {
    grid-template-columns: 1fr 1fr;
    justify-self: stretch;
    max-width: none;
    margin-top: clamp(2rem, 5vh, 3.2rem);
  }
}

@media (min-width: 1100px) {
  .hero-h1 {
    font-size: min(6.6vw, 6rem);
  }
}

@media (max-width: 720px) {
  .hero-demos {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------ sections --------------------------------- */
.section {
  padding: clamp(5rem, 12vh, 8.5rem) var(--gutter);
  max-width: 90rem;
  margin-inline: auto;
}

.section-head {
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* ------------------------- silicon: one slab ------------------------------ */
.slab {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--r-lg);
}

.slab-col {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
}

.slab-col + .slab-col {
  border-left: 1px solid rgba(23, 21, 15, 0.09);
}

.slab-featured {
  background: linear-gradient(
    180deg,
    rgba(255, 240, 190, 0.55),
    rgba(255, 240, 190, 0.12)
  );
}

.slab-media {
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  margin-block: 1.2rem 0.4rem;
}

.slab-media img {
  width: 64%;
  filter: drop-shadow(0 22px 34px rgba(60, 45, 10, 0.3));
  transition: transform 0.8s var(--ease-out);
}

.slab-col:hover .slab-media img {
  transform: scale(1.06);
}

.slab-col h3 {
  font-size: 1.65rem;
  font-weight: 700;
}

.slab-line {
  color: var(--ink-2);
  font-size: 0.93rem;
  margin-top: 0.4rem;
  min-height: 3em;
}

.slab-peak {
  margin-top: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.slab-peak strong {
  font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem);
  font-weight: 760;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #d9a60d, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.slab-peak span {
  color: var(--ink-3);
  font-weight: 540;
}

.slab-peak-tba strong {
  background: linear-gradient(180deg, rgba(23, 21, 15, 0.75), rgba(23, 21, 15, 0.4));
  -webkit-background-clip: text;
  background-clip: text;
}

.bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(23, 21, 15, 0.1);
  overflow: clip;
  margin-top: 0.6rem;
}

.bar span {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 70%, var(--gold-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-out) 0.2s;
}

.in-view .bar span {
  transform: scaleX(1);
}

.bar-tba span {
  width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--tba-stripe, rgba(23, 21, 15, 0.22)) 0 8px,
    transparent 8px 16px
  );
}

.kv-note {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.kv-note:hover {
  color: var(--gold-text);
}

.kv {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(23, 21, 15, 0.09);
}

.kv div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.92rem;
}

.kv dt {
  color: var(--ink-3);
  flex-shrink: 0;
  white-space: nowrap;
}

.kv dd {
  font-weight: 580;
  text-align: right;
}

.chiplets {
  display: grid;
  grid-template-columns: repeat(2, 60px);
  gap: 10px;
  transform: rotate(-8deg);
}

.chiplets i {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(244, 190, 24, 0.25));
  box-shadow: inset 0 0 0 1px rgba(23, 21, 15, 0.12),
    0 12px 24px -10px rgba(60, 45, 10, 0.35);
  animation: chip-pulse 4s ease-in-out infinite;
}

.chiplets i:nth-child(2) {
  animation-delay: 0.5s;
}

.chiplets i:nth-child(3) {
  animation-delay: 1s;
}

.chiplets i:nth-child(4) {
  animation-delay: 1.5s;
}

@keyframes chip-pulse {
  50% {
    box-shadow: inset 0 0 0 1px rgba(180, 140, 20, 0.5),
      0 14px 30px -10px rgba(200, 150, 10, 0.4);
  }
}

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

  .slab-col + .slab-col {
    border-left: 0;
    border-top: 1px solid rgba(23, 21, 15, 0.09);
  }

  .slab-line {
    min-height: 0;
  }
}

.badge {
  display: inline-block;
  width: max-content;
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(23, 21, 15, 0.18);
}

.badge-now {
  color: #241a00;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 6px 16px -8px rgba(200, 150, 10, 0.6);
}

.badge-next {
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px rgba(180, 140, 20, 0.5);
}

.badge-later {
  color: var(--ink-3);
}

/* -------------------------------- tech ------------------------------------ */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.tech-figure {
  font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem);
  font-weight: 780;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tech h3 {
  margin-top: 0.6rem;
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.tech p:last-child {
  margin-top: 0.7rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* ------------------------------ products ---------------------------------- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2vw, 1.8rem);
}

.prod {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: clip;
}

.prod-wide {
  grid-column: span 2;
}

.prod-media {
  display: grid;
  place-items: center;
  padding: 1.6rem;
  min-height: 220px;
}

/* Height-capped with an auto width, so each card's photograph paints the same
   number of CSS pixels at every viewport width: 74, 66, 233, 175, 454 and 371.
   A vw-based sizes therefore described a width the layout never uses and sent
   the browser several rungs too high, decoding a 640px file to paint 66. The
   markup carries fixed pixel sizes instead, so the rung follows the display's
   own density and keeps the headroom a printed board needs. */
.prod-media img {
  max-height: 235px;
  width: auto;
  transition: transform 0.7s var(--ease-out);
  filter: drop-shadow(0 18px 28px rgba(60, 45, 10, 0.28));
}

.prod:hover .prod-media img {
  transform: translateY(-6px) scale(1.04);
}

.prod-body {
  padding: 1.3rem var(--pad) var(--pad);
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid rgba(23, 21, 15, 0.07);
}

.prod-body h3 {
  font-size: 1.25rem;
  font-weight: 680;
  margin-top: 0.55rem;
}

.prod-form {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin-top: 0.2rem;
}

.prod .kv {
  font-size: 0.88rem;
}

.prod-cta {
  margin-top: auto;
  padding-top: 1.2rem;
  font-weight: 620;
  font-size: 0.95rem;
  color: var(--gold-text);
  text-decoration: none;
  transition: color var(--d-fast);
}

.prod-cta:hover {
  color: var(--gold-deep);
}

@media (max-width: 1100px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .prod-wide {
    grid-column: span 1;
  }
}

/* ----------------------------- industries --------------------------------- *
 * Ten link cards on one measure: the seven industries and three applications
 * Axelera groups on axelera.ai. All ten carry the panel alone, because only
 * eight scene photographs exist and none of them is an Axelera deployment.
 * A twelve-column track lets each row close exactly: 4 + 3 industries and
 * 3 applications on desktop, pairs plus one full-width card on tablet.       */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.ind-grid > .ind-card {
  grid-column: span 12;
}

@media (min-width: 44rem) and (max-width: 68.74rem) {
  .ind-grid > .ind-card:nth-of-type(-n + 6),
  .ind-grid > .ind-card:nth-of-type(8),
  .ind-grid > .ind-card:nth-of-type(9) {
    grid-column: span 6;
  }
}

@media (min-width: 68.75rem) {
  .ind-grid > .ind-card:nth-of-type(-n + 4) {
    grid-column: span 3;
  }

  .ind-grid > .ind-card:nth-of-type(n + 5) {
    grid-column: span 4;
  }
}

.ind-group {
  grid-column: 1 / -1;
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3-strong);
}

.ind-group:first-child {
  margin-top: 0;
}

.ind-card {
  position: relative;
  display: flex;
  min-height: 12.5rem;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border-radius: var(--r-md);
  overflow: clip;
  color: inherit;
  text-decoration: none;
}

.ind-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ind-name {
  font-size: 1.12rem;
  font-weight: 700;
}

.ind-line {
  margin-top: 0.55rem;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.ind-go {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 620;
  color: var(--gold-text);
}

.ind-card:hover .ind-go {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .ind-card { min-height: 0; }
}

/* ------------------------------ software ----------------------------------- */
.soft {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.soft-copy .btn {
  margin-top: 1.8rem;
}

.soft-demo {
  overflow: clip;
  padding: 0;
}

.soft-demo-chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid rgba(23, 21, 15, 0.1);
}

.soft-demo-chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(23, 21, 15, 0.18);
}

.soft-demo-chrome span {
  margin-left: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.soft-demo video {
  width: 100%;
  display: block;
}

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

/* -------------------------------- fork ------------------------------------- */
.fork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
  justify-content: center;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.fork-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  text-decoration: none;
  padding: clamp(1.6rem, 3vw, 2.2rem);
}

.fork-panel h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.fork-panel p {
  color: var(--ink-2);
  font-size: 0.98rem;
}

.fork-lit {
  background:
    radial-gradient(
      140% 110% at var(--mx) var(--my),
      rgba(255, 234, 160, 0.92),
      rgba(255, 222, 110, 0.6) 55%,
      rgba(255, 213, 94, 0.45)
    );
}

.fork-go {
  margin-top: 0.8rem;
  font-weight: 640;
  color: var(--gold-text);
}

.fork-human {
  margin-top: 2.2rem;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.95rem;
}

/* ------------------------------- footer ------------------------------------ */
.footer {
  border-top: 1px solid rgba(23, 21, 15, 0.1);
  padding: 3rem var(--gutter) 4rem;
  background: rgba(255, 255, 255, 0.35);
}

.footer-inner {
  max-width: 90rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 3rem;
}

.footer-inner img {
  height: 22px;
  width: auto;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-inline: auto;
}

/* --ink-3 is 0.55 alpha: on the cream footer that lands at 3.2:1 once the
   sitemap's own 0.88 opacity is composited in, under the 4.5:1 AA floor for
   text this size. --ink-2 clears it with room to spare. */
.footer nav a {
  font-size: 0.9rem;
  color: var(--ink-2);
  text-decoration: none;
}

.footer nav a:hover {
  color: var(--ink);
}

.footer p {
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* ------------------------------- reveals ------------------------------------ */
/* The resting blur is mounted an instant before the reveal rather than at
   parse time. In Chromium any filter other than none forces the element onto
   its own composited surface sized to its paint bounds whether or not it is on
   screen, so every reveal sitting at opacity 0 held a blurred surface for
   content nobody can see. A CSS transition reads its timing from the
   after-change style, so carrying the 0.9s transition on .in-view leaves the
   reveal animating exactly as it did while the arming itself is instantaneous.
   main.js adds .armed a viewport and a half ahead of the reveal. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: none;
}

.reveal.armed,
.armed .reveal {
  filter: blur(6px);
}

.in-view.reveal,
.in-view .reveal {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.9s var(--ease-out) var(--rd, 0s),
    transform 0.9s var(--ease-out) var(--rd, 0s),
    filter 0.9s var(--ease-out) var(--rd, 0s);
}

.in-view.reveal.armed,
.in-view .reveal.armed {
  filter: none;
}

/* --------------------------- reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wash,
  .caustic,
  .chiplets i {
    animation: none !important;
  }

  .reveal,
  .reveal.armed,
  .armed .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .tilt {
    transform: none !important;
  }

  .bar span {
    transform: scaleX(1);
    transition: none;
  }
}