/* Layout tokens — radius, spacing, and geometry (color and surface tokens live in the unification block below) */
:root {
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --shot-radius: clamp(20px, 2.6vw, 28px);
  --max-width: 1180px;
  --header-height: 76px;
  --section-space: clamp(4.75rem, 8vw, 7rem);
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  color: var(--text);
  background: linear-gradient(140deg, var(--bg-shell) 0%, var(--bg) 42%, #0c1016 72%, var(--bg-shell) 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -18vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 24% at 18% 18%, rgba(44, 242, 165, 0.13), transparent 68%),
    radial-gradient(ellipse 30% 22% at 82% 22%, rgba(90, 167, 255, 0.085), transparent 70%),
    radial-gradient(ellipse 40% 28% at 52% 78%, rgba(255, 255, 255, 0.045), transparent 72%);
  filter: blur(18px);
  opacity: 0.68;
  transform: translate3d(-3%, -2%, 0) scale(1.04);
  animation: ambient-spotlight 28s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
  will-change: transform, opacity;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    radial-gradient(ellipse 70% 42% at 50% 100%, rgba(0, 0, 0, 0.46), transparent 70%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.22));
  background-size:
    180px 180px,
    180px 180px,
    auto,
    auto;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 78%);
}

@keyframes ambient-spotlight {
  0% {
    opacity: 0.58;
    transform: translate3d(-4%, -2%, 0) scale(1.04);
  }

  48% {
    opacity: 0.72;
    transform: translate3d(3%, 2%, 0) scale(1.08);
  }

  100% {
    opacity: 0.64;
    transform: translate3d(6%, -3%, 0) scale(1.06);
  }
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  margin-top: 0;
}

main {
  overflow: hidden;
}

.container {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
}

.section {
  position: relative;
  padding: var(--section-space) 0;
}

.section-tight {
  padding-top: 0;
  padding-bottom: clamp(2rem, 5vw, 3.75rem);
}

.section[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* Hero: open sky — soft top luminance localized to the hero */
.hero-section {
  background:
    radial-gradient(ellipse 72% 62% at 22% -12%, rgba(44, 242, 165, 0.12), transparent 62%),
    radial-gradient(ellipse 56% 50% at 88% 16%, rgba(90, 167, 255, 0.08), transparent 64%),
    linear-gradient(180deg, #0b0f16 0%, #121a25 58%, var(--bg) 100%);
}

/* Recessed stage: showcase reads as a "stage" — slightly deeper bg with inset top edge */
.section-showcase {
  background:
    radial-gradient(ellipse 42% 62% at 82% 22%, rgba(44, 242, 165, 0.075), transparent 70%),
    linear-gradient(180deg, #06080c 0%, var(--bg-recessed) 58%, var(--bg) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 14px 34px -18px rgba(0, 0, 0, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.section-showcase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 242, 165, 0.18), rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
}

/* Lifted band: shared standards — gentle vertical luminance for breath */
#product-library + .section-showcase + .section,
.section.section-lifted {
  background:
    radial-gradient(ellipse 46% 58% at 12% 42%, rgba(90, 167, 255, 0.06), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-lifted) 50%, var(--bg) 100%);
}

/* Closing pool: section that holds the CTA panel — luminance pool centered on the panel */
.section:has(> .container > .cta-panel) {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, rgba(44, 242, 165, 0.09), transparent 70%),
    radial-gradient(ellipse 42% 52% at 22% 38%, rgba(90, 167, 255, 0.055), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-shell) 100%);
}

.section:has(> .container > .cta-panel)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44, 242, 165, 0.16), rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}

