@font-face {
  font-family: "Verdanto";
  src: url("./assets/fonts/Verdanto-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("./assets/fonts/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("./assets/fonts/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("./assets/fonts/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("./assets/fonts/Archivo_Complete/Fonts/WEB/fonts/Archivo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("./assets/fonts/Archivo_Complete/Fonts/WEB/fonts/Archivo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #02070d;
  --bg-2: #07111a;
  --surface: rgba(12, 18, 30, 0.76);
  --surface-strong: rgba(16, 23, 38, 0.88);
  --surface-line: rgba(143, 178, 220, 0.16);
  --surface-line-strong: rgba(143, 224, 255, 0.26);
  --text: #f4f6fb;
  --muted: #aeb8c7;
  --muted-strong: #d7deea;
  --accent: #45dfff;
  --accent-2: #68f3cf;
  --warm: #f8bb7d;
  --danger: #ff5e74;
  --danger-soft: rgba(255, 94, 116, 0.18);
  --card-shadow: 0 36px 80px rgba(0, 0, 0, 0.46);
  --radius: 26px;
  --radius-sm: 18px;
  --font-body: "Archivo", sans-serif;
  --font-display: "Satoshi", sans-serif;
  --shell: min(1180px, calc(100vw - 40px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(22, 65, 90, 0.34), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(20, 46, 86, 0.4), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, #02080c 38%, var(--bg-2) 100%);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
}

body.is-loading {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.28));
}

button,
a,
input,
textarea,
select {
  font: inherit;
}

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

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

canvas {
  display: block;
}

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

.shell {
  width: var(--shell);
  margin: 0 auto;
}

.scene-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.scene-shell {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

#scene {
  width: 100%;
  height: 100%;
}

.page-noise,
.ambient-orb {
  pointer-events: none;
}

.page-noise {
  position: absolute;
  inset: 0;
  opacity: 0.075;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.24) 1px, transparent 0),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04));
  background-size: 28px 28px, 100% 100%;
  mix-blend-mode: soft-light;
}

.ambient-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(52px);
  opacity: 0.46;
  transition: opacity 360ms ease, transform 480ms ease;
}

.orb-a {
  width: 240px;
  height: 240px;
  top: 16%;
  left: 6%;
  background: rgba(51, 214, 255, 0.18);
}

.orb-b {
  width: 420px;
  height: 420px;
  right: -5%;
  top: 26%;
  background: rgba(81, 244, 203, 0.17);
}

.orb-c {
  width: 360px;
  height: 360px;
  left: 12%;
  top: 55%;
  background: rgba(65, 122, 255, 0.12);
}

.orb-d {
  width: 380px;
  height: 380px;
  right: 6%;
  bottom: 10%;
  background: rgba(36, 215, 255, 0.12);
}

body[data-section="alerts"] .orb-a,
body[data-section="alerts"] .orb-b {
  opacity: 0.62;
  transform: scale(1.08);
}

body[data-section="alerts"] .orb-d {
  background: rgba(255, 92, 118, 0.13);
}

body[data-section="explanation"] .orb-c,
body[data-section="explanation"] .orb-d {
  opacity: 0.58;
  transform: scale(1.06);
}

body[data-section="scenarios"] .orb-b {
  opacity: 0.55;
}

body[data-section="pricing"] .ambient-orb {
  opacity: 0.24;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(2, 7, 13, 0.98), rgba(2, 7, 13, 0.94));
  transition: opacity 700ms ease, visibility 700ms ease;
}

body.is-ready .loader {
  opacity: 0;
  visibility: hidden;
}

.loader-inner {
  width: min(540px, calc(100vw - 44px));
}

.loader-label {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.loader-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 700;
}

.loader-count {
  font-size: clamp(3rem, 12vw, 7rem);
  line-height: 0.92;
}

.loader-unit {
  color: var(--muted);
  font-size: 1.2rem;
}

.loader-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.loader-rule-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(69, 223, 255, 0), rgba(69, 223, 255, 0.9), rgba(104, 243, 207, 1));
  box-shadow: 0 0 20px rgba(69, 223, 255, 0.66);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding-top: 12px;
  transition: transform 320ms ease, opacity 320ms ease;
}

body.is-loading .site-header {
  opacity: 0;
  transform: translateY(-18px);
}

.nav-wrap {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(4, 9, 16, 0.48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.logo-mark {
  width: auto;
  height: 36px;
}

.logo-small {
  height: 30px;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: #fff;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav a {
  font-family: "Verdanto", var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(0.97rem, 1.38vw, 1.46rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  color: rgba(238, 243, 255, 0.88) !important;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), rgba(104, 243, 207, 0.7));
  transition: transform 180ms ease;
}

.nav a:hover {
  color: #fff;
}

.nav a:hover::after {
  transform: scaleX(1);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.78rem 1.18rem;
  border-radius: 999px;
  border: 1px solid rgba(123, 230, 255, 0.3);
  background: linear-gradient(135deg, rgba(35, 222, 255, 0.3), rgba(60, 244, 209, 0.18));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 18px 40px rgba(0, 0, 0, 0.28);
  color: #f9fbff;
  font-weight: 600;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  border-color: rgba(136, 245, 255, 0.52);
  box-shadow: 0 0 0 1px rgba(173, 245, 255, 0.12) inset, 0 22px 46px rgba(0, 0, 0, 0.32);
}

.button-outline,
.button-ghost {
  background: rgba(8, 14, 24, 0.48);
  border-color: rgba(255, 255, 255, 0.12);
}

.page-main {
  position: relative;
  z-index: 2;
}

.hero,
.story-block,
.content-band,
.pricing,
.final-cta {
  position: relative;
}

.hero {
  min-height: 112svh;
  padding-top: clamp(104px, 14vh, 140px);
}

.hero-shell {
  display: grid;
  min-height: calc(112svh - 110px);
  align-items: start;
}

.hero-copy {
  width: min(640px, 100%);
  padding-top: clamp(18px, 4vh, 44px);
}

.hero-kicker,
.band-kicker {
  margin-bottom: 18px;
  color: rgba(238, 244, 255, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero-title,
.section-title,
.band-title,
.final-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hero-title {
  display: grid;
  gap: 0;
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 0.88;
  max-width: 6.2ch;
}

.hero-title span {
  display: block;
}

.hero-lead {
  max-width: 620px;
  margin-top: 28px;
  color: var(--muted-strong);
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}

.hero-strip li,
.meta-chip,
.status-pill {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(9, 16, 28, 0.68);
  padding: 0.42rem 0.78rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero-strip li {
  color: rgba(244, 248, 255, 0.78);
  font-size: 0.85rem;
}

.story-block {
  padding: clamp(56px, 10vh, 110px) 0 clamp(84px, 14vh, 150px);
}

.story-shell,
.band-shell,
.pricing-shell,
.final-cta-shell {
  position: relative;
}

.section-title {
  font-size: clamp(3rem, 10vw, 6.25rem);
  line-height: 0.92;
  max-width: 9ch;
}

.card-stage {
  position: relative;
  margin-top: clamp(36px, 8vh, 70px);
}

.card-stage-center {
  display: flex;
  justify-content: center;
}

.card-stage-left {
  display: flex;
  justify-content: flex-start;
}

.card-stage-chart {
  display: flex;
  justify-content: center;
}

.product-card,
.capability-card,
.pipeline-card,
.pricing-card {
  position: relative;
  border: 1px solid rgba(170, 206, 255, 0.12);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 23, 38, 0.92), rgba(13, 18, 31, 0.78));
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}

.product-card::before,
.capability-card::before,
.pipeline-card::before,
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%);
}

.alert-card {
  width: min(600px, 100%);
  padding: 20px 22px 18px;
}

.explanation-card {
  width: min(380px, 100%);
  padding: 18px 18px 16px;
}

.chart-card {
  width: min(760px, 100%);
  padding: 14px;
}

.product-card-topline,
.chart-head,
.product-footer,
.chart-legend,
.chart-tabs,
.kv-grid,
.chip-row,
.metrics-row,
.pricing-grid,
.capability-grid,
.pipeline-stack,
.footer-wrap {
  display: flex;
}

.product-card-topline,
.chart-head,
.product-footer {
  align-items: center;
  justify-content: space-between;
}

