/* Landing page desktop/base styling. Mobile-specific rules load after this file. */
/* BloqBot landing-only 3D scene system */
body.landing-3d {
  --depth-bg: #061116;
  --depth-panel: rgba(13, 26, 36, 0.94);
  --depth-panel-solid: #0d1a24;
  --depth-fg: #deeee6;
  --depth-dim: rgba(222, 238, 230, 0.78);
  --depth-muted: rgba(222, 238, 230, 0.36);
  --depth-line: rgba(222, 238, 230, 0.16);
  --depth-green: #0fa86e;
  --depth-green-bright: #14cc85;
  --depth-green-soft: rgba(15, 168, 110, 0.12);
  --depth-green-glow: rgba(15, 168, 110, 0.28);
  --depth-red: #dd4f4f;
  --depth-amber: #cc8f42;
  --depth-mono: "IBM Plex Mono", "Fira Code", monospace;
  /* Shared marketing hierarchy. Section modules still own their layouts, but
     equivalent headline and supporting-copy roles use these fluid scales. */
  --landing-section-title-size: clamp(2.85rem, 4vw, 4rem);
  --landing-section-copy-size: clamp(1.02rem, 1.2vw, 1.16rem);
  --landing-section-title-leading: 1.04;
  --landing-section-copy-leading: 1.62;
  overflow: hidden;
  min-height: 100vh;
  background: var(--depth-bg);
  color: var(--depth-fg);
  font-family: "Manrope", Inter, system-ui, sans-serif;
}

body.landing-3d::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, rgba(15, 168, 110, 0.12), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(204, 143, 66, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(222, 238, 230, 0.03), transparent 35%, rgba(15, 168, 110, 0.04));
}

body.landing-3d .site-footer {
  display: none;
}

body.landing-3d .flash-wrap {
  z-index: 1600;
}

body.landing-3d .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1300;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(6, 17, 22, 0.96), rgba(6, 17, 22, 0.42) 72%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

body.landing-3d .navbar.scrolled {
  background: linear-gradient(180deg, rgba(6, 17, 22, 0.98), rgba(6, 17, 22, 0.72));
  border-bottom: 1px solid rgba(222, 238, 230, 0.06);
}

body.landing-3d .nav-inner {
  width: 100%;
  max-width: none;
  min-height: 0;
  /* Fixed vertical padding so the banner height is identical on every
     screen size — svh produced different heights on MacBook vs ultrawide. */
  padding: 14px clamp(20px, 5vw, 88px);
}

body.landing-3d .nav-logo {
  gap: 4px;
}

body.landing-3d .logo-mark {
  font-size: clamp(1.25rem, 1.7vw, 1.9rem);
  letter-spacing: -0.03em;
}

body.landing-3d .logo-b {
  color: var(--depth-fg);
}

body.landing-3d .logo-bot,
body.landing-3d .logo-product {
  color: var(--depth-green);
}

body.landing-3d .logo-product,
body.landing-3d .nav-link {
  font-family: var(--depth-mono);
  letter-spacing: 0.18em;
}

body.landing-3d .logo-product {
  color: rgba(222, 238, 230, 0.34);
  font-size: clamp(0.58rem, 0.66vw, 0.72rem);
  letter-spacing: 0.01em;
  text-transform: none;
}

body.landing-3d .nav-link {
  color: rgba(222, 238, 230, 0.54);
  /* 0.82vw reaches 0.74rem cap at ~1440px so nav text is consistent
     on MacBook and ultrawide (was 0.66vw, only reached cap at ~3440px). */
  font-size: clamp(0.62rem, 0.82vw, 0.74rem);
}

body.landing-3d .nav-link:hover {
  color: var(--depth-green);
}

body.landing-3d .btn:not(.btn-drawer),
body.landing-3d .btn-nav {
  border-radius: 0;
  font-family: var(--depth-mono);
  font-size: clamp(0.62rem, 0.82vw, 0.74rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.landing-3d .btn-nav {
  border: 1px solid rgba(15, 168, 110, 0.58);
  background: rgba(15, 168, 110, 0.1);
  color: var(--depth-green);
  box-shadow: 0 0 26px rgba(15, 168, 110, 0.08);
}

body.landing-3d .btn-nav:hover {
  background: rgba(15, 168, 110, 0.2);
  color: var(--depth-green-bright);
}

@media (pointer: fine) {
  body.landing-3d,
  body.landing-3d a,
  body.landing-3d button {
    cursor: none;
  }
}

.landing-depth {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--depth-bg);
  isolation: isolate;
}

.depth-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--depth-green);
  box-shadow: 0 0 12px var(--depth-green), 0 0 30px var(--depth-green-glow);
  transition: transform 0.25s ease;
}

.depth-wave {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.92;
}

.depth-radar-object {
  position: fixed;
  top: 50%;
  right: clamp(-130px, -7vw, -62px);
  z-index: 6;
  width: clamp(210px, 23vw, 420px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.24;
  transform: translate3d(0, -50%, 0) rotateZ(-14deg);
  transform-origin: center;
  filter: drop-shadow(0 0 38px rgba(15, 168, 110, 0.2));
  transition: opacity 0.45s ease, transform 0.55s ease, right 0.55s ease;
}

.depth-radar-object span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.radar-ring {
  inset: 0;
  border: 1px solid rgba(15, 168, 110, 0.26);
  border-radius: 999px;
  box-shadow: inset 0 0 28px rgba(15, 168, 110, 0.06), 0 0 24px rgba(15, 168, 110, 0.08);
}

.radar-ring-mid {
  inset: 17%;
  opacity: 0.82;
}

.radar-ring-inner {
  inset: 34%;
  opacity: 0.7;
}

.radar-sweep {
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(from 0deg, rgba(15, 168, 110, 0.34), rgba(15, 168, 110, 0.08) 18deg, transparent 56deg);
  mask-image: radial-gradient(circle, transparent 17%, black 18%, black 69%, transparent 70%);
  animation: radar-sweep 13s linear infinite;
}

.radar-axis {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(222, 238, 230, 0.22), transparent);
  transform-origin: center;
}

.radar-axis-x {
  transform: rotate(90deg);
}

.radar-node {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--depth-green-bright);
  box-shadow: 0 0 18px rgba(15, 168, 110, 0.62);
  animation: radar-node 4.5s ease-in-out infinite;
}

.radar-node-a {
  top: 24%;
  left: 68%;
}

.radar-node-b {
  top: 63%;
  left: 29%;
  animation-delay: 1.2s;
}

.radar-node-c {
  top: 48%;
  left: 79%;
  animation-delay: 2.2s;
}

.radar-core {
  inset: 44%;
  border-radius: 999px;
  background: var(--depth-green);
  box-shadow: 0 0 32px rgba(15, 168, 110, 0.5);
}

body[data-depth-scene="1"] .depth-radar-object {
  right: clamp(-120px, -6vw, -56px);
  opacity: 0.3;
  transform: translate3d(0, -50%, 0) rotateZ(18deg) scale(0.96);
}

body[data-depth-scene="2"] .depth-radar-object,
body[data-depth-scene="3"] .depth-radar-object {
  opacity: 0.22;
  transform: translate3d(0, -50%, 0) rotateZ(-42deg) scale(0.88);
}

body[data-depth-scene="4"] .depth-radar-object {
  right: clamp(-116px, -5vw, -48px);
  opacity: 0.28;
  transform: translate3d(0, -50%, 0) rotateZ(34deg) scale(1.04);
}

.depth-noise {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0.024;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 210px;
}

.depth-cursor,
.depth-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1800;
  pointer-events: none;
  opacity: 0;
}

@media (pointer: fine) {
  .depth-cursor,
  .depth-cursor-ring {
    opacity: 1;
  }

  .depth-cursor {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--depth-green);
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
  }

  .depth-cursor-ring {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(15, 168, 110, 0.52);
    transform: translate(-50%, -50%);
    transition: width 0.18s ease, height 0.18s ease, border-color 0.18s ease;
  }

  body.depth-cursor-hot .depth-cursor {
    transform: translate(-50%, -50%) scale(2.1);
  }

  body.depth-cursor-hot .depth-cursor-ring {
    width: 48px;
    height: 48px;
    border-color: rgba(15, 168, 110, 0.86);
  }
}

.depth-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  perspective: 1120px;
  perspective-origin: 50% 50%;
}

.depth-camera {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.depth-no-transition .depth-camera,
.depth-no-transition .depth-scene,
.depth-no-transition .depth-reveal {
  transition: none !important;
}

/* Scene transition: opacity and transform now finish together (0.5s) so
   the scene snaps into final position at the same moment it becomes
   fully opaque. Removes the "still moving while opaque -> blurry settle"
   window that used to last ~0.7s. translateZ(0) + will-change on the
   active scene promotes it to its own GPU layer so the browser renders
   it at full pixel density. */
.depth-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, var(--scene-z, 0));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.32s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.depth-scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  will-change: transform, opacity;
  /* Force the scene to its own composited layer at full DPI once it
     becomes active. Without this, perspective rasterization can leave
     the text/cards looking soft for a beat after the transform ends. */
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.depth-grid-bg,
.depth-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.depth-grid-bg {
  opacity: 0.9;
  background-image:
    linear-gradient(rgba(15, 168, 110, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 168, 110, 0.035) 1px, transparent 1px);
  background-size: 82px 82px;
  animation: depth-grid-drift 18s linear infinite;
}

.depth-vignette {
  background:
    radial-gradient(ellipse 68% 60% at 50% 52%, transparent 22%, rgba(6, 17, 22, 0.44) 70%, var(--depth-bg) 100%),
    linear-gradient(180deg, rgba(6, 17, 22, 0.45), transparent 26%, rgba(6, 17, 22, 0.48));
}

.depth-inner {
  position: relative;
  z-index: 3;
  width: min(100% - clamp(34px, 10vw, 180px), 1760px);
  /* Use svh (small viewport height) so the cap is based on the visible
     viewport without browser chrome. overflow-y lets the wheel handler
     scroll through content before advancing to the next scene. */
  max-height: calc(100svh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  transform-style: preserve-3d;
}

.depth-inner::-webkit-scrollbar {
  display: none;
}

.depth-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(380px, 0.9fr);
  gap: clamp(36px, 5.5vw, 96px);
  align-items: center;
  padding-top: 42px;
}

.depth-hero-copy {
  transform: translateZ(78px);
}

/* The wrapper is layout-neutral on desktop. Mobile promotes it to a
   viewport-sized composition with a bottom-anchored live market ticker. */
.depth-hero-primary {
  display: contents;
}

.depth-hero-content {
  display: contents;
}

.depth-hero-console {
  transform: translateZ(120px) rotateY(-6deg);
  transform-origin: center;
}

.depth-kicker,
.depth-tag,
.depth-panel-label span,
.signal-console-top span,
.scanner-board-head span,
.ticket-topline span,
.confirmation-head span,
.feed-title,
.feed-live,
.feed-footer,
.pricing-plan-name,
.pricing-ribbon,
.depth-footer,
.depth-product-line {
  font-family: var(--depth-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.depth-kicker,
.depth-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(16px, 2.6vh, 30px);
  color: var(--depth-green);
  /* 0.91vw reaches 0.82rem cap at ~1440px (was 0.72vw → only maxed at ~3440px). */
  font-size: clamp(0.62rem, 0.91vw, 0.82rem);
}

.depth-tag::before {
  content: "";
  width: 25px;
  height: 1px;
  background: var(--depth-green);
  box-shadow: 0 0 14px var(--depth-green-glow);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--depth-green);
  box-shadow: 0 0 14px var(--depth-green-glow);
  animation: depth-pulse 1.8s ease-in-out infinite;
}

.depth-hero-name {
  margin: 0;
  /* Caps at 10.35rem so the wordmark fits inside the 900px hero column
     even on wide viewports, leaving room for the slogan to overshoot
     slightly without wrapping. Sized 10% smaller than the original
     11.4vw scale for a tighter visual balance against the slogan. */
  font-size: clamp(4.5rem, 10.26vw, 10.35rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.065em;
  /* Optical alignment: the heavy "B" glyph has a larger left side-bearing
     than the slogan's "T", so without this nudge BloqBot visually sits a
     few pixels to the right of "Trade With Edge." underneath. */
  text-indent: -0.05em;
  text-align: left;
}

.depth-hero-name span {
  color: var(--depth-fg);
}

.depth-hero-name em {
  color: var(--depth-green);
  font-style: normal;
  text-shadow: 0 0 64px rgba(15, 168, 110, 0.36), 0 0 130px rgba(15, 168, 110, 0.14);
}

/* SVG wordmark replaces the inline text in the desktop hero. Keep it
   intentionally smaller than the old text lockup so the slogan and intro
   carry the message. Aspect ratio is preserved via height: auto. */
.depth-hero-name img {
  display: block;
  width: clamp(220px, 32vw, 460px);
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 0 36px rgba(15, 168, 110, 0.28))
          drop-shadow(0 0 90px rgba(15, 168, 110, 0.12));
}

.depth-product-line {
  margin: clamp(12px, 2vh, 22px) 0 0;
  color: rgba(222, 238, 230, 0.3);
  font-size: clamp(0.72rem, 0.92vw, 1rem);
}

.depth-slogan {
  margin: clamp(24px, 4vh, 46px) 0 0;
  color: var(--depth-fg);
  font-family: 'Manrope', sans-serif;
  /* Shrunk to 50% of the prior width-matching size at the user's request,
     so the slogan now reads as a small caption under the wordmark rather
     than echoing its width. */
  font-size: clamp(1.03rem, 2.8vw, 2.53rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.depth-hero-copy .depth-copy {
  margin-top: clamp(6px, 1vh, 12px);
  color: rgba(238, 244, 255, 0.88);
  font-weight: 400;
  text-shadow:
    0 1px 2px rgba(3, 10, 14, 0.96),
    0 0 18px rgba(3, 10, 14, 0.92),
    0 0 38px rgba(3, 10, 14, 0.78);
}

.depth-slogan span,
.depth-heading span,
.depth-cta-heading span {
  color: var(--depth-green);
}

.depth-copy {
  max-width: 680px;
  margin: clamp(16px, 2.4vh, 28px) 0 0;
  color: var(--depth-dim);
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  font-weight: 300;
  line-height: 1.75;
}

.depth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(28px, 4.2vh, 50px);
}

body.landing-3d .depth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: clamp(13px, 1.5vh, 19px) clamp(26px, 3.2vw, 54px);
  border-radius: 0;
  text-decoration: none;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, color 0.24s ease, background 0.24s ease;
}

body.landing-3d .depth-btn:hover {
  transform: translateY(-2px);
}

body.landing-3d .depth-btn-primary {
  border: 1px solid var(--depth-green);
  background: var(--depth-green);
  color: var(--depth-bg);
  box-shadow: 0 0 38px rgba(15, 168, 110, 0.24);
}

body.landing-3d .depth-btn-primary:hover {
  background: var(--depth-green-bright);
  border-color: var(--depth-green-bright);
  box-shadow: 0 0 58px rgba(15, 168, 110, 0.38);
}

body.landing-3d .depth-btn-secondary {
  border: 1px solid rgba(220, 232, 229, 0.22);
  background: linear-gradient(180deg, rgba(20, 38, 52, 0.96), rgba(12, 26, 36, 0.98));
  color: rgba(238, 244, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 36px rgba(0, 0, 0, 0.2);
}

body.landing-3d .depth-btn-secondary:hover {
  border-color: rgba(35, 209, 139, 0.5);
  color: var(--depth-fg);
  background: linear-gradient(180deg, rgba(25, 52, 66, 0.98), rgba(16, 35, 47, 0.98));
}

.depth-panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  color: rgba(222, 238, 230, 0.36);
}

.depth-panel-label strong {
  color: var(--depth-green);
  font-family: var(--depth-mono);
  letter-spacing: 0.1em;
}