.eyebrow {
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lead,
.section-copy {
  color: var(--muted);
  max-width: 42rem;
}

.lead {
  font-size: clamp(1.03rem, 1.35vw, 1.14rem);
  line-height: 1.75;
}

.section-copy {
  line-height: 1.72;
}

.section-heading {
  margin-bottom: 2rem;
}

.section h1,
.section h2 {
  font-size: clamp(2.25rem, 4vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 14ch;
}

.section h2 {
  font-size: clamp(1.9rem, 3vw, 3.3rem);
  max-width: 16ch;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  background:
    linear-gradient(180deg, rgba(20, 27, 36, 0.96), rgba(8, 11, 16, 0.9)),
    rgba(6, 7, 10, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 42px rgba(0, 0, 0, 0.24);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
  background:
    linear-gradient(180deg, rgba(24, 33, 44, 0.98), rgba(8, 11, 16, 0.94)),
    rgba(6, 7, 10, 0.96);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 52px rgba(0, 0, 0, 0.34);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  isolation: isolate;
  line-height: 1;
  perspective: 820px;
}

/* Isolated glow lives behind the mark so the SVG itself stays crisp during hover transforms. */
.brand::before {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 50%;
  z-index: 0;
  width: 1.86rem;
  height: 1.86rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: rgba(167, 139, 250, 0.06);
  box-shadow:
    0 0 6px rgba(167, 139, 250, 0.22),
    0 0 16px rgba(160, 140, 255, 0.1),
    0 0 32px rgba(160, 140, 255, 0.04);
  transform: translateY(-50%) scale(0.78);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Brand mark: half-cube sculpture with structural wireframe half and resolved solid half */
.brand-mark {
  position: relative;
  z-index: 1;
  width: 2.66rem;
  height: 2.66rem;
  flex: none;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
  backface-visibility: hidden;
  margin-top: 0.04rem;
  transform: translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.logo-half {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Compensate for the left half's non-scaling stroke that extends ~0.75 screen-px outside
   its geometry. The filled right polygons have no such extension, so we scale them up
   slightly to match the visible bounds of the wireframe half. Origin pinned to the
   centerline (fill-box left edge) so T, C, B stay anchored to x=36 and the seam aligns. */
.logo-half-right {
  transform: scale(1.05);
  transform-origin: 0% 50%;
}

/* Cube vertices in 72x72 viewBox (mathematically derived isometric, edge L=24, center 36,36):
   T(36,12) TR(56.7846,24) BR(56.7846,48) B(36,60) BL(15.2154,48) TL(15.2154,24) C(36,36) */

.logo-glow {
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 360ms ease, transform 360ms ease;
}

.logo-left-shell,
.logo-left-edge,
.logo-right-outline,
.logo-right-edge,
.logo-split {
  fill: none;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  vector-effect: non-scaling-stroke;
}

/* Outer shell + right outline: square caps so T/B corners get a crisp silhouette extension. */
.logo-left-shell,
.logo-right-outline {
  stroke-linecap: square;
}

/* Inner edges + center spine: butt caps so endpoints terminate exactly at shared vertices
   instead of overshooting the shell-defined corners. */
.logo-left-edge,
.logo-right-edge,
.logo-split {
  stroke-linecap: butt;
}

.logo-left-shell {
  stroke: rgba(248, 250, 252, 0.95);
  stroke-width: 1.5;
}

.logo-right-outline {
  stroke: rgba(190, 158, 255, 0.18);
  stroke-width: 0.75;
}

.logo-left-edge {
  stroke: rgba(236, 241, 250, 0.78);
  stroke-width: 1.25;
}

.logo-right-edge {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.85;
}

.logo-split {
  stroke: rgba(236, 241, 250, 0.82);
  stroke-width: 1.25;
}

.logo-top-right,
.logo-side-right {
  transition: opacity 260ms ease;
}

.brand-type {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: translateY(-0.01rem);
  transition: color var(--transition), text-shadow var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover::before,
  .brand:focus-visible::before {
    opacity: 0.78;
    transform: translateY(-50%) scale(1.08);
  }

  /* Counter-shift the whole mark left on hover so the right-half split has room to open
     without colliding with the "Half" wordmark. Layout is unaffected (transform-only). */
  .brand:hover .brand-mark,
  .brand:focus-visible .brand-mark {
    transform: translateX(-4px) scale(1.26);
  }

  .brand:hover .logo-glow,
  .brand:focus-visible .logo-glow {
    opacity: 1;
  }

  .brand:hover .logo-half-left,
  .brand:focus-visible .logo-half-left {
    transform: translateX(-11px) scale(1.04);
  }

  .brand:hover .logo-half-right,
  .brand:focus-visible .logo-half-right {
    transform: translateX(7px) scale(1.05);
  }

  .brand:hover .logo-left-edge,
  .brand:focus-visible .logo-left-edge {
    stroke: rgba(236, 241, 250, 0.88);
  }

  .brand:hover .brand-type,
  .brand:focus-visible .brand-type {
    color: #fbfdff;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark,
  .brand::before,
  .logo-glow,
  .logo-half,
  .logo-left-shell,
  .logo-left-edge,
  .logo-right-outline,
  .logo-right-edge,
  .logo-top-right,
  .logo-side-right,
  .logo-split {
    transition: none;
  }

  .brand:hover::before,
  .brand:focus-visible::before {
    opacity: 0;
    transform: translateY(-50%) scale(0.78);
  }

  .brand:hover .brand-mark,
  .brand:focus-visible .brand-mark,
  .brand:hover .logo-half-left,
  .brand:focus-visible .logo-half-left,
  .brand:hover .logo-half-right,
  .brand:focus-visible .logo-half-right,
  .brand:hover .logo-glow,
  .brand:focus-visible .logo-glow {
    transform: none;
  }
}

.site-nav {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: calc(100% + 0.75rem);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(34, 44, 57, 0.96), rgba(8, 11, 16, 0.96)),
    rgba(11, 14, 18, 0.97);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 200ms ease,
    transform 260ms cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 260ms;
}

body.nav-open .site-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

body.nav-open .nav-toggle {
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.06);
}

.nav-link {
  color: var(--muted);
  padding: 0.7rem 0;
  transition: color var(--transition);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
}

.nav-toggle span {
  width: 1.05rem;
  height: 2px;
  margin: 0 auto;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

body.nav-open .nav-toggle span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

body.nav-open .nav-toggle span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Buttons */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.button,
.button-secondary,
.button-ghost,
.text-link {
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition),
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

.button,
.button-secondary,
.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 3rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
}

.button::before,
.button-secondary::before,
.button-ghost::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 58%);
  opacity: 0.42;
  pointer-events: none;
  z-index: -1;
}

.button {
  background:
    linear-gradient(180deg, rgba(210, 255, 233, 0.62), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #55f7bd 0%, var(--green) 56%, #14b982 100%);
  color: #02110c;
  box-shadow:
    0 14px 34px rgba(44, 242, 165, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(4, 74, 51, 0.36);
}

.button-secondary {
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(44, 242, 165, 0.045), rgba(90, 167, 255, 0.035)),
    rgba(28, 37, 49, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.48);
}

.button-primary {
  min-height: 3.2rem;
  padding-inline: 1.35rem;
}

.button-ghost {
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.028);
  color: var(--text);
}

.button-small {
  min-height: 2.5rem;
  padding-inline: 1rem;
}

.button:hover,
.button-secondary:hover,
.button-ghost:hover,
.text-link:hover {
  transform: scale(1.015);
}

.button:active,
.button-secondary:active,
.button-ghost:active {
  transform: translateY(0) scale(0.985);
}

.button:focus-visible,
.button-secondary:focus-visible,
.button-ghost:focus-visible,
.text-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(11, 13, 16, 0.95),
    0 0 0 5px rgba(44, 242, 165, 0.34);
}

.button:hover {
  background:
    linear-gradient(180deg, rgba(229, 255, 241, 0.7), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #6ffacc 0%, #3df2ad 56%, #18c58c 100%);
  box-shadow:
    0 16px 38px rgba(44, 242, 165, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(4, 74, 51, 0.32);
}

.button-secondary:hover,
.button-ghost:hover {
  border-color: var(--line-strong);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(44, 242, 165, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #e5ebf7;
  font-weight: 600;
}

.text-link::after {
  content: "->";
  opacity: 0.62;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.9);
  outline-offset: 3px;
}

/* Hero */
.hero-section {
  padding-top: 3.5rem;
}

.hero-grid,
.showcase-grid {
  display: grid;
  gap: 2rem;
}

.hero-copy {
  display: grid;
  gap: 1.4rem;
  align-content: center;
}

.hero-note {
  margin: -0.3rem 0 0;
  color: #d4dae6;
  font-size: 0.95rem;
}

.hero-copy h1 {
  max-width: 11ch;
}

.hero-grid-home {
  gap: clamp(2rem, 4vw, 3rem);
}

.brand-hero-copy h1 {
  max-width: 12ch;
}

.brand-hero-copy .lead {
  max-width: 38rem;
}

.hero-visual {
  position: relative;
  display: grid;
  gap: 1rem;
  place-items: center;
  min-height: 28rem;
  isolation: isolate;
}

body[data-page="shoplist"] {
  --halo-color: rgba(44, 242, 165, 0.2);
}

body[data-page="mindpin"] {
  --halo-color: rgba(167, 139, 250, 0.28);
}

body[data-page="shoplist"] .hero-visual::after,
body[data-page="mindpin"] .hero-visual::after {
  content: "";
  position: absolute;
  inset: 10% 4% -8% 4%;
  z-index: -1;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.78;
  pointer-events: none;
  background: radial-gradient(circle, var(--halo-color), transparent 70%);
}

.hero-shot-shell {
  display: grid;
  width: min(21rem, 100%);
  margin: 0;
}

.hero-metrics {
  display: grid;
  gap: 0.9rem;
}

.metric-card,
.mini-panel {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0) 44%, rgba(0, 0, 0, 0.26)),
    linear-gradient(180deg, #1d2228 0%, #171b20 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 18px 40px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.metric-value {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.metric-label,
.mini-label,
.legal-meta {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Homepage showcase: brand-led rotating library module */
.hero-showcase {
  position: relative;
  width: min(100%, 31rem);
  padding: 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.28)),
    linear-gradient(155deg, #22272e 0%, #1b2026 48%, #15191e 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-hero);
  overflow: hidden;
}

.hero-showcase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.72;
}

.hero-showcase::after {
  display: none;
}

.showcase-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.showcase-tab {
  appearance: none;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

.showcase-tab:hover {
  color: var(--text);
  border-color: var(--line-strong);
  transform: scale(1.012);
}

.showcase-tab.is-active {
  color: var(--text);
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(44, 242, 165, 0.12), rgba(90, 167, 255, 0.06)),
    rgba(42, 53, 68, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1px 2px rgba(0, 0, 0, 0.48),
    0 8px 22px rgba(44, 242, 165, 0.08);
}

.showcase-tab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(11, 13, 16, 0.95),
    0 0 0 5px rgba(44, 242, 165, 0.34);
}

.showcase-viewport {
  display: grid;
}

.showcase-panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 1rem;
  align-content: start;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.99);
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 420ms;
}

.showcase-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.showcase-panel-media {
  display: grid;
  place-items: center;
}

.showcase-panel-media .shot-frame,
.shot-frame-showcase-home {
  width: min(18rem, 100%);
  margin: 0 auto;
}

.showcase-panel-body,
.showcase-panel-head {
  display: grid;
  gap: 0.75rem;
}

.showcase-panel h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(1.8rem, 2.8vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.showcase-panel-head p:last-child,
.orbit-card p {
  margin-bottom: 0.35rem;
}

.orbit-card p {
  font-weight: 700;
}

.showcase-panel-head p:last-child,
.orbit-card span {
  color: var(--muted);
  font-size: 0.95rem;
}

.showcase-points {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.showcase-points li {
  position: relative;
  padding-left: 1.25rem;
  color: #dde3ee;
}

.showcase-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--green));
  box-shadow: 0 0 18px rgba(55, 245, 176, 0.42);
}