.status-pill {
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-pill-danger {
  border-color: rgba(255, 94, 116, 0.32);
  background: rgba(44, 15, 23, 0.76);
}

.meta-chip {
  color: rgba(239, 245, 255, 0.76);
  font-size: 0.74rem;
}

.product-label,
.pipeline-step,
.pricing-tier {
  color: rgba(228, 235, 246, 0.72);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

.product-label {
  margin-top: 16px;
}

.kv-grid {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.kv-grid > div {
  min-width: 170px;
  display: grid;
  gap: 4px;
}

.kv-grid span,
.product-footer,
.pricing-copy,
.pipeline-card p,
.capability-card p,
.final-copy {
  color: var(--muted);
}

.kv-grid strong {
  font-weight: 500;
  color: var(--text);
}

.product-copy {
  margin-top: 14px;
  font-size: 0.98rem;
  color: #e9eef8;
}

.product-copy-dense {
  font-size: 0.88rem;
  color: rgba(233, 238, 248, 0.86);
}

.product-footer {
  margin-top: 16px;
  gap: 16px;
  font-size: 0.76rem;
}

.chip-row {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.chip-row span,
.chart-tabs span {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.34rem 0.52rem;
  color: rgba(240, 244, 255, 0.82);
  font-size: 0.7rem;
}

.section-line {
  margin-top: clamp(52px, 8vh, 88px);
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 7.4vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: rgba(248, 250, 255, 0.96);
}

.section-line-wide {
  max-width: 19ch;
}

.section-line-left {
  max-width: 15ch;
}

.chart-head {
  margin-bottom: 12px;
}

.chart-tabs,
.chart-legend {
  align-items: center;
  gap: 6px;
}

.chart-tabs .is-active {
  border-color: rgba(255, 205, 154, 0.26);
  background: rgba(77, 45, 22, 0.48);
}

.chart-legend {
  gap: 12px;
  color: rgba(235, 241, 250, 0.78);
  font-size: 0.72rem;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}

.dot-live {
  background: #63f0d2;
}

.dot-pred {
  background: #f4c895;
}

.chart-panel {
  position: relative;
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(20, 27, 43, 0.94), rgba(13, 18, 31, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 1px);
}

.chart-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100% 52px, 72px 100%;
  opacity: 0.3;
}

.chart-bars {
  position: absolute;
  inset: 22px 18px 82px;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(24, 1fr);
  gap: 5px;
}

.chart-bars span {
  height: var(--h);
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, rgba(148, 161, 183, 0.76), rgba(93, 108, 137, 0.1));
}

.chart-path {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 110px;
  border-radius: 999px;
  opacity: 0.92;
}

.chart-path-live {
  bottom: 46px;
  background: linear-gradient(90deg, transparent 0%, transparent 8%, rgba(83, 255, 196, 0.66) 12%, rgba(51, 223, 177, 0.9) 68%, rgba(255, 71, 94, 0.88) 80%, rgba(255, 71, 94, 0.08) 100%);
  clip-path: polygon(0 58%, 20% 57%, 37% 56%, 52% 57%, 68% 58%, 80% 59%, 89% 96%, 95% 96%, 97% 62%, 100% 61%, 100% 66%, 95% 67%, 92% 100%, 86% 100%, 81% 60%, 69% 59%, 52% 58%, 38% 57%, 20% 58%, 0 59%);
}

.chart-path-pred {
  bottom: 40px;
  background: linear-gradient(90deg, transparent 72%, rgba(255, 210, 153, 0.08) 80%, rgba(255, 210, 153, 0.96) 96%, transparent 100%);
  clip-path: polygon(84% 90%, 88% 89%, 91% 74%, 94% 58%, 97% 40%, 100% 22%, 100% 30%, 97% 46%, 94% 62%, 91% 78%, 88% 92%, 84% 94%);
}

.chart-tip {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(12, 18, 30, 0.92);
  padding: 10px 12px;
  color: rgba(243, 247, 255, 0.88);
  font-size: 0.72rem;
  line-height: 1.45;
}

.chart-tip-top {
  top: 18px;
  right: 20px;
}

.chart-tip-bottom {
  right: 34px;
  bottom: 20px;
}

.content-band,
.pricing,
.final-cta {
  padding: clamp(72px, 12vh, 130px) 0;
}

.band-head {
  max-width: 860px;
}

.band-title {
  font-size: clamp(2.1rem, 5.8vw, 4.6rem);
  line-height: 0.95;
  max-width: 12ch;
}

.capability-grid,
.pricing-grid {
  gap: 18px;
  margin-top: 32px;
}

.capability-grid {
  align-items: stretch;
}

.capability-card,
.pricing-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
}

.capability-card strong,
.pipeline-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.capability-card p,
.pipeline-card p,
.pricing-copy,
.pricing-card li,
.final-copy {
  margin-top: 12px;
  font-size: 0.96rem;
}

.metrics-row {
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.metrics-row > div {
  min-width: 180px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(9, 15, 26, 0.46);
}

.metrics-row span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.metrics-row small {
  color: var(--muted);
}

.band-shell-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: start;
}

.pipeline-stack {
  flex-direction: column;
  gap: 14px;
}

.pipeline-card {
  padding: 20px 22px;
}

.pricing-shell {
  position: relative;
}

.pricing-grid {
  align-items: stretch;
}

.pricing-card h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.pricing-card h3 span {
  color: var(--muted);
  font-size: 1rem;
}

.pricing-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
}

.pricing-card li + li {
  margin-top: 9px;
}

.pricing-card .button {
  margin-top: 22px;
}

.pricing-card-featured {
  border-color: rgba(98, 223, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(80, 232, 255, 0.12) inset, var(--card-shadow);
}

.final-cta-shell {
  text-align: center;
}

.final-title {
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.9;
}

.final-copy {
  width: min(560px, 100%);
  margin: 18px auto 0;
}

.final-cta .hero-actions {
  justify-content: center;
}

.site-footer {
  position: relative;
  z-index: 3;
  padding: 0 0 28px;
}

.footer-wrap {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 0;
  color: rgba(215, 221, 233, 0.7);
  font-size: 0.86rem;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
  transition: opacity 820ms ease, transform 820ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 820ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.control-panel {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 70;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100svh - 92px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(6, 11, 20, 0.92);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: transform 220ms ease, opacity 220ms ease;
}

.control-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 20px));
}

.panel-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 28, 0.96);
}

.panel-head h2 {
  font-family: var(--font-display);
  font-size: 1rem;
}

.panel-head button,
.panel-open {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(11, 19, 32, 0.88);
  color: #eef4ff;
  cursor: pointer;
}

.panel-head button {
  padding: 0.45rem 0.8rem;
}

.panel-body {
  padding: 14px 16px 16px;
}

.panel-open {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 65;
  padding: 0.72rem 0.96rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.panel-open.visible {
  opacity: 1;
  pointer-events: auto;
}

.marker-label-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

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

  .band-shell-split,
  .capability-grid,
  .pricing-grid,
  .footer-wrap {
    flex-direction: column;
    display: flex;
  }

  .site-header {
    padding-top: 10px;
  }

  .nav-wrap {
    gap: 12px;
  }

  .button-outline {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: calc(100vw - 28px);
  }

  .site-header {
    padding-top: 8px;
  }

  .nav-wrap {
    min-height: 50px;
    padding: 0 14px;
  }

  .brand-name {
    font-size: 0.72rem;
  }

  .logo-mark {
    height: 30px;
  }

  .hero {
    min-height: 98svh;
    padding-top: 88px;
  }

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

  .hero-copy {
    width: 100%;
    padding-top: 16px;
  }

  .hero-title {
    font-size: clamp(3.5rem, 17vw, 5.2rem);
    max-width: 6.5ch;
  }

  .hero-lead {
    max-width: 28rem;
    font-size: 0.98rem;
  }

  .story-block {
    padding-top: 50px;
    padding-bottom: 96px;
  }

  .section-title {
    font-size: clamp(2.7rem, 15vw, 4.3rem);
  }

  .section-line {
    font-size: clamp(1.85rem, 10vw, 2.8rem);
  }

  .alert-card,
  .chart-card,
  .pricing-card,
  .capability-card,
  .pipeline-card {
    padding: 18px;
  }

  .explanation-card {
    width: min(330px, 100%);
  }

  .chart-panel {
    min-height: 248px;
  }

  .metrics-row > div {
    min-width: 0;
    width: 100%;
  }

  .footer-wrap {
    align-items: flex-start;
  }

  .control-panel {
    width: calc(100vw - 18px);
    right: 9px;
    top: 64px;
  }

  .panel-open {
    right: 10px;
    bottom: 10px;
  }
}





/* Landing 2.0 wide-screen and screenshot-first overrides */
:root {
  --shell: calc(100vw - 48px);
}

body::before {
  display: none;
}

.loader {
  pointer-events: none;
  background: transparent;
  align-items: end;
  justify-items: start;
}

.loader-inner {
  width: auto;
  min-width: min(220px, calc(100vw - 40px));
  margin: 0 0 26px 24px;
}

.loader-label {
  display: none;
}

.loader-meta {
  margin-bottom: 10px;
}

.loader-count {
  font-size: clamp(1.8rem, 6vw, 3.6rem);
}

.loader-unit {
  font-size: 0.95rem;
}

.loader-rule {
  width: min(220px, 46vw);
  background: rgba(255, 255, 255, 0.18);
}

