[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(calc(var(--tilt-lift) * -3px));
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

[data-depth-scene] {
  --depth-x: 0;
  --depth-y: 0;
  position: relative;
  transform-style: preserve-3d;
}

.sc-hero-visual {
  position: relative;
  min-height: 470px;
  display: grid;
  align-items: center;
  perspective: 1200px;
}

.sc-hero-visual::before {
  content: '';
  position: absolute;
  inset: 9% 4% 5% 12%;
  border-radius: 44px;
  background:
    radial-gradient(
      circle at 28% 28%,
      color-mix(in srgb, var(--sc-ink) 7%, transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 72% 64%,
      color-mix(in srgb, var(--sc-surface-raised) 82%, transparent),
      transparent 42%
    );
  filter: blur(2px);
  transform:
    translate3d(
      calc(var(--depth-x) * 10px),
      calc(var(--depth-y) * 8px),
      -60px
    );
  transition: transform .16s ease-out;
}

.sc-depth-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--sc-border) 34%, transparent);
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  animation: sc-orbit-breathe 6.8s ease-in-out infinite alternate;
}

.sc-depth-orbit-a {
  width: 390px;
  height: 165px;
  right: -2%;
  top: 14%;
  transform:
    rotateX(66deg)
    rotateZ(-17deg)
    translate3d(
      calc(var(--depth-x) * 14px),
      calc(var(--depth-y) * 9px),
      -28px
    );
}

.sc-depth-orbit-b {
  width: 280px;
  height: 118px;
  left: 10%;
  bottom: 10%;
  transform:
    rotateX(70deg)
    rotateZ(21deg)
    translate3d(
      calc(var(--depth-x) * -10px),
      calc(var(--depth-y) * -7px),
      -46px
    );
}

.sc-depth-orbit i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc-ink);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sc-ink) 7%, transparent);
}

.sc-depth-orbit i:nth-child(1) { left: 12%; top: 28%; }
.sc-depth-orbit i:nth-child(2) { right: 18%; top: 18%; }
.sc-depth-orbit i:nth-child(3) { right: 34%; bottom: 10%; }

.sc-depth-chip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--sc-border) 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sc-glass-strong) 88%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--sc-shadow) 54%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
}

.sc-depth-chip span {
  color: var(--sc-tertiary);
  font: 560 8px/1.2 var(--sc-font-mono);
  letter-spacing: .08em;
}

.sc-depth-chip strong {
  font-size: 11px;
  font-weight: 600;
}

.sc-depth-chip-data {
  left: -1%;
  top: 19%;
  transform:
    translate3d(
      calc(var(--depth-x) * -18px),
      calc(var(--depth-y) * -12px),
      58px
    )
    rotateY(-5deg);
}

.sc-depth-chip-evidence {
  right: -4%;
  bottom: 18%;
  transform:
    translate3d(
      calc(var(--depth-x) * 20px),
      calc(var(--depth-y) * 13px),
      74px
    )
    rotateY(4deg);
}

.sc-hero-visual .sc-proof-board {
  position: relative;
  z-index: 3;
  transform-origin: center center;
}

.sc-capability-showcase {
  display: grid;
  gap: 18px;
  margin-top: 54px;
}

.sc-capability-card {
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
  gap: 34px;
  align-items: center;
  padding: clamp(26px, 3.4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--sc-border) 28%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--sc-glass-strong) 80%, transparent),
      color-mix(in srgb, var(--sc-glass) 56%, transparent)
    );
  box-shadow:
    0 26px 80px color-mix(in srgb, var(--sc-shadow) 46%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px) saturate(108%);
  -webkit-backdrop-filter: blur(20px) saturate(108%);
}

.sc-capability-card.reverse {
  grid-template-columns: minmax(420px, 1.28fr) minmax(280px, .72fr);
}

.sc-capability-card.reverse .sc-capability-copy {
  order: 2;
}

.sc-capability-card.reverse .sc-capability-visual {
  order: 1;
}

.sc-capability-copy {
  position: relative;
  z-index: 4;
  transform: translateZ(34px);
}

.sc-capability-copy h3 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.04;
  font-weight: 560;
  letter-spacing: -.04em;
}

.sc-capability-copy p {
  margin: 18px 0 0;
  color: var(--sc-muted);
  font-size: 14px;
  line-height: 1.68;
}

