/* Landing page desktop/base styling. Mobile-specific rules load after this file. */
/* BloqBot landing-only 3D scene system */
body.landing-3d {
  --depth-bg: #03070d;
  --depth-panel: rgba(8, 15, 24, 0.9);
  --depth-panel-solid: #06101a;
  --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;
  /* Landing sizing tokens (2026-07-05 scale-normalization pass). One
     responsive system for every desktop width — MacBook through ultrawide:
     capped containers, clamp-based section rhythm, and a three-step headline
     scale. Sections consume these instead of hard-coding one-off values. */
  --container-main: 1160px;
  --container-wide: 1240px;
  --container-dashboard: 1220px;
  --section-y-tight: clamp(64px, 7vw, 96px);
  --section-y-standard: clamp(80px, 8vw, 120px);
  --section-y-large: clamp(96px, 9vw, 140px);
  --headline-lg: clamp(46px, 4.4vw, 64px);
  --headline-md: clamp(42px, 3.8vw, 56px);
  --headline-sm: clamp(36px, 3.4vw, 48px);
  --body-lg: 16px;
  --body-md: 15px;
  --body-sm: 13px;
  /* Material system tokens (2026-07-05 hierarchy polish). Two card registers:
     product artifacts (Trade Review, dashboard frame, pricing) carry the
     stronger premium surface; process/support cards stay a whisper. */
  --card-product-bg: linear-gradient(180deg, rgba(7, 19, 30, 0.96), rgba(3, 12, 20, 0.98));
  --card-product-line: rgba(150, 190, 220, 0.12);
  --card-product-line-strong: rgba(150, 190, 220, 0.16);
  --card-product-shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
  --card-product-glow: 0 0 70px rgba(35, 209, 139, 0.01);
  --card-quiet-bg: rgba(255, 255, 255, 0.013);
  --card-quiet-bg-hover: rgba(255, 255, 255, 0.022);
  --card-quiet-line: rgba(255, 255, 255, 0.055);
  --card-quiet-line-hover: rgba(160, 200, 220, 0.1);
  /* Text hierarchy tokens: heading, primary body, secondary body, micro. */
  --text-strong: rgba(238, 244, 255, 0.96);
  --text-body: rgba(210, 225, 235, 0.72);
  --text-dim: rgba(205, 220, 230, 0.64);
  --text-micro: rgba(200, 220, 230, 0.58);
  /* Shared marketing hierarchy, expressed in the tokens above. */
  /* Non-hero section titles read editorial, not cinematic — only the hero
     keeps the display scale. */
  --landing-section-title-size: var(--headline-md);
  --landing-section-copy-size: clamp(14px, 1.05vw, var(--body-lg));
  --landing-section-title-leading: 0.98;
  --landing-section-copy-leading: 1.6;
  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;
  /* Depth, not decoration: the page-wide light is pulled down to a near-
     invisible breath so the base reads as deep, even black rather than a
     lit blue-teal field. Barely-there, never a wash. */
  background:
    radial-gradient(circle at 20% 22%, rgba(70, 108, 150, 0.042), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(56, 90, 132, 0.034), transparent 38%),
    linear-gradient(135deg, rgba(180, 205, 245, 0.009), transparent 42%, rgba(20, 46, 74, 0.046));
}

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;
  /* Lighter cap over the hero top so the bar integrates into the product
     surface rather than sitting as a separate website header. */
  background: linear-gradient(180deg, rgba(5, 12, 18, 0.82), rgba(5, 12, 18, 0.3) 72%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

/* Scrolled state is a premium glass bar: translucent ink, deep blur, one
   very subtle hairline seat and a soft drop into the page. */
body.landing-3d .navbar.scrolled {
  background: rgba(4, 10, 16, 0.7);
  border-bottom: 1px solid rgba(180, 210, 220, 0.055);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

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,
body.landing-3d #scroll-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(4, 11, 20, 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,
.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(20px, 3vh, 36px);
  /* Quiet ink eyebrows: green is reserved for the dash cue so the accent
     reads as signal, not section decoration. */
  color: rgba(238, 244, 255, 0.6);
  /* 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: rgba(35, 209, 139, 0.62);
  box-shadow: none;
}

.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 {
  /* One consistent, softened accent voice for emphasized headline phrases —
     muted brand green (#27c889), emphasis only, never the loudest object. */
  color: rgba(39, 200, 137, 0.82);
}

.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;
  /* Tighter, sharper proportions — premium UI control, not mass-market SaaS
     bulk. Fixed 52px height with restrained horizontal padding, a 12px
     radius, and a firm 15px label. */
  min-height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  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));
}