.showcase-caption {
  position: relative;
  z-index: 1;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Conversion proof strip and short-answer micro sections */
.proof-strip,
.micro-grid {
  display: grid;
  gap: 1rem;
}

.usage-grid,
.feature-shot-grid {
  display: grid;
  gap: 1.25rem;
}

.proof-item,
.micro-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.28)),
    linear-gradient(180deg, #1d2228 0%, #171b20 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.56),
    0 20px 46px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
  will-change: transform;
}

.proof-item {
  padding: 1rem 1.1rem;
}

.proof-item:hover,
.micro-card:hover {
  border-color: var(--line-strong);
  transform: scale(1.02);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.62),
    0 22px 52px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.proof-item strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.98rem;
}

.proof-item span {
  color: var(--muted);
  font-size: 0.92rem;
}

.proof-strip + .micro-grid {
  margin-top: 1rem;
}

.micro-card {
  padding: 1.5rem;
}

.usage-card {
  margin-bottom: 1rem;
}

.micro-card h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
  max-width: 18ch;
}

.micro-list {
  display: grid;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.micro-list li {
  position: relative;
  padding-left: 1.35rem;
  color: #dde3ee;
}

.micro-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--green));
  box-shadow: 0 0 18px rgba(55, 245, 176, 0.42);
}

/* App preview and apps page */
.app-preview-grid,
.apps-grid,
.feature-card-grid,
.screenshot-grid {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

.app-preview-card,
.app-card,
.feature-card,
.shot-card,
.cta-panel,
.legal-shell,
.orbit-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 36%, rgba(0, 0, 0, 0.28)),
    linear-gradient(180deg, #1d2228 0%, #171b20 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transform-style: preserve-3d;
}

.app-preview-card::before,
.app-card::before,
.feature-card::before,
.shot-card::before,
.cta-panel::before,
.legal-shell::before,
.orbit-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0.86;
  transition: opacity var(--transition), background var(--transition);
}

/* Hero tier — promote only the surfaces that lead a composition */
.cta-panel {
  box-shadow: var(--shadow-hero);
}

.cta-panel::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  opacity: 0.95;
}

.app-preview-card,
.app-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
}

.app-preview-card > img,
.app-card > img {
  width: 100%;
  background: rgba(255, 255, 255, 0.016);
}

.app-preview-media,
.app-card-media {
  display: grid;
  place-items: center;
  min-height: 20rem;
  padding: 1rem 1rem 0.35rem;
  background: transparent;
}

.app-preview-media .shot-frame,
.app-card-media .shot-frame {
  width: min(16.25rem, 100%);
}

.app-preview-copy,
.app-card-copy,
.feature-card,
.shot-card figcaption,
.cta-panel,
.legal-shell {
  padding: 1.5rem;
}

.app-preview-copy,
.app-card-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.app-preview-copy .button-row,
.app-card-copy .button-row {
  margin-top: auto;
}

