.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: 104px 20px var(--hero-bottom-space);
  --spot-x: 50%;
  --spot-y: 42%;
  --preview-shift-x: 0px;
  --preview-shift-y: 0px;
  --art-shift-x: 0px;
  --art-shift-y: 0px;
  --hero-glow: 0;
  --hero-copy-y: 0px;
  --hero-copy-opacity: 1;
  --hero-art-y: 0px;
  --hero-bottom-space: clamp(48px, 5vw, 80px);
  --hero-scroll-space: 360px;
  --hero-preview-y: 0px;
  --hero-preview-scale: 0.92;
  --hero-symbol-width: clamp(300px, 31vw, 480px);
  --hero-symbol-y: 0px;
  --hero-symbol-scale: 1;
  --hero-symbol-opacity: 0.94;
  --hero-float-risk-opacity: 0;
  --hero-float-risk-y: 28px;
  --hero-float-risk-scale: 0.96;
  --hero-float-briefing-opacity: 0;
  --hero-float-briefing-y: 28px;
  --hero-float-briefing-scale: 0.96;
  --hero-float-context-opacity: 0;
  --hero-float-context-y: 28px;
  --hero-float-context-scale: 0.96;
}

.hero::before {
  position: absolute;
  inset: -18% -20% -6%;
  z-index: -2;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 42%), rgba(103, 232, 249, 0.16), transparent 25rem),
    radial-gradient(circle at 50% 92%, rgba(55, 198, 208, 0.24), transparent 34rem),
    radial-gradient(circle at 14% 12%, rgba(139, 92, 246, 0.12), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(45, 212, 191, 0.13), transparent 26rem),
    linear-gradient(180deg, rgba(21, 19, 15, 0.98), var(--cw-bg) 68%, rgba(34, 31, 27, 0.98));
  content: "";
  opacity: 0.86;
  transition: opacity 220ms ease;
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 42%), rgba(213, 255, 234, 0.1), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%);
  opacity: 0.42;
  mask-image: radial-gradient(ellipse at 50% 32%, black, transparent 76%);
  content: "";
  transition: opacity 220ms ease, background 220ms ease;
}

.hero-layout {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--cw-container));
  min-height: calc(100svh - 104px);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: clamp(26px, 4vw, 80px);
  margin: 0 auto;
  margin-top: 96px;
  text-align: center;
}

.hero-layout::before {
  position: absolute;
  inset: -24vh -18vw -18vh;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 58%, rgba(55, 198, 208, 0.12), transparent 34rem),
    radial-gradient(circle at 50% 72%, rgba(213, 255, 234, 0.055), transparent 28rem);
  content: "";
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.hero:hover .hero-layout::before {
  opacity: 0.55;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  word-break: keep-all;
  opacity: var(--hero-copy-opacity);
  transform: translate3d(0, var(--hero-copy-y), 0);
  will-change: transform, opacity;
}

.js-enabled .hero:not(.is-hero-intro-ready) .eyebrow,
.js-enabled .hero:not(.is-hero-intro-ready) h1,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-subcopy,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-actions,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-points,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-symbol,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-preview {
  opacity: 0;
}

.js-enabled .hero:not(.is-hero-intro-ready) .eyebrow,
.js-enabled .hero:not(.is-hero-intro-ready) h1,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-subcopy,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-actions,
.js-enabled .hero:not(.is-hero-intro-ready) .hero-points {
  translate: 0 18px;
}

.js-enabled .hero:not(.is-hero-intro-ready) .hero-symbol {
  translate: 0 0;
}

.js-enabled .hero:not(.is-hero-intro-ready) .hero-preview {
  translate: 0 34px;
}