.signal-console-shell.depth-console,
body.landing-3d .signal-feed-frame,
body.landing-3d .pricing-card,
.depth-feature-card,
.depth-pain,
.depth-terminal,
.founder-media {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(222, 238, 230, 0.09);
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(15, 168, 110, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(222, 238, 230, 0.055), rgba(222, 238, 230, 0.018));
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.signal-console-shell.depth-console {
  min-height: clamp(430px, 58vh, 660px);
  padding: clamp(18px, 2.4vw, 32px);
  background:
    linear-gradient(180deg, rgba(15, 168, 110, 0.06), transparent 28%),
    rgba(13, 26, 36, 0.88);
}

.console-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(15, 168, 110, 0.12), transparent);
  height: 36%;
  transform: translateY(-110%);
  animation: depth-scanline 4.4s ease-in-out infinite;
}

.signal-console-top,
.scanner-board-head,
.ticket-topline,
.confirmation-head,
.feed-topbar,
.feed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.signal-console-top {
  margin-bottom: clamp(14px, 2vh, 22px);
  color: rgba(222, 238, 230, 0.4);
  font-size: clamp(0.62rem, 0.72vw, 0.78rem);
}

.signal-console-top strong {
  color: var(--depth-green);
  font-size: clamp(0.68rem, 0.76vw, 0.86rem);
}

.signal-console-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 14px;
}

.scanner-board,
.trade-ticket,
.confirmation-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(222, 238, 230, 0.08);
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(20, 204, 133, 0.12), transparent 38%),
    rgba(6, 17, 22, 0.72);
  padding: clamp(14px, 1.8vw, 22px);
}

.trade-ticket {
  min-height: 100%;
}

.confirmation-panel {
  grid-column: 1 / -1;
}

.scanner-board-head,
.ticket-topline,
.confirmation-head {
  color: rgba(222, 238, 230, 0.42);
  font-size: clamp(0.58rem, 0.64vw, 0.72rem);
  margin-bottom: 14px;
}

.scanner-board-head em,
.ticket-topline em,
.confirmation-head strong {
  color: var(--depth-green);
  font-style: normal;
  font-family: var(--depth-mono);
}

.scanner-rows {
  display: grid;
  gap: 10px;
}

.scanner-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(222, 238, 230, 0.06);
  background: rgba(222, 238, 230, 0.025);
}

.scanner-row-hot {
  border-color: rgba(15, 168, 110, 0.26);
  background: rgba(15, 168, 110, 0.065);
}

.asset-pill,
.sc-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--depth-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.asset-pill {
  color: var(--depth-green);
}

.scan-track,
.sc-bar {
  height: 5px;
  overflow: hidden;
  background: rgba(222, 238, 230, 0.08);
}

.scan-track span,
.sc-fill {
  display: block;
  width: var(--fill, 70%);
  height: 100%;
  background: linear-gradient(90deg, var(--depth-green), var(--depth-green-bright));
  box-shadow: 0 0 16px rgba(15, 168, 110, 0.32);
}

.scanner-row strong {
  color: rgba(222, 238, 230, 0.58);
  font-size: 0.72rem;
  font-weight: 600;
}

.ticket-pair-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.ticket-pair-row h2 {
  margin: 0;
  color: var(--depth-fg);
  font-size: clamp(1.45rem, 2vw, 2.3rem);
  line-height: 1;
}

.ticket-pair-row strong {
  color: var(--depth-bg);
  background: var(--depth-green);
  padding: 8px 10px;
  font-family: var(--depth-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.ticket-confidence {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}

.confidence-ring {
  display: grid;
  place-items: center;
  width: clamp(82px, 8vw, 112px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(6, 17, 22, 0.92) 58%, transparent 60%),
    conic-gradient(var(--depth-green) 0 84%, rgba(222, 238, 230, 0.1) 84% 100%);
  box-shadow: 0 0 30px rgba(15, 168, 110, 0.2);
}

.confidence-ring span {
  color: var(--depth-fg);
  font-family: var(--depth-mono);
  font-size: clamp(1rem, 1.3vw, 1.4rem);
  font-weight: 700;
}

.ticket-confidence span {
  color: var(--depth-green);
  font-family: var(--depth-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ticket-confidence p {
  margin: 5px 0 0;
  color: rgba(222, 238, 230, 0.54);
  font-size: clamp(0.82rem, 0.9vw, 0.98rem);
  line-height: 1.5;
}

.trade-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(222, 238, 230, 0.08);
  border: 1px solid rgba(222, 238, 230, 0.08);
}

.trade-level-grid div {
  padding: 12px;
  background: rgba(6, 17, 22, 0.82);
}

.trade-level-grid span {
  display: block;
  color: rgba(222, 238, 230, 0.38);
  font-family: var(--depth-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trade-level-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--depth-fg);
  font-size: clamp(0.86rem, 0.96vw, 1.08rem);
}

.confirmation-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.confirmation-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  background: rgba(222, 238, 230, 0.025);
  border: 1px solid rgba(222, 238, 230, 0.06);
}

.confirmation-item > span {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--depth-green);
  box-shadow: 0 0 14px var(--depth-green-glow);
}

.confirmation-item strong,
.confirmation-item em {
  display: block;
}

.confirmation-item strong {
  color: rgba(222, 238, 230, 0.82);
  font-size: 0.78rem;
}

.confirmation-item em {
  margin-top: 2px;
  color: rgba(222, 238, 230, 0.42);
  font-size: 0.72rem;
  font-style: normal;
}

.signal-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 14px;
  border: 1px solid rgba(222, 238, 230, 0.08);
  background: rgba(222, 238, 230, 0.08);
}

.signal-pipeline span {
  padding: 11px;
  color: rgba(222, 238, 230, 0.44);
  background: rgba(6, 17, 22, 0.82);
  font-family: var(--depth-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.depth-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 6vh, 76px);
  z-index: 4;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.depth-ticker-track {
  display: flex;
  gap: clamp(32px, 4vw, 72px);
  width: max-content;
  white-space: nowrap;
  animation: depth-ticker 28s linear infinite;
}

.depth-ticker span {
  color: rgba(222, 238, 230, 0.2);
  font-family: var(--depth-mono);
  font-size: clamp(0.6rem, 0.7vw, 0.78rem);
  letter-spacing: 0.16em;
}

.depth-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: clamp(36px, 6vw, 110px);
  align-items: center;
}

.depth-heading {
  max-width: 900px;
  margin: 0;
  color: var(--depth-fg);
  font-size: clamp(2.5rem, 5vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.depth-card-stack {
  display: grid;
  gap: 14px;
  transform: translateZ(86px);
}

.depth-pain {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 30px);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.depth-pain:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 168, 110, 0.28);
}

.depth-pain > span,
.process-step > span {
  color: var(--depth-green);
  font-family: var(--depth-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
}

.depth-pain strong,
.process-step strong,
.depth-feature-card strong {
  display: block;
  color: var(--depth-fg);
  font-size: clamp(1rem, 1.16vw, 1.28rem);
}

.depth-pain p,
.process-step p,
.depth-feature-card p {
  margin: 7px 0 0;
  color: rgba(222, 238, 230, 0.54);
  font-size: clamp(0.94rem, 1.02vw, 1.1rem);
  line-height: 1.62;
}

.depth-process-scene {
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 0.9fr);
}

.depth-steps {
  display: grid;
  gap: 0;
  margin-top: clamp(26px, 4vh, 48px);
  border-top: 1px solid rgba(222, 238, 230, 0.08);
}

.process-step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: clamp(17px, 2.1vh, 25px) 0;
  border-bottom: 1px solid rgba(222, 238, 230, 0.08);
  transition: padding-left 0.25s ease, border-color 0.25s ease;
}

.process-step.is-current {
  padding-left: 14px;
  border-color: rgba(15, 168, 110, 0.3);
}

.depth-terminal {
  min-height: clamp(340px, 48vh, 560px);
  background: rgba(6, 17, 22, 0.88);
  transform: translateZ(104px) rotateY(-5deg);
}

.depth-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 168, 110, 0.1), transparent 36%);
}

.depth-terminal-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(222, 238, 230, 0.08);
}

.depth-terminal-header span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--depth-red);
}

.depth-terminal-header span:nth-child(2) {
  background: var(--depth-amber);
}

.depth-terminal-header span:nth-child(3) {
  background: var(--depth-green);
}

.depth-terminal-header strong {
  margin-left: 8px;
  color: rgba(222, 238, 230, 0.4);
  font-family: var(--depth-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.depth-terminal-body {
  position: relative;
  z-index: 1;
  height: calc(100% - 44px);
  max-height: 500px;
  padding: clamp(16px, 2vw, 26px);
  overflow: hidden;
  font-family: var(--depth-mono);
  font-size: clamp(0.72rem, 0.82vw, 0.92rem);
  line-height: 1.85;
}

.depth-terminal-line {
  color: rgba(222, 238, 230, 0.54);
}

.depth-terminal-line.is-good {
  color: var(--depth-green);
}

.depth-terminal-line.is-warn {
  color: var(--depth-amber);
}

.depth-terminal-line.is-bad {
  color: var(--depth-red);
}

.depth-section-head {
  max-width: 980px;
  margin-bottom: clamp(24px, 4vh, 52px);
}

.depth-section-head .depth-copy {
  max-width: 760px;
}

.depth-signal-scene,
.depth-pricing-scene {
  padding-top: 34px;
  width: min(100% - clamp(120px, 18vw, 280px), 1620px);
  margin-right: auto;
  margin-left: auto;
}

.depth-pricing-scene .depth-section-head {
  margin-bottom: clamp(18px, 2.6vh, 32px);
}

.depth-pricing-scene .depth-heading {
  max-width: 1120px;
  font-size: clamp(2.5rem, 4.55vw, 5.1rem);
}

.depth-signal-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(540px, 1.18fr);
  gap: clamp(24px, 3.6vw, 54px);
  align-items: stretch;
}

.depth-feature-grid {
  display: grid;
  gap: 14px;
}

.depth-feature-card {
  padding: clamp(18px, 2.2vw, 30px);
}

.depth-feature-card span {
  display: block;
  margin-bottom: 12px;
  color: var(--depth-green);
  font-family: var(--depth-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.landing-3d .signal-feed-frame {
  padding: clamp(16px, 2.2vw, 26px);
  background: rgba(13, 26, 36, 0.82);
}

body.landing-3d .feed-topbar {
  margin-bottom: 14px;
  color: rgba(222, 238, 230, 0.42);
  font-size: 0.72rem;
}

body.landing-3d .feed-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--depth-green);
}

body.landing-3d .feed-body {
  overflow: hidden;
}

body.landing-3d .feature-signal-feed .feed-list {
  display: flex;
  gap: 14px;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

body.landing-3d .signal-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(220px, 1fr);
  gap: 18px;
  min-width: min(400px, 76vw);
  padding: 18px;
  border: 1px solid rgba(15, 168, 110, 0.18);
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(15, 168, 110, 0.14), transparent 40%),
    rgba(6, 17, 22, 0.78);
}

body.landing-3d .signal-card.signal-short {
  border-color: rgba(221, 79, 79, 0.2);
}

body.landing-3d .sc-left,
body.landing-3d .sc-right {
  min-width: 0;
}

body.landing-3d .sc-direction {
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 9px;
  background: rgba(15, 168, 110, 0.14);
  color: var(--depth-green);
}

body.landing-3d .sc-direction.short {
  background: rgba(221, 79, 79, 0.14);
  color: var(--depth-red);
}

body.landing-3d .sc-pair,
body.landing-3d .sc-conf-val,
body.landing-3d .sc-levels strong {
  color: var(--depth-fg);
  font-weight: 800;
}

body.landing-3d .sc-conf-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(222, 238, 230, 0.42);
  font-size: 0.74rem;
}

body.landing-3d .sc-bar {
  margin: 9px 0 12px;
}

body.landing-3d .short-fill {
  background: linear-gradient(90deg, var(--depth-red), #ff8a8a);
}

body.landing-3d .sc-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(222, 238, 230, 0.42);
  font-size: 0.72rem;
}

body.landing-3d .sc-time {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: rgba(222, 238, 230, 0.3);
  font-family: var(--depth-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.landing-3d .feed-footer {
  margin-top: 14px;
  color: rgba(222, 238, 230, 0.34);
  font-family: var(--depth-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.depth-pricing-grid {
  display: flex !important;
  gap: clamp(16px, 2.3vw, 28px);
  width: 100%;
}

body.landing-3d .pricing-tiers {
  margin-top: 0;
  perspective: none;
}

body.landing-3d .pricing-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 380px;
  padding: clamp(22px, 2.7vw, 36px);
  opacity: 1 !important;
  visibility: visible !important;
}

body.landing-3d .pricing-tier {
  --tier-lift: 0px;
  --tier-tilt-x: 0deg;
  --tier-tilt-y: 0deg;
  border-radius: 0;
  transform: none !important;
}

body.landing-3d .pricing-tier::before,
body.landing-3d .pricing-tier::after {
  display: none;
}

body.landing-3d .pricing-tier-featured {
  border-color: rgba(15, 168, 110, 0.42);
  background:
    radial-gradient(circle at 50% 0, rgba(15, 168, 110, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(15, 168, 110, 0.09), rgba(222, 238, 230, 0.02));
  box-shadow: 0 30px 110px rgba(15, 168, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.landing-3d .pricing-ribbon {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 7px 10px;
  background: var(--depth-green);
  color: var(--depth-bg);
  font-size: 0.58rem;
  font-weight: 700;
}

body.landing-3d .pricing-plan-name {
  color: var(--depth-green);
  font-size: 0.7rem;
}

body.landing-3d .pricing-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 16px;
  color: var(--depth-fg);
}

body.landing-3d .price-currency,
body.landing-3d .price-cents,
body.landing-3d .price-period {
  color: rgba(222, 238, 230, 0.5);
  font-family: var(--depth-mono);
}

body.landing-3d .price-amount {
  font-size: clamp(3rem, 4.8vw, 5.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

body.landing-3d .pricing-tagline {
  margin: 14px 0 0;
  color: rgba(222, 238, 230, 0.52);
  line-height: 1.55;
}

body.landing-3d .pricing-features {
  display: grid;
  gap: 12px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

body.landing-3d .pricing-features li {
  position: relative;
  padding-left: 22px;
  color: rgba(222, 238, 230, 0.7);
  font-size: clamp(0.94rem, 1.02vw, 1.1rem);
}

body.landing-3d .pricing-yearly {
  margin-top: 8px;
  color: rgba(222, 238, 230, 0.38);
  font-family: var(--depth-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

body.landing-3d .pricing-yearly strong {
  color: var(--depth-green);
  font-weight: 600;
}

body.landing-3d #pricing .pricing-billing-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 390px);
  margin: 0 auto clamp(26px, 3vw, 38px);
  padding: 4px;
  border: 1px solid rgba(207, 224, 255, 0.12);
  border-radius: 10px;
  background: rgba(8, 20, 28, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.landing-3d #pricing .pricing-billing-toggle button {
  display: grid;
  place-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(238, 244, 255, 0.62);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

body.landing-3d #pricing .pricing-billing-toggle button span {
  color: rgba(238, 244, 255, 0.46);
  font-family: var(--depth-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body.landing-3d #pricing .pricing-billing-toggle button:hover {
  color: rgba(238, 244, 255, 0.86);
}

body.landing-3d #pricing .pricing-billing-toggle button:focus-visible {
  outline: 2px solid rgba(35, 209, 139, 0.7);
  outline-offset: 2px;
}

body.landing-3d #pricing .pricing-billing-toggle button.is-active {
  background: rgba(35, 209, 139, 0.15);
  color: var(--depth-fg);
  box-shadow: inset 0 0 0 1px rgba(35, 209, 139, 0.34);
}

body.landing-3d #pricing .pricing-billing-toggle button.is-active span {
  color: var(--depth-green);
}

body.landing-3d #pricing .pricing-best-for {
  max-width: 34ch;
  margin: 2px 0 0;
  color: rgba(238, 244, 255, 0.62);
  font-size: clamp(0.84rem, 0.9vw, 0.96rem);
  line-height: 1.45;
}

body.landing-3d #pricing .pricing-best-for strong {
  display: block;
  margin-bottom: 3px;
  color: var(--depth-green);
  font-family: var(--depth-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.landing-3d #pricing .pricing-tier {
  cursor: pointer;
}

body.landing-3d #pricing .pricing-tier a,
body.landing-3d #pricing .pricing-tier summary {
  cursor: pointer;
}

body.landing-3d #pricing[data-billing-cycle="yearly"] .pricing-yearly,
body.landing-3d #pricing[data-billing-cycle="yearly"] .pricing-mobile-yearly {
  color: rgba(35, 209, 139, 0.78);
}

body.landing-3d .pricing-features li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--depth-green);
  box-shadow: 0 0 14px var(--depth-green-glow);
}

body.landing-3d .pricing-footer {
  margin-top: auto;
}

body.landing-3d .btn-full {
  width: 100%;
}

.founder-profile.depth-split {
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
}

.founder-media {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: clamp(30px, 4vw, 58px);
  transform: translateZ(92px) rotateY(5deg);
}

.founder-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(190px, 18vw, 320px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(15, 168, 110, 0.36);
  border-radius: 999px;
  background: rgba(15, 168, 110, 0.08);
  box-shadow: 0 0 70px rgba(15, 168, 110, 0.16);
}

.founder-photo::before,
.founder-photo::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(15, 168, 110, 0.24);
  border-radius: inherit;
}

.founder-photo::after {
  inset: 24px;
  border-color: rgba(222, 238, 230, 0.1);
}

.founder-photo img,
.founder-photo .avatar-photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  color: var(--depth-green);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 800;
}

.founder-meta {
  text-align: center;
}

.founder-name,
.founder-role {
  display: block;
}

.founder-name {
  color: var(--depth-fg);
  font-size: clamp(1.45rem, 2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.founder-role {
  margin-top: 6px;
  color: rgba(222, 238, 230, 0.42);
  font-family: var(--depth-mono);
  font-size: clamp(0.66rem, 0.76vw, 0.86rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.founder-content {
  transform: translateZ(72px);
}

.founder-copy {
  display: grid;
  gap: 18px;
  margin-top: clamp(20px, 3vh, 34px);
}

.about-para {
  max-width: 820px;
  margin: 0;
  color: rgba(222, 238, 230, 0.62);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 300;
  line-height: 1.78;
}

.depth-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  text-align: center;
  transform: translateZ(120px);
}

.depth-cta-inner .depth-tag {
  justify-content: center;
}

.depth-cta-heading {
  margin: 0;
  color: var(--depth-fg);
  font-size: clamp(3.4rem, 8vw, 10rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.depth-cta-inner .depth-copy {
  margin-right: auto;
  margin-left: auto;
}

.depth-cta-inner .depth-actions {
  justify-content: center;
}

.depth-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(34px, 5vh, 70px);
  color: rgba(222, 238, 230, 0.28);
  font-size: 0.64rem;
}

.depth-footer a {
  color: rgba(222, 238, 230, 0.44);
  text-decoration: none;
}

.depth-footer a:hover {
  color: var(--depth-green);
}

.depth-scene-count {
  position: absolute;
  right: clamp(20px, 5vw, 88px);
  bottom: clamp(18px, 3vh, 38px);
  z-index: 6;
  color: rgba(222, 238, 230, 0.2);
  font-family: var(--depth-mono);
  font-size: clamp(0.58rem, 0.68vw, 0.76rem);
  letter-spacing: 0.16em;
}

.depth-reveal {
  opacity: 0;
  transform: translateY(30px) rotateX(4deg);
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--depth-delay, 0ms);
  will-change: opacity, transform;
}

.depth-scene.is-active .depth-reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) rotateX(0);
}

.depth-delay-1 { --depth-delay: 90ms; }
.depth-delay-2 { --depth-delay: 170ms; }
.depth-delay-3 { --depth-delay: 250ms; }
.depth-delay-4 { --depth-delay: 330ms; }
.depth-delay-5 { --depth-delay: 420ms; }
.depth-delay-6 { --depth-delay: 520ms; }

.is-ticking {
  animation: depth-value-tick 0.5s ease;
}

@keyframes depth-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 82px 82px, 82px 82px; }
}