.app-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0 0.75rem;
  margin-bottom: 0.95rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-tag-purple {
  background: rgba(167, 139, 250, 0.18);
  color: #e6d8ff;
}

.app-tag-green {
  background: rgba(55, 245, 176, 0.18);
  color: #c8ffec;
}

.app-tag-yellow {
  background: rgba(90, 167, 255, 0.16);
  color: #d7e9ff;
}

.featured-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #1d2026;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

.featured-card-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  background: #1d2026;
}

.app-preview-card.featured-card,
.app-card.featured-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #1d2026;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

.app-preview-card.featured-card::before,
.app-card.featured-card::before,
.app-preview-card.featured-card-secondary::before,
.app-card.featured-card-secondary::before,
.app-preview-card.featured-card::after,
.app-card.featured-card::after,
.app-preview-card.featured-card-secondary::after,
.app-card.featured-card-secondary::after {
  display: none;
  content: none;
}

.app-preview-copy h3,
.app-card-copy h2 {
  color: #fbfdff;
}

.app-preview-copy > p:not(.app-tag),
.app-card-copy > p:not(.app-tag) {
  color: #cbd4e1;
}

.feature-card-grid-tight {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.feature-card {
  position: relative;
  min-height: 14rem;
}

.card-accent {
  display: inline-flex;
  width: 2.8rem;
  height: 0.3rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
}

.accent-purple {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.2), var(--purple));
}

.accent-yellow {
  background: linear-gradient(90deg, rgba(90, 167, 255, 0.18), var(--blue));
}

.accent-green {
  background: linear-gradient(90deg, rgba(44, 242, 165, 0.18), var(--green));
}

.accent-red {
  background: linear-gradient(90deg, rgba(255, 79, 109, 0.2), var(--red));
}

/* Showcase */
.section-showcase {
  padding-top: 3rem;
}

.showcase-copy {
  display: grid;
  gap: 1rem;
  align-content: center;
}

.showcase-stage {
  position: relative;
  min-height: auto;
  display: grid;
  gap: 1rem;
  place-items: center;
}

.showcase-stage-library {
  align-items: center;
}

.showcase-shot-stack {
  position: relative;
  display: grid;
  gap: 1rem;
  width: min(100%, 23rem);
}

.showcase-shot {
  margin: 0;
}

.orbit-card {
  position: static;
  width: min(100%, 24rem);
  padding: 1rem;
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.3)),
    linear-gradient(180deg, #20252b 0%, #181c21 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.62),
    0 22px 48px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.feature-list {
  display: grid;
  gap: 0.8rem;
}

.feature-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.feature-dot {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  box-shadow: 0 0 20px currentColor;
}

.dot-purple {
  color: var(--purple);
  background: var(--purple);
}

.dot-red {
  color: var(--red);
  background: var(--red);
}

.dot-yellow {
  color: var(--yellow);
  background: var(--yellow);
}

.dot-green {
  color: var(--green);
  background: var(--green);
}

/* Legal */
.page-hero {
  padding-top: 3rem;
}

.hero-grid-compact {
  align-items: center;
}

.hero-badge-stack {
  display: grid;
  gap: 1rem;
}

.legal-shell {
  max-width: 52rem;
}

.legal-section {
  padding-top: 1rem;
}

.legal-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.legal-content p {
  color: #d8dee9;
}

.legal-hub {
  display: grid;
  gap: 0.8rem;
}

.legal-hub a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
}

.legal-hub span,
.legal-hub small {
  color: var(--muted);
}

.legal-hub span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-hub small {
  font-size: 0.9rem;
}

/* Compact cross-link below the homepage app library */
.arcade-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 46rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.94rem;
}

.arcade-teaser span:last-child {
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 560px) {
  .arcade-teaser {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }
}

/* Screenshot cards */
.shot-card {
  display: grid;
  gap: 0.9rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.shot-card::before {
  display: none;
}

/* Screenshot presentation: use one soft device-like surface instead of stacked panels */
.shot-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--shot-radius);
  min-height: 0;
  padding: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    var(--panel-strong);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.62),
    0 22px 52px rgba(0, 0, 0, 0.54),
    0 0 42px rgba(167, 139, 250, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  isolation: isolate;
  transition: box-shadow var(--transition);
}

.shot-frame::before {
  display: none;
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  transition:
    transform var(--transition),
    opacity var(--transition),
    box-shadow var(--transition);
}

.shot-frame-crop {
  width: 100%;
  aspect-ratio: 9 / 15.2;
}

.shot-frame-crop img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.shot-frame-hero {
  width: min(20rem, 100%);
  aspect-ratio: 9 / 16;
}

.shot-frame-showcase {
  width: min(18rem, 100%);
}

.shot-frame-showcase-secondary {
  width: min(12rem, 54vw);
}

.shot-frame-full {
  width: min(18.5rem, 100%);
  margin: 0 auto;
}

.shot-frame-full img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}

.shot-card:hover .shot-frame {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.66),
    0 28px 66px rgba(0, 0, 0, 0.58),
    0 0 48px rgba(55, 245, 176, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.shot-card:hover .shot-frame img {
  transform: scale(1.012);
  opacity: 0.99;
  box-shadow: none;
}

.shot-card figcaption {
  color: var(--muted);
  padding: 0 0.2rem;
  border-top: 0;
}

/* CTA and footer */
.cta-panel {
  display: grid;
  gap: 1.2rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.34)),
    linear-gradient(180deg, #20252b 0%, #171b20 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-footer {
  position: relative;
  padding: 1.5rem 0 3rem;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 10, 0.55));
  overflow: hidden;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0;
  padding-top: 0;
  text-align: center;
}

.footer-meta,
.footer-links a {
  color: var(--muted);
}

.footer-links {
  display: grid;
  grid-template-columns: max-content;
  gap: 0;
  justify-content: center;
  justify-items: center;
  width: min(100%, 36rem);
}

.footer-legal-link {
  display: inline-grid;
  grid-template-columns: minmax(4rem, 1fr) auto minmax(4rem, 1fr);
  align-items: center;
  gap: 0.9rem;
  width: min(100%, 36rem);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  opacity: 0.82;
  text-transform: uppercase;
  transition: color 180ms ease, opacity 180ms ease;
}