.site-header {
  padding-top: 18px;
}

.nav-wrap {
  min-height: auto;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .brand,
.site-header .button-outline {
  display: none;
}

.nav {
  width: 100%;
  justify-content: center;
  gap: clamp(18px, 4vw, 54px);
}

.nav a {
  font-family: "Verdanto", var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(0.97rem, 1.38vw, 1.46rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  color: rgba(238, 243, 255, 0.88) !important;
}

.hero {
  min-height: 100svh;
  padding-top: clamp(58px, 9vh, 86px);
}

.hero-shell {
  min-height: 100svh;
  align-items: start;
}

.hero-copy {
  width: 100%;
  padding-top: clamp(34px, 10vh, 84px);
}

.hero-kicker,
.hero-lead,
.hero-actions,
.hero-strip,
.band-kicker {
  display: none !important;
}

.hero-title {
  max-width: none;
  width: min(9.2ch, 100%);
  font-size: clamp(5.2rem, 17vw, 11rem);
  line-height: 0.88;
}

.story-shell,
.band-shell,
.pricing-shell,
.final-cta-shell {
  isolation: isolate;
}

.story-shell::before,
.band-shell::before,
.pricing-shell::before,
.final-cta-shell::before {
  content: "";
  position: absolute;
  inset: -34px -18px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(4, 8, 15, 0.42), rgba(4, 9, 16, 0.72));
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(30px) saturate(108%);
  -webkit-backdrop-filter: blur(30px) saturate(108%);
}

.story-block:first-of-type .story-shell::before {
  inset: -42px -22px;
}

.story-block,
.content-band,
.pricing,
.final-cta {
  padding-top: clamp(82px, 13vh, 150px);
  padding-bottom: clamp(92px, 14vh, 170px);
}

.section-title,
.band-title,
.final-title {
  max-width: 12ch;
}

.band-head {
  max-width: 1100px;
}

.final-cta-shell {
  text-align: left;
}

.final-cta .hero-actions {
  display: flex !important;
  justify-content: flex-start;
}

@media (max-width: 980px) {
  :root {
    --shell: calc(100vw - 32px);
  }

  .site-header {
    padding-top: 14px;
  }

  .nav {
    gap: 18px;
  }
}

@media (max-width: 720px) {
  :root {
    --shell: calc(100vw - 24px);
  }

  .loader-inner {
    margin: 0 0 18px 12px;
  }

  .loader-rule {
    width: min(170px, 58vw);
  }

  .site-header {
    padding-top: 12px;
  }

  .nav {
    gap: 14px;
    flex-wrap: wrap;
  }

  .hero {
    padding-top: 52px;
  }

  .hero-copy {
    padding-top: clamp(34px, 11vh, 72px);
  }

  .hero-title {
    width: min(6ch, 100%);
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .story-shell::before,
  .band-shell::before,
  .pricing-shell::before,
  .final-cta-shell::before {
    inset: -20px -10px;
    border-radius: 28px;
  }
}

/* Hero without background overlays */
body[data-section="hero"] .ambient-orb,
body[data-section="hero"] .page-noise {
  opacity: 0;
}

body[data-section="hero"] .hero::before,
body[data-section="hero"] .hero::after,
body[data-section="hero"] .hero-copy {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Loader gating, 10% layout, flush glass bands */
.shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 10vw;
  padding-right: 10vw;
}

.scene-stage {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease;
}

body.is-ready .scene-stage {
  opacity: 1;
  visibility: visible;
}

.loader {
  pointer-events: auto;
  background: #030910;
  align-items: end;
  justify-items: start;
}

.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #030910 0%, #040a12 100%);
}

.loader-inner {
  position: relative;
  z-index: 1;
}

.hero-title {
  width: auto;
  white-space: nowrap;
  font-size: clamp(4rem, 8.4vw, 9rem);
}

.section-title,
.section-line,
.final-title {
  max-width: none;
  white-space: nowrap;
}

.section-title {
  font-size: clamp(2.6rem, 6.3vw, 5.6rem);
}

.section-line {
  font-size: clamp(1.6rem, 4.2vw, 3.5rem);
}

.card-stage,
.card-stage-center,
.card-stage-chart {
  justify-content: flex-start;
}

.product-card,
.capability-card,
.pipeline-card,
.pricing-card,
.story-block::before,
.content-band::before,
.pricing::before,
.final-cta::before {
  border-radius: 0 !important;
}

.story-shell::before,
.band-shell::before,
.pricing-shell::before,
.final-cta-shell::before {
  display: none !important;
}

.story-block,
.content-band,
.pricing,
.final-cta {
  position: relative;
  padding-top: clamp(70px, 9vh, 112px);
  padding-bottom: clamp(70px, 9vh, 112px);
}

.story-block > .shell,
.content-band > .shell,
.pricing > .shell,
.final-cta > .shell {
  position: relative;
  z-index: 1;
}

.story-block::before,
.content-band::before,
.pricing::before,
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(4, 8, 14, 0.44), rgba(4, 9, 15, 0.72));
  backdrop-filter: blur(28px) saturate(108%);
  -webkit-backdrop-filter: blur(28px) saturate(108%);
  box-shadow: none;
}

.content-band + .content-band::before,
.story-block + .story-block::before,
.story-block + .content-band::before,
.content-band + .pricing::before,
.pricing + .final-cta::before {
  border-top: 0;
}

body[data-section="hero"] .hero-copy,
body[data-section="hero"] .hero-shell {
  background: transparent !important;
}

@media (max-width: 980px) {
  .hero-title {
    font-size: clamp(3.8rem, 8vw, 6.4rem);
  }

  .section-title {
    font-size: clamp(2.2rem, 5.1vw, 4rem);
  }

  .section-line {
    font-size: clamp(1.35rem, 3.3vw, 2.2rem);
  }
}

