:root {
  --ink: #f7f4ec;
  --muted: #adbbbc;
  --soft: #dce8e8;
  --paper: #050607;
  --panel: rgba(12, 17, 18, 0.78);
  --panel-strong: rgba(15, 23, 23, 0.92);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(54, 208, 194, 0.44);
  --teal: #36d0c2;
  --emerald: #0f5e59;
  --amber: #d89b52;
  --panel-edge: rgba(54, 208, 194, 0.22);
  --panel-edge-soft: rgba(255, 255, 255, 0.1);
  --panel-glass: rgba(7, 12, 13, 0.86);
  --panel-glow: 0 24px 90px rgba(0, 0, 0, 0.38), 0 0 34px rgba(54, 208, 194, 0.08);
  --shadow: 0 34px 120px rgba(0, 0, 0, 0.58);
  --max: 1296px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 70% 0%, rgba(54, 208, 194, 0.12), transparent 34vw),
    radial-gradient(circle at 18% 18%, rgba(216, 155, 82, 0.06), transparent 26vw),
    #050607;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(rgba(54, 208, 194, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.7;
  pointer-events: none;
}

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

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

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 5vw, 72px);
  background: linear-gradient(180deg, rgba(5, 6, 7, 0.94), rgba(5, 6, 7, 0.48));
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
}

.brand,
.site-nav,
.hero-actions,
.button-row,
.hero-rail,
.site-footer {
  display: flex;
  align-items: center;
}

.brand {
  width: clamp(112px, 12vw, 152px);
}

.brand img {
  width: 100%;
  height: auto;
}

.site-nav {
  gap: clamp(14px, 2.8vw, 34px);
  color: rgba(220, 232, 232, 0.72);
  font-size: 14px;
  font-weight: 800;
}

.raem-nav {
  gap: clamp(12px, 1.8vw, 24px);
}

.site-nav a {
  position: relative;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.site-nav a::after {
  position: absolute;
  inset: auto 0 -6px 0;
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(54, 208, 194, 0.85), rgba(216, 155, 82, 0.6));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-nav a:hover {
  color: #fff;
  text-shadow: 0 0 18px rgba(54, 208, 194, 0.24);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after {
    transition: none;
  }
}

.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-trigger span {
  color: rgba(54, 208, 194, 0.8);
  font-size: 11px;
  transform: translateY(1px);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  z-index: 50;
  display: grid;
  min-width: 280px;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(54, 208, 194, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(54, 208, 194, 0.14), transparent 38%),
    rgba(4, 8, 9, 0.94);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(54, 208, 194, 0.11);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(18px);
}

.nav-dropdown::before {
  position: absolute;
  inset: -18px 0 auto;
  height: 18px;
  content: "";
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown a {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.nav-dropdown a:hover {
  border-color: rgba(54, 208, 194, 0.28);
  background: rgba(54, 208, 194, 0.075);
}

.nav-dropdown strong {
  color: #f7f4ec;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.nav-dropdown small {
  color: rgba(220, 232, 232, 0.62);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.nav-dropdown-wide {
  right: 0;
  left: auto;
  min-width: min(340px, calc(100vw - 32px));
  transform: translate(0, -4px);
}

.nav-group:hover .nav-dropdown-wide,
.nav-group:focus-within .nav-dropdown-wide {
  transform: translate(0, 0);
}

.nav-product-group {
  position: relative;
}

.nav-product-parent {
  position: relative;
  min-height: 76px;
  background:
    radial-gradient(circle at 0% 0%, rgba(54, 208, 194, 0.16), transparent 52%),
    rgba(54, 208, 194, 0.06) !important;
}

.nav-product-parent strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-sub-arrow {
  color: var(--teal);
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 160ms ease;
}

.nav-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  z-index: 55;
  display: grid;
  grid-template-columns: 1fr;
  width: 230px;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(54, 208, 194, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(118, 104, 255, 0.16), transparent 42%),
    rgba(4, 8, 9, 0.96);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(118, 104, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(18px);
}

.nav-submenu a {
  border-left: 2px solid rgba(54, 208, 194, 0.2);
}

.nav-submenu::before {
  position: absolute;
  top: 0;
  right: 100%;
  width: 12px;
  height: 100%;
  content: "";
}

.nav-product-group:hover .nav-submenu,
.nav-product-group:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.nav-product-group:hover .nav-sub-arrow,
.nav-product-group:focus-within .nav-sub-arrow {
  transform: translate(3px, -1px);
}

.hero-world {
  position: relative;
  isolation: isolate;
  --hero-video-opacity: 1;
  --hero-video-scale: 1;
  --hero-video-ratio: 2.2265;
  --hero-plate-ratio: 1.759;
  --hero-video-edge-feather: 5.5%;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(104px, 11vw, 146px) clamp(20px, 5vw, 72px) 0;
  background: #050607;
}

.hero-world::before,
.hero-world::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.hero-world::before {
  display: none;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 63% 45%, rgba(54, 208, 194, 0.075), transparent 24vw),
    radial-gradient(circle at 84% 71%, rgba(216, 155, 82, 0.035), transparent 18vw);
  background-size: auto, auto;
  opacity: 0.24;
}

.hero-world::after {
  display: none;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 24% 43%, rgba(0, 0, 0, 0.26), transparent 34%),
    linear-gradient(90deg, rgba(5, 6, 7, 0.76) 0%, rgba(5, 6, 7, 0.48) 34%, rgba(5, 6, 7, 0.02) 72%, rgba(5, 6, 7, 0.22) 100%),
    linear-gradient(180deg, rgba(5, 6, 7, 0.16), rgba(5, 6, 7, 0.03) 52%, #050607 98%);
  opacity: 1;
}

.world-bg {
  position: absolute;
  inset: 0;
  z-index: -5;
  background: #050607;
  overflow: hidden;
  container-type: size;
}

.world-bg::before {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 6, 8, 0.58) 0%, rgba(2, 6, 8, 0.34) 24%, rgba(2, 6, 8, 0.04) 47%, transparent 68%),
    radial-gradient(ellipse at 20% 44%, rgba(5, 12, 14, 0.42), transparent 35%);
  opacity: 0.9;
}

.world-bg::after {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.world-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center center;
  transform: translateY(var(--parallax-shift, 0px)) scale(1.06);
  will-change: transform;
}

.world-bg img {
  z-index: 0;
  display: block;
  opacity: 1;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.12) contrast(1.06) brightness(0.84);
  transform: none;
}

.grid-scan {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.6px),
    linear-gradient(rgba(54, 208, 194, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.018) 1px, transparent 1px);
  background-size: 96px 96px, 80px 80px, 80px 80px;
  opacity: 0.14;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 78%, transparent);
}

.connection-field {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.node {
  position: absolute;
  display: block;
}

.node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.35;
  box-shadow: 0 0 0 5px rgba(54, 208, 194, 0.07), 0 0 18px rgba(54, 208, 194, 0.55);
}

.node-a {
  left: 47%;
  top: 31%;
}

.node-b {
  right: 17%;
  top: 56%;
  animation-delay: 600ms;
}

.node-c {
  left: 32%;
  bottom: 19%;
  animation-delay: 1100ms;
}

.node-d {
  right: 31%;
  top: 22%;
  animation-delay: 1600ms;
}

.hero-shell {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(690px, 0.98fr) minmax(620px, 1.02fr);
  gap: clamp(24px, 3.6vw, 62px);
  align-items: center;
  width: min(100%, 1500px);
  min-height: calc(100svh - 192px);
  margin: 0 auto;
}

.hero-copy {
  position: relative;
  z-index: 8;
  max-width: 940px;
  translate: 0 clamp(-78px, -6vh, -52px);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.02;
  letter-spacing: 0;
}

h1 {
  max-width: 1000px;
  font-size: clamp(48px, 3.75vw, 66px);
  text-shadow: 0 4px 36px rgba(0, 0, 0, 0.72);
}

h1 span {
  display: block;
}

h2 {
  font-size: clamp(34px, 4.6vw, 68px);
}

h3 {
  font-size: clamp(24px, 2.6vw, 38px);
}

h4 {
  font-size: 18px;
}

.hero-lede,
.section-kicker p,
.build-copy p,
.flow-copy p,
.flow-product p,
.future-panel p,
.final-cta p {
  color: var(--muted);
  font-size: clamp(17px, 1.7vw, 21px);
}

.hero-lede {
  max-width: 700px;
  margin: 22px 0 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.78);
}

.hero-actions,
.button-row {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.button:focus-visible,
.site-nav a:focus-visible {
  outline: 2px solid rgba(54, 208, 194, 0.75);
  outline-offset: 4px;
}

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

.button:active {
  transform: translateY(0px) scale(0.985);
  transition-duration: 80ms;
}

.button.primary,
.button.light {
  color: #050607;
  background:
    linear-gradient(135deg, #fff, #dffcf8 72%, rgba(54, 208, 194, 0.9));
  box-shadow: 0 16px 48px rgba(54, 208, 194, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.button.primary:hover,
.button.light:hover {
  box-shadow: 0 0 0 1px rgba(54, 208, 194, 0.28), 0 20px 54px rgba(54, 208, 194, 0.28);
}

.button.secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(54, 208, 194, 0.065)),
    rgba(6, 12, 13, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 42px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

.button.secondary:hover {
  border-color: rgba(54, 208, 194, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 50px rgba(54, 208, 194, 0.12);
}

.button:disabled {
  cursor: not-allowed;
  color: rgba(220, 232, 232, 0.5);
  border-color: rgba(54, 208, 194, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(54, 208, 194, 0.07)),
    rgba(6, 12, 13, 0.68);
  opacity: 1;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.creation-engine {
  position: relative;
  min-height: clamp(610px, 45vw, 700px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(54, 208, 194, 0.08), transparent 22%),
    radial-gradient(circle at 74% 24%, rgba(216, 155, 82, 0.045), transparent 20%);
}

.creation-engine::before,
.creation-engine::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.creation-engine::before {
  inset: 10% 4% 8%;
  z-index: 0;
  border: 1px solid rgba(54, 208, 194, 0.12);
  border-radius: 40px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(2, 7, 8, 0.72), rgba(2, 7, 8, 0.42) 46%, transparent 72%),
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.6px),
    linear-gradient(rgba(54, 208, 194, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.038) 1px, transparent 1px);
  background-size: auto, 42px 42px, 112px 112px, 112px 112px;
  box-shadow:
    inset 0 0 90px rgba(54, 208, 194, 0.045),
    0 42px 150px rgba(0, 0, 0, 0.38);
  opacity: 0.84;
  backdrop-filter: blur(2px);
  animation: orbit-drift 12s ease-in-out infinite;
}

.creation-engine::after {
  inset: 9% 18% auto;
  z-index: 3;
  height: 260px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(54, 208, 194, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 20px rgba(54, 208, 194, 0.28));
  opacity: 0.38;
  animation: engine-halo 7s ease-in-out infinite;
}

.engine-title {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 5;
  display: flex;
  width: min(220px, 35%);
  min-height: 108px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.24) 46%, transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(54, 208, 194, 0.64));
  box-shadow: 0 0 42px rgba(54, 208, 194, 0.38), 0 0 120px rgba(255, 255, 255, 0.1), 0 24px 70px rgba(0, 0, 0, 0.26);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: engine-core-breathe 4.2s ease-in-out infinite;
}

.engine-title span {
  color: #07100f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.engine-title strong {
  color: rgba(5, 6, 7, 0.68);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.engine-3d {
  position: absolute;
  inset: 4%;
  z-index: 1;
  display: block;
  width: 92%;
  height: 92%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1100ms ease 320ms;
}

.engine-3d.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .engine-3d {
    display: none;
  }
}

.engine-core {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  display: grid;
  width: 124px;
  height: 124px;
  place-items: center;
  color: rgba(5, 6, 7, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.engine-core span {
  position: absolute;
  inset: -54px;
  border: 1px solid rgba(54, 208, 194, 0.28);
  border-radius: 50%;
  animation: pulse-ring 3.8s ease-in-out infinite;
}

.engine-core strong {
  font-size: 18px;
  letter-spacing: 0.14em;
}

.engine-routes {
  position: absolute;
  inset: 9% 3% 7%;
  z-index: 2;
  width: 94%;
  height: 84%;
  overflow: visible;
  pointer-events: none;
}

.engine-route {
  fill: none;
  stroke: rgba(54, 208, 194, 0.28);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 8 13;
  filter: drop-shadow(0 0 7px rgba(54, 208, 194, 0.22));
  animation: diagnostic-flow 10s linear infinite;
}

.engine-route.r2,
.engine-route.r4,
.engine-route.r6 {
  stroke: rgba(216, 155, 82, 0.24);
  animation-delay: 900ms;
}

.engine-dot {
  fill: rgba(255, 255, 255, 0.62);
  filter: drop-shadow(0 0 8px rgba(54, 208, 194, 0.5));
}

.engine-card {
  position: absolute;
  z-index: 6;
  width: clamp(184px, 29%, 232px);
  min-height: 126px;
  padding: 19px;
  border: 1px solid rgba(54, 208, 194, 0.36);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(54, 208, 194, 0.16), rgba(255, 255, 255, 0.05) 42%, rgba(216, 155, 82, 0.045)),
    rgba(5, 10, 11, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(54, 208, 194, 0.08),
    0 28px 90px rgba(0, 0, 0, 0.58),
    0 0 38px rgba(54, 208, 194, 0.12);
  backdrop-filter: blur(18px) saturate(1.15);
  animation: hero-panel-float 8.5s ease-in-out infinite;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.engine-card::before {
  position: absolute;
  inset: -1px;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(54, 208, 194, 0.38), transparent 34%, rgba(216, 155, 82, 0.18)),
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.16), transparent 22%);
  opacity: 0.34;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.engine-card:hover {
  transform: translateY(-6px) scale(1.018);
  border-color: rgba(54, 208, 194, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 96px rgba(0, 0, 0, 0.58),
    0 0 44px rgba(54, 208, 194, 0.2);
}

.engine-card:hover::before {
  opacity: 0.72;
}

.engine-card:nth-child(2) {
  animation-delay: 400ms;
}

.engine-card:nth-child(3) {
  animation-delay: 800ms;
}

.engine-card:nth-child(4) {
  animation-delay: 1200ms;
}

.engine-card:nth-child(5) {
  animation-delay: 1600ms;
}

.engine-card:nth-child(6) {
  animation-delay: 2000ms;
}

.engine-card.idea {
  left: 3%;
  top: 5%;
}

.engine-card.agent {
  right: 3%;
  top: 5%;
  animation-delay: 500ms;
}

.engine-card.app {
  left: 0;
  top: 36%;
  animation-delay: 1000ms;
}

.engine-card.automation {
  right: 0;
  top: 36%;
  animation-delay: 1500ms;
}

.engine-card.product {
  left: 8%;
  bottom: 5%;
  animation-delay: 2000ms;
}

.engine-card.launch {
  right: 8%;
  bottom: 6%;
  animation-delay: 2500ms;
}

.engine-card span,
.tier span {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 14px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(216, 155, 82, 0.28);
}

.engine-card h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(21px, 1.55vw, 26px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.66);
}

.engine-card p {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  color: #cad7d7;
  font-size: 13px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.72);
}

.hero-rail {
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-rail span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-size: 13px;
  font-weight: 800;
}

.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(78px, 8vw, 118px) clamp(20px, 5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* A soft top-of-section veil blends each block into the one above it,
   replacing the hard horizontal seam with a gradual depth transition. */
.section-veil {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: clamp(120px, 16vw, 240px);
  background: linear-gradient(180deg, rgba(2, 6, 7, 0.78), transparent);
  pointer-events: none;
}

.section::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 18% 12%, rgba(54, 208, 194, 0.085), transparent 25vw),
    radial-gradient(circle at 86% 72%, rgba(216, 155, 82, 0.045), transparent 24vw),
    radial-gradient(circle at 48% 46%, rgba(54, 208, 194, 0.035), transparent 34vw),
    linear-gradient(rgba(54, 208, 194, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.026) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
  background-size: auto, auto, auto, 66px 66px, 66px 66px, 96px 96px;
  animation: section-grid-drift 24s linear infinite;
  transform: translateY(var(--parallax-shift, 0px));
  will-change: transform;
}

.section::after {
  position: absolute;
  inset: 18% -10% auto 34%;
  z-index: -1;
  height: 220px;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(54, 208, 194, 0.24), rgba(216, 155, 82, 0.1), transparent),
    linear-gradient(180deg, transparent, rgba(54, 208, 194, 0.08), transparent);
  clip-path: polygon(0 46%, 100% 34%, 100% 35%, 0 47%);
  filter: drop-shadow(0 0 24px rgba(54, 208, 194, 0.18));
  transform: rotate(-5deg);
  opacity: 0.62;
  animation: route-glow 7s ease-in-out infinite;
}

.section > * {
  width: min(100%, var(--max));
  margin-inline: auto;
}

/* Per-section art direction so the repeating system-section grid doesn't
   read as one templated block stacked six times — each gets its own
   gradient anchor points, hue balance, and glow-streak placement. */
#ai-stack::before {
  background-position: -8% -12%, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-image:
    radial-gradient(circle at 14% 20%, rgba(54, 208, 194, 0.12), transparent 28vw),
    radial-gradient(circle at 92% 14%, rgba(216, 155, 82, 0.07), transparent 26vw),
    radial-gradient(circle at 50% 88%, rgba(54, 208, 194, 0.04), transparent 36vw),
    linear-gradient(rgba(54, 208, 194, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.026) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
}

#ai-stack::after {
  inset: 8% -10% auto 10%;
  transform: rotate(-9deg);
}

#creates::before {
  background-image:
    radial-gradient(circle at 84% 18%, rgba(216, 155, 82, 0.1), transparent 27vw),
    radial-gradient(circle at 10% 70%, rgba(54, 208, 194, 0.075), transparent 25vw),
    radial-gradient(circle at 52% 40%, rgba(216, 155, 82, 0.03), transparent 32vw),
    linear-gradient(rgba(54, 208, 194, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.022) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
}

#creates::after {
  inset: auto -10% 14% 28%;
  transform: rotate(6deg);
  background:
    linear-gradient(90deg, transparent, rgba(216, 155, 82, 0.22), rgba(54, 208, 194, 0.1), transparent),
    linear-gradient(180deg, transparent, rgba(216, 155, 82, 0.07), transparent);
}

#build-with-raem::before {
  background-image:
    radial-gradient(circle at 24% 82%, rgba(54, 208, 194, 0.1), transparent 30vw),
    radial-gradient(circle at 78% 28%, rgba(216, 155, 82, 0.05), transparent 24vw),
    radial-gradient(circle at 50% 8%, rgba(54, 208, 194, 0.045), transparent 30vw),
    linear-gradient(rgba(54, 208, 194, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.03) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.085) 1px, transparent 1.5px);
}

#build-with-raem::after {
  inset: 32% -10% auto 4%;
  transform: rotate(-3deg);
}

#flow::before {
  background-image:
    radial-gradient(circle at 90% 78%, rgba(54, 208, 194, 0.1), transparent 28vw),
    radial-gradient(circle at 6% 22%, rgba(216, 155, 82, 0.065), transparent 24vw),
    radial-gradient(circle at 46% 50%, rgba(54, 208, 194, 0.03), transparent 34vw),
    linear-gradient(rgba(54, 208, 194, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.024) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
}

#flow::after {
  inset: 64% -10% auto 18%;
  transform: rotate(4deg);
}

#client-builds::before {
  background-image:
    radial-gradient(circle at 16% 30%, rgba(216, 155, 82, 0.085), transparent 26vw),
    radial-gradient(circle at 86% 86%, rgba(54, 208, 194, 0.085), transparent 28vw),
    radial-gradient(circle at 50% 50%, rgba(216, 155, 82, 0.03), transparent 32vw),
    linear-gradient(rgba(54, 208, 194, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.022) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
}

#client-builds::after {
  inset: 12% -10% auto 36%;
  transform: rotate(-7deg);
  background:
    linear-gradient(90deg, transparent, rgba(216, 155, 82, 0.18), rgba(54, 208, 194, 0.12), transparent),
    linear-gradient(180deg, transparent, rgba(216, 155, 82, 0.06), transparent);
}

.problems::before {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(54, 208, 194, 0.11), transparent 27vw),
    radial-gradient(circle at 14% 80%, rgba(216, 155, 82, 0.06), transparent 25vw),
    radial-gradient(circle at 50% 46%, rgba(54, 208, 194, 0.035), transparent 34vw),
    linear-gradient(rgba(54, 208, 194, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.026) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
}

.problems::after {
  inset: 70% -10% auto 8%;
  transform: rotate(8deg);
}

#future::before {
  background-image:
    radial-gradient(circle at 30% 14%, rgba(216, 155, 82, 0.07), transparent 26vw),
    radial-gradient(circle at 88% 64%, rgba(54, 208, 194, 0.1), transparent 28vw),
    radial-gradient(circle at 52% 90%, rgba(54, 208, 194, 0.04), transparent 32vw),
    linear-gradient(rgba(54, 208, 194, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.024) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.075) 1px, transparent 1.5px);
}

#future::after {
  inset: 22% -10% auto 22%;
  transform: rotate(-5deg);
}

.section-kicker {
  max-width: 920px;
  margin-left: 0;
}

.section-kicker p {
  max-width: 760px;
  margin: 16px 0 0;
}

.module-grid,
.method-grid,
.tier-track {
  display: grid;
  gap: 16px;
}

.module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 64px);
}

.module-card,
.build-list article,
.tier,
.method-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--panel-edge-soft);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(54, 208, 194, 0.065), rgba(255, 255, 255, 0.02) 42%, rgba(216, 155, 82, 0.024)),
    var(--panel-glass);
  box-shadow: var(--panel-glow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px) saturate(1.08);
}

.module-card {
  min-height: 330px;
  padding: 26px;
  animation: panel-drift 9s ease-in-out infinite;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.module-card:nth-child(2),
.build-list article:nth-child(2),
.method-grid article:nth-child(2),
.tier:nth-child(2) {
  animation-delay: 600ms;
}

.module-card:nth-child(3),
.build-list article:nth-child(3),
.method-grid article:nth-child(3),
.tier:nth-child(3) {
  animation-delay: 1200ms;
}

.module-card:nth-child(4),
.build-list article:nth-child(4),
.method-grid article:nth-child(4) {
  animation-delay: 1800ms;
}

.module-card::before,
.build-list article::before,
.method-grid article::before,
.tier::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(135deg, rgba(54, 208, 194, 0.16), transparent 46%),
    radial-gradient(circle at 84% 16%, rgba(54, 208, 194, 0.13), transparent 76px);
  opacity: 0.34;
  transition: opacity 180ms ease;
}

.module-card::after,
.build-list article::after,
.tier::after,
.flow-product::after,
.future-panel::after,
.cta-world::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(54, 208, 194, 0.14), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 26%);
  opacity: 0.26;
  pointer-events: none;
  transform: translateX(-34%);
  transition: opacity 180ms ease, transform 420ms ease;
}

.module-card:hover,
.build-list article:hover,
.method-grid article:hover,
.tier:hover {
  transform: translateY(-3px);
  border-color: rgba(54, 208, 194, 0.4);
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.42), 0 0 36px rgba(54, 208, 194, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.module-card:hover::before,
.build-list article:hover::before,
.method-grid article:hover::before,
.tier:hover::before {
  opacity: 0.78;
}

.module-card:hover::after,
.build-list article:hover::after,
.tier:hover::after,
.flow-product:hover::after,
.cta-world:hover::after {
  opacity: 0.58;
  transform: translateX(16%);
}

.module-status {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 34px;
  padding: 7px 10px;
  color: #e3b16f;
  border: 1px solid rgba(216, 155, 82, 0.28);
  border-radius: 999px;
  background: rgba(216, 155, 82, 0.08);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module-symbol {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #07100f;
  border: 1px solid rgba(54, 208, 194, 0.52);
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 28%, #fff, rgba(255, 255, 255, 0.2) 28%, transparent 42%),
    linear-gradient(145deg, rgba(54, 208, 194, 0.94), rgba(216, 155, 82, 0.58));
  box-shadow: 0 0 32px rgba(54, 208, 194, 0.24), 0 14px 34px rgba(0, 0, 0, 0.22);
  font-weight: 950;
}

.module-card h3,
.module-card p,
.module-card .module-status,
.module-card .module-symbol,
.build-list h3,
.build-list p,
.tier h4,
.tier p,
.tier span {
  position: relative;
  z-index: 1;
}

.module-card p,
.build-list p,
.method-grid p,
.tier p {
  color: #aebdbc;
}

.build-path {
  display: grid;
  isolation: isolate;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  background:
    radial-gradient(circle at 74% 42%, rgba(54, 208, 194, 0.13), transparent 28vw),
    linear-gradient(120deg, rgba(18, 107, 101, 0.22), rgba(5, 6, 7, 0.72));
}

.build-orbit {
  position: absolute;
  inset: auto -8vw 8% auto;
  z-index: -1;
  width: 42vw;
  min-width: 480px;
  aspect-ratio: 1;
  opacity: 0.42;
}

.build-orbit span {
  position: absolute;
  inset: calc(var(--i, 0) * 42px);
  border: 1px solid rgba(54, 208, 194, 0.22);
  border-radius: 8px;
  transform: rotate(22deg);
}

.build-orbit span:nth-child(1) {
  --i: 0;
}

.build-orbit span:nth-child(2) {
  --i: 1;
}

.build-orbit span:nth-child(3) {
  --i: 2;
}

.build-path > *:not(.build-orbit) {
  width: auto;
}

.build-copy {
  max-width: 640px;
}

.build-copy p {
  margin: 18px 0 0;
}

.build-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.build-list::before {
  position: absolute;
  inset: 12% 12%;
  z-index: -1;
  content: "";
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(54, 208, 194, 0.22) 49%, rgba(54, 208, 194, 0.22) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(216, 155, 82, 0.13) 49%, rgba(216, 155, 82, 0.13) 51%, transparent 52%);
  filter: drop-shadow(0 0 24px rgba(54, 208, 194, 0.12));
  animation: route-glow 6.8s ease-in-out infinite;
}

.build-list article {
  min-height: 184px;
  padding: 24px;
  animation: panel-drift 10s ease-in-out infinite;
}

.creation-brief {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(54, 208, 194, 0.08), transparent 20vw),
    radial-gradient(circle at 22% 18%, rgba(216, 155, 82, 0.08), transparent 24vw),
    radial-gradient(circle at 78% 42%, rgba(54, 208, 194, 0.16), transparent 31vw),
    linear-gradient(180deg, rgba(5, 6, 7, 0.76), rgba(7, 12, 13, 0.96));
}

.brief-page .creation-brief::before {
  background:
    radial-gradient(circle at 13% 28%, rgba(216, 155, 82, 0.07), transparent 20vw),
    radial-gradient(circle at 86% 16%, rgba(54, 208, 194, 0.11), transparent 26vw),
    linear-gradient(rgba(54, 208, 194, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.04) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.7px);
  background-size: auto, auto, 70px 70px, 70px 70px, 96px 96px;
  opacity: 0.72;
  animation: section-grid-drift 28s linear infinite;
}

.brief-page .creation-brief::after {
  inset: 86px 0 0;
  height: auto;
  background:
    radial-gradient(circle at 24% 42%, rgba(54, 208, 194, 0.1), transparent 5px),
    radial-gradient(circle at 72% 34%, rgba(216, 155, 82, 0.1), transparent 5px),
    linear-gradient(180deg, transparent 0%, rgba(54, 208, 194, 0.055) 28%, transparent 54%),
    repeating-linear-gradient(90deg, transparent 0 82px, rgba(54, 208, 194, 0.045) 83px, transparent 84px),
    repeating-linear-gradient(0deg, transparent 0 72px, rgba(255, 255, 255, 0.035) 73px, transparent 74px);
  opacity: 0.58;
  filter: none;
  transform: none;
  animation: digital-depth-drift 22s linear infinite;
}

.brief-page .creation-brief {
  min-height: 100svh;
  padding-top: clamp(88px, 7vw, 116px);
}

.brief-page .section-kicker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 24px;
  align-items: end;
  max-width: 1540px;
  margin-inline: auto;
}

.brief-page .section-kicker h1 {
  max-width: 820px;
  font-size: clamp(30px, 2.65vw, 46px);
  line-height: 0.98;
}

.brief-page .section-kicker .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.brief-page .section-kicker p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 8px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.42;
}

.brief-page-actions {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  margin-top: 0;
  gap: 10px;
}

.brief-page-actions .button {
  min-height: 42px;
  padding: 12px 18px;
  font-size: 14px;
}

.brief-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  max-width: none;
  margin: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(54, 208, 194, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.038) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.7px);
  background-size: 58px 58px, 58px 58px, 86px 86px;
  opacity: 0.58;
  animation: section-grid-drift 24s linear infinite;
}

.brief-atmosphere::before,
.brief-atmosphere::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.brief-atmosphere::before {
  inset: 14% 6% auto;
  height: 62%;
  background:
    radial-gradient(circle at 50% 50%, rgba(54, 208, 194, 0.18), transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 29%, rgba(54, 208, 194, 0.12) 30%, transparent 31%),
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(216, 155, 82, 0.08) 46%, transparent 47%);
  filter: drop-shadow(0 0 26px rgba(54, 208, 194, 0.14));
  opacity: 0.68;
  animation: chamber-core-field 10s ease-in-out infinite;
}

.brief-atmosphere::after {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 112px, rgba(54, 208, 194, 0.075) 113px, transparent 116px),
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(216, 155, 82, 0.045) 97px, transparent 100px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.7px);
  background-size: 260px 100%, 100% 220px, 42px 42px;
  opacity: 0.28;
  animation: data-streams 20s linear infinite;
  mask-image: radial-gradient(ellipse at 50% 58%, #000 0%, #000 58%, transparent 84%);
}

.brief-page .creation-brief {
  background-image:
    radial-gradient(circle at 50% 56%, rgba(54, 208, 194, 0.1), transparent 22vw),
    radial-gradient(circle at 14% 40%, rgba(216, 155, 82, 0.08), transparent 18vw),
    radial-gradient(circle at 88% 44%, rgba(54, 208, 194, 0.13), transparent 24vw),
    linear-gradient(180deg, rgba(5, 6, 7, 0.7), rgba(7, 12, 13, 0.96));
}

.brief-atmosphere > span {
  position: absolute;
  display: block;
  width: 34vw;
  min-width: 340px;
  aspect-ratio: 1;
  border: 1px solid rgba(54, 208, 194, 0.16);
  border-radius: 32px;
  filter: drop-shadow(0 0 30px rgba(54, 208, 194, 0.13));
  opacity: 0.42;
  transform: rotate(24deg);
  animation: orbit-drift 12s ease-in-out infinite;
}

.brief-atmosphere > span:nth-child(1) {
  right: -12vw;
  top: 15%;
}

.brief-atmosphere > span:nth-child(2) {
  left: -16vw;
  bottom: 2%;
  border-color: rgba(216, 155, 82, 0.13);
  animation-delay: 1200ms;
}

.brief-atmosphere > span:nth-child(3) {
  right: 28%;
  bottom: 8%;
  width: 20vw;
  min-width: 220px;
  opacity: 0.22;
  animation-delay: 2200ms;
}

.brief-system-core {
  position: absolute;
  left: 50%;
  top: 690px;
  display: grid;
  width: clamp(280px, 28vw, 480px);
  aspect-ratio: 1;
  place-items: center;
  color: rgba(220, 232, 232, 0.2);
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(54, 208, 194, 0.12), transparent 38%),
    conic-gradient(from 20deg, transparent, rgba(54, 208, 194, 0.24), transparent 28%, rgba(216, 155, 82, 0.13), transparent 56%, rgba(54, 208, 194, 0.18), transparent);
  box-shadow: inset 0 0 80px rgba(54, 208, 194, 0.045), 0 0 90px rgba(54, 208, 194, 0.12);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.28em;
  opacity: 0.72;
  transform: translate(-50%, -50%);
  animation: chamber-core-pulse 8s ease-in-out infinite;
}

.brief-system-core::before,
.brief-system-core::after {
  position: absolute;
  content: "";
  border-radius: inherit;
  pointer-events: none;
}

.brief-system-core::before {
  inset: -58px;
  border: 1px solid rgba(54, 208, 194, 0.12);
  border-top-color: rgba(216, 155, 82, 0.28);
  border-right-color: rgba(54, 208, 194, 0.28);
  animation: chamber-ring-turn 18s linear infinite;
}

.brief-system-core::after {
  inset: 62px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(54, 208, 194, 0.32);
  animation: chamber-ring-turn 13s linear reverse infinite;
}

.digital-world-panel {
  position: absolute;
  display: grid;
  width: clamp(180px, 17vw, 280px);
  min-height: 116px;
  align-content: center;
  gap: 9px;
  padding: 18px;
  color: rgba(220, 232, 232, 0.74);
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 16%, rgba(54, 208, 194, 0.18), transparent 74px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(54, 208, 194, 0.03) 54%, rgba(216, 155, 82, 0.025)),
    rgba(4, 10, 11, 0.42);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.32),
    0 0 46px rgba(54, 208, 194, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  opacity: 0.82;
  transform: translate3d(0, 0, 0);
  animation: digital-panel-float 9s ease-in-out infinite;
}

.digital-world-panel::before,
.digital-world-panel::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.digital-world-panel::before {
  inset: 12px;
  border: 1px solid rgba(54, 208, 194, 0.08);
  border-radius: 12px;
}

.digital-world-panel::after {
  left: 18px;
  right: 18px;
  bottom: 17px;
  height: 1px;
  background: linear-gradient(90deg, rgba(54, 208, 194, 0.72), transparent 38%, rgba(216, 155, 82, 0.38), transparent 78%);
  box-shadow: 0 0 18px rgba(54, 208, 194, 0.22);
  opacity: 0.62;
  animation: panel-data-pulse 4.8s ease-in-out infinite;
}

.digital-world-panel span {
  width: auto;
  min-width: 0;
  color: rgba(247, 244, 236, 0.86);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: none;
}

.digital-world-panel i {
  display: block;
  width: min(100%, 164px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(54, 208, 194, 0.34), rgba(255, 255, 255, 0.12), transparent);
  box-shadow: 0 0 16px rgba(54, 208, 194, 0.11);
  opacity: 0.62;
}

.digital-world-panel i:nth-of-type(2) {
  width: 72%;
  background: linear-gradient(90deg, rgba(216, 155, 82, 0.28), rgba(255, 255, 255, 0.1), transparent);
  animation-delay: 900ms;
}

.digital-world-panel i:nth-of-type(3) {
  width: 54%;
  opacity: 0.42;
  animation-delay: 1600ms;
}

.panel-intake {
  left: 3.5%;
  top: 230px;
}

.panel-logic {
  right: 4%;
  top: 214px;
  animation-delay: 900ms;
}