.footer-legal-link::before,
.footer-legal-link::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  color: rgba(94, 220, 58, 0.85) !important;
  opacity: 1;
}

.footer-meta p {
  margin-bottom: 0;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
  opacity: 1;
}

.footer-signature-block {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 58% 78% at 50% 46%, #000 40%, rgba(0, 0, 0, 0.62) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 78% at 50% 46%, #000 40%, rgba(0, 0, 0, 0.62) 62%, transparent 100%);
}

.footer-signature {
  position: relative;
  z-index: 0;
  width: 100%;
  margin: clamp(1.1rem, 3vw, 2.25rem) auto 0;
  color: rgba(255, 255, 255, 0.045);
  font-family: inherit;
  font-size: clamp(4.5rem, 18vw, 16.25rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.76;
  text-align: center;
  transition: color 180ms ease;
  user-select: none;
}

.footer-meta {
  width: 100%;
  margin: 0.3rem auto 0;
  color: rgba(255, 255, 255, 0.12) !important;
  font-size: 0.72rem;
  text-align: center;
  transition: color 240ms ease, opacity 240ms ease;
}

/* Animation states — content materializes as it enters the viewport.
   Uses CSS `translate` + `scale` (not `transform`) so the reveal does not collide with the
   transform-based hover tilt, and so a card-level `transform: none !important` reset elsewhere
   in the file leaves these alone. The hidden state is gated on :root.js so a JS-disabled
   visitor still sees everything. */
:root.js [data-animate] {
  --enter-x: 0px;
  --enter-y: 22px;
  --enter-scale: 0.985;
  --reveal-delay: 0ms;
  --reveal-duration: 760ms;
  opacity: 0;
  translate: var(--enter-x) var(--enter-y);
  scale: var(--enter-scale);
  /* Bundles reveal + steady-state transitions because card resets later in the file
     also use !important on transition. We need to win that cascade and still preserve
     hover smoothness on cards that have tilt or color transitions. */
  transition:
    opacity calc(var(--reveal-duration) - 140ms) cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay),
    translate var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay),
    scale var(--reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 140ms ease !important;
  will-change: opacity, translate, scale;
}

:root.js [data-animate="fade-left"] {
  --enter-x: 22px;
  --enter-y: 10px;
}

:root.js [data-animate="fade-right"] {
  --enter-x: -22px;
  --enter-y: 10px;
}

:root.js [data-animate="zoom"] {
  --enter-y: 18px;
  --enter-scale: 0.965;
  --reveal-duration: 880ms;
}

:root.js [data-animate].is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

@media (max-width: 720px) {
  :root.js [data-animate] {
    --enter-y: 14px;
    --reveal-duration: 660ms;
  }

  :root.js [data-animate="fade-left"],
  :root.js [data-animate="fade-right"] {
    --enter-x: 14px;
    --enter-y: 8px;
  }

  :root.js [data-animate="fade-right"] {
    --enter-x: -14px;
  }

  :root.js [data-animate="zoom"] {
    --enter-y: 12px;
    --enter-scale: 0.98;
  }
}

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

  body::before {
    animation: none;
    opacity: 0.52;
    transform: none;
  }

  :root.js [data-animate] {
    --reveal-delay: 0ms;
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }

  .button,
  .button-secondary,
  .button-ghost,
  .text-link,
  .showcase-tab,
  .showcase-panel,
  .shot-frame,
  .proof-item,
  .micro-card,
  .app-preview-card,
  .app-card,
  .feature-card,
  .cta-panel,
  .site-nav,
  body.nav-open .site-nav {
    transition: none;
  }

  .button:hover,
  .button-secondary:hover,
  .button-ghost:hover,
  .text-link:hover,
  .proof-item:hover,
  .micro-card:hover,
  .app-preview-card:hover,
  .app-card:hover,
  .feature-card:hover,
  .cta-panel:hover,
  .orbit-card {
    transform: none;
  }
}

@media (max-width: 767px) {
  .hero-showcase,
  .orbit-card,
  .mini-panel,
  .metric-card,
  .proof-item,
  .cta-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .shot-frame-hero {
    width: min(13rem, 100%);
  }

  .showcase-panel-media .shot-frame,
  .shot-frame-showcase-home {
    width: min(12rem, 100%);
  }

  .hero-visual {
    min-height: 0;
  }
}

/* Tablet */
@media (min-width: 768px) {
  .hero-grid,
  .showcase-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .hero-grid-home {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .usage-grid,
  .feature-shot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-preview-grid,
  .apps-grid,
  .screenshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .micro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-panel {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    align-items: center;
  }

  .footer-links {
    grid-template-columns: max-content;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  body.nav-open {
    overflow: visible;
  }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1.2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .nav-link {
    padding: 0;
  }

  .nav-toggle {
    display: none;
  }

  .hero-showcase {
    justify-self: end;
  }

  .showcase-stage {
    min-height: 42rem;
  }

  .showcase-shot-stack {
    width: min(100%, 24rem);
    justify-self: center;
  }

  .showcase-shot-secondary {
    position: absolute;
    left: -2rem;
    bottom: 1rem;
  }

  .orbit-card {
    position: absolute;
    width: min(14rem, 42vw);
  }

  /* Depth stagger: one foreground, one mid, one receding */
  .orbit-card-yellow {
    left: 0;
    top: 44%;
    border-color: var(--line-strong);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.62),
      0 2px 6px rgba(0, 0, 0, 0.62),
      0 22px 54px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .orbit-card-red {
    right: 8%;
    bottom: 6%;
  }

  .orbit-card-purple {
    top: 5%;
    right: 4%;
    opacity: 0.94;
    border-color: rgba(90, 167, 255, 0.16);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.58),
      0 24px 58px rgba(0, 0, 0, 0.44),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .app-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .screenshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-preview-card:hover,
  .app-card:hover,
  .feature-card:hover,
  .cta-panel:hover {
    border-color: var(--line-strong);
    transform: scale(1.02);
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.66),
      0 18px 44px rgba(0, 0, 0, 0.52),
      inset 0 1px 0 rgba(255, 255, 255, 0.075);
  }

  .app-preview-card.featured-card:hover,
  .app-card.featured-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: scale(1.02);
    background: #1d2026;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48);
  }

  .app-preview-card.featured-card-secondary:hover,
  .app-card.featured-card-secondary:hover {
    background: #1d2026;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48);
  }

  .app-preview-card:hover::before,
  .app-card:hover::before,
  .feature-card:hover::before,
  .cta-panel:hover::before {
    opacity: 0.72;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  }

  .app-preview-card.featured-card:hover::before,
  .app-card.featured-card:hover::before,
  .app-preview-card.featured-card-secondary:hover::before,
  .app-card.featured-card-secondary:hover::before {
    display: none;
    content: none;
  }

  .app-preview-card,
  .app-card,
  .feature-card,
  .cta-panel {
    transition:
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color var(--transition),
      box-shadow var(--transition);
    will-change: transform;
  }
}