/* Round the two hero CTA buttons to match the site's standard button style
   (8px, like .btn-nav) instead of the sharp landing-depth corners. Scoped to
   the hero block and given 3 classes of specificity so it wins over the
   square-corner rule on `body.landing-3d .btn:not(.btn-drawer)` above. */
body.landing-3d .hero-cta-block .depth-btn {
  border-radius: 8px;
}

/* Primary CTAs speak in the product's own voice — sentence-case Inter, not
   mono caps. Same specificity as the uppercase .btn rule above; later in
   the file, so it wins. */
body.landing-3d .btn.depth-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
}

body.landing-3d #access .depth-btn {
  /* Same geometry as the hero/nav primary CTA — one button system. */
  border-radius: 8px;
}

.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,
.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-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;
}

.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;
}

/* Pre-reveal is near-visible (0.01), never fully hidden — content must stay
   present for screenshots/crawlers. landing-mobile.css redefines this base
   (loads later); keep the opacity floors in sync. */
.depth-reveal {
  opacity: 0.01;
  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;
  }

}

@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;
  }

}

@media (prefers-reduced-motion: reduce) {
  .depth-camera,
  .depth-reveal,
  .depth-progress,
  body.landing-3d #scroll-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 .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,
.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,
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,
.about-para {
  color: rgba(222, 238, 230, 0.78);
}

.ticket-confidence p,
.depth-pain p,
.process-step p,
.depth-feature-card p {
  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 .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,
  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%;
    /* The hero and CTA copy centers in this band; the 340px action stack
       must center with it instead of pinning to the column's left edge. */
    margin-inline: auto;
  }

  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: #040b14;
  --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: #040b14;
  --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: #040b14;
}

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: #040b14;
  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;
}

/* Nav link hover/active line treatments live only in the canonical
   components/navbar.css (which loads after page CSS). A duplicated underline
   here once shadowed the component's and caused double lines — don't re-add. */
body.landing-3d .nav-center {
  gap: clamp(6px, 0.9vw, 13px);
}

body.landing-3d .nav-link {
  padding: 8px 12px;
  font-weight: 500;
  transition: color 220ms ease;
}

body.landing-3d .nav-link:hover {
  background-color: transparent;
}

body.landing-3d .nav-link.is-active {
  color: #eef5f1;
  background-color: transparent;
}

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: rgba(35, 209, 139, 0.45);
  background: rgba(35, 209, 139, 0.88);
  color: #06100c;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

body.landing-3d .btn-nav-primary:hover {
  border-color: #24ce8c;
  background: #24ce8c;
  color: #06100c;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

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 .feed-live {
  color: #dce8e5;
}

body.landing-3d .signal-console-shell.depth-console,
body.landing-3d .signal-feed-frame,
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 {
  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 {
  background: #9aa9b3;
  box-shadow: none;
}

.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,
.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;
}

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

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

  .depth-stage {
    /* svh (static) to match the sticky stage's own `height: 100svh` and the
       200svh scroll-track budget; plain vh sized it to the taller toolbar-hidden
       viewport. Static either way — this just keeps the pinned stage consistent. */
    min-height: 100svh;
  }
}


/* =====================================================================
   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-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-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, 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-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);
}

/* 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-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-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-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-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 .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);
}


/* 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-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-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 .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,
[data-theme="light"] body.landing-3d #scroll-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. */

/* 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;
}

/* Chrome-free kicker / tag / scene-eyebrow: the small green dash (::before)
   plus a tracked green label, with NO pill box (background/border removed
   2026-07-07) so repeated eyebrows read as a quiet cue, not a badge, down
   the page. Shared base — content-height (no min-height lane now the pill is
   gone, so the line + label sit tight to the headline instead of floating in
   leftover pill space); .depth-tag adds the section-eyebrow presence below,
   .depth-kicker (hero) keeps its own size in landing-hero.css. */
body.landing-3d .depth-kicker,
body.landing-3d .depth-tag {
  background: transparent !important;
  border: 0 !important;
  /* Line and label share the one muted brand green. */
  color: rgba(35, 209, 139, 0.82) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10.5px;
  padding: 0;
  border-radius: 0;
  box-shadow: none !important;
}

/* Section eyebrows carry a touch more presence than the hero kicker: a
   slightly larger, bolder, wider-tracked label in the full brand green. */