@keyframes depth-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.36); }
}

@keyframes depth-scanline {
  0% { transform: translateY(-120%); opacity: 0; }
  18% { opacity: 1; }
  62% { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}

@keyframes depth-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes radar-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes radar-node {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.86);
  }

  48% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes depth-value-tick {
  0% { color: var(--depth-green-bright); text-shadow: 0 0 18px var(--depth-green-glow); }
  100% { color: inherit; text-shadow: none; }
}

@media (min-width: 1800px) {
  .depth-inner {
    width: min(100% - 220px, 2080px);
  }

  .depth-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(600px, 0.86fr);
  }

  .signal-console-shell.depth-console {
    min-height: min(700px, 60vh);
  }
}

@media (max-width: 1180px) {
  body.landing-3d .nav-center {
    display: none;
  }

  .depth-hero-layout,
  .depth-split,
  .depth-process-scene,
  .depth-signal-grid,
  .founder-profile.depth-split {
    grid-template-columns: 1fr;
  }

  .depth-hero-layout {
    gap: 28px;
    padding-top: 86px;
  }

  .depth-hero-console,
  .depth-terminal,
  .founder-media,
  .founder-content {
    transform: none;
  }

  .signal-console-shell.depth-console {
    min-height: auto;
  }

  .depth-pricing-scene {
    width: min(100% - 34px, 720px);
    margin-right: auto;
    margin-left: auto;
  }

  .depth-pricing-grid {
    flex-direction: column;
    max-width: 680px;
  }
}

@media (max-width: 860px) {
  body.landing-3d {
    overflow: hidden;
  }

  body.landing-3d .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: relative;
    padding: 16px 18px;
  }

  body.landing-3d .nav-logo {
    flex: 0 0 auto;
  }

  body.landing-3d .nav-right .nav-link {
    display: none;
  }

  body.landing-3d .nav-right {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    position: absolute;
    top: 50%;
    right: 18px;
    margin-left: 0;
    transform: translateY(-50%);
  }

  body.landing-3d .btn-nav {
    padding: 8px 10px;
    font-size: 0.74rem;
  }

  .depth-scene {
    align-items: flex-start;
    overflow-y: auto;
    padding: 96px 0 44px;
    overscroll-behavior: contain;
  }

  .depth-inner {
    width: min(100% - 34px, 720px);
    max-height: none;
  }

  .depth-hero-layout {
    padding-top: 0;
  }

  .depth-hero-name {
    max-width: 100%;
    font-size: clamp(3.24rem, 16.2vw, 4.5rem);
    letter-spacing: -0.055em;
  }

  .depth-slogan {
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 3.2rem);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .depth-heading {
    font-size: clamp(2.25rem, 12vw, 4.2rem);
  }

  .depth-copy {
    font-size: 1.12rem;
  }

  .trade-level-grid,
  .confirmation-list,
  .signal-pipeline {
    grid-template-columns: 1fr;
  }

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

  body.landing-3d .signal-card {
    grid-template-columns: 1fr;
    min-width: calc(100vw - 72px);
  }

  .depth-scene-count {
    display: none;
  }
}

@media (max-height: 820px) and (min-width: 861px) {
  .depth-inner {
    max-height: calc(100svh - 96px);
  }

  .depth-hero-name {
    font-size: clamp(3.96rem, 8.28vw, 8.55rem);
  }

  .depth-slogan,
  .depth-heading {
    font-size: clamp(2.15rem, 4vw, 4.6rem);
  }

  .depth-copy {
    font-size: clamp(1.05rem, 1.15vw, 1.25rem);
    line-height: 1.68;
  }

  .signal-console-shell.depth-console {
    min-height: 410px;
    padding: 18px;
  }

  body.landing-3d .pricing-card {
    min-height: 360px;
    padding: 22px;
  }

  body.landing-3d .pricing-features {
    gap: 8px;
    margin: 18px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .depth-camera,
  .depth-reveal,
  .depth-progress,
  body.landing-3d .feature-signal-feed .feed-list {
    transition: none !important;
  }

  .depth-grid-bg,
  .live-dot,
  .console-scanline,
  .depth-ticker-track,
  .is-ticking {
    animation: none !important;
  }
}

/* Performance pass: keep native cursors after disabling the custom cursor.
   Explicit interactive cursors prevent button text from falling back to an
   I-beam while preserving a standard arrow over non-interactive content. */
@media (pointer: fine) {
  body.landing-3d {
    cursor: default !important;
  }

  body.landing-3d a[href],
  body.landing-3d button:not(:disabled),
  body.landing-3d summary,
  body.landing-3d [role='button']:not([aria-disabled='true']) {
    cursor: pointer !important;
  }

  body.landing-3d button:disabled,
  body.landing-3d [aria-disabled='true'] {
    cursor: not-allowed !important;
  }

  body.landing-3d a[href] *,
  body.landing-3d button *,
  body.landing-3d summary *,
  body.landing-3d [role='button'] * {
    cursor: inherit !important;
  }
}

body.landing-3d .depth-cursor,
body.landing-3d .depth-cursor-ring,
body.landing-3d .depth-noise {
  display: none !important;
}

body.landing-3d .depth-wave {
  opacity: 0.42;
}

body.landing-3d .depth-grid-bg {
  animation: none !important;
  opacity: 0.46;
}

body.landing-3d .console-scanline {
  display: none;
}

body.landing-3d .depth-ticker-track {
  animation-duration: 60s;
}

body.landing-3d .live-dot {
  animation: none !important;
}

body.landing-3d .signal-console-shell.depth-console,
body.landing-3d .signal-feed-frame,
body.landing-3d .pricing-card,
body.landing-3d .depth-feature-card,
body.landing-3d .depth-pain,
body.landing-3d .depth-terminal,
body.landing-3d .founder-media {
  background:
    linear-gradient(145deg, rgba(222, 238, 230, 0.05), rgba(222, 238, 230, 0.016));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  contain: layout paint;
}

body.landing-3d .scanner-board,
body.landing-3d .trade-ticket,
body.landing-3d .confirmation-panel,
body.landing-3d .signal-card {
  background: rgba(6, 17, 22, 0.74);
  contain: layout paint;
}

body.landing-3d .depth-reveal {
  will-change: auto;
}

@media (max-width: 860px) {
  body.landing-3d .depth-wave,
  body.landing-3d .depth-ticker {
    display: none;
  }
}

/* Landing readability pass: cleaner middle scene, stronger panels, less haze. */
body.landing-3d .depth-wave {
  display: none;
}

body.landing-3d .logo-product,
body.landing-3d .nav-link,
.depth-kicker,
.depth-tag,
.depth-panel-label span,
.signal-console-top span,
.scanner-board-head span,
.ticket-topline span,
.confirmation-head span,
.feed-title,
.feed-live,
.feed-footer,
.pricing-plan-name,
.pricing-ribbon,
.depth-footer,
.depth-product-line,.asset-pill,
.sc-direction,
.ticket-pair-row strong,
.ticket-confidence span,
.trade-level-grid span,
.signal-pipeline span,
.depth-feature-card span,
.process-step > span,
.depth-pain > span,
body.landing-3d .sc-time {
  letter-spacing: 0;
}

body.landing-3d .logo-product,
body.landing-3d .nav-link,.depth-kicker,
.depth-tag,
.depth-panel-label span,
.signal-console-top span,
.scanner-board-head span,
.ticket-topline span,
.confirmation-head span,
.feed-title,
.feed-live,
.feed-footer,
.depth-product-line,
.pricing-plan-name,
body.landing-3d .sc-time {
  font-size: 0.78rem;
}

body.landing-3d .nav-link,
body.landing-3d .logo-product,
.depth-product-line,
.depth-panel-label,
.signal-console-top,
.scanner-board-head,
.ticket-topline,
.confirmation-head,
body.landing-3d .feed-topbar,
body.landing-3d .feed-footer,
.depth-scene-count,body.landing-3d .sc-conf-row,
body.landing-3d .sc-levels,
body.landing-3d .sc-time {
  color: rgba(222, 238, 230, 0.74);
}

.depth-copy,
.ticket-confidence p,
.depth-pain p,
.process-step p,
.depth-feature-card p,
body.landing-3d .pricing-tagline,
body.landing-3d .pricing-features li,
.about-para {
  color: rgba(222, 238, 230, 0.78);
}

.ticket-confidence p,
.depth-pain p,
.process-step p,
.depth-feature-card p,
body.landing-3d .pricing-tagline {
  font-size: clamp(1.02rem, 1.08vw, 1.16rem);
  line-height: 1.68;
}

.depth-kicker,
.depth-tag {
  color: var(--depth-green-bright);
  font-size: clamp(0.78rem, 0.8vw, 0.9rem);
}

body.landing-3d .depth-btn,
body.landing-3d .btn-nav {
  font-size: 0.76rem;
}

body.landing-3d .signal-console-shell.depth-console,
body.landing-3d .signal-feed-frame,
body.landing-3d .pricing-card,
body.landing-3d .depth-feature-card,
body.landing-3d .depth-pain,
body.landing-3d .depth-terminal,
body.landing-3d .founder-media {
  border-color: rgba(222, 238, 230, 0.15);
  background:
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(15, 168, 110, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(13, 26, 36, 0.98), rgba(6, 17, 22, 0.96));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.landing-3d .scanner-board,
body.landing-3d .trade-ticket,
body.landing-3d .confirmation-panel,
body.landing-3d .signal-card,
.trade-level-grid div,
.signal-pipeline span {
  background: #0d1a24;
}

.confirmation-item {
  background: #102230;
  border-color: rgba(222, 238, 230, 0.12);
}

.trade-level-grid,
.signal-pipeline {
  border-color: rgba(222, 238, 230, 0.14);
  background: rgba(222, 238, 230, 0.14);
}

.depth-system-scene {
  width: min(100% - clamp(110px, 16vw, 250px), 1680px);
  margin-right: auto;
  margin-left: auto;
  padding-top: 22px;
}

.depth-system-head {
  max-width: 1120px;
  margin-bottom: clamp(20px, 3vh, 36px);
}

.depth-system-head .depth-heading {
  max-width: 1120px;
  font-size: clamp(2.55rem, 4.45vw, 5rem);
}

.depth-system-head .depth-copy {
  max-width: 900px;
}

.depth-system-grid {
  display: grid;
  grid-template-columns: minmax(440px, 0.95fr) minmax(520px, 1.05fr);
  gap: clamp(24px, 4vw, 62px);
  align-items: start;
}

.depth-system-main {
  transform: translateZ(96px);
}

.depth-system-side {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  transform: translateZ(118px) rotateY(-4deg);
}

.depth-system-steps {
  margin-top: 0;
}

.depth-system-steps .process-step {
  padding: clamp(15px, 1.85vh, 22px) 0;
}

.depth-system-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.depth-system-features .depth-feature-card {
  min-height: 176px;
  padding: clamp(16px, 1.8vw, 24px);
}

.depth-system-side .feature-signal-feed {
  padding: clamp(16px, 1.8vw, 22px);
}

.depth-system-side .signal-card {
  min-width: min(360px, 72vw);
}

.feature-story-card,
.feature-chart-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(220, 232, 229, 0.13);
  background: linear-gradient(145deg, #162b3a, #0d1a24);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.feature-story-card {
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  padding: clamp(22px, 3.1vw, 44px);
  transform: translateZ(96px);
}

.feature-story-eyebrow,
.feature-chart-top span,
.feature-signal-summary span,
.feature-confirmation-row span {
  color: #9aa9b3;
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.feature-story-card h3 {
  max-width: 760px;
  margin: 0;
  color: #eef5f1;
  font-size: 2.45rem;
  font-weight: 800;
  line-height: 1.06;
}

.feature-story-card > p {
  max-width: 780px;
  margin: 0;
  color: #b8c5c0;
  font-size: 1.08rem;
  line-height: 1.72;
}

.feature-flow-list {
  display: grid;
  gap: 12px;
}

.feature-flow-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(220, 232, 229, 0.1);
  background: #0d1a24;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.feature-flow-step.is-current {
  border-color: rgba(18, 184, 121, 0.42);
  background: #102230;
  transform: translateX(6px);
}

.feature-flow-step > span {
  display: grid;
  place-items: center;
  width: 32px;
  aspect-ratio: 1;
  border: 1px solid rgba(18, 184, 121, 0.34);
  color: #12b879;
  font-weight: 800;
}

.feature-flow-step strong {
  display: block;
  color: #eef5f1;
  font-size: 1.08rem;
}

.feature-flow-step p {
  margin: 5px 0 0;
  color: #b8c5c0;
  font-size: 0.98rem;
  line-height: 1.58;
}

.feature-chart-card {
  padding: clamp(18px, 2.3vw, 30px);
  transform: translateZ(118px) rotateY(-4deg);
}

.feature-chart-top,
.feature-signal-summary,
.feature-confirmation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feature-chart-top strong {
  color: #eef5f1;
  font-size: 1.2rem;
  font-weight: 800;
}

.feature-chart-wrap {
  position: relative;
  min-height: clamp(260px, 28vw, 440px);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(220, 232, 229, 0.11);
  background:
    linear-gradient(rgba(220, 232, 229, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 232, 229, 0.028) 1px, transparent 1px),
    #080c10;
  background-size: 42px 42px;
}

.feature-chart-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feature-chart-area {
  fill: url(#featureChartFill);
}

.feature-chart-line {
  fill: none;
  stroke: #12b879;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-entry-line {
  stroke: rgba(220, 232, 229, 0.34);
  stroke-width: 1;
  stroke-dasharray: 8 10;
}

.feature-chart-track {
  animation: feature-chart-pan 18s linear infinite;
  transform-origin: center;
}

.feature-target-line {
  stroke: rgba(18, 184, 121, 0.34);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
}

.feature-target-marker {
  fill: #12b879;
  stroke: #dce8e5;
  stroke-width: 3;
  filter: drop-shadow(0 0 12px rgba(18, 184, 121, 0.35));
}

.feature-target-cross {
  fill: none;
  stroke: rgba(220, 232, 229, 0.74);
  stroke-width: 2;
  stroke-linecap: round;
}

.feature-trade-callout {
  position: absolute;
  left: clamp(18px, 2.2vw, 34px);
  top: clamp(22px, 3vw, 46px);
  display: grid;
  gap: 6px;
  min-width: 164px;
  padding: 16px;
  border: 1px solid rgba(18, 184, 121, 0.32);
  background: #102230;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

.feature-trade-callout span,
.feature-trade-callout em {
  color: #9aa9b3;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.feature-trade-callout strong {
  color: #12b879;
  font-size: 2.8rem;
  line-height: 1;
}

.feature-target-pin {
  position: absolute;
  left: 67%;
  top: 28%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 232, 229, 0.18);
  background: rgba(6, 17, 22, 0.88);
  transform: translate(-50%, -100%);
}

.feature-target-pin span {
  color: #9aa9b3;
  font-size: 0.72rem;
  font-weight: 800;
}

.feature-target-pin strong {
  color: #dce8e5;
  font-size: 1rem;
}

.feature-signal-summary {
  margin-top: 14px;
}

.feature-signal-summary div {
  flex: 1 1 0;
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(220, 232, 229, 0.11);
  background: #0d1a24;
}

.feature-signal-summary strong {
  color: #eef5f1;
  font-size: 1.08rem;
}

.feature-confirmation-row {
  flex-wrap: wrap;
  margin-top: 14px;
}

.feature-confirmation-row span {
  position: relative;
  flex: 1 1 150px;
  padding: 12px 12px 12px 28px;
  border: 1px solid rgba(220, 232, 229, 0.1);
  background: #0d1a24;
  color: #dce8e5;
}

.feature-confirmation-row span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #12b879;
  transform: translateY(-50%);
}

@keyframes feature-chart-pan {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-130px);
  }
}