.panel-routes {
  left: 7%;
  top: 920px;
  border-color: rgba(216, 155, 82, 0.14);
  animation-delay: 1800ms;
}

.panel-output {
  right: 6%;
  top: 906px;
  animation-delay: 2600ms;
}

.brief-system-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.82;
}

.system-route {
  fill: none;
  stroke: rgba(54, 208, 194, 0.34);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 8 18;
  filter: drop-shadow(0 0 10px rgba(54, 208, 194, 0.3));
  animation: chamber-route-flow 12s linear infinite;
}

.route-b,
.route-d {
  animation-delay: 1500ms;
}

.route-c,
.route-f {
  stroke: rgba(216, 155, 82, 0.27);
  animation-delay: 2600ms;
}

.data-packet {
  fill: #dffcf8;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(54, 208, 194, 0.92));
}

.packet-two,
.packet-four {
  fill: var(--amber);
  filter: drop-shadow(0 0 10px rgba(216, 155, 82, 0.8));
}

.brief-system-module {
  position: absolute;
  display: grid;
  min-width: 150px;
  min-height: 58px;
  place-items: center;
  padding: 12px 14px;
  color: rgba(220, 232, 232, 0.82);
  border: 1px solid rgba(54, 208, 194, 0.24);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 18%, rgba(54, 208, 194, 0.12), transparent 54px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(54, 208, 194, 0.03)),
    rgba(5, 8, 9, 0.68);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28), 0 0 26px rgba(54, 208, 194, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(14px);
  opacity: 0.98;
  animation: chamber-module-drift 9s ease-in-out infinite;
}

.brief-system-module::before {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 16px rgba(54, 208, 194, 0.72);
  transform: translateY(-50%);
  animation: signal-node-pulse 3s ease-in-out infinite;
}

.brief-system-module span {
  width: auto;
  min-width: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: none;
}

.module-a {
  left: 4%;
  top: 526px;
}

.module-b {
  right: 7%;
  top: 348px;
  animation-delay: 800ms;
}

.module-c {
  left: 4%;
  top: 724px;
  animation-delay: 1400ms;
}

.module-d {
  right: 4.5%;
  top: 748px;
  animation-delay: 2200ms;
}

.module-e {
  left: 22%;
  top: 930px;
  animation-delay: 3000ms;
}

.module-f {
  right: 22%;
  top: 930px;
  animation-delay: 3600ms;
}

.module-g {
  left: 50%;
  top: 438px;
  transform: translateX(-50%);
  border-color: rgba(216, 155, 82, 0.18);
  color: rgba(231, 191, 136, 0.78);
  animation-delay: 1900ms;
}

.module-g::before {
  background: var(--amber);
  box-shadow: 0 0 16px rgba(216, 155, 82, 0.62);
}

.brief-signal {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(54, 208, 194, 0.08), 0 0 30px rgba(54, 208, 194, 0.9);
  opacity: 0.72;
  animation: signal-node-pulse 3.8s ease-in-out infinite;
}

.signal-a {
  left: 17%;
  top: 34%;
}

.signal-b {
  right: 18%;
  top: 27%;
  animation-delay: 900ms;
}

.signal-c {
  left: 42%;
  bottom: 16%;
  background: var(--amber);
  box-shadow: 0 0 0 7px rgba(216, 155, 82, 0.08), 0 0 28px rgba(216, 155, 82, 0.66);
  animation-delay: 1500ms;
}

.signal-d {
  right: 31%;
  bottom: 28%;
  animation-delay: 2200ms;
}

.brief-console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1.08fr) minmax(320px, 0.72fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(54, 208, 194, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 52% 50%, rgba(54, 208, 194, 0.12), transparent 22%),
    radial-gradient(circle at 45% 18%, rgba(54, 208, 194, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018) 38%, rgba(216, 155, 82, 0.025)),
    rgba(5, 8, 9, 0.78);
  box-shadow: 0 44px 150px rgba(0, 0, 0, 0.52), 0 0 110px rgba(54, 208, 194, 0.11), 0 0 190px rgba(216, 155, 82, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
}

.brief-console .section-kicker {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  padding: 2px 4px 4px;
}

.brief-console::marker {
  display: none;
}

.brief-console.is-submitted {
  display: none;
}

.brief-console::before,
.brief-console::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.brief-console::before {
  inset: 16px;
  border: 1px solid rgba(54, 208, 194, 0.12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 42%, rgba(216, 155, 82, 0.055), transparent 18%),
    linear-gradient(90deg, transparent 48%, rgba(54, 208, 194, 0.14) 49%, rgba(54, 208, 194, 0.14) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(216, 155, 82, 0.08) 49%, rgba(216, 155, 82, 0.08) 51%, transparent 52%);
  opacity: 0.42;
}

.brief-console::after {
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(54, 208, 194, 0.1), transparent 16%),
    radial-gradient(circle at 74% 62%, rgba(216, 155, 82, 0.055), transparent 20%),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(54, 208, 194, 0.04) 65px, transparent 66px);
  background-size: auto, auto, 160px 100%;
  opacity: 0.3;
  animation: console-depth-breathe 7.4s ease-in-out infinite;
}

.brief-rail,
.brief-card,
.brief-preview {
  position: relative;
  z-index: 1;
}

.brief-rail {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 10px;
  border: 1px solid rgba(54, 208, 194, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(54, 208, 194, 0.06), transparent 44%),
    rgba(3, 7, 8, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 70px rgba(0, 0, 0, 0.28);
}

.brief-rail-step {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 70px;
  padding: 14px 12px;
  color: rgba(220, 232, 232, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(54, 208, 194, 0.03)),
    rgba(7, 12, 13, 0.74);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.brief-rail-step::before {
  position: absolute;
  inset: 14px auto 14px -11px;
  width: 2px;
  content: "";
  background: rgba(54, 208, 194, 0.16);
}

.brief-rail-step span {
  color: var(--amber);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.brief-rail-step strong {
  font-size: 14px;
  font-weight: 900;
}

.brief-rail-step.is-active,
.brief-rail-step.is-complete {
  color: #fff;
  border-color: rgba(54, 208, 194, 0.36);
  background:
    linear-gradient(135deg, rgba(54, 208, 194, 0.18), rgba(255, 255, 255, 0.04)),
    rgba(7, 12, 13, 0.9);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.28), 0 0 24px rgba(54, 208, 194, 0.08);
}

.brief-rail-step.is-active {
  transform: translateX(4px);
}

.brief-card,
.brief-preview {
  overflow: hidden;
  border: 1px solid rgba(54, 208, 194, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 72% 18%, rgba(54, 208, 194, 0.09), transparent 18%),
    linear-gradient(145deg, rgba(54, 208, 194, 0.08), rgba(255, 255, 255, 0.025) 42%, rgba(216, 155, 82, 0.025)),
    rgba(7, 12, 13, 0.88);
  box-shadow: var(--panel-glow), 0 0 42px rgba(54, 208, 194, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

.brief-card::before,
.brief-preview::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(54, 208, 194, 0.1), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 28%);
  opacity: 0.24;
  pointer-events: none;
  transform: translateX(-44%);
  animation: brief-panel-scan 8.2s ease-in-out infinite;
}

.brief-card > *,
.brief-preview > * {
  position: relative;
  z-index: 1;
}

.brief-card {
  display: grid;
  min-height: 520px;
  align-content: start;
  padding: clamp(24px, 3.2vw, 38px);
}

.brief-step {
  animation: brief-step-in 240ms ease both;
}

.brief-step[hidden],
.brief-submit-state:empty,
.brief-submit-status:empty {
  display: none;
}

.brief-step-label {
  margin: 0 0 14px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brief-step h3 {
  max-width: 720px;
  font-size: clamp(30px, 3.4vw, 48px);
}

.brief-ready-copy {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.brief-assembly-status {
  display: inline-flex;
  width: fit-content;
  margin: 18px 0 0;
  padding: 9px 12px;
  color: #07100f;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, rgba(54, 208, 194, 0.82));
  box-shadow: 0 0 28px rgba(54, 208, 194, 0.16);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brief-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.brief-options button {
  position: relative;
  min-height: 92px;
  padding: 18px;
  color: #e9f4f2;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 84% 16%, rgba(54, 208, 194, 0.12), transparent 72px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(54, 208, 194, 0.04)),
    rgba(5, 8, 9, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.brief-options button:hover,
.brief-options button.is-selected {
  transform: translateY(-2px);
  border-color: rgba(54, 208, 194, 0.46);
  background:
    radial-gradient(circle at 84% 16%, rgba(54, 208, 194, 0.22), transparent 80px),
    linear-gradient(135deg, rgba(54, 208, 194, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(5, 8, 9, 0.88);
  box-shadow: 0 24px 74px rgba(0, 0, 0, 0.3), 0 0 28px rgba(54, 208, 194, 0.12);
}

.brief-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.brief-field {
  display: grid;
  gap: 9px;
  margin-top: 28px;
}

.brief-field-grid .brief-field {
  margin-top: 0;
}

.brief-field-wide {
  grid-column: 1 / -1;
}

.brief-field span {
  color: var(--soft);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.brief-field input,
.brief-field select,
.brief-field textarea {
  width: 100%;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(54, 208, 194, 0.035)),
    rgba(5, 8, 9, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  font: inherit;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.brief-field input,
.brief-field select {
  min-height: 52px;
  padding: 0 14px;
}

.brief-field input[type="file"] {
  display: flex;
  align-items: center;
  min-height: auto;
  padding: 14px;
  color: rgba(220, 232, 232, 0.78);
}

.brief-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(54, 208, 194, 0.26);
  border-radius: 999px;
  color: #061113;
  background: linear-gradient(135deg, #f7fffc, #42dfcf);
  font-weight: 900;
  cursor: pointer;
}

.brief-field textarea {
  min-height: 210px;
  padding: 14px;
  resize: vertical;
}

.brief-field-note {
  color: rgba(190, 210, 207, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.brief-field input:focus,
.brief-field select:focus,
.brief-field textarea:focus {
  border-color: rgba(54, 208, 194, 0.56);
  box-shadow: 0 0 0 3px rgba(54, 208, 194, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.brief-field ::placeholder {
  color: rgba(220, 232, 232, 0.42);
}

.brief-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 22px;
}

.brief-controls [data-brief-next],
.brief-controls [data-brief-submit] {
  margin-left: auto;
}

.brief-controls .button.primary:not(:disabled) {
  border-color: rgba(216, 155, 82, 0.22);
  background:
    radial-gradient(circle at 22% 12%, #fff, transparent 38%),
    linear-gradient(135deg, #f5fffb, rgba(54, 208, 194, 0.88) 68%, rgba(216, 155, 82, 0.68));
  box-shadow:
    0 0 0 1px rgba(54, 208, 194, 0.18),
    0 18px 52px rgba(54, 208, 194, 0.2),
    0 0 42px rgba(216, 155, 82, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.brief-controls .button.primary:not(:disabled):hover,
.brief-controls .button.primary:not(:disabled):focus-visible {
  box-shadow:
    0 0 0 1px rgba(54, 208, 194, 0.34),
    0 20px 60px rgba(54, 208, 194, 0.28),
    0 0 52px rgba(216, 155, 82, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.brief-submit-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.brief-submit-status.is-error {
  color: #f4b9a7;
}

.brief-final-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.brief-final-summary div,
.brief-preview dl div {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 16%, rgba(54, 208, 194, 0.08), transparent 64px),
    rgba(5, 8, 9, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.brief-final-summary div {
  position: relative;
  overflow: hidden;
  padding: 14px;
}

.brief-final-summary div::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, rgba(54, 208, 194, 0.11), transparent 44%, rgba(216, 155, 82, 0.06));
  opacity: 0.42;
  pointer-events: none;
}

.brief-final-summary span,
.brief-preview dt {
  position: relative;
  z-index: 1;
  color: var(--amber);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brief-final-summary strong,
.brief-preview dd {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.38;
}

.brief-preview {
  padding: 22px;
}

.brief-preview::before {
  animation-delay: 1200ms;
}

.brief-preview-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.brief-preview-header .eyebrow {
  margin: 0;
}

.brief-preview-header span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(220, 232, 232, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brief-preview-header span::before {
  display: block;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(54, 208, 194, 0.08), 0 0 20px rgba(54, 208, 194, 0.72);
  animation: signal-node-pulse 2.6s ease-in-out infinite;
}

.brief-preview dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.brief-preview dl div {
  padding: 13px;
}

.brief-preview dd,
.brief-preview dt {
  margin: 0;
}

.brief-success {
  position: relative;
  display: grid;
  min-height: min(680px, calc(100svh - 168px));
  place-items: center;
  margin-top: clamp(34px, 5vw, 64px);
  padding: clamp(24px, 5vw, 72px);
  scroll-margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 44%, rgba(54, 208, 194, 0.24), transparent 22%),
    radial-gradient(circle at 68% 24%, rgba(216, 155, 82, 0.14), transparent 18%),
    radial-gradient(circle at 30% 76%, rgba(54, 208, 194, 0.09), transparent 20%),
    conic-gradient(from 180deg at 50% 50%, transparent, rgba(54, 208, 194, 0.1), transparent 20%, rgba(216, 155, 82, 0.065), transparent 46%, rgba(54, 208, 194, 0.08), transparent),
    linear-gradient(rgba(54, 208, 194, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.038) 1px, transparent 1px),
    rgba(5, 8, 9, 0.86);
  background-size: auto, auto, auto, auto, 54px 54px, 54px 54px, auto;
  box-shadow:
    0 44px 160px rgba(0, 0, 0, 0.54),
    0 0 90px rgba(54, 208, 194, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: success-stage-in 360ms ease both;
}

.brief-success::before,
.brief-success::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.brief-success::before {
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(54, 208, 194, 0.16), transparent 5px),
    radial-gradient(circle at 88% 24%, rgba(216, 155, 82, 0.14), transparent 5px),
    radial-gradient(circle at 22% 78%, rgba(54, 208, 194, 0.16), transparent 5px),
    radial-gradient(circle at 82% 76%, rgba(54, 208, 194, 0.13), transparent 5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1.8px),
    radial-gradient(ellipse at 50% 50%, rgba(54, 208, 194, 0.15), transparent 42%);
  background-size: auto, auto, auto, auto, 80px 80px, auto;
  opacity: 0.5;
  animation: success-field-activate 9s ease-in-out infinite;
}

.brief-success::after {
  left: 50%;
  top: 50%;
  width: min(82vw, 920px);
  aspect-ratio: 1;
  background:
    conic-gradient(from 12deg at 50% 50%, transparent 0 10%, rgba(54, 208, 194, 0.2) 12%, transparent 18% 38%, rgba(216, 155, 82, 0.13) 42%, transparent 50% 72%, rgba(54, 208, 194, 0.16) 76%, transparent 84%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(54, 208, 194, 0.1) 35%, transparent 37%, transparent 54%, rgba(216, 155, 82, 0.07) 55%, transparent 57%);
  border-radius: 50%;
  filter: drop-shadow(0 0 34px rgba(54, 208, 194, 0.2));
  opacity: 0.46;
  transform: translate(-50%, -50%);
  animation: achievement-orbit-field 10s linear infinite;
}

.achievement-light {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: min(100%, 1120px);
  min-height: min(660px, 78svh);
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(54, 208, 194, 0.2), transparent 48%),
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(rgba(54, 208, 194, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.065) 1px, transparent 1px);
  background-size: auto, auto, 78px 78px, 78px 78px;
  box-shadow:
    0 0 92px rgba(54, 208, 194, 0.18),
    0 0 130px rgba(216, 155, 82, 0.06),
    inset 0 0 92px rgba(54, 208, 194, 0.045);
  opacity: 0.72;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: achievement-aura 4.8s ease-in-out infinite;
}

.achievement-light::before,
.achievement-light::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(66vw, 720px);
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.achievement-light::before {
  border: 1px solid rgba(54, 208, 194, 0.22);
  border-top-color: rgba(255, 255, 255, 0.42);
  border-right-color: rgba(216, 155, 82, 0.22);
  filter: drop-shadow(0 0 18px rgba(54, 208, 194, 0.18));
  animation: chamber-ring-turn 18s linear infinite;
}

.achievement-light::after {
  width: min(48vw, 520px);
  border: 1px solid rgba(216, 155, 82, 0.15);
  border-left-color: rgba(54, 208, 194, 0.28);
  animation: chamber-ring-turn 14s linear reverse infinite;
}

.achievement-light span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5fffb;
  box-shadow: 0 0 0 8px rgba(54, 208, 194, 0.08), 0 0 30px rgba(54, 208, 194, 0.72);
  animation: achievement-node-pulse 3.4s ease-in-out infinite;
}

.achievement-light span:nth-child(1) {
  left: 13%;
  top: 24%;
}

.achievement-light span:nth-child(2) {
  right: 14%;
  top: 28%;
  background: var(--amber);
  box-shadow: 0 0 0 8px rgba(216, 155, 82, 0.08), 0 0 28px rgba(216, 155, 82, 0.62);
  animation-delay: 700ms;
}

.achievement-light span:nth-child(3) {
  left: 18%;
  bottom: 22%;
  animation-delay: 1400ms;
}

.achievement-light span:nth-child(4) {
  right: 18%;
  bottom: 24%;
  animation-delay: 2100ms;
}

.success-activation-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.success-activation-grid article {
  position: absolute;
  display: grid;
  min-width: 174px;
  min-height: 72px;
  align-content: center;
  padding: 13px 15px;
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 18%, rgba(54, 208, 194, 0.14), transparent 58px),
    rgba(5, 8, 9, 0.68);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.32), 0 0 28px rgba(54, 208, 194, 0.07);
  backdrop-filter: blur(14px);
  opacity: 0.72;
  animation: activation-component-pulse 5.6s ease-in-out infinite;
}

.success-activation-grid article:nth-child(1) {
  left: 5%;
  top: 16%;
}

.success-activation-grid article:nth-child(2) {
  right: 5%;
  top: 19%;
  animation-delay: 800ms;
}

.success-activation-grid article:nth-child(3) {
  left: 7%;
  bottom: 15%;
  animation-delay: 1600ms;
}

.success-activation-grid article:nth-child(4) {
  right: 7%;
  bottom: 16%;
  animation-delay: 2400ms;
}

.success-activation-grid article::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(54, 208, 194, 0.12), transparent);
  opacity: 0;
  transform: translateX(-40%);
  animation: component-scan 6.2s ease-in-out infinite;
}

.success-activation-grid span,
.success-activation-grid strong {
  position: relative;
  z-index: 1;
}

.success-activation-grid span {
  color: var(--amber);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.success-activation-grid strong {
  margin-top: 5px;
  color: rgba(247, 244, 236, 0.82);
  font-size: 14px;
  line-height: 1.12;
}

.success-orbits {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  width: min(68vw, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.success-orbits span {
  position: absolute;
  inset: calc(var(--i, 0) * 42px);
  border: 1px solid rgba(54, 208, 194, 0.24);
  border-radius: 50%;
  box-shadow: inset 0 0 46px rgba(54, 208, 194, 0.035), 0 0 28px rgba(54, 208, 194, 0.08);
  transform: rotate(calc(var(--i, 0) * 14deg));
  animation: success-orbit 12s ease-in-out infinite;
}

.success-core {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  display: grid;
  width: clamp(120px, 12vw, 178px);
  aspect-ratio: 1;
  place-items: center;
  color: rgba(5, 6, 7, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, #fff, rgba(255, 255, 255, 0.44) 24%, transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(54, 208, 194, 0.7));
  box-shadow: 0 0 54px rgba(54, 208, 194, 0.4), 0 0 160px rgba(54, 208, 194, 0.14);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.22em;
  transform: translate(-50%, -50%);
  opacity: 0.36;
  animation: success-core-activate 4.6s ease-in-out infinite;
  pointer-events: none;
}

.success-orbits span:nth-child(1) {
  --i: 0;
}

.success-orbits span:nth-child(2) {
  --i: 1;
  border-color: rgba(216, 155, 82, 0.22);
  animation-delay: 900ms;
}

.success-orbits span:nth-child(3) {
  --i: 2;
  animation-delay: 1700ms;
}

.success-card {
  position: relative;
  z-index: 1;
  width: min(100%, 980px);
  padding: clamp(28px, 4.6vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(54, 208, 194, 0.54);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(54, 208, 194, 0.13), transparent 28%),
    linear-gradient(145deg, rgba(54, 208, 194, 0.12), rgba(255, 255, 255, 0.035) 42%, rgba(216, 155, 82, 0.04)),
    rgba(7, 12, 13, 0.9);
  box-shadow:
    0 42px 150px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(54, 208, 194, 0.18),
    0 0 90px rgba(54, 208, 194, 0.28),
    0 0 150px rgba(216, 155, 82, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px);
  text-align: center;
  animation: success-card-in 560ms cubic-bezier(0.2, 0.84, 0.25, 1) 90ms both, success-card-aura 5.6s ease-in-out 700ms infinite;
}

.success-card::before {
  position: absolute;
  inset: -1px;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(54, 208, 194, 0.82), transparent 30%, rgba(216, 155, 82, 0.46), transparent 74%, rgba(54, 208, 194, 0.58));
  opacity: 0.78;
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1px;
}

.success-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.1), transparent 22%),
    radial-gradient(circle at 26% 72%, rgba(54, 208, 194, 0.1), transparent 20%),
    radial-gradient(circle at 76% 68%, rgba(216, 155, 82, 0.07), transparent 18%),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.7px);
  background-size: auto, auto, auto, 54px 54px;
  opacity: 0.38;
  pointer-events: none;
  animation: success-card-particles 9s linear infinite;
}

.success-card > * {
  position: relative;
  z-index: 1;
}

.success-card .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding: 11px 16px;
  color: #07100f;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 20%, #fff, transparent 34%),
    linear-gradient(135deg, #fff, rgba(54, 208, 194, 0.86) 64%, rgba(216, 155, 82, 0.62));
  box-shadow:
    0 0 0 7px rgba(54, 208, 194, 0.08),
    0 0 34px rgba(54, 208, 194, 0.48),
    0 0 70px rgba(216, 155, 82, 0.18);
  animation: signal-badge-pop 3.8s ease-in-out infinite;
}

.success-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 20px;
}

.success-status-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: rgba(220, 232, 232, 0.9);
  border: 1px solid rgba(54, 208, 194, 0.26);
  border-radius: 999px;
  background: rgba(5, 8, 9, 0.66);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.success-status-chips span::before {
  display: block;
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 16px rgba(54, 208, 194, 0.82);
  animation: signal-node-pulse 2.8s ease-in-out infinite;
}

.success-status-chips span:nth-child(2)::before {
  background: var(--amber);
  box-shadow: 0 0 16px rgba(216, 155, 82, 0.72);
  animation-delay: 600ms;
}

.success-status-chips span:nth-child(3)::before {
  animation-delay: 1200ms;
}

.success-card h2 {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(38px, 5vw, 72px);
}

.success-card p {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 21px);
}

.success-card > strong {
  display: block;
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--soft);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.32;
}

.success-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(28px, 4vw, 42px);
}

.success-sequence article {
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(54, 208, 194, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 16%, rgba(54, 208, 194, 0.12), transparent 72px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(216, 155, 82, 0.026)),
    rgba(5, 8, 9, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}

.success-sequence span {
  color: var(--amber);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.success-sequence p {
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.24;
}

.success-card .hero-actions {
  justify-content: center;
}

.flow-proof {
  background:
    radial-gradient(circle at 72% 38%, rgba(54, 208, 194, 0.14), transparent 28vw),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(5, 6, 7, 0.1));
}

.flow-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(340px, 0.72fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: stretch;
}

.flow-copy p {
  max-width: 720px;
  margin: 20px 0 0;
}

.flow-product {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(54, 208, 194, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(18, 107, 101, 0.9), rgba(5, 6, 7, 0.94)),
    url("assets/raem-ai-hero.png");
  background-size: cover;
  background-position: 58% center;
  box-shadow: 0 38px 130px rgba(0, 0, 0, 0.5), 0 0 90px rgba(54, 208, 194, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.flow-product::before {
  position: absolute;
  inset: -20% -18%;
  content: "";
  background:
    radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.22), transparent 18%),
    radial-gradient(circle at 70% 62%, rgba(54, 208, 194, 0.22), transparent 30%),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
  opacity: 0.62;
  pointer-events: none;
  animation: section-grid-drift 18s linear infinite;
}

.flow-product:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.5), 0 0 100px rgba(54, 208, 194, 0.2);
}

.flow-product > * {
  position: relative;
  z-index: 1;
}

.product-kicker {
  margin: 0 0 18px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flow-product .button {
  margin-top: 18px;
}

.tier-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.tier {
  padding: 24px;
  animation: panel-drift 9.5s ease-in-out infinite;
}

.tier.active {
  border-color: rgba(54, 208, 194, 0.42);
  background:
    linear-gradient(145deg, rgba(54, 208, 194, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(18, 107, 101, 0.3);
}

.problem-map {
  position: relative;
  min-height: 560px;
  margin-top: clamp(34px, 5vw, 64px);
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid rgba(54, 208, 194, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(54, 208, 194, 0.18), transparent 21%),
    radial-gradient(circle at 18% 14%, rgba(216, 155, 82, 0.08), transparent 28%),
    radial-gradient(circle at 86% 84%, rgba(54, 208, 194, 0.08), transparent 22%),
    linear-gradient(rgba(54, 208, 194, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.032) 1px, transparent 1px),
    rgba(5, 8, 9, 0.72);
  background-size: auto, auto, auto, 48px 48px, 48px 48px, auto;
  box-shadow: inset 0 0 110px rgba(54, 208, 194, 0.06), 0 38px 128px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(18px);
}

.problem-map::before {
  position: absolute;
  inset: 20px;
  z-index: 0;
  content: "";
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 1px, transparent 1.8px),
    linear-gradient(135deg, transparent 48%, rgba(54, 208, 194, 0.12) 49%, transparent 50%),
    linear-gradient(45deg, transparent 48%, rgba(216, 155, 82, 0.08) 49%, transparent 50%);
  background-size: 34px 34px, 180px 180px, 220px 220px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  opacity: 0.58;
  animation: map-pulse 5.2s ease-in-out infinite;
}

.problem-map::after {
  position: absolute;
  inset: 42px 54px;
  z-index: 0;
  content: "";
  border: 1px solid rgba(54, 208, 194, 0.13);
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(54, 208, 194, 0.045);
  transform: rotate(-5deg);
  animation: orbit-drift 11s ease-in-out infinite;
}

.diagnostic-lines {
  position: absolute;
  inset: clamp(24px, 4vw, 50px);
  z-index: 1;
  width: calc(100% - clamp(48px, 8vw, 100px));
  height: calc(100% - clamp(48px, 8vw, 100px));
  overflow: visible;
  pointer-events: none;
}

.diagnostic-path {
  fill: none;
  stroke: rgba(54, 208, 194, 0.44);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 9 13;
  filter: drop-shadow(0 0 8px rgba(54, 208, 194, 0.42));
  animation: diagnostic-flow 8s linear infinite;
}

.path-two,
.path-four {
  animation-delay: 900ms;
}

.path-three,
.path-five {
  stroke: rgba(216, 155, 82, 0.36);
  animation-delay: 1500ms;
}

.diagnostic-dot {
  fill: #fff;
  filter: drop-shadow(0 0 12px rgba(54, 208, 194, 0.84));
  animation: node-pulse 3.2s ease-in-out infinite;
}

.dot-core {
  fill: var(--teal);
}

.dot-two,
.dot-four {
  animation-delay: 800ms;
}

.dot-three,
.dot-five {
  animation-delay: 1400ms;
}

.scanner-beam {
  position: absolute;
  inset: 18px 12%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(54, 208, 194, 0.2), rgba(255, 255, 255, 0.12), transparent);
  clip-path: polygon(0 0, 100% 0, 96% 10%, 4% 10%);
  opacity: 0;
  filter: blur(0.3px) drop-shadow(0 0 20px rgba(54, 208, 194, 0.32));
  animation: scan-sweep 7.8s ease-in-out infinite;
}

.problem-card {
  position: absolute;
  z-index: 3;
  display: grid;
  width: min(226px, 24%);
  min-height: 112px;
  align-content: center;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(54, 208, 194, 0.26);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(54, 208, 194, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(7, 12, 13, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  animation: problem-float 8.5s ease-in-out infinite;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.problem-card::before {
  position: absolute;
  inset: -1px;
  content: "";
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(54, 208, 194, 0.36), transparent 32%, rgba(216, 155, 82, 0.18));
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.problem-card:hover {
  transform: translateY(-5px);
  border-color: rgba(54, 208, 194, 0.5);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4), 0 0 34px rgba(54, 208, 194, 0.14);
}

.problem-card.core:hover {
  transform: translate(-50%, calc(-50% - 5px));
}

.problem-card:hover::before {
  opacity: 0.5;
}

.problem-card span {
  position: relative;
  z-index: 1;
  color: var(--amber);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.problem-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.08;
}

.problem-card strong {
  position: relative;
  z-index: 1;
  color: rgba(5, 6, 7, 0.72);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.problem-card.core {
  left: 50%;
  top: 50%;
  width: min(260px, 29%);
  min-height: 144px;
  place-items: center;
  text-align: center;
  border-color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 50% 18%, #fff, rgba(255, 255, 255, 0.42) 42%, transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(54, 208, 194, 0.72));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 44px rgba(54, 208, 194, 0.38), 0 0 110px rgba(255, 255, 255, 0.1);
  animation: core-pulse 4s ease-in-out infinite;
}

.problem-card.core p {
  color: #050607;
  font-size: clamp(22px, 2.3vw, 30px);
}

.problem-pulse {
  position: absolute;
  inset: -20px;
  z-index: 0;
  border: 1px solid rgba(54, 208, 194, 0.38);
  border-radius: inherit;
  animation: pulse-ring 3.4s ease-in-out infinite;
}

.problem-card.n1 {
  left: 5%;
  top: 10%;
}

.problem-card.n2 {
  right: 5%;
  top: 9%;
  animation-delay: 700ms;
}

.problem-card.n3 {
  left: 4%;
  bottom: 11%;
  animation-delay: 1300ms;
}

.problem-card.n4 {
  right: 4%;
  bottom: 10%;
  animation-delay: 1900ms;
}

.problem-card.n5 {
  left: 50%;
  top: 5%;
  translate: -50% 0;
  animation-delay: 2400ms;
}

.method-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(30px, 5vw, 56px);
}

.method-grid article {
  min-height: 210px;
  padding: 26px;
  animation: panel-drift 10.5s ease-in-out infinite;
}

.method-grid h3 {
  font-size: 22px;
}

.future {
  padding-top: clamp(54px, 7vw, 96px);
}

.future-panel {
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid rgba(54, 208, 194, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(54, 208, 194, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(7, 12, 13, 0.84);
  box-shadow: var(--panel-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.future-panel p:last-child {
  max-width: 850px;
  margin: 22px 0 0;
}

.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(82px, 10vw, 140px) clamp(20px, 5vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.84), rgba(5, 6, 7, 0.48)),
    url("assets/raem-ai-hero.png");
  background-size: cover;
  background-position: center;
}

.final-cta::before,
.final-cta::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.final-cta::before {
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 48%, rgba(54, 208, 194, 0.26), transparent 25vw),
    linear-gradient(rgba(54, 208, 194, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.045) 1px, transparent 1px);
  background-size: auto, 60px 60px, 60px 60px;
  animation: section-grid-drift 22s linear infinite;
}

.final-cta::after {
  inset: 20% -8% 18%;
  z-index: -1;
  background:
    linear-gradient(100deg, transparent 8%, rgba(54, 208, 194, 0.22), transparent 42%),
    linear-gradient(80deg, transparent 38%, rgba(216, 155, 82, 0.12), transparent 76%);
  clip-path: polygon(0 42%, 100% 18%, 100% 20%, 0 44%, 0 62%, 100% 82%, 100% 84%, 0 64%);
  filter: drop-shadow(0 0 28px rgba(54, 208, 194, 0.28));
  animation: route-glow 6.6s ease-in-out infinite;
}

.cta-world {
  position: relative;
  overflow: hidden;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid rgba(54, 208, 194, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% 20%, rgba(54, 208, 194, 0.12), transparent 24%),
    rgba(5, 8, 9, 0.84);
  box-shadow: 0 36px 140px rgba(0, 0, 0, 0.54), 0 0 54px rgba(54, 208, 194, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.cta-world p {
  max-width: 760px;
}

.cta-world > * {
  position: relative;
  z-index: 1;
}

.contact-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 22% 18%, rgba(54, 208, 194, 0.14), transparent 30vw),
    radial-gradient(circle at 76% 6%, rgba(216, 155, 82, 0.09), transparent 24vw),
    #050607;
}

.contact-hero,
.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: clamp(20px, 5vw, 72px);
}

.contact-hero {
  min-height: 100svh;
  padding-top: clamp(124px, 13vw, 178px);
  padding-bottom: clamp(72px, 9vw, 126px);
}

.contact-hero::before,
.contact-section::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(rgba(54, 208, 194, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
  opacity: 0.9;
}

.contact-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.contact-atmosphere span {
  position: absolute;
  border: 1px solid rgba(54, 208, 194, 0.16);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(54, 208, 194, 0.2), transparent 58%);
}

.contact-atmosphere span:nth-child(1) {
  top: 20%;
  right: 12%;
  width: 220px;
  height: 220px;
}

.contact-atmosphere span:nth-child(2) {
  bottom: 12%;
  left: 10%;
  width: 150px;
  height: 150px;
}

.contact-atmosphere span:nth-child(3) {
  top: 48%;
  left: 52%;
  width: 84px;
  height: 84px;
  opacity: 0.6;
}

.contact-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(440px, 1fr);
  gap: clamp(38px, 6vw, 96px);
  align-items: center;
  width: min(100%, 1420px);
  margin-inline: auto;
}

.contact-copy h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(58px, 6vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.075em;
}

.contact-copy p:not(.eyebrow) {
  max-width: 46ch;
  margin: 24px 0 0;
  color: rgba(220, 232, 232, 0.78);
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.48;
}

.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-card {
  min-height: 240px;
  padding: clamp(22px, 2.3vw, 34px);
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 0%, rgba(54, 208, 194, 0.15), transparent 44%),
    rgba(4, 8, 9, 0.74);
  box-shadow: var(--panel-glow);
  backdrop-filter: blur(18px);
}

.contact-card:first-child {
  grid-column: span 2;
}

.contact-card span,
.contact-card strong,
.contact-form-note {
  color: var(--amber);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-card h2 {
  margin: 14px 0 10px;
  color: var(--ink);
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.contact-card p {
  margin: 0;
  color: rgba(220, 232, 232, 0.68);
}

.contact-card a {
  display: inline-flex;
  margin-top: 22px;
  color: var(--teal);
  font-weight: 900;
}

.contact-section {
  padding-top: clamp(72px, 8vw, 120px);
  padding-bottom: clamp(72px, 8vw, 120px);
}

.contact-form-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(420px, 1fr);
  gap: clamp(34px, 6vw, 96px);
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 64px);
  border: 1px solid rgba(54, 208, 194, 0.19);
  border-radius: 36px;
  background:
    radial-gradient(circle at 82% 10%, rgba(54, 208, 194, 0.12), transparent 35%),
    rgba(4, 8, 9, 0.72);
  box-shadow: var(--panel-glow);
}

.contact-form-panel h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(42px, 4.2vw, 74px);
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.contact-form-panel p:not(.eyebrow) {
  max-width: 44ch;
  color: rgba(220, 232, 232, 0.72);
  font-size: 17px;
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: rgba(220, 232, 232, 0.72);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.38);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  outline: none;
  padding: 15px 16px;
  text-transform: none;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(54, 208, 194, 0.54);
  box-shadow: 0 0 0 4px rgba(54, 208, 194, 0.08);
}

.contact-form .button {
  width: 100%;
  justify-content: center;
}

.contact-form-note {
  margin: 0;
  color: rgba(220, 232, 232, 0.55);
  line-height: 1.5;
}

.site-footer {
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(20px, 5vw, 72px);
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #050607;
}

.site-footer img {
  width: 92px;
  height: auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 18px;
  margin-left: auto;
  color: rgba(220, 232, 232, 0.76);
  font-size: 13px;
  font-weight: 900;
}

.footer-links a {
  transition: color 180ms ease, text-shadow 180ms ease;
}

.footer-links a:hover {
  color: #fff;
  text-shadow: 0 0 18px rgba(54, 208, 194, 0.24);
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 760ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform, filter;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

@keyframes content-rise {
  from {
    opacity: 0.01;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 72px 72px;
  }
}

@keyframes hero-scan-drift {
  from {
    background-position: -280px 0, 0 0, 0 0;
  }
  to {
    background-position: 280px 0, 72px 72px, 72px 72px;
  }
}

@keyframes hero-particle-drift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 72px 72px, 72px 72px, 96px 96px, 0 0;
  }
}

@keyframes node-pulse {
  0%, 100% {
    opacity: 0.58;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.14);
  }
}

@keyframes line-flow {
  0%, 100% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes panel-drift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes hero-panel-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

@keyframes engine-core-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 42px rgba(54, 208, 194, 0.38), 0 0 120px rgba(255, 255, 255, 0.08);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.035);
    box-shadow: 0 0 58px rgba(54, 208, 194, 0.52), 0 0 150px rgba(255, 255, 255, 0.12);
  }
}

@keyframes engine-halo {
  0%, 100% {
    opacity: 0.24;
    transform: translateY(0) scaleX(0.96);
  }
  50% {
    opacity: 0.46;
    transform: translateY(8px) scaleX(1.02);
  }
}

@keyframes problem-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes core-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 42px rgba(54, 208, 194, 0.34), 0 0 90px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow: 0 0 58px rgba(54, 208, 194, 0.48), 0 0 110px rgba(255, 255, 255, 0.16);
  }
}

@keyframes map-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes orbit-drift {
  0%, 100% {
    transform: rotate(-4deg) scale(1);
    opacity: 0.28;
  }
  50% {
    transform: rotate(-2deg) scale(1.02);
    opacity: 0.5;
  }
}

@keyframes section-grid-drift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 0 0, 0 0, 66px 66px, 66px 66px, 96px 96px;
  }
}