.js-enabled .hero.is-hero-intro-ready .eyebrow,
.js-enabled .hero.is-hero-intro-ready h1,
.js-enabled .hero.is-hero-intro-ready .hero-subcopy,
.js-enabled .hero.is-hero-intro-ready .hero-actions,
.js-enabled .hero.is-hero-intro-ready .hero-points {
  animation: heroIntroText 760ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.js-enabled .hero.is-hero-intro-ready .eyebrow {
  animation-delay: 40ms;
}

.js-enabled .hero.is-hero-intro-ready h1 {
  animation-delay: 120ms;
}

.js-enabled .hero.is-hero-intro-ready .hero-subcopy {
  animation-delay: 220ms;
}

.js-enabled .hero.is-hero-intro-ready .hero-actions,
.js-enabled .hero.is-hero-intro-ready .hero-points {
  animation-delay: 320ms;
}

.js-enabled .hero.is-hero-intro-ready .hero-symbol {
  animation: heroIntroSymbol 840ms cubic-bezier(0.16, 1, 0.3, 1) 520ms backwards;
}

.js-enabled .hero.is-hero-intro-ready .hero-preview {
  animation: heroIntroMockup 900ms cubic-bezier(0.16, 1, 0.3, 1) 760ms backwards;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 40px;
  border: 1px solid rgba(213, 255, 234, 0.14);
  border-radius: var(--cw-radius-pill);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cw-accent-primary-soft);
  padding: 8px 12px;
  font-size: var(--cw-type-label);
  font-weight: 800;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.hero:hover .eyebrow {
  border-color: rgba(103, 232, 249, 0.34);
  background: rgba(55, 198, 208, 0.08);
  color: var(--cw-accent-primary-faint);
}

.hero h1 {
  max-width: 940px;
  margin: 0;
  color: var(--cw-text-primary);
  font-size: clamp(54px, 5.8vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  word-break: keep-all;
}

.hero h1 .accent {
  color: var(--cw-accent-primary-strong);
  white-space: nowrap;
  transition: text-shadow 180ms ease;
}

.hero:hover h1 .accent {
  text-shadow: 0 0 28px rgba(34, 211, 238, 0.22);
}

.hero-subcopy {
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--cw-text-secondary);
  font-size: var(--cw-type-body-lg);
  line-height: var(--cw-leading-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 0;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cw-radius-pill);
  padding: 0 20px;
  font-size: var(--cw-type-label);
  font-weight: 800;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.button-primary {
  background: var(--cw-shadow);
  color: var(--cw-text-primary);
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 18px 46px rgba(55, 198, 208, 0.28);
  min-height: auto;
  padding: 16px 32px;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--cw-accent-primary-strong);
  color: #08110f;
  /*transform: translateY(-2px);*/
  outline: none;
}

.button-secondary {
  border: 1px solid var(--cw-border-strong);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cw-text-primary);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(103, 232, 249, 0.78);
  /*transform: translateY(-2px);*/
  outline: none;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hero-points li {
  border: 1px solid rgba(213, 255, 234, 0.14);
  border-radius: var(--cw-radius-pill);
  background: rgba(255, 255, 255, 0.035);
  color: var(--cw-text-secondary);
  padding: 8px 11px;
  font-size: var(--cw-type-caption);
  font-weight: 700;
}

.hero-art {
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: min(100%, 1120px);
  min-height: 468px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: clamp(72px, 7vw, 140px);
  overflow: visible;
  transform: translate3d(0, var(--hero-art-y), 0);
  pointer-events: none;
  will-change: transform;
}

.hero-art::before {
  content: none;
}

.hero:hover .hero-art::before {
  content: none;
}

.hero-art::after {
  position: absolute;
  inset: -28% -24% -42%;
  z-index: -1;
  opacity: 0.5;
  background:
    radial-gradient(circle at 46% 60%, rgba(45, 212, 191, 0.16), transparent 36rem),
    radial-gradient(circle at 72% 48%, rgba(139, 92, 246, 0.12), transparent 34rem);
  content: "";
  filter: blur(28px);
  transform: translateZ(0);
  transition: opacity 180ms ease;
}

.hero:hover .hero-art::after {
  opacity: 0.62;
}

.hero-symbol {
  position: absolute;
  top: calc(var(--hero-symbol-width) * -0.44);
  left: 50%;
  z-index: 1;
  width: var(--hero-symbol-width);
  height: auto;
  opacity: var(--hero-symbol-opacity);
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.3))
    drop-shadow(0 20px 62px rgba(35, 213, 186, 0.28));
  pointer-events: none;
  transform: translate3d(-50%, var(--hero-symbol-y), 0) scale(var(--hero-symbol-scale));
  transform-origin: center top;
  will-change: transform, opacity;
}

.hero-preview {
  position: relative;
  z-index: 3;
  flex: 0 1 auto;
  width: min(100%, 1040px);
  max-width: 100%;
  border: 1px solid var(--cw-border-strong);
  border-radius: 32px;
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 12%), rgba(96, 243, 157, 0.13), transparent 22rem),
    linear-gradient(150deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(7, 9, 18, 0.88);
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.52),
    0 0 74px rgba(55, 198, 208, 0.12);
  margin-bottom: -54px;
  padding: 14px;
  backdrop-filter: blur(22px);
  transform: translate3d(var(--preview-shift-x), var(--hero-preview-y), 0) scale(var(--hero-preview-scale));
  transform-origin: center top;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.hero:hover .hero-preview {
  border-color: rgba(157, 255, 191, 0.42);
  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.58),
    0 0 86px rgba(55, 198, 208, 0.17);
}

