:root {
  --showcase-accent: #b9f44a;
  --showcase-alt: #8ed6ff;
}

.showcase-body {
  background: #08090c;
}

.showcase-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 8.5rem 0 4rem;
  display: grid;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 76% 32%, color-mix(in srgb, var(--showcase-accent) 22%, transparent), transparent 31rem),
    radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--showcase-alt) 13%, transparent), transparent 34rem),
    #08090c;
  isolation: isolate;
}

.showcase-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.3;
  background-image: radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 1.4px);
  background-size: 20px 20px;
  mask-image: linear-gradient(125deg, transparent 4%, #000 42%, transparent 88%);
}

.showcase-hero::after {
  position: absolute;
  z-index: -1;
  right: -14rem;
  bottom: -18rem;
  width: min(78vw, 76rem);
  height: 34rem;
  content: "";
  border: 4.6rem solid var(--showcase-accent);
  border-left-color: transparent;
  border-radius: 50%;
  opacity: .78;
  filter: drop-shadow(0 2rem 3rem color-mix(in srgb, var(--showcase-accent) 22%, transparent));
  transform: rotate(-9deg) skewX(-10deg);
}

.showcase-hero-inner {
  width: min(calc(100% - 2rem), 1380px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.28fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.showcase-copy {
  position: relative;
  z-index: 3;
}

.showcase-back,
.showcase-kicker {
  color: var(--showcase-accent);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.showcase-back {
  display: inline-block;
  margin-bottom: clamp(4rem, 9vh, 7rem);
  color: rgba(255,255,255,.55);
}

.showcase-back:hover,
.showcase-back:focus-visible { color: var(--showcase-accent); }

.showcase-copy h1 {
  max-width: 12ch;
  margin: 1.2rem 0 1.6rem;
  color: #fff;
  font-size: clamp(4rem, 7vw, 8rem);
  line-height: .88;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.showcase-copy > p:not(.showcase-kicker) {
  max-width: 620px;
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

.showcase-meta {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.showcase-meta span {
  padding: .5rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.62);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.product-stage {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--showcase-accent) 24%, transparent), transparent 32%),
    linear-gradient(145deg, rgba(28,30,36,.92), rgba(5,6,9,.96));
  box-shadow: 0 3rem 7rem rgba(0,0,0,.48);
  outline: none;
}

.product-stage:focus-visible {
  box-shadow: 0 0 0 3px var(--showcase-accent), 0 3rem 7rem rgba(0,0,0,.48);
}

.stage-scenes {
  position: relative;
  height: 570px;
}

.stage-scene {
  position: absolute;
  inset: 0;
  padding: 4.5rem 6% 6rem;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(7%);
  transition: opacity .38s ease, transform .5s cubic-bezier(.2,.75,.25,1);
}

.stage-scene.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.device-laptop {
  position: relative;
  width: min(88%, 770px);
  padding: .8rem .8rem 0;
  border-radius: 1rem 1rem .25rem .25rem;
  background: #17191d;
  box-shadow: 0 3rem 5rem rgba(0,0,0,.55);
}

.device-laptop::before {
  position: absolute;
  top: .35rem;
  left: 50%;
  width: .25rem;
  height: .25rem;
  content: "";
  border-radius: 50%;
  background: #555a62;
}

.device-screen {
  min-height: 360px;
  overflow: hidden;
  border-radius: .55rem .55rem .15rem .15rem;
  background: #f4f1e9;
  color: #111;
}

.device-bar {
  height: 2.2rem;
  padding: 0 .8rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  border-bottom: 1px solid rgba(0,0,0,.12);
  color: #5c6067;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.device-bar i {
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: #c4c5c7;
}

.device-bar i:first-child { background: var(--showcase-accent); }
.device-bar span { margin-left: auto; }

.device-ui {
  min-height: 325px;
  padding: clamp(1.6rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 1rem;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--showcase-accent) 18%, transparent), transparent 28%),
    #f4f1e9;
}

.device-ui-copy span,
.mobile-stage-copy span,
.system-card > span {
  display: block;
  margin-bottom: .8rem;
  color: color-mix(in srgb, var(--showcase-accent) 72%, #111);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.device-ui-copy strong {
  display: block;
  max-width: 9ch;
  font-size: clamp(2rem, 3.4vw, 4rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.device-ui-copy p {
  max-width: 36ch;
  margin: 1rem 0 0;
  color: #5a5e65;
  font-size: .68rem;
}

.device-ui-copy b {
  width: 5rem;
  height: 1.3rem;
  margin-top: 1.3rem;
  display: block;
  border-radius: 2rem;
  background: var(--showcase-accent);
}

.data-orbit {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 1;
  margin-left: auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--showcase-accent) 50%, #c6c3bd);
  border-radius: 50%;
  background: #fff;
}

.data-orbit::before,
.data-orbit::after {
  position: absolute;
  content: "";
  border: 2px solid transparent;
  border-radius: 50%;
}

.data-orbit::before {
  inset: 10%;
  border-top-color: var(--showcase-accent);
  border-right-color: var(--showcase-alt);
  transform: rotate(32deg);
}

.data-orbit::after {
  inset: 27%;
  border-bottom-color: var(--showcase-accent);
  background: color-mix(in srgb, var(--showcase-accent) 10%, #fff);
}

.data-orbit strong,
.data-orbit small {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
}

.data-orbit strong { font-size: clamp(2rem, 3vw, 3.7rem); line-height: 1; }
.data-orbit small { margin-top: .35rem; font-size: .48rem; font-weight: 900; text-transform: uppercase; }

.laptop-base {
  position: absolute;
  right: -7%;
  bottom: -1.15rem;
  left: -7%;
  height: 1.3rem;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(#aeb1b5, #43464b);
}

.device-phone {
  position: absolute;
  right: -2%;
  bottom: -16%;
  z-index: 3;
  width: 8.2rem;
  height: 16.3rem;
  padding: .55rem;
  border: 2px solid #35383e;
  border-radius: 1.65rem;
  background: #0e1013;
  box-shadow: 0 2rem 3rem rgba(0,0,0,.5);
  transform: rotate(5deg);
}

.phone-screen {
  height: 100%;
  padding: 2.6rem .8rem 1rem;
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--showcase-accent) 34%, transparent), transparent 35%),
    #f4f1e9;
  color: #111;
}

.phone-screen span,
.phone-screen strong { display: block; }
.phone-screen span { font-size: .45rem; font-weight: 900; text-transform: uppercase; }
.phone-screen strong { margin: .35rem 0 1rem; font-size: 1.2rem; line-height: 1; }
.phone-screen i { height: .38rem; margin: .55rem 0; display: block; border-radius: 1rem; background: #d6d3cd; }
.phone-screen i:first-of-type {
  height: 4.4rem;
  border-radius: .7rem;
  background:
    radial-gradient(circle, var(--showcase-accent) 0 15%, transparent 16%),
    color-mix(in srgb, var(--showcase-accent) 12%, #fff);
}

.authentic-laptop {
  background: linear-gradient(145deg, #20242b, #08090b 72%);
  box-shadow: 0 3rem 5rem rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.08);
}

.project-screen {
  position: relative;
  height: 325px;
  overflow: hidden;
  background: #fff;
}

.project-screen::after {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  content: "";
  pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.3));
}

.project-screen img,
.phone-screen--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-screen--report img { object-position: 50% 7%; }
.project-screen--tyra-home img { object-position: 50% 4%; }
.project-screen--max { background: linear-gradient(145deg, #061820, #087f97); }
.project-screen--max img { object-position: left center; }

.screen-provenance {
  position: absolute;
  z-index: 2;
  right: .85rem;
  bottom: .7rem;
  padding: .35rem .5rem;
  color: #fff;
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(6,7,10,.72);
  backdrop-filter: blur(8px);
}

.phone-screen--image {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #fff;
}

.phone-screen--image::before {
  position: absolute;
  z-index: 2;
  top: .65rem;
  left: 50%;
  width: 2.4rem;
  height: .28rem;
  content: "";
  border-radius: 1rem;
  background: rgba(8,9,12,.82);
  transform: translateX(-50%);
}

.phone-screen--report img {
  object-position: 50% center;
  transform: scale(1.65);
  transform-origin: 50% 74%;
}
.phone-screen--tyra img { object-position: 50% 12%; }
.phone-screen--max img { object-position: 50% center; }

.mobile-stage {
  width: min(760px, 90%);
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  transform: translateY(-1rem);
}

.mobile-stage .device-phone {
  position: relative;
  right: auto;
  bottom: auto;
  width: 12.5rem;
  height: 25rem;
  padding: .7rem;
  border-radius: 2.6rem;
  transform: rotate(-5deg);
}

.mobile-stage .phone-screen { padding: 4rem 1.5rem 1.5rem; border-radius: 2rem; }
.mobile-stage .phone-screen span { font-size: .62rem; }
.mobile-stage .phone-screen strong { font-size: 2.2rem; }
.mobile-stage .phone-screen i:first-of-type { height: 9rem; }

.mobile-stage-copy strong,
.system-card strong {
  display: block;
  color: #fff;
  font-size: clamp(2.8rem, 4.4vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.mobile-stage-copy p {
  max-width: 35ch;
  margin: 1rem 0 0;
  color: rgba(255,255,255,.64);
  font-size: .88rem;
  line-height: 1.5;
}

.system-stage {
  position: relative;
  width: min(800px, 90%);
  min-height: 390px;
}

.system-orbits {
  position: absolute;
  top: 50%;
  right: 0;
  width: 24rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--showcase-accent) 54%, transparent);
  border-radius: 50%;
  transform: translateY(-50%);
}

.system-orbits::before,
.system-orbits::after {
  position: absolute;
  content: "";
  border: 1px solid color-mix(in srgb, var(--showcase-accent) 34%, transparent);
  border-radius: 50%;
}

.system-orbits::before { inset: 16%; }
.system-orbits::after { inset: 34%; background: color-mix(in srgb, var(--showcase-accent) 13%, transparent); }
.system-orbits i {
  position: absolute;
  width: .9rem;
  height: .9rem;
  border: 3px solid #101116;
  border-radius: 50%;
  background: var(--showcase-accent);
}
.system-orbits i:nth-child(1) { top: 8%; left: 32%; }
.system-orbits i:nth-child(2) { right: 4%; bottom: 31%; }
.system-orbits i:nth-child(3) { bottom: 4%; left: 38%; }

.system-card {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: 61%;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(10,11,15,.88);
  backdrop-filter: blur(16px);
  transform: translateY(-50%);
}

.system-card ul {
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
}

.system-card li {
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  font-size: .67rem;
  font-weight: 800;
}

.artifact-stack {
  position: relative;
  width: min(820px, 94%);
  min-height: 430px;
  perspective: 1200px;
}

.artifact-card {
  position: absolute;
  z-index: 2;
  width: 34%;
  height: 360px;
  margin: 0;
  overflow: hidden;
  border: .55rem solid #f8f6ef;
  background: #fff;
  box-shadow: 0 2.2rem 4rem rgba(0,0,0,.52);
  transition: transform .35s ease, box-shadow .35s ease;
}

.artifact-card img {
  width: 100%;
  height: calc(100% - 2rem);
  display: block;
  object-fit: cover;
  object-position: 50% 9%;
}

.artifact-card figcaption {
  height: 2rem;
  padding: .48rem .6rem 0;
  color: #15171b;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.artifact-card--left { top: 3.8rem; left: 2%; transform: rotate(-7deg); }
.artifact-card--center { top: .65rem; left: 33%; z-index: 3; transform: rotate(1deg); }
.artifact-card--right { top: 3.3rem; right: 1%; transform: rotate(7deg); }

.artifact-stack-copy {
  position: absolute;
  z-index: 6;
  right: 1rem;
  bottom: 0;
  width: min(360px, 52%);
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: rgba(8,9,12,.86);
  box-shadow: 0 1.3rem 3rem rgba(0,0,0,.34);
  backdrop-filter: blur(14px);
}

.artifact-stack-copy span,
.artifact-brand-card span {
  display: block;
  margin-bottom: .45rem;
  color: var(--showcase-accent);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.artifact-stack-copy strong {
  display: block;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: .88;
  letter-spacing: -.055em;
}

.artifact-stack--landscape .artifact-card,
.artifact-stack--max .artifact-card {
  width: 57%;
  height: 300px;
}

.artifact-stack--landscape .artifact-card--left,
.artifact-stack--max .artifact-card--left { top: 4rem; left: 0; transform: rotate(-4deg); }

.artifact-stack--landscape .artifact-card--right,
.artifact-stack--max .artifact-card--right { top: 1rem; right: 0; transform: rotate(4deg); }

.artifact-stack--landscape .artifact-card img { object-position: 50% 5%; }
.artifact-stack--max .artifact-card img { object-position: center; }
.artifact-stack--max .artifact-card--left img { object-position: 28% center; }
.artifact-stack--max .artifact-card--product img { object-fit: contain; padding: 1rem; }

.artifact-brand-card {
  position: absolute;
  z-index: 5;
  bottom: 1.1rem;
  left: 5%;
  width: min(300px, 44%);
  padding: 1.15rem;
  border: 1px solid rgba(255,255,255,.18);
  background: #fff;
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.4);
  transform: rotate(-2deg);
}

.artifact-brand-card img {
  width: min(180px, 82%);
  max-height: 78px;
  margin: 0 auto 1rem;
  display: block;
  object-fit: contain;
}

.artifact-brand-card span { margin: 0; color: #15171b; text-align: center; }
.artifact-brand-card--max { width: min(350px, 46%); }
.artifact-brand-card--max img { width: min(280px, 92%); }

.stage-controls {
  position: absolute;
  z-index: 5;
  right: 2rem;
  bottom: 1.4rem;
  left: 2rem;
  display: flex;
  gap: .5rem;
}

.stage-controls button {
  flex: 1;
  padding: .8rem .7rem;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: rgba(255,255,255,.45);
  font: inherit;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.stage-controls button span { margin-right: .35rem; color: rgba(255,255,255,.28); }
.stage-controls button.is-active { border-color: var(--showcase-accent); color: #fff; }
.stage-controls button.is-active span { color: var(--showcase-accent); }

.showcase-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #d7d3cb;
}

.showcase-facts div { padding: 1.7rem clamp(1rem, 3vw, 2.2rem); background: #f4f1e9; }
.showcase-facts span,
.showcase-facts strong { display: block; }
.showcase-facts span { margin-bottom: .35rem; color: #71747a; font-size: .61rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.showcase-facts strong { font-size: .95rem; }

.showcase-story {
  padding: clamp(5rem, 10vw, 10rem) 0;
  background: #f4f1e9;
}

.story-chapter {
  width: min(calc(100% - 2rem), 1050px);
  margin: 0 auto clamp(6rem, 11vw, 10rem);
  display: grid;
  grid-template-columns: .34fr 1.66fr;
  gap: clamp(2rem, 6vw, 6rem);
}

.story-number {
  color: var(--showcase-accent-dark, #739d20);
  font-size: .75rem;
  font-weight: 900;
}

.story-number::after {
  width: 3.5rem;
  height: .5rem;
  margin-top: 1rem;
  display: block;
  content: "";
  background-image: radial-gradient(circle, var(--showcase-accent-dark, #739d20) 2px, transparent 2.5px);
  background-size: .8rem .5rem;
}

.story-copy > span {
  color: #74777d;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.story-copy h2 {
  max-width: 15ch;
  margin: 1.1rem 0 1.8rem;
  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.story-copy p,
.story-copy li {
  max-width: 760px;
  color: #44484f;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}

.story-copy ul { padding-left: 1.2rem; }

.showcase-quote {
  position: relative;
  width: min(calc(100% - 2rem), 1160px);
  margin: 0 auto clamp(6rem, 11vw, 10rem);
  padding: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--showcase-accent) 30%, transparent), transparent 28rem),
    #0a0b0f;
  color: #fff;
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 850;
  line-height: .94;
  letter-spacing: -.06em;
}

.showcase-quote::after {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 10rem;
  height: 5rem;
  content: "";
  opacity: .42;
  background-image: radial-gradient(circle, #fff 2px, transparent 2.5px);
  background-size: .9rem .9rem;
}

.showcase-capabilities {
  width: min(calc(100% - 2rem), 1160px);
  margin: 0 auto clamp(6rem, 11vw, 10rem);
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--showcase-accent);
  color: #0b0d0f;
  transform: rotate(-1deg);
}

.showcase-capabilities > span { font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.showcase-capabilities div { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.showcase-capabilities strong,
.showcase-capabilities a {
  padding: .7rem .85rem;
  border: 1px solid rgba(0,0,0,.34);
  color: inherit;
  font-size: .76rem;
  font-weight: 850;
  text-decoration: none;
}
.showcase-capabilities a:hover,
.showcase-capabilities a:focus-visible { background: #08090c; color: #fff; }

.showcase-health { --showcase-accent: #68f2c2; --showcase-alt: #36a9ff; --showcase-accent-dark: #167b63; }
.showcase-beauty { --showcase-accent: #ff5dad; --showcase-alt: #ffbd59; --showcase-accent-dark: #a22061; }
.showcase-global { --showcase-accent: #d9ff57; --showcase-alt: #8b6cff; --showcase-accent-dark: #657e08; }

.homepage-showcases {
  padding: clamp(6rem, 12vw, 11rem) 0;
  overflow: hidden;
  background: #07080b;
  color: #fff;
}

.homepage-showcases .section-heading { margin-bottom: 3rem; }
.homepage-showcases .section-heading h2 { max-width: 16ch; }

.homepage-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.homepage-showcase-card {
  position: relative;
  min-height: 610px;
  padding: 1.6rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 70% 22%, color-mix(in srgb, var(--showcase-accent) 22%, transparent), transparent 45%),
    #111319;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform .25s ease, border-color .25s ease;
}

.homepage-showcase-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .25;
  background-image: radial-gradient(circle, var(--showcase-accent) 1px, transparent 1.4px);
  background-size: 17px 17px;
  mask-image: linear-gradient(145deg, transparent 20%, #000, transparent 80%);
}

.homepage-showcase-card::after {
  position: absolute;
  z-index: -1;
  right: -8rem;
  bottom: 8rem;
  width: 27rem;
  height: 10rem;
  content: "";
  border: 2.5rem solid var(--showcase-accent);
  border-left-color: transparent;
  border-radius: 50%;
  opacity: .55;
  transform: rotate(-10deg);
}

.homepage-showcase-card:hover,
.homepage-showcase-card:focus-visible {
  border-color: var(--showcase-accent);
  transform: translateY(-.55rem);
}

.homepage-showcase-card > span {
  color: var(--showcase-accent);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.homepage-showcase-card h3 {
  max-width: 10ch;
  margin: 2.2rem 0 1rem;
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.homepage-showcase-card p {
  max-width: 32ch;
  margin: 0;
  color: rgba(255,255,255,.66);
}

.mini-device {
  position: relative;
  width: 90%;
  height: 190px;
  margin: auto auto 1rem;
  overflow: hidden;
  border: .6rem solid #202329;
  border-radius: .8rem .8rem .2rem .2rem;
  background: #0b0d10;
  box-shadow: 0 2rem 3rem rgba(0,0,0,.4);
  transform: perspective(700px) rotateY(-9deg) rotateX(3deg);
}

.mini-device img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mini-device--health img { object-position: 50% 7%; }
.mini-device--beauty img { object-position: 50% 8%; }
.mini-device--global img { object-position: left center; }

.mini-device::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 25% 72%, rgba(255,255,255,.06));
}

.homepage-showcase-card b {
  color: var(--showcase-accent);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .showcase-hero-inner { grid-template-columns: 1fr; }
  .showcase-copy h1 { max-width: 14ch; }
  .showcase-back { margin-bottom: 3rem; }
  .product-stage { min-height: 600px; }
  .homepage-showcase-grid { grid-template-columns: 1fr; }
  .homepage-showcase-card { min-height: 480px; }
  .mini-device { width: min(580px, 88%); margin-top: 3rem; }
}

@media (max-width: 700px) {
  .showcase-hero { padding-top: 6rem; }
  .showcase-copy h1 { font-size: clamp(3.8rem, 17vw, 6rem); }
  .showcase-hero::after { right: -18rem; bottom: -12rem; }
  .product-stage { min-height: 500px; }
  .stage-scenes { height: 420px; }
  .stage-scene { padding: 3.5rem 5% 5rem; }
  .device-laptop { width: 94%; padding: .45rem .45rem 0; }
  .device-screen { min-height: 230px; }
  .project-screen { height: 198px; }
  .screen-provenance { right: .45rem; bottom: .4rem; font-size: .4rem; }
  .device-ui { min-height: 198px; grid-template-columns: 1fr; padding: 1.3rem; }
  .device-ui-copy strong { font-size: 2.2rem; }
  .device-ui-copy p,
  .data-orbit { display: none; }
  .device-phone { width: 6.3rem; height: 12.7rem; right: -1%; bottom: -25%; }
  .phone-screen { padding: 2rem .55rem .6rem; }
  .phone-screen i:first-of-type { height: 3rem; }
  .mobile-stage { grid-template-columns: .7fr 1.3fr; gap: 1.2rem; }
  .mobile-stage .device-phone { width: 8.5rem; height: 17.5rem; border-radius: 1.8rem; }
  .mobile-stage .phone-screen { padding: 2.8rem .8rem .8rem; border-radius: 1.25rem; }
  .mobile-stage .phone-screen strong { font-size: 1.4rem; }
  .mobile-stage .phone-screen i:first-of-type { height: 5rem; }
  .mobile-stage-copy strong,
  .system-card strong { font-size: 2.5rem; }
  .mobile-stage-copy p { display: none; }
  .system-orbits { right: -40%; width: 18rem; }
  .system-card { width: 80%; padding: 1.4rem; }
  .artifact-stack { min-height: 320px; }
  .artifact-card { width: 38%; height: 260px; border-width: .35rem; }
  .artifact-card--left { top: 2.8rem; left: 0; }
  .artifact-card--center { top: .5rem; left: 31%; }
  .artifact-card--right { top: 2.6rem; right: 0; }
  .artifact-stack-copy { right: 0; width: 58%; padding: .75rem; }
  .artifact-stack-copy strong { font-size: 1.9rem; }
  .artifact-stack--landscape .artifact-card,
  .artifact-stack--max .artifact-card { width: 66%; height: 215px; }
  .artifact-stack--landscape .artifact-card--left,
  .artifact-stack--max .artifact-card--left { top: 3.2rem; }
  .artifact-brand-card,
  .artifact-brand-card--max { bottom: .4rem; left: 1%; width: 48%; padding: .65rem; }
  .artifact-brand-card img { max-height: 42px; margin-bottom: .55rem; }
  .stage-controls { right: 1rem; bottom: 1rem; left: 1rem; }
  .stage-controls button { text-align: center; }
  .stage-controls button span { display: block; margin: 0 0 .2rem; }
  .showcase-facts { grid-template-columns: 1fr; }
  .story-chapter { grid-template-columns: 1fr; gap: 1.5rem; }
  .story-copy h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .showcase-quote { padding: 4rem 2rem; font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .homepage-showcase-card { min-height: 530px; padding: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-scene,
  .homepage-showcase-card { transition: none; }
}