@keyframes route-glow {
  0%, 100% {
    opacity: 0.34;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes diagnostic-flow {
  from {
    stroke-dashoffset: 0;
    opacity: 0.3;
  }
  50% {
    opacity: 0.72;
  }
  to {
    stroke-dashoffset: -88;
    opacity: 0.3;
  }
}

@keyframes scan-sweep {
  0%, 12% {
    opacity: 0;
    transform: translateY(-24%);
  }
  22%, 72% {
    opacity: 0.72;
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(108%);
  }
}

@keyframes pulse-ring {
  0%, 100% {
    opacity: 0.12;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.46;
    transform: scale(1.08);
  }
}

@keyframes brief-scan {
  0%, 24% {
    opacity: 0;
    transform: translateX(-46%);
  }
  42%, 66% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    transform: translateX(42%);
  }
}

@keyframes brief-panel-scan {
  0%, 30% {
    opacity: 0;
    transform: translateX(-44%);
  }
  48%, 64% {
    opacity: 0.24;
  }
  100% {
    opacity: 0;
    transform: translateX(34%);
  }
}

@keyframes brief-step-in {
  from {
    opacity: 0.01;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes data-streams {
  from {
    background-position: -240px 0, 340px 0, 0 0;
  }
  to {
    background-position: 240px 0, -340px 0, 42px 84px;
  }
}

@keyframes digital-depth-drift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 0 0, 0 180px, 164px 0, 0 144px;
  }
}

@keyframes chamber-core-field {
  0%, 100% {
    opacity: 0.46;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.76;
    transform: scale(1.02);
  }
}

@keyframes digital-panel-float {
  0%, 100% {
    opacity: 0.62;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.86;
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes panel-data-pulse {
  0%, 100% {
    opacity: 0.34;
    transform: scaleX(0.68);
    transform-origin: left center;
  }
  50% {
    opacity: 0.82;
    transform: scaleX(1);
  }
}

@keyframes console-depth-breathe {
  0%, 100% {
    opacity: 0.22;
    background-position: 0 0, 0 0, 0 0;
  }
  50% {
    opacity: 0.42;
    background-position: 0 0, 0 0, 80px 0;
  }
}

@keyframes signal-route-drift {
  0%, 100% {
    opacity: 0.36;
    transform: translateY(0);
  }
  50% {
    opacity: 0.76;
    transform: translateY(10px);
  }
}

@keyframes signal-node-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.14);
  }
}

@keyframes chamber-module-drift {
  0%, 100% {
    opacity: 0.62;
    translate: 0 0;
  }
  50% {
    opacity: 0.9;
    translate: 0 -6px;
  }
}

@keyframes chamber-core-pulse {
  0%, 100% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.98);
  }
  50% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes chamber-ring-turn {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes chamber-route-flow {
  from {
    stroke-dashoffset: 0;
    opacity: 0.22;
  }
  50% {
    opacity: 0.58;
  }
  to {
    stroke-dashoffset: -84;
    opacity: 0.22;
  }
}

@keyframes component-breathe {
  0%, 100% {
    opacity: 0.68;
    transform: translateY(0);
  }
  50% {
    opacity: 0.95;
    transform: translateY(-5px);
  }
}

@keyframes component-scan {
  0%, 22% {
    opacity: 0;
    transform: translateX(-42%);
  }
  44%, 62% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    transform: translateX(42%);
  }
}

@keyframes success-stage-in {
  from {
    opacity: 0.01;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes achievement-stage-in {
  0% {
    opacity: 0.01;
    transform: translateY(20px) scale(0.975);
    box-shadow: 0 0 0 rgba(54, 208, 194, 0);
  }
  58% {
    opacity: 1;
    transform: translateY(0) scale(1.006);
    box-shadow:
      0 44px 160px rgba(0, 0, 0, 0.54),
      0 0 0 1px rgba(54, 208, 194, 0.18),
      0 0 210px rgba(54, 208, 194, 0.3),
      0 0 120px rgba(216, 155, 82, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes success-card-in {
  from {
    opacity: 0.01;
    transform: scale(0.96) translateY(14px);
    box-shadow: 0 0 0 rgba(54, 208, 194, 0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0 42px 150px rgba(0, 0, 0, 0.54), 0 0 76px rgba(54, 208, 194, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
}

@keyframes achievement-orbit-field {
  from {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.98);
    opacity: 0.36;
  }
  50% {
    opacity: 0.58;
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) scale(0.98);
    opacity: 0.36;
  }
}

@keyframes achievement-aura {
  0%, 100% {
    opacity: 0.48;
    transform: translate(-50%, -50%) scale(0.99);
    box-shadow:
      0 0 60px rgba(54, 208, 194, 0.16),
      inset 0 0 90px rgba(54, 208, 194, 0.05);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.01);
    box-shadow:
      0 0 94px rgba(54, 208, 194, 0.3),
      0 0 84px rgba(216, 155, 82, 0.1),
      inset 0 0 112px rgba(54, 208, 194, 0.08);
  }
}

@keyframes achievement-node-pulse {
  0%, 100% {
    opacity: 0.46;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes success-card-aura {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(54, 208, 194, 0));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(54, 208, 194, 0.22));
  }
}

@keyframes success-card-particles {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 0 0, 0 0, 54px 108px;
  }
}

@keyframes activation-component-pulse {
  0%, 100% {
    opacity: 0.42;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.02);
  }
}

@keyframes success-field-activate {
  0%, 100% {
    opacity: 0.36;
    filter: drop-shadow(0 0 0 rgba(54, 208, 194, 0));
  }
  50% {
    opacity: 0.72;
    filter: drop-shadow(0 0 18px rgba(54, 208, 194, 0.18));
  }
}

@keyframes success-card-scan {
  0%, 18% {
    opacity: 0;
    transform: translateX(-46%);
  }
  36%, 64% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
    transform: translateX(44%);
  }
}

@keyframes signal-badge-pop {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 7px rgba(54, 208, 194, 0.08),
      0 0 34px rgba(54, 208, 194, 0.48),
      0 0 70px rgba(216, 155, 82, 0.18);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 0 10px rgba(54, 208, 194, 0.12),
      0 0 52px rgba(54, 208, 194, 0.64),
      0 0 92px rgba(216, 155, 82, 0.26);
  }
}

@keyframes success-core-activate {
  0%, 100% {
    opacity: 0.24;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 0.44;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes success-orbit {
  0%, 100% {
    opacity: 0.34;
    transform: rotate(0deg) scale(0.98);
  }
  50% {
    opacity: 0.72;
    transform: rotate(8deg) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

}

@media (max-width: 1240px) {
  .hero-shell {
    grid-template-columns: 1fr;
    gap: 38px;
    min-height: auto;
  }

  .hero-copy {
    max-width: 980px;
  }

  .creation-engine {
    width: min(100%, 820px);
    margin-inline: auto;
  }

}

@media (max-width: 1120px) {
  .build-path,
  .flow-stage {
    grid-template-columns: 1fr;
  }

  .brief-console {
    grid-template-columns: 1fr;
  }

  .brief-system-module {
    opacity: 0.42;
  }

  .module-a,
  .module-c {
    left: 3%;
  }

  .module-b,
  .module-d {
    right: 3%;
  }

  .brief-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .brief-rail-step {
    min-height: 68px;
    text-align: center;
  }

  .brief-rail-step::before {
    inset: auto 14px -11px;
    width: auto;
    height: 2px;
  }

  .creation-engine {
    max-width: 820px;
  }

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

  .tier-track {
    grid-template-columns: 1fr;
  }

  .problem-map {
    min-height: 620px;
  }

  .problem-card {
    width: min(220px, 30%);
  }

  .problem-card.core {
    width: min(250px, 34%);
  }
}

@media (max-width: 720px) {
  .site-header {
    position: static;
    align-items: flex-start;
    flex-direction: column;
  }

  .brief-page .site-header {
    position: relative;
    align-items: center;
    flex-direction: row;
    gap: 14px;
    padding: 12px 20px;
  }

  .site-nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
  }

  .brief-page .site-nav {
    width: auto;
    flex: 1;
    justify-content: flex-end;
    gap: clamp(10px, 4vw, 18px);
    font-size: 11px;
  }

  .brief-page .brand {
    width: 104px;
  }

  .hero-world {
    min-height: auto;
    padding-top: 38px;
  }

  h1 {
    font-size: clamp(40px, 11.2vw, 56px);
  }

  .hero-copy {
    translate: 0 0;
  }

  h2 {
    font-size: clamp(32px, 9.6vw, 48px);
  }

  .hero-actions,
  .button-row,
  .button {
    width: 100%;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .creation-engine {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(54, 208, 194, 0.24);
    background:
      radial-gradient(circle at 50% 8%, rgba(54, 208, 194, 0.12), transparent 38%),
      linear-gradient(rgba(54, 208, 194, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(54, 208, 194, 0.035) 1px, transparent 1px),
      rgba(5, 8, 9, 0.68);
    background-size: auto, 42px 42px, 42px 42px, auto;
    box-shadow: 0 22px 90px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(16px);
  }

  .creation-engine::before,
  .creation-engine::after,
  .engine-core,
  .engine-routes {
    display: none;
  }

  .engine-title {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 72px;
    padding: 13px;
    transform: none;
    animation: none;
  }

  .engine-title strong {
    color: rgba(5, 6, 7, 0.7);
  }

  .module-grid,
  .build-list,
  .method-grid {
    grid-template-columns: 1fr;
  }

  .brief-console {
    margin-top: 0;
    padding: 12px;
  }

  .brief-page .creation-brief {
    padding-top: 18px;
  }

  .brief-page .section-kicker {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .brief-page .section-kicker h1 {
    max-width: 100%;
    font-size: clamp(27px, 7.5vw, 32px);
    line-height: 1;
  }

  .brief-page .section-kicker p:not(.eyebrow) {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.32;
  }

  .brief-page-actions {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 6px;
  }

  .brief-page-actions .button {
    min-height: 36px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .brief-signal {
    opacity: 0.45;
  }

  .brief-system-lines,
  .brief-system-core,
  .brief-system-module,
  .digital-world-panel,
  .ai-component-stack,
  .success-activation-grid {
    display: none;
  }

  .brief-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
  }

  .brief-rail-step {
    min-height: 44px;
    gap: 2px;
    padding: 8px;
    text-align: left;
  }

  .brief-rail-step::before {
    display: none;
  }

  .brief-rail-step span {
    font-size: 10px;
  }

  .brief-rail-step strong {
    font-size: 11px;
    line-height: 1.05;
  }

  .brief-rail-step.is-active {
    transform: none;
  }

  .brief-card,
  .brief-preview {
    border-radius: 12px;
  }

  .brief-card {
    min-height: auto;
    padding: 20px;
  }

  .brief-assembly-status {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .brief-step h3 {
    font-size: clamp(26px, 7.8vw, 36px);
  }

  .brief-options,
  .brief-field-grid,
  .brief-final-summary {
    grid-template-columns: 1fr;
  }

  .brief-options {
    gap: 9px;
    margin-top: 18px;
  }

  .brief-options button {
    min-height: 60px;
    padding: 14px;
  }

  .brief-field textarea {
    min-height: 180px;
  }

  .brief-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .brief-controls [data-brief-next],
  .brief-controls [data-brief-submit] {
    margin-left: 0;
  }

  .brief-success {
    min-height: auto;
    padding: 18px;
  }

  .achievement-light {
    width: 112%;
    min-height: 92%;
    opacity: 0.46;
  }

  .achievement-light::before,
  .achievement-light::after {
    width: 112vw;
  }

  .success-orbits {
    width: 120vw;
  }

  .success-card {
    padding: 24px;
    text-align: left;
  }

  .success-status-chips {
    justify-content: flex-start;
  }

  .success-card h2 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .success-sequence {
    grid-template-columns: 1fr;
  }

  .success-card .hero-actions {
    justify-content: stretch;
  }

  .engine-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 80px;
    padding: 13px;
    translate: 0 0;
    transform: none;
    animation: none;
  }

  .engine-card h2 {
    font-size: 16px;
  }

  .engine-card span {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .engine-card p {
    display: none;
  }

  .engine-card.idea,
  .engine-card.agent,
  .engine-card.app,
  .engine-card.automation,
  .engine-card.product,
  .engine-card.launch {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .hero-rail {
    justify-content: flex-start;
  }

  .module-card {
    min-height: 230px;
  }

  .build-orbit {
    display: none;
  }

  .flow-product {
    min-height: 380px;
  }

  .problem-map {
    display: grid;
    min-height: auto;
    gap: 14px;
    padding: 18px;
  }

  .problem-map::before {
    inset: 16px;
    background:
      linear-gradient(180deg, transparent, rgba(54, 208, 194, 0.22), transparent),
      radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.8px);
    background-size: 1px 100%, 30px 30px;
    background-position: center, 0 0;
    background-repeat: no-repeat, repeat;
  }

  .problem-map::after,
  .diagnostic-lines,
  .scanner-beam {
    display: none;
  }

  .problem-card,
  .problem-card.core,
  .problem-card.n1,
  .problem-card.n2,
  .problem-card.n3,
  .problem-card.n4,
  .problem-card.n5 {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 2;
    width: 100%;
    min-height: 92px;
    translate: 0 0;
    transform: none;
    animation: none;
  }

  .problem-card.core {
    order: -1;
    min-height: 118px;
  }

  .problem-card p {
    font-size: 20px;
  }

.site-footer {
  align-items: flex-start;
  flex-direction: column;
  }
}

/* FLOW product page */
.flow-page {
  background:
    radial-gradient(circle at 78% 6%, rgba(216, 155, 82, 0.11), transparent 24vw),
    radial-gradient(circle at 22% 14%, rgba(54, 208, 194, 0.14), transparent 30vw),
    radial-gradient(circle at 50% 74%, rgba(15, 94, 89, 0.22), transparent 36vw),
    #050607;
}

.flow-site-header {
  position: fixed;
}

.flow-hero,
.flow-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: clamp(20px, 5vw, 72px);
}

.flow-page main,
.flow-site-header {
  position: relative;
  z-index: 1;
}

.flow-brand-watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.075;
  mix-blend-mode: screen;
}

.flow-brand-watermark img {
  width: min(58vw, 980px);
  min-width: 420px;
  filter: blur(0.3px) drop-shadow(0 0 90px rgba(54, 208, 194, 0.2));
  transform: translate3d(0, 0, 0) rotate(-4deg);
  animation: flow-watermark-drift 18s ease-in-out infinite;
}

.flow-hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: clamp(118px, 12vw, 156px);
  padding-bottom: 72px;
}

.flow-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(54, 208, 194, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 58% 42%, rgba(54, 208, 194, 0.12), transparent 28vw);
  background-size: 56px 56px, 56px 56px, auto;
}

.flow-background::before,
.flow-background::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.flow-background::before {
  inset: 12% -12% auto;
  height: 48%;
  background:
    linear-gradient(95deg, transparent, rgba(54, 208, 194, 0.08), transparent),
    linear-gradient(170deg, transparent 32%, rgba(216, 155, 82, 0.12), transparent 54%);
  transform: skewY(-7deg);
  animation: flow-data-sweep 18s linear infinite;
}

.flow-background::after {
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.7px),
    linear-gradient(110deg, transparent 0%, rgba(118, 104, 255, 0.07) 48%, transparent 58%);
  background-size: 72px 72px, 220% 100%;
  background-position: 0 0, -120% 0;
  opacity: 0.34;
  mask-image: linear-gradient(180deg, #000, transparent 82%);
  animation: flow-scan-pass 9s ease-in-out infinite;
}

.flow-orb {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(54, 208, 194, 0.22);
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.18), transparent 18%),
    radial-gradient(circle, rgba(54, 208, 194, 0.12), transparent 62%);
  filter: blur(0.2px);
  opacity: 0.62;
  animation: flow-orbit 14s ease-in-out infinite;
}

.flow-orb.one {
  right: 9%;
  top: 18%;
}

.flow-orb.two {
  left: 7%;
  bottom: 12%;
  width: 150px;
  height: 150px;
  animation-delay: 900ms;
}

.flow-orb.three {
  right: 32%;
  bottom: 8%;
  width: 96px;
  height: 96px;
  animation-delay: 1800ms;
}

.flow-hero-grid,
.flow-promise,
.flow-steps,
.flow-showcase,
.flow-plans,
.flow-buy,
.flow-faq {
  width: min(100%, var(--max));
  margin-inline: auto;
}

.flow-hero-grid {
  display: grid;
  grid-template-columns: minmax(520px, 0.86fr) minmax(520px, 1fr);
  gap: clamp(32px, 4.6vw, 70px);
  align-items: center;
}

.flow-hero-copy h1 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(54px, 5.7vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.075em;
}

.flow-product-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 2vw, 34px);
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(54, 208, 194, 0.2);
  border-radius: 999px;
  background: rgba(5, 7, 9, 0.58);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.3), 0 0 34px rgba(54, 208, 194, 0.12);
  backdrop-filter: blur(18px);
}

.flow-product-lockup img {
  width: clamp(42px, 3.2vw, 58px);
  height: clamp(42px, 3.2vw, 58px);
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(54, 208, 194, 0.22));
}

.flow-product-lockup span {
  display: grid;
  gap: 2px;
}

.flow-product-lockup strong {
  color: #f7f4ec;
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.flow-product-lockup small {
  color: rgba(220, 232, 232, 0.62);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.flow-hero-copy p:not(.eyebrow) {
  max-width: 680px;
  margin: 26px 0 0;
  color: #c2cecc;
  font-size: clamp(18px, 2vw, 24px);
}

.flow-hero-actions,
.flow-buy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.flow-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.flow-trust-row span {
  padding: 8px 12px;
  color: rgba(220, 232, 232, 0.82);
  border: 1px solid rgba(54, 208, 194, 0.2);
  border-radius: 999px;
  background: rgba(7, 12, 13, 0.72);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.flow-device,
.flow-hero-visual {
  position: relative;
  min-height: auto;
  animation: hero-panel-float 9s ease-in-out infinite;
}

.flow-hero-visual::before,
.flow-hero-visual::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.flow-hero-visual::before {
  inset: 7% -8% 0;
  z-index: -2;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(118, 104, 255, 0.22), transparent 58%),
    radial-gradient(ellipse at 22% 70%, rgba(54, 208, 194, 0.14), transparent 46%);
  filter: blur(18px);
  animation: flow-visual-aura 7s ease-in-out infinite;
}

.flow-hero-visual::after {
  inset: 12% 3% -8%;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent, rgba(118, 104, 255, 0.24), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 52%);
  clip-path: polygon(0 52%, 100% 34%, 100% 37%, 0 55%);
  opacity: 0.62;
  animation: flow-rail-drift 8s ease-in-out infinite;
}

.flow-device-top,
.flow-hero-shot,
.flow-device-caption,
.flow-float-note {
  position: relative;
  z-index: 1;
}

.flow-device-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  color: rgba(220, 232, 232, 0.72);
}

.flow-device-top span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(54, 208, 194, 0.5);
}

.flow-device-top strong {
  margin-left: auto;
  color: #e3b16f;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.flow-hero-shot {
  overflow: hidden;
  margin-top: 0;
  border: 1px solid rgba(118, 104, 255, 0.24);
  border-radius: clamp(22px, 2vw, 36px);
  background: #09050c;
  box-shadow:
    0 56px 150px rgba(0, 0, 0, 0.68),
    0 0 90px rgba(118, 104, 255, 0.13),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.flow-hero-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 1000;
  object-fit: cover;
  object-position: center center;
}

.flow-float-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  color: #f7f4ec;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(5, 7, 9, 0.72);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.34), 0 0 28px rgba(118, 104, 255, 0.14);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(18px);
}

.flow-float-note.top {
  top: -18px;
  right: 6%;
}

.flow-float-note.bottom {
  left: 8%;
  bottom: -20px;
  color: #c6bbff;
}

.flow-device-caption {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(216, 155, 82, 0.2);
  border-radius: 18px;
  background: rgba(3, 8, 9, 0.78);
}

.flow-device-caption span {
  color: #e3b16f;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flow-device-caption strong {
  font-size: 20px;
  line-height: 1.1;
}