@media (min-width: 1800px) {
  .depth-system-grid {
    grid-template-columns: minmax(520px, 0.92fr) minmax(680px, 1.08fr);
  }
}

@media (max-width: 1180px) {
  .depth-system-scene {
    width: min(100% - 34px, 760px);
    margin-right: auto;
    margin-left: auto;
  }

  .depth-system-grid,
  .depth-system-features {
    grid-template-columns: 1fr;
  }

  .depth-system-side,
  .depth-system-main,
  .feature-story-card,
  .feature-chart-card {
    transform: none;
  }
}

@media (max-width: 860px) {
  .landing-depth,
  .depth-stage,
  .depth-scene {
    overflow-x: hidden;
  }

  .depth-inner {
    width: calc(100% - 48px);
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
  }

  .depth-radar-object {
    top: 22%;
    right: -78px;
    width: 230px;
    opacity: 0.16;
    transform: translate3d(0, -50%, 0) rotateZ(-12deg) scale(0.86);
  }

  body.landing-3d .logo-product,
  body.landing-3d .nav-link,  .depth-kicker,
  .depth-tag,
  .depth-panel-label span,
  .signal-console-top span,
  .scanner-board-head span,
  .ticket-topline span,
  .confirmation-head span,
  .feed-title,
  .feed-live,
  .feed-footer,
  .depth-product-line,
  .pricing-plan-name,
  body.landing-3d .sc-time {
    font-size: 0.76rem;
  }

  .depth-system-scene {
    padding-top: 0;
  }

  .depth-system-head .depth-heading {
    font-size: clamp(2.2rem, 10vw, 3.7rem);
  }

  .feature-story-card,
  .feature-chart-card {
    padding: 18px;
  }

  .feature-story-card h3 {
    font-size: 2rem;
  }

  .feature-flow-step {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 14px;
  }

  .feature-flow-step.is-current {
    transform: none;
  }

  .feature-chart-wrap {
    min-height: 300px;
  }

  .feature-trade-callout {
    right: auto;
    left: 14px;
    top: 14px;
    min-width: 136px;
  }

  .feature-signal-summary {
    flex-direction: column;
  }

  .feature-signal-summary div {
    width: 100%;
  }

  .depth-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 340px);
    max-width: 100%;
  }

  body.landing-3d .depth-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: 16px;
    padding-left: 16px;
    white-space: normal;
  }

  .depth-hero-copy,
  .depth-hero-console,
  .signal-console-shell.depth-console,
  .signal-console-grid,
  .scanner-board,
  .trade-ticket,
  .confirmation-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .depth-hero-copy {
    max-width: 100%;
    overflow: hidden;
  }

  .depth-hero-name {
    font-size: clamp(2.7rem, 13.86vw, 3.78rem);
  }

  .depth-slogan {
    font-size: clamp(1.95rem, 8.7vw, 2.8rem);
    max-width: calc(100vw - 72px);
    white-space: normal;
  }

  .depth-slogan span {
    display: block;
  }

  .depth-copy {
    max-width: calc(100vw - 72px);
  }

  .depth-panel-label {
    flex-direction: column;
    align-items: flex-start;
  }

  .signal-console-shell.depth-console {
    padding: 14px;
  }

  .signal-console-top,
  .scanner-board-head,
  .ticket-topline,
  .confirmation-head,
  .ticket-pair-row,
  .ticket-confidence {
    flex-wrap: wrap;
  }

  .signal-console-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .scanner-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .scanner-row strong {
    grid-column: 1 / -1;
  }
}

@media (max-height: 820px) and (min-width: 861px) {
  .depth-system-head {
    margin-bottom: 18px;
  }

  .depth-system-head .depth-heading {
    font-size: clamp(2.2rem, 3.9vw, 4.35rem);
  }

  .depth-system-steps .process-step {
    padding: 12px 0;
  }

  .depth-system-features .depth-feature-card {
    min-height: 150px;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-sweep,
  .radar-node {
    animation: none !important;
  }
}

/* Solid modern theme pass: reserve green for brand/action/status, make the UI more graphite. */
body.landing-3d {
  --depth-bg: #061116;
  --depth-panel: #0d1a24;
  --depth-panel-solid: #0d1a24;
  --depth-fg: #eef5f1;
  --depth-dim: #b8c5c0;
  --depth-muted: #7f8d89;
  --depth-line: #28323a;
  --depth-surface: #10151a;
  --depth-surface-2: #102230;
  --depth-surface-3: #061116;
  --depth-steel: #9aa9b3;
  --depth-ice: #dce8e5;
  --depth-green: #12b879;
  --depth-green-bright: #22c987;
  --depth-green-soft: rgba(18, 184, 121, 0.1);
  --depth-green-glow: rgba(18, 184, 121, 0.16);
  background: #061116;
}

body.landing-3d::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(220, 232, 229, 0.06), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(154, 169, 179, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent 38%, rgba(154, 169, 179, 0.035));
}

body.landing-3d .navbar {
  background: #061116;
  border-bottom: 1px solid rgba(220, 232, 229, 0.08);
}

body.landing-3d .navbar.scrolled {
  background: #081822;
  border-bottom-color: rgba(220, 232, 229, 0.12);
}

/* nav-center on the landing holds the Contact Us / About buttons (which carry
   their own styling), not a row of text links — so it must NOT render as a
   bordered "menu pill". Override the core .nav-center pill (border/background/
   padding) at every width so there's no box drawn around the buttons. */
body.landing-3d .nav-center {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

body.landing-3d .nav-right {
  gap: 10px;
}

body.landing-3d .logo-product,
body.landing-3d .nav-link {
  color: #b8c5c0;
}

body.landing-3d .nav-link:hover {
  color: #eef5f1;
}

body.landing-3d .btn-nav,
body.landing-3d .depth-btn-secondary {
  border-color: rgba(220, 232, 229, 0.18);
  background: #0d1a24;
  color: #dce8e5;
  box-shadow: none;
}

body.landing-3d .btn-nav:hover,
body.landing-3d .depth-btn-secondary:hover {
  border-color: rgba(220, 232, 229, 0.32);
  background: #162b3a;
  color: #ffffff;
}

body.landing-3d .btn-nav-primary {
  border-color: #12b879;
  background: #12b879;
  color: #06100c;
  box-shadow: 0 16px 36px rgba(18, 184, 121, 0.2);
}

body.landing-3d .btn-nav-primary:hover {
  border-color: #24ce8c;
  background: #24ce8c;
  color: #06100c;
  box-shadow: 0 18px 44px rgba(18, 184, 121, 0.28);
}

body.landing-3d .btn-nav-secondary {
  border-color: rgba(220, 232, 229, 0.18);
  background: #0d1a24;
  color: #dce8e5;
}

body.landing-3d .depth-btn-primary {
  border-color: #12b879;
  background: #12b879;
  color: #06100c;
  box-shadow: 0 18px 44px rgba(18, 184, 121, 0.18);
}

body.landing-3d .depth-btn-primary:hover {
  border-color: #22c987;
  background: #22c987;
  box-shadow: 0 22px 54px rgba(18, 184, 121, 0.24);
}

.depth-grid-bg {
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(220, 232, 229, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 232, 229, 0.028) 1px, transparent 1px);
}

.depth-radar-object {
  opacity: 0.19;
  filter: drop-shadow(0 0 30px rgba(220, 232, 229, 0.1));
}

.radar-ring {
  border-color: rgba(220, 232, 229, 0.16);
  box-shadow: inset 0 0 28px rgba(220, 232, 229, 0.025), 0 0 24px rgba(220, 232, 229, 0.035);
}

.radar-sweep {
  background: conic-gradient(from 0deg, rgba(220, 232, 229, 0.24), rgba(154, 169, 179, 0.08) 18deg, transparent 58deg);
}

.radar-axis {
  background: linear-gradient(180deg, transparent, rgba(220, 232, 229, 0.14), transparent);
}

.radar-node {
  background: #dce8e5;
  box-shadow: 0 0 16px rgba(220, 232, 229, 0.32);
}

.radar-core,
.live-dot {
  background: #12b879;
  box-shadow: 0 0 14px rgba(18, 184, 121, 0.32);
}

.depth-kicker,
.depth-tag,
.depth-product-line,
.depth-panel-label span,
.signal-console-top span,
.scanner-board-head span,
.ticket-topline span,
.confirmation-head span,
.feed-title,
.feed-footer,
.depth-footer,body.landing-3d .sc-conf-row,
body.landing-3d .sc-levels,
body.landing-3d .sc-time {
  color: #9aa9b3;
}

.depth-tag::before {
  background: #9aa9b3;
  box-shadow: none;
}

.depth-slogan span,
.depth-heading span,
.depth-cta-heading span {
  color: #eef5f1;
}

.depth-panel-label strong,
.signal-console-top strong,
.scanner-board-head em,
.ticket-topline em,
.confirmation-head strong,
.asset-pill,
.ticket-confidence span,
.trade-level-grid span,
.signal-pipeline span,
.depth-feature-card span,
.process-step > span,
.depth-pain > span,
body.landing-3d .pricing-plan-name,
body.landing-3d .feed-live {
  color: #dce8e5;
}