body.landing-3d .depth-tag {
  gap: 14px;
  color: #23d18b !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* The line cue before each section eyebrow — a thin 22px rule, no box. */
body.landing-3d .depth-tag::before {
  width: 22px;
  background: #23d18b;
  opacity: 0.9;
  box-shadow: none;
}

/* Subtler grid background — barely-perceptible ink depth, not a green
   effects layer: the lines carry the page's blue-gray, never the accent. */
body.landing-3d .depth-grid-bg {
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(165, 205, 220, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 205, 220, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Buttons: dashboard-style filled primary, ghost secondary */
body.landing-3d .depth-btn-primary {
  /* Dimensional brand fill: deep diagonal green with a subtle top highlight —
     a lit surface, not flat candy paint. Matches the hero CTA. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #2ccc91, #16a86f) !important;
  color: #05110c !important;
  border: 1px solid rgba(39, 200, 137, 0.38) !important;
  box-shadow:
    0 14px 30px -14px rgba(24, 190, 126, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body.landing-3d .depth-btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #30d497, #18b074) !important;
  border-color: rgba(39, 200, 137, 0.46) !important;
  box-shadow:
    0 18px 36px -14px rgba(24, 190, 126, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !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 .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;
}

/* On light, the dash/marker takes the same darker green as the pill text so
   line and text stay one colour. */
[data-theme="light"] body.landing-3d .depth-tag::before,
[data-theme="light"] body.landing-3d .landing-hero-section .depth-kicker .live-dot {
  background: #047857;
}

[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.05rem, 1.5vw, 1.45rem) !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: #040b14;
  --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: #040b14;
}

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(80, 120, 140, 0.035), 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(80, 120, 140, 0.035), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(47, 140, 255, 0.08), transparent 34rem),
    linear-gradient(180deg, #040b14 0%, #03080f 48%, #040a13 100%);
}

.depth-vignette {
  background:
    radial-gradient(ellipse 68% 60% at 50% 52%, transparent 24%, rgba(4, 11, 20, 0.46) 70%, #040b14 100%),
    linear-gradient(180deg, rgba(4, 11, 20, 0.58), transparent 28%, rgba(4, 11, 20, 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;
}

/* 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%);
  /* Neutral hairline seams, barely-there: the sections should read as one
     continuous story, with the seam only visible on inspection. */
  background: linear-gradient(90deg, transparent, rgba(160, 185, 210, 0.1), transparent);
  box-shadow: none;
}

/* The ticker already frames the hero's base edge, so How It Works opens
   without a second hairline directly beneath the strip. */
body.landing-3d #how-it-works::before {
  content: none;
  display: none;
}

.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(8px, 1vw, 14px);
    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: 42px;
    padding-inline: clamp(15px, 1.3vw, 19px);
    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;
  }

  /* Secondary account action stays a quiet outlined utility — it must never
     compete with the filled Get Started primary. */
  body.landing-3d .nav-right .btn-nav-secondary {
    color: rgba(238, 244, 255, 0.78);
    border-color: rgba(207, 224, 255, 0.14);
    background: rgba(13, 26, 36, 0.4);
  }

  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(35, 209, 139, 0.45);
    background: rgba(35, 209, 139, 0.88);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
  }

  body.landing-3d .nav-right .btn-nav-primary:hover {
    color: #06100c;
    border-color: rgba(35, 209, 139, 0.55);
    background: rgba(35, 209, 139, 0.92);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }
}

@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: high-intent questions in two restrained, ruled columns. */
body.landing-3d .depth-faq-section {
  min-height: auto;
  padding: var(--section-y-standard) 0 var(--section-y-tight);
}

.depth-faq-scene {
  display: block;
  width: min(100% - 48px, var(--container-main));
  margin-inline: auto;
  padding-top: 0;
}

.depth-faq-scene .depth-section-head {
  max-width: 720px;
  margin: 0 auto clamp(46px, 5vw, 66px);
  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 readable columns of independent accordion stacks — opening an answer
   never shifts the neighboring column. */
.landing-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  gap: clamp(24px, 2.2vw, 30px);
  width: 100%;
}

.landing-faq-group {
  display: grid;
  align-self: start;
  gap: 14px;
  min-width: 0;
  contain: layout;
}

.landing-faq-items {
  display: block;
  min-width: 0;
}

/* The curated mobile FAQ variant and its alternate head copy are inert on
   desktop/tablet — they are switched on only inside the ≤700px mobile block.
   Placed after .landing-faq-list so it wins the same-specificity display race. */
.landing-faq-mobile,
.faq-head-mb {
  display: none;
}

@media (max-width: 960px) {
  .landing-faq-list {
    grid-template-columns: minmax(0, 1fr);
    /* Stacked columns must read as one continuous list: the items' own
       13px margins carry the rhythm, so the former column gap collapses. */
    gap: 0;
    max-width: 760px;
    margin-inline: auto;
  }
}

/* Soft accordion rows: a whisper of surface per question instead of ruled
   table lines — calm trust-building, not a support database. */