.flow-screen,
.flow-proof-card,
.flow-step,
.flow-plan-card,
.flow-faq-grid article {
  border: 1px solid rgba(54, 208, 194, 0.18);
  background:
    linear-gradient(145deg, rgba(54, 208, 194, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(7, 12, 13, 0.82);
  box-shadow: var(--panel-glow);
}

.flow-showcase .flow-screen {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.flow-showcase .flow-screen.locked {
  border-color: transparent;
  background: transparent;
}

.flow-mini-grid article {
  padding: 18px;
  border-radius: 18px;
}

.flow-screen span,
.flow-plan-card p,
.flow-proof-card span,
.flow-step span {
  color: #e3b16f;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flow-section {
  padding-top: clamp(76px, 10vw, 132px);
  padding-bottom: clamp(76px, 10vw, 132px);
}

.flow-page .section-kicker {
  max-width: 1080px;
}

.flow-page .section-kicker h2 {
  max-width: 1060px;
  font-size: clamp(40px, 4.7vw, 70px);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.flow-proof-grid,
.flow-step-track,
.flow-plan-grid,
.flow-faq-grid {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

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

.flow-proof-card,
.flow-step,
.flow-plan-card,
.flow-faq-grid article {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 24px;
}

.flow-proof-card h3,
.flow-step h3,
.flow-plan-card h3,
.flow-faq-grid h3 {
  margin: 14px 0 10px;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.04em;
}

.flow-proof-card p,
.flow-step p,
.flow-plan-card li,
.flow-faq-grid p,
.flow-showcase-copy p,
.flow-buy-panel p {
  color: #aebdbc;
}

.flow-step-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-step {
  min-height: 260px;
}

.flow-step span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #07100f;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7f4ec, #36d0c2);
  box-shadow: 0 0 32px rgba(54, 208, 194, 0.2);
}

.flow-showcase {
  display: grid;
  grid-template-columns: minmax(330px, 0.48fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
}

.flow-showcase-copy h2,
.flow-buy-panel h2 {
  margin: 0;
  font-size: clamp(38px, 4vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.flow-screen-reel,
.flow-screen-wall {
  display: grid;
  gap: 14px;
}

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

.flow-screen-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 24px;
  align-items: center;
}

.flow-screen {
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

.flow-screen img,
.flow-plan-card img,
.flow-plan-preview {
  width: 100%;
  border: 1px solid rgba(54, 208, 194, 0.16);
  border-radius: 14px;
  background: #09050c;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.32);
}

.flow-screen img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
  border-color: rgba(54, 208, 194, 0.2);
  border-radius: 22px;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.52),
    0 0 42px rgba(54, 208, 194, 0.08);
}

.flow-screen-feature img {
  aspect-ratio: auto;
  object-position: center center;
}

.flow-screen strong {
  display: block;
  margin-top: 16px;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.06em;
}

.flow-screen p {
  color: #aebdbc;
}

.flow-plan-grid {
  grid-template-columns: 1fr;
  gap: 24px;
}

.flow-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
  min-height: 0;
  padding: clamp(24px, 3vw, 42px);
}

.flow-plan-card.active {
  border-color: rgba(54, 208, 194, 0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(54, 208, 194, 0.18), transparent 40%),
    rgba(7, 12, 13, 0.9);
}

.flow-plan-card img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.flow-plan-preview {
  align-self: stretch;
  overflow: hidden;
  margin: 0;
  padding: clamp(8px, 1vw, 14px);
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 0%, rgba(54, 208, 194, 0.12), transparent 52%),
    rgba(3, 8, 9, 0.74);
}

.flow-plan-content {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.flow-plan-content > p {
  margin: 0;
}

.flow-plan-content > h3 {
  margin: 0;
}

.flow-plan-content strong {
  display: block;
  color: #f7f4ec;
}

.flow-plan-content ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.flow-plan-card li::before {
  content: "+ ";
  color: #36d0c2;
  font-weight: 900;
}

.flow-buy-panel {
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(28px, 6vw, 72px);
  text-align: center;
  border: 1px solid rgba(54, 208, 194, 0.28);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(54, 208, 194, 0.2), transparent 36%),
    linear-gradient(145deg, rgba(216, 155, 82, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(7, 12, 13, 0.9);
  box-shadow: 0 42px 140px rgba(0, 0, 0, 0.48), 0 0 70px rgba(54, 208, 194, 0.12);
}

.flow-buy-actions {
  justify-content: center;
}

.flow-buy-panel small {
  display: block;
  margin-top: 18px;
  color: rgba(220, 232, 232, 0.56);
}

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

/* FLOW cinematic product page reset */
.flow-page {
  --flow-wide: min(100% - clamp(40px, 7vw, 180px), 1880px);
  --flow-reading: min(100% - clamp(40px, 7vw, 180px), 1180px);
  background:
    radial-gradient(circle at 72% 4%, rgba(113, 72, 255, 0.12), transparent 26vw),
    radial-gradient(circle at 14% 12%, rgba(54, 208, 194, 0.07), transparent 28vw),
    linear-gradient(180deg, #020304 0%, #050607 44%, #020304 100%);
}

.flow-page::before {
  background:
    linear-gradient(rgba(100, 128, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 128, 255, 0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.48;
}

.flow-hero-grid,
.flow-promise,
.flow-steps,
.flow-showcase,
.flow-feature-stack,
.flow-plans,
.flow-buy,
.flow-faq {
  width: var(--flow-wide);
}

.flow-hero-grid {
  grid-template-columns: minmax(520px, 0.7fr) minmax(820px, 1.3fr);
  max-width: 1960px;
}

.flow-background {
  background:
    linear-gradient(rgba(118, 104, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 104, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 60% 40%, rgba(118, 104, 255, 0.09), transparent 30vw);
  background-size: 64px 64px, 64px 64px, auto;
}

.flow-background::before {
  background:
    linear-gradient(95deg, transparent, rgba(118, 104, 255, 0.08), transparent),
    linear-gradient(170deg, transparent 32%, rgba(54, 208, 194, 0.06), transparent 54%);
}

.flow-hero-copy h1 {
  max-width: 900px;
  font-size: clamp(60px, 5.2vw, 108px);
  line-height: 0.9;
}

.flow-hero-copy p:not(.eyebrow) {
  max-width: 760px;
}

.flow-device,
.flow-hero-visual {
  justify-self: end;
  width: min(108%, 1200px);
}

.flow-hero-shot img {
  aspect-ratio: 1440 / 1000;
  object-position: center center;
}

.flow-showcase {
  display: block;
}

.flow-showcase-heading {
  width: var(--flow-reading);
  margin-inline: auto;
  text-align: center;
}

.flow-showcase-heading h2 {
  max-width: 1100px;
  margin-inline: auto;
  font-size: clamp(50px, 5.8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.08em;
}

.flow-showcase-heading p {
  max-width: 860px;
  margin: 24px auto 0;
  color: #aebdbc;
  font-size: clamp(18px, 1.35vw, 24px);
}

.flow-product-stage {
  position: relative;
  margin-top: clamp(42px, 5.5vw, 88px);
}

.flow-product-stage::before {
  position: absolute;
  inset: 7% -5% 28%;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 50% 35%, rgba(118, 104, 255, 0.18), transparent 34%),
    radial-gradient(circle at 18% 62%, rgba(54, 208, 194, 0.1), transparent 24%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent);
  filter: blur(8px);
}

.flow-product-slide {
  display: grid;
  grid-template-columns: minmax(340px, 0.38fr) minmax(780px, 1fr);
  gap: clamp(32px, 5vw, 92px);
  align-items: center;
}

.flow-product-copy {
  max-width: 520px;
}

.flow-product-copy span,
.flow-slide-strip figcaption {
  color: #c6bbff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flow-product-copy h3 {
  margin-top: 14px;
  font-size: clamp(40px, 4vw, 78px);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

.flow-product-copy p {
  margin: 22px 0 0;
  color: #aebdbc;
  font-size: clamp(18px, 1.4vw, 24px);
}

.flow-product-slide > img,
.flow-feature-row > img,
.flow-slide-strip img {
  width: 100%;
  border: 1px solid rgba(118, 104, 255, 0.22);
  border-radius: clamp(20px, 2vw, 34px);
  background: #07040a;
  object-fit: contain;
  box-shadow:
    0 44px 120px rgba(0, 0, 0, 0.62),
    0 0 80px rgba(118, 104, 255, 0.11);
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

.flow-product-slide > img:hover,
.flow-feature-row > img:hover,
.flow-slide-strip figure:hover img {
  transform: translateY(-6px) scale(1.012);
  border-color: rgba(118, 104, 255, 0.42);
  box-shadow:
    0 54px 140px rgba(0, 0, 0, 0.68),
    0 0 110px rgba(118, 104, 255, 0.18);
}

.flow-product-slide > img {
  aspect-ratio: 1.78;
  object-position: 50% 8%;
}

.flow-slide-strip {
  display: flex;
  gap: clamp(20px, 2.6vw, 42px);
  margin-top: clamp(34px, 5vw, 72px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 0 10px;
  scroll-behavior: smooth;
  scroll-snap-type: none;
  scrollbar-width: none;
}

.flow-slide-strip::-webkit-scrollbar {
  display: none;
}

.flow-slide-strip figure {
  flex: 0 0 min(88vw, 1280px);
  margin: 0;
}

.flow-slide-strip img {
  aspect-ratio: 1.78;
  object-position: 50% 8%;
}

.flow-slide-strip figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: #f7f4ec;
}

.flow-slide-strip figcaption span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #050607;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7f4ec, #7ff7ea);
  box-shadow: 0 0 28px rgba(54, 208, 194, 0.22);
}

.flow-slide-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(14px, 2vw, 24px);
}

.flow-slide-dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(247, 244, 236, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 rgba(118, 104, 255, 0);
  transition:
    width 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.flow-slide-dots button:hover {
  transform: translateY(-2px);
  border-color: rgba(127, 247, 234, 0.72);
}

.flow-slide-dots button.is-active {
  width: 36px;
  border-color: rgba(127, 247, 234, 0.8);
  background: linear-gradient(90deg, #f7f4ec, #7ff7ea 52%, #7668ff);
  box-shadow:
    0 0 26px rgba(127, 247, 234, 0.28),
    0 0 42px rgba(118, 104, 255, 0.18);
}

.flow-feature-stack {
  display: grid;
  gap: clamp(72px, 9vw, 150px);
  margin-inline: auto;
}

.flow-feature-row {
  display: grid;
  grid-template-columns: minmax(380px, 0.42fr) minmax(760px, 1fr);
  gap: clamp(34px, 6vw, 112px);
  align-items: center;
}

.flow-feature-row.reverse {
  grid-template-columns: minmax(760px, 1fr) minmax(380px, 0.42fr);
}

.flow-feature-row.reverse .flow-feature-copy {
  order: 2;
  width: min(100%, 640px);
  justify-self: end;
  text-align: left;
}

.flow-feature-row.reverse img {
  order: 1;
  justify-self: start;
}

.flow-feature-row.final {
  grid-template-columns: minmax(430px, 0.36fr) minmax(860px, 1fr);
}

.flow-feature-copy h2 {
  max-width: 760px;
  font-size: clamp(48px, 5.4vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.08em;
}

.flow-feature-copy p:not(.eyebrow) {
  max-width: 640px;
  margin: 24px 0 0;
  color: #aebdbc;
  font-size: clamp(18px, 1.35vw, 24px);
}

.flow-feature-row > img {
  width: min(100%, 1120px);
  height: auto;
  aspect-ratio: auto;
  object-position: center center;
  justify-self: end;
}

.flow-plans .section-kicker,
.flow-faq .section-kicker {
  width: var(--flow-reading);
  margin-inline: auto;
}

.flow-plan-grid {
  width: min(var(--flow-wide), 1720px);
  margin-inline: auto;
}

@media (min-width: 2200px) {
  .flow-page {
    --flow-wide: min(100% - 320px, 2360px);
    --flow-reading: min(100% - 420px, 1500px);
  }

  .flow-hero-grid {
    max-width: 2360px;
    grid-template-columns: minmax(720px, 0.66fr) minmax(1220px, 1.34fr);
  }

  .flow-device,
  .flow-hero-visual {
    width: min(110%, 1380px);
  }

  .flow-product-slide {
    grid-template-columns: minmax(520px, 0.38fr) minmax(1120px, 1fr);
  }

  .flow-feature-row {
    grid-template-columns: minmax(520px, 0.4fr) minmax(1120px, 1fr);
  }

  .flow-feature-row.reverse {
    grid-template-columns: minmax(1120px, 1fr) minmax(520px, 0.4fr);
  }
}

@media (max-width: 1700px) {
  .flow-page {
    --flow-wide: min(100% - 96px, 1500px);
    --flow-reading: min(100% - 120px, 1120px);
  }

  .flow-hero-grid {
    grid-template-columns: minmax(390px, 0.72fr) minmax(680px, 1.18fr);
    gap: clamp(28px, 3.6vw, 56px);
  }

  .flow-hero-copy h1 {
    max-width: 720px;
    font-size: clamp(56px, 5.7vw, 86px);
  }

  .flow-device,
  .flow-hero-visual {
    width: min(106%, 980px);
  }

  .flow-showcase-heading h2 {
    font-size: clamp(48px, 5.2vw, 86px);
  }

  .flow-product-slide,
  .flow-feature-row,
  .flow-feature-row.final {
    grid-template-columns: minmax(330px, 0.42fr) minmax(660px, 1fr);
  }

  .flow-feature-row.reverse {
    grid-template-columns: minmax(660px, 1fr) minmax(330px, 0.42fr);
  }

  .flow-slide-strip figure {
    flex-basis: min(82vw, 1080px);
  }
}

@keyframes flow-data-sweep {
  0% {
    transform: translateX(-10%) skewY(-7deg);
  }
  100% {
    transform: translateX(10%) skewY(-7deg);
  }
}

@keyframes flow-orbit {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(14px, -18px, 0) scale(1.05);
  }
}

@keyframes flow-visual-aura {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes flow-rail-drift {
  0%,
  100% {
    transform: translate3d(-2%, 0, 0);
    opacity: 0.42;
  }
  50% {
    transform: translate3d(3%, -2%, 0);
    opacity: 0.7;
  }
}

@keyframes flow-watermark-drift {
  0%,
  100% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -1vh, 0) rotate(-2deg) scale(1.035);
  }
}

@keyframes flow-scan-pass {
  0%,
  28% {
    background-position: 0 0, -120% 0;
  }
  62% {
    background-position: 0 0, 120% 0;
  }
  100% {
    background-position: 0 0, 120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-background::before,
  .flow-background::after,
  .flow-orb,
  .flow-brand-watermark img,
  .flow-hero-visual,
  .flow-hero-visual::before,
  .flow-hero-visual::after {
    animation: none;
  }

  .flow-product-slide > img,
  .flow-feature-row > img,
  .flow-slide-strip img {
    transition: none;
  }
}

@media (max-width: 980px) {
  .flow-hero-grid,
  .flow-showcase {
    grid-template-columns: 1fr;
  }

  .flow-device,
  .flow-hero-visual {
    min-height: auto;
  }

  .flow-proof-grid,
  .flow-step-track,
  .flow-plan-grid {
    grid-template-columns: 1fr;
  }

  .flow-plan-card {
    grid-template-columns: 1fr;
  }

  .flow-plan-preview,
  .flow-plan-content {
    grid-column: auto;
  }

  .flow-plan-preview {
    margin-bottom: 22px;
  }

  .flow-screen-wall,
  .flow-screen-reel {
    transform: none;
  }

  .flow-screen-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .flow-site-header {
    position: absolute;
  }

  .flow-hero-copy h1 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .flow-page .section-kicker h2,
  .flow-showcase-copy h2,
  .flow-buy-panel h2 {
    font-size: clamp(34px, 10vw, 48px);
    letter-spacing: -0.055em;
  }

  .flow-hero-actions,
  .flow-buy-actions {
    display: grid;
  }

  .flow-device,
  .flow-hero-visual {
    min-height: auto;
    border-radius: 22px;
  }

  .flow-screen-wall,
  .flow-screen-reel,
  .flow-faq-grid {
    grid-template-columns: 1fr;
  }

  .flow-screen {
    min-height: auto;
  }
}

@media (max-width: 1280px) {
  .flow-page {
    --flow-wide: min(100% - 48px, 1180px);
    --flow-reading: min(100% - 48px, 980px);
  }

  .flow-hero-grid,
  .flow-product-slide,
  .flow-feature-row,
  .flow-feature-row.reverse,
  .flow-feature-row.final {
    grid-template-columns: 1fr;
  }

  .flow-device,
  .flow-hero-visual {
    justify-self: stretch;
    width: 100%;
  }

  .flow-product-copy,
  .flow-feature-copy {
    max-width: 900px;
  }

  .flow-feature-row.reverse .flow-feature-copy,
  .flow-feature-row.reverse img {
    order: initial;
  }

  .flow-feature-row.reverse .flow-feature-copy {
    width: auto;
    justify-self: start;
    text-align: left;
  }

  .flow-slide-strip figure {
    flex-basis: min(78vw, 680px);
  }
}

@media (max-width: 760px) {
  .flow-page {
    --flow-wide: min(100% - 32px, 680px);
    --flow-reading: min(100% - 32px, 680px);
  }

  .flow-hero {
    padding-top: 56px;
  }

  .flow-hero-copy h1,
  .flow-showcase-heading h2,
  .flow-feature-copy h2 {
    font-size: clamp(42px, 13vw, 64px);
    letter-spacing: -0.065em;
  }

  .flow-product-copy h3 {
    font-size: clamp(34px, 10vw, 52px);
  }

  .flow-slide-strip {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .flow-slide-strip figure {
    flex-basis: 86vw;
  }

  .flow-float-note {
    min-height: 34px;
    padding: 8px 12px;
    font-size: 9px;
  }

  .flow-product-slide > img,
  .flow-feature-row > img,
  .flow-slide-strip img {
    border-radius: 18px;
  }

  .flow-plan-card {
    padding: 20px;
  }
}

/* About RAEM */
.about-page {
  overflow-x: clip;
  background:
    radial-gradient(circle at 76% 10%, rgba(54, 208, 194, 0.1), transparent 30rem),
    linear-gradient(rgba(54, 208, 194, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.017) 1px, transparent 1px),
    #050809;
  background-size: auto, 68px 68px, 68px 68px, auto;
}

.about-page main {
  padding-top: clamp(108px, 10vw, 148px);
}

.about-hero,
.about-band,
.about-capabilities,
.about-founder,
.about-final {
  width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  gap: clamp(56px, 9vw, 130px);
  align-items: center;
  min-height: min(720px, calc(100vh - 108px));
  padding-block: clamp(50px, 8vw, 100px);
}

.about-hero-copy h1 {
  max-width: 780px;
  margin: 16px 0 26px;
  color: #f5f4ef;
  font-size: clamp(3.2rem, 6.2vw, 6.8rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.about-hero-copy > p:not(.eyebrow) {
  max-width: 680px;
  color: rgba(220, 232, 232, 0.68);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.75;
}

.about-signal {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid rgba(54, 208, 194, 0.2);
  border-radius: 8px;
  background: rgba(7, 14, 15, 0.82);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.38), 0 0 60px rgba(54, 208, 194, 0.06);
}

.about-signal::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(54, 208, 194, 0.24), transparent 42%, rgba(216, 155, 82, 0.12));
  content: "";
  filter: blur(18px);
  opacity: 0.55;
}

.about-core {
  display: grid;
  gap: 6px;
  padding: 25px;
  border-bottom: 1px solid rgba(54, 208, 194, 0.14);
}

.about-core span,
.about-signal-row span,
.about-path-grid article > span {
  color: #d89b52;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-core strong {
  color: #f5f4ef;
  font-size: 1.45rem;
}

.about-core small {
  color: rgba(220, 232, 232, 0.48);
}

.about-signal-row {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
}

.about-signal-row p {
  color: rgba(244, 245, 240, 0.84);
  font-size: 0.9rem;
}

.about-band,
.about-capabilities,
.about-founder {
  padding-block: clamp(82px, 10vw, 145px);
  border-top: 1px solid rgba(54, 208, 194, 0.11);
}

.about-section-heading {
  max-width: 900px;
}

.about-section-heading h2,
.about-founder h2,
.about-final h2 {
  margin: 16px 0 0;
  color: #f5f4ef;
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.about-copy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 6vw, 80px);
  margin-top: 48px;
}

.about-copy-grid p,
.about-founder p,
.about-final > p:not(.eyebrow) {
  color: rgba(220, 232, 232, 0.65);
  font-size: 1rem;
  line-height: 1.8;
}

.about-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px;
}

.about-path-grid article {
  min-height: 330px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(54, 208, 194, 0.14);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(54, 208, 194, 0.055), rgba(7, 12, 13, 0.84) 50%);
}

.about-path-grid h3 {
  margin: 22px 0 16px;
  color: #f5f4ef;
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  line-height: 1.15;
}

.about-path-grid p {
  color: rgba(220, 232, 232, 0.62);
  line-height: 1.75;
}

.about-path-grid a,
.about-founder a {
  display: inline-flex;
  margin-top: 26px;
  color: #54dfd2;
  font-weight: 700;
}

.about-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(45px, 9vw, 130px);
}

.about-founder p + p {
  margin-top: 18px;
}

.about-final {
  margin-bottom: clamp(70px, 9vw, 120px);
  padding: clamp(52px, 8vw, 90px);
  border: 1px solid rgba(54, 208, 194, 0.2);
  border-radius: 8px;
  background: radial-gradient(circle at 80% 30%, rgba(54, 208, 194, 0.12), transparent 38%), rgba(7, 14, 15, 0.88);
}

.about-final > p:not(.eyebrow) {
  margin-top: 20px;
}

@media (max-width: 820px) {
  .about-hero,
  .about-copy-grid,
  .about-path-grid,
  .about-founder {
    grid-template-columns: 1fr;
  }

  .about-hero {
    min-height: auto;
  }

  .about-hero-copy h1 {
    font-size: clamp(3rem, 13vw, 5rem);
  }
}

@media (max-width: 560px) {
  .about-page main {
    padding-top: 88px;
  }

  .about-hero,
  .about-band,
  .about-capabilities,
  .about-founder,
  .about-final {
    width: min(100% - 30px, 680px);
  }

  .about-hero {
    gap: 44px;
    padding-block: 48px 76px;
  }

  .about-final {
    padding: 34px 24px;
  }
}

.flow-mobile-header-cta {
  display: none;
}

.flow-header-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(54, 208, 194, 0.26);
  border-radius: 999px;
  color: #061010;
  background: linear-gradient(135deg, #f8fffb, #7ff3e7);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -0.02em;
  box-shadow: 0 12px 34px rgba(54, 208, 194, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.flow-header-buy:hover {
  transform: translateY(-1px);
  border-color: rgba(54, 208, 194, 0.48);
  box-shadow: 0 16px 42px rgba(54, 208, 194, 0.2);
}

.home-mobile-header-cta {
  display: none;
}

@media (max-width: 760px) {
  .flow-page {
    --flow-wide: min(100% - 32px, 680px);
    --flow-reading: min(100% - 32px, 680px);
  }

  .flow-site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(118, 104, 255, 0.18);
    background:
      linear-gradient(180deg, rgba(5, 6, 9, 0.94), rgba(5, 6, 9, 0.76)),
      rgba(5, 6, 9, 0.9);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
  }

  .flow-site-header .brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .flow-site-header .brand img {
    width: 112px;
    max-width: 42vw;
    height: auto;
  }

  .flow-site-header .site-nav {
    display: none;
  }

  .flow-header-buy {
    display: none;
  }

  .flow-mobile-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-left: auto;
    padding: 0 16px;
    border: 1px solid rgba(54, 208, 194, 0.26);
    border-radius: 999px;
    color: #061010;
    background: linear-gradient(135deg, #f8fffb, #7ff3e7);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: -0.02em;
    box-shadow: 0 12px 34px rgba(54, 208, 194, 0.16);
  }

  .flow-hero,
  .flow-section {
    padding-inline: 16px;
    overflow: hidden;
  }

  .flow-hero {
    min-height: auto;
    padding-top: 38px;
    padding-bottom: 54px;
  }

  .flow-hero-grid {
    width: 100%;
    gap: 34px;
  }

  .flow-product-lockup {
    gap: 10px;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 9px 13px 9px 10px;
  }

  .flow-product-lockup img {
    width: 42px;
    height: 42px;
  }

  .flow-product-lockup strong {
    font-size: 18px;
  }

  .flow-product-lockup small {
    font-size: 9px;
  }

  .flow-hero-copy h1 {
    max-width: 11ch;
    font-size: clamp(46px, 15vw, 64px);
    line-height: 0.9;
    letter-spacing: -0.075em;
  }

  .flow-hero-copy p:not(.eyebrow) {
    max-width: 34ch;
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.48;
  }

  .flow-hero-actions,
  .flow-buy-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }

  .flow-hero-actions .button,
  .flow-buy-actions .button {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    padding-inline: 18px;
    font-size: 14px;
  }

  .flow-trust-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .flow-trust-row span {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }

  .flow-hero-visual {
    width: 100%;
    justify-self: stretch;
    animation: none;
  }

  .flow-hero-visual::before,
  .flow-hero-visual::after {
    opacity: 0.38;
    animation: none;
  }

  .flow-hero-shot {
    border-radius: 22px;
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.58),
      0 0 42px rgba(118, 104, 255, 0.1);
  }

  .flow-hero-shot img {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
  }

  .flow-float-note {
    display: none;
  }

  .flow-background::before,
  .flow-background::after,
  .flow-orb,
  .flow-brand-watermark img {
    animation: none;
  }

  .flow-background::before,
  .flow-background::after {
    opacity: 0.42;
  }

  .flow-orb {
    opacity: 0.28;
    filter: blur(8px);
  }

  .flow-brand-watermark {
    opacity: 0.04;
  }

  .flow-brand-watermark img {
    width: 92vw;
    min-width: 300px;
    transform: translate3d(0, 0, 0) rotate(-4deg);
  }

  .flow-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .flow-promise,
  .flow-steps,
  .flow-showcase,
  .flow-feature-stack,
  .flow-plans,
  .flow-buy,
  .flow-faq {
    width: min(100%, var(--flow-wide));
  }

  .flow-page .section-kicker,
  .flow-showcase-heading {
    margin-bottom: 28px;
  }

  .flow-page .section-kicker h2,
  .flow-showcase-heading h2,
  .flow-feature-copy h2,
  .flow-buy-panel h2 {
    max-width: 11ch;
    font-size: clamp(36px, 12vw, 54px);
    line-height: 0.92;
  }

  .flow-proof-grid,
  .flow-step-track,
  .flow-faq-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .flow-product-stage {
    display: block;
  }

  .flow-product-slide {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: auto;
  }

  .flow-product-slide > img,
  .flow-feature-row > img,
  .flow-slide-strip img {
    width: 100%;
    max-height: none;
    border-radius: 18px;
    object-fit: contain;
    object-position: center center;
  }

  .flow-product-copy,
  .flow-feature-copy {
    max-width: 100%;
  }

  .flow-product-copy h3 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .flow-slide-strip {
    gap: 16px;
    padding-block: 4px 18px;
    scroll-padding-inline: 16px;
  }

  .flow-slide-strip figure {
    flex-basis: min(86vw, 520px);
  }

  .flow-feature-stack {
    gap: 84px;
  }

  .flow-feature-row,
  .flow-feature-row.reverse,
  .flow-feature-row.final {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .flow-feature-row.reverse .flow-feature-copy,
  .flow-feature-row.reverse img {
    order: initial;
    justify-self: stretch;
  }

  .flow-feature-row > img {
    justify-self: stretch;
  }

  .flow-plan-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .flow-plan-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
    border-radius: 22px;
  }

  .flow-plan-preview {
    aspect-ratio: auto;
    padding: 8px;
  }

  .flow-plan-card img {
    height: auto;
    object-fit: contain;
    object-position: center top;
  }

  .flow-plan-content {
    gap: 10px;
  }

  .flow-buy-panel {
    padding: 24px;
    border-radius: 24px;
  }
}

@media (max-width: 420px) {
  .flow-site-header {
    padding-inline: 14px;
  }

  .flow-site-header .brand img {
    width: 100px;
  }

  .flow-mobile-header-cta {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 11px;
  }

  .flow-hero-copy h1 {
    font-size: clamp(42px, 14.5vw, 58px);
  }

  .flow-product-lockup {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .raem-home .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(54, 208, 194, 0.18);
    background:
      linear-gradient(180deg, rgba(5, 6, 7, 0.95), rgba(5, 6, 7, 0.78)),
      rgba(5, 6, 7, 0.9);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
  }

  .raem-home .brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .raem-home .brand img {
    width: 112px;
    max-width: 42vw;
    height: auto;
  }

  .raem-home .site-header .site-nav {
    display: none;
  }

  .home-mobile-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-left: auto;
    padding: 0 16px;
    border: 1px solid rgba(54, 208, 194, 0.28);
    border-radius: 999px;
    color: #061010;
    background: linear-gradient(135deg, #f8fffb, #7ff3e7);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: -0.02em;
    box-shadow: 0 12px 34px rgba(54, 208, 194, 0.16);
  }

  .raem-home .hero-world {
    min-height: auto;
    padding: 42px 20px 64px;
  }

  .raem-home .hero-world::before {
    opacity: 0.32;
    animation: none;
  }

  .raem-home .world-bg {
    inset: 0;
    opacity: 1;
  }

  .raem-home .world-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .raem-home .grid-scan,
  .raem-home .connection-field {
    opacity: 0.5;
  }

  .raem-home .connection-field .node {
    animation: none;
  }

  .raem-home .hero-shell {
    width: 100%;
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .raem-home .hero-copy {
    max-width: 100%;
    translate: 0 0;
  }

  .raem-home .hero-copy h1 {
    max-width: 11ch;
    font-size: clamp(46px, 14.5vw, 64px);
    line-height: 0.92;
    letter-spacing: -0.075em;
  }

  .raem-home .hero-lede {
    max-width: 33ch;
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.48;
  }

  .raem-home .hero-actions,
  .raem-home .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 28px;
  }

  .raem-home .button {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    padding-inline: 18px;
    font-size: 14px;
  }

  .raem-home .creation-engine {
    width: 100%;
    margin-inline: 0;
    transform: none;
    animation: none;
  }

  .raem-home .engine-card {
    min-height: 78px;
    padding: 16px 14px;
  }

  .raem-home .engine-card h2 {
    font-size: 18px;
  }

  .raem-home .engine-card p {
    display: none;
  }

  .raem-home .hero-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }

  .raem-home .hero-rail span {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }

  .raem-home .section {
    padding: 72px 20px;
  }

  .raem-home .section::before {
    opacity: 0.68;
    animation: none;
  }

  .raem-home .section::after,
  .raem-home .build-orbit,
  .raem-home .scanner-beam,
  .raem-home .diagnostic-lines,
  .raem-home .final-cta::after {
    display: none;
  }

  .raem-home .section > *,
  .raem-home .final-cta > * {
    width: 100%;
  }

  .raem-home .section-kicker {
    max-width: 100%;
  }

  .raem-home .section-kicker h2,
  .raem-home .build-copy h2,
  .raem-home .flow-copy h2,
  .raem-home .future-panel h2,
  .raem-home .cta-world h2 {
    max-width: 11ch;
    font-size: clamp(36px, 11vw, 52px);
    line-height: 0.95;
    letter-spacing: -0.06em;
  }

  .raem-home .section-kicker p,
  .raem-home .build-copy p,
  .raem-home .flow-copy p,
  .raem-home .flow-product p,
  .raem-home .future-panel p,
  .raem-home .final-cta p {
    max-width: 34ch;
    font-size: 17px;
    line-height: 1.5;
  }

  .raem-home .module-grid,
  .raem-home .build-list,
  .raem-home .method-grid,
  .raem-home .tier-track {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .raem-home .module-card,
  .raem-home .build-list article,
  .raem-home .method-grid article,
  .raem-home .tier,
  .raem-home .flow-product,
  .raem-home .future-panel,
  .raem-home .cta-world {
    min-height: auto;
    padding: 22px;
    border-radius: 18px;
    animation: none;
  }

  .raem-home .module-card {
    display: grid;
    gap: 14px;
  }

  .raem-home .module-status {
    margin-bottom: 0;
  }

  .raem-home .module-symbol {
    position: relative;
    top: auto;
    right: auto;
    width: 46px;
    height: 46px;
    margin-top: 10px;
  }

  .raem-home .module-card h3 {
    margin: 0;
    font-size: 25px;
    line-height: 1.03;
  }

  .raem-home .module-card p,
  .raem-home .build-list p,
  .raem-home .method-grid p,
  .raem-home .tier p {
    font-size: 16px;
    line-height: 1.48;
  }

  .raem-home .build-path,
  .raem-home .flow-stage {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .raem-home .build-list::before {
    display: none;
  }

  .raem-home .flow-product {
    margin-top: 0;
  }

  .raem-home .flow-product .button {
    margin-top: 20px;
  }

  .raem-home .problem-map {
    display: grid;
    min-height: auto;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
  }

  .raem-home .problem-map::after {
    display: none;
  }

  .raem-home .problem-card,
  .raem-home .problem-card.core,
  .raem-home .problem-card.n1,
  .raem-home .problem-card.n2,
  .raem-home .problem-card.n3,
  .raem-home .problem-card.n4 {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 78px;
    transform: none;
  }

  .raem-home .future {
    padding-top: 72px;
  }

  .raem-home .final-cta {
    padding: 72px 20px;
  }

  .raem-home .site-footer {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 28px 20px;
  }

  .raem-home .site-footer img {
    width: 112px;
  }
}

@media (max-width: 420px) {
  .raem-home .site-header {
    padding-inline: 14px;
  }

  .raem-home .brand img {
    width: 100px;
  }

  .home-mobile-header-cta {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 11px;
  }

  .raem-home .hero-copy h1 {
    font-size: clamp(42px, 14vw, 58px);
  }
}

@media (max-width: 900px) {
  .nav-dropdown-wide {
    min-width: 300px;
  }

  .nav-submenu {
    right: calc(100% + 10px);
    left: auto;
    width: 210px;
    transform: translateX(6px);
  }

  .nav-product-group:hover .nav-submenu,
  .nav-product-group:focus-within .nav-submenu {
    transform: translateX(0);
  }

  .contact-shell,
  .contact-form-panel {
    grid-template-columns: 1fr;
  }

  .contact-card-grid {
    grid-template-columns: 1fr;
  }

  .contact-card:first-child {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .brief-page .site-header,
  .contact-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(54, 208, 194, 0.18);
    background:
      linear-gradient(180deg, rgba(5, 6, 7, 0.95), rgba(5, 6, 7, 0.78)),
      rgba(5, 6, 7, 0.9);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
  }

  .brief-page .site-header .site-nav,
  .contact-page .site-header .site-nav,
  .legal-page .site-header .site-nav,
  .about-page .site-header .site-nav {
    display: none;
  }

  .brief-page .brand,
  .contact-page .brand,
  .legal-page .brand,
  .about-page .brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .brief-page .brand img,
  .contact-page .brand img,
  .legal-page .brand img,
  .about-page .brand img {
    width: 112px;
    max-width: 42vw;
    height: auto;
  }

  .contact-hero {
    min-height: auto;
    padding: 56px 20px 70px;
  }

  .contact-section {
    padding: 70px 20px;
  }

  .contact-copy h1,
  .contact-form-panel h2 {
    max-width: 12ch;
    font-size: clamp(42px, 13vw, 60px);
    line-height: 0.92;
  }

  .contact-copy p:not(.eyebrow),
  .contact-form-panel p:not(.eyebrow) {
    max-width: 34ch;
    font-size: 17px;
    line-height: 1.48;
  }

  .contact-copy .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 28px;
  }

  .contact-page .button {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    padding-inline: 18px;
    font-size: 14px;
  }

  .contact-card {
    min-height: auto;
    padding: 22px;
    border-radius: 22px;
  }

  .contact-card h2 {
    overflow-wrap: anywhere;
    font-size: clamp(20px, 5.8vw, 26px);
    letter-spacing: -0.045em;
  }

  .contact-form-panel {
    padding: 22px;
    border-radius: 24px;
  }

  .site-footer {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 28px 20px;
  }

  .site-footer img {
    width: 112px;
  }

  .footer-links {
    justify-content: flex-start;
    margin-left: 0;
  }
}

.ai-stack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(640px, 1.22fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  overflow: hidden;
}

.ai-stack::before {
  position: absolute;
  inset: 8% -12% auto 38%;
  height: 620px;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, rgba(54, 208, 194, 0.22), transparent 30%),
    radial-gradient(circle at 80% 50%, rgba(216, 155, 82, 0.14), transparent 28%);
  filter: blur(24px);
  opacity: 0.75;
}

.stack-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.stack-copy h2 {
  max-width: 820px;
  margin: 0 0 22px;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.stack-copy p {
  max-width: 620px;
  color: rgba(220, 232, 232, 0.72);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.52;
}

.stack-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.stack-status-strip span {
  padding: 10px 13px;
  border: 1px solid rgba(54, 208, 194, 0.22);
  border-radius: 999px;
  color: rgba(233, 244, 244, 0.82);
  background: rgba(3, 13, 14, 0.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stack-lab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(430px, 1.18fr);
  gap: 18px;
  min-height: 520px;
  padding: 18px;
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(4, 18, 19, 0.9), rgba(12, 12, 12, 0.92));
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stack-code {
  align-self: center;
}

.code-window {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(5, 7, 7, 0.86);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36);
}

.code-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(220, 232, 232, 0.7);
  font-size: 12px;
}

.code-topbar span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(54, 208, 194, 0.5);
}

.code-topbar span:nth-child(2) {
  background: rgba(216, 155, 82, 0.62);
}

.code-topbar span:nth-child(3) {
  background: rgba(255, 255, 255, 0.34);
}

.code-topbar strong {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.code-window pre {
  margin: 0;
  padding: 20px;
  color: #f4fbfb;
  font: 600 13px/1.75 "Courier New", monospace;
  white-space: pre-wrap;
}

.code-muted {
  color: rgba(216, 155, 82, 0.75);
  margin-right: 18px;
  user-select: none;
}

.stack-architecture {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(54, 208, 194, 0.08), transparent 38%),
    repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 16px);
}

.stack-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stack-circuit path {
  fill: none;
  stroke: rgba(54, 208, 194, 0.34);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 9 12;
  animation: diagnostic-flow 10s linear infinite;
  filter: drop-shadow(0 0 8px rgba(54, 208, 194, 0.28));
}

.stack-node {
  position: absolute;
  width: 160px;
  padding: 16px;
  border: 1px solid rgba(54, 208, 194, 0.28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(4, 18, 19, 0.92), rgba(5, 8, 8, 0.9));
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.32);
}

.stack-node span {
  display: block;
  margin-bottom: 10px;
  color: #d89b52;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.stack-node strong {
  display: block;
  color: #fff;
  font-size: 20px;
}

.stack-node small {
  display: block;
  margin-top: 6px;
  color: rgba(220, 232, 232, 0.62);
  font-size: 12px;
  line-height: 1.35;
}

.stack-node.n1 {
  left: 5%;
  top: 38%;
}

.stack-node.n2 {
  left: 28%;
  top: 18%;
}

.stack-node.n3 {
  left: 28%;
  bottom: 16%;
}

.stack-node.n4 {
  right: 24%;
  top: 38%;
}

.stack-node.n5 {
  right: 5%;
  bottom: 16%;
}

.stack-node.major {
  border-color: rgba(216, 155, 82, 0.5);
  background: linear-gradient(145deg, rgba(53, 35, 13, 0.82), rgba(5, 8, 8, 0.9));
}

@media (max-width: 1120px) {
  .ai-stack {
    grid-template-columns: 1fr;
  }

  .stack-copy {
    max-width: 900px;
  }

  .stack-lab {
    grid-template-columns: 1fr;
  }

  .stack-architecture {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  .ai-stack {
    width: min(100% - 32px, 680px);
    padding-block: 72px;
  }

  .stack-copy h2 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .stack-lab {
    padding: 14px;
    border-radius: 24px;
  }

  .code-window pre {
    font-size: 12px;
  }

  .stack-architecture {
    display: grid;
    gap: 10px;
    min-height: auto;
    padding: 14px;
  }

  .stack-circuit {
    display: none;
  }

  .stack-node {
    position: relative;
    inset: auto;
    width: 100%;
  }
}
/* RAEM homepage AI systems redesign pass */
.module-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(43, 255, 228, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(43, 255, 228, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.22;
  pointer-events: none;
  z-index: -1;
}

.module-diagram {
  min-height: 128px;
  margin: 1.2rem 0 1.4rem;
  border: 1px solid rgba(43, 255, 228, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(43, 255, 228, 0.18), transparent 35%),
    radial-gradient(circle at 80% 65%, rgba(154, 95, 255, 0.16), transparent 34%),
    rgba(1, 14, 15, 0.62);
  position: relative;
  overflow: hidden;
}

.module-diagram span {
  position: absolute;
  display: block;
  border: 1px solid rgba(43, 255, 228, 0.5);
  background: rgba(43, 255, 228, 0.09);
  box-shadow: 0 0 20px rgba(43, 255, 228, 0.14);
}

.agent-diagram span:nth-child(1) {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  left: 20px;
  top: 42px;
}

.agent-diagram span:nth-child(2),
.agent-diagram span:nth-child(3),
.agent-diagram span:nth-child(4) {
  width: 72px;
  height: 26px;
  border-radius: 999px;
  right: 20px;
}

.agent-diagram span:nth-child(2) { top: 24px; }
.agent-diagram span:nth-child(3) { top: 55px; }
.agent-diagram span:nth-child(4) { top: 86px; }

.app-diagram span:nth-child(1) {
  inset: 20px auto auto 22px;
  width: 60px;
  height: 88px;
  border-radius: 16px;
}

.app-diagram span:nth-child(2) {
  right: 24px;
  top: 26px;
  width: 84px;
  height: 30px;
  border-radius: 10px;
}

.app-diagram span:nth-child(3) {
  right: 24px;
  bottom: 26px;
  width: 118px;
  height: 34px;
  border-radius: 999px;
}

.automation-diagram span {
  width: 54px;
  height: 34px;
  border-radius: 10px;
  top: 47px;
}

.automation-diagram span:nth-child(1) { left: 18px; }
.automation-diagram span:nth-child(2) { left: 92px; }
.automation-diagram span:nth-child(3) { right: 92px; }
.automation-diagram span:nth-child(4) { right: 18px; }

.product-diagram span:nth-child(1) {
  left: 22px;
  top: 28px;
  width: 110px;
  height: 72px;
  border-radius: 18px;
}

.product-diagram span:nth-child(2) {
  right: 28px;
  top: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.product-diagram span:nth-child(3) {
  right: 24px;
  bottom: 22px;
  width: 108px;
  height: 28px;
  border-radius: 999px;
}

.module-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.module-chip-row span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(235, 255, 252, 0.86);
  border: 1px solid rgba(43, 255, 228, 0.2);
  border-radius: 999px;
  padding: 0.42rem 0.65rem;
  background: rgba(43, 255, 228, 0.06);
}

.build-system-map,
.product-path-map,
.method-proof-panel {
  margin-top: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgba(43, 255, 228, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(43, 255, 228, 0.08), transparent 42%),
    rgba(2, 10, 12, 0.74);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
}

.build-system-map {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 42px minmax(130px, 1fr) 42px minmax(130px, 1fr) 42px minmax(130px, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: clamp(1.2rem, 2vw, 1.8rem);
}

.route-node {
  min-height: 132px;
  border: 1px solid rgba(43, 255, 228, 0.2);
  border-radius: 20px;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.34);
}

.route-node.active {
  border-color: rgba(43, 255, 228, 0.54);
  box-shadow: 0 0 28px rgba(43, 255, 228, 0.12);
}

.route-node span,
.method-signal-grid span {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  margin-bottom: 0.65rem;
}

.route-node strong {
  display: block;
  color: var(--text);
  font-size: 1.08rem;
  margin-bottom: 0.4rem;
}

.route-node small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.route-link {
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 255, 228, 0.05), rgba(43, 255, 228, 0.74), rgba(154, 95, 255, 0.08));
  position: relative;
}

.route-link::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(43, 255, 228, 0.85);
  border-right: 1px solid rgba(43, 255, 228, 0.85);
  transform: rotate(45deg);
}

.build-console {
  grid-column: 1 / -1;
  margin-top: 1rem;
}

.console-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(235, 255, 252, 0.68);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.console-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(43, 255, 228, 0.45);
}

.build-console pre,
.method-console pre {
  margin: 0;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0 0 16px 16px;
  padding: 1rem;
  color: rgba(235, 255, 252, 0.9);
  background: rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
  line-height: 1.75;
}

.product-path-map {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) 1.14fr;
  gap: clamp(1.4rem, 3vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}

.product-path-copy h3 {
  font-size: clamp(1.7rem, 3vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
  margin: 0.4rem 0 1rem;
}

.product-path-nodes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 160px;
  background:
    linear-gradient(90deg, rgba(154, 95, 255, 0.08), rgba(43, 255, 228, 0.08)),
    radial-gradient(circle at center, rgba(154, 95, 255, 0.22), transparent 45%);
  border-radius: 24px;
}

.path-token {
  min-width: 118px;
  text-align: center;
  border: 1px solid rgba(43, 255, 228, 0.18);
  border-radius: 999px;
  padding: 0.9rem 1rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.42);
  font-weight: 800;
}

.path-token.active {
  background: rgba(43, 255, 228, 0.15);
  border-color: rgba(43, 255, 228, 0.55);
}

.path-arrow {
  width: clamp(32px, 5vw, 80px);
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 255, 228, 0.2), rgba(154, 95, 255, 0.8));
}

.method-proof-panel {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1.2rem, 2.5vw, 2rem);
}

.method-signal-grid {
  display: grid;
  gap: 0.8rem;
}