.sc-capability-copy a {
  display: inline-flex;
  margin-top: 22px;
  color: var(--sc-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.sc-capability-visual {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sc-border) 22%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 24% 22%,
      color-mix(in srgb, var(--sc-floating) 72%, transparent),
      transparent 34%
    ),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--sc-surface-raised) 58%, transparent),
      color-mix(in srgb, var(--sc-glass) 38%, transparent)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 24px 64px color-mix(in srgb, var(--sc-shadow) 32%, transparent);
  perspective: 900px;
  transform: translateZ(28px);
}

.sc-space-grid,
.sc-forecast-floor {
  position: absolute;
  inset: 12% 8% 8%;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--sc-border) 20%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sc-border) 20%, transparent) 1px,
      transparent 1px
    );
  background-size: 36px 36px;
  transform:
    rotateX(64deg)
    rotateZ(-9deg)
    translate3d(
      calc(var(--depth-x) * 8px),
      calc(var(--depth-y) * 6px),
      -20px
    );
  transform-origin: center 75%;
}

.sc-slice-plane,
.sc-evidence-plane,
.sc-holdout-plane {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--sc-border) 32%, transparent);
  background: color-mix(in srgb, var(--sc-floating) 26%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sc-slice-plane {
  width: 62%;
  height: 52%;
  left: 17%;
  top: 18%;
  transform:
    rotateX(67deg)
    rotateZ(15deg)
    translate3d(
      calc(var(--depth-x) * 13px),
      calc(var(--depth-y) * 9px),
      10px
    );
}

.sc-evidence-plane {
  width: 43%;
  height: 35%;
  right: 10%;
  bottom: 12%;
  border-radius: 10px;
  transform:
    rotateX(62deg)
    rotateZ(-12deg)
    translate3d(
      calc(var(--depth-x) * 20px),
      calc(var(--depth-y) * 12px),
      46px
    );
}

.sc-evidence-plane span,
.sc-holdout-plane span {
  position: absolute;
  right: 8px;
  top: 8px;
  color: var(--sc-tertiary);
  font: 520 8px/1.2 var(--sc-font-mono);
  letter-spacing: .06em;
}

.sc-data-point {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sc-ink);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc-ink) 6%, transparent);
  transform:
    translate3d(
      calc(var(--depth-x) * var(--dx, 8px)),
      calc(var(--depth-y) * var(--dy, 6px)),
      var(--z, 30px)
    );
  transition: transform .12s ease-out;
}

.sc-data-point.p1 { left: 18%; top: 62%; --z: 16px; --dx: -8px; --dy: 5px; }
.sc-data-point.p2 { left: 27%; top: 48%; --z: 42px; --dx: -14px; --dy: 8px; }
.sc-data-point.p3 { left: 35%; top: 67%; --z: 24px; --dx: -7px; --dy: 12px; }
.sc-data-point.p4 { left: 41%; top: 40%; --z: 60px; --dx: 8px; --dy: -7px; }
.sc-data-point.p5 { left: 47%; top: 56%; --z: 35px; --dx: 14px; --dy: 9px; }
.sc-data-point.p6 { left: 53%; top: 32%; --z: 72px; --dx: 18px; --dy: -10px; }
.sc-data-point.p7 { left: 60%; top: 51%; --z: 49px; --dx: 8px; --dy: 7px; }
.sc-data-point.p8 { left: 66%; top: 65%; --z: 20px; --dx: -10px; --dy: 13px; }
.sc-data-point.p9 { left: 72%; top: 38%; --z: 66px; --dx: 14px; --dy: -9px; }
.sc-data-point.p10 { left: 78%; top: 57%; --z: 36px; --dx: 17px; --dy: 8px; }
.sc-data-point.p11 { left: 31%; top: 28%; --z: 54px; --dx: -13px; --dy: -11px; }
.sc-data-point.p12 { left: 58%; top: 73%; --z: 18px; --dx: 7px; --dy: 14px; }

.sc-visual-label {
  position: absolute;
  z-index: 6;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--sc-border) 24%, transparent);
  border-radius: 999px;
  color: var(--sc-muted);
  background: color-mix(in srgb, var(--sc-glass-strong) 80%, transparent);
  font: 520 8px/1 var(--sc-font-mono);
  letter-spacing: .05em;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--sc-shadow) 28%, transparent);
}