.landing-faq-item {
  interpolate-size: allow-keywords;
  margin-bottom: 13px;
  border: 1px solid rgba(165, 205, 220, 0.075);
  border-radius: 16px;
  /* The top-lit sheen lives in a constant background-image; the state tint
     lives in background-color so hover/open transitions animate cleanly
     (background-image is not interpolable). */
  background-color: rgba(255, 255, 255, 0.016);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.007), rgba(255, 255, 255, 0) 70%);
  box-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.landing-faq-item:hover {
  background-color: rgba(255, 255, 255, 0.028);
  border-color: rgba(165, 205, 220, 0.12);
}

.landing-faq-item[open] {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(165, 205, 220, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.landing-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 18px 20px;
  color: rgba(238, 244, 255, 0.9);
  cursor: pointer;
  font-size: clamp(0.875rem, 1vw, 0.90625rem);
  /* Inter ships static weights here, so 600 (not an intermediate value). */
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  outline: 0;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.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: rgba(205, 220, 230, 0.62);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 220ms ease, stroke 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .landing-faq-item summary:hover {
    color: rgba(238, 244, 255, 1);
  }

  /* The chevron takes a whisper of the accent on hover — a hint of the
     open state's green without announcing it. */
  .landing-faq-item summary:hover svg {
    stroke: rgba(35, 209, 139, 0.78);
  }
}

.landing-faq-item summary:focus-visible {
  border-radius: 15px;
  background: rgba(35, 209, 139, 0.04);
  box-shadow: inset 0 0 0 1px rgba(35, 209, 139, 0.45);
  color: var(--depth-fg);
}

/* Open question stays in the ink voice; the chevron carries the accent so
   opened rows never read as a wall of green headings. */
.landing-faq-item[open] summary {
  color: var(--text-strong);
}

.landing-faq-item[open] summary svg {
  stroke: rgba(35, 209, 139, 0.78);
  transform: rotate(180deg);
}

.landing-faq-answer {
  max-width: 60ch;
  padding: 0 20px 18px;
  color: rgba(210, 225, 235, 0.7);
  font-size: clamp(0.8125rem, 0.9vw, 0.84375rem);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.landing-faq-item[open] .landing-faq-answer {
  opacity: 1;
  transform: translateY(0);
}

/* Modern browsers animate the native details content box; unsupported engines
   simply keep the accessible native open/close behavior. */
.landing-faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 260ms cubic-bezier(0.2, 0.75, 0.25, 1), content-visibility 260ms allow-discrete;
}

.landing-faq-item[open]::details-content {
  block-size: auto;
}

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

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

  body.landing-3d #pricing .depth-pricing-scene {
    width: min(100% - 48px, var(--container-main));
    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;
  }

}

/* 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(30px, 2.6vw, 36px) auto 0;
  text-align: center;
}

.landing-faq-cta-copy {
  margin: 0;
  color: rgba(205, 220, 230, 0.62);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.landing-faq-cta-contact {
  margin-left: 0.28em;
  color: rgba(35, 209, 139, 0.78);
  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% - 48px, var(--container-main));
    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, but its links
   must still read comfortably. */
body.landing-3d .site-footer {
  position: relative;
  z-index: 3;
  display: block;
  padding: clamp(64px, 6vw, 76px) 0 36px;
  border-top: 1px solid rgba(160, 200, 220, 0.09);
  background: linear-gradient(180deg, rgba(6, 17, 22, 0.96), #050d12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

body.landing-3d .footer-inner {
  width: min(100% - 48px, var(--container-main));
  row-gap: clamp(48px, 5vw, 56px);
  column-gap: clamp(48px, 8vw, 108px);
}

body.landing-3d .footer-wordmark-img {
  width: 132px;
  height: auto;
}

body.landing-3d .footer-nav {
  gap: clamp(26px, 3.6vw, 52px);
}

body.landing-3d .footer-nav-group {
  gap: 12px;
}

/* Editorial column labels: small, tracked, quietly authoritative. */
body.landing-3d .footer-nav-group h2 {
  margin-bottom: 9px;
  color: rgba(205, 225, 235, 0.64);
  font-size: 0.71rem;
  font-weight: 650;
  letter-spacing: 0.1em;
}

body.landing-3d .footer-statement,
body.landing-3d .footer-disclaimer {
  max-width: 310px;
  color: rgba(210, 225, 235, 0.66);
  font-size: 0.8125rem;
  line-height: 1.62;
}

body.landing-3d .footer-disclaimer {
  color: rgba(180, 200, 210, 0.46);
  font-size: 0.78rem;
}

body.landing-3d .footer-nav a {
  color: rgba(205, 225, 235, 0.62);
  font-size: 0.8125rem;
  line-height: 1.9;
  transition: color 160ms ease, transform 160ms ease;
}

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

/* The editorial nudge is pointer-only so tapped anchor links never stick
   shifted on touch devices. */
@media (hover: hover) and (pointer: fine) {
  body.landing-3d .footer-nav a:hover {
    transform: translateX(2px);
  }
}

body.landing-3d .footer-copy {
  padding-top: 24px;
  border-top: 1px solid rgba(160, 200, 220, 0.07);
  color: rgba(180, 200, 210, 0.48);
  font-size: 0.75rem;
}

/* 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 {
    min-height: auto;
    /* Tight top seam: FAQ answers the pricing decision without a dead-air
       pause between them. */
    padding: var(--section-y-tight) 0 var(--section-y-tight);
  }

  body.landing-3d #access {
    min-height: auto;
    /* The close arrives a beat sooner after the FAQ; the generous bottom
       seat into the footer stays. 7.65vw reaches 110px at 1440px. */
    padding: clamp(76px, 7.65vw, 110px) 0 var(--section-y-large);
  }
}