.method-signal-grid article {
  border: 1px solid rgba(43, 255, 228, 0.14);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.method-signal-grid strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.method-signal-grid p {
  margin: 0;
  color: var(--muted);
}

.future-panel {
  position: relative;
  overflow: hidden;
}

.future-orbit {
  position: relative;
  min-height: 380px;
  margin-top: 2rem;
  border: 1px solid rgba(43, 255, 228, 0.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at center, rgba(43, 255, 228, 0.13), transparent 33%),
    radial-gradient(circle at 70% 20%, rgba(154, 95, 255, 0.13), transparent 34%),
    rgba(0, 0, 0, 0.24);
}

.future-orbit::before,
.future-orbit::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px dashed rgba(43, 255, 228, 0.16);
  border-radius: 50%;
}

.future-orbit::after {
  inset: 28%;
  border-color: rgba(154, 95, 255, 0.18);
}

.future-orbit span {
  position: absolute;
  border: 1px solid rgba(43, 255, 228, 0.22);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.52);
  color: rgba(235, 255, 252, 0.9);
  font-weight: 800;
}

.future-orbit .future-core {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  border-color: rgba(43, 255, 228, 0.5);
  box-shadow: 0 0 48px rgba(43, 255, 228, 0.16);
}

.future-orbit span:nth-child(2) { left: 9%; top: 18%; }
.future-orbit span:nth-child(3) { right: 10%; top: 16%; }
.future-orbit span:nth-child(4) { left: 12%; bottom: 16%; }
.future-orbit span:nth-child(5) { right: 12%; bottom: 16%; }
.future-orbit span:nth-child(6) { left: 50%; bottom: 7%; transform: translateX(-50%); }

.cta-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.cta-signal-grid span {
  border: 1px solid rgba(43, 255, 228, 0.18);
  border-radius: 18px;
  padding: 1rem;
  color: rgba(235, 255, 252, 0.9);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 800;
}

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

  .route-link {
    width: 1px;
    height: 30px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(43, 255, 228, 0.05), rgba(43, 255, 228, 0.74), rgba(154, 95, 255, 0.08));
  }

  .route-link::after {
    right: -4px;
    top: auto;
    bottom: -1px;
    transform: rotate(135deg);
  }

  .product-path-map,
  .method-proof-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .module-diagram {
    min-height: 108px;
  }

  .product-path-nodes,
  .cta-signal-grid {
    grid-template-columns: 1fr;
  }

  .product-path-nodes {
    flex-direction: column;
    align-items: stretch;
  }

  .path-arrow {
    width: 1px;
    height: 28px;
    align-self: center;
  }

  .future-orbit {
    min-height: auto;
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
  }

  .future-orbit::before,
  .future-orbit::after {
    display: none;
  }

  .future-orbit span,
  .future-orbit .future-core {
    position: static;
    transform: none;
    text-align: center;
  }
}

/* RAEM homepage visual system pass. Kept under .raem-home to isolate FLOW pages. */
.raem-home {
  --raem-content: 1480px;
  --raem-reading: 760px;
  --raem-glass: rgba(4, 12, 14, 0.76);
  --raem-glass-strong: rgba(3, 10, 12, 0.92);
  --raem-teal: #42dfcf;
  --raem-teal-soft: rgba(66, 223, 207, 0.16);
  --raem-gold-soft: rgba(216, 155, 82, 0.15);
}

.raem-home .hero-world {
  min-height: min(100svh, 1120px);
  padding-inline: max(clamp(28px, 5vw, 88px), calc((100% - var(--raem-content)) / 2));
}

@media (min-width: 1600px) {
  .raem-home .hero-world {
    --hero-video-opacity: 1;
  }
}

@media (min-width: 2600px) {
  .raem-home .hero-world {
    --hero-video-opacity: 1;
  }
}

@media (min-width: 3800px) {
  .raem-home .hero-world {
    --hero-video-opacity: 1;
  }
}

.raem-home .hero-world::after {
  background:
    radial-gradient(circle at 56% 49%, rgba(34, 217, 201, 0.09), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(122, 90, 244, 0.055), transparent 31%),
    linear-gradient(90deg, rgba(2, 6, 8, 0.9) 0%, rgba(2, 6, 8, 0.58) 39%, rgba(2, 6, 8, 0.18) 66%, rgba(2, 6, 8, 0.62) 100%),
    linear-gradient(180deg, transparent 50%, #040607 100%);
}

.raem-home .hero-shell {
  width: min(100%, var(--raem-content));
  grid-template-columns: minmax(490px, 0.88fr) minmax(650px, 1.12fr);
  gap: clamp(34px, 4vw, 76px);
}

.raem-home .hero-copy {
  max-width: var(--raem-reading);
  translate: 0 0;
}

.raem-home .hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(54px, 4.1vw, 72px);
  line-height: 0.93;
  letter-spacing: -0.072em;
}

.raem-home .hero-lede {
  max-width: 590px;
  line-height: 1.56;
}

.raem-home .creation-engine {
  min-height: clamp(590px, 43vw, 660px);
}

.raem-home .creation-engine::before {
  inset: 8% 3% 7%;
  background:
    linear-gradient(rgba(55, 243, 220, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 243, 220, 0.055) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(66, 223, 207, 0.1), transparent 56%);
  background-size: 34px 34px, 34px 34px, auto;
}

.raem-home .engine-card {
  width: clamp(176px, 28%, 218px);
  min-height: 118px;
  padding: 16px 17px;
  border-radius: 18px;
  background: linear-gradient(130deg, rgba(5, 18, 20, 0.94), rgba(5, 12, 17, 0.7));
  backdrop-filter: blur(15px);
}

.raem-home .engine-card h2 {
  font-size: clamp(19px, 1.45vw, 23px);
}

.raem-home .engine-card.idea { left: 2%; top: 8%; }
.raem-home .engine-card.agent { right: 2%; top: 8%; }
.raem-home .engine-card.app { left: -1%; top: 38%; }
.raem-home .engine-card.automation { right: -1%; top: 38%; }
.raem-home .engine-card.product { left: 5%; bottom: 6%; }
.raem-home .engine-card.launch { right: 5%; bottom: 6%; }

.raem-home .engine-title {
  width: min(200px, 32%);
  min-height: 98px;
}

.raem-home .hero-rail {
  max-width: var(--raem-content);
  padding-block: 18px 28px;
}

.raem-home .current-proof {
  position: relative;
  z-index: 4;
  padding: clamp(80px, 7vw, 140px) max(clamp(28px, 5vw, 88px), calc((100% - var(--raem-content)) / 2)) clamp(62px, 5.4vw, 86px);
  margin-top: 0;
  background:
    radial-gradient(circle at 24% 0%, rgba(66, 223, 207, 0.1), transparent 34%),
    radial-gradient(circle at 72% 12%, rgba(120, 96, 255, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(4, 6, 7, 0), #050708 58%);
}

.raem-home .proof-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(330px, 0.56fr) minmax(650px, 0.94fr);
  align-items: stretch;
  gap: clamp(28px, 3.8vw, 58px);
  width: min(100%, 1420px);
  margin-inline: auto;
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid rgba(66, 223, 207, 0.24);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(66, 223, 207, 0.13), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(66, 223, 207, 0.16), transparent 26%),
    radial-gradient(circle at 16% 82%, rgba(216, 155, 82, 0.08), transparent 30%),
    rgba(4, 12, 14, 0.88);
  box-shadow:
    0 42px 120px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(66, 223, 207, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -42px 70px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.raem-home .proof-shell::before,
.raem-home .proof-shell::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.raem-home .proof-shell::before {
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(rgba(66, 223, 207, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), transparent 74%);
  opacity: 0.48;
}

.raem-home .proof-shell::after {
  top: 0;
  left: 34px;
  right: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.72), transparent);
  opacity: 0.82;
}

.raem-home .hud-code-core {
  position: absolute;
  left: 32%;
  top: 27%;
  z-index: 1;
  display: grid;
  gap: 7px;
  width: min(460px, 36%);
  padding: 14px 16px;
  border-left: 1px solid rgba(66, 223, 207, 0.22);
  opacity: 1;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(66, 223, 207, 0.38));
}

.raem-home .hud-code-core::before,
.raem-home .hud-code-core::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.raem-home .hud-code-core::before {
  inset: -20px -34px;
  background:
    radial-gradient(circle at 45% 50%, rgba(66, 223, 207, 0.2), transparent 62%),
    linear-gradient(90deg, rgba(66, 223, 207, 0.1), rgba(66, 223, 207, 0.04), transparent);
  filter: blur(10px);
}

.raem-home .hud-code-core::after {
  top: 50%;
  left: -56px;
  width: calc(100% + 112px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.88), transparent);
  opacity: 0.72;
  animation: proof-scan-slide 5.8s ease-in-out infinite;
}

.raem-home .hud-code-core code {
  position: relative;
  display: block;
  overflow: hidden;
  width: max-content;
  max-width: 100%;
  padding-right: 18px;
  color: rgba(115, 255, 243, 0.98);
  font: 900 clamp(12px, 0.78vw, 15px)/1.12 "Courier New", monospace;
  letter-spacing: 0.035em;
  text-shadow: 0 0 14px rgba(66, 223, 207, 0.78);
  white-space: nowrap;
  transform-origin: left center;
  animation: proof-code-text-build 8.4s ease-in-out infinite;
}

.raem-home .hud-code-core code::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.28), transparent);
  animation: proof-code-cursor-scan 2.8s ease-in-out infinite;
}

.raem-home .hud-code-core code:nth-child(1) { margin-left: 3%; animation-delay: -0.2s; }
.raem-home .hud-code-core code:nth-child(2) { margin-left: 0; animation-delay: -0.55s; }
.raem-home .hud-code-core code:nth-child(3) { margin-left: 7%; animation-delay: -0.9s; }
.raem-home .hud-code-core code:nth-child(4) { margin-left: 2%; animation-delay: -1.25s; }
.raem-home .hud-code-core code:nth-child(5) { margin-left: 12%; animation-delay: -1.6s; }
.raem-home .hud-code-core code:nth-child(6) { margin-left: 5%; animation-delay: -1.95s; }
.raem-home .hud-code-core code:nth-child(7) { margin-left: 18%; animation-delay: -2.3s; }
.raem-home .hud-code-core code:nth-child(8) { margin-left: 9%; animation-delay: -2.65s; }
.raem-home .hud-code-core code:nth-child(9) { margin-left: 14%; animation-delay: -3s; opacity: 0.72; }
.raem-home .hud-code-core code:nth-child(10) { margin-left: 4%; animation-delay: -3.35s; opacity: 0.7; }
.raem-home .hud-code-core code:nth-child(11) { margin-left: 19%; animation-delay: -3.7s; opacity: 0.64; }
.raem-home .hud-code-core code:nth-child(12) { margin-left: 11%; animation-delay: -4.05s; opacity: 0.68; }

.raem-home .proof-intro {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 480px;
}

.raem-home .proof-intro .eyebrow {
  margin-bottom: 12px;
  color: var(--raem-teal);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .proof-intro h2 {
  max-width: 12.5ch;
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 2.55vw, 48px);
  line-height: 0.94;
  letter-spacing: -0.07em;
}

.raem-home .proof-intro p:not(.eyebrow) {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 0.95vw, 17px);
  line-height: 1.6;
}

.raem-home .proof-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.raem-home .proof-item {
  position: relative;
  min-height: 176px;
  padding: 20px 20px 48px;
  border: 1px solid rgba(66, 223, 207, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 0%, rgba(66, 223, 207, 0.13), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.006) 48%),
    rgba(2, 8, 10, 0.72);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.raem-home .proof-item::after {
  content: "";
  position: absolute;
  inset: auto 20px 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(66, 223, 207, 0.6), transparent);
  opacity: 0.44;
}