/* Large screens (27-32" displays) */
@media (min-width: 1600px) {
  :root {
    --max-width: 1440px;
    --section-space: clamp(6rem, 8vw, 9rem);
  }

  .container {
    width: min(calc(100% - 3rem), var(--max-width));
  }

  .hero-grid,
  .showcase-grid {
    gap: 3.5rem;
  }

  .hero-grid-home {
    gap: 4rem;
  }

  .footer-inner {
    column-gap: 4rem;
    padding-top: 2.25rem;
  }
}

/* Background unification: true-black foundation with separated surfaces */
:root {
  --bg-shell: #000000;
  --bg-recessed: #0b0c0f;
  --bg: #000000;
  --bg-lifted: #0f1115;
  --panel: #161b22;
  --panel-rich: #1a2028;
  --panel-strong: #1d242d;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.1);
  --text: #e6e8eb;
  --muted: #9aa3ad;
  --purple: #9aa3ad;
  --red: #9aa3ad;
  --orange: #9aa3ad;
  --blue: #9aa3ad;
  --yellow: #f5c84c;
  --green: #9aa3ad;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-hero: 0 1px 2px rgba(0, 0, 0, 0.32);
  --glass-surface: #161b22;
  --glass-surface-strong: #1a2028;
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-highlight: transparent;
  --halo-color: transparent;
  --transition: 140ms ease;
  --transition-slow: 140ms ease;
}

body {
  background: #000000 !important;
  color: #e6e8eb;
}

body::before,
body::after,
.section-showcase::before,
.section:has(> .container > .cta-panel)::before,
.brand::before,
.button::before,
.button-secondary::before,
.button-ghost::before,
.hero-showcase::before,
.hero-showcase::after,
.app-preview-card::before,
.app-card::before,
.feature-card::before,
.shot-card::before,
.cta-panel::before,
.legal-shell::before,
.orbit-card::before,
.showcase-points li::before,
.micro-list li::before,
.text-link::after,
body[data-page="shoplist"] .hero-visual::after,
body[data-page="mindpin"] .hero-visual::after {
  content: none !important;
  display: none !important;
}