/* =====================================================================
   Market Pulse strip — sits flush at the base of the hero, replacing the
   old trending-assets ticker. Live prices auto-scroll passively; 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;
  /* Thinner, quieter tape: it should read as a calm live pulse under a
     premium hero, never an exchange footer ticker. */
  height: 52px;
  border-top: 1px solid rgba(140, 165, 190, 0.045);
  border-bottom: 0;
  background: rgba(3, 8, 14, 0.82);
}

/* 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: rgba(210, 224, 234, 0.62);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

body.landing-3d .news-strip-label span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(39, 200, 137, 0.08);
  color: rgba(120, 210, 172, 0.78);
  font-family: var(--depth-mono, monospace);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body.landing-3d .news-strip-overflow {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* Edges are feathered by masking the tape itself — the items dissolve into
     the strip so there is no opaque "gradient box" beside the label. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(26px, 4.5vw, 64px), #000 calc(100% - clamp(20px, 3.5vw, 52px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 clamp(26px, 4.5vw, 64px), #000 calc(100% - clamp(20px, 3.5vw, 52px)), transparent 100%);
}

body.landing-3d .news-strip-overflow::before,
body.landing-3d .news-strip-overflow::after {
  /* Superseded by the mask-image above — the old opaque color fades read as a
     visible box beside the label, so they no longer render. */
  display: none;
}