.raem-home .proof-item span {
  display: inline-flex;
  margin-bottom: 24px;
  color: rgba(216, 155, 82, 0.9);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.raem-home .proof-item strong {
  display: block;
  max-width: 18ch;
  color: var(--text);
  font-size: clamp(19px, 1.25vw, 23px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.raem-home .proof-item p {
  max-width: 30ch;
  margin: 12px 0 0;
  color: rgba(214, 225, 226, 0.72);
  font-size: 14px;
  line-height: 1.56;
}

.raem-home .proof-item a {
  position: absolute;
  left: 20px;
  bottom: 28px;
  z-index: 1;
  color: var(--raem-teal);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.raem-home .proof-note {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin: -6px 0 0;
  padding-left: calc(330px + clamp(28px, 3.8vw, 58px));
  color: rgba(214, 225, 226, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1500px) {
  .raem-home .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.raem-home .system-section {
  background:
    radial-gradient(circle at 74% 24%, rgba(43, 255, 228, 0.045), transparent 36%),
    linear-gradient(180deg, #050708, #050607);
}

.raem-home .system-section:nth-of-type(even) {
  background:
    radial-gradient(circle at 19% 35%, rgba(154, 95, 255, 0.045), transparent 33%),
    linear-gradient(180deg, #040607, #06080a);
}

.raem-home .stack-hud {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.86;
}

.raem-home .stack-hud::before,
.raem-home .stack-hud::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.raem-home .stack-hud::before {
  top: 13%;
  right: 2%;
  width: min(760px, 46vw);
  height: 330px;
  background:
    repeating-linear-gradient(0deg, rgba(66, 223, 207, 0.28) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(66, 223, 207, 0.2) 20px 23px, transparent 23px 37px),
    radial-gradient(circle at 68% 50%, rgba(66, 223, 207, 0.32), transparent 58%);
  mask-image: radial-gradient(ellipse at center, #000 0 47%, transparent 76%);
  filter: blur(2px);
  animation: proof-code-breathe 12s ease-in-out infinite reverse;
}

.raem-home .stack-hud::after {
  top: 24%;
  left: 8%;
  width: 48%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.82), transparent);
  box-shadow:
    0 84px 0 rgba(216, 155, 82, 0.13),
    0 178px 0 rgba(66, 223, 207, 0.12);
  transform: skewY(-5deg);
  animation: proof-scan-slide 10s ease-in-out infinite;
}

.raem-home .stack-hud span {
  position: absolute;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.88), rgba(66, 223, 207, 0.18), transparent),
    repeating-linear-gradient(90deg, rgba(66, 223, 207, 0.24) 0 8px, transparent 8px 15px);
  box-shadow: 0 0 22px rgba(66, 223, 207, 0.46);
  opacity: 0.48;
  animation: stack-hud-drift 11s ease-in-out infinite;
}

.raem-home .stack-hud span:nth-child(1) { top: 18%; left: 10%; width: 18%; animation-delay: -0.8s; }
.raem-home .stack-hud span:nth-child(2) { top: 28%; left: 6%; width: 30%; animation-delay: -2.1s; }
.raem-home .stack-hud span:nth-child(3) { top: 41%; left: 15%; width: 22%; animation-delay: -4.6s; }
.raem-home .stack-hud span:nth-child(4) { top: 58%; right: 9%; width: 34%; animation-delay: -1.5s; }
.raem-home .stack-hud span:nth-child(5) { top: 67%; right: 17%; width: 20%; animation-delay: -3.7s; }
.raem-home .stack-hud span:nth-child(6) { top: 76%; right: 5%; width: 27%; animation-delay: -6s; }
.raem-home .stack-hud span:nth-child(7) { bottom: 15%; left: 12%; width: 24%; animation-delay: -7.4s; opacity: 0.32; }
.raem-home .stack-hud span:nth-child(8) { bottom: 8%; left: 25%; width: 15%; animation-delay: -8.8s; opacity: 0.28; }
.raem-home .stack-hud span:nth-child(9) { top: 23%; right: 18%; width: 24%; animation-delay: -2.7s; opacity: 0.42; }
.raem-home .stack-hud span:nth-child(10) { top: 31%; right: 12%; width: 31%; animation-delay: -3.2s; opacity: 0.44; }
.raem-home .stack-hud span:nth-child(11) { top: 39%; right: 24%; width: 19%; animation-delay: -3.9s; opacity: 0.36; }
.raem-home .stack-hud span:nth-child(12) { bottom: 26%; right: 10%; width: 36%; animation-delay: -5.2s; opacity: 0.42; }
.raem-home .stack-hud span:nth-child(13),
.raem-home .stack-hud span:nth-child(14) {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(66, 223, 207, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 42%, rgba(66, 223, 207, 0.25) 43% 47%, transparent 48%);
  clip-path: none;
  opacity: 0.48;
  animation: proof-reticle-pulse 9s ease-in-out infinite;
}
.raem-home .stack-hud span:nth-child(13) { top: 14%; left: 23%; animation-delay: -1.6s; }
.raem-home .stack-hud span:nth-child(14) { bottom: 20%; right: 22%; animation-delay: -5.8s; }

.raem-home .stack-hud .hud-code-core {
  left: auto;
  top: 21%;
  right: 10%;
  width: min(430px, 30vw);
  opacity: 0.96;
}

.raem-home .stack-hud .hud-code-core code {
  font-size: clamp(10px, 0.64vw, 12px);
}

.raem-home .ai-stack,
.raem-home .build-path {
  padding-inline: max(clamp(28px, 5vw, 72px), calc((100% - var(--raem-content)) / 2));
  grid-template-columns: minmax(380px, 0.8fr) minmax(620px, 1.2fr);
  gap: clamp(40px, 4vw, 74px);
}

.raem-home .ai-stack > *,
.raem-home .build-path > * {
  width: 100%;
  margin-inline: 0;
}

.raem-home .stack-copy h2,
.raem-home .build-copy h2 {
  letter-spacing: -0.075em;
}

.raem-home .stack-copy h2 {
  max-width: 760px;
  font-size: clamp(40px, 3.8vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.raem-home .stack-lab {
  min-height: 486px;
  border-color: rgba(66, 223, 207, 0.2);
  background:
    radial-gradient(circle at 48% 49%, rgba(66, 223, 207, 0.09), transparent 45%),
    rgba(4, 11, 14, 0.73);
}

@keyframes proof-code-breathe {
  0%, 100% {
    opacity: 0.32;
    transform: translate3d(0, 0, 0) scaleX(0.94);
  }
  45% {
    opacity: 0.66;
    transform: translate3d(-14px, 5px, 0) scaleX(1.06);
  }
  70% {
    opacity: 0.42;
    transform: translate3d(10px, -4px, 0) scaleX(0.98);
  }
}

@keyframes proof-code-text-build {
  0%, 100% {
    opacity: 0.18;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-18px);
  }
  18% {
    opacity: 0.82;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
  44% {
    opacity: 0.64;
    clip-path: inset(0 0 0 0);
    transform: translateX(18px);
  }
  68% {
    opacity: 0.34;
    clip-path: inset(0 22% 0 0);
    transform: translateX(34px);
  }
}

@keyframes proof-code-cursor-scan {
  0%, 100% {
    opacity: 0;
    transform: translateX(-180%);
  }
  42% {
    opacity: 1;
    transform: translateX(160%);
  }
}

@keyframes proof-reticle-pulse {
  0%, 100% {
    opacity: 0.16;
    transform: scale(0.86);
  }
  42% {
    opacity: 0.52;
    transform: scale(1.04);
  }
}

@keyframes proof-scan-slide {
  0%, 100% {
    opacity: 0.2;
    transform: translateX(-28px) scaleX(0.82);
  }
  48% {
    opacity: 0.74;
    transform: translateX(28px) scaleX(1.08);
  }
}

@keyframes stack-hud-drift {
  0%, 100% {
    opacity: 0.12;
    transform: translate3d(-22px, 0, 0) scaleX(0.74);
  }
  42% {
    opacity: 0.42;
    transform: translate3d(18px, -4px, 0) scaleX(1.1);
  }
  68% {
    opacity: 0.24;
    transform: translate3d(46px, 3px, 0) scaleX(0.88);
  }
}

.raem-home .creates .section-kicker,
.raem-home .problems .section-kicker,
.raem-home .method .section-kicker {
  max-width: 920px;
}

.raem-home .creates > .section-kicker,
.raem-home .creates > .creates-stream,
.raem-home .creates > .module-grid {
  width: min(100%, var(--raem-content));
  max-width: var(--raem-content);
  margin-inline: auto;
}

.raem-home .creates > .section-kicker h2 {
  max-width: 920px;
}

.raem-home .creates > .section-kicker p:not(.eyebrow) {
  max-width: 760px;
}

.raem-home .module-grid {
  gap: 18px;
}

.raem-home .module-card {
  min-height: 416px;
  border-radius: 26px;
  border-color: rgba(66, 223, 207, 0.15);
  background:
    linear-gradient(145deg, rgba(9, 16, 21, 0.94), rgba(5, 8, 11, 0.86)),
    radial-gradient(circle at 80% 8%, rgba(66, 223, 207, 0.08), transparent 40%);
}

.raem-home .module-diagram {
  border-radius: 18px;
}

.raem-home .build-path {
  align-items: start;
}

.raem-home .build-list {
  align-self: center;
}

.raem-home .build-system-map {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 42px;
}

.raem-home .flow-proof {
  padding-inline: max(clamp(28px, 5vw, 72px), calc((100% - 1240px) / 2));
}

.raem-home .flow-stage,
.raem-home .tier-track {
  width: 100%;
}

.raem-home .flow-stage {
  max-width: 1240px;
  gap: clamp(36px, 5vw, 84px);
}

.raem-home .problems,
.raem-home .method,
.raem-home .future {
  padding-inline: max(clamp(28px, 5vw, 72px), calc((100% - 1240px) / 2));
}

.raem-home .problem-map,
.raem-home .method-proof-panel,
.raem-home .future-panel {
  width: 100%;
  max-width: 1240px;
}

.raem-home .problem-map {
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: 32px;
  background:
    radial-gradient(circle at center, rgba(66, 223, 207, 0.07), transparent 44%),
    linear-gradient(rgba(66, 223, 207, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.035) 1px, transparent 1px),
    rgba(4, 10, 13, 0.8);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.raem-home .method-proof-panel {
  margin-top: clamp(34px, 4vw, 56px);
}

.raem-home .future-panel {
  margin-inline: auto;
  border-radius: 32px;
  background:
    radial-gradient(circle at 69% 51%, rgba(66, 223, 207, 0.07), transparent 33%),
    rgba(5, 11, 14, 0.74);
}

.raem-home .future-panel h2 {
  max-width: 19ch;
}

.raem-home .final-cta {
  padding-block: clamp(84px, 8vw, 118px);
}

.raem-home .cta-world {
  width: min(100%, 1120px);
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid rgba(66, 223, 207, 0.16);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 0%, rgba(66, 223, 207, 0.12), transparent 44%),
    rgba(5, 12, 15, 0.8);
  box-shadow: 0 26px 86px rgba(0, 0, 0, 0.28);
}

.raem-home .cta-world h2 {
  max-width: 16ch;
}

.raem-home .site-footer {
  max-width: var(--raem-content);
  margin-inline: auto;
}

@media (min-width: 1680px) {
  .raem-home .section {
    padding-block: clamp(76px, 5.6vw, 104px);
  }

  .raem-home .ai-stack,
  .raem-home .build-path {
    min-height: auto;
  }
}

@media (min-width: 2200px) {
  .raem-home .hero-world {
    min-height: min(100svh, 1120px);
    padding-top: 120px;
  }

  .raem-home .hero-shell {
    min-height: 880px;
  }

  .raem-home .section {
    padding-block: 92px;
  }
}

@media (min-width: 3800px) {
  .raem-home .hero-world {
    min-height: min(100svh, 1240px);
  }

  .raem-home .hero-shell {
    min-height: 980px;
  }
}

@media (max-width: 1280px) {
  .raem-home .hero-shell,
  .raem-home .proof-shell,
  .raem-home .ai-stack,
  .raem-home .build-path,
  .raem-home .flow-stage {
    grid-template-columns: 1fr;
  }

  .raem-home .hero-copy,
  .raem-home .proof-intro,
  .raem-home .stack-copy,
  .raem-home .build-copy,
  .raem-home .flow-copy {
    max-width: 760px;
  }

  .raem-home .proof-intro h2 {
    max-width: 18ch;
  }

  .raem-home .proof-note {
    grid-column: 1;
    padding-left: 0;
  }

  .raem-home .creation-engine {
    width: min(100%, 820px);
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .raem-home .hero-world {
    padding-inline: 16px;
    padding-bottom: 48px;
  }

  .raem-home .current-proof {
    margin-top: 0;
    padding: 26px 16px 54px;
  }

  .raem-home .proof-shell {
    gap: 18px;
    padding: 18px;
    border-radius: 22px;
  }

  .raem-home .stack-hud::before,
  .raem-home .stack-hud::after {
    display: none;
  }

  .raem-home .stack-hud span:nth-child(n+9) {
    display: none;
  }

  .raem-home .hud-code-core {
    left: 15%;
    top: 27%;
    width: 62%;
    opacity: 0.72;
  }

  .raem-home .hud-code-core code {
    font-size: 10px;
  }

  .raem-home .stack-hud {
    opacity: 0.42;
  }

  .raem-home .proof-intro h2 {
    max-width: 14ch;
    font-size: clamp(28px, 8.6vw, 36px);
  }

  .raem-home .proof-grid {
    grid-template-columns: 1fr;
  }

  .raem-home .proof-item {
    min-height: 158px;
    padding: 16px 16px 45px;
  }

  .raem-home .proof-item a {
    left: 16px;
    bottom: 24px;
  }

  .raem-home .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(40px, 13vw, 52px);
  }

  .raem-home .hero-lede {
    font-size: 16px;
  }

  .raem-home .creation-engine {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: auto;
    padding: 12px;
    border: 1px solid rgba(66, 223, 207, 0.16);
    border-radius: 24px;
    background:
      radial-gradient(circle at 50% 4%, rgba(66, 223, 207, 0.1), transparent 45%),
      rgba(3, 9, 11, 0.82);
  }

  .raem-home .creation-engine::before,
  .raem-home .creation-engine::after,
  .raem-home .engine-core,
  .raem-home .engine-routes {
    display: none;
  }

  .raem-home .engine-title {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 70px;
    padding: 14px;
    transform: none;
    animation: none;
  }

  .raem-home .engine-card,
  .raem-home .engine-card.idea,
  .raem-home .engine-card.agent,
  .raem-home .engine-card.app,
  .raem-home .engine-card.automation,
  .raem-home .engine-card.product,
  .raem-home .engine-card.launch {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 96px;
    padding: 12px;
    animation: none;
  }

  .raem-home .engine-card span {
    margin-bottom: 7px;
    font-size: 10px;
  }

  .raem-home .engine-card h2 {
    font-size: 16px;
  }

  .raem-home .engine-card p {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.35;
  }

  .raem-home .hero-rail {
    display: flex;
    gap: 7px;
    margin-top: 20px;
    padding: 14px 0 0;
  }

  .raem-home .hero-rail span {
    width: auto;
    min-height: auto;
    padding: 7px 10px;
    font-size: 10px;
  }

  .raem-home .section,
  .raem-home .ai-stack,
  .raem-home .build-path,
  .raem-home .flow-proof,
  .raem-home .problems,
  .raem-home .method,
  .raem-home .future {
    padding: 54px 16px;
  }

  .raem-home .section-kicker h2,
  .raem-home .stack-copy h2,
  .raem-home .build-copy h2,
  .raem-home .flow-copy h2,
  .raem-home .future-panel h2,
  .raem-home .cta-world h2 {
    max-width: 15ch;
    font-size: clamp(31px, 9.5vw, 40px);
  }

  .raem-home .section-kicker p,
  .raem-home .stack-copy p,
  .raem-home .build-copy p,
  .raem-home .flow-copy p,
  .raem-home .flow-product p,
  .raem-home .future-panel p,
  .raem-home .final-cta p {
    max-width: none;
    font-size: 15px;
    line-height: 1.52;
  }

  .raem-home .stack-lab {
    gap: 12px;
    min-height: auto;
    padding: 11px;
    border-radius: 20px;
  }

  .raem-home .stack-architecture {
    gap: 8px;
    padding: 10px;
  }

  .raem-home .stack-node {
    padding: 11px 12px;
    border-radius: 13px;
  }

  .raem-home .stack-node span {
    margin-bottom: 4px;
  }

  .raem-home .stack-node strong {
    font-size: 16px;
  }

  .raem-home .module-card {
    min-height: auto;
    padding: 18px;
  }

  .raem-home .module-diagram {
    min-height: 86px;
    margin-block: 4px 8px;
  }

  .raem-home .build-system-map {
    margin-top: 18px;
    padding: 12px;
  }

  .raem-home .route-node {
    min-height: auto;
    padding: 12px;
  }

  .raem-home .problem-map,
  .raem-home .method-proof-panel,
  .raem-home .future-panel,
  .raem-home .cta-world {
    padding: 16px;
    border-radius: 20px;
  }

  .raem-home .problem-card,
  .raem-home .problem-card.core,
  .raem-home .problem-card.n1,
  .raem-home .problem-card.n2,
  .raem-home .problem-card.n3,
  .raem-home .problem-card.n4,
  .raem-home .problem-card.n5 {
    position: relative;
    inset: auto;
    translate: none;
    width: 100%;
    min-height: 60px;
    padding: 13px;
    transform: none;
    animation: none;
  }

  .raem-home .problem-card.core {
    order: -1;
  }

  .raem-home .problem-card.core p {
    font-size: 18px;
  }

  .raem-home .future-orbit {
    gap: 8px;
    margin-top: 20px;
  }

  .raem-home .future-orbit::before,
  .raem-home .future-orbit::after {
    display: none;
  }

  .raem-home .future-orbit span,
  .raem-home .future-orbit .future-core {
    position: relative;
    inset: auto;
    transform: none;
    text-align: center;
  }

  .raem-home .final-cta {
    padding: 54px 16px;
  }

  .raem-home .cta-signal-grid {
    grid-template-columns: 1fr;
  }
}

/* Visible AI synthesis console: generated-system language, not decorative rain. */
.raem-home .creates-stream {
  position: relative;
  width: min(100%, var(--raem-content));
  margin: clamp(38px, 5vw, 60px) auto clamp(34px, 4vw, 52px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(66, 223, 207, 0.36);
  border-radius: 28px;
  background:
    linear-gradient(rgba(66, 223, 207, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 51% 52%, rgba(66, 223, 207, 0.12), transparent 28%),
    #061014;
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 28px 72px rgba(0, 0, 0, 0.34),
    0 0 44px rgba(66, 223, 207, 0.07);
  opacity: 1;
}

.raem-home .creates-stream::before,
.raem-home .creates-stream::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.raem-home .creates-stream::before {
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(66, 223, 207, 0.14) 48%, transparent);
  transform: translateY(-85%);
  animation: ai-stream-scan 8s ease-in-out infinite;
}

.raem-home .stream-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 58px;
  padding: 0 clamp(18px, 3vw, 28px);
  border-bottom: 1px solid rgba(66, 223, 207, 0.2);
  color: #8cbbb9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #08161a;
}

.raem-home .stream-header strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #67eadc;
}

.raem-home .stream-header i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42dfcf;
  box-shadow: 0 0 15px #42dfcf;
  animation: node-pulse 2.4s ease-in-out infinite;
}

.raem-home .stream-output {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(42px, 7vw, 96px);
  row-gap: clamp(30px, 3vw, 40px);
  padding: clamp(28px, 3.2vw, 40px) clamp(22px, 4vw, 44px) clamp(26px, 3vw, 38px);
}

.raem-home .stream-output::before {
  position: absolute;
  left: 50%;
  top: 28px;
  bottom: clamp(110px, 10vw, 126px);
  content: "";
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(66, 223, 207, 0.64), transparent);
}

.raem-home .creates-stream .build-code-lane {
  position: relative;
  display: grid;
  gap: clamp(15px, 1.6vw, 22px);
  color: #61e8dc;
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: clamp(12px, 0.8vw, 14px);
  letter-spacing: 0.045em;
  text-transform: lowercase;
}

.raem-home .creates-stream .build-code-lane code {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  padding-left: 18px;
  background: transparent;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  min-height: 1em;
}

.raem-home .creates-stream .build-code-lane code::before {
  position: absolute;
  left: 0;
  top: 0.48em;
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid rgba(66, 223, 207, 0.56);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(66, 223, 207, 0.42);
}

.raem-home .creates-stream .build-code-lane code.is-active {
  color: #effffc;
  text-shadow: 0 0 13px rgba(66, 223, 207, 0.68);
}

.raem-home .creates-stream .build-code-lane code.is-active::after {
  display: inline-block;
  content: "";
  width: 8px;
  height: 1.05em;
  margin-left: 5px;
  vertical-align: -0.2em;
  background: #42dfcf;
  box-shadow: 0 0 11px rgba(66, 223, 207, 0.72);
  animation: ai-cursor-blink 640ms steps(1, end) infinite;
}

.raem-home .creates-stream .build-code-lane code.is-complete {
  color: #61e8dc;
}

@keyframes ai-cursor-blink {
  50% {
    opacity: 0;
  }
}

@keyframes ai-stream-scan {
  0%, 12% {
    transform: translateY(-85%);
    opacity: 0;
  }

  24%, 72% {
    opacity: 1;
  }

  88%, 100% {
    transform: translateY(92%);
    opacity: 0;
  }
}

.raem-home .stream-core {
  position: relative;
  grid-column: 1 / -1;
  justify-self: center;
  z-index: 2;
  display: grid;
  gap: 7px;
  width: min(420px, 46%);
  padding: 15px 20px;
  border: 1px solid rgba(216, 155, 82, 0.4);
  border-radius: 16px;
  background: #0a181d;
  text-align: center;
}

.raem-home .stream-core span {
  color: #dc9b52;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .stream-core strong {
  color: #f3fffd;
  font-size: clamp(16px, 1.4vw, 20px);
}

.raem-home .stream-core small {
  color: #96c8c4;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .raem-home .stream-output {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .raem-home .stream-output::before {
    display: none;
  }

  .raem-home .stream-core {
    width: min(100%, 420px);
  }
}

@media (max-width: 760px) {
  .raem-home .creates-stream {
    display: block;
    height: auto;
    padding: 0 14px 16px;
    border-radius: 20px;
  }

  .raem-home .stream-header {
    display: grid;
    gap: 8px;
    margin-inline: -14px;
    padding: 13px 14px;
  }

  .raem-home .stream-output {
    padding: 18px 0 0;
  }

  .raem-home .creates-stream .build-code-lane {
    gap: 10px;
    font-size: 11px;
  }

  .raem-home .stream-core {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .creates-stream::before,
  .raem-home .creates-stream .build-code-lane code.is-active::after {
    animation: none;
  }

  .raem-home .creates-stream .build-code-lane code {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Build-path live code sequence and matching explanation cards. */
.raem-home .build-system-map .route-node {
  transition:
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease,
    box-shadow 280ms ease,
    background 280ms ease;
}

.js .raem-home .build-system-map.awaiting-sequence .route-node,
.js .raem-home .build-system-map.is-sequencing .route-node:not(.is-active):not(.is-complete) {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
}

.js .raem-home .build-system-map.awaiting-sequence .route-link,
.js .raem-home .build-system-map.is-sequencing .route-link:not(.is-complete) {
  opacity: 0.12;
}

.raem-home .build-system-map .route-node.is-active {
  border-color: rgba(66, 223, 207, 0.76);
  background:
    radial-gradient(circle at 14% 10%, rgba(66, 223, 207, 0.18), transparent 54%),
    rgba(4, 15, 18, 0.86);
  box-shadow: 0 0 34px rgba(66, 223, 207, 0.2), inset 0 0 0 1px rgba(66, 223, 207, 0.14);
}

.raem-home .build-system-map .route-node.is-complete {
  opacity: 1;
  transform: none;
  border-color: rgba(66, 223, 207, 0.38);
  background: rgba(4, 13, 16, 0.72);
}

.raem-home .build-system-map .route-node.is-complete span::after {
  content: " / built";
  color: rgba(66, 223, 207, 0.78);
}

.raem-home .build-system-map .route-link {
  transition: opacity 320ms ease, filter 320ms ease;
}

.raem-home .build-system-map .route-link.is-complete {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(66, 223, 207, 0.7));
}

.raem-home .build-console {
  margin-top: clamp(18px, 2.4vw, 28px);
  border-radius: 17px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.raem-home .build-console:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3), 0 0 40px rgba(66, 223, 207, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .build-console {
    transition: none;
  }
}

.raem-home .build-console .console-bar {
  border-color: rgba(66, 223, 207, 0.18);
  background: rgba(8, 21, 24, 0.9);
}

.raem-home .build-console .console-bar strong {
  margin-left: 4px;
  color: rgba(216, 236, 234, 0.78);
  font-weight: 700;
}

.raem-home .build-console .console-bar em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: rgba(66, 223, 207, 0.88);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.raem-home .build-console .console-bar em::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42dfcf;
  box-shadow: 0 0 12px #42dfcf;
  animation: node-pulse 2.4s ease-in-out infinite;
}

.raem-home .build-console .live-build-code {
  height: clamp(404px, 27vw, 462px);
  padding: clamp(18px, 2vw, 26px);
  overflow: hidden;
  border-color: rgba(66, 223, 207, 0.18);
  color: rgba(213, 240, 238, 0.88);
  background:
    linear-gradient(rgba(66, 223, 207, 0.038) 1px, transparent 1px),
    rgba(1, 7, 9, 0.84);
  background-size: 100% 2.3em, auto;
  font-size: clamp(12px, 0.82vw, 14px);
  line-height: 1.72;
}

.raem-home .live-build-code > code {
  display: block;
  font-size: 0;
  line-height: 0;
  transform: translateY(var(--build-scroll-y, 0px));
  transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.raem-home .live-code-line {
  display: block;
  min-height: 1.72em;
  font-size: clamp(12px, 0.82vw, 14px);
  line-height: 1.72;
  white-space: pre-wrap;
}

.raem-home .live-code-line.is-active {
  color: #f2fffd;
  text-shadow: 0 0 13px rgba(66, 223, 207, 0.38);
}

.raem-home .live-code-line.is-active::after {
  display: inline-block;
  content: "";
  width: 8px;
  height: 1.05em;
  margin-left: 5px;
  vertical-align: -0.2em;
  background: #42dfcf;
  box-shadow: 0 0 11px rgba(66, 223, 207, 0.72);
  animation: ai-cursor-blink 640ms steps(1, end) infinite;
}

.raem-home .live-code-line .code-focus {
  color: #8bfff1;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(66, 223, 207, 0.16);
}

.raem-home .live-code-line .code-signal {
  color: #f0bd78;
  font-weight: 800;
}

.raem-home .live-code-line .code-key {
  color: #9bb4ff;
  font-weight: 700;
  opacity: 0.88;
}

.raem-home .build-system-map.is-sequencing .build-console {
  border-color: rgba(66, 223, 207, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 40px rgba(66, 223, 207, 0.07);
}

@media (max-width: 760px) {
  .raem-home .build-console .console-bar {
    flex-wrap: wrap;
    gap: 7px;
  }

  .raem-home .build-console .console-bar em {
    width: 100%;
    margin: 5px 0 0;
  }

  .raem-home .build-console .live-build-code {
    height: 318px;
    padding: 13px;
  }

  .raem-home .live-code-line {
    min-height: 1.62em;
    font-size: 10.5px;
    line-height: 1.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .live-code-line.is-active::after,
  .raem-home .build-console .console-bar em::before {
    animation: none;
  }

  .raem-home .build-console .live-build-code {
    height: auto;
  }

  .raem-home .live-build-code > code {
    transform: none !important;
  }
}

/* Interactive workflow signal diagnostic. */
.raem-home .problems {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 49%, rgba(66, 223, 207, 0.065), transparent 28%),
    radial-gradient(circle at 13% 18%, rgba(66, 223, 207, 0.045), transparent 27%),
    radial-gradient(circle at 84% 73%, rgba(240, 189, 120, 0.035), transparent 25%),
    rgba(2, 7, 9, 0.86);
}

.raem-home .problems::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 7, 9, 0.94), transparent 16%, transparent 84%, rgba(2, 7, 9, 0.94)),
    linear-gradient(180deg, rgba(2, 7, 9, 0.8), transparent 17%, transparent 84%, rgba(2, 7, 9, 0.82));
}

.raem-home .problem-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.92;
}

.raem-home .problems > .section-kicker,
.raem-home .problems > .problem-map,
.raem-home .problems > .problem-evaluator {
  position: relative;
  z-index: 1;
}

.raem-home .problems .section-kicker {
  width: min(100%, 1240px);
  max-width: 1240px;
  margin-inline: auto;
}

.raem-home .problems .section-kicker::before {
  position: absolute;
  inset: -34px -42px -30px;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 25% 48%, rgba(2, 7, 9, 0.93), rgba(2, 7, 9, 0.74) 43%, transparent 76%);
}

.raem-home .problem-intro {
  max-width: 650px;
  margin: 19px 0 0;
  color: rgba(213, 228, 227, 0.7);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.62;
}

.raem-home .problem-map {
  min-height: 650px;
  overflow: hidden;
  padding: 0;
  border-color: rgba(66, 223, 207, 0.23);
  background:
    radial-gradient(circle at 50% 52%, rgba(66, 223, 207, 0.13), transparent 25%),
    linear-gradient(rgba(66, 223, 207, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.026) 1px, transparent 1px),
    rgba(3, 11, 14, 0.52);
  background-size: auto, 38px 38px, 38px 38px, auto;
  box-shadow: inset 0 0 118px rgba(66, 223, 207, 0.055), 0 32px 96px rgba(0, 0, 0, 0.27);
  backdrop-filter: none;
}

.raem-home .problem-map::before {
  inset: 50px 22px 22px;
  border-color: rgba(66, 223, 207, 0.07);
  background: radial-gradient(circle, rgba(66, 223, 207, 0.13) 0.8px, transparent 1.1px);
  background-size: 29px 29px;
  opacity: 0.3;
  animation: none;
}

.raem-home .problem-map::after {
  inset: 24% 30%;
  border: 1px solid rgba(66, 223, 207, 0.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 62px rgba(66, 223, 207, 0.018),
    inset 0 0 72px rgba(66, 223, 207, 0.055);
  transform: none;
  animation: orbit-drift 14s ease-in-out infinite;
}

.raem-home .diagnostic-status {
  position: absolute;
  top: 19px;
  left: 23px;
  right: 23px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(66, 223, 207, 0.12);
  color: rgba(135, 255, 241, 0.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .diagnostic-status span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.raem-home .diagnostic-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42dfcf;
  box-shadow: 0 0 11px rgba(66, 223, 207, 0.82);
  animation: node-pulse 2.7s ease-in-out infinite;
}

.raem-home .diagnostic-status small {
  color: rgba(156, 182, 181, 0.58);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.raem-home .diagnostic-lines {
  inset: 68px 34px 27px;
  width: calc(100% - 68px);
  height: calc(100% - 95px);
}

.raem-home .diagnostic-path {
  stroke: rgba(66, 223, 207, 0.35);
  stroke-dasharray: 5 17;
  filter: drop-shadow(0 0 7px rgba(66, 223, 207, 0.3));
}

.raem-home .problem-card {
  width: min(228px, 25%);
  min-height: 122px;
  gap: 8px;
  padding: 17px 18px;
  border-color: rgba(66, 223, 207, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(10, 25, 28, 0.88), rgba(4, 11, 14, 0.9)),
    rgba(4, 10, 13, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 16px 42px rgba(0, 0, 0, 0.23);
  animation: none;
}

.raem-home .problem-card p {
  font-size: clamp(17px, 1.3vw, 21px);
}

.raem-home .problem-card small {
  position: relative;
  z-index: 1;
  color: rgba(194, 215, 214, 0.64);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.42;
}

.raem-home .problem-card.core {
  top: 55%;
  width: min(274px, 30%);
  min-height: 148px;
  gap: 7px;
  border-color: rgba(66, 223, 207, 0.55);
  background:
    radial-gradient(circle at 50% 12%, rgba(66, 223, 207, 0.24), transparent 52%),
    linear-gradient(145deg, rgba(12, 32, 34, 0.98), rgba(5, 14, 17, 0.96));
  box-shadow:
    0 0 48px rgba(66, 223, 207, 0.16),
    inset 0 0 0 1px rgba(66, 223, 207, 0.11);
}

.raem-home .problem-card.core small {
  color: rgba(66, 223, 207, 0.8);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.raem-home .problem-card.core p {
  color: #f3faf9;
  font-size: clamp(22px, 2vw, 28px);
}

.raem-home .problem-card.core strong {
  color: rgba(171, 205, 202, 0.7);
  font-size: 10px;
}

.raem-home .problem-pulse {
  inset: -15px;
  border-color: rgba(66, 223, 207, 0.18);
}

.raem-home .problem-card.n1 {
  left: 4.5%;
  top: 22%;
}

.raem-home .problem-card.n2 {
  right: 4.5%;
  top: 22%;
}

.raem-home .problem-card.n3 {
  left: 4.5%;
  bottom: 13%;
}

.raem-home .problem-card.n4 {
  right: 4.5%;
  bottom: 13%;
}

.raem-home .problem-card.n5 {
  top: 13.2%;
}

@media (max-width: 760px) {
  .raem-home .problem-rain {
    opacity: 0.45;
  }

  .raem-home .problem-intro {
    margin-top: 14px;
  }

  .raem-home .problem-map {
    display: grid;
    min-height: auto;
    gap: 10px;
    padding: 64px 13px 13px;
  }

  .raem-home .diagnostic-status {
    top: 16px;
    left: 14px;
    right: 14px;
    padding-bottom: 12px;
  }

  .raem-home .diagnostic-status small {
    display: none;
  }

  .raem-home .problem-map::before {
    inset: 52px 12px 12px;
  }

  .raem-home .problem-map::after {
    display: none;
  }

  .raem-home .problem-card,
  .raem-home .problem-card.core,
  .raem-home .problem-card.n1,
  .raem-home .problem-card.n2,
  .raem-home .problem-card.n3,
  .raem-home .problem-card.n4,
  .raem-home .problem-card.n5 {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: auto;
    padding: 14px;
    transform: none;
  }

  .raem-home .problem-card.core {
    min-height: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .problem-rain {
    opacity: 0.42;
  }

  .raem-home .problem-map::after,
  .raem-home .diagnostic-status i {
    animation: none;
  }
}

/* Visitor-facing bottleneck evaluator over the retained digital rain field. */
.raem-home .problem-evaluator {
  position: relative;
  overflow: hidden;
  width: min(100%, 1320px);
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: 67px clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px);
  border: 1px solid rgba(66, 223, 207, 0.27);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 52%, rgba(66, 223, 207, 0.11), transparent 34%),
    linear-gradient(110deg, rgba(3, 10, 13, 0.94), rgba(3, 16, 19, 0.84) 54%, rgba(3, 10, 13, 0.94));
  box-shadow: inset 0 0 90px rgba(66, 223, 207, 0.045), 0 32px 92px rgba(0, 0, 0, 0.34);
}

.raem-home .problem-evaluator::before {
  position: absolute;
  inset: 53px 0 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(66, 223, 207, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  opacity: 0.54;
}

.raem-home .evaluator-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(252px, 0.82fr) minmax(306px, 1.06fr) minmax(330px, 1.12fr);
  gap: 14px;
}

.raem-home .problem-selector,
.raem-home .problem-evidence,
.raem-home .problem-solution {
  border: 1px solid rgba(66, 223, 207, 0.14);
  border-radius: 18px;
  background: rgba(3, 11, 14, 0.82);
}

.raem-home .problem-selector {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 17px;
}

.raem-home .evaluator-label {
  margin: 0 0 5px;
  color: rgba(156, 182, 181, 0.68);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.raem-home .problem-option {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 3px 10px;
  width: 100%;
  padding: 14px 13px;
  border: 1px solid rgba(66, 223, 207, 0.13);
  border-radius: 12px;
  color: #eef5f2;
  background: rgba(6, 16, 19, 0.78);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.raem-home .problem-option:hover,
.raem-home .problem-option:focus-visible {
  border-color: rgba(66, 223, 207, 0.44);
  outline: none;
}

.raem-home .problem-option.is-selected {
  border-color: rgba(240, 189, 120, 0.54);
  background:
    linear-gradient(110deg, rgba(240, 189, 120, 0.11), transparent 56%),
    rgba(7, 17, 19, 0.93);
  box-shadow: inset 0 0 22px rgba(240, 189, 120, 0.055);
}

.raem-home .problem-option small {
  grid-row: 1 / span 2;
  color: #f0bd78;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.raem-home .problem-option strong {
  font-size: 16px;
  line-height: 1.15;
}

.raem-home .problem-option span {
  color: rgba(202, 219, 217, 0.65);
  font-size: 12px;
  line-height: 1.42;
}

.raem-home .problem-evidence,
.raem-home .problem-solution {
  display: flex;
  flex-direction: column;
  min-height: 404px;
  padding: clamp(19px, 2.2vw, 25px);
}

.raem-home .problem-evidence {
  border-color: rgba(240, 189, 120, 0.2);
  background:
    radial-gradient(circle at 14% 7%, rgba(240, 189, 120, 0.065), transparent 36%),
    rgba(3, 11, 14, 0.9);
}

.raem-home .problem-solution {
  border-color: rgba(66, 223, 207, 0.31);
  background:
    radial-gradient(circle at 86% 14%, rgba(66, 223, 207, 0.13), transparent 38%),
    rgba(3, 13, 16, 0.94);
}

.raem-home .evaluator-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 32px);
  color: #f0bd78;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.raem-home .evaluator-panel-head.solution {
  color: #42dfcf;
}

.raem-home .evaluator-panel-head small {
  color: rgba(154, 183, 181, 0.62);
  font: inherit;
  letter-spacing: 0.1em;
}

.raem-home .problem-evidence h3,
.raem-home .problem-solution h3 {
  max-width: 20ch;
  margin: 0 0 13px;
  color: #f4f5ef;
  font-size: clamp(23px, 2vw, 29px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.raem-home .problem-evidence > p,
.raem-home .problem-solution > p {
  margin: 0;
  color: rgba(203, 221, 219, 0.68);
  font-size: 14px;
  line-height: 1.55;
}

.raem-home .symptom-list {
  display: grid;
  gap: 9px;
  margin: auto 0 0;
  padding: 20px 0 0;
  list-style: none;
}

.raem-home .symptom-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(240, 189, 120, 0.14);
  border-radius: 9px;
  color: rgba(226, 234, 231, 0.88);
  font-size: 13px;
}

.raem-home .symptom-list li::before {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: #f0bd78;
  box-shadow: 0 0 9px rgba(240, 189, 120, 0.5);
}

.raem-home .solution-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: auto 0 21px;
  padding-top: 20px;
}

.raem-home .solution-modules span {
  padding: 8px 10px;
  border: 1px solid rgba(66, 223, 207, 0.25);
  border-radius: 999px;
  color: rgba(220, 240, 236, 0.84);
  background: rgba(66, 223, 207, 0.05);
  font-size: 11px;
  font-weight: 700;
}

.raem-home .problem-cta {
  align-self: flex-start;
}

@media (max-width: 1100px) {
  .raem-home .evaluator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .raem-home .problem-selector {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .raem-home .evaluator-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .raem-home .problem-evaluator {
    padding: 62px 12px 12px;
    border-radius: 19px;
  }

  .raem-home .evaluator-grid,
  .raem-home .problem-selector {
    grid-template-columns: 1fr;
  }

  .raem-home .problem-evidence,
  .raem-home .problem-solution {
    min-height: auto;
  }

  .raem-home .symptom-list,
  .raem-home .solution-modules {
    margin-top: 22px;
  }
}

/* RAEM product portfolio and active builds. */
.raem-home .portfolio {
  background:
    radial-gradient(circle at 21% 28%, rgba(66, 223, 207, 0.07), transparent 27%),
    radial-gradient(circle at 80% 66%, rgba(94, 108, 214, 0.065), transparent 28%),
    rgba(2, 8, 10, 0.7);
}

.raem-home .portfolio-header {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.raem-home .portfolio-header h2 {
  max-width: 13ch;
  margin-top: 12px;
  font-size: clamp(45px, 4.7vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.raem-home .portfolio-header > p:last-child {
  max-width: 690px;
  margin: 20px 0 0;
  color: rgba(208, 226, 224, 0.7);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.62;
}

.raem-home .portfolio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(320px, 0.9fr);
  gap: 18px;
  width: min(100%, 1240px);
  margin: clamp(38px, 5vw, 56px) auto 0;
}

.raem-home .portfolio-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 480px;
  padding: clamp(24px, 2.7vw, 34px);
  border: 1px solid rgba(66, 223, 207, 0.16);
  border-radius: 27px;
  background:
    linear-gradient(145deg, rgba(7, 20, 23, 0.96), rgba(3, 9, 12, 0.94)),
    rgba(3, 9, 12, 0.94);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.25);
}

.raem-home .portfolio-card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(66, 223, 207, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.03) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(110deg, transparent 6%, rgba(0, 0, 0, 0.7), transparent 86%);
  opacity: 0.65;
}

.raem-home .portfolio-card > * {
  position: relative;
  z-index: 1;
}

.raem-home .portfolio-card.featured {
  border-color: rgba(66, 223, 207, 0.33);
  background:
    radial-gradient(circle at 76% 38%, rgba(66, 223, 207, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(6, 27, 29, 0.98), rgba(3, 10, 13, 0.96));
}

.raem-home .portfolio-card.discovery {
  border-color: rgba(240, 189, 120, 0.2);
  background:
    radial-gradient(circle at 12% 10%, rgba(240, 189, 120, 0.06), transparent 30%),
    linear-gradient(145deg, rgba(12, 19, 20, 0.98), rgba(3, 10, 13, 0.95));
}

.raem-home .portfolio-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}

.raem-home .portfolio-status span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.raem-home .portfolio-status span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
}

.raem-home .status-live {
  color: #89fff1;
  border: 1px solid rgba(66, 223, 207, 0.32);
  background: rgba(66, 223, 207, 0.1);
}

.raem-home .status-live::before {
  background: #42dfcf;
  box-shadow: 0 0 12px rgba(66, 223, 207, 0.8);
}

.raem-home .status-discovery {
  color: #f1c27c;
  border: 1px solid rgba(240, 189, 120, 0.3);
  background: rgba(240, 189, 120, 0.08);
}

.raem-home .status-discovery::before {
  background: #f0bd78;
}

.raem-home .portfolio-status small {
  color: rgba(178, 200, 199, 0.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.raem-home .portfolio-feature-layout {
  display: grid;
  grid-template-columns: minmax(238px, 0.88fr) minmax(294px, 1.08fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  flex: 1;
}

.raem-home .portfolio .product-kicker {
  margin: 10px 0 14px;
  color: rgba(66, 223, 207, 0.82);
  font-size: 11px;
}

.raem-home .portfolio-card h3 {
  margin: 0;
  color: #f4f3ec;
  font-size: clamp(27px, 2.1vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.raem-home .portfolio-card p:not(.product-kicker):not(.discovery-note) {
  margin: 18px 0 0;
  color: rgba(203, 222, 220, 0.72);
  font-size: 15px;
  line-height: 1.56;
}

.raem-home .portfolio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.raem-home .portfolio-actions .button {
  min-height: 45px;
  padding: 13px 17px;
}

.raem-home .flow-product-proof {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(66, 223, 207, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 8%, rgba(66, 223, 207, 0.14), transparent 44%),
    rgba(2, 10, 13, 0.9);
  box-shadow: inset 0 0 0 1px rgba(66, 223, 207, 0.035);
}

.raem-home .flow-product-proof-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(66, 223, 207, 0.14);
}

.raem-home .flow-product-proof-bar span {
  color: rgba(66, 223, 207, 0.75);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .flow-product-proof-bar small {
  color: rgba(178, 201, 199, 0.67);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.raem-home .flow-product-proof img {
  display: block;
  width: 100%;
  height: auto;
  background: #0d0913;
}

.raem-home .flow-product-proof figcaption {
  padding: 10px 13px 12px;
  color: rgba(178, 201, 199, 0.7);
  font-size: 11px;
  line-height: 1.5;
}

.raem-home .discovery-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.raem-home .discovery-signals span {
  padding: 8px 10px;
  border: 1px solid rgba(240, 189, 120, 0.16);
  border-radius: 999px;
  color: rgba(227, 211, 179, 0.75);
  font-size: 10px;
  font-weight: 800;
}

.raem-home .portfolio-card .discovery-note {
  margin: 2px 0 0;
  padding-top: 15px;
  border-top: 1px solid rgba(240, 189, 120, 0.13);
  color: rgba(190, 196, 191, 0.62);
  font-size: 11px;
  line-height: 1.45;
}

.raem-home .portfolio-principle {
  display: grid;
  grid-template-columns: minmax(210px, 0.55fr) minmax(310px, 1fr) minmax(300px, 0.95fr);
  gap: clamp(17px, 2.5vw, 36px);
  align-items: center;
  width: min(100%, 1240px);
  margin: 18px auto 0;
  padding: clamp(20px, 2.4vw, 27px);
  border: 1px solid rgba(66, 223, 207, 0.15);
  border-radius: 21px;
  background: rgba(3, 12, 15, 0.78);
}

.raem-home .portfolio-principle .eyebrow {
  margin: 0;
}

.raem-home .portfolio-principle h3 {
  margin: 0;
  color: #f3f1ea;
  font-size: clamp(22px, 1.75vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.raem-home .portfolio-principle > p:last-child {
  margin: 0;
  color: rgba(197, 216, 214, 0.69);
  font-size: 14px;
  line-height: 1.48;
}

@media (max-width: 980px) {
  .raem-home .portfolio-grid,
  .raem-home .portfolio-feature-layout,
  .raem-home .portfolio-principle {
    grid-template-columns: 1fr;
  }

  .raem-home .portfolio-card {
    min-height: auto;
  }

  .raem-home .flow-product-proof {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .raem-home .portfolio-header h2 {
    max-width: 14ch;
    font-size: clamp(31px, 9.5vw, 40px);
  }

  .raem-home .portfolio-grid {
    gap: 12px;
    margin-top: 25px;
  }

  .raem-home .portfolio-card {
    gap: 13px;
    padding: 16px;
    border-radius: 20px;
  }

  .raem-home .portfolio-card h3 {
    font-size: 24px;
  }

  .raem-home .portfolio-status {
    align-items: start;
    flex-direction: column;
  }

  .raem-home .portfolio-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .raem-home .flow-product-proof {
    max-width: none;
    border-radius: 14px;
  }

  .raem-home .portfolio-principle {
    margin-top: 12px;
    padding: 16px;
    border-radius: 18px;
  }
}

/* RAEM product network alternate concept. */
.raem-home .portfolio {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 38%, rgba(66, 223, 207, 0.09), transparent 30%),
    radial-gradient(circle at 76% 58%, rgba(82, 112, 210, 0.08), transparent 27%),
    linear-gradient(110deg, rgba(3, 15, 18, 0.98), rgba(2, 7, 10, 0.98));
}

.raem-home .portfolio::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(66, 223, 207, 0.18) 1px, transparent 1.4px) 0 0 / 66px 66px,
    linear-gradient(rgba(66, 223, 207, 0.042) 1px, transparent 1px) 0 0 / 66px 66px,
    linear-gradient(90deg, rgba(66, 223, 207, 0.042) 1px, transparent 1px) 0 0 / 66px 66px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 86%, transparent);
  opacity: 0.58;
  animation: portfolio-field-drift 28s linear infinite;
}

.raem-home .portfolio-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  overflow: hidden;
  pointer-events: none;
}

.raem-home .portfolio-field::before {
  position: absolute;
  inset: 16% 0 10%;
  content: "";
  background:
    radial-gradient(circle at 14% 39%, rgba(66, 223, 207, 0.13), transparent 19%),
    radial-gradient(circle at 87% 43%, rgba(66, 223, 207, 0.12), transparent 20%),
    radial-gradient(ellipse at 50% 79%, rgba(66, 223, 207, 0.065), transparent 40%);
  animation: portfolio-field-breathe 8s ease-in-out infinite;
}

.raem-home .portfolio-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.raem-home .portfolio-routes .route {
  fill: none;
  stroke: rgba(66, 223, 207, 0.2);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.raem-home .portfolio-routes .route.secondary {
  stroke: rgba(66, 223, 207, 0.13);
}

.raem-home .portfolio-routes .route-base {
  stroke: rgba(66, 223, 207, 0.16);
}

.raem-home .portfolio-routes .route-branch {
  stroke: rgba(66, 223, 207, 0.1);
}

.raem-home .portfolio-routes .route-left,
.raem-home .portfolio-routes .route-right,
.raem-home .portfolio-routes .route-base {
  stroke-dasharray: 13 20;
  animation: portfolio-route-flow 8.4s linear infinite;
}

.raem-home .portfolio-routes .route-right {
  animation-direction: reverse;
  animation-duration: 9.2s;
}

.raem-home .portfolio-routes .route-base {
  animation-duration: 11s;
}

.raem-home .field-node {
  position: absolute;
  display: grid;
  gap: 8px;
  min-width: 176px;
  padding: 13px 14px 14px;
  border: 1px solid rgba(66, 223, 207, 0.18);
  border-radius: 13px;
  background:
    linear-gradient(120deg, rgba(66, 223, 207, 0.055), transparent 62%),
    rgba(3, 13, 16, 0.69);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  opacity: 0.78;
}

.raem-home .field-node span {
  color: rgba(66, 223, 207, 0.72);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.raem-home .field-node strong {
  color: rgba(187, 213, 211, 0.68);
  font-size: 11px;
  font-weight: 700;
}

.raem-home .field-node i {
  position: absolute;
  top: 17px;
  right: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(66, 223, 207, 0.92);
  box-shadow: 0 0 12px rgba(66, 223, 207, 0.82);
  animation: portfolio-node-pulse 2.8s ease-in-out infinite;
}

.raem-home .node-live {
  left: clamp(20px, 5vw, 94px);
  top: 31%;
}

.raem-home .node-input {
  left: clamp(18px, 4vw, 72px);
  top: 54.5%;
  opacity: 0.57;
}

.raem-home .node-discovery {
  right: clamp(18px, 5vw, 92px);
  top: 29%;
}

.raem-home .node-queue {
  right: clamp(18px, 4vw, 76px);
  top: 56.5%;
  opacity: 0.58;
}

.raem-home .field-pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42dfcf;
  box-shadow:
    0 0 0 7px rgba(66, 223, 207, 0.06),
    0 0 19px rgba(66, 223, 207, 0.9);
}

.raem-home .pulse-a {
  left: 14.8%;
  top: 33.1%;
  animation: portfolio-pulse-right 6.8s ease-in-out infinite;
}

.raem-home .pulse-b {
  right: 14.2%;
  top: 38.7%;
  animation: portfolio-pulse-left 7.6s ease-in-out infinite;
}

.raem-home .pulse-c {
  left: 18%;
  bottom: 18.6%;
  animation: portfolio-pulse-base 9s ease-in-out infinite;
}

.raem-home .portfolio-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(390px, 0.96fr) minmax(330px, 0.7fr);
  gap: clamp(50px, 8vw, 126px);
  align-items: end;
  width: min(100%, 1380px);
}

.raem-home .portfolio-header h2 {
  max-width: 11.5ch;
}

.raem-home .portfolio-intro > p {
  margin: 0;
  color: rgba(208, 226, 224, 0.7);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.62;
}

.raem-home .portfolio-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.raem-home .portfolio-legend span,
.raem-home .next-slot .status-next {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.raem-home .portfolio-legend span::before,
.raem-home .next-slot .status-next::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

.raem-home .portfolio-legend .status-live {
  color: #8efff2;
  border: 1px solid rgba(66, 223, 207, 0.34);
  background: rgba(66, 223, 207, 0.1);
}

.raem-home .portfolio-legend .status-live::before {
  background: #42dfcf;
  box-shadow: 0 0 11px rgba(66, 223, 207, 0.82);
}

.raem-home .portfolio-legend .status-discovery {
  color: #efc37d;
  border: 1px solid rgba(240, 189, 120, 0.3);
  background: rgba(240, 189, 120, 0.08);
}

.raem-home .portfolio-legend .status-discovery::before {
  background: #f0bd78;
}

.raem-home .status-next {
  color: rgba(186, 201, 201, 0.7);
  border: 1px solid rgba(155, 180, 181, 0.18);
  background: rgba(108, 132, 134, 0.07);
}

.raem-home .portfolio-legend .status-next::before,
.raem-home .next-slot .status-next::before {
  background: rgba(155, 180, 181, 0.48);
}

.raem-home .product-network {
  position: relative;
  z-index: 1;
  width: min(100%, 1380px);
  margin: clamp(34px, 4vw, 48px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(66, 223, 207, 0.19);
  border-radius: clamp(22px, 2.4vw, 30px);
  background:
    radial-gradient(circle at 18% 26%, rgba(66, 223, 207, 0.08), transparent 35%),
    linear-gradient(145deg, rgba(4, 16, 19, 0.96), rgba(2, 9, 12, 0.97));
  box-shadow:
    0 33px 78px rgba(0, 0, 0, 0.3),
    0 0 70px rgba(66, 223, 207, 0.06);
}

.raem-home .product-network::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(66, 223, 207, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 36%, #000, transparent 76%);
}

.raem-home .network-engine {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  margin: clamp(18px, 2.2vw, 25px);
  padding: 13px 17px;
  border: 1px solid rgba(66, 223, 207, 0.16);
  border-radius: 16px;
  background: rgba(3, 13, 16, 0.84);
}

.raem-home .engine-state {
  display: grid;
  grid-template-columns: 8px auto;
  gap: 2px 12px;
  align-items: center;
}

.raem-home .engine-state i {
  grid-row: 1 / span 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42dfcf;
  box-shadow: 0 0 13px rgba(66, 223, 207, 0.82);
  animation: node-pulse 2.1s ease-in-out infinite;
}

.raem-home .engine-state span {
  color: rgba(66, 223, 207, 0.82);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.raem-home .engine-state strong {
  color: #e9f6f3;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.raem-home .network-signal {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(66, 223, 207, 0.16);
}

.raem-home .network-signal span {
  position: absolute;
  top: -2px;
  left: 0;
  width: 34px;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.88), transparent);
  filter: drop-shadow(0 0 7px rgba(66, 223, 207, 0.72));
  animation: product-route-travel 3.2s linear infinite;
}

.raem-home .network-signal span:nth-child(2) {
  animation-delay: 1.06s;
}

.raem-home .network-signal span:nth-child(3) {
  animation-delay: 2.12s;
}

.raem-home .network-engine > p {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: rgba(164, 188, 187, 0.66);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.raem-home .network-engine > p strong {
  color: #42dfcf;
  font-size: 13px;
}

.raem-home .product-network .portfolio-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.46fr) minmax(350px, 0.86fr);
  align-items: start;
  width: auto;
  margin: 0;
  padding: 0 clamp(18px, 2.2vw, 25px);
}

.raem-home .product-network .portfolio-card {
  min-height: 0;
  padding: clamp(20px, 2.2vw, 27px);
  border-radius: 21px;
}

.raem-home .product-network .portfolio-card.featured {
  gap: 17px;
}

.raem-home .featured-product-intro {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.58fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: end;
}

.raem-home .featured-product-intro .product-kicker {
  margin-top: 0;
}

.raem-home .product-outcome {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid rgba(66, 223, 207, 0.21);
  border-radius: 14px;
  background: rgba(66, 223, 207, 0.06);
}

.raem-home .product-outcome span {
  color: rgba(66, 223, 207, 0.82);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.raem-home .product-outcome strong {
  color: #edf7f5;
  font-size: 18px;
  line-height: 1.18;
}

.raem-home .product-outcome small {
  color: rgba(182, 207, 204, 0.66);
  font-size: 11px;
}

.raem-home .product-network .flow-product-proof {
  position: relative;
  border-color: rgba(66, 223, 207, 0.3);
  background: #0e0914;
}

.raem-home .product-network .flow-product-proof::after {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 24%;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(66, 223, 207, 0.08), transparent);
  opacity: 0;
  animation: product-preview-scan 5.6s ease-in-out infinite;
}

.raem-home .product-network .flow-product-proof img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center top;
}

.raem-home .product-network .portfolio-actions {
  margin-top: 0;
}

.raem-home .product-network .portfolio-actions .button:first-child {
  min-width: 145px;
}

.raem-home .product-network .discovery {
  gap: 14px;
}

.raem-home .product-network .discovery h3 {
  font-size: clamp(25px, 1.8vw, 30px);
}

.raem-home .assembly-panel {
  display: grid;
  gap: 9px;
  margin-top: 6px;
  padding: 13px;
  border: 1px solid rgba(240, 189, 120, 0.16);
  border-radius: 16px;
  background: rgba(3, 11, 14, 0.68);
}

.raem-home .assembly-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(240, 189, 120, 0.13);
}

.raem-home .assembly-header span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f1c27c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .assembly-header i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0bd78;
  box-shadow: 0 0 9px rgba(240, 189, 120, 0.58);
}

.raem-home .assembly-header small {
  color: rgba(196, 187, 167, 0.6);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.raem-home .assembly-module {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(133, 153, 156, 0.12);
  border-radius: 11px;
  color: rgba(204, 219, 218, 0.8);
  background: rgba(8, 18, 21, 0.86);
}

.raem-home .assembly-module::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(66, 223, 207, 0.13), transparent);
  transform: translateX(-110%);
  animation: module-signal 4.7s ease-in-out infinite;
}

.raem-home .assembly-module:nth-child(3)::after {
  animation-delay: 0.65s;
}

.raem-home .assembly-module:nth-child(4)::after {
  animation-delay: 1.3s;
}

.raem-home .assembly-module > span {
  color: rgba(240, 189, 120, 0.72);
  font-size: 10px;
  font-weight: 900;
}

.raem-home .assembly-module strong {
  color: #ebf3ef;
  font-size: 13px;
}

.raem-home .assembly-module small {
  color: rgba(170, 194, 192, 0.64);
  font-size: 10px;
}

.raem-home .assembly-module.module-ready {
  border-color: rgba(66, 223, 207, 0.18);
}

.raem-home .assembly-module.module-ready > span {
  color: #42dfcf;
}

.raem-home .assembly-module.module-forming {
  border-color: rgba(240, 189, 120, 0.3);
  animation: product-module-pulse 2.8s ease-in-out infinite;
}

.raem-home .product-rail {
  display: grid;
  gap: 14px;
}

.raem-home .next-slot {
  display: grid;
  gap: 12px;
  padding: 19px;
  border: 1px solid rgba(155, 180, 181, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 50%, rgba(66, 223, 207, 0.06), transparent 42%),
    rgba(4, 13, 16, 0.78);
}

.raem-home .next-slot .status-next {
  width: max-content;
}

.raem-home .next-slot h3 {
  margin: 0;
  color: rgba(235, 243, 240, 0.9);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.raem-home .next-slot p {
  margin: 0;
  color: rgba(173, 194, 193, 0.63);
  font-size: 12px;
  line-height: 1.5;
}

.raem-home .next-intake {
  display: flex;
  gap: 7px;
}

.raem-home .next-intake span {
  flex: 1;
  overflow: hidden;
  padding: 8px 7px;
  border: 1px dashed rgba(155, 180, 181, 0.15);
  border-radius: 8px;
  color: rgba(160, 185, 185, 0.48);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.raem-home .portfolio-pipeline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(13px, 2vw, 30px);
  margin: clamp(18px, 2.2vw, 25px);
  padding: 16px 18px;
  border: 1px solid rgba(66, 223, 207, 0.14);
  border-radius: 16px;
  background: rgba(3, 12, 15, 0.76);
}

.raem-home .portfolio-pipeline span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(186, 205, 203, 0.68);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.raem-home .portfolio-pipeline span small {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(66, 223, 207, 0.17);
  border-radius: 50%;
  color: rgba(66, 223, 207, 0.65);
  font-size: 10px;
  font-weight: 900;
}

.raem-home .portfolio-pipeline span.is-active {
  color: #edf7f5;
}

.raem-home .portfolio-pipeline span.is-active small {
  color: #061012;
  background: #42dfcf;
  box-shadow: 0 0 16px rgba(66, 223, 207, 0.42);
}

.raem-home .portfolio-pipeline > i {
  flex: 1;
  min-width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(66, 223, 207, 0.1), rgba(66, 223, 207, 0.42), rgba(66, 223, 207, 0.1));
}

@keyframes product-route-travel {
  from {
    transform: translateX(-40px);
  }
  to {
    transform: translateX(calc(100vw + 40px));
  }
}

@keyframes portfolio-field-drift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 66px 66px, 0 66px, 66px 0;
  }
}

@keyframes portfolio-field-breathe {
  0%, 100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}

@keyframes portfolio-route-flow {
  to {
    stroke-dashoffset: -132;
  }
}

@keyframes portfolio-node-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes portfolio-pulse-right {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  15%, 72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(clamp(90px, 15vw, 270px));
  }
}

@keyframes portfolio-pulse-left {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  15%, 72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(clamp(-270px, -15vw, -90px));
  }
}