body.landing-3d .signal-console-shell.depth-console,
body.landing-3d .signal-feed-frame,
body.landing-3d .pricing-card,
body.landing-3d .depth-feature-card,
body.landing-3d .depth-pain,
body.landing-3d .depth-terminal,
body.landing-3d .founder-media {
  border-color: rgba(220, 232, 229, 0.13);
  background: linear-gradient(145deg, #162b3a, #0d1a24);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.signal-console-shell.depth-console {
  background: linear-gradient(145deg, #162b3a, #0d1a24);
}

body.landing-3d .scanner-board,
body.landing-3d .trade-ticket,
body.landing-3d .confirmation-panel,
body.landing-3d .signal-card,
.trade-level-grid div,
.signal-pipeline span,
.confirmation-item,
.scanner-row {
  border-color: rgba(220, 232, 229, 0.11);
  background: #0d1a24;
}

.scanner-row-hot {
  border-color: rgba(220, 232, 229, 0.2);
  background: #102230;
}

.scan-track,
.sc-bar {
  background: #162b3a;
}

.scan-track span,
.sc-fill {
  background: linear-gradient(90deg, #8b9aa5, #dce8e5);
  box-shadow: none;
}

body.landing-3d .short-fill {
  background: linear-gradient(90deg, #c45d61, #ef8b8f);
}

.ticket-pair-row strong,
body.landing-3d .pricing-ribbon {
  background: #dce8e5;
  color: #07100d;
}

.confidence-ring {
  background:
    radial-gradient(circle, #0d1a24 58%, transparent 60%),
    conic-gradient(#dce8e5 0 84%, #29333a 84% 100%);
  box-shadow: none;
}

.confirmation-item > span,
body.landing-3d .pricing-features li::before {
  background: #9aa9b3;
  box-shadow: none;
}

body.landing-3d .pricing-tier-featured {
  border-color: rgba(220, 232, 229, 0.3);
  background: linear-gradient(145deg, #162b3a, #102230);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.founder-photo {
  border-color: rgba(220, 232, 229, 0.26);
  background: #102230;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.founder-photo::before {
  border-color: rgba(220, 232, 229, 0.18);
}

.founder-photo::after {
  border-color: rgba(220, 232, 229, 0.1);
}

.avatar-fallback {
  color: #dce8e5;
}

@media (max-width: 860px) {
  .depth-radar-object {
    opacity: 0.11;
  }
}

/* Scroll-stage upgrade: normal hero scroll, then pinned 3D sections. */
body.landing-3d {
  --depth-mono: "Inter", "Manrope", system-ui, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

body.landing-3d .nav-link,
body.landing-3d .btn:not(.btn-drawer),
body.landing-3d .btn-nav,
.depth-kicker,
.depth-tag,
.depth-panel-label span,
.signal-console-top span,
.scanner-board-head span,
.ticket-topline span,
.confirmation-head span,
.feed-title,
.feed-live,
.feed-footer,
.pricing-plan-name,
.pricing-ribbon,
.depth-footer,
.depth-product-line,.asset-pill,
.sc-direction,
.ticket-pair-row strong,
.ticket-confidence span,
.trade-level-grid span,
.signal-pipeline span,
.depth-feature-card span,
.process-step > span,
body.landing-3d .sc-time {
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body.landing-3d .nav-link,
body.landing-3d .btn-nav {
  border-radius: 8px;
  font-size: clamp(0.76rem, 0.74vw, 0.86rem);
  letter-spacing: 0;
  text-transform: none;
}

body.landing-3d .nav-center .nav-link {
  padding: 8px 11px;
}

body.landing-3d .nav-right .nav-link {
  padding-inline: 8px;
}

.landing-depth {
  position: relative;
  inset: auto;
  /* Use svh so the container matches the hero (100svh) + sticky stage (100svh). */
  min-height: 200svh;
  overflow: visible;
}

.landing-hero-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  /* svh ensures the hero fills the actual usable viewport (not the
     viewport-with-browser-chrome that vh targets on some devices). */
  padding: clamp(96px, 11svh, 140px) 0 clamp(80px, 11svh, 130px);
}

.landing-hero-section .depth-inner {
  max-height: none;
}

.landing-hero-section .depth-reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.depth-stage {
  position: sticky;
  inset: auto;
  top: 0;
  /* svh fills the visible viewport excluding browser chrome — prevents
     a gap at the bottom on browsers where vh > actual usable height. */
  height: 100svh;
  min-height: 720px;
  z-index: 5;
  background: var(--depth-bg);
}

.depth-stage-anchors {
  position: relative;
  height: 0;
  overflow: visible;
}

.depth-stage-anchors span {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.depth-camera {
  position: absolute;
}

.market-chart-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  overflow: hidden;
  contain: layout paint style;
  /* The chart should remain continuous across the hero. Text readability is
     handled by restrained line opacity instead of erasing its center. */
  -webkit-mask-image: none;
  mask-image: none;
}

.chart-scroll-track {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
  animation: chart-scroll 34s linear infinite;
}

@keyframes chart-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .chart-scroll-track { animation: none; }
}

.market-price-chart {
  display: block;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
}

.chart-price-flow {
  opacity: 0.9;
}

.chart-line-main,
.chart-line-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-line-main {
  stroke: rgba(35, 209, 139, 0.16);
  stroke-width: 1.35;
}

.chart-line-glow {
  stroke: rgba(35, 209, 139, 0.04);
  stroke-width: 6;
}

body.landing-3d .depth-ticker,
.depth-radar-object {
  display: none !important;
}

@media (max-width: 860px) {
  .landing-hero-section {
    padding: 96px 0 96px;
  }

  .depth-stage {
    min-height: 100vh;
  }

  .market-chart-bg {
    inset: 0;
    height: 100%;
    opacity: 0.2;
  }
}


/* =====================================================================
   Session 53 — Light theme overrides for the landing-3d scene system.
   The page is variable-driven, so flipping the --depth-* tokens does
   most of the work; a few surfaces with hardcoded rgba() gradients get
   targeted overrides below.
   ===================================================================== */

[data-theme="light"] body.landing-3d {
  --depth-bg:           #f8f9fc;
  --depth-panel:        rgba(255, 255, 255, 0.94);
  --depth-panel-solid:  #ffffff;
  --depth-fg:           #0f1216;
  --depth-dim:          rgba(15, 18, 22, 0.72);
  --depth-muted:        rgba(15, 18, 22, 0.50);
  --depth-line:         rgba(15, 18, 22, 0.10);
  --depth-green:        #15c384;
  --depth-green-bright: #10a972;
  --depth-green-soft:   rgba(21, 195, 132, 0.10);
  --depth-green-glow:   rgba(21, 195, 132, 0.20);
  --depth-red:          #b91c1c;
  --depth-amber:        #b45309;
  background: var(--depth-bg);
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d::before {
  background:
    radial-gradient(circle at 20% 22%, rgba(21, 195, 132, 0.08), transparent 28%),
    radial-gradient(circle at 82% 76%, rgba(180, 83, 9, 0.06), transparent 32%),
    linear-gradient(135deg, rgba(15, 18, 22, 0.03), transparent 35%, rgba(21, 195, 132, 0.04));
}

[data-theme="light"] body.landing-3d .navbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.55) 72%, transparent);
}
[data-theme="light"] body.landing-3d .navbar.scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78));
  border-bottom: 1px solid rgba(15, 18, 22, 0.06);
  box-shadow: 0 1px 0 rgba(15, 18, 22, 0.04);
}

[data-theme="light"] body.landing-3d .logo-product {
  color: rgba(15, 18, 22, 0.52);
}

[data-theme="light"] body.landing-3d .nav-link {
  color: rgba(15, 18, 22, 0.62);
}
[data-theme="light"] body.landing-3d .nav-link:hover,
[data-theme="light"] body.landing-3d .nav-link.is-active {
  color: var(--depth-fg);
}

/* Buttons */
[data-theme="light"] body.landing-3d .btn-nav-secondary {
  color: var(--depth-fg);
  border-color: rgba(15, 18, 22, 0.16);
  background: transparent;
}
[data-theme="light"] body.landing-3d .btn-nav-secondary:hover {
  border-color: var(--depth-green);
  background: var(--depth-green-soft);
}
[data-theme="light"] body.landing-3d .btn-nav-primary {
  color: #06110d;
  background: var(--depth-green);
  border-color: var(--depth-green);
  box-shadow: 0 6px 18px var(--depth-green-glow);
}
[data-theme="light"] body.landing-3d .btn-nav-primary:hover {
  background: var(--depth-green-bright);
  border-color: var(--depth-green-bright);
}

/* Theme toggle button on landing navbar */
[data-theme="light"] body.landing-3d .nav-theme-toggle {
  color: var(--depth-fg);
  border-color: rgba(15, 18, 22, 0.16);
}
[data-theme="light"] body.landing-3d .nav-theme-toggle:hover {
  color: var(--depth-green);
  border-color: var(--depth-green);
  background: var(--depth-green-soft);
}

/* Hero copy — currently uses light-on-dark text. Flip to dark-on-light. */
[data-theme="light"] body.landing-3d .depth-headline,
[data-theme="light"] body.landing-3d .depth-hero h1,
[data-theme="light"] body.landing-3d .depth-hero-title,
[data-theme="light"] body.landing-3d .depth-system-title,
[data-theme="light"] body.landing-3d .depth-section-title,
[data-theme="light"] body.landing-3d .depth-pricing-title,
[data-theme="light"] body.landing-3d .depth-cta-title {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .depth-copy,
[data-theme="light"] body.landing-3d .depth-hero-sub,
[data-theme="light"] body.landing-3d .depth-section-sub,
[data-theme="light"] body.landing-3d .depth-pricing-sub,
[data-theme="light"] body.landing-3d .depth-cta-sub,
[data-theme="light"] body.landing-3d .depth-scene-eyebrow {
  color: var(--depth-dim);
}

/* Cards / panels with hardcoded dark backgrounds (signal pipeline,
   process cards, pricing tiers, founder, cta panel). */
[data-theme="light"] body.landing-3d .depth-signal-pipeline,
[data-theme="light"] body.landing-3d .signal-console-shell,
[data-theme="light"] body.landing-3d .signal-console-row,
[data-theme="light"] body.landing-3d .depth-pricing-tier,
[data-theme="light"] body.landing-3d .pricing-tier,
[data-theme="light"] body.landing-3d .depth-feature-card,
[data-theme="light"] body.landing-3d .feature-card,
[data-theme="light"] body.landing-3d .depth-process-step,
[data-theme="light"] body.landing-3d .depth-trust-card,
[data-theme="light"] body.landing-3d .depth-cta-panel,
[data-theme="light"] body.landing-3d .depth-founder-panel,
[data-theme="light"] body.landing-3d .market-ticker-strip,
[data-theme="light"] body.landing-3d .auth-card {
  background: var(--depth-panel-solid);
  border-color: var(--depth-line);
  box-shadow: 0 10px 40px rgba(15, 18, 22, 0.06);
  color: var(--depth-fg);
}

/* Featured pricing tier keeps a soft brand tint */
[data-theme="light"] body.landing-3d .depth-pricing-tier-featured,
[data-theme="light"] body.landing-3d .pricing-tier-featured {
  background: linear-gradient(180deg, rgba(21, 195, 132, 0.06), var(--depth-panel-solid));
  border-color: rgba(21, 195, 132, 0.35);
}

/* Trending ticker bar / partner strip readability */
[data-theme="light"] body.landing-3d .market-ticker-strip .ticker-item,
[data-theme="light"] body.landing-3d .market-ticker-strip {
  color: var(--depth-fg);
}

/* Signal pipeline accent text */
[data-theme="light"] body.landing-3d .signal-console-shell *,
[data-theme="light"] body.landing-3d .depth-signal-pipeline * {
  border-color: var(--depth-line);
}
[data-theme="light"] body.landing-3d .signal-console-shell .badge,
[data-theme="light"] body.landing-3d .signal-console-shell .label,
[data-theme="light"] body.landing-3d .signal-console-shell .signal-meta {
  color: var(--depth-dim);
}

/* Footer (if shown on any non-landing-3d non-dashboard page) inherits from main.css overrides. */

/* =====================================================================
   Session 54 — Cleaner landing light theme that matches the dashboard's
   white-card aesthetic. Flatten the dark glow/gradient surfaces, force
   .logo-b to pure black, and use the same surface tokens dashboard.css
   uses so the two contexts feel like the same product.
   ===================================================================== */

[data-theme="light"] body.landing-3d {
  /* Match dashboard.css light theme tokens exactly */
  --depth-bg:           #fbfbfd;
  --depth-panel:        #ffffff;
  --depth-panel-solid:  #ffffff;
  --depth-fg:           #0f1216;
  --depth-dim:          #4a4e58;
  --depth-muted:        #898d97;
  --depth-line:         #ececf0;
  --depth-green:        #15c384;
  --depth-green-bright: #10a972;
  --depth-green-soft:   rgba(21, 195, 132, 0.10);
  --depth-green-glow:   rgba(21, 195, 132, 0.18);
}

/* Flatten the dark ambient gradients that previously gave the page its
   "scene depth" feel — in light mode those just look like dirty smudges. */
[data-theme="light"] body.landing-3d {
  background: #fbfbfd;
}

[data-theme="light"] body.landing-3d::before {
  background:
    radial-gradient(circle at 20% 22%, rgba(21, 195, 132, 0.05), transparent 30%),
    radial-gradient(circle at 82% 76%, rgba(8, 145, 178, 0.04), transparent 32%);
  opacity: 0.7;
}

/* Brand wordmark — black "Bloq", green "Bot", muted subtitle */
[data-theme="light"] body.landing-3d .logo-b { color: #000 !important; }
[data-theme="light"] body.landing-3d .logo-bot { color: var(--depth-green) !important; }
[data-theme="light"] body.landing-3d .logo-product { color: var(--depth-muted) !important; }

/* Navbar: pure white surface, subtle bottom border (dashboard-style) */
[data-theme="light"] body.landing-3d .navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--depth-line);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
[data-theme="light"] body.landing-3d .navbar.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--depth-line);
  box-shadow: 0 1px 0 rgba(15, 17, 21, 0.04);
}

/* Hero / scene typography: solid black headings, dashboard-style secondary text */
[data-theme="light"] body.landing-3d h1,
[data-theme="light"] body.landing-3d h2,
[data-theme="light"] body.landing-3d h3,
[data-theme="light"] body.landing-3d .depth-headline,
[data-theme="light"] body.landing-3d .depth-hero-title,
[data-theme="light"] body.landing-3d .depth-hero h1,
[data-theme="light"] body.landing-3d .depth-system-title,
[data-theme="light"] body.landing-3d .depth-section-title,
[data-theme="light"] body.landing-3d .depth-pricing-title,
[data-theme="light"] body.landing-3d .depth-cta-title,
[data-theme="light"] body.landing-3d .depth-founder-name {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d p,
[data-theme="light"] body.landing-3d .depth-copy,
[data-theme="light"] body.landing-3d .depth-hero-sub,
[data-theme="light"] body.landing-3d .depth-section-sub,
[data-theme="light"] body.landing-3d .depth-pricing-sub,
[data-theme="light"] body.landing-3d .depth-cta-sub,
[data-theme="light"] body.landing-3d .depth-process-step p,
[data-theme="light"] body.landing-3d .depth-trust-card p,
[data-theme="light"] body.landing-3d .depth-pricing-tier p,
[data-theme="light"] body.landing-3d .depth-feature-card p,
[data-theme="light"] body.landing-3d .depth-founder-bio {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .depth-scene-eyebrow,
[data-theme="light"] body.landing-3d .depth-eyebrow,
[data-theme="light"] body.landing-3d .signal-console-shell .label {
  color: var(--depth-muted);
}

/* Cards / panels: pure white, 1px subtle border, dashboard-style shadow.
   This is the biggest visual win — all the dark glassmorphic panels
   collapse into clean white cards. */
[data-theme="light"] body.landing-3d .depth-signal-pipeline,
[data-theme="light"] body.landing-3d .signal-console-shell,
[data-theme="light"] body.landing-3d .signal-console-row,
[data-theme="light"] body.landing-3d .depth-pricing-tier,
[data-theme="light"] body.landing-3d .pricing-tier,
[data-theme="light"] body.landing-3d .depth-feature-card,
[data-theme="light"] body.landing-3d .feature-card,
[data-theme="light"] body.landing-3d .depth-process-step,
[data-theme="light"] body.landing-3d .depth-trust-card,
[data-theme="light"] body.landing-3d .depth-cta-panel,
[data-theme="light"] body.landing-3d .depth-founder-panel,
[data-theme="light"] body.landing-3d .market-ticker-strip,
[data-theme="light"] body.landing-3d .auth-card,
[data-theme="light"] body.landing-3d .invite-card,
[data-theme="light"] body.landing-3d .depth-system-panel,
[data-theme="light"] body.landing-3d .depth-stat-card {
  background: #ffffff !important;
  border: 1px solid var(--depth-line) !important;
  box-shadow: 0 1px 3px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
  color: var(--depth-fg);
}

/* Featured pricing tier keeps a soft green tint, dashboard-style */
[data-theme="light"] body.landing-3d .depth-pricing-tier-featured,
[data-theme="light"] body.landing-3d .pricing-tier-featured {
  background: linear-gradient(180deg, rgba(21, 195, 132, 0.06), #ffffff) !important;
  border-color: rgba(21, 195, 132, 0.4) !important;
}

/* Buttons: clean dashboard style */
[data-theme="light"] body.landing-3d .btn-nav-secondary {
  color: var(--depth-fg) !important;
  border: 1px solid var(--depth-line) !important;
  background: #ffffff !important;
}
[data-theme="light"] body.landing-3d .btn-nav-secondary:hover {
  border-color: var(--depth-green) !important;
  background: var(--depth-green-soft) !important;
  color: var(--depth-fg) !important;
}
[data-theme="light"] body.landing-3d .btn-nav-primary {
  color: #ffffff !important;
  background: var(--depth-green) !important;
  border: 1px solid var(--depth-green) !important;
  box-shadow: 0 4px 14px var(--depth-green-glow) !important;
}
[data-theme="light"] body.landing-3d .btn-nav-primary:hover {
  background: var(--depth-green-bright) !important;
  border-color: var(--depth-green-bright) !important;
}

[data-theme="light"] body.landing-3d .nav-theme-toggle {
  color: var(--depth-fg);
  border-color: var(--depth-line);
  background: #ffffff;
}
[data-theme="light"] body.landing-3d .nav-theme-toggle:hover {
  color: var(--depth-green);
  border-color: var(--depth-green);
  background: var(--depth-green-soft);
}

/* Trending ticker bar: white pill row matching dashboard */
[data-theme="light"] body.landing-3d .market-ticker-strip {
  background: #ffffff !important;
  border: 1px solid var(--depth-line) !important;
}
[data-theme="light"] body.landing-3d .market-ticker-strip .ticker-item {
  color: var(--depth-fg);
}

/* Remove all the dark inner glows / orbit halos that the scenes layer in */
[data-theme="light"] body.landing-3d .depth-orbit,
[data-theme="light"] body.landing-3d .depth-light,
[data-theme="light"] body.landing-3d .depth-glow,
[data-theme="light"] body.landing-3d .depth-pricing-section::before,
[data-theme="light"] body.landing-3d .depth-cta-panel::before {
  opacity: 0.25;
  mix-blend-mode: multiply;
}

/* Strong text inside cards (numbers, badges, prices) stays solid black */
[data-theme="light"] body.landing-3d .depth-pricing-tier strong,
[data-theme="light"] body.landing-3d .depth-feature-card strong,
[data-theme="light"] body.landing-3d .signal-console-shell strong,
[data-theme="light"] body.landing-3d .depth-stat-card strong {
  color: var(--depth-fg);
}

/* =====================================================================
   Session 54 completion - finish deeper landing light-mode surfaces
   ===================================================================== */

[data-theme="light"] body.landing-3d .market-chart-bg {
  opacity: 1;
  mix-blend-mode: multiply;
}

[data-theme="light"] body.landing-3d .chart-line-main {
  stroke: rgba(4, 120, 87, 0.18);
}

[data-theme="light"] body.landing-3d .chart-line-glow {
  stroke: rgba(4, 120, 87, 0.045);
}

[data-theme="light"] body.landing-3d .chart-line-soft {
  stroke: rgba(21, 195, 132, 0.34);
}

[data-theme="light"] body.landing-3d .depth-vignette {
  background:
    radial-gradient(ellipse 70% 58% at 50% 52%, transparent 28%, rgba(251, 251, 253, 0.54) 78%, #fbfbfd 100%),
    linear-gradient(180deg, rgba(251, 251, 253, 0.62), transparent 28%, rgba(251, 251, 253, 0.7));
}

[data-theme="light"] body.landing-3d .depth-grid-bg {
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(21, 195, 132, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 195, 132, 0.08) 1px, transparent 1px);
}

[data-theme="light"] body.landing-3d .depth-progress {
  box-shadow: 0 0 0 1px rgba(21, 195, 132, 0.14), 0 0 16px rgba(21, 195, 132, 0.18);
}


[data-theme="light"] body.landing-3d .depth-panel-label,
[data-theme="light"] body.landing-3d .signal-console-top,
[data-theme="light"] body.landing-3d .scanner-board-head,
[data-theme="light"] body.landing-3d .ticket-topline,
[data-theme="light"] body.landing-3d .confirmation-head {
  color: var(--depth-muted);
}

[data-theme="light"] body.landing-3d .signal-console-shell.depth-console,
[data-theme="light"] body.landing-3d .scanner-board,
[data-theme="light"] body.landing-3d .trade-ticket,
[data-theme="light"] body.landing-3d .confirmation-panel,
[data-theme="light"] body.landing-3d .feature-story-card,
[data-theme="light"] body.landing-3d .feature-chart-card,
[data-theme="light"] body.landing-3d .feature-trade-callout,
[data-theme="light"] body.landing-3d .feature-target-pin {
  background: #ffffff !important;
  border-color: var(--depth-line) !important;
  box-shadow: 0 1px 3px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04) !important;
}

[data-theme="light"] body.landing-3d .console-scanline {
  background: linear-gradient(180deg, transparent, rgba(21, 195, 132, 0.12), transparent);
  opacity: 0.52;
}

[data-theme="light"] body.landing-3d .scanner-row,
[data-theme="light"] body.landing-3d .confirmation-item,
[data-theme="light"] body.landing-3d .feature-flow-step,
[data-theme="light"] body.landing-3d .feature-signal-summary div,
[data-theme="light"] body.landing-3d .feature-confirmation-row span,
[data-theme="light"] body.landing-3d .trade-level-grid div,
[data-theme="light"] body.landing-3d .signal-pipeline span {
  color: var(--depth-fg);
  background: #f7f8fa !important;
  border-color: var(--depth-line) !important;
}

[data-theme="light"] body.landing-3d .scanner-row-hot,
[data-theme="light"] body.landing-3d .feature-flow-step.is-current {
  background: var(--depth-green-soft) !important;
  border-color: rgba(21, 195, 132, 0.34) !important;
}

[data-theme="light"] body.landing-3d .trade-level-grid,
[data-theme="light"] body.landing-3d .signal-pipeline {
  background: var(--depth-line);
  border-color: var(--depth-line);
}

[data-theme="light"] body.landing-3d .confidence-ring {
  background:
    radial-gradient(circle, #ffffff 58%, transparent 60%),
    conic-gradient(var(--depth-green) 0 84%, rgba(15, 17, 21, 0.10) 84% 100%);
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.08);
}

[data-theme="light"] body.landing-3d .feature-story-card h3,
[data-theme="light"] body.landing-3d .feature-flow-step strong,
[data-theme="light"] body.landing-3d .feature-chart-top strong,
[data-theme="light"] body.landing-3d .feature-signal-summary strong,
[data-theme="light"] body.landing-3d .ticket-pair-row h2,
[data-theme="light"] body.landing-3d .trade-level-grid strong,
[data-theme="light"] body.landing-3d .confirmation-item strong,
[data-theme="light"] body.landing-3d .feature-target-pin strong {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .feature-story-card > p,
[data-theme="light"] body.landing-3d .feature-flow-step p,
[data-theme="light"] body.landing-3d .ticket-confidence p,
[data-theme="light"] body.landing-3d .trade-level-grid span,
[data-theme="light"] body.landing-3d .confirmation-item em,
[data-theme="light"] body.landing-3d .feature-story-eyebrow,
[data-theme="light"] body.landing-3d .feature-chart-top span,
[data-theme="light"] body.landing-3d .feature-signal-summary span,
[data-theme="light"] body.landing-3d .feature-confirmation-row span,
[data-theme="light"] body.landing-3d .feature-trade-callout span,
[data-theme="light"] body.landing-3d .feature-trade-callout em,
[data-theme="light"] body.landing-3d .feature-target-pin span {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .feature-chart-wrap {
  background:
    linear-gradient(rgba(15, 17, 21, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 17, 21, 0.035) 1px, transparent 1px),
    #ffffff !important;
  border-color: var(--depth-line) !important;
}

[data-theme="light"] body.landing-3d .feature-entry-line {
  stroke: rgba(15, 17, 21, 0.28);
}

[data-theme="light"] body.landing-3d .feature-target-cross {
  stroke: rgba(15, 17, 21, 0.58);
}

[data-theme="light"] body.landing-3d .depth-hero-name em {
  text-shadow: 0 10px 34px rgba(21, 195, 132, 0.14);
}

/* =====================================================================
   Session 59 — Landing visual treatment aligned with the dashboard
   The layout stays the same. Surfaces are flattened: 1px borders, soft
   shadows, calmer backgrounds, Inter typography — mirroring the
   dashboard's Linear aesthetic. Also introduces the new hero alert
   preview component that replaces the busy "Live signal pipeline"
   mockup.
   ===================================================================== */

/* Calm the hero-side console (former signal-pipeline mockup) — used
   only if it ever shows again. The actual content is now the
   hero-alert-preview. */
body.landing-3d .signal-console-shell {
  background: rgba(13, 26, 36, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
}

/* ----- Hero alert preview (matches dashboard alert cards) ----- */

body.landing-3d .hero-alert-preview {
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(13, 26, 36, 0.94);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  font-family: 'Inter', system-ui, sans-serif;
}

body.landing-3d .hero-alert-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.landing-3d .hero-alert-preview-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #e8eaee;
}

body.landing-3d .hero-alert-pulse {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #15c384;
  box-shadow: 0 0 0 3px rgba(21, 195, 132, 0.18);
  animation: hero-alert-pulse 2.2s ease-in-out infinite;
}

@keyframes hero-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(21, 195, 132, 0.18); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

body.landing-3d .hero-alert-preview-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: rgba(232, 234, 238, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.landing-3d .hero-alert-preview-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

body.landing-3d .hero-alert-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(16, 34, 48, 0.85);
  animation: hero-alert-in 0.5s ease both;
}

body.landing-3d .hero-alert-card:nth-child(2) { animation-delay: 0.15s; }
body.landing-3d .hero-alert-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes hero-alert-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.landing-3d .hero-alert-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

body.landing-3d .hero-alert-no {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(21, 195, 132, 0.14);
  color: #2dd4a1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 2px;
}

body.landing-3d .hero-alert-ticker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #e8eaee;
  letter-spacing: 0.01em;
  margin-right: 4px;
}

body.landing-3d .hero-alert-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

body.landing-3d .hero-tag-long {
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
}

body.landing-3d .hero-tag-short {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

body.landing-3d .hero-tag-tf {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 234, 238, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.landing-3d .hero-alert-state {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

body.landing-3d .hero-state-ready {
  background: rgba(52, 211, 153, 0.22);
  color: #34d399;
}

body.landing-3d .hero-state-watching {
  background: rgba(34, 211, 238, 0.18);
  color: #22d3ee;
}

body.landing-3d .hero-alert-meter {
  display: grid;
  gap: 5px;
}

body.landing-3d .hero-alert-meter > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

body.landing-3d .hero-alert-meter > div:first-child span {
  color: rgba(232, 234, 238, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

body.landing-3d .hero-alert-meter > div:first-child strong {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #e8eaee;
}

body.landing-3d .hero-alert-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

body.landing-3d .hero-alert-fill {
  display: block;
  height: 100%;
  width: var(--fill, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(232, 234, 238, 0.3), #34d399);
  animation: hero-fill-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.landing-3d .hero-alert-card--short .hero-alert-fill {
  background: linear-gradient(90deg, rgba(232, 234, 238, 0.3), #f87171);
}

@keyframes hero-fill-grow {
  from { width: 0; }
  to   { width: var(--fill, 50%); }
}

body.landing-3d .hero-alert-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.landing-3d .hero-alert-levels > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body.landing-3d .hero-alert-levels dt {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(232, 234, 238, 0.5);
}

body.landing-3d .hero-alert-levels dd {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #e8eaee;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.landing-3d .hero-alert-preview-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: rgba(232, 234, 238, 0.45);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ----- Light mode for the hero alert preview ----- */

[data-theme="light"] body.landing-3d .hero-alert-preview {
  background: #ffffff;
  border-color: #ececf0;
  box-shadow: 0 10px 40px rgba(15, 17, 21, 0.10);
}

[data-theme="light"] body.landing-3d .hero-alert-preview-head {
  border-bottom-color: #ececf0;
}

[data-theme="light"] body.landing-3d .hero-alert-preview-title { color: #0f1216; }

[data-theme="light"] body.landing-3d .hero-alert-preview-meta { color: #898d97; }

[data-theme="light"] body.landing-3d .hero-alert-card {
  background: #fbfbfd;
  border-color: #ececf0;
}

[data-theme="light"] body.landing-3d .hero-alert-ticker { color: #0f1216; }

[data-theme="light"] body.landing-3d .hero-tag-tf {
  background: #f4f5f8;
  color: #4a4e58;
  border-color: #ececf0;
}

[data-theme="light"] body.landing-3d .hero-alert-meter > div:first-child span { color: #898d97; }
[data-theme="light"] body.landing-3d .hero-alert-meter > div:first-child strong { color: #0f1216; }
[data-theme="light"] body.landing-3d .hero-alert-track { background: #ececf0; }

[data-theme="light"] body.landing-3d .hero-alert-levels { border-top-color: #ececf0; }
[data-theme="light"] body.landing-3d .hero-alert-levels dt { color: #898d97; }
[data-theme="light"] body.landing-3d .hero-alert-levels dd { color: #0f1216; }

[data-theme="light"] body.landing-3d .hero-alert-preview-footer {
  color: #898d97;
  border-top-color: #ececf0;
}

[data-theme="light"] body.landing-3d .hero-tag-long  { background: rgba(4, 120, 87, 0.12); color: #047857; }
[data-theme="light"] body.landing-3d .hero-tag-short { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
[data-theme="light"] body.landing-3d .hero-state-ready    { background: rgba(4, 120, 87, 0.16); color: #047857; }
[data-theme="light"] body.landing-3d .hero-state-watching { background: rgba(8, 145, 178, 0.14); color: #0891b2; }

[data-theme="light"] body.landing-3d .hero-alert-no {
  background: rgba(21, 195, 132, 0.14);
  color: #15c384;
}

[data-theme="light"] body.landing-3d .hero-alert-card--short .hero-alert-fill {
  background: linear-gradient(90deg, rgba(15, 17, 21, 0.18), #b91c1c);
}

[data-theme="light"] body.landing-3d .hero-alert-fill {
  background: linear-gradient(90deg, rgba(15, 17, 21, 0.18), #047857);
}

/* ----- Surfaces re-skinned to match the dashboard's Linear aesthetic.
       Layout stays the same; we just calm the glass/gradient treatments. */

/* Pricing tiers: clean borders, soft shadow */
body.landing-3d .pricing-tier {
  background: rgba(13, 26, 36, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
}

body.landing-3d .pricing-tier-featured {
  border-color: rgba(21, 195, 132, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(21, 195, 132, 0.2),
    0 12px 36px rgba(21, 195, 132, 0.18) !important;
}

body.landing-3d .pricing-tier .pricing-ribbon {
  background: linear-gradient(135deg, #15c384, #0fa86e);
  color: #06110d;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

body.landing-3d .pricing-tier .pricing-plan-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(232, 234, 238, 0.85);
}

body.landing-3d .pricing-tier .pricing-price {
  font-family: 'Inter', sans-serif;
}

body.landing-3d .pricing-tier .pricing-price .price-amount {
  letter-spacing: -0.02em;
}

body.landing-3d .pricing-tier .pricing-tagline {
  color: rgba(232, 234, 238, 0.62);
  font-family: 'Inter', sans-serif;
}

body.landing-3d .pricing-tier .pricing-features li {
  color: rgba(232, 234, 238, 0.78);
}

body.landing-3d .pricing-tier .pricing-features li::before {
  color: #34d399;
}

/* Feature story / flow cards */
body.landing-3d .feature-story-card {
  background: rgba(13, 26, 36, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32) !important;
}

body.landing-3d .feature-flow-step {
  background: rgba(16, 34, 48, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
}

body.landing-3d .feature-flow-step > span {
  background: linear-gradient(135deg, #15c384, #0fa86e);
  color: #06110d;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
}

body.landing-3d .feature-chart-card {
  background: rgba(13, 26, 36, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32) !important;
}

/* Calmer kicker / tag / scene-eyebrow pills */
body.landing-3d .depth-kicker,
body.landing-3d .depth-tag {
  background: rgba(21, 195, 132, 0.10) !important;
  border: 1px solid rgba(21, 195, 132, 0.32) !important;
  color: #2dd4a1 !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: none !important;
}

/* Subtler grid background — less of a "stage curtain" feel */
body.landing-3d .depth-grid-bg {
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(21, 195, 132, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 195, 132, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Buttons: dashboard-style filled primary, ghost secondary */
body.landing-3d .depth-btn-primary {
  background: #15c384 !important;
  color: #06110d !important;
  border: 1px solid #15c384 !important;
  box-shadow: 0 6px 18px rgba(21, 195, 132, 0.25) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.landing-3d .depth-btn-primary:hover {
  background: #10a972 !important;
  border-color: #10a972 !important;
}

body.landing-3d .depth-btn-secondary {
  background: linear-gradient(180deg, rgba(20, 38, 52, 0.96), rgba(12, 26, 36, 0.98)) !important;
  border: 1px solid rgba(220, 232, 229, 0.22) !important;
  color: rgba(238, 244, 255, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 36px rgba(0, 0, 0, 0.2) !important;
}

body.landing-3d .depth-btn-secondary:hover {
  border-color: rgba(21, 195, 132, 0.55) !important;
  background: linear-gradient(180deg, rgba(25, 52, 66, 0.98), rgba(16, 35, 47, 0.98)) !important;
}

/* Hero panel-label (smaller, calmer) */
body.landing-3d .depth-panel-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(232, 234, 238, 0.55);
  text-transform: uppercase;
}

/* Headings — Inter weights line up with the dashboard's font scale.
   .depth-slogan is intentionally excluded; it uses Manrope (see base rule). */
body.landing-3d h1.depth-hero-name,
body.landing-3d h2.depth-heading,
body.landing-3d h2.depth-cta-heading {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
}

body.landing-3d .depth-copy {
  font-family: 'Inter', sans-serif;
  color: rgba(232, 234, 238, 0.72);
}

body.landing-3d .depth-cta-panel,
body.landing-3d .depth-system-side .feature-chart-card {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

/* Footer */
body.landing-3d .depth-footer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(232, 234, 238, 0.45);
  letter-spacing: 0.04em;
}

/* --- Light theme overrides for the re-skinned surfaces --- */

[data-theme="light"] body.landing-3d .pricing-tier {
  background: #ffffff !important;
  border-color: #ececf0 !important;
  box-shadow: 0 6px 18px rgba(15, 17, 21, 0.08) !important;
}

[data-theme="light"] body.landing-3d .pricing-tier-featured {
  border-color: rgba(21, 195, 132, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(21, 195, 132, 0.18),
    0 14px 36px rgba(21, 195, 132, 0.16) !important;
}

[data-theme="light"] body.landing-3d .pricing-tier .pricing-plan-name { color: #4a4e58; }
[data-theme="light"] body.landing-3d .pricing-tier .pricing-tagline { color: #4a4e58; }
[data-theme="light"] body.landing-3d .pricing-tier .pricing-features li { color: #0f1216; }

[data-theme="light"] body.landing-3d .feature-story-card,
[data-theme="light"] body.landing-3d .feature-chart-card {
  background: #ffffff !important;
  border-color: #ececf0 !important;
  box-shadow: 0 6px 18px rgba(15, 17, 21, 0.08) !important;
}

[data-theme="light"] body.landing-3d .feature-flow-step {
  background: #fbfbfd !important;
  border-color: #ececf0 !important;
}

[data-theme="light"] body.landing-3d .depth-kicker,
[data-theme="light"] body.landing-3d .depth-tag {
  background: rgba(21, 195, 132, 0.10) !important;
  color: #047857 !important;
  border-color: rgba(21, 195, 132, 0.32) !important;
}

[data-theme="light"] body.landing-3d .depth-btn-secondary {
  border-color: #ececf0 !important;
  color: #0f1216 !important;
  background: #ffffff !important;
}

[data-theme="light"] body.landing-3d .depth-grid-bg {
  background-image:
    linear-gradient(rgba(15, 17, 21, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 17, 21, 0.035) 1px, transparent 1px);
}

[data-theme="light"] body.landing-3d .depth-copy {
  color: #4a4e58;
}

[data-theme="light"] body.landing-3d .depth-hero-copy .depth-copy {
  color: #303740;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.96),
    0 0 18px rgba(255, 255, 255, 0.92),
    0 0 36px rgba(255, 255, 255, 0.8);
}

[data-theme="light"] body.landing-3d .depth-panel-label {
  color: #898d97;
}

[data-theme="light"] body.landing-3d .depth-footer {
  color: #898d97;
}

/* On smaller screens, let the alert preview shrink without breaking */
@media (max-width: 720px) {
  body.landing-3d .hero-alert-preview {
    width: 100%;
    padding: 14px 14px 16px;
  }
}

/* =====================================================================
   Session 60 — Two-line hero slogan + pricing $ alignment
   ===================================================================== */

/* Hero slogan: "Trade With Edge." Single line in one readable color. */
body.landing-3d .depth-slogan > span {
  color: var(--depth-fg);
}

/* Pricing $: match amount color, lift to superscript position so it
   reads like proper currency notation instead of a low-opacity
   afterthought. */
body.landing-3d .price-currency {
  color: var(--depth-fg) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.4rem, 2vw, 2.1rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  align-self: flex-start;
  margin-top: clamp(8px, 1.1vw, 16px);
  line-height: 1;
}

/* Period "/ mo" stays the muted secondary text, but match the amount's
   Inter family so the typography looks cohesive */
body.landing-3d .price-period {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0;
}

/* Light theme: currency stays the dark text color */
[data-theme="light"] body.landing-3d .price-currency {
  color: #0f1216 !important;
}

/* =====================================================================
   Session 63 - Landing clarity pass
   ===================================================================== */

body.landing-3d .nav-inner {
  padding-top: 14px;
  padding-bottom: 14px;
}

body.landing-3d .logo-product,
body.landing-3d .footer-tagline {
  color: rgba(222, 238, 230, 0.58);
}

body.landing-3d .depth-slogan,
body.landing-3d .depth-slogan > span {
  color: var(--depth-fg);
}

.depth-scene {
  /* svh (small viewport height) tracks the actual usable viewport — it
     excludes browser chrome that vh includes, giving consistent padding
     on MacBook and ultrawide alike. Tighter clamp range so scenes fill
     the screen on short viewports without wasting space on tall ones. */
  padding: clamp(80px, 8svh, 110px) 0 clamp(36px, 5svh, 64px);
}

.system-flow-panel {
  grid-template-columns: minmax(520px, 1.05fr) minmax(380px, 0.72fr);
}

.system-flow-card {
  min-height: 100%;
}

.system-flow-list {
  gap: clamp(14px, 1.7vw, 20px);
}

@media (max-width: 1180px) {
  .system-flow-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .depth-scene {
    padding-top: 96px;
  }
}

/* =====================================================================
   Session 64 - Public landing simplification
   ===================================================================== */

body.landing-3d {
  --depth-bg: #061116;
  --depth-panel: rgba(13, 26, 36, 0.94);
  --depth-panel-solid: #0d1a24;
  --depth-fg: #eef4ff;
  --depth-dim: rgba(238, 244, 255, 0.74);
  --depth-muted: rgba(238, 244, 255, 0.42);
  --depth-line: rgba(207, 224, 255, 0.12);
  background: #061116;
}

body.landing-3d::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(115, 199, 255, 0.12), transparent 31rem),
    radial-gradient(circle at 86% 12%, rgba(35, 209, 139, 0.08), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(47, 140, 255, 0.08), transparent 34rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 40%);
}

.landing-depth,
.depth-stage {
  background:
    radial-gradient(circle at 18% 12%, rgba(115, 199, 255, 0.12), transparent 31rem),
    radial-gradient(circle at 86% 12%, rgba(35, 209, 139, 0.08), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(47, 140, 255, 0.08), transparent 34rem),
    linear-gradient(180deg, #071820 0%, #061116 58%, #061116 100%);
}

.depth-vignette {
  background:
    radial-gradient(ellipse 68% 60% at 50% 52%, transparent 24%, rgba(6, 17, 22, 0.46) 70%, #061116 100%),
    linear-gradient(180deg, rgba(6, 17, 22, 0.58), transparent 28%, rgba(6, 17, 22, 0.56));
}

body.landing-3d .depth-grid-bg {
  background-image:
    linear-gradient(rgba(115, 199, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 199, 255, 0.025) 1px, transparent 1px);
}

.depth-hero-layout {
  grid-template-columns: minmax(0, 900px);
  justify-content: start;
  gap: 0;
}

.depth-hero-copy {
  max-width: 900px;
}

.market-chart-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

/* Thin dividers give the long scrolling landing page clear section breaks
   without turning each section into a separate card. */
body.landing-3d .landing-page > .landing-section:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: min(calc(100% - clamp(48px, 12vw, 180px)), 1180px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(207, 224, 255, 0.14), rgba(35, 209, 139, 0.34), rgba(207, 224, 255, 0.14), transparent);
  box-shadow: 0 0 26px rgba(35, 209, 139, 0.08);
}

.depth-system-scene {
  width: min(100% - clamp(110px, 16vw, 250px), 1180px);
}

.depth-system-head {
  max-width: 920px;
}

.depth-system-head .depth-heading {
  max-width: 920px;
  color: var(--depth-fg);
  font-size: clamp(2.6rem, 4vw, 4.45rem);
}

.depth-system-head .depth-heading span {
  color: inherit;
}

.depth-system-head .depth-copy {
  max-width: 680px;
}

.system-flow-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.system-flow-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
}

.system-flow-card h3,
.system-flow-card > p,
.depth-system-side {
  display: none;
}

.system-flow-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.3vw, 34px);
}

.system-flow-list::before {
  content: "";
  position: absolute;
  top: clamp(38px, 4vw, 48px);
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35, 209, 139, 0.34), rgba(207, 224, 255, 0.2), rgba(35, 209, 139, 0.34), transparent);
  box-shadow: 0 0 24px rgba(35, 209, 139, 0.08);
}

.feature-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(13px, 1.35vw, 18px);
  min-height: clamp(188px, 20svh, 240px);
  padding: clamp(20px, 2vw, 26px);
  overflow: hidden;
  border-color: rgba(207, 224, 255, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 12%, rgba(35, 209, 139, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(16, 34, 48, 0.78), rgba(9, 24, 33, 0.82));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: none !important;
  z-index: 1;
}

.feature-flow-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35, 209, 139, 0.4), transparent);
}

.feature-flow-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.feature-flow-number {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-width: 48px;
  min-height: 36px;
  padding-inline: 11px;
  border: 1px solid var(--depth-green);
  border-radius: 999px;
  background: var(--depth-green);
  color: var(--depth-bg);
  font-family: var(--depth-mono);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 34px rgba(35, 209, 139, 0.18);
}

.feature-flow-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border: 1px solid rgba(207, 224, 255, 0.12);
  border-radius: 999px;
  background: rgba(6, 17, 22, 0.36);
  color: var(--depth-green);
}

.feature-flow-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-flow-step strong {
  font-size: clamp(1.18rem, 1.35vw, 1.48rem);
  line-height: 1.15;
}

.feature-flow-step p {
  max-width: 30ch;
  margin-top: 9px;
  color: rgba(238, 244, 255, 0.68);
  font-size: clamp(0.95rem, 0.98vw, 1.05rem);
  line-height: 1.5;
}

[data-theme="light"] body.landing-3d .feature-flow-step {
  background:
    radial-gradient(circle at 88% 12%, rgba(21, 195, 132, 0.1), transparent 34%),
    #ffffff !important;
  border-color: rgba(15, 17, 21, 0.08) !important;
  box-shadow: 0 16px 44px rgba(15, 17, 21, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] body.landing-3d .feature-flow-step p {
  color: rgba(15, 17, 21, 0.66);
}

@media (max-width: 1080px) {
  .system-flow-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .system-flow-list::before {
    display: none;
  }

  .feature-flow-step {
    min-height: auto;
  }
}

.depth-cta-heading {
  font-size: clamp(2.45rem, 5.1vw, 6.4rem);
  max-width: 980px;
}

@media (min-width: 1800px) {
  .depth-hero-layout {
    grid-template-columns: minmax(0, 980px);
  }
}

@media (max-width: 1180px) {
  .depth-hero-layout,
  .system-flow-panel {
    grid-template-columns: 1fr;
  }
}

/* Equal outer tracks pin the discovery links to the banner's true center while
   the brand and account actions remain aligned to the left and right edges. */
@media (min-width: 901px) {
  body.landing-3d .nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 2.4vw, 36px);
    padding-inline: clamp(24px, 4vw, 72px);
  }

  body.landing-3d .nav-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-items: flex-start;
  }

  body.landing-3d .nav-center {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.5vw, 8px);
    padding: 0;
    border: 0;
    background: transparent;
  }

  body.landing-3d .nav-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Account actions should read as polished SaaS controls rather than compact
     terminal labels. Keep their dimensions stable across laptop and desktop
     widths while preserving a clear primary/secondary hierarchy. */
  body.landing-3d .nav-right .btn-nav {
    min-height: 40px;
    padding-inline: clamp(13px, 1.15vw, 17px);
    border-radius: 6px;
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: clamp(0.72rem, 0.78vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
  }

  body.landing-3d .nav-right .btn-nav-secondary {
    color: var(--depth-fg);
    border-color: rgba(207, 224, 255, 0.18);
    background: rgba(13, 26, 36, 0.88);
  }

  body.landing-3d .nav-right .btn-nav-secondary:hover {
    color: var(--depth-fg);
    border-color: rgba(35, 209, 139, 0.42);
    background: rgba(18, 42, 50, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }

  body.landing-3d .nav-right .btn-nav-primary {
    color: #06100c;
    border-color: rgba(93, 233, 179, 0.42);
    background: var(--depth-green);
    box-shadow: 0 8px 24px rgba(15, 168, 110, 0.16);
  }

  body.landing-3d .nav-right .btn-nav-primary:hover {
    color: #06100c;
    border-color: var(--depth-green-bright);
    background: var(--depth-green-bright);
    box-shadow: 0 10px 28px rgba(15, 168, 110, 0.22);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.landing-3d .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
    padding-inline: clamp(18px, 2.7vw, 34px);
  }

  body.landing-3d .nav-center {
    gap: 8px;
  }

  body.landing-3d .btn-nav {
    padding-inline: clamp(11px, 1vw, 13px);
  }
}

/* Landing FAQ section is the single FAQ destination, kept compact and
   closed-by-default so it fits the scrolling page rhythm. */
body.landing-3d .depth-faq-section {
  min-height: auto;
  padding-block: clamp(72px, 8svh, 104px);
}

/* Vertical scene: centered head, two-column accordion grid, then a CTA panel. */
.depth-faq-scene {
  display: block;
  width: min(100% - clamp(48px, 10vw, 200px), 1160px);
  margin-inline: auto;
  padding-top: 0;
}

.depth-faq-scene .depth-section-head {
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vh, 48px);
  text-align: center;
}

.depth-faq-scene .depth-section-head .depth-tag {
  justify-content: center;
}

.depth-faq-scene .depth-section-head .depth-copy {
  margin-inline: auto;
}

/* Two columns because there are 8+ questions; collapses to one on phones.
   align-items: start so opening one item doesn't stretch its row neighbour. */
.landing-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  width: 100%;
}

/* Category wrappers become visual groups on mobile. Flattening both levels
   here preserves the established two-column desktop accordion layout. */
.landing-faq-group,
.landing-faq-items {
  display: contents;
}

.landing-faq-group-title {
  display: none;
}

@media (max-width: 820px) {
  .landing-faq-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.landing-faq-item {
  border: 1px solid rgba(207, 224, 255, 0.1);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(35, 209, 139, 0.07), transparent 34%),
    rgba(13, 26, 36, 0.82);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.landing-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 13px clamp(16px, 2vw, 24px);
  color: var(--depth-fg);
  cursor: pointer;
  /* Slightly lighter/smaller than before so longer questions stay scannable in
     the two-column grid. */
  font-size: clamp(0.96rem, 1.05vw, 1.1rem);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
}

.landing-faq-item summary::-webkit-details-marker {
  display: none;
}

.landing-faq-item summary svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--depth-green);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.landing-faq-item[open] summary svg {
  transform: rotate(180deg);
}

.landing-faq-answer {
  padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
  color: rgba(238, 244, 255, 0.7);
  font-size: clamp(0.95rem, 1.02vw, 1.08rem);
  line-height: 1.68;
}

.landing-faq-answer p {
  margin: 0;
}

@media (min-width: 701px) {
  body.landing-3d #pricing {
    min-height: auto;
    padding-block: clamp(82px, 9svh, 118px);
  }

  body.landing-3d #pricing .depth-pricing-scene {
    width: min(100% - clamp(80px, 12vw, 190px), 1280px);
    padding-top: 0;
  }

  body.landing-3d #pricing .depth-section-head {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  body.landing-3d #pricing .depth-section-head .depth-copy {
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d #pricing .depth-pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Align to the top, not stretch: each card sizes to its own content so
       expanding one card's "What's included" details grows only that card
       instead of stretching the whole row (which left the others blank). The
       shared min-height on .pricing-tier keeps the closed cards visually even. */
    align-items: start;
    gap: clamp(14px, 1.7vw, 24px);
  }

  body.landing-3d #pricing .pricing-tier {
    position: relative;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: clamp(410px, 40svh, 500px);
    padding: 0 !important;
    overflow: visible;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(16, 34, 48, 0.92), rgba(10, 22, 31, 0.94)) !important;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  body.landing-3d #pricing .pricing-tier::before {
    content: "";
    position: absolute;
    top: 0;
    right: 22px;
    left: 22px;
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207, 224, 255, 0.28), transparent);
  }

  body.landing-3d #pricing .pricing-tier-featured {
    transform: translateY(-10px) !important;
    border-color: rgba(35, 209, 139, 0.55) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(35, 209, 139, 0.2), transparent 34%),
      linear-gradient(180deg, rgba(15, 42, 38, 0.96), rgba(10, 22, 31, 0.96)) !important;
    box-shadow:
      0 0 0 1px rgba(35, 209, 139, 0.18),
      0 26px 78px rgba(35, 209, 139, 0.14) !important;
  }

  body.landing-3d #pricing .pricing-ribbon {
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    margin: 0;
    padding: 7px 10px;
  }

  body.landing-3d #pricing .pricing-tier-featured .pricing-header {
    padding-top: clamp(58px, 5vw, 70px);
  }

  body.landing-3d #pricing .pricing-header {
    padding: clamp(24px, 2.3vw, 34px) clamp(22px, 2.2vw, 32px) clamp(16px, 1.8vw, 24px);
  }

  body.landing-3d #pricing .pricing-plan-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }

  body.landing-3d #pricing .pricing-plan-lockup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
  }

  body.landing-3d #pricing .pricing-plan-logo {
    display: block;
    width: clamp(52px, 4.2vw, 72px);
    height: auto;
  }

  body.landing-3d #pricing .pricing-plan-name {
    color: var(--depth-fg);
    font-size: clamp(1.15rem, 1.3vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
  }

  body.landing-3d #pricing .pricing-price {
    margin-top: clamp(18px, 2vw, 26px);
  }

  body.landing-3d #pricing .price-amount {
    font-size: clamp(2.9rem, 4.2vw, 4.7rem);
  }

  body.landing-3d #pricing .pricing-tagline {
    min-height: 3.2em;
    margin-top: 16px;
    color: rgba(238, 244, 255, 0.62);
    line-height: 1.48;
  }

  body.landing-3d #pricing .pricing-details {
    margin: 0 clamp(22px, 2.2vw, 32px);
    border-top: 1px solid rgba(207, 224, 255, 0.09);
    border-bottom: 1px solid rgba(207, 224, 255, 0.09);
  }

  body.landing-3d #pricing .pricing-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    color: rgba(238, 244, 255, 0.82);
    cursor: pointer;
    font-size: clamp(0.88rem, 0.94vw, 1rem);
    font-weight: 850;
    list-style: none;
  }

  body.landing-3d #pricing .pricing-details summary::-webkit-details-marker {
    display: none;
  }

  body.landing-3d #pricing .pricing-details summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 24px;
    aspect-ratio: 1;
    border: 1px solid rgba(35, 209, 139, 0.34);
    border-radius: 999px;
    color: var(--depth-green);
    font-family: var(--depth-mono);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
  }

  body.landing-3d #pricing .pricing-details[open] summary::after {
    content: "-";
  }

  body.landing-3d #pricing .pricing-features {
    display: grid;
    margin: 0;
    padding: 0 0 clamp(16px, 1.8vw, 22px) 18px;
    border-top: 0;
    gap: 10px;
  }

  body.landing-3d #pricing .pricing-features li {
    font-size: clamp(0.92rem, 0.95vw, 1.02rem);
    line-height: 1.45;
  }

  body.landing-3d #pricing .pricing-footer {
    align-self: end;
    padding: clamp(18px, 1.9vw, 24px) clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 30px);
  }

  body.landing-3d #pricing .pricing-footer .depth-btn {
    min-height: 48px;
    border-radius: 12px;
  }

}