body.landing-3d .news-strip-overflow::before {
  left: 0;
  /* Wider than the right fade: items must be fully dissolved before they
     reach the Market Pulse label, never half-legible beside it. 8.9vw
     reaches the 128px cap at 1440px per the clamp rule. */
  width: clamp(44px, 8.9vw, 128px);
  background: linear-gradient(90deg, var(--depth-bg, #040b14), transparent);
}

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

body.landing-3d .news-strip-track {
  /* Wider item breathing room so the tape never reads crammed on desktop. */
  --ticker-gap: 38px;
  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: 6px 10px;
  /* Quiet tape, not a row of boxed pills: no borders or panel fills — the
     generous track gap does the separating. */
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--depth-fg, #dce8e5);
  white-space: nowrap;
}

body.landing-3d .news-item strong {
  flex: 0 0 auto;
  /* Coin symbol reads as a quiet neutral label — green is reserved for the
     brand, not sprayed across every ticker row. */
  color: rgba(205, 220, 230, 0.5);
  font-size: 0.66rem;
  font-weight: 700;
  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.78rem, 0.68vw, 0.84rem);
  line-height: 1.25;
  color: var(--depth-fg, #cdd9d5);
  opacity: 0.74;
}

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 — slightly muted so the row of
   brand colors never competes with the page's own accent. */
body.landing-3d .pulse-logo {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  filter: saturate(0.72);
  opacity: 0.78;
}

/* The tape speaks in the data voice: tabular mono, quiet label, clearer
   price, muted signal colors that never compete with the primary green.
   Everything is pulled ~30% quieter so the strip recedes under the hero. */
body.landing-3d .pulse-item strong {
  color: rgba(232, 240, 248, 0.46);
  font-family: var(--depth-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.landing-3d .pulse-item .pulse-price {
  font-family: var(--depth-mono);
  font-size: 0.7rem;
  line-height: 1.2;
  color: rgba(232, 240, 248, 0.66);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

body.landing-3d .pulse-item .pulse-change {
  font-family: var(--depth-mono);
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

/* Softened up/down voices — an ambient market pulse, not a wall of signal.
   The green gain is muted to the brand accent so it never lights up the row. */
body.landing-3d .pulse-item .pulse-up {
  color: rgba(39, 200, 137, 0.62);
}

body.landing-3d .pulse-item .pulse-down {
  color: rgba(224, 130, 138, 0.6);
}

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

/* ============================================================
   How BloqBot Works — headline (second line in emerald) over three open
   stages: large green numeral + label + one line icon, then title and copy,
   linked by quiet directional chevrons. No cards, rules, or fragments.
   ============================================================ */
body.landing-3d #how-it-works {
  min-height: auto;
  /* The process rail enters promptly after the ticker — momentum, not a
     stall. The close padding matches the Features section's open padding
     (clamp(96px,8vw,120px)) so the hairline seam between them sits centered,
     with equal, generous breathing room on both sides. */
  padding: clamp(56px, 6.12vw, 88px) 0 clamp(96px, 8vw, 120px);
  /* A faint pool of the brand light at the section's opening connects it to
     the hero above instead of starting a new flat block. */
  background: radial-gradient(ellipse 56% 34% at 50% 0%, rgba(70, 105, 125, 0.03), transparent 70%);
}

body.landing-3d #how-it-works .depth-grid-bg {
  opacity: 0.3;
}

/* Width contract matches .feature-showcase-inner (same gutter clamp, same
   container-wide cap) so this section and Features share left/right edges. */
body.landing-3d .how-it-works-inner {
  width: min(100% - 48px, var(--container-wide));
}

/* Editorial column beside one connected operating sequence — the section is
   a private fintech process, never three onboarding cards. */
body.landing-3d .how-process-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 0.62fr);
  align-items: center;
  /* 4.45vw reaches the 64px cap at 1440px per the clamp rule. */
  gap: clamp(44px, 4.45vw, 64px);
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
}

/* On the desktop split, the editorial column carries the headline AND the
   reassurance note as one grouped unit, so the note sits beneath the headline
   instead of under the process rail. Centred as a group against the taller rail. */
body.landing-3d .how-editorial-col {
  max-width: 460px;
}

body.landing-3d .how-editorial {
  max-width: 460px;
  text-align: left;
}

body.landing-3d .how-editorial .depth-tag {
  display: inline-flex;
  width: fit-content;
  /* Eyebrow→headline gap, matched to the hero/features/pricing eyebrows. */
  margin: 0 0 22px;
  justify-content: flex-start;
}

body.landing-3d .how-editorial .depth-heading {
  max-width: 16ch;
  margin: 0;
  color: rgba(232, 240, 248, 0.92);
  /* Match the Features section's editorial headline scale while keeping the
     How It Works layout left-aligned and restrained. */
  font-size: clamp(40px, 3.62vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.048em;
  text-align: left;
  text-wrap: balance;
}

/* The accent phrase flows inline after the opening statement (wrapping
   naturally), rather than being forced onto its own line. Overrides the
   shadowed generic span rules. */
body.landing-3d .how-editorial .depth-heading span {
  display: inline;
  color: rgba(35, 209, 139, 0.8);
}

/* One connected operating sequence on a single shared surface — three
   hairline-separated stages, never three floating cards. */
body.landing-3d .how-process-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(165, 205, 220, 0.11);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 22, 31, 0.72), rgba(4, 12, 18, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 22px 60px rgba(0, 0, 0, 0.25);
  list-style: none;
  text-align: left;
}

/* Progress guide: a per-stage hairline at the dots' center line that only
   emerges after each stage label — a precision guide leading toward the
   next stage, never a wire through the text. No glow, no animation. */
body.landing-3d .how-step::before {
  content: "";
  position: absolute;
  /* Step padding + half the meta row height = the 5px dots' center line. */
  top: calc(clamp(22px, 1.95vw, 28px) + 8px);
  right: 0;
  /* Clears the longest "0N LABEL" lockup at every split width. */
  left: 150px;
  height: 1px;
  background: linear-gradient(90deg, rgba(35, 209, 139, 0), rgba(35, 209, 139, 0.1) 28px);
  pointer-events: none;
}

body.landing-3d .how-step:last-child::before {
  /* Extend to the card's right edge like the other steps, not short of it. */
  right: 0;
}

body.landing-3d .how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  /* 14.9vw reaches the 214px cap at ~1440px per the clamp rule. */
  min-height: clamp(190px, 14.9vw, 214px);
  /* 1.95vw reaches the 28px cap at 1440px per the clamp rule. */
  padding: clamp(22px, 1.95vw, 28px);
}

/* Hairline seams join the stages into one flow. */
body.landing-3d .how-step + .how-step {
  border-left: 1px solid rgba(165, 205, 220, 0.08);
}

/* Material feedback only: the stage acknowledges the pointer with a 2%
   surface lift and a touch more marker/title presence. No motion, no
   pointer cursor — these are explanations, not controls. */
@media (hover: hover) and (pointer: fine) {
  body.landing-3d .how-step {
    transition: background-color 180ms ease;
  }

  body.landing-3d .how-step-meta::before,
  body.landing-3d .how-step-title {
    transition: background-color 180ms ease, color 180ms ease;
  }

  body.landing-3d .how-step:hover {
    background-color: rgba(255, 255, 255, 0.02);
  }

  body.landing-3d .how-step:hover .how-step-meta::before {
    background: rgba(35, 209, 139, 0.8);
  }

  body.landing-3d .how-step:hover .how-step-title {
    color: rgba(238, 244, 255, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-3d .how-step,
  body.landing-3d .how-step-meta::before,
  body.landing-3d .how-step-title {
    transition: none;
  }
}

/* Stage index: small mono numeral + quiet category label — data voice,
   never a display numeral, never green. */
body.landing-3d .how-step-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* A 5px signal dot indexes each stage into the system — the one green
   detail per stage, quiet and unglowing. */
body.landing-3d .how-step-meta::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(35, 209, 139, 0.72);
}

body.landing-3d .how-step-num {
  /* The stage number carries the same green as its signal dot. */
  color: rgba(35, 209, 139, 0.72);
  font-family: var(--depth-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

body.landing-3d .how-step-label {
  color: rgba(205, 225, 235, 0.52);
  font-family: var(--depth-mono);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.landing-3d .how-step-title {
  /* 2.36vw reaches the 34px cap at 1440px per the clamp rule. */
  margin: clamp(28px, 2.36vw, 34px) 0 0;
  /* Two-line reserve keeps the copy rows level across the three stages. */
  min-height: 2.44em;
  color: rgba(232, 240, 248, 0.9);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.22;
}

body.landing-3d .how-step-copy {
  margin: 12px 0 0;
  color: rgba(205, 220, 230, 0.66);
  font-size: 0.86rem;
  line-height: 1.62;
}

/* Private-bank reassurance note closes the process beneath the step rail. */
body.landing-3d .how-trust {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  /* A precise trust footnote — icon + text only, no second surface. It sits
     directly beneath the headline in the editorial column (grouped via
     .how-editorial-col), so it reads as reassurance under the statement rather
     than a caption under the rail. */
  max-width: 420px;
  margin: clamp(22px, 2.3vw, 30px) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(205, 220, 230, 0.6);
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.5;
  text-align: left;
}

body.landing-3d .how-trust-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  fill: none;
  stroke: rgba(35, 209, 139, 0.72);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.landing-3d .how-trust strong {
  color: rgba(232, 240, 248, 0.9);
  font-weight: 600;
}

/* Below the split the shell stacks: editorial above, the rail as a vertical
   sequence with horizontal hairline seams — still one connected system. */
@media (max-width: 960px) {
  body.landing-3d .how-process-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 34px;
  }

  /* Below the split the wrapper dissolves so the headline, rail and note stack
     as one column; `order` returns the note to the foot of the sequence, exactly
     as before this became a grouped editorial column on desktop. */
  body.landing-3d .how-editorial-col {
    display: contents;
  }

  body.landing-3d .how-trust {
    grid-column: auto;
    order: 1;
    margin: -12px 0 0;
  }

  body.landing-3d .how-editorial {
    max-width: 560px;
  }

  body.landing-3d .how-process-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  body.landing-3d .how-step::before {
    content: none;
  }

  body.landing-3d .how-step {
    min-height: 0;
  }

  body.landing-3d .how-step + .how-step {
    border-left: 0;
    border-top: 1px solid rgba(165, 205, 220, 0.08);
  }

  body.landing-3d .how-step-title {
    margin-top: 20px;
    /* Stacked stages size to their own titles — no cross-column reserve. */
    min-height: 0;
  }
}

[data-theme="light"] body.landing-3d .how-step-label,
[data-theme="light"] body.landing-3d .how-step-copy,
[data-theme="light"] body.landing-3d .how-trust {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .how-trust-icon {
  stroke: rgba(16, 169, 114, 0.92);
}

[data-theme="light"] body.landing-3d .how-trust strong {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .how-step-num {
  color: rgba(16, 169, 114, 0.95);
}

[data-theme="light"] body.landing-3d .how-process-rail {
  border-color: rgba(15, 17, 21, 0.08);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 17, 21, 0.05);
}

[data-theme="light"] body.landing-3d .how-step + .how-step {
  border-color: rgba(15, 17, 21, 0.08);
}

/* 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(52px, 5.2vw, 76px);
  margin-left: auto;
}

body.landing-3d .landing-section .depth-section-head .depth-tag {
  margin-bottom: 30px;
}

body.landing-3d .landing-section .depth-section-head .depth-heading {
  width: 100%;
  max-width: 22ch;
  margin-right: auto;
  margin-left: auto;
  color: var(--text-strong);
  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%, 620px);
  max-width: 620px;
  margin: clamp(14px, 1.2vw, 18px) auto 0;
  color: var(--text-body);
  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: 17ch;
  font-size: var(--headline-md);
  letter-spacing: -0.05em;
  line-height: 0.96;
  text-wrap: balance;
}

/* Brand accent on the CTA headline — "BloqBot" in the muted brand green,
   matching the accent voice used across the landing headlines. */
body.landing-3d #access .depth-cta-heading span {
  color: rgba(39, 200, 137, 0.82);
}

body.landing-3d #access .depth-copy {
  width: min(100%, 560px);
  max-width: 560px;
  margin-top: clamp(18px, 2vw, 26px);
  color: rgba(210, 225, 235, 0.7);
  font-size: var(--landing-section-copy-size);
  font-weight: 400;
  line-height: var(--landing-section-copy-leading);
}

body.landing-3d #access {
  border-top: 1px solid rgba(207, 224, 255, 0.1);
  /* One almost-subliminal pool of the brand light behind the closing
     statement, on a quiet navy counterlight so the black doesn't read flat —
     a calm close on the page's own navy, never an off-blue ad block. */
  background:
    radial-gradient(ellipse 46% 56% at 50% 40%, rgba(70, 105, 125, 0.028), transparent 72%),
    radial-gradient(ellipse 70% 60% at 50% 96%, rgba(52, 82, 120, 0.03), transparent 70%),
    #040b14;
}

body.landing-3d #access .depth-grid-bg {
  opacity: 0.32;
}

body.landing-3d #access .depth-actions {
  margin-top: clamp(30px, 3.2vw, 42px);
}