@keyframes portfolio-pulse-base {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  16%, 75% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateX(clamp(140px, 37vw, 680px));
  }
}

@keyframes product-preview-scan {
  0%, 18% {
    opacity: 0;
    transform: translateY(-120%);
  }
  30%, 62% {
    opacity: 0.78;
  }
  78%, 100% {
    opacity: 0;
    transform: translateY(370%);
  }
}

@keyframes module-signal {
  0%, 22% {
    transform: translateX(-110%);
  }
  48%, 100% {
    transform: translateX(110%);
  }
}

@keyframes product-module-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 rgba(240, 189, 120, 0);
  }
  50% {
    box-shadow: inset 0 0 22px rgba(240, 189, 120, 0.1);
  }
}

@media (max-width: 1900px) {
  .raem-home .field-node,
  .raem-home .field-pulse {
    display: none;
  }
}

@media (max-width: 980px) {
  .raem-home .portfolio-field {
    opacity: 0.52;
  }

  .raem-home .portfolio-header {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .raem-home .network-engine {
    grid-template-columns: 1fr max-content;
  }

  .raem-home .network-signal {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .raem-home .product-network .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .raem-home .featured-product-intro {
    grid-template-columns: 1fr minmax(220px, 0.65fr);
  }

  .raem-home .portfolio-pipeline {
    flex-wrap: wrap;
  }

  .raem-home .portfolio-pipeline > i {
    min-width: 20px;
  }
}

@media (max-width: 760px) {
  .raem-home .portfolio::after {
    opacity: 0.34;
  }

  .raem-home .portfolio-routes {
    opacity: 0.35;
  }

  .raem-home .portfolio-header {
    display: block;
  }

  .raem-home .portfolio-intro {
    margin-top: 18px;
  }

  .raem-home .portfolio-legend {
    margin-top: 18px;
  }

  .raem-home .product-network {
    margin-top: 26px;
    border-radius: 20px;
  }

  .raem-home .network-engine {
    display: block;
    margin: 12px;
    padding: 12px;
  }

  .raem-home .network-signal {
    margin: 14px 0 13px;
  }

  .raem-home .network-engine > p {
    white-space: normal;
  }

  .raem-home .product-network .portfolio-grid {
    padding: 0 12px;
  }

  .raem-home .featured-product-intro {
    grid-template-columns: 1fr;
  }

  .raem-home .product-outcome {
    padding: 13px;
  }

  .raem-home .product-network .portfolio-actions {
    margin-top: 2px;
  }

  .raem-home .assembly-module {
    grid-template-columns: 28px 1fr;
  }

  .raem-home .assembly-module small {
    grid-column: 2;
  }

  .raem-home .next-intake {
    flex-direction: column;
  }

  .raem-home .portfolio-pipeline {
    display: grid;
    gap: 10px;
    margin: 12px;
    padding: 13px;
  }

  .raem-home .portfolio-pipeline > i {
    width: 1px;
    min-height: 15px;
    margin-left: 14px;
    background: linear-gradient(to bottom, rgba(66, 223, 207, 0.1), rgba(66, 223, 207, 0.42));
  }
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .portfolio::after,
  .raem-home .portfolio-field::before,
  .raem-home .portfolio-routes .route,
  .raem-home .field-node i,
  .raem-home .field-pulse,
  .raem-home .engine-state i,
  .raem-home .network-signal span,
  .raem-home .product-network .flow-product-proof::after,
  .raem-home .assembly-module::after,
  .raem-home .assembly-module.module-forming {
    animation: none;
  }
}

/* Trust path: from a real problem to a working prototype. */
.raem-home .prototype-path {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 8vw, 116px);
  background:
    radial-gradient(ellipse 720px 430px at 62% 56%, rgba(66, 223, 207, 0.095), transparent 68%),
    radial-gradient(ellipse 460px 360px at 37% 54%, rgba(240, 189, 120, 0.038), transparent 70%),
    linear-gradient(100deg, rgba(18, 17, 14, 0.2), transparent 39%, rgba(5, 25, 26, 0.15) 74%, rgba(5, 21, 23, 0.2)),
    linear-gradient(180deg, rgba(3, 8, 10, 0.985), rgba(3, 10, 12, 0.985));
}

.raem-home .prototype-path::before {
  position: absolute;
  left: 50%;
  top: clamp(226px, 36%, 294px);
  z-index: 0;
  width: min(1420px, calc(100% - clamp(48px, 8vw, 150px)));
  height: clamp(260px, 28vw, 430px);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center, rgba(66, 223, 207, 0.065), transparent 67%),
    linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.048) 22%, rgba(66, 223, 207, 0.072) 68%, transparent);
  filter: blur(28px);
  opacity: 0.74;
}

.raem-home .prototype-path::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(rgba(66, 223, 207, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 223, 207, 0.028) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 20%, #000 90%, transparent);
  opacity: 0.45;
  animation: none;
}

.raem-home .prototype-network {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(100%, 2048px);
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.raem-home .prototype-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.92;
}

.raem-home .circuit-rail,
.raem-home .circuit-base {
  fill: none;
  stroke: rgba(66, 223, 207, 0.14);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  transition: stroke 360ms ease, filter 360ms ease;
}

.raem-home .input-rail {
  stroke: rgba(240, 189, 120, 0.17);
}

.raem-home .circuit-base {
  stroke: rgba(66, 223, 207, 0.06);
  stroke-dasharray: 2 16;
}

.raem-home .circuit-signal {
  fill: none;
  stroke: #42dfcf;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 108;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(66, 223, 207, 0.9));
}

.raem-home .signal-input-a,
.raem-home .signal-input-b,
.raem-home .signal-input-c {
  stroke: #f0bd78;
  filter: drop-shadow(0 0 6px rgba(240, 189, 120, 0.9));
}

.raem-home .network-column {
  position: absolute;
  top: 39.5%;
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.raem-home .input-nodes {
  left: clamp(57px, 5.7vw, 116px);
}

.raem-home .output-nodes {
  right: clamp(57px, 5.7vw, 116px);
}

.raem-home .network-node {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(58px, 4.4vw, 72px);
  aspect-ratio: 1;
  border: 1px solid rgba(66, 223, 207, 0.18);
  border-radius: 13px;
  background: rgba(4, 14, 16, 0.55);
  box-shadow: inset 0 0 22px rgba(66, 223, 207, 0.025);
  transition:
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease;
}

.raem-home .input-nodes .network-node {
  border-color: rgba(240, 189, 120, 0.21);
  background: rgba(21, 17, 12, 0.42);
}

.raem-home .network-node::before,
.raem-home .network-node::after {
  position: absolute;
  left: -7px;
  right: -7px;
  height: 4px;
  content: "";
  background:
    linear-gradient(90deg, currentColor 0 5px, transparent 5px calc(100% - 5px), currentColor calc(100% - 5px));
  color: rgba(66, 223, 207, 0.28);
  transition: color 320ms ease;
}

.raem-home .input-nodes .network-node::before,
.raem-home .input-nodes .network-node::after {
  color: rgba(240, 189, 120, 0.28);
}

.raem-home .network-node::before {
  top: 19px;
}

.raem-home .network-node::after {
  bottom: 19px;
}

.raem-home .network-node i {
  position: relative;
  display: block;
  width: clamp(21px, 1.6vw, 27px);
  aspect-ratio: 1;
  border: 2px solid rgba(66, 223, 207, 0.45);
  border-radius: 6px;
  color: rgba(66, 223, 207, 0.48);
  background: rgba(66, 223, 207, 0.09);
  transition:
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
}

.raem-home .input-nodes .network-node i {
  border-color: rgba(240, 189, 120, 0.45);
  color: rgba(240, 189, 120, 0.46);
  background: rgba(240, 189, 120, 0.08);
}

.raem-home .network-node i::before,
.raem-home .network-node i::after {
  position: absolute;
  content: "";
  background: currentColor;
  color: inherit;
}

.raem-home .network-node i::before {
  inset: 5px -5px;
  background:
    linear-gradient(to bottom, currentColor 0 3px, transparent 3px calc(100% - 3px), currentColor calc(100% - 3px));
}

.raem-home .network-node i::after {
  inset: -5px 5px;
  background:
    linear-gradient(to right, currentColor 0 3px, transparent 3px calc(100% - 3px), currentColor calc(100% - 3px));
}

.raem-home .network-junction {
  position: absolute;
  top: 55.68%;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(66, 223, 207, 0.22);
  background: rgba(3, 12, 15, 0.76);
  transform: translateY(-50%);
  transition: border-color 320ms ease, box-shadow 320ms ease;
}

.raem-home .input-junction {
  left: clamp(247px, 18.3vw, 374px);
  border-color: rgba(240, 189, 120, 0.26);
}

.raem-home .output-junction {
  right: clamp(247px, 18.3vw, 374px);
}

.raem-home .network-junction span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(66, 223, 207, 0.5);
  transition: background 320ms ease, box-shadow 320ms ease;
}

.raem-home .input-junction span {
  background: rgba(240, 189, 120, 0.52);
}

.raem-home .network-status {
  position: absolute;
  right: clamp(36px, 3.2vw, 64px);
  bottom: clamp(80px, 9vw, 113px);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.42;
  transition: opacity 360ms ease;
}

.raem-home .network-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(66, 223, 207, 0.4);
}

.raem-home .network-status div {
  display: flex;
  gap: 5px;
  margin-left: 7px;
}

.raem-home .network-status i {
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: rgba(66, 223, 207, 0.26);
}

.raem-home .prototype-path[data-network-phase="0"] .input-rail,
.raem-home .prototype-path[data-network-phase="1"] .input-rail {
  stroke: rgba(240, 189, 120, 0.37);
  filter: drop-shadow(0 0 3px rgba(240, 189, 120, 0.32));
}

.raem-home .prototype-path[data-network-phase="0"] .node-input-a,
.raem-home .prototype-path[data-network-phase="1"] .node-input-b,
.raem-home .prototype-path[data-network-phase="2"] .node-input-c {
  border-color: rgba(240, 189, 120, 0.74);
  background: rgba(48, 33, 16, 0.54);
  box-shadow: 0 0 26px rgba(240, 189, 120, 0.15);
}

.raem-home .prototype-path[data-network-phase="0"] .node-input-a i,
.raem-home .prototype-path[data-network-phase="1"] .node-input-b i,
.raem-home .prototype-path[data-network-phase="2"] .node-input-c i {
  border-color: #f0bd78;
  color: #f0bd78;
  background: rgba(240, 189, 120, 0.28);
  box-shadow: 0 0 16px rgba(240, 189, 120, 0.55);
}

.raem-home .prototype-path[data-network-phase="0"] .signal-input-a,
.raem-home .prototype-path[data-network-phase="1"] .signal-input-b,
.raem-home .prototype-path[data-network-phase="2"] .signal-input-c {
  opacity: 1;
  animation: network-signal-travel 1.05s linear infinite;
}

.raem-home .prototype-path[data-network-phase="2"] .output-rail,
.raem-home .prototype-path[data-network-phase="3"] .output-rail,
.raem-home .prototype-path[data-network-phase="complete"] .output-rail {
  stroke: rgba(66, 223, 207, 0.43);
  filter: drop-shadow(0 0 4px rgba(66, 223, 207, 0.36));
}

.raem-home .prototype-path[data-network-phase="2"] .node-output-a,
.raem-home .prototype-path[data-network-phase="3"] .node-output-b,
.raem-home .prototype-path[data-network-phase="complete"] .output-nodes .network-node {
  border-color: rgba(66, 223, 207, 0.7);
  background: rgba(8, 40, 40, 0.58);
  box-shadow: 0 0 27px rgba(66, 223, 207, 0.15);
}

.raem-home .prototype-path[data-network-phase="2"] .node-output-a i,
.raem-home .prototype-path[data-network-phase="3"] .node-output-b i,
.raem-home .prototype-path[data-network-phase="complete"] .output-nodes .network-node i {
  border-color: #42dfcf;
  color: #42dfcf;
  background: rgba(66, 223, 207, 0.25);
  box-shadow: 0 0 16px rgba(66, 223, 207, 0.54);
}

.raem-home .prototype-path[data-network-phase="2"] .signal-output-a,
.raem-home .prototype-path[data-network-phase="3"] .signal-output-b,
.raem-home .prototype-path[data-network-phase="complete"] .signal-output-a,
.raem-home .prototype-path[data-network-phase="complete"] .signal-output-b,
.raem-home .prototype-path[data-network-phase="complete"] .signal-output-c {
  opacity: 1;
  animation: network-signal-travel 1.05s linear infinite;
}

.raem-home .prototype-path[data-network-phase="complete"] .signal-output-b {
  animation-delay: 180ms;
}

.raem-home .prototype-path[data-network-phase="complete"] .signal-output-c {
  animation-delay: 360ms;
}

.raem-home .prototype-path[data-network-phase="complete"] .output-junction {
  border-color: rgba(66, 223, 207, 0.68);
  box-shadow: 0 0 22px rgba(66, 223, 207, 0.19);
}

.raem-home .prototype-path[data-network-phase="complete"] .output-junction span {
  background: #42dfcf;
  box-shadow: 0 0 11px rgba(66, 223, 207, 0.75);
}

.raem-home .prototype-path[data-network-phase="complete"] .network-status {
  opacity: 1;
}

.raem-home .prototype-header,
.raem-home .prototype-stage,
.raem-home .prototype-decision {
  position: relative;
  z-index: 1;
  width: min(100%, 1240px);
  margin-inline: auto;
}

.raem-home .prototype-header {
  display: grid;
  grid-template-columns: minmax(400px, 0.9fr) minmax(310px, 0.64fr);
  gap: clamp(42px, 8vw, 116px);
  align-items: end;
}

.raem-home .prototype-header h2 {
  max-width: 14ch;
  margin-top: 12px;
  font-size: clamp(44px, 4.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.raem-home .prototype-header > p {
  margin: 0;
  color: rgba(201, 222, 220, 0.7);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
}

.raem-home .prototype-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(270px, 0.88fr) minmax(355px, 1.25fr);
  gap: 15px;
  margin-top: clamp(36px, 4vw, 50px);
  padding: clamp(15px, 1.6vw, 20px);
  border: 1px solid rgba(66, 223, 207, 0.16);
  border-radius: 27px;
  background:
    radial-gradient(circle at 78% 48%, rgba(66, 223, 207, 0.08), transparent 31%),
    rgba(3, 12, 15, 0.77);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.28);
}

.raem-home .prototype-route {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.24) 8%, rgba(66, 223, 207, 0.28) 92%, transparent);
}

.raem-home .prototype-route span {
  position: absolute;
  top: -3px;
  left: 0;
  width: 52px;
  height: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.92), transparent);
  filter: drop-shadow(0 0 7px rgba(66, 223, 207, 0.88));
  animation: prototype-route-travel 4.8s linear infinite;
}

.raem-home .prototype-route span:nth-child(2) {
  animation-delay: 1.6s;
}

.raem-home .prototype-route span:nth-child(3) {
  animation-delay: 3.2s;
}

.raem-home .prototype-stage article {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 17px;
  min-height: 386px;
  padding: clamp(18px, 2vw, 23px);
  border: 1px solid rgba(66, 223, 207, 0.16);
  border-radius: 19px;
  background:
    linear-gradient(145deg, rgba(7, 21, 23, 0.95), rgba(3, 10, 13, 0.97)),
    rgba(3, 10, 13, 0.96);
}

.raem-home .prototype-stage .prototype-input {
  border-color: rgba(240, 189, 120, 0.21);
  background:
    radial-gradient(circle at 10% 9%, rgba(240, 189, 120, 0.08), transparent 30%),
    linear-gradient(145deg, rgba(17, 19, 18, 0.96), rgba(4, 11, 13, 0.97));
}

.raem-home .prototype-stage .prototype-result {
  border-color: rgba(66, 223, 207, 0.37);
  background:
    radial-gradient(circle at 51% 38%, rgba(66, 223, 207, 0.12), transparent 39%),
    linear-gradient(145deg, rgba(5, 24, 26, 0.98), rgba(3, 10, 13, 0.98));
  box-shadow: inset 0 0 0 1px rgba(66, 223, 207, 0.05), 0 0 40px rgba(66, 223, 207, 0.065);
}