.sc-visual-label.label-a {
  left: 7%;
  top: 8%;
  transform:
    translate3d(
      calc(var(--depth-x) * -10px),
      calc(var(--depth-y) * -8px),
      64px
    );
}

.sc-visual-label.label-b {
  right: 6%;
  bottom: 8%;
  transform:
    translate3d(
      calc(var(--depth-x) * 14px),
      calc(var(--depth-y) * 9px),
      82px
    );
}

.sc-mining-space,
.sc-prediction-space {
  min-height: 350px;
}

.sc-cluster {
  position: absolute;
  width: 128px;
  height: 104px;
  transform-style: preserve-3d;
}

.sc-cluster i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sc-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-ink) 5%, transparent);
}

.sc-cluster i:nth-child(1) { left: 16%; top: 52%; }
.sc-cluster i:nth-child(2) { left: 36%; top: 24%; }
.sc-cluster i:nth-child(3) { left: 58%; top: 42%; }
.sc-cluster i:nth-child(4) { left: 76%; top: 19%; }
.sc-cluster i:nth-child(5) { left: 67%; top: 72%; }

.sc-cluster-a {
  left: 13%;
  top: 36%;
  transform:
    translate3d(
      calc(var(--depth-x) * -15px),
      calc(var(--depth-y) * 10px),
      36px
    )
    rotateZ(-8deg);
}

.sc-cluster-b {
  left: 46%;
  top: 18%;
  transform:
    translate3d(
      calc(var(--depth-x) * 12px),
      calc(var(--depth-y) * -13px),
      68px
    )
    rotateZ(7deg);
}

.sc-cluster-c {
  right: 8%;
  bottom: 14%;
  transform:
    translate3d(
      calc(var(--depth-x) * 18px),
      calc(var(--depth-y) * 14px),
      25px
    )
    rotateZ(-3deg);
}

.sc-cluster-ring {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--sc-border) 32%, transparent);
  border-radius: 50%;
}

.sc-cluster-ring.ring-a {
  width: 180px;
  height: 98px;
  left: 8%;
  top: 31%;
  transform: rotateX(62deg) rotateZ(-10deg) translateZ(8px);
}

.sc-cluster-ring.ring-b {
  width: 170px;
  height: 92px;
  left: 42%;
  top: 15%;
  transform: rotateX(64deg) rotateZ(10deg) translateZ(30px);
}

.sc-anomaly-point {
  position: absolute;
  right: 18%;
  top: 22%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sc-danger);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--sc-danger) 13%, transparent),
    0 0 24px color-mix(in srgb, var(--sc-danger) 22%, transparent);
  transform:
    translate3d(
      calc(var(--depth-x) * 24px),
      calc(var(--depth-y) * -18px),
      92px
    );
  animation: sc-anomaly-breathe 2.8s ease-in-out infinite;
}

.sc-visual-label.label-c {
  left: 8%;
  bottom: 8%;
  transform:
    translate3d(
      calc(var(--depth-x) * -9px),
      calc(var(--depth-y) * 8px),
      72px
    );
}

.sc-visual-label.label-d {
  right: 8%;
  top: 8%;
  transform:
    translate3d(
      calc(var(--depth-x) * 15px),
      calc(var(--depth-y) * -12px),
      88px
    );
}

.sc-forecast-floor {
  inset: 20% 7% 3%;
  transform:
    rotateX(68deg)
    rotateZ(-6deg)
    translate3d(
      calc(var(--depth-x) * 7px),
      calc(var(--depth-y) * 5px),
      -26px
    );
}

.sc-holdout-plane {
  width: 2px;
  height: 70%;
  left: 60%;
  top: 14%;
  background: color-mix(in srgb, var(--sc-border) 34%, transparent);
  transform:
    translate3d(
      calc(var(--depth-x) * 10px),
      calc(var(--depth-y) * -4px),
      35px
    )
    rotateY(-4deg);
}

.sc-holdout-plane span {
  left: 9px;
  right: auto;
  top: 2px;
  writing-mode: vertical-rl;
}

.sc-forecast-chart {
  position: absolute;
  inset: 14% 6% 8%;
  width: 88%;
  height: 76%;
  overflow: visible;
  transform:
    translate3d(
      calc(var(--depth-x) * 13px),
      calc(var(--depth-y) * 8px),
      54px
    )
    rotateX(4deg)
    rotateY(calc(var(--depth-x) * 2deg));
  filter:
    drop-shadow(
      0 12px 18px color-mix(in srgb, var(--sc-shadow) 24%, transparent)
    );
}