.hero-float {
  position: absolute;
  z-index: 5;
  min-width: 188px;
  max-width: 244px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(11, 16, 32, 0.72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  padding: 15px 16px;
  text-align: left;
  backdrop-filter: blur(14px) saturate(1.08);
  pointer-events: none;
  contain: paint;
  opacity: var(--float-opacity, 1);
  transform: translate3d(0, var(--float-y, 0px), 0) scale(var(--float-scale, 1));
  translate: 0 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: floatLayer 5.8s ease-in-out infinite alternate;
}

.hero-float span {
  display: block;
  color: var(--cw-accent-primary-soft);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-float strong {
  display: block;
  margin-top: 8px;
  color: var(--cw-text-primary);
  font-size: 15px;
  line-height: 1.28;
  word-break: keep-all;
}

.hero-float p {
  margin: 8px 0 0;
  color: var(--cw-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.hero-float-risk {
  left: -38px;
  top: 48%;
  --float-opacity: var(--hero-float-risk-opacity);
  --float-y: var(--hero-float-risk-y);
  --float-scale: var(--hero-float-risk-scale);
}

.hero-float-briefing {
  right: -36px;
  top: 7%;
  --float-opacity: var(--hero-float-briefing-opacity);
  --float-y: var(--hero-float-briefing-y);
  --float-scale: var(--hero-float-briefing-scale);
  animation-delay: -1.8s;
}

.hero-float-context {
  right: -34px;
  bottom: 0px;
  --float-opacity: var(--hero-float-context-opacity);
  --float-y: var(--hero-float-context-y);
  --float-scale: var(--hero-float-context-scale);
  animation-delay: -3.1s;
}

.hero-preview::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(128deg, rgba(55, 198, 208, 0.28), transparent 34%),
    linear-gradient(300deg, rgba(139, 92, 246, 0.22), transparent 38%);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28);
  content: "";
}

.preview-topbar {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* border-bottom: 1px solid var(--cw-border); */
  color: var(--cw-text-muted);
  padding: 0 6px 6px;
  font-size: 12px;
  font-weight: 800;
}

.preview-topbar span {
  width: 38px;
  height: 12px;
  flex: 0 0 38px;
  border-radius: var(--cw-radius-pill);
  background:
    radial-gradient(circle at 6px 6px, var(--cw-status-negative) 0 3px, transparent 3.5px),
    radial-gradient(circle at 18px 6px, var(--cw-status-warning) 0 3px, transparent 3.5px),
    radial-gradient(circle at 30px 6px, var(--cw-status-positive) 0 3px, transparent 3.5px);
}

.preview-topbar-mark {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 14px;
  filter: drop-shadow(0 4px 10px rgba(35, 213, 186, 0.2));
}

.preview-topbar strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(248, 250, 252, 0.72);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(190px, 0.82fr);
  grid-template-areas:
    "dashboard alert"
    "dashboard brief";
  gap: 10px;
  padding-top: 12px;
}

.preview-panel {
  border: 1px solid var(--cw-border);
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(17, 24, 39, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 17px;
  transition: border-color 180ms ease, background 180ms ease;
}

.hero:hover .preview-panel {
  border-color: rgba(213, 255, 234, 0.18);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(17, 24, 39, 0.78);
}

.preview-dashboard {
  grid-area: dashboard;
  min-height: 438px;
}

.preview-alert {
  grid-area: alert;
}

.preview-brief {
  grid-area: brief;
}

.preview-label {
  display: grid;
  gap: 7px;
}

.preview-label span {
  font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.preview-label strong {
  color: var(--cw-text-primary);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.24;
  word-break: keep-all;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.metric-strip div {
  min-width: 0;
  border: 1px solid var(--cw-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 10px;
}

.metric-strip span,
.issue-list span {
  display: block;
  color: var(--cw-text-muted);
  font-size: 11px;
  font-weight: 760;
}

.metric-strip strong {
  display: block;
  margin-top: 6px;
  color: var(--cw-accent-primary-strong);
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
}

.metric-strip strong.negative {
  color: var(--cw-status-negative);
}

.signal-chart {
  height: 118px;
  display: grid;
  grid-template-columns: repeat(24, minmax(3px, 1fr));
  align-items: end;
  gap: 4px;
  margin-top: 20px;
  border-bottom: 1px solid var(--cw-border);
  padding: 0 1px 9px;
}

.signal-chart span {
  height: var(--bar-height, 50%);
  min-height: 9px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--cw-accent-primary-strong), rgba(91, 141, 239, 0.42));
  box-shadow: 0 0 10px rgba(55, 198, 208, 0.12);
  transform-origin: bottom;
}

.signal-chart span:nth-child(1) { --bar-height: 28%; --bar-delay: -0.2s; }
.signal-chart span:nth-child(2) { --bar-height: 34%; --bar-delay: -0.4s; }
.signal-chart span:nth-child(3) { --bar-height: 31%; --bar-delay: -0.6s; }
.signal-chart span:nth-child(4) { --bar-height: 42%; --bar-delay: -0.8s; }
.signal-chart span:nth-child(5) { --bar-height: 48%; --bar-delay: -1s; }
.signal-chart span:nth-child(6) { --bar-height: 44%; --bar-delay: -1.2s; }
.signal-chart span:nth-child(7) { --bar-height: 56%; --bar-delay: -1.4s; }
.signal-chart span:nth-child(8) { --bar-height: 66%; --bar-delay: -1.6s; }
.signal-chart span:nth-child(9) { --bar-height: 62%; --bar-delay: -1.8s; }
.signal-chart span:nth-child(10) { --bar-height: 54%; --bar-delay: -2s; }
.signal-chart span:nth-child(11) { --bar-height: 58%; --bar-delay: -2.2s; }
.signal-chart span:nth-child(12) { --bar-height: 70%; --bar-delay: -2.4s; }
.signal-chart span:nth-child(13) { --bar-height: 82%; --bar-delay: -2.6s; }
.signal-chart span:nth-child(14) { --bar-height: 76%; --bar-delay: -2.8s; }
.signal-chart span:nth-child(15) { --bar-height: 68%; --bar-delay: -3s; }
.signal-chart span:nth-child(16) { --bar-height: 74%; --bar-delay: -3.2s; }
.signal-chart span:nth-child(17) { --bar-height: 64%; --bar-delay: -3.4s; }
.signal-chart span:nth-child(18) { --bar-height: 58%; --bar-delay: -3.6s; }
.signal-chart span:nth-child(19) { --bar-height: 72%; --bar-delay: -3.8s; }
.signal-chart span:nth-child(20) { --bar-height: 78%; --bar-delay: -4s; }
.signal-chart span:nth-child(21) { --bar-height: 69%; --bar-delay: -4.2s; }
.signal-chart span:nth-child(22) { --bar-height: 52%; --bar-delay: -4.4s; }
.signal-chart span:nth-child(23) { --bar-height: 44%; --bar-delay: -4.6s; }
.signal-chart span:nth-child(24) { --bar-height: 36%; --bar-delay: -4.8s; }

.issue-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.issue-list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--cw-border);
  padding-top: 10px;
}

.issue-list strong {
  min-width: 0;
  color: var(--cw-text-secondary);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.42;
}

.preview-alert {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(239, 68, 68, 0.14), rgba(255, 255, 255, 0.02)),
    rgba(17, 24, 39, 0.82);
}