.raem-home .prototype-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.raem-home .prototype-panel-header span {
  color: rgba(66, 223, 207, 0.82);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .prototype-input .prototype-panel-header span {
  color: #f1c27c;
}

.raem-home .prototype-panel-header small {
  color: rgba(170, 194, 192, 0.62);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.raem-home .prototype-stage h3 {
  margin: 0;
  color: #f3f3ed;
  font-size: clamp(24px, 1.7vw, 29px);
  line-height: 1.12;
  letter-spacing: -0.052em;
}

.raem-home .problem-brief {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.raem-home .problem-brief div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(240, 189, 120, 0.14);
  border-radius: 11px;
  background: rgba(10, 15, 15, 0.82);
}

.raem-home .problem-brief small {
  color: rgba(240, 189, 120, 0.65);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.raem-home .problem-brief strong {
  color: rgba(233, 238, 232, 0.9);
  font-size: 14px;
}

.raem-home .mapping-stream {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.raem-home .map-row {
  display: grid;
  grid-template-columns: 1fr 48px auto;
  gap: 10px;
  align-items: center;
  padding: 12px 11px;
  border: 1px solid rgba(66, 223, 207, 0.1);
  border-radius: 11px;
  background: rgba(4, 12, 15, 0.7);
  color: rgba(182, 205, 203, 0.64);
  font-size: 12px;
  font-weight: 700;
  transition:
    border-color 320ms ease,
    color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
}

.raem-home .map-row i {
  position: relative;
  overflow: hidden;
  height: 2px;
  border-radius: 999px;
  background: rgba(66, 223, 207, 0.12);
  transition: background 280ms ease, box-shadow 280ms ease;
}

.raem-home .map-row small {
  color: rgba(155, 180, 179, 0.54);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.raem-home .map-row.is-complete {
  border-color: rgba(66, 223, 207, 0.18);
  color: #e8f5f3;
}

.raem-home .map-row.is-complete i {
  background: #42dfcf;
  box-shadow: 0 0 8px rgba(66, 223, 207, 0.52);
}

.raem-home .map-row.is-active {
  border-color: rgba(66, 223, 207, 0.3);
  color: #e8f5f3;
  background: rgba(66, 223, 207, 0.06);
  box-shadow: inset 0 0 18px rgba(66, 223, 207, 0.045);
}

.raem-home .map-row.is-active i::after {
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent, #42dfcf, transparent);
  animation: prototype-map-scan 2.2s ease-in-out infinite;
}

.raem-home .map-row.is-goal.is-active,
.raem-home .map-row.is-goal.is-complete {
  border-color: rgba(66, 223, 207, 0.54);
  background: rgba(66, 223, 207, 0.12);
  box-shadow:
    inset 0 0 25px rgba(66, 223, 207, 0.1),
    0 0 22px rgba(66, 223, 207, 0.11);
}

.raem-home .map-row.is-goal.is-complete small {
  color: rgba(119, 245, 230, 0.92);
}

.raem-home .prototype-result.is-achieved {
  border-color: rgba(66, 223, 207, 0.57);
  box-shadow:
    inset 0 0 0 1px rgba(66, 223, 207, 0.11),
    0 0 48px rgba(66, 223, 207, 0.15);
}

.raem-home .prototype-result.is-achieved .prototype-screen {
  border-color: rgba(66, 223, 207, 0.5);
  box-shadow: 0 0 26px rgba(66, 223, 207, 0.13);
}

.raem-home .prototype-screen {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  border: 1px solid rgba(66, 223, 207, 0.28);
  border-radius: 14px;
  background: rgba(2, 10, 13, 0.94);
}

.raem-home .prototype-screen::after {
  position: absolute;
  inset: -35% 0 auto;
  height: 32%;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(66, 223, 207, 0.09), transparent);
  animation: prototype-screen-scan 5s ease-in-out infinite;
}

.raem-home .screen-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 11px;
  border-bottom: 1px solid rgba(66, 223, 207, 0.14);
}

.raem-home .screen-toolbar span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #42dfcf;
  opacity: 0.78;
}

.raem-home .screen-toolbar small {
  margin-left: 7px;
  color: rgba(157, 188, 187, 0.56);
  font-size: 9px;
  font-weight: 800;
}

.raem-home .screen-layout {
  display: grid;
  grid-template-columns: 37px 1fr;
  min-height: 180px;
}

.raem-home .screen-sidebar {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 14px 11px;
  border-right: 1px solid rgba(66, 223, 207, 0.11);
}

.raem-home .screen-sidebar i {
  width: 14px;
  height: 7px;
  border-radius: 999px;
  background: rgba(66, 223, 207, 0.2);
}

.raem-home .screen-sidebar i.active {
  background: #42dfcf;
  box-shadow: 0 0 8px rgba(66, 223, 207, 0.55);
}

.raem-home .screen-content {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.raem-home .screen-label {
  color: rgba(66, 223, 207, 0.75);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .screen-content > strong {
  color: #eef8f5;
  font-size: 17px;
  line-height: 1.18;
}

.raem-home .screen-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.raem-home .screen-metrics span {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(66, 223, 207, 0.13);
  border-radius: 7px;
  color: rgba(169, 194, 192, 0.6);
  font-size: 8px;
  font-weight: 700;
}

.raem-home .screen-metrics b {
  color: #e8f4f1;
  font-size: 13px;
}

.raem-home .screen-action {
  align-self: end;
  width: max-content;
  padding: 8px 12px;
  border-radius: 7px;
  color: #061113;
  background: #42dfcf;
  font-size: 10px;
  font-weight: 900;
}

.raem-home .prototype-decision {
  display: grid;
  grid-template-columns: minmax(225px, 0.72fr) minmax(390px, 1.3fr) minmax(240px, 0.72fr);
  gap: clamp(17px, 2.3vw, 30px);
  align-items: center;
  margin-top: 16px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(66, 223, 207, 0.15);
  border-radius: 20px;
  background: rgba(3, 12, 15, 0.76);
}

.raem-home .prototype-decision .eyebrow {
  margin: 0 0 8px;
}

.raem-home .prototype-decision h3 {
  margin: 0;
  color: #f2f3ed;
  font-size: clamp(21px, 1.65vw, 25px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.raem-home .decision-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.raem-home .decision-path span {
  padding: 10px 12px;
  border: 1px solid rgba(66, 223, 207, 0.18);
  border-radius: 999px;
  color: rgba(209, 228, 224, 0.79);
  background: rgba(66, 223, 207, 0.04);
  font-size: 11px;
  font-weight: 800;
}

.raem-home .prototype-decision > p:last-child {
  margin: 0;
  color: rgba(182, 205, 202, 0.66);
  font-size: 12px;
  line-height: 1.55;
}

@keyframes prototype-route-travel {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  14%, 84% {
    opacity: 1;
  }
  to {
    transform: translateX(calc(100vw + 50px));
    opacity: 0;
  }
}

@keyframes prototype-map-scan {
  to {
    transform: translateX(270%);
  }
}

@keyframes prototype-screen-scan {
  0%, 16% {
    opacity: 0;
    transform: translateY(0);
  }
  34%, 68% {
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
    transform: translateY(450%);
  }
}

@keyframes network-signal-travel {
  from {
    stroke-dashoffset: 108;
  }
  to {
    stroke-dashoffset: 8;
  }
}

@media (max-width: 1750px) {
  .raem-home .prototype-network {
    display: none;
  }
}

@media (max-width: 980px) {
  .raem-home .prototype-header {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .raem-home .prototype-stage {
    grid-template-columns: 1fr;
  }

  .raem-home .prototype-stage article {
    min-height: auto;
  }

  .raem-home .prototype-route {
    top: 9%;
    bottom: 9%;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, transparent, rgba(66, 223, 207, 0.27), transparent);
  }

  .raem-home .prototype-route span {
    top: 0;
    left: -3px;
    width: 7px;
    height: 42px;
    background: linear-gradient(to bottom, transparent, rgba(66, 223, 207, 0.92), transparent);
    animation-name: prototype-route-travel-mobile;
  }

  .raem-home .prototype-decision {
    grid-template-columns: 1fr;
  }
}

@keyframes prototype-route-travel-mobile {
  from {
    transform: translateY(-44px);
    opacity: 0;
  }
  14%, 84% {
    opacity: 1;
  }
  to {
    transform: translateY(680px);
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .raem-home .prototype-path {
    padding: 54px 16px;
  }

  .raem-home .prototype-header h2 {
    max-width: 15ch;
    font-size: clamp(31px, 9.5vw, 40px);
  }

  .raem-home .prototype-stage {
    gap: 11px;
    margin-top: 25px;
    padding: 11px;
    border-radius: 20px;
  }

  .raem-home .prototype-stage article {
    gap: 13px;
    padding: 15px;
    border-radius: 15px;
  }

  .raem-home .prototype-stage h3 {
    font-size: 23px;
  }

  .raem-home .map-row {
    grid-template-columns: 1fr 37px auto;
    padding: 10px;
  }

  .raem-home .screen-layout {
    min-height: 170px;
  }

  .raem-home .prototype-decision {
    margin-top: 12px;
    padding: 16px;
    border-radius: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .stack-hud::before,
  .raem-home .stack-hud::after,
  .raem-home .stack-hud span,
  .raem-home .hud-code-core code,
  .raem-home .hud-code-core code::after,
  .raem-home .hud-code-core::after {
    animation: none !important;
  }

  .raem-home .stack-hud {
    opacity: 0.18;
  }

  .raem-home .circuit-signal,
  .raem-home .prototype-route span,
  .raem-home .map-row.is-active i::after,
  .raem-home .prototype-screen::after {
    animation: none !important;
  }

  .raem-home .circuit-signal {
    opacity: 0 !important;
  }
}

/* Normalized RAEM section labels: teal marks the main page landmarks. */
.raem-home .hero-copy > .eyebrow,
.raem-home .proof-intro > .eyebrow,
.raem-home .stack-copy > .eyebrow,
.raem-home .creates > .section-kicker > .eyebrow,
.raem-home .build-copy > .eyebrow,
.raem-home .portfolio-header .eyebrow,
.raem-home .problems > .section-kicker > .eyebrow,
.raem-home .prototype-header .eyebrow,
.raem-home .cta-world > .eyebrow {
  width: fit-content;
  margin: 0 0 14px;
  color: #42dfcf !important;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(66, 223, 207, 0.18);
}

.raem-home .portfolio-card .product-kicker {
  color: rgba(66, 223, 207, 0.76);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.raem-home .prototype-decision .eyebrow {
  color: rgba(66, 223, 207, 0.78);
  font-size: 10px;
  letter-spacing: 0.15em;
}

/* Client Digital Builds */
.raem-home .client-builds-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(520px, 1.35fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: stretch;
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 3vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(66, 223, 207, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(66, 223, 207, 0.16), transparent 34%),
    radial-gradient(circle at 86% 28%, rgba(244, 172, 53, 0.10), transparent 30%),
    linear-gradient(135deg, rgba(9, 33, 33, 0.84), rgba(3, 10, 13, 0.94) 58%, rgba(4, 12, 15, 0.88));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.raem-home .client-builds-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(66, 223, 207, 0.18) 49% 50%, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(66, 223, 207, 0.06) 27px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, 0.035) 35px);
  mask-image: radial-gradient(circle at 55% 44%, #000 0 45%, transparent 78%);
}

.raem-home .client-builds-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.raem-home .client-builds-glow span {
  position: absolute;
  display: block;
  height: 1px;
  width: clamp(130px, 18vw, 270px);
  background: linear-gradient(90deg, transparent, rgba(66, 223, 207, 0.58), transparent);
  filter: drop-shadow(0 0 12px rgba(66, 223, 207, 0.28));
  opacity: 0.45;
}

.raem-home .client-builds-glow span:nth-child(1) {
  top: 24%;
  left: 12%;
}

.raem-home .client-builds-glow span:nth-child(2) {
  top: 55%;
  right: 8%;
  width: clamp(170px, 23vw, 360px);
}

.raem-home .client-builds-glow span:nth-child(3) {
  bottom: 18%;
  left: 36%;
  width: clamp(120px, 16vw, 230px);
  background: linear-gradient(90deg, transparent, rgba(244, 172, 53, 0.46), transparent);
}

.raem-home .client-preview-copy,
.raem-home .client-feature-card {
  position: relative;
  z-index: 1;
}

.raem-home .client-preview-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.raem-home .client-preview-copy h2 {
  max-width: 12ch;
  margin: 0;
  color: #f4f3ed;
  font-size: clamp(38px, 4.2vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.075em;
}

.raem-home .client-preview-copy > p:not(.eyebrow) {
  max-width: 430px;
  margin: 18px 0 0;
  color: rgba(205, 224, 221, 0.78);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.65;
}

.raem-home .client-build-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.raem-home .client-build-tags span {
  padding: 9px 12px;
  border: 1px solid rgba(66, 223, 207, 0.24);
  border-radius: 999px;
  color: rgba(220, 241, 238, 0.84);
  background: rgba(2, 12, 15, 0.42);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.raem-home .client-feature-card {
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(66, 223, 207, 0.20);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(5, 19, 22, 0.94), rgba(1, 7, 9, 0.82)),
    rgba(3, 12, 15, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.28);
}

.raem-home .client-feature-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  color: rgba(221, 239, 236, 0.7);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.raem-home .client-feature-status span {
  color: #42dfcf;
}

.raem-home .client-feature-status small {
  color: rgba(244, 172, 53, 0.78);
}

.raem-home .client-feature-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.92fr) minmax(280px, 1.08fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: center;
}

.raem-home .client-feature-layout h3 {
  margin: 0;
  color: #f4f3ed;
  font-size: clamp(26px, 2.5vw, 42px);
  line-height: 1;
  letter-spacing: -0.065em;
}

.raem-home .client-feature-layout p:not(.product-kicker) {
  margin: 16px 0 0;
  color: rgba(199, 221, 218, 0.74);
  font-size: 14px;
  line-height: 1.62;
}

.raem-home .client-feature-shot,
.raem-home .case-main-shot,
.raem-home .case-screenshot-grid figure {
  margin: 0;
}

.raem-home .client-feature-shot {
  padding: 10px;
  border: 1px solid rgba(66, 223, 207, 0.18);
  border-radius: 18px;
  background: rgba(0, 5, 8, 0.78);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}

.raem-home .client-feature-shot img,
.raem-home .case-main-shot img,
.raem-home .case-screenshot-grid img {
  display: block;
  width: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.raem-home .client-feature-shot img {
  aspect-ratio: 16 / 10;
}

.raem-home .client-feature-shot figcaption {
  margin: 10px 3px 0;
  color: rgba(191, 213, 210, 0.58);
  font-size: 11px;
  line-height: 1.4;
}

.raem-home.client-builds-page {
  background:
    radial-gradient(circle at 16% 7%, rgba(66, 223, 207, 0.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(244, 172, 53, 0.08), transparent 28%),
    #020708;
}

.raem-home .client-builds-hero {
  position: relative;
  min-height: clamp(590px, 82vh, 840px);
  display: grid;
  place-items: center;
  padding: 150px 24px 90px;
  overflow: hidden;
}

.raem-home .client-builds-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 7, 8, 0.95), rgba(5, 26, 28, 0.58), rgba(2, 7, 8, 0.94)),
    repeating-linear-gradient(90deg, rgba(66, 223, 207, 0.06) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 86px);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 88%);
}

.raem-home .client-builds-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.raem-home .client-builds-atmosphere span {
  position: absolute;
  border: 1px solid rgba(66, 223, 207, 0.12);
  border-radius: 24px;
  background: rgba(66, 223, 207, 0.035);
  box-shadow: 0 0 50px rgba(66, 223, 207, 0.08);
}

.raem-home .client-builds-atmosphere span:nth-child(1) {
  width: 260px;
  height: 150px;
  left: 8%;
  top: 28%;
  transform: rotate(-8deg);
}

.raem-home .client-builds-atmosphere span:nth-child(2) {
  width: 360px;
  height: 210px;
  right: 5%;
  top: 20%;
  transform: rotate(6deg);
}

.raem-home .client-builds-atmosphere span:nth-child(3) {
  width: 460px;
  height: 270px;
  left: 38%;
  bottom: 3%;
  border-color: rgba(244, 172, 53, 0.10);
  background: rgba(244, 172, 53, 0.035);
}

.raem-home .client-hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(280px, 0.55fr);
  gap: clamp(24px, 5vw, 90px);
  align-items: end;
  width: min(1180px, 100%);
}

.raem-home .client-hero-copy h1 {
  max-width: 12ch;
  margin: 0;
  color: #f6f5ef;
  font-size: clamp(58px, 8vw, 124px);
  line-height: 0.88;
  letter-spacing: -0.095em;
}

.raem-home .client-hero-copy > p:not(.eyebrow) {
  max-width: 640px;
  margin: 24px 0 0;
  color: rgba(207, 226, 223, 0.80);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.55;
}

.raem-home .client-hero-proof {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(66, 223, 207, 0.21);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0, rgba(66, 223, 207, 0.20), transparent 38%),
    linear-gradient(145deg, rgba(4, 22, 24, 0.93), rgba(2, 9, 12, 0.86));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.raem-home .client-hero-proof span {
  color: #42dfcf;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.raem-home .client-hero-proof strong {
  display: block;
  margin-top: 14px;
  color: #f4f3ed;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.06em;
}

.raem-home .client-hero-proof p {
  margin: 16px 0 0;
  color: rgba(203, 224, 221, 0.74);
  font-size: 15px;
  line-height: 1.6;
}

.raem-home .client-case-study,
.raem-home .client-proof-section {
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto;
}

.raem-home .case-header {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 0.72fr);
  gap: clamp(20px, 5vw, 82px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.raem-home .case-header h2,
.raem-home .client-proof-copy h2 {
  margin: 0;
  color: #f4f3ed;
  font-size: clamp(44px, 5.2vw, 86px);
  line-height: 0.92;
  letter-spacing: -0.085em;
}

.raem-home .case-header > p,
.raem-home .client-proof-copy > p {
  margin: 0;
  color: rgba(201, 221, 218, 0.76);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.65;
}

.raem-home .case-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.62fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: stretch;
}

.raem-home .case-main-shot {
  padding: clamp(10px, 1.2vw, 14px);
  border: 1px solid rgba(66, 223, 207, 0.20);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(66, 223, 207, 0.06), rgba(0, 0, 0, 0.20)),
    rgba(1, 8, 11, 0.78);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
}

.raem-home .case-main-shot img {
  aspect-ratio: 16 / 9;
}

.raem-home .case-main-shot figcaption {
  margin: 12px 6px 2px;
  color: rgba(214, 231, 228, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.raem-home .case-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(244, 172, 53, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(244, 172, 53, 0.11), transparent 30%),
    linear-gradient(145deg, rgba(10, 16, 15, 0.92), rgba(3, 10, 12, 0.90));
}

.raem-home .case-summary-card h3 {
  margin: 2px 0 18px;
  color: #f4f3ed;
  font-size: clamp(30px, 3vw, 45px);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.raem-home .case-build-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.raem-home .case-build-list li {
  position: relative;
  padding: 12px 12px 12px 34px;
  border: 1px solid rgba(66, 223, 207, 0.12);
  border-radius: 13px;
  color: rgba(219, 237, 234, 0.84);
  background: rgba(2, 11, 14, 0.58);
  font-size: 13px;
  line-height: 1.35;
}

.raem-home .case-build-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42dfcf;
  box-shadow: 0 0 14px rgba(66, 223, 207, 0.5);
  transform: translateY(-50%);
}

.raem-home .case-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(22px, 3vw, 38px);
}

.raem-home .case-screenshot-grid figure,
.raem-home .case-thumb {
  padding: 9px;
  border: 1px solid rgba(66, 223, 207, 0.15);
  border-radius: 18px;
  background: rgba(2, 11, 14, 0.72);
}

.raem-home .case-thumb {
  display: grid;
  gap: 0;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.raem-home .case-thumb:hover,
.raem-home .case-thumb:focus-visible,
.raem-home .case-thumb.is-active {
  transform: translateY(-3px);
  border-color: rgba(66, 223, 207, 0.48);
  background:
    radial-gradient(circle at 20% 10%, rgba(66, 223, 207, 0.12), transparent 42%),
    rgba(2, 11, 14, 0.86);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24), 0 0 22px rgba(66, 223, 207, 0.09);
}

.raem-home .case-thumb:focus-visible {
  outline: 2px solid rgba(66, 223, 207, 0.86);
  outline-offset: 4px;
}

.raem-home .case-screenshot-grid img {
  aspect-ratio: 4 / 3;
}

.raem-home .case-screenshot-grid figcaption,
.raem-home .case-thumb span {
  margin: 10px 4px 2px;
  color: rgba(214, 231, 228, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.raem-home .client-proof-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(460px, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding-top: clamp(72px, 9vw, 130px);
  padding-bottom: clamp(72px, 9vw, 130px);
}

.raem-home .client-proof-copy h2 {
  max-width: 13ch;
}

.raem-home .client-proof-copy > p {
  max-width: 560px;
  margin-top: 22px;
}

.raem-home .client-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.raem-home .client-capability-grid article {
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(66, 223, 207, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(66, 223, 207, 0.06), transparent 55%),
    rgba(3, 12, 15, 0.78);
}

.raem-home .client-capability-grid span {
  color: rgba(244, 172, 53, 0.86);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.raem-home .client-capability-grid strong {
  display: block;
  margin-top: 18px;
  color: #f4f3ed;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.raem-home .client-capability-grid p {
  margin: 12px 0 0;
  color: rgba(199, 221, 218, 0.70);
  font-size: 13px;
  line-height: 1.55;
}

.raem-home .client-builds-preview .eyebrow,
.raem-home .client-hero-copy > .eyebrow,
.raem-home .case-header .eyebrow,
.raem-home .client-proof-copy > .eyebrow {
  width: fit-content;
  margin: 0 0 14px;
  color: #42dfcf !important;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(66, 223, 207, 0.18);
}

@media (max-width: 980px) {
  .raem-home .client-builds-preview,
  .raem-home .client-feature-layout,
  .raem-home .client-hero-shell,
  .raem-home .case-header,
  .raem-home .case-spotlight,
  .raem-home .client-proof-section {
    grid-template-columns: 1fr;
  }

  .raem-home .client-preview-copy h2,
  .raem-home .client-hero-copy h1,
  .raem-home .client-proof-copy h2 {
    max-width: 14ch;
  }

  .raem-home .client-builds-hero {
    min-height: auto;
    padding-top: 130px;
  }

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

@media (max-width: 760px) {
  .raem-home .client-builds-preview,
  .raem-home .client-case-study,
  .raem-home .client-proof-section {
    width: min(100% - 28px, 1220px);
  }

  .raem-home .client-builds-preview {
    padding: 20px;
    border-radius: 22px;
  }

  .raem-home .client-preview-copy h2,
  .raem-home .client-feature-layout h3,
  .raem-home .client-hero-copy h1,
  .raem-home .case-header h2,
  .raem-home .client-proof-copy h2 {
    letter-spacing: -0.07em;
  }

  .raem-home .client-preview-copy h2 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .raem-home .client-feature-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .raem-home .client-feature-card,
  .raem-home .case-summary-card {
    border-radius: 19px;
  }

  .raem-home .client-builds-hero {
    padding: 116px 14px 64px;
  }

  .raem-home .client-hero-copy h1 {
    font-size: clamp(46px, 16vw, 72px);
  }

  .raem-home .client-hero-copy > p:not(.eyebrow) {
    font-size: 17px;
  }

  .raem-home .case-screenshot-grid,
  .raem-home .client-capability-grid {
    grid-template-columns: 1fr;
  }

  .raem-home .client-capability-grid article {
    min-height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SCROLL — Frame-sequence canvas hero
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-scroll {
  position: relative;
  height: 500vh;
}

@media (max-width: 1024px) { .hero-scroll { height: 400vh; } }
@media (max-width: 768px)  { .hero-scroll { height: 350vh; } }

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #020405;
}

/* Canvas fills full sticky viewport */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Dark gradient so copy stays legible over the 3D scene */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(2, 4, 5, 0.62) 0%,
      rgba(2, 4, 5, 0.20) 38%,
      rgba(2, 4, 5, 0.10) 60%,
      rgba(2, 4, 5, 0.55) 100%
    ),
    linear-gradient(90deg,
      rgba(2, 4, 5, 0.70) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
}

/* ── Hero copy ─────────────────────────────────────────────────────────── */
.hero-copy {
  position: absolute;
  bottom: 14vh;
  left: clamp(24px, 6vw, 96px);
  z-index: 10;
  max-width: 620px;
  transition: opacity 0.05s linear;
  will-change: opacity;
}

.hero-copy .eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.85;
}

.hero-copy h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero-copy .hero-lede {
  margin: 0 0 36px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
}

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

/* ── Scroll hint ───────────────────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  color: rgba(247, 244, 236, 0.5);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.6s ease;
  will-change: opacity;
  pointer-events: none;
}

.scroll-dot {
  animation: scrollBounce 1.6s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ── Annotation cards ──────────────────────────────────────────────────── */
.hero-card {
  position: absolute;
  z-index: 10;
  max-width: 240px;
  padding: 18px 20px;
  background: rgba(7, 14, 15, 0.82);
  border: 1px solid rgba(54, 208, 194, 0.25);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(54, 208, 194, 0.08);

  /* Hidden state */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-card .card-tag {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.9;
}

.hero-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.hero-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Card positions */
.card-1 { top: 22vh;  left:  clamp(24px, 5vw, 80px); }
.card-2 { top: 38vh;  right: clamp(24px, 5vw, 80px); }
.card-3 { bottom: 22vh; right: clamp(24px, 6vw, 100px); }

/* ── Ultrawide overrides (> 2560px) ───────────────────────────────────────
   On 3440 / 5120 screens the copy needs to breathe:
   - Uncap left margin so text sits 8vw in (not 96px on a 5120 screen)
   - Larger heading & lede so they feel proportional at that scale
   - Push hero copy to vertical centre-ish rather than bottom corner
   - Spread cards further from edges                                      */
@media (min-width: 2561px) {
  /* ── Ultrawide content container ────────────────────────────────────────
     At 3440px+ the default 1480px max-width leaves ~1000px of dead space
     on each side. Bump --raem-content to 70% of viewport so every section
     below the hero fills the screen naturally.                             */
  .raem-home {
    --raem-content: clamp(1480px, 70vw, 2600px);
    --raem-reading: clamp(760px, 28vw, 1000px);
  }

  /* ── Hero copy ──────────────────────────────────────────────────────── */
  .hero-copy {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    left: clamp(96px, 8vw, 480px);
    max-width: min(640px, 22vw);
  }

  /* Use .raem-home to match specificity of the base .raem-home .hero-copy h1 rule */
  .raem-home .hero-copy h1,
  .hero-copy h1 {
    font-size: clamp(56px, 3.6vw, 96px) !important;
    max-width: 14ch;
  }

  .hero-copy .hero-lede {
    font-size: clamp(17px, 1.1vw, 22px);
    max-width: 540px;
  }

  .hero-copy .eyebrow {
    font-size: 13px;
  }

  .card-1 { top: 18vh;  left:  clamp(80px, 6vw, 200px); }
  .card-2 { top: 38vh;  right: clamp(80px, 6vw, 200px); }
  .card-3 { bottom: 18vh; right: clamp(80px, 6vw, 200px); }

  /* ── Hero annotation cards — scale up for ultrawide ─────────────────── */
  .hero-card {
    max-width: clamp(300px, 13vw, 480px);
    padding: clamp(22px, 1.6vw, 36px) clamp(24px, 1.8vw, 40px);
    border-radius: 18px;
    box-shadow: 0 12px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(54, 208, 194, 0.12);
  }

  .hero-card .card-tag {
    font-size: clamp(11px, 0.55vw, 15px);
    margin-bottom: 10px;
  }

  .hero-card strong {
    font-size: clamp(18px, 1.1vw, 28px);
    margin-bottom: 10px;
  }

  .hero-card p {
    font-size: clamp(14px, 0.75vw, 20px);
    line-height: 1.6;
  }

  /* ── Section-level type scale ───────────────────────────────────────── */
  .raem-home section h2 {
    font-size: clamp(42px, 3.2vw, 80px);
  }

  /* ── Proof grid — more columns at ultrawide ─────────────────────────── */
  .raem-home .proof-grid,
  .raem-home [class*="proof-grid"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Preload progress bar ─────────────────────────────────────────────── */
.hero-loader {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: opacity 0.6s ease;
}

.hero-loader-track {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.hero-loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--amber));
  border-radius: 2px;
  transition: width 0.1s linear;
}

.hero-loader-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 244, 236, 0.4);
}

/* ── Mobile adjustments ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-copy {
    bottom: 10vh;
    left: 20px;
    right: 20px;
    max-width: none;
  }

  .hero-copy h1 {
    font-size: clamp(32px, 8vw, 48px);
  }

  .card-1 { top: 16vh; left: 16px; }
  .card-2 { top: 36vh; right: 16px; }
  .card-3 { bottom: 24vh; right: 16px; }

  .hero-card { max-width: 180px; padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE-WIDE POLISH — Review fixes 2026-06-09
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Sticky nav with scroll state ────────────────────────────────────────
   Desktop nav is position:absolute by default (shows only over hero).
   Override to sticky + add two visual states:
   - at-top   : transparent, no border — blends with hero
   - scrolled : frosted glass, teal border line — readable over content     */

.raem-home .site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  transition:
    background 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
  will-change: background;
}

/* At-top state: near-transparent over the canvas hero */
.raem-home .site-header.nav-at-top {
  background: linear-gradient(180deg,
    rgba(2, 4, 5, 0.72) 0%,
    rgba(2, 4, 5, 0.32) 100%
  ) !important;
  border-bottom-color: rgba(54, 208, 194, 0.06) !important;
  box-shadow: none !important;
}

/* Scrolled state: solid frosted glass */
.raem-home .site-header.nav-scrolled {
  background: rgba(4, 8, 10, 0.92) !important;
  border-bottom: 1px solid rgba(54, 208, 194, 0.22) !important;
  box-shadow:
    0 1px 0 rgba(54, 208, 194, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.44) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ── 2. Section-to-section transition wipes ─────────────────────────────────
   Each section below the hero gets a gradient "breath" at the top that
   dissolves from the background into the section colour — no hard cuts.     */

.system-section {
  position: relative;
}

.system-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(2, 4, 5, 0.85) 0%,
    transparent 100%
  );
}

/* First section right after hero gets a taller fade */
.current-proof {
  position: relative;
}
.current-proof::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(2, 4, 5, 1) 0%,
    transparent 100%
  );
}

/* Subtle bottom fade on sections to blend into the next */
.system-section::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 80px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(0deg,
    rgba(2, 4, 5, 0.6) 0%,
    transparent 100%
  );
}

/* ── 3. Final CTA section — premium glow upgrade ────────────────────────────
   The closing CTA needs to feel like the climax of the page — a teal-lit
   stage that echoes the energy of the hero.                                 */

.raem-home .final-cta {
  position: relative;
  overflow: hidden;
}

/* Ambient teal glow behind the CTA card */
.raem-home .final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%,
      rgba(54, 208, 194, 0.18) 0%,
      transparent 70%
    ),
    radial-gradient(ellipse 50% 40% at 20% 50%,
      rgba(54, 208, 194, 0.06) 0%,
      transparent 60%
    );
  pointer-events: none;
  z-index: 0;
}

/* Animated pulse behind CTA card */
@keyframes ctaGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

.raem-home .final-cta::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse,
    rgba(54, 208, 194, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: ctaGlowPulse 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .final-cta::after { animation: none; }
}

/* Lift CTA card above the glow layers */
.raem-home .cta-world {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(54, 208, 194, 0.28) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(54, 208, 194, 0.16), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(216, 155, 82, 0.06), transparent 50%),
    rgba(5, 12, 15, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(54, 208, 194, 0.08),
    0 32px 96px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(54, 208, 194, 0.18) !important;
}

/* ── 4. Footer upgrade ───────────────────────────────────────────────────────
   Replace single-line minimal footer with a structured multi-column footer.
   The HTML footer element stays the same — new CSS layout via grid.         */

.site-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px) !important;
  align-items: start !important;
  gap: clamp(32px, 4vw, 72px) !important;
  padding: 0 !important;
  border-top: none !important;
  background:
    linear-gradient(rgba(54, 208, 194, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.02) 1px, transparent 1px),
    #030708 !important;
  background-size: 64px 64px, 64px 64px, auto !important;
  max-width: none !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(54, 208, 194, 0.07), transparent 34%),
    radial-gradient(circle at 86% 34%, rgba(54, 208, 194, 0.04), transparent 32%);
  opacity: 0.8;
}

/* We inject a rich footer via a new `.footer-body` wrapper we add to HTML */
.footer-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(36px, 4vw, 70px);
  width: 100%;
  max-width: var(--raem-content, 1300px);
  justify-self: end;
  margin: 0;
  padding: clamp(56px, 6vw, 92px) clamp(20px, 5vw, 72px) clamp(44px, 5vw, 72px);
  border-top: 1px solid rgba(54, 208, 194, 0.14);
  position: relative;
  z-index: 1;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand-col img {
  width: 96px;
  height: auto;
}

.footer-brand-col p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(220, 232, 232, 0.5);
  max-width: 260px;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-nav-col h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal, #36d0c2);
  margin: 0 0 4px;
}

.footer-nav-col a {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(220, 232, 232, 0.65);
  transition: color 180ms ease, text-shadow 180ms ease;
}

.footer-nav-col a:hover {
  color: #fff;
  text-shadow: 0 0 14px rgba(54, 208, 194, 0.3);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: clamp(70px, 7vw, 110px) clamp(20px, 5vw, 72px) 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: rgba(220, 232, 232, 0.35);
  width: 100%;
  max-width: 420px;
  justify-self: start;
  position: relative;
  z-index: 1;
}

.footer-bottom a {
  color: rgba(220, 232, 232, 0.45);
  transition: color 180ms ease;
}

.footer-bottom a:hover {
  color: rgba(54, 208, 194, 0.9);
}

.footer-legal-links {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-brief-button {
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 20px;
  font-size: 13px;
}

/* Legal pages */
.legal-page {
  min-height: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 72% 8%, rgba(54, 208, 194, 0.09), transparent 30rem),
    linear-gradient(rgba(54, 208, 194, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 208, 194, 0.018) 1px, transparent 1px),
    #050809;
  background-size: auto, 64px 64px, 64px 64px, auto;
}

.legal-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(140px, 14vw, 190px) 0 clamp(80px, 10vw, 140px);
}

.legal-hero {
  max-width: 820px;
  padding-bottom: clamp(40px, 6vw, 70px);
}

.legal-hero h1 {
  margin: 14px 0 20px;
  color: #f4f5f0;
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.legal-intro {
  max-width: 680px;
  color: rgba(220, 232, 232, 0.7);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.7;
}

.legal-date {
  margin-top: 22px;
  color: rgba(220, 232, 232, 0.48);
  font-size: 0.88rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  gap: clamp(42px, 7vw, 92px);
  align-items: start;
}

.legal-index {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 11px;
  padding: 22px;
  border: 1px solid rgba(54, 208, 194, 0.16);
  border-radius: 8px;
  background: rgba(8, 15, 16, 0.82);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.legal-index strong {
  margin-bottom: 6px;
  color: #36d0c2;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-index a {
  color: rgba(220, 232, 232, 0.58);
  font-size: 0.84rem;
}

.legal-index a:hover,
.legal-index a:focus-visible {
  color: #fff;
}

.legal-document {
  min-width: 0;
}

.legal-document section {
  scroll-margin-top: 110px;
  padding: 0 0 34px;
  margin: 0 0 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.legal-document h2 {
  margin: 0 0 18px;
  color: #f4f5f0;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.legal-document h3 {
  margin: 24px 0 10px;
  color: rgba(244, 245, 240, 0.9);
  font-size: 1rem;
  letter-spacing: 0;
}

.legal-document p,
.legal-document li {
  color: rgba(220, 232, 232, 0.68);
  font-size: 0.98rem;
  line-height: 1.8;
}

.legal-document p + p {
  margin-top: 14px;
}

.legal-document a {
  color: #54dfd2;
  text-decoration: underline;
  text-decoration-color: rgba(84, 223, 210, 0.35);
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .legal-main {
    width: min(100% - 30px, 680px);
    padding-top: 118px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .legal-index {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal-index strong {
    grid-column: 1 / -1;
  }

  .legal-hero h1 {
    font-size: clamp(2.7rem, 14vw, 4.2rem);
  }

  .footer-legal-links {
    justify-content: center;
  }
}

@media (max-width: 1100px) {
  .site-footer {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .footer-body {
    justify-self: stretch;
    max-width: none;
  }

  .footer-bottom {
    max-width: none;
    margin: 0;
    padding: 20px clamp(20px, 5vw, 72px) 40px;
    justify-content: space-between;
  }
}

@media (max-width: 900px) {
  .footer-body {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ── 5. Section accent dividers — teal line between sections ─────────────── */
.section-accent-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(54, 208, 194, 0.18) 20%,
    rgba(54, 208, 194, 0.28) 50%,
    rgba(54, 208, 194, 0.18) 80%,
    transparent 100%
  );
  margin: 0;
}

/* ── 6. Proof section — first section after hero: add teal ambient glow ─── */
.raem-home .current-proof {
  background: radial-gradient(
    ellipse 70% 50% at 80% 50%,
    rgba(54, 208, 194, 0.04) 0%,
    transparent 70%
  );
}

/* ── 7. Bonita case study card — unified teal border + inner glow ────────── */
.raem-home .client-feature-card {
  border: 1px solid rgba(54, 208, 194, 0.22) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(54, 208, 194, 0.06), transparent 50%),
    var(--card-bg, rgba(7, 14, 15, 0.9)) !important;
  box-shadow:
    0 0 0 1px rgba(54, 208, 194, 0.06),
    0 32px 80px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(54, 208, 194, 0.12) !important;
}

/* ── 8. Touch target fixes (WCAG 2.5.5 — 44×44px minimum) ──────────────────
   Proof card inline links and nav links are visually small but need a larger
   tap area. Achieved via padding without changing visual layout.             */
.raem-home .proof-item a {
  /* Extend tap area above/below the 17px text without shifting layout */
  padding-top: 13px;
  padding-bottom: 13px;
  margin-top: -13px;
  margin-bottom: -13px;
}

/* Nav links: extend vertical tap area on mobile where 21px is too small */
@media (max-width: 768px) {
  .site-nav a {
    padding-block: 12px;
  }
}

/* ── 9. Smooth scroll on html element ───────────────────────────────────────
   Ensures anchor links (#creates, #hero-scroll etc.) scroll smoothly.       */
html {
  scroll-behavior: smooth;
}

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

/* ==========================================================================
   HOMEPAGE STORE BAND — .rs-band-*                        (appended, no edits)
   --------------------------------------------------------------------------
   Scope: #store-band on index.html only, sitting between the products section
   (#flow) and the client-builds section. Everything below is APPEND-ONLY —
   no selector above this banner is modified.

   The visual language is lifted from store.css so the band and the store page
   read as one system: surface #0b0e10, edge rgba(54,208,194,.18), radius 12,
   outline badge chips, recessed price plate, teal accents. Amber appears on
   the IN DEVELOPMENT badge and nowhere else.

   The band deliberately carries NO ground of its own. It sits on the page
   background, which is what keeps it reading as a coda to the products
   section rather than as a tenth section of the homepage.

   The .rs-band-slot wrapper in index.html is structural, not visual, and
   needs no rule here. It exists so #store-band is not a direct <section>
   sibling of the other homepage sections: `.raem-home .system-section:
   nth-of-type(even)` alternates the grounds by section index, so a new
   sibling section would have re-coloured client-builds, problems and future.
   Wrapped, the count below the band is untouched. See the note in index.html.
   ========================================================================== */

/* --- Shell and seams ------------------------------------------------------
   Both seams are graded to the page's own section rhythm, clamp(78px,8vw,118px).
   Entry: the products section's bottom padding already supplies exactly that,
   so the band takes no top padding of its own — adding any would double it.
   Exit: client-builds is its own rounded card and its padding sits INSIDE that
   card, so it contributes no gap; the band therefore has to supply the whole
   exit seam itself, at the same rhythm. Measured at 1440: 126px in, 115px out.
   padding-inline mirrors the .raem-home section container formula exactly.  */
.raem-home .rs-band {
  position: relative;
  padding-block: 0 clamp(78px, 8vw, 118px);
  padding-inline: max(clamp(28px, 5vw, 72px), calc((100% - var(--raem-content, 1480px)) / 2));
}

/* --- Content cap ----------------------------------------------------------
   The band's padding-inline above resolves against --raem-content, which the
   ultrawide block (min-width: 2561px) re-declares as clamp(1480px, 70vw,
   2600px). That is right for the full-bleed sections, but the band's
   neighbours are not full-bleed: .client-builds-preview, .client-case-study
   and .client-proof-section all hold their content at the homepage's own
   content convention, width: min(1220px, calc(100% - 48px)). Without a cap of
   its own the band tracked --raem-content instead and rendered 2408px at 3440
   against the neighbours' 1220px - double the width of everything around it.

   Capping .rs-band-inner at the same 1220px and centring it puts the header
   rail and the card shelf on the neighbours' exact left edge. The gutter half
   of the neighbours' formula (calc(100% - 48px)) is deliberately NOT copied:
   the band already supplies its own gutters through padding-inline, so
   min(1220px, 100%) caps the ceiling without narrowing the phone layout.    */
.raem-home .rs-band-inner {
  width: min(1220px, 100%);
  margin-inline: auto;
}

/* --- Header rail ----------------------------------------------------------
   The store page's own structural device, reused unchanged: uppercase
   letterspaced teal label, a hairline running to the container edge, and the
   route out of it. The hairline is drawn by the row itself, so the markup
   needs no extra element.                                                   */
.raem-home .rs-band-head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

.raem-home .rs-band-label {
  flex: none;
  color: #36d0c2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.raem-home .rs-band-head::after {
  flex: 1;
  order: 1;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(54, 208, 194, 0.42), rgba(255, 255, 255, 0.06) 62%, transparent);
}

.raem-home .rs-band-visit {
  flex: none;
  order: 2;
  color: #36d0c2;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 180ms ease;
}

.raem-home .rs-band-visit:hover {
  color: #7ce7dc;
}

/* --- Micro-card shelf ---------------------------------------------------- */

.raem-home .rs-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 20px);
  align-items: stretch;
}

.raem-home .rs-band-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: clamp(20px, 1.9vw, 28px);
  border: 1px solid rgba(54, 208, 194, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(54, 208, 194, 0.035), transparent 42%),
    #0b0e10;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

/* Hover parity: the homepage card convention (.module-card, .problem-card,
   .tier - lift, teal edge, teal glow) set to the store page's own -4px. */
.raem-home .rs-band-card:hover,
.raem-home .rs-band-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(54, 208, 194, 0.45);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.44), 0 0 34px rgba(54, 208, 194, 0.13);
}

.raem-home .rs-band-card h3 {
  margin: 0;
  color: #f7f4ec;
  font-size: clamp(18px, 1.3vw, 21px);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.18;
}

/* Held card - the kit is not purchasable, so the whole card is held back at
   the same 60% the store page uses. */
.raem-home .rs-band-card-held {
  opacity: 0.6;
}

/* --- Badges - small outline chips ---------------------------------------- */

.raem-home .rs-band-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #adbbbc;
  background: rgba(173, 187, 188, 0.06);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.raem-home .rs-band-badge-live {
  color: #36d0c2;
  background: rgba(54, 208, 194, 0.08);
}

/* The only amber in the band. */
.raem-home .rs-band-badge-dev {
  color: #d89b52;
  background: rgba(216, 155, 82, 0.07);
}

/* --- Price plate ----------------------------------------------------------
   The band's one lit element. The live price is an instrument reading on a
   teal recess; the placeholder is the same plate with the light off. The
   difference between a real number and a marker is the band's whole argument,
   so it is the only place the band raises its voice.                        */
.raem-home .rs-band-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid rgba(54, 208, 194, 0.22);
  border-radius: 10px;
  color: #f7f4ec;
  background: rgba(15, 94, 89, 0.12);
  font-size: clamp(23px, 1.75vw, 28px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
}

/* "one-time" stays lowercase plain English - it is a term, not a label. */
.raem-home .rs-band-price span {
  color: #adbbbc;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.raem-home .rs-band-price-tk {
  border-color: rgba(255, 255, 255, 0.12);
  color: #adbbbc;
  background: rgba(255, 255, 255, 0.03);
  font-size: clamp(19px, 1.35vw, 22px);
}

.raem-home .rs-band-note {
  margin: 0;
  color: #adbbbc;
  font-size: 14.5px;
  line-height: 1.5;
}

/* --- Card floor -----------------------------------------------------------
   Both controls are pushed to the card floor, so the three line up across the
   row however tall the copy above them runs. That single alignment is what
   makes three unequal cards read as one shelf.                              */
.raem-home .rs-band-buy,
.raem-home .rs-band-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.raem-home .rs-band-buy {
  align-self: stretch;
  max-width: 320px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(54, 208, 194, 0.55);
  border-radius: 9px;
  color: #041110;
  background: linear-gradient(135deg, #7ce7dc, #36d0c2 72%, #23b3a6);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  transition: filter 180ms ease, box-shadow 180ms ease;
}

.raem-home .rs-band-buy:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 26px rgba(54, 208, 194, 0.24);
}

/* A status, not a control - so it keeps its own width and stays quiet. */
.raem-home .rs-band-soon {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  color: #adbbbc;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* --- Quality floor -------------------------------------------------------- */

.raem-home .rs-band a:focus-visible {
  outline: 2px solid rgba(54, 208, 194, 0.75);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Focus parity, ruling R9. The two copy-only cards carry tabindex="0" in the
   markup, which makes the :focus-within rule above light them on Tab exactly
   as hover does; this adds the ring, since the rule above it only reaches
   anchors. Mirrors .store-card[tabindex="0"]:focus-visible in store.css. */
.raem-home .rs-band-card[tabindex="0"]:focus-visible {
  outline: 2px solid rgba(54, 208, 194, 0.75);
  outline-offset: 4px;
}

@media (min-width: 2561px) {
  .raem-home .rs-band-card {
    gap: 18px;
    padding: clamp(28px, 1.5vw, 42px);
  }
}

/* 3 -> 1. The shelf keeps three columns until 820px and then stacks; there is
   no two-up step, because two micro-cards beside a lone third read as a
   mistake rather than a layout. */
@media (max-width: 820px) {
  .raem-home .rs-band-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .raem-home .rs-band-buy {
    max-width: 100%;
  }
}

/* On a phone the label and the link fill the row on their own. The hairline is
   dropped rather than squeezed, because a 20px stub of rule reads as a mistake;
   the two ends simply hold the row instead. */
@media (max-width: 560px) {
  .raem-home .rs-band-head {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 14px;
  }

  .raem-home .rs-band-head::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raem-home .rs-band-card,
  .raem-home .rs-band-buy,
  .raem-home .rs-band-visit {
    transition: none;
  }

  .raem-home .rs-band-card:hover,
  .raem-home .rs-band-card:focus-within {
    transform: none;
  }
}

/* --- Circuit field behind the band (appended 2026-08-14, owner ruling) -----
   DEFECT: the band's plain background "is not mixing well" with the rest of
   the page. FIX: the store page's own circuit field, run sparse behind the
   shelf - same engine (store-bg.js initBand), same palette, ~1/3 the density,
   and no logo (owner confirmed twice). Nothing above this comment changes.

   The canvas is ABSOLUTE, not fixed: it belongs to the band and must scroll
   with it. .rs-band already carries position: relative (see "Shell and seams"
   above), so inset: 0 resolves against the band's own border box - which is
   the full viewport width, giving the full-bleed run the store page has while
   .rs-band-inner stays capped at 1220px on top of it.

   Layering: the canvas sits at z-index 0 and the content column is lifted to
   1, so cards, their hover/focus lift and their focus rings all stay above the
   field. The lift on .rs-band-inner is a NEW rule on a distinct selector -
   the .rs-band-inner block above is not edited - and position: relative with
   no offsets moves nothing.                                                 */
.raem-home .rs-band-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.raem-home .rs-band > .rs-band-inner {
  position: relative;
  z-index: 1;
}


/* ── Footer centring at wide viewports (appended 2026-08-14) ────────────────
   DEFECT: on ultrawide screens the whole footer assembly rendered right of the
   page centre line while every section above it stayed centred. Reported on a
   3440 display against store.html; measured identically on about, contact,
   creation-brief, privacy and terms — i.e. site-wide, not store-specific.
   store.css contains no footer layout rules at all.

   CAUSE: `.site-footer` (see "4. Footer upgrade" above) is a two-column grid,
   `minmax(0, 1fr)` + `minmax(300px, 440px)`. Column 1 absorbs every extra pixel
   of viewport width, and `.footer-body` (max-width var(--raem-content, 1300px),
   justify-self: end) pins to that column's RIGHT edge. Once the column grows
   past the footer body's max-width, dead space opens on the left only and the
   whole block drifts right — +558px for the body, +804px for body+copyright at
   3440. Below ~1812px the column is still narrower than the body's cap, the
   body fills it, and the block sits dead centre; that is why the bug is
   invisible at 1440.

   FIX: stop column 1 from growing past the content width the body would use
   anyway, and centre the resulting track pair. Column widths per page are
   unchanged (each page's own --raem-content still drives them, falling back to
   the same 1300px as before) — only the dead space is removed.

   Append-only and scoped to min-width 1813px = 1300 + 72 gap + 440, the exact
   width at which the original layout stops working. Every viewport at or below
   that renders byte-identically to before, including the <=1100px stacked
   layout and the <=560px phone layout, whose rules this must not outrank.   */
@media (min-width: 1813px) {
  .site-footer {
    grid-template-columns: minmax(0, var(--raem-content, 1300px)) minmax(300px, 440px) !important;
    justify-content: center !important;
  }
}