.sc-forecast-chart .history,
.sc-forecast-chart .forecast {
  fill: none;
  stroke: var(--sc-ink);
  stroke-width: 4;
  stroke-linecap: round;
}

.sc-forecast-chart .forecast {
  stroke-dasharray: 7 7;
  animation: sc-forecast-dash 8s linear infinite;
}

.sc-forecast-chart .band {
  fill: color-mix(in srgb, var(--sc-ink) 7%, transparent);
  stroke: color-mix(in srgb, var(--sc-border) 34%, transparent);
  stroke-width: 1;
}

.sc-forecast-chart circle {
  fill: var(--sc-ink);
  stroke: var(--sc-surface);
  stroke-width: 3;
}

.sc-visual-label.label-e {
  left: 7%;
  bottom: 8%;
  transform:
    translate3d(
      calc(var(--depth-x) * -10px),
      calc(var(--depth-y) * 8px),
      66px
    );
}

.sc-visual-label.label-f {
  right: 7%;
  top: 8%;
  transform:
    translate3d(
      calc(var(--depth-x) * 13px),
      calc(var(--depth-y) * -9px),
      76px
    );
}

.sc-capability-note {
  margin: 16px 0 0;
  color: var(--sc-tertiary);
  font: 500 9px/1.5 var(--sc-font-mono);
}

@keyframes sc-orbit-breathe {
  from { opacity: .48; }
  to { opacity: .88; }
}

@keyframes sc-anomaly-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--sc-danger) 11%, transparent),
      0 0 20px color-mix(in srgb, var(--sc-danger) 18%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 11px color-mix(in srgb, var(--sc-danger) 8%, transparent),
      0 0 30px color-mix(in srgb, var(--sc-danger) 28%, transparent);
  }
}

@keyframes sc-forecast-dash {
  to { stroke-dashoffset: -56; }
}

@media (max-width: 980px) {
  .sc-hero-visual {
    max-width: 760px;
    min-height: 430px;
  }

  .sc-capability-card,
  .sc-capability-card.reverse {
    grid-template-columns: 1fr;
  }

  .sc-capability-card.reverse .sc-capability-copy,
  .sc-capability-card.reverse .sc-capability-visual {
    order: initial;
  }

  .sc-capability-visual {
    min-height: 320px;
  }
}

@media (max-width: 720px) {
  [data-tilt] {
    transform: none;
  }

  .sc-hero-visual {
    min-height: 390px;
  }

  .sc-depth-chip {
    display: none;
  }

  .sc-depth-orbit-a {
    right: -20%;
  }

  .sc-capability-card {
    min-height: 0;
    padding: 24px;
    border-radius: 22px;
  }

  .sc-capability-copy h3 {
    font-size: 31px;
  }

  .sc-capability-visual,
  .sc-mining-space,
  .sc-prediction-space {
    min-height: 280px;
  }
}

@media (max-width: 430px) {
  .sc-hero-visual {
    min-height: 340px;
  }

  .sc-depth-orbit {
    opacity: .66;
  }

  .sc-capability-card {
    padding: 20px;
  }

  .sc-capability-visual,
  .sc-mining-space,
  .sc-prediction-space {
    min-height: 245px;
  }

  .sc-visual-label {
    display: none;
  }

  .sc-cluster {
    transform: scale(.8);
  }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  [data-tilt] {
    transform: none !important;
  }

  [data-depth-scene],
  [data-depth-scene] *,
  .sc-depth-orbit,
  .sc-depth-chip {
    transform: none !important;
    transition: none !important;
  }

  .sc-space-grid,
  .sc-forecast-floor {
    transform: rotateX(64deg) rotateZ(-9deg) !important;
  }

  .sc-slice-plane {
    transform: rotateX(67deg) rotateZ(15deg) !important;
  }

  .sc-evidence-plane {
    transform: rotateX(62deg) rotateZ(-12deg) !important;
  }
}

@media (prefers-contrast: more) {
  .sc-depth-chip,
  .sc-capability-card,
  .sc-capability-visual,
  .sc-visual-label {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    background: var(--sc-surface);
    border-color: var(--sc-ink);
  }
}