.section,
.hero-section,
.page-hero {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.section-showcase,
.section.section-lifted,
#product-library + .section-showcase + .section,
.section:has(> .container > .cta-panel),
.site-footer {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.site-header,
.site-header.is-scrolled {
  background: #0b0c0f !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-nav,
body.nav-open .site-nav {
  background: #0b0c0f !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav-toggle,
body.nav-open .nav-toggle {
  background: #181c22 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.metric-card,
.mini-panel,
.hero-showcase,
.proof-item,
.micro-card,
.app-preview-card,
.app-card,
.feature-card,
.shot-frame,
.cta-panel,
.legal-shell,
.orbit-card,
.showcase-tab,
.button,
.button-secondary,
.button-ghost {
  background: #161b22 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.hero-showcase,
.cta-panel,
.showcase-tab.is-active,
.button,
.app-preview-card.featured-card,
.app-card.featured-card,
.app-preview-card.featured-card-secondary,
.app-card.featured-card-secondary,
.shot-frame,
.metric-card,
.mini-panel,
.proof-item,
.micro-card,
.feature-card,
.orbit-card {
  background: #1a2028 !important;
  border-color: rgba(255, 255, 255, 0.085) !important;
}

.site-footer,
.footer-inner {
  background-image: none !important;
}

.footer-inner {
  border-top: 0 !important;
}

.button,
.button-secondary,
.button-ghost,
.showcase-tab,
.nav-toggle,
.text-link,
.app-tag,
.app-tag-purple,
.app-tag-green,
.app-tag-yellow {
  color: #e6e8eb !important;
}

.button,
.button-secondary,
.button-ghost,
.showcase-tab,
.nav-toggle,
.text-link,
.app-preview-card,
.app-card,
.feature-card,
.proof-item,
.micro-card,
.cta-panel,
.shot-frame,
.hero-showcase,
.metric-card,
.mini-panel,
.orbit-card {
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease !important;
  transform: none !important;
}

.button:hover,
.button-secondary:hover,
.button-ghost:hover,
.showcase-tab:hover,
.showcase-tab.is-active,
.nav-toggle:hover,
.app-preview-card:hover,
.app-card:hover,
.feature-card:hover,
.proof-item:hover,
.micro-card:hover,
.cta-panel:hover,
.shot-card:hover .shot-frame,
.hero-showcase:hover,
.metric-card:hover,
.mini-panel:hover,
.orbit-card:hover {
  background: #262c36 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36) !important;
  transform: none !important;
}

.button:active,
.button-secondary:active,
.button-ghost:active,
.app-preview-card:active,
.app-card:active,
.feature-card:active,
.proof-item:active,
.micro-card:active,
.cta-panel:active {
  transform: none !important;
}

.button:focus-visible,
.button-secondary:focus-visible,
.button-ghost:focus-visible,
.text-link:focus-visible,
.showcase-tab:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.1) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

.showcase-tab.is-active {
  color: #e6e8eb !important;
}

.app-tag,
.app-tag-purple,
.app-tag-green,
.app-tag-yellow {
  background: #1f242c !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.card-accent,
.accent-purple,
.accent-yellow,
.accent-green,
.accent-red {
  background: #6b7480 !important;
}

.feature-dot,
.dot-purple,
.dot-red,
.dot-yellow,
.dot-green {
  background: #6b7480 !important;
  color: #6b7480 !important;
  box-shadow: none !important;
}

.showcase-points li,
.micro-list li {
  padding-left: 0 !important;
}

.showcase-panel,
.showcase-panel.is-active {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.showcase-tab,
.button,
.button-secondary,
.button-ghost,
.site-nav,
.nav-toggle,
.hero-showcase,
.metric-card,
.mini-panel,
.proof-item,
.micro-card,
.app-preview-card,
.app-card,
.feature-card,
.cta-panel,
.shot-frame,
.legal-shell,
.orbit-card,
.section-showcase,
.hero-section,
.site-footer {
  background-image: none !important;
}

.brand-type {
  text-shadow: none !important;
}

.lead,
.section-copy,
.metric-label,
.mini-label,
.legal-meta,
.showcase-caption,
.eyebrow,
.legal-content p,
.app-preview-copy > p:not(.app-tag),
.app-card-copy > p:not(.app-tag),
.showcase-panel-head p:last-child,
.orbit-card span,
.nav-link {
  color: #9aa3ad !important;
}

.legal-meta,
.eyebrow {
  color: #6b7480 !important;
}

.section h1,
.section h2,
.showcase-panel h2,
.app-preview-copy h3,
.app-card-copy h2,
.text-link,
.nav-link:hover,
.nav-link.is-active,
.brand-type {
  color: #e6e8eb !important;
}

/* Premium hover reintroduction: controlled 3D response, no visual noise */
@media (hover: hover) and (pointer: fine) {
  .metric-card,
  .mini-panel,
  .hero-showcase,
  .proof-item,
  .micro-card,
  .app-preview-card,
  .app-card,
  .feature-card,
  .cta-panel,
  .legal-shell,
  .orbit-card,
  .shot-frame {
    transition:
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms ease,
      border-color 180ms ease,
      background-color 180ms ease !important;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, box-shadow, border-color;
  }

  .metric-card:hover,
  .mini-panel:hover,
  .hero-showcase:hover,
  .proof-item:hover,
  .micro-card:hover,
  .app-preview-card:hover,
  .app-card:hover,
  .feature-card:hover,
  .cta-panel:hover,
  .legal-shell:hover,
  .orbit-card:hover,
  .shot-card:hover .shot-frame {
    background: #262c36 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.34),
      0 10px 22px rgba(0, 0, 0, 0.28) !important;
    transform: perspective(1200px) scale(1.022) rotateX(0.45deg) rotateY(-0.55deg) !important;
  }

  .brand-mark,
  .logo-half,
  .logo-left-shell,
  .logo-left-edge,
  .logo-right-outline,
  .logo-right-edge,
  .logo-top-right,
  .logo-side-right,
  .logo-split {
    transition:
      transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
      stroke 220ms ease,
      opacity 220ms ease !important;
  }

  .brand:hover .brand-mark,
  .brand:focus-visible .brand-mark {
    transform: translateX(-5px) scale(1.28) !important;
  }

  .brand:hover .logo-half-left,
  .brand:focus-visible .logo-half-left {
    transform: translateX(-16px) scale(1.04) !important;
  }

  .brand:hover .logo-half-right,
  .brand:focus-visible .logo-half-right {
    transform: translateX(11px) scale(1.05) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-card,
  .mini-panel,
  .hero-showcase,
  .proof-item,
  .micro-card,
  .app-preview-card,
  .app-card,
  .feature-card,
  .cta-panel,
  .legal-shell,
  .orbit-card,
  .shot-frame,
  .brand-mark,
  .logo-half,
  .logo-left-shell,
  .logo-left-edge,
  .logo-right-outline,
  .logo-right-edge,
  .logo-top-right,
  .logo-side-right,
  .logo-split {
    transition: none !important;
  }

  .metric-card:hover,
  .mini-panel:hover,
  .hero-showcase:hover,
  .proof-item:hover,
  .micro-card:hover,
  .app-preview-card:hover,
  .app-card:hover,
  .feature-card:hover,
  .cta-panel:hover,
  .legal-shell:hover,
  .orbit-card:hover,
  .shot-card:hover .shot-frame,
  .brand:hover .brand-mark,
  .brand:focus-visible .brand-mark,
  .brand:hover .logo-half-left,
  .brand:focus-visible .logo-half-left,
  .brand:hover .logo-half-right,
  .brand:focus-visible .logo-half-right {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32) !important;
  }
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: #262c36;
  color: #e6e8eb;
  transform: translateY(-150%);
  transition: transform 140ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

#main-content:focus {
  outline: none;
}

/* Header polish: smoked-glass layer floating over the page. */
.site-header,
.site-header.is-scrolled {
  background-color: rgba(12, 14, 18, 0.55) !important;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.01)
  ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 10px 28px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(30px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(155%) !important;
}

.site-header.is-scrolled {
  background-color: rgba(12, 14, 18, 0.7) !important;
}

.header-inner {
  gap: clamp(0.8rem, 2vw, 1.45rem);
}

.brand {
  gap: 0.14rem;
  min-height: var(--header-height);
}

.brand-mark {
  margin-top: 0;
}

.brand-type {
  color: #e6e8eb !important;
  font-weight: 720;
  letter-spacing: -0.03em;
}

.site-nav {
  gap: 0.2rem;
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  color: #9aa3ad !important;
  font-weight: 600;
  line-height: 1;
  padding: 0.68rem 0.78rem;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  background: rgba(255, 255, 255, 0.038);
  border-color: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #e6e8eb !important;
}

.site-nav .button.button-small.button-ghost {
  min-height: 2.55rem;
  padding: 0.68rem 1rem;
  border-color: transparent !important;
  background: #5edc3a !important;
  background-image: none !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(0, 0, 0, 0.86) !important;
}

.site-nav .button.button-small.button-ghost:hover,
.site-nav .button.button-small.button-ghost:focus-visible {
  background: #70ea4c !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: rgba(0, 0, 0, 0.86) !important;
  transform: none !important;
}

.site-nav .button.button-small.button-ghost:active {
  background: #4fc331 !important;
  background-image: none !important;
  color: rgba(0, 0, 0, 0.86) !important;
}

.nav-toggle {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(31, 36, 44, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 4px 10px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.nav-toggle:hover,
body.nav-open .nav-toggle {
  background: #262c36 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body.nav-open .site-nav {
  background: rgba(14, 17, 22, 0.985) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 20px 44px rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(26px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(140%) !important;
}

@media (max-width: 1023px) {
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(6, 8, 11, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none;
    animation: nav-backdrop-in 220ms ease both;
  }
}

@keyframes nav-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 1024px) {
  .site-nav {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 0.25rem;
  }

  .nav-link {
    padding: 0.58rem 0.78rem;
  }

  .site-nav .button.button-small.button-ghost {
    margin-left: 0.35rem;
  }
}

@media (max-width: 767px) {
  .site-header,
  .site-header.is-scrolled {
    background-color: rgba(12, 14, 18, 0.55) !important;
    backdrop-filter: blur(30px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(155%) !important;
  }

  .site-header.is-scrolled {
    background-color: rgba(12, 14, 18, 0.7) !important;
  }

  .site-nav {
    border-radius: 1.15rem;
    padding: 0.75rem;
  }

  .site-nav .button.button-small.button-ghost {
    width: 100%;
  }

  .nav-link {
    padding: 0.875rem 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav,
  .nav-link,
  .nav-toggle,
  .site-nav .button.button-small.button-ghost {
    transition: none !important;
  }
}

/* Living background: neutral cursor-following torch above section fills, below content. */
body.motion-light-enabled {
  --cursor-light-radius: 460px;
  --cursor-light-energy: 1;
}

body.motion-light-enabled::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: calc(var(--cursor-light-radius) * 2) !important;
  height: calc(var(--cursor-light-radius) * 2) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      ellipse 72% 58% at center,
      rgba(255, 255, 255, 0.135) 0%,
      rgba(255, 255, 255, 0.082) 22%,
      rgba(255, 255, 255, 0.038) 44%,
      rgba(255, 255, 255, 0.013) 62%,
      rgba(255, 255, 255, 0) 78%
    ) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: var(--cursor-light-energy, 1) !important;
  mix-blend-mode: screen;
  transform:
    translate3d(
      calc(var(--cursor-light-x, 50vw) - var(--cursor-light-radius)),
      calc(var(--cursor-light-y, 50vh) - var(--cursor-light-radius)),
      0
    ) !important;
  transition: opacity 360ms cubic-bezier(0.45, 0, 0.2, 1) !important;
  animation: none !important;
  will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {
  .metric-card,
  .mini-panel,
  .hero-showcase,
  .proof-item,
  .micro-card,
  .app-preview-card,
  .app-card,
  .feature-card,
  .cta-panel,
  .legal-shell,
  .orbit-card,
  .shot-frame {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform-style: preserve-3d;
    background: #161b22 !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.085) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 2px 8px rgba(0, 0, 0, 0.42) !important;
    transition:
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms ease,
      border-color 180ms ease,
      background-color 180ms ease !important;
  }

  .metric-card:hover,
  .mini-panel:hover,
  .hero-showcase:hover,
  .proof-item:hover,
  .micro-card:hover,
  .app-preview-card:hover,
  .app-card:hover,
  .feature-card:hover,
  .cta-panel:hover,
  .legal-shell:hover,
  .orbit-card:hover,
  .shot-card:hover .shot-frame {
    background: #1d242d !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 8px 18px rgba(0, 0, 0, 0.46) !important;
    transform:
      perspective(1100px)
      scale(1.038)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y)) !important;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  body.motion-light-enabled::before {
    content: none !important;
    display: none !important;
  }

  .metric-card,
  .mini-panel,
  .hero-showcase,
  .proof-item,
  .micro-card,
  .app-preview-card,
  .app-card,
  .feature-card,
  .cta-panel,
  .legal-shell,
  .orbit-card,
  .shot-frame {
    transform-style: flat;
  }
}

/* Calm surfaces: legal shells, screenshot frames, CTA panels, and informational
   cards keep their surface feedback but never lift or rotate in 3D. This pairs
   with the trimmed JS tilt list so these areas read as stable, not playful. */
.proof-item,
.proof-item:hover,
.micro-card,
.micro-card:hover,
.cta-panel,
.cta-panel:hover,
.legal-shell,
.legal-shell:hover,
.shot-frame,
.shot-card:hover .shot-frame {
  transform: none !important;
  transform-style: flat;
}

.hero-trust {
  margin: -0.2rem 0 0;
  color: #9aa6b8;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* CTA hierarchy: solid primary green and neutral secondary graphite. */
.button:not(.button-secondary):not(.button-ghost) {
  background: #5edc3a !important;
  background-image: none !important;
  border: none !important;
  color: rgba(0, 0, 0, 0.86) !important;
  transition:
    background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.button:not(.button-secondary):not(.button-ghost):hover,
.button:not(.button-secondary):not(.button-ghost):focus-visible {
  background: #70ea4c !important;
  background-image: none !important;
  color: rgba(0, 0, 0, 0.86) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.button:not(.button-secondary):not(.button-ghost):active {
  background: #4fc331 !important;
  background-image: none !important;
  color: rgba(0, 0, 0, 0.86) !important;
}

.button-secondary {
  background: #1e232b !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  transition:
    background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: #262c36 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.button-secondary:active {
  background: #181c22 !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Final micro-polish: restrained depth, accent states, and optical headline tightening. */
main > .section:nth-of-type(2n) {
  background: transparent !important;
  background-image: none !important;
}

main > .section:nth-of-type(3n) {
  background: transparent !important;
  background-image: none !important;
}

.hero-copy h1,
.brand-hero-copy h1,
.page-hero h1,
.section-heading h2 {
  letter-spacing: -0.02em;
}

[data-parallax]:not(.orbit-card) {
  transform: translate3d(0, var(--parallax-shift, 0px), 0);
  will-change: transform;
}

.text-link:hover,
.footer-links a:hover,
.footer-links a:focus-visible {
  color: rgba(94, 220, 58, 0.85) !important;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible,
.button-secondary:focus-visible,
.button-ghost:focus-visible,
.showcase-tab:focus-visible {
  outline-color: rgba(94, 220, 58, 0.35) !important;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  [data-parallax] {
    transform: none;
    will-change: auto;
  }
}