/* Conversion block beneath the FAQ accordions. No framed panel — it reads as a
   centered closing message rather than a boxed card. */
.landing-faq-cta {
  max-width: 760px;
  margin: clamp(34px, 4.5vw, 56px) auto 0;
  text-align: center;
}

.landing-faq-cta-copy {
  margin: 0;
  color: rgba(238, 244, 255, 0.58);
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
}

.landing-faq-cta-contact {
  margin-left: 0.28em;
  color: var(--depth-green);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 209, 139, 0.5);
  transition: color 160ms ease, border-color 160ms ease;
}

.landing-faq-cta-contact:hover,
.landing-faq-cta-contact:focus-visible {
  color: var(--depth-green-bright);
  border-color: var(--depth-green-bright);
}

/* Centered landing composition experiment. Section intros and primary content
   sit on the center axis while dense cards/lists keep readable inner alignment. */
@media (min-width: 701px) {
  body.landing-3d .landing-section .depth-section-head,
  body.landing-3d .depth-system-head,
  body.landing-3d .depth-cta-inner {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  body.landing-3d .landing-section .depth-section-head .depth-copy,
  body.landing-3d .depth-system-head .depth-copy,
  body.landing-3d .depth-cta-inner .depth-copy {
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d .depth-kicker,
  body.landing-3d .depth-tag {
    justify-content: center;
  }

  body.landing-3d .depth-hero-layout {
    grid-template-columns: minmax(0, 920px);
    justify-content: center;
    text-align: center;
  }

  body.landing-3d .depth-hero-copy {
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  body.landing-3d .depth-kicker {
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d .depth-hero-name {
    text-align: center;
    text-indent: 0;
  }

  body.landing-3d .depth-hero-name img {
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d .depth-slogan {
    white-space: normal;
  }

  body.landing-3d .depth-hero-copy .depth-copy {
    /* Give the longer hero introduction a wider desktop measure so it reads as
       a concise supporting statement instead of a dense paragraph block. */
    max-width: min(100%, clamp(680px, 58vw, 860px));
    margin-right: auto;
    margin-left: auto;
  }

  body.landing-3d .depth-actions {
    justify-content: center;
  }

  body.landing-3d #faqs .depth-faq-scene {
    width: min(100% - clamp(48px, 10vw, 200px), 1160px);
    text-align: center;
  }

  body.landing-3d #faqs .depth-section-head,
  body.landing-3d #faqs .landing-faq-list {
    margin-right: auto;
    margin-left: auto;
  }

  /* Keep the question/answer text left-aligned even though the head is centered. */
  body.landing-3d #faqs .landing-faq-list {
    text-align: left;
  }
}


/* The global footer is part of the main landing flow too. It stays visually
   quiet so Access remains the final call-to-action section. */
body.landing-3d .site-footer {
  position: relative;
  z-index: 3;
  display: block;
  border-top: 1px solid rgba(207, 224, 255, 0.1);
  background:
    radial-gradient(circle at 22% 0%, rgba(35, 209, 139, 0.08), transparent 26rem),
    #061116;
}

body.landing-3d .footer-inner {
  width: min(100% - clamp(34px, 8vw, 160px), 1180px);
}

body.landing-3d .footer-nav a {
  color: rgba(238, 244, 255, 0.6);
}

body.landing-3d .footer-nav a:hover {
  color: var(--depth-green);
}

/* Compact the FAQ and final CTA sections. They
   hold short content, so a full-viewport (100svh) section with vertically-
   centered content left a large empty gap above and below each one. Size them
   to their content on desktop with a shared vertical rhythm so the spacing is
   consistent across sections — mobile already sizes non-hero sections to
   content. */
@media (min-width: 701px) {
  body.landing-3d #faqs,
  body.landing-3d #access {
    min-height: auto;
    padding-block: clamp(64px, 8vh, 112px);
  }
}

/* =====================================================================
   Market Pulse strip — sits flush at the base of the hero, replacing the
   old trending-assets ticker. Live prices auto-scroll and can be dragged in
   either direction; the whole strip is removed by JS when data is unavailable.
   Uses --depth-* tokens so it adapts to the light/dark landing themes.
   ===================================================================== */
body.landing-3d .news-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  height: 78px;
  border-top: 1px solid var(--depth-line, rgba(220, 232, 229, 0.1));
  background: var(--depth-bg, #061116);
}

/* The mobile instance participates in the measured hero layout. Desktop keeps
   the original full-width ticker anchored to the section edge. */
body.landing-3d .mobile-market-pulse {
  display: none;
}

body.landing-3d .news-strip-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 clamp(18px, 2.6vw, 44px);
  color: var(--depth-fg, #dce8e5);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

body.landing-3d .news-strip-label span {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(35, 209, 139, 0.14);
  color: var(--depth-green, #23d18b);
  font-family: var(--depth-mono, monospace);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.landing-3d .news-strip-overflow {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

body.landing-3d .news-strip-overflow.is-dragging {
  cursor: grabbing;
}

body.landing-3d .news-strip-overflow::before,
body.landing-3d .news-strip-overflow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(28px, 6vw, 90px);
  pointer-events: none;
}

body.landing-3d .news-strip-overflow::before {
  left: 0;
  background: linear-gradient(90deg, var(--depth-bg, #061116), transparent);
}

body.landing-3d .news-strip-overflow::after {
  right: 0;
  background: linear-gradient(270deg, var(--depth-bg, #061116), transparent);
}

body.landing-3d .news-strip-track {
  --ticker-gap: 12px;
  display: flex;
  align-items: center;
  gap: var(--ticker-gap);
  width: max-content;
  padding-left: 12px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

body.landing-3d .news-strip-sequence {
  display: flex;
  align-items: center;
  gap: var(--ticker-gap);
  flex: 0 0 auto;
}

body.landing-3d .news-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* No max-width: each pill sizes to its own title (white-space: nowrap below)
     rather than all clamping to one width. The track is a max-content marquee,
     so naturally-wide items are fine. */
  padding: 8px 14px;
  border: 1px solid var(--depth-line, rgba(220, 232, 229, 0.12));
  border-radius: 10px;
  background: var(--depth-panel-solid, #0d1a24);
  color: var(--depth-fg, #dce8e5);
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease;
}

body.landing-3d .news-item:hover {
  border-color: rgba(35, 209, 139, 0.4);
}

body.landing-3d .news-item strong {
  flex: 0 0 auto;
  color: var(--depth-green, #23d18b);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.landing-3d .news-item span {
  /* Show the full title (no ellipsis) so the pill grows to fit it. */
  font-size: clamp(0.92rem, 0.82vw, 1rem);
  line-height: 1.25;
  color: var(--depth-fg, #cdd9d5);
  opacity: 0.86;
}

body.landing-3d .news-item.is-loading {
  border-style: dashed;
  opacity: 0.7;
}

/* Market Pulse ticker items: SYMBOL · price · 24h change. The symbol reads as
   the neutral identifier; only the change carries green/red so the up/down
   signal is unambiguous. Selectors are scoped to .pulse-item and use enough
   specificity to win over the generic .news-item strong/span rules above. */
body.landing-3d .pulse-item {
  gap: 9px;
}

/* Official coin logo for a quick visual cue. */
body.landing-3d .pulse-logo {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.05);
}

body.landing-3d .pulse-item strong {
  color: var(--depth-fg, #eef4ff);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.landing-3d .pulse-item .pulse-price {
  font-size: 0.9rem;
  line-height: 1.2;
  color: rgba(238, 244, 255, 0.82);
  opacity: 1;
}

body.landing-3d .pulse-item .pulse-change {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 1;
}

body.landing-3d .pulse-item .pulse-up {
  color: #23d18b;
}

body.landing-3d .pulse-item .pulse-down {
  color: #ff5d6c;
}

body.landing-3d .pulse-item .pulse-flat {
  color: rgba(238, 244, 255, 0.6);
}

/* ============================================================
   How BloqBot Works — 5-step flow section (between hero and
   features). Desktop/base layout here; phone stacking lives in
   landing-mobile.css. Reuses shared .depth-tag/.depth-heading/
   .depth-btn tokens so it matches the rest of the landing page.
   ============================================================ */
body.landing-3d .how-it-works-inner {
  width: min(calc(100% - clamp(48px, 10vw, 160px)), 1180px);
}

body.landing-3d .how-it-works-head {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

body.landing-3d .how-it-works-head .depth-tag {
  justify-content: center;
}

body.landing-3d .how-it-works-head .depth-heading {
  max-width: 900px;
  margin-inline: auto;
  color: var(--depth-fg);
  font-size: var(--landing-section-title-size);
  line-height: var(--landing-section-title-leading);
}

body.landing-3d .how-it-works-head .depth-copy {
  max-width: 720px;
  margin-inline: auto;
}

/* Five even tracks read as one horizontal flow on wide screens. */
body.landing-3d .how-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(14px, 1.4vw, 22px);
  /* ~25% tighter than the section default so the cards sit closer to the
     subheadline and the whole flow scans faster. */
  margin: clamp(26px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

body.landing-3d .how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(18px, 1.6vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(207, 224, 255, 0.12);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 34, 48, 0.74), rgba(9, 24, 33, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* Top accent hairline, mirroring the feature cards. */
body.landing-3d .how-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35, 209, 139, 0.4), transparent);
}

body.landing-3d .how-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.landing-3d .how-step-num {
  font-family: var(--depth-mono);
  font-size: clamp(1.4rem, 1.7vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--depth-green);
}

body.landing-3d .how-step-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border: 1px solid rgba(35, 209, 139, 0.28);
  border-radius: 50%;
  background: rgba(35, 209, 139, 0.07);
  color: var(--depth-green);
  transition: border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

body.landing-3d .how-step-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.landing-3d .how-step-title {
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  color: var(--depth-fg);
  font-size: clamp(1.12rem, 1.25vw, 1.32rem);
  line-height: 1.2;
}

body.landing-3d .how-step-copy {
  margin: 10px 0 0;
  color: rgba(238, 244, 255, 0.66);
  font-size: clamp(0.92rem, 0.95vw, 1rem);
  line-height: 1.55;
}

/* The trust statement is supporting reassurance, not a competing CTA surface. */
body.landing-3d .how-trust {
  max-width: 780px;
  margin: clamp(28px, 3.6vw, 44px) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(238, 244, 255, 0.56);
  font-size: clamp(0.82rem, 0.86vw, 0.92rem);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

body.landing-3d .how-trust-copy {
  text-wrap: balance;
}

body.landing-3d .how-trust-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 5px;
  color: rgba(35, 209, 139, 0.68);
}

body.landing-3d .how-trust-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  /* Match the feature-showcase card hover: lift + green border + glow. */
  body.landing-3d .how-step:hover {
    border-color: rgba(35, 209, 139, 0.38);
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.24),
      0 0 26px rgba(35, 209, 139, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
  }

  /* Mirror the feature card's icon highlight on hover. */
  body.landing-3d .how-step:hover .how-step-icon {
    border-color: rgba(35, 209, 139, 0.62);
    background: rgba(35, 209, 139, 0.12);
    box-shadow: 0 0 22px rgba(35, 209, 139, 0.18);
  }
}

/* Two-row 3+2 grid when five across no longer fits comfortably. */
@media (max-width: 1100px) {
  body.landing-3d .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Landing typography hierarchy
   ------------------------------------------------------------
   This is the authoritative section-intro rhythm. Section modules own the
   content below each intro, while equivalent marketing roles remain visually
   consistent across How It Works, Features, Pricing, and FAQs. */
body.landing-3d .landing-copy-mobile {
  display: none;
}

/* Mobile replaces the second hero button with a quieter existing-user prompt.
   Desktop retains the standard "See How It Works" secondary action. */
body.landing-3d .hero-existing-user {
  display: none;
}

body.landing-3d .landing-section .depth-section-head {
  width: min(100%, 960px);
  max-width: 960px;
  margin-right: auto;
  margin-bottom: clamp(38px, 4vw, 58px);
  margin-left: auto;
}

body.landing-3d .landing-section .depth-section-head .depth-tag {
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

body.landing-3d .landing-section .depth-section-head .depth-heading {
  width: 100%;
  max-width: 22ch;
  margin-right: auto;
  margin-left: auto;
  color: var(--depth-fg);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--landing-section-title-size);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: var(--landing-section-title-leading);
  text-wrap: balance;
}

body.landing-3d .landing-section .depth-section-head .depth-copy {
  width: min(100%, 64ch);
  max-width: 64ch;
  margin: clamp(18px, 2vw, 26px) auto 0;
  color: rgba(238, 244, 255, 0.72);
  font-size: var(--landing-section-copy-size);
  font-weight: 400;
  line-height: var(--landing-section-copy-leading);
  text-wrap: pretty;
}

/* The closing CTA is one step above a standard section title, but its
   supporting paragraph follows the shared readable copy rhythm. */
body.landing-3d #access .depth-cta-heading {
  max-width: 16ch;
  font-size: clamp(3.15rem, 5.2vw, 5.25rem);
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}

body.landing-3d #access .depth-copy {
  width: min(100%, 60ch);
  max-width: 60ch;
  margin-top: clamp(20px, 2.2vw, 28px);
  font-size: var(--landing-section-copy-size);
  font-weight: 400;
  line-height: var(--landing-section-copy-leading);
}