body.landing-3d #access .depth-btn-primary {
  min-width: 164px;
  min-height: 48px;
  font-size: 0.85rem;
  /* The closing button seats on a plain black shadow — the hero primary is
     the only green-lit CTA on the page. */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26) !important;
}

/* Calm final invitation: a restrained one-pixel lift, no glow moment. */
body.landing-3d #access .depth-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
}

body.landing-3d #access .depth-cta-reassurance {
  margin: 16px 0 0;
  color: rgba(210, 225, 235, 0.54);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

/* FAQ is the editorial counterpoint to the centered product sections. The
   columns stay top-aligned so opening one answer never shifts its neighbors. */
@media (min-width: 701px) {
  body.landing-3d #faqs .depth-faq-head {
    width: min(100%, 680px);
    max-width: 680px;
    margin-right: auto;
    margin-bottom: clamp(40px, 3.2vw, 46px);
    margin-left: 0;
    text-align: left;
  }

  body.landing-3d #faqs .depth-faq-head .depth-tag {
    justify-content: flex-start;
  }

  body.landing-3d #faqs .depth-faq-head .depth-heading,
  body.landing-3d #faqs .depth-faq-head .depth-copy {
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  body.landing-3d #faqs .depth-faq-head .depth-heading {
    max-width: 18ch;
    font-size: var(--headline-md);
    line-height: 0.98;
  }
}

/* Light-theme counterparts keep the same hierarchy without retaining dark-only
   hardcoded contrast values from the primary landing presentation. */
[data-theme="light"] body.landing-3d .landing-faq-group-title,
[data-theme="light"] body.landing-3d .landing-faq-answer {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d .landing-faq-items,
[data-theme="light"] body.landing-3d .landing-faq-item {
  border-color: var(--depth-line);
}

[data-theme="light"] body.landing-3d .landing-faq-item summary {
  color: var(--depth-fg);
}

[data-theme="light"] body.landing-3d .landing-faq-item summary svg {
  stroke: var(--depth-muted);
}

[data-theme="light"] body.landing-3d #access,
[data-theme="light"] body.landing-3d .site-footer {
  border-color: var(--depth-line);
  background: #f2f5f4;
}

[data-theme="light"] body.landing-3d #access .depth-copy {
  color: var(--depth-dim);
}

[data-theme="light"] body.landing-3d #access .depth-cta-reassurance {
  color: var(--depth-muted);
}

@media (prefers-reduced-motion: reduce) {
  .landing-faq-item summary,
  .landing-faq-item summary svg,
  .landing-faq-answer,
  .landing-faq-item::details-content {
    transition: none;
  }
}