.preview-alert::after {
  position: absolute;
  right: -38px;
  bottom: -42px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: 50%;
  content: "";
}

.preview-alert p {
  position: relative;
  margin: 16px 0 0;
  color: var(--cw-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.preview-alert-action {
  position: relative;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  border-radius: var(--cw-radius-pill);
  background: rgba(239, 68, 68, 0.16);
  color: var(--cw-text-primary);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 820;
}

.preview-brief {
  background:
    linear-gradient(150deg, rgba(91, 141, 239, 0.14), rgba(255, 255, 255, 0.02)),
    rgba(17, 24, 39, 0.82);
}

.brief-lines {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.brief-lines span {
  height: 10px;
  border-radius: var(--cw-radius-pill);
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.42), rgba(203, 213, 225, 0.08));
}

.brief-lines span:nth-child(2) {
  width: 82%;
}

.brief-lines span:nth-child(3) {
  width: 58%;
}

.preview-route {
  width: min(88%, 520px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 40px auto 0;
}

.preview-route span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-pill);
  background: rgba(7, 9, 18, 0.72);
  color: var(--cw-text-secondary);
  font-size: 11px;
  font-weight: 820;
}

@keyframes floatLayer {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -12px;
  }
}

@keyframes heroIntroText {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes heroIntroSymbol {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 0;
  }

  to {
    opacity: var(--hero-symbol-opacity);
    scale: 1;
    translate: 0 0;
  }
}