@media (max-width: 720px) {
  .shell {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .hero-title {
    font-size: clamp(2.6rem, 8vw, 4rem);
  }

  .section-title,
  .section-line,
  .final-title {
    font-size: clamp(1.1rem, 4.2vw, 1.9rem);
  }
}

/* 5% gutters, seamless bands, larger typography */
body {
  background: transparent !important;
}

.shell {
  padding-left: 10vw !important;
  padding-right: 10vw !important;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  white-space: normal;
  line-height: 0.82;
  font-size: clamp(4.8rem, 9.6vw, 10.5rem);
}

.hero-title-main {
  display: block;
  font-size: 1em;
}

.hero-title-sub {
  display: block;
  font-size: 0.62em;
  letter-spacing: -0.035em;
}

.section-title {
  font-size: clamp(3rem, 7.2vw, 6.4rem);
}

.section-line {
  font-size: clamp(1.9rem, 4.8vw, 4rem);
}

.band-title {
  font-size: clamp(2.8rem, 6.2vw, 5.4rem);
  max-width: 15ch;
}

.final-title {
  font-size: clamp(3rem, 7vw, 6.4rem);
}

.product-card,
.capability-card,
.pipeline-card,
.pricing-card {
  font-size: 1.04rem;
}

.story-block,
.content-band,
.pricing,
.final-cta {
  margin-top: -1px;
}

.story-block::before,
.content-band::before,
.pricing::before,
.final-cta::before {
  inset: -1px 0;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 980px) {
  .hero-title {
    font-size: clamp(4rem, 9vw, 7rem);
  }

  .section-title {
    font-size: clamp(2.5rem, 6vw, 4.6rem);
  }

  .section-line {
    font-size: clamp(1.55rem, 4vw, 2.8rem);
  }

  .band-title {
    font-size: clamp(2.1rem, 5vw, 4rem);
  }
}

@media (max-width: 720px) {
  .shell {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }

  .hero-title {
    font-size: clamp(3rem, 12vw, 5.2rem);
  }

  .hero-title-sub {
    font-size: 0.68em;
  }

  .section-title {
    font-size: clamp(1.5rem, 5.8vw, 2.6rem);
  }

  .section-line {
    font-size: clamp(1.1rem, 4.4vw, 1.9rem);
  }

  .band-title,
  .final-title {
    font-size: clamp(1.6rem, 6vw, 2.8rem);
  }
}


/* Final hero/layout tightening */
.hero,
.hero-shell,
.hero-copy {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-shell {
  display: block !important;
  min-height: calc(100svh - 32px) !important;
  position: relative;
  z-index: 1;
}

.story-block,
.content-band,
.pricing,
.final-cta {
  overflow: hidden;
}

.hero-title {
  font-size: clamp(5.8rem, 12.2vw, 14.5rem) !important;
  line-height: 0.78 !important;
}

.hero-title-sub {
  font-size: 0.66em !important;
}

.section-title {
  font-size: clamp(3.5rem, 8.4vw, 7.8rem) !important;
}

.section-line {
  display: table;
  width: auto;
  margin-left: auto !important;
  margin-right: 0;
  text-align: right !important;
  font-size: clamp(2.15rem, 5.4vw, 4.7rem) !important;
}

.band-title {
  font-size: clamp(3.3rem, 7vw, 6.5rem) !important;
}

.final-title {
  font-size: clamp(3.6rem, 8vw, 7.4rem) !important;
}

.product-card,
.capability-card,
.pipeline-card,
.pricing-card {
  font-size: 1.12rem !important;
}

.story-block,
.content-band,
.pricing,
.final-cta {
  margin-top: 0 !important;
}

.story-block::before,
.content-band::before,
.pricing::before,
.final-cta::before {
  inset: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

@media (max-width: 980px) {
  .hero-title {
    font-size: clamp(4.7rem, 11vw, 8.6rem) !important;
  }

  .section-title {
    font-size: clamp(2.8rem, 7vw, 5.2rem) !important;
  }

  .section-line {
    font-size: clamp(1.7rem, 4.6vw, 3.2rem) !important;
  }

  .band-title,
  .final-title {
    font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
  }
}

@media (max-width: 720px) {
  .hero-title {
    font-size: clamp(3.8rem, 14vw, 6.2rem) !important;
  }

  .section-title,
  .section-line,
  .band-title,
  .final-title {
    white-space: normal !important;
  }

  .section-line {
    display: block;
    width: 100%;
    text-align: right !important;
  }
}

.hero {
  background: linear-gradient(241deg, #001f29 0%, #000000 100%);
}



/* Restore original canvas interaction model and hard-fix dark background */
html,
body {
  background: #000000 !important;
}

.page-main {
  background: transparent !important;
}

.hero {
  pointer-events: none;
  background: linear-gradient(241deg, #001f29 0%, #000000 100%) !important;
}

.hero-shell {
  pointer-events: none;
}

.hero-copy,
.hero-copy * {
  pointer-events: auto;
}

.site-header,
.site-header *,
.control-panel,
.control-panel *,
.panel-open,
.panel-open * {
  pointer-events: auto;
}

/* Final wrapper removal: no main overlay above the canvas */
.page-main {
  display: contents !important;
  position: static !important;
  z-index: auto !important;
  background: transparent !important;
  pointer-events: none !important;
}

.page-main > * {
  pointer-events: auto;
}

section,
footer {
  position: relative;
}

.hero {
  z-index: 1;
}

.story-block,
.content-band,
.pricing,
.final-cta,
.site-footer {
  z-index: 2;
}

/* Final scene/background fix: canvas stays transparent, scene carries the dark backdrop */
.scene-stage,
.scene-shell {
  background: linear-gradient(241deg, #001f29 0%, #000000 100%) !important;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent !important;
}

.hero,
.hero-shell,
.hero-copy {
  background: transparent !important;
}

.site-header {
  z-index: 40;
}

.scene-stage {
  z-index: 0;
}

.hero {
  z-index: 1;
}

.story-block,
.content-band,
.pricing,
.final-cta,
.site-footer {
  z-index: 2;
}

/* Absolute last override: hero never paints over the scene */
.hero {
  background: transparent !important;
}

/* Hero copy must never block canvas interaction */
.hero-copy,
.hero-copy *,
.hero-title,
.hero-title * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Farabee font system */
@font-face {
  font-family: "Farabee";
  src: url("./assets/fonts/Farabee/Farabee Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Farabee";
  src: url("./assets/fonts/Farabee/Farabee Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Farabee";
  src: url("./assets/fonts/Farabee/Farabee Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Farabee Straight";
  src: url("./assets/fonts/Farabee/Farabee Straight Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Farabee Straight";
  src: url("./assets/fonts/Farabee/Farabee Straight Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Farabee Straight";
  src: url("./assets/fonts/Farabee/Farabee Straight Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Farabee", sans-serif;
  --font-display: "Farabee Straight", "Farabee", sans-serif;
}

body,
button,
a,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

.hero-title,
.section-title,
.section-line,
.band-title,
.final-title,
.nav,
.brand-name,
.loader-meta,
.loader-label {
  font-family: var(--font-display) !important;
}

.hero-title {
  font-size: clamp(7.25rem, 17.2vw, 20rem) !important;
  line-height: 0.74 !important;
  letter-spacing: -0.055em !important;
}

.hero-title-main {
  font-size: 1em !important;
}

.hero-title-sub {
  font-size: 0.72em !important;
}

.card-stage,
.card-stage-center,
.card-stage-left,
.card-stage-chart {
  justify-content: center !important;
}

.product-card {
  margin-left: auto;
  margin-right: auto;
}

.alert-card {
  width: min(760px, 100%) !important;
  padding: 26px 28px 24px !important;
}

.explanation-card {
  width: min(540px, 100%) !important;
  padding: 24px 24px 22px !important;
}

.chart-card {
  width: min(980px, 100%) !important;
  padding: 20px !important;
}

[data-reveal][data-write-ready] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.write-line {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}

.hero-title .write-line {
  display: block;
}

.write-char,
.write-space {
  display: inline-block;
  white-space: pre;
  vertical-align: baseline;
}

.write-space {
  width: 0.32em;
}

.write-char {
  opacity: 0;
  transform: translateY(0.16em) scale(0.94);
  filter: blur(6px);
  will-change: transform, opacity, filter;
  transition:
    opacity 18ms linear var(--char-delay),
    transform 460ms cubic-bezier(0.16, 0.84, 0.24, 1) var(--char-delay),
    filter 460ms ease var(--char-delay);
}

[data-write-ready].is-visible .write-char {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (max-width: 980px) {
  .hero-title {
    font-size: clamp(5.4rem, 15vw, 11rem) !important;
  }

  .alert-card {
    width: min(680px, 100%) !important;
  }

  .explanation-card {
    width: min(500px, 100%) !important;
  }

  .chart-card {
    width: min(840px, 100%) !important;
  }
}

@media (max-width: 720px) {
  .hero-title {
    font-size: clamp(4.2rem, 16vw, 7rem) !important;
  }

  .write-line {
    white-space: normal;
  }

  .hero-title .write-line {
    white-space: nowrap;
  }

  .alert-card,
  .explanation-card,
  .chart-card {
    width: 100% !important;
  }
}

/* Geotalism final font override */
@font-face {
  font-family: "Geotalism";
  src: url("./assets/fonts/Geotalism/Geotalism.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geotalism";
  src: url("./assets/fonts/Geotalism/Geotalism.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geotalism";
  src: url("./assets/fonts/Geotalism/Geotalism.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Geotalism", sans-serif;
  --font-display: "Geotalism", sans-serif;
}

body,
button,
a,
input,
textarea,
select,
.hero-title,
.section-title,
.section-line,
.band-title,
.final-title,
.nav,
.brand-name,
.loader-meta,
.loader-label,
.product-card,
.capability-card,
.pipeline-card,
.pricing-card {
  font-family: "Geotalism", sans-serif !important;
}

/* Geotalism size rollback: back to the scale before the last enlargement */
.hero-title {
  font-size: clamp(5.8rem, 12.2vw, 14.5rem) !important;
  line-height: 0.78 !important;
  letter-spacing: -0.05em !important;
}

.hero-title-sub {
  font-size: 0.66em !important;
}

.section-title {
  font-size: clamp(3.5rem, 8.4vw, 7.8rem) !important;
}

.section-line {
  font-size: clamp(2.15rem, 5.4vw, 4.7rem) !important;
}

.band-title,
.final-title {
  font-size: clamp(3.3rem, 7vw, 6.5rem) !important;
}

@media (max-width: 980px) {
  .hero-title {
    font-size: clamp(4.7rem, 11vw, 8.6rem) !important;
  }

  .section-title {
    font-size: clamp(2.8rem, 7vw, 5.2rem) !important;
  }

  .section-line {
    font-size: clamp(1.7rem, 4.6vw, 3.2rem) !important;
  }

  .band-title,
  .final-title {
    font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
  }
}

@media (max-width: 720px) {
  .hero-title {
    font-size: clamp(3.8rem, 14vw, 6.2rem) !important;
  }

  .section-title {
    font-size: clamp(1.8rem, 6vw, 3rem) !important;
  }

  .section-line {
    font-size: clamp(1.2rem, 4.6vw, 2rem) !important;
  }

  .band-title,
  .final-title {
    font-size: clamp(1.8rem, 6vw, 3rem) !important;
  }
}

/* Absolute last hero scale rollback */
.hero-title {
  font-size: clamp(2.9rem, 6.1vw, 7.2rem) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.045em !important;
}

.hero-title-sub {
  font-size: 0.66em !important;
}

@media (max-width: 980px) {
  .hero-title {
    font-size: clamp(2.5rem, 5.4vw, 4.8rem) !important;
  }
}

@media (max-width: 720px) {
  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3.6rem) !important;
  }
}

/* Brand line fix: never break Quantir Intelligence by letters */
.footer-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
}

.footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  width: auto !important;
}

.brand-name {
  display: inline-block !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1 !important;
}

.site-footer p {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
}

@media (max-width: 720px) {
  .footer-wrap {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .site-footer p {
    width: 100%;
    text-align: left;
  }
}

/* OpenLukyanov final font override */
@font-face {
  font-family: "OpenLukyanov";
  src: url("./assets/fonts/OpenLukyanov/OpenLukyanov.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenLukyanov";
  src: url("./assets/fonts/OpenLukyanov/OpenLukyanov.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenLukyanov";
  src: url("./assets/fonts/OpenLukyanov/OpenLukyanov.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "OpenLukyanov", sans-serif;
  --font-display: "OpenLukyanov", sans-serif;
}

body,
button,
a,
input,
textarea,
select,
.hero-title,
.section-title,
.section-line,
.band-title,
.final-title,
.nav,
.brand-name,
.loader-meta,
.loader-label,
.product-card,
.capability-card,
.pipeline-card,
.pricing-card {
  font-family: "OpenLukyanov", sans-serif !important;
}

/* Final hero canvas/title geometry */
.hero {
  min-height: 100svh !important;
  padding-top: 0 !important;
}

.hero-shell {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 100svh !important;
  padding-top: clamp(76px, 10vh, 118px) !important;
}

.hero-copy {
  width: min(42vw, 720px) !important;
  max-width: none !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

.hero-title {
  width: auto !important;
  max-width: none !important;
  font-size: clamp(4.1rem, 8.6vw, 9.6rem) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.035em !important;
}

.hero-title-main,
.hero-title-sub,
.hero-title .write-line {
  white-space: nowrap !important;
}

.hero-title-sub {
  font-size: 0.68em !important;
}

.scene-stage,
.scene-shell,
#scene {
  inset: 0 !important;
}

#scene {
  width: 100vw !important;
  height: 100svh !important;
}

@media (max-width: 980px) {
  .hero-shell {
    padding-top: clamp(72px, 9vh, 96px) !important;
  }

  .hero-copy {
    width: min(54vw, 560px) !important;
  }

  .hero-title {
    font-size: clamp(3.1rem, 7vw, 6rem) !important;
  }
}

@media (max-width: 720px) {
  .hero-shell {
    padding-top: clamp(66px, 10vh, 86px) !important;
    min-height: 92svh !important;
  }

  .hero-copy {
    width: 100% !important;
  }

  .hero-title {
    font-size: clamp(2.7rem, 10.5vw, 4.2rem) !important;
    line-height: 0.9 !important;
  }
}

/* Absolute hero horizontal title fix */
.hero-copy {
  width: auto !important;
  max-width: none !important;
  min-width: max-content !important;
}

.hero-title,
.hero-title-main,
.hero-title-sub,
.hero-title .write-line {
  display: block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  inline-size: max-content !important;
  max-inline-size: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.hero-title .write-char,
.hero-title .write-space {
  display: inline-block !important;
}

@media (max-width: 720px) {
  .hero-copy {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero-title,
  .hero-title-main,
  .hero-title-sub,
  .hero-title .write-line {
    width: auto !important;
    min-width: 0 !important;
    inline-size: auto !important;
  }
}

/* Absolute last hero title scale boost x1.5 */
.hero-title {
  font-size: clamp(6.15rem, 12.9vw, 14.4rem) !important;
  line-height: 0.86 !important;
}

@media (max-width: 980px) {
  .hero-title {
    font-size: clamp(4.65rem, 10.5vw, 9rem) !important;
  }
}

@media (max-width: 720px) {
  .hero-title {
    font-size: clamp(4.05rem, 15.75vw, 6.3rem) !important;
  }
}

/* Final font rollback: return to the original standard stack */
:root {
  --font-body: "Archivo", sans-serif;
  --font-display: "Satoshi", sans-serif;
}

body,
button,
a,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

.hero-title,
.section-title,
.section-line,
.band-title,
.final-title,
.nav,
.brand-name,
.loader-meta,
.loader-label,
.product-card,
.capability-card,
.pipeline-card,
.pricing-card {
  font-family: var(--font-display) !important;
}

/* Slightly enlarge the first hero word only */
.hero-title-main {
  font-size: 1.08em !important;
}

/* Center loader block on screen */
.loader {
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
}

.loader-inner {
  margin: 0 auto !important;
}

/* App-derived AI explanation block */
.story-shell-risk {
  width: 100%;
}

.card-stage-risk {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  min-height: 442px;
  margin-top: 70px !important;
}

.app-risk-card {
  position: relative;
  width: min(710px, 100%);
  min-height: 442px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(184, 210, 255, 0.1);
  background:
    radial-gradient(circle at 10% 16%, rgba(98, 215, 255, 0.02), transparent 40%),
    linear-gradient(180deg, rgba(8, 10, 14, 0.992), rgba(5, 7, 10, 0.996));
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.48);
  color: #f2f6ff;
}

.app-risk-card::before {
  display: none;
}

.app-risk-card-title {
  margin: 0;
  color: #c2cbe4;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.app-risk-card-copy {
  margin: 16px 0 0;
  color: #c2cbe4;
  font-size: 0.98rem;
  line-height: 1.42;
}

.app-risk-card-copy strong {
  color: #f2f6ff;
  font-weight: 700;
}

.app-risk-card-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(184, 210, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #8f9abc;
  font-size: 0.82rem;
}

.app-risk-card-copy-secondary {
  margin-top: 16px;
}

.app-risk-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.app-risk-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(184, 210, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: #c2cbe4;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .card-stage-risk {
    min-height: auto;
  }

  .app-risk-card {
    width: min(100%, 710px);
  }
}

@media (max-width: 720px) {
  .card-stage-risk {
    justify-content: flex-start;
    margin-top: 40px !important;
  }

  .app-risk-card {
    min-height: auto;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
  }

  .app-risk-card-copy {
    font-size: 0.9rem;
  }

  .app-risk-chip-row span {
    white-space: normal;
  }
}

/* Scroll stage integration pass: fullscreen stages, no glass panels */
#hero,
.story-block {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

#hero > .shell,
.story-block > .shell {
  width: 100%;
}

.story-block,
.content-band,
.pricing,
.final-cta,
.card-stage,
.card-stage-center,
.card-stage-left,
.card-stage-chart,
.card-stage-risk {
  background: transparent !important;
}

.story-block::before,
.content-band::before,
.pricing::before,
.final-cta::before,
.story-shell::before,
.band-shell::before,
.pricing-shell::before,
.final-cta-shell::before {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.product-card,
.capability-card,
.pipeline-card,
.pricing-card,
.app-risk-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.product-card::before,
.capability-card::before,
.pipeline-card::before,
.pricing-card::before,
.app-risk-card::before {
  display: none !important;
  content: none !important;
}

/* Stage snapping pages, video stage, left pricing */
.hero,
.story-block,
.media-stage,
.pricing {
  min-height: 100svh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}

.media-stage-shell,
.pricing-shell {
  width: 100%;
}

.media-stage-shell {
  display: flex;
  align-items: center;
}

.video-stage-frame {
  position: relative;
  width: 100%;
  min-height: 78svh;
  overflow: hidden;
  background: #02070d;
}

.youtube-stage-embed {
  display: block;
  width: 100%;
  height: 78svh;
  border: 0;
  background: #02070d;
}

.video-stage-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 5vw;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(2, 7, 13, 0.78)),
    radial-gradient(circle at 68% 24%, rgba(0, 198, 255, 0.18), transparent 30%);
  color: #eef3ff;
  pointer-events: none;
}

.video-stage-label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(208, 225, 255, 0.82);
}

.video-stage-placeholder p {
  max-width: 36rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(221, 231, 248, 0.88);
}

.pricing-shell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.pricing-grid {
  width: 100%;
  justify-content: flex-start;
}

.pricing-contact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.pricing-contact-copy {
  margin: 0;
  max-width: 40rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(225, 233, 247, 0.9);
}

@media (max-width: 980px) {
  .hero,
  .story-block,
  .media-stage,
  .pricing {
    align-items: flex-start;
  }

  .video-stage-frame,
  .youtube-stage-embed {
    min-height: 64svh;
    height: 64svh;
  }
}

/* Final stage snap and layout overrides */
html,
body {
  scroll-behavior: auto !important;
}

body {
  scroll-snap-type: y proximity;
}

[data-scroll-stage-page] {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 0;
}

.media-stage {
  min-height: 100svh !important;
  padding: 0 !important;
}

.media-stage-shell.shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.video-stage-frame {
  width: 100vw !important;
  min-height: 100svh !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #02070d;
}

.youtube-stage-embed {
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
}

.video-stage-frame.is-playing .video-stage-placeholder {
  opacity: 0;
  visibility: hidden;
}

.pricing-shell {
  align-items: flex-start !important;
  text-align: left !important;
}

.pricing-shell .band-head {
  max-width: 980px !important;
  text-align: left !important;
}

.pricing-grid {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.pricing-contact {
  justify-content: flex-start !important;
}

@media (max-width: 980px) {
  body {
    scroll-snap-type: y proximity;
  }

  .media-stage-shell.shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .video-stage-frame,
  .youtube-stage-embed {
    min-height: 100svh !important;
    height: 100svh !important;
  }
}

/* Final stage alignment pass */
.story-block-explanation .card-stage-risk {
  justify-content: flex-end !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.story-block-explanation .app-risk-card {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: min(710px, 100%) !important;
}

.story-block-explanation .section-line {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}

.story-block-scenarios .card-stage-chart {
  justify-content: flex-start !important;
  width: 100% !important;
}

.story-block-scenarios .chart-card {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: min(1120px, 100%) !important;
  padding: 20px 20px 22px !important;
}

.story-block-scenarios .chart-panel {
  min-height: 380px !important;
}

.pricing-shell {
  align-items: flex-start !important;
  text-align: left !important;
}

.pricing-shell > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.pricing-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  width: min(1120px, 100%) !important;
  margin-right: auto !important;
}

.pricing-card {
  flex: 0 0 min(340px, 100%) !important;
  width: min(340px, 100%) !important;
  max-width: 340px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.pricing-contact {
  width: min(960px, 100%) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.pricing-contact-copy {
  text-align: left !important;
}

@media (max-width: 980px) {
  .story-block-explanation .app-risk-card,
  .story-block-scenarios .chart-card,
  .pricing-grid,
  .pricing-card,
  .pricing-contact {
    width: 100% !important;
    max-width: none !important;
  }

  .pricing-card {
    flex: 1 1 100% !important;
  }

  .story-block-scenarios .chart-panel {
    min-height: 320px !important;
  }
}

/* Animation background ownership pass */
html,
body,
#hero,
.hero,
.hero-shell,
.hero-copy,
.scene-shell,
#scene {
  background: transparent !important;
}

.scene-stage {
  background: transparent !important;
}

/* March 15 layout refinement pass */
.site-header .brand,
.site-header .button-outline {
  display: none !important;
}

.site-header {
  top: 18px !important;
}

.nav-wrap {
  justify-content: center !important;
  width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav {
  display: flex !important;
  width: auto !important;
  gap: clamp(52px, 7.6vw, 136px) !important;
}

.nav a {
  font-family: "Verdanto", var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(0.97rem, 1.38vw, 1.46rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  color: rgba(238, 243, 255, 0.88) !important;
}

.nav a::after {
  bottom: -10px !important;
  height: 2px !important;
}

.hero-shell.shell {
  position: relative !important;
  padding-left: 3.5vw !important;
  padding-right: 3.5vw !important;
  padding-top: clamp(80px, 10vh, 118px) !important;
  min-height: 100svh !important;
}

.hero-copy {
  width: min(47vw, 880px) !important;
  max-width: none !important;
  min-width: 0 !important;
}

.hero-title {
  font-size: clamp(5.8rem, 11.7vw, 13.6rem) !important;
  line-height: 0.84 !important;
}

.hero-lead {
  display: block !important;
  max-width: 73rem !important;
  margin-top: clamp(22px, 2.6vh, 34px) !important;
  color: rgba(160, 160, 160, 0.9) !important;
  font-size: clamp(2rem, 2.1vw, 2.14rem) !important;
  line-height: 1.58 !important;
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.hero-scroll-cue-line {
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.96));
  animation: scrollCueLine 1.8s ease-in-out infinite;
}

.hero-scroll-cue-head {
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.92);
  transform: rotate(45deg);
  animation: scrollCueHead 1.8s ease-in-out infinite;
}

@keyframes scrollCueLine {
  0%,
  100% {
    opacity: 0.42;
    transform: scaleY(0.84);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes scrollCueHead {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(-4px) rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: translateY(0) rotate(45deg);
  }
}

.story-block-alerts .story-shell,
.story-block-explanation .story-shell,
.story-block-scenarios .story-shell {
  position: relative !important;
  min-height: 100svh !important;
  width: 100% !important;
  padding: 10vh 10vw !important;
}

.story-block-alerts .section-title,
.story-block-explanation .section-title,
.story-block-scenarios .section-title {
  position: absolute !important;
  top: 10%;
  left: 10%;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  text-align: left !important;
  font-size: clamp(3.6rem, 8.2vw, 7.9rem) !important;
  z-index: 4;
}

.story-block-alerts .section-line,
.story-block-explanation .section-line,
.story-block-scenarios .section-line {
  position: absolute !important;
  right: 10%;
  bottom: 10%;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  text-align: right !important;
  font-size: clamp(2.2rem, 4.8vw, 4.5rem) !important;
  z-index: 4;
}

.story-block-alerts .card-stage-center,
.story-block-explanation .card-stage-risk,
.story-block-scenarios .card-stage-chart {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding-left: 10vw !important;
  padding-right: 10vw !important;
  display: flex !important;
  align-items: center !important;
}

.story-block-alerts .card-stage-center {
  justify-content: center !important;
}

.story-block-explanation .card-stage-risk {
  justify-content: flex-end !important;
}

.story-block-scenarios .card-stage-chart {
  justify-content: flex-start !important;
}

.alert-card-expanded {
  width: min(882px, 70vw) !important;
  min-height: 414px !important;
  padding: 26px 27px !important;
  border: 1px solid rgba(164, 184, 222, 0.18) !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(8, 11, 19, 0.72), rgba(6, 9, 15, 0.54)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.alert-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
  gap: 24px;
}

.alert-headline {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #f3f7ff;
}

.alert-card-expanded .product-copy {
  margin-top: 18px !important;
  font-size: 1.04rem !important;
  line-height: 1.62 !important;
}

.alert-flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.alert-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(184, 210, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #d7e2f6;
  font-size: 0.82rem;
  white-space: nowrap;
}

.alert-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.alert-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(166, 190, 233, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.alert-stat span {
  color: rgba(194, 203, 228, 0.72);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.alert-stat strong {
  color: #f3f7ff;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: -0.03em;
}

.alert-card-expanded .product-footer {
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.story-block-explanation .app-risk-card {
  width: min(860px, 72vw) !important;
  min-height: 540px !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(164, 184, 222, 0.14) !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.82), rgba(5, 8, 13, 0.66)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.story-block-explanation .app-risk-card-title {
  font-size: 0.92rem !important;
}

.story-block-explanation .app-risk-card-copy {
  font-size: 1.03rem !important;
  line-height: 1.55 !important;
}

.story-block-explanation .app-risk-card-copy-secondary {
  margin-top: 20px !important;
}

.story-block-explanation .app-risk-chip-row {
  margin-top: 20px !important;
}

.scenario-graph-card {
  width: min(1520px, 90vw) !important;
  min-height: 880px !important;
  padding: 28px !important;
  border: 1px solid rgba(136, 149, 184, 0.16) !important;
  border-radius: 34px !important;
  background: linear-gradient(180deg, rgba(5, 8, 14, 0.94), rgba(4, 7, 12, 0.88)) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.scenario-graph-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.scenario-time-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
}

.scenario-time-tabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(125, 139, 174, 0.24);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(226, 232, 249, 0.88);
  font-family: var(--font-display);
  font-size: 1.02rem;
}

.scenario-time-tabs .is-active {
  background: linear-gradient(180deg, rgba(108, 127, 163, 0.32), rgba(53, 67, 96, 0.36));
  box-shadow: 0 0 0 1px rgba(197, 211, 246, 0.12) inset;
}

.scenario-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 0 22px;
  border-radius: 22px;
  border: 1px solid rgba(125, 139, 174, 0.24);
  background: rgba(12, 15, 23, 0.78);
}

.scenario-mode-label {
  color: rgba(194, 203, 228, 0.74);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
}

.scenario-mode-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #44d16a;
  box-shadow: 0 0 0 6px rgba(68, 209, 106, 0.12), 0 0 18px rgba(68, 209, 106, 0.32);
}

.scenario-mode-value {
  color: #f0f4ff;
  font-size: 1.02rem;
}

.scenario-plot {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
}

.scenario-plot + .scenario-plot {
  margin-top: 24px;
}

.scenario-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 0 6px;
  color: rgba(177, 189, 216, 0.92);
  font-size: 0.92rem;
}

.scenario-plot-area {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(6, 10, 17, 0.82), rgba(4, 8, 14, 0.64));
}

.scenario-plot-risk .scenario-plot-area {
  min-height: 360px;
}

.scenario-plot-price .scenario-plot-area {
  min-height: 520px;
}

.scenario-grid-lines {
  position: absolute;
  inset: 18px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scenario-grid-lines span {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.scenario-bars {
  position: absolute;
  inset: 28px 18px 18px 18px;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.scenario-bars span {
  height: var(--h);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.scenario-line-overlay {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 102px;
  width: calc(100% - 36px);
  height: 120px;
}

.scenario-line-overlay polyline {
  fill: none;
  stroke: #7e6cff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scenario-line-overlay circle {
  fill: #8a79ff;
  stroke: rgba(138, 121, 255, 0.28);
  stroke-width: 9;
}

.scenario-floating-card {
  position: absolute;
  right: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(330px, 30vw);
  padding: 20px 22px;
  border-radius: 24px;
  border: 1px solid rgba(122, 136, 170, 0.22);
  background: rgba(8, 11, 18, 0.86);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
}

.scenario-floating-card-top {
  top: 28px;
}

.scenario-floating-card-bottom {
  bottom: 28px;
}

.scenario-floating-card p,
.scenario-floating-card span {
  margin: 0;
  color: rgba(218, 226, 246, 0.84);
  font-size: 0.92rem;
  line-height: 1.35;
}

.scenario-floating-card strong {
  color: #f6f9ff;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.scenario-floating-card-bottom strong {
  color: #c9ffd8;
}

.scenario-candles {
  position: absolute;
  inset: 18px 18px 24px 18px;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.scenario-candle {
  position: relative;
  height: 100%;
}

.scenario-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--wick-bottom);
  width: 2px;
  height: var(--wick-height);
  border-radius: 999px;
  background: rgba(240, 244, 255, 0.88);
}

.scenario-candle::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--body-bottom);
  width: min(72%, 28px);
  min-width: 12px;
  height: var(--body-height);
  border-radius: 4px;
}

.scenario-candle.is-up::after {
  background: linear-gradient(180deg, #8cec94, #35a85d);
  box-shadow: 0 0 20px rgba(76, 203, 110, 0.16);
}

.scenario-candle.is-down::after {
  background: linear-gradient(180deg, #ff8495, #b92a49);
  box-shadow: 0 0 20px rgba(199, 52, 84, 0.14);
}

.scenario-candle.is-highlight::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(189, 214, 255, 0.68));
  box-shadow: 0 0 28px rgba(198, 219, 255, 0.32);
}

.pricing-card {
  background: linear-gradient(180deg, rgba(11, 15, 24, 0.48), rgba(7, 10, 16, 0.34)) !important;
  border: 1px solid rgba(186, 205, 240, 0.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

.pricing-card::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%) !important;
}

.pricing-backtop {
  margin-top: 36px;
}

.back-top-button {
  min-width: 180px;
}

@media (max-width: 980px) {
  .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 36px !important;
  }

  .nav a {
  font-family: "Verdanto", var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(0.97rem, 1.38vw, 1.46rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  color: rgba(238, 243, 255, 0.88) !important;
}

  .hero-shell.shell {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }

  .hero-copy {
    width: min(100%, 34rem) !important;
  }

  .hero-title {
    font-size: clamp(3.8rem, 15vw, 7.2rem) !important;
  }

  .hero-lead {
    max-width: 100% !important;
  }

  .hero-scroll-cue {
    bottom: 3.2vh;
  }

  .story-block-alerts .story-shell,
  .story-block-explanation .story-shell,
  .story-block-scenarios .story-shell {
    min-height: auto !important;
    padding: 18vh 5vw 16vh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
  }

  .story-block-alerts .section-title,
  .story-block-explanation .section-title,
  .story-block-scenarios .section-title,
  .story-block-alerts .section-line,
  .story-block-explanation .section-line,
  .story-block-scenarios .section-line,
  .story-block-alerts .card-stage-center,
  .story-block-explanation .card-stage-risk,
  .story-block-scenarios .card-stage-chart {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    padding: 0 !important;
    transform: none !important;
    width: 100% !important;
  }

  .story-block-alerts .section-line,
  .story-block-explanation .section-line,
  .story-block-scenarios .section-line {
    text-align: left !important;
  }

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

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

  .story-block-explanation .app-risk-card,
  .scenario-graph-card {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
  }

  .scenario-graph-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .scenario-time-tabs {
    flex-wrap: wrap;
  }

  .scenario-plot {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .scenario-plot-risk .scenario-plot-area {
    min-height: 280px;
  }

  .scenario-plot-price .scenario-plot-area {
    min-height: 360px;
  }

  .scenario-floating-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: 18px 0 0;
  }

  .pricing-card {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }
}



/* March 15 snap/footer pass */
html,
body {
  scroll-snap-type: y mandatory !important;
}

.story-block[data-scroll-stage-page],
.media-stage[data-scroll-stage-page],
.pricing[data-scroll-stage-page] {
  height: 100svh !important;
  min-height: 100svh !important;
  padding: 0 !important;
}

.story-block-alerts .story-shell,
.story-block-explanation .story-shell,
.story-block-scenarios .story-shell {
  height: 100svh !important;
}

.hero-scroll-cue {
  bottom: 5vh !important;
}

.site-footer {
  background: #000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 !important;
}

.site-footer .footer-wrap {
  min-height: 46px;
}

.footer-top {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: rgba(238, 243, 255, 0.86);
  text-decoration: none;
}

.footer-top:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
}


/* March 16 scenarios + pricing footer integration */
.story-block-scenarios .scenario-graph-card {
  width: min(1360px, 76vw) !important;
  min-height: 0 !important;
  padding: 24px !important;
}

.story-block-scenarios .scenario-plot-risk .scenario-plot-area {
  min-height: 240px !important;
}

.story-block-scenarios .scenario-plot-price .scenario-plot-area {
  min-height: 320px !important;
}

.story-block-scenarios .scenario-line-row {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.story-block-scenarios .scenario-line-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 999px;
  background: rgba(126, 108, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(126, 108, 255, 0.18), 0 18px 44px rgba(126, 108, 255, 0.12);
}

.story-block-scenarios .scenario-line-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8a79ff;
  box-shadow: 0 0 0 9px rgba(138, 121, 255, 0.22);
  justify-self: center;
  position: relative;
  z-index: 1;
}

.pricing[data-scroll-stage-page] {
  position: relative !important;
}

.pricing[data-scroll-stage-page] .pricing-shell {
  height: 100% !important;
  padding-bottom: 96px !important;
}

.pricing[data-scroll-stage-page] .site-footer {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (max-width: 980px) {
  .story-block-scenarios .scenario-graph-card {
    width: 100% !important;
    max-width: none !important;
  }

  .story-block-scenarios .scenario-plot-risk .scenario-plot-area {
    min-height: 280px !important;
  }

  .story-block-scenarios .scenario-plot-price .scenario-plot-area {
    min-height: 360px !important;
  }
}

/* March 16 scroll snap sanity: let JS settle decide, avoid browser mandatory fights */
html,
body {
  scroll-snap-type: y proximity !important;
}

/* March 16: disable CSS scroll snap (JS handles threshold snap only) */
html,
body {
  scroll-snap-type: none !important;
}

.panel-open {
  display: none !important;
}


.site-header .nav a {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  position: relative !important;
}

.site-header .nav a::after {
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  bottom: -10px !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
}

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

/* Final dark background restore after transparency ownership pass */
html,
body {
  background: #00040c !important;
}

#hero,
.hero,
.hero-shell,
.hero-copy {
  background: transparent !important;
}

.scene-shell,
#scene {
  background: transparent !important;
}


/* Final footer alignment pass */
.site-footer {
  display: flex !important;
  align-items: center !important;
}

.site-footer .footer-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.site-footer .footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  min-height: 56px !important;
}

.site-footer .footer-brand .logo-mark,
.site-footer .footer-brand .logo-small {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

.site-footer .footer-brand .brand-name {
  font-size: 1rem !important;
  line-height: 1 !important;
  letter-spacing: 0.015em !important;
}

.site-footer .footer-top {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  min-height: 56px !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Final header hover underline tuning */
.site-header .nav a {
  padding-bottom: 8px !important;
}

.site-header .nav a::after {
  left: 0 !important;
  width: 100% !important;
  right: auto !important;
  bottom: -2px !important;
  height: 1px !important;
}

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


/* Final scene visibility lock: keep landing layers transparent above the animation */
.scene-stage {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: auto !important;
}

.scene-shell {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  background: transparent !important;
}

#scene,
.scene-stage canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  z-index: 0 !important;
}

.page-main,
main,
#hero,
.hero,
.hero-shell,
.hero-copy,
.story-block,
.story-shell,
.media-stage,
.media-stage-shell,
.pricing,
.pricing-shell,
section[data-section-name],
section[data-scroll-stage-page] {
  background: transparent !important;
}

.loader[aria-hidden="true"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Single JS snap controller: disable browser scroll-snap and implicit smooth scrolling */
html,
body {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  overscroll-behavior-y: none;
}

.hero,
.story-block,
.media-stage,
.pricing,
[data-scroll-stage-page] {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

body.is-snapping {
  overscroll-behavior: none;
}


.snap-input-shield {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: transparent;
}

body.is-snapping .snap-input-shield {
  pointer-events: auto;
}

/* March 18 final layout stabilization */
.site-header {
  top: 14px !important;
  left: 0;
  right: 0;
  z-index: 20 !important;
}

.nav-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: min(1400px, calc(100vw - 40px)) !important;
  min-height: 58px !important;
  margin: 0 auto !important;
  padding: 8px 18px !important;
}

.site-header .brand,
.site-header .button-outline {
  display: none !important;
}

.nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(22px, 3.2vw, 48px) !important;
  flex-wrap: wrap !important;
}

.site-header .nav a {
  padding-bottom: 4px !important;
  font-size: clamp(0.68rem, 0.82vw, 0.96rem) !important;
  letter-spacing: -0.018em !important;
}

.site-header .nav a::after {
  bottom: -1px !important;
}

.nav-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.nav-launch-button {
  min-height: 38px !important;
  padding: 0.56rem 1rem !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

body[data-section="hero"] .scene-shell {
  transform: translateX(12vw) scale(0.86) !important;
  transform-origin: center right !important;
}

body:not([data-section="hero"]) .scene-shell {
  transform: none !important;
}

.hero-shell.shell {
  padding-top: clamp(108px, 14vh, 152px) !important;
  padding-left: clamp(24px, 5vw, 72px) !important;
  padding-right: clamp(24px, 5vw, 72px) !important;
}

.hero-copy {
  position: relative !important;
  z-index: 2 !important;
  width: min(40rem, 52vw) !important;
  max-width: 40rem !important;
}

.hero-title {
  font-size: clamp(4.1rem, 8.8vw, 9.2rem) !important;
  line-height: 0.86 !important;
}

.hero-lead {
  max-width: 34rem !important;
  font-size: clamp(1rem, 2vw, 1.18rem) !important;
  line-height: 1.55 !important;
  color: rgba(223, 230, 241, 0.9) !important;
}

.story-block-alerts .story-shell,
.story-block-explanation .story-shell,
.story-block-scenarios .story-shell {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(24px, 4vh, 44px) !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(112px, 14vh, 148px) 6vw clamp(72px, 9vh, 104px) !important;
}

.story-block-alerts .section-title,
.story-block-explanation .section-title,
.story-block-scenarios .section-title,
.story-block-alerts .section-line,
.story-block-explanation .section-line,
.story-block-scenarios .section-line,
.story-block-alerts .card-stage-center,
.story-block-explanation .card-stage-risk,
.story-block-scenarios .card-stage-chart {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.story-block-alerts .section-title,
.story-block-explanation .section-title,
.story-block-scenarios .section-title {
  max-width: 10ch !important;
  font-size: clamp(2.8rem, 6.3vw, 6rem) !important;
  line-height: 0.9 !important;
}

.story-block-alerts .card-stage-center {
  justify-content: center !important;
}

.story-block-explanation .card-stage-risk {
  justify-content: flex-end !important;
}

.story-block-scenarios .card-stage-chart {
  justify-content: center !important;
}

.story-block-alerts .section-line,
.story-block-explanation .section-line,
.story-block-scenarios .section-line {
  max-width: 20ch !important;
  margin-top: 8px !important;
  font-size: clamp(1.8rem, 3.5vw, 3.8rem) !important;
}

.story-block-explanation .section-line {
  text-align: center !important;
  align-self: center !important;
}

.story-block-scenarios .section-line {
  text-align: right !important;
  align-self: flex-end !important;
  max-width: 15ch !important;
  font-size: clamp(1.45rem, 2.6vw, 2.75rem) !important;
}

.story-block-alerts .section-line {
  text-align: center !important;
  align-self: center !important;
}

.alert-card-expanded {
  width: min(860px, 100%) !important;
}

.story-block-explanation .app-risk-card {
  width: min(800px, 100%) !important;
  min-height: auto !important;
}

.scenario-graph-card {
  width: min(1280px, 100%) !important;
  min-height: auto !important;
}

.scenario-plot-risk .scenario-plot-area {
  min-height: 300px !important;
}

.scenario-plot-price .scenario-plot-area {
  min-height: 380px !important;
}

.scenario-floating-card {
  width: min(300px, 28vw) !important;
}

.pricing {
  padding-top: clamp(96px, 12vh, 132px) !important;
}

.pricing-shell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 28px !important;
  padding-bottom: 32px !important;
  text-align: center !important;
}

.pricing-shell > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

.pricing-grid {
  justify-content: center !important;
  width: min(1120px, 100%) !important;
}

.pricing-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: min(720px, 100%) !important;
  margin-top: clamp(7rem, 10vh, 9.5rem) !important;
  text-align: center !important;
}

.pricing-contact-copy {
  max-width: 40rem !important;
  text-align: center !important;
}

@media (max-width: 1100px) {
  body[data-section="hero"] .scene-shell {
    transform: translateX(16vw) scale(0.8) !important;
  }

  .hero-copy {
    width: min(34rem, 62vw) !important;
    max-width: 34rem !important;
  }

  .story-block-explanation .app-risk-card {
    width: min(720px, 100%) !important;
  }

  .scenario-graph-card {
    width: min(1120px, 100%) !important;
  }
}

@media (max-width: 820px) {
  .site-header {
    top: 10px !important;
  }

  .nav-wrap {
    gap: 10px !important;
    min-height: auto !important;
    padding: 6px 10px !important;
  }

  .nav {
    gap: 14px 18px !important;
  }

  .site-header .nav a {
    font-size: 0.74rem !important;
  }

  .nav-actions {
    width: 100% !important;
  }

  .nav-launch-button {
    min-height: 36px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.78rem !important;
  }

  body[data-section="hero"] .scene-shell {
    transform: translateX(22vw) translateY(5vh) scale(0.72) !important;
  }

  .hero-shell.shell {
    min-height: 100svh !important;
    padding-top: 172px !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: none !important;
    padding: 18px 18px 22px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(3, 6, 12, 0.84), rgba(3, 6, 12, 0.5) 70%, rgba(3, 6, 12, 0.08)) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16) !important;
  }

  .hero-title {
    font-size: clamp(3rem, 14vw, 5.5rem) !important;
  }

  .hero-lead {
    max-width: 100% !important;
    font-size: clamp(0.98rem, 4vw, 1.08rem) !important;
    line-height: 1.48 !important;
  }

  .hero-actions {
    width: 100% !important;
  }

  .hero-actions .button {
    flex: 1 1 100% !important;
  }

  .hero-strip {
    gap: 8px !important;
  }

  .story-block-alerts .story-shell,
  .story-block-explanation .story-shell,
  .story-block-scenarios .story-shell,
  .pricing-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .story-block-alerts .story-shell,
  .story-block-explanation .story-shell,
  .story-block-scenarios .story-shell {
    min-height: auto !important;
    padding-top: 140px !important;
    padding-bottom: 64px !important;
  }

  .story-block-alerts .section-title,
  .story-block-explanation .section-title,
  .story-block-scenarios .section-title {
    max-width: 100% !important;
    font-size: clamp(2.2rem, 11vw, 4rem) !important;
    text-align: center !important;
  }

  .story-block-alerts .section-line,
  .story-block-explanation .section-line,
  .story-block-scenarios .section-line {
    max-width: 100% !important;
    font-size: clamp(1.65rem, 8vw, 2.7rem) !important;
    text-align: center !important;
    align-self: center !important;
  }

  .story-block-scenarios .section-line {
    font-size: clamp(1.3rem, 6vw, 2rem) !important;
    max-width: 13ch !important;
  }

  .alert-card-expanded,
  .story-block-explanation .app-risk-card,
  .scenario-graph-card,
  .pricing-card,
  .pricing-contact {
    width: 100% !important;
    max-width: none !important;
  }

  .scenario-graph-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .scenario-time-tabs {
    gap: 8px !important;
    justify-content: center !important;
  }

  .scenario-time-tabs span {
    min-width: 58px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 0.86rem !important;
  }

  .scenario-mode-pill {
    min-height: 52px !important;
    justify-content: center !important;
  }

  .scenario-plot {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .scenario-axis {
    font-size: 0.78rem !important;
  }

  .scenario-plot-risk .scenario-plot-area {
    min-height: 220px !important;
  }

  .scenario-plot-price .scenario-plot-area {
    min-height: 280px !important;
  }

  .scenario-bars,
  .scenario-candles {
    gap: 8px !important;
  }

  .scenario-floating-card {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .pricing-grid {
    gap: 16px !important;
  }

  .pricing-contact {
    margin-top: 56px !important;
  }
}