@keyframes heroIntroMockup {
  from {
    opacity: 0;
    scale: 0.97;
    translate: 0 36px;
  }

  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled .hero.is-hero-intro-ready .eyebrow,
  .js-enabled .hero.is-hero-intro-ready h1,
  .js-enabled .hero.is-hero-intro-ready .hero-subcopy,
  .js-enabled .hero.is-hero-intro-ready .hero-actions,
  .js-enabled .hero.is-hero-intro-ready .hero-points,
  .js-enabled .hero.is-hero-intro-ready .hero-symbol,
  .js-enabled .hero.is-hero-intro-ready .hero-preview {
    animation: none;
  }
}

.hero[data-parallax="static"] {
  --hero-copy-y: 0px;
  --hero-copy-opacity: 1;
  --hero-art-y: 0px;
  --hero-scroll-space: 0px;
  --hero-preview-y: 0px;
  --hero-preview-scale: 1;
  --hero-symbol-y: 0px;
  --hero-symbol-scale: 1;
  --hero-symbol-opacity: 0.74;
  --hero-float-risk-opacity: 1;
  --hero-float-risk-y: 0px;
  --hero-float-risk-scale: 1;
  --hero-float-briefing-opacity: 1;
  --hero-float-briefing-y: 0px;
  --hero-float-briefing-scale: 1;
  --hero-float-context-opacity: 1;
  --hero-float-context-y: 0px;
  --hero-float-context-scale: 1;
}

@media (max-width: 1023px) {
  .hero-layout {
    gap: 32px;
    margin-top: 60px;
  }

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

  .hero-art {
    min-height: 520px;
    margin-top: 54px;
  }

  .hero-symbol {
    --hero-symbol-width: min(42vw, 320px);
  }

  .hero-float {
    display: none;
  }

  .hero-preview {
    width: min(100%, 720px);
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    --hero-scroll-space: 0px;
    padding: 96px 14px 34px;
  }

  .hero-layout {
    min-height: 0;
    gap: 24px;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: 13px;
  }

  .hero h1 {
    font-size: var(--cw-type-display-mobile);
    line-height: 1.12;
  }

  .hero-subcopy {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.58;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 24px;
    justify-items: center;
  }

  .button {
    /*width: 100%;
    min-height: 50px;*/
    width: fit-content;
  }

  .hero-points {
    display: none;
  }

  .hero-art {
    min-height: auto;
    margin-top: 80px;
    border-radius: 26px;
    transform: none;
  }

  .hero-copy {
    opacity: 1;
    transform: none;
  }

  .hero-symbol {
    --hero-symbol-width: min(58vw, 220px);
    opacity: 0.68;
    transform: translate3d(-50%, 0, 0);
  }

  .hero-float {
    display: none;
  }

  .hero-preview {
    width: 100%;
    border-radius: 24px;
    margin-bottom: -20px;
    padding: 10px;
    transform: none;
  }

  .preview-topbar {
    min-height: 36px;
    padding-bottom: 10px;
  }

  .preview-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "dashboard";
    gap: 10px;
    padding-top: 10px;
  }

  .preview-alert,
  .preview-brief {
    display: none;
  }

  .preview-panel {
    border-radius: 17px;
    padding: 14px;
  }

  .preview-dashboard {
    min-height: auto;
  }

  .preview-label strong {
    font-size: 16px;
  }

  .metric-strip {
    margin-top: 14px;
  }

  .metric-strip div {
    padding: 10px 8px;
  }

  .metric-strip strong {
    font-size: 20px;
  }

  .signal-chart {
    height: 86px;
    gap: 3px;
    grid-template-columns: repeat(24, minmax(2px, 1fr));
    margin-top: 16px;
  }

  .issue-list {
    gap: 8px;
    margin-top: 14px;
  }

  .issue-list li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    padding-top: 8px;
  }

  .issue-list strong,
  .preview-alert p {
    font-size: 12px;
  }

  .preview-route {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 359px) {
  .hero h1 {
    font-size: 34px;
  }

  .hero-subcopy {
    font-size: 15px;
  }

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

  .hero-preview {
    padding: 8px;
  }

  .preview-panel {
    padding: 12px;
  }

  .preview-topbar strong {
    font-size: 11px;
  }

  .metric-strip {
    gap: 6px;
  }

  .metric-strip span,
  .issue-list span {
    font-size: 10px;
  }

  .metric-strip strong {
    font-size: 18px;
  }

  .issue-list li:nth-child(3) {
    display: none;
  }
}