/* InJest: Cinematic Dark-First Design System & Animation Engine */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("fonts/PlusJakartaSans-Variable.woff2") format("woff2");
}

:root {
  --bg: #0c100c;
  --bg-surface: #101510;
  --bg-card: rgba(16, 23, 17, 0.75);
  --bg-card-hover: rgba(22, 33, 23, 0.85);
  --bg-elevated: #162017;
  --text: #e9f6ea;
  --text-bright: #ffffff;
  --muted: #8ea893;
  --muted-dim: #5c7461;
  --accent: #35e06f;
  --accent-hover: #5aef8d;
  --accent-soft: #9ff7bc;
  --accent-dim: rgba(53, 224, 111, 0.12);
  --accent-grad: linear-gradient(135deg, #7cf7a3 0%, #35e06f 55%, #1fb659 100%);
  --accent-glow: 0 0 35px rgba(53, 224, 111, 0.35);
  --ok: #6df29a;
  --warn: #f5c96a;
  --bad: #ff7b70;
  --line: rgba(184, 230, 191, 0.12);
  --line-strong: rgba(184, 230, 191, 0.28);
  --field: rgba(255, 255, 255, 0.04);
  --glow: rgba(53, 224, 111, 0.35);
  --cat-photos: #6bcffe;
  --cat-videos: #ffb64c;
  --cat-audio: #ff7ac1;
  --cat-other: #15e0a1;
  --cat-free: #353f36;
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: Consolas, "SF Mono", "Fira Code", monospace;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --scrollbar-thumb: rgba(53, 224, 111, 0.35);
  --scrollbar-thumb-hover: rgba(53, 224, 111, 0.65);
}

/* ==================== InJest App-Accurate Custom Scrollbars ==================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(1200px 700px at 50% -10%, rgba(74, 222, 128, 0.14) 0%, transparent 60%), linear-gradient(180deg, #131a13 0%, #0d110d 60%, #10140f 100%);
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--accent-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-hover);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--accent-soft);
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-narrow {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

h1 {
  font-size: clamp(40px, 6vw, 70px);
}

h2 {
  font-size: clamp(30px, 4.4vw, 48px);
}

h3 {
  font-size: 20px;
}

.grad {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  padding-right: 0.14em;
}

.eyebrow {
  color: var(--accent-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* ==================== Header & Navigation ==================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 16, 12, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s ease, background 0.3s ease;
}

.site-header.scrolled {
  background: rgba(10, 14, 10, 0.94);
  border-bottom-color: rgba(184, 230, 191, 0.2);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-mark {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 10px rgba(53, 224, 111, 0.35));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
}

.logo:hover .logo-mark {
  transform: scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 0 16px rgba(53, 224, 111, 0.5));
}

/* Same checkmark swoosh as the app's own header logo (see PC/src/renderer/
   styles.css's .logo-check/logoCheckDraw) - visual only, no chime here
   unlike the app's sidebar logo, since a landing page shouldn't play audio
   on hover unprompted. */
.logo-check {
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
  transition: filter 0.3s;
}

.logo:hover .logo-check {
  animation: logoCheckDraw 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes logoCheckDraw {
  0% { stroke-dashoffset: 20; }
  50% { stroke-dashoffset: 0; filter: drop-shadow(0 0 8px var(--glow)); }
  100% { stroke-dashoffset: 0; }
}

.logo-word {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  color: var(--text-bright);
  letter-spacing: -0.5px;
}

.site-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--text-bright);
}

.site-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-btn span {
  width: 22px;
  height: 2px;
  background: var(--text-bright);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==================== Buttons & CTAs ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary {
  background: var(--accent-grad);
  color: #051b0c;
  padding: 15px 28px;
  font-size: 16.5px;
  box-shadow: 0 8px 28px rgba(53, 224, 111, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  position: relative;
  overflow: visible;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
  box-shadow: 0 12px 38px rgba(53, 224, 111, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #041409;
  transform: translateY(-2px);
}

/* Flying Sparks and Particle Aura */
.btn-particles {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  border-radius: calc(var(--radius-md) + 12px);
  overflow: visible;
  z-index: 2;
}

.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #6df29a, 0 0 4px #ffffff;
  opacity: 0;
}

.s1 { top: -2px; left: 18%; animation: sparkOrbit1 3s ease-in-out infinite; }
.s2 { top: 40%; right: -6px; animation: sparkOrbit2 3.6s ease-in-out 0.7s infinite; }
.s3 { bottom: -4px; left: 60%; animation: sparkOrbit3 3.8s ease-in-out 1.4s infinite; }
.s4 { top: 25%; left: -6px; animation: sparkOrbit4 3.2s ease-in-out 2.1s infinite; }
.s5 { bottom: -2px; right: 25%; animation: sparkOrbit1 4s ease-in-out 1.8s infinite; }

@keyframes sparkOrbit1 {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  25% { opacity: 1; transform: translate(16px, -10px) scale(1.3); }
  60% { opacity: 0.8; transform: translate(38px, -4px) scale(0.9); }
  100% { opacity: 0; transform: translate(65px, -16px) scale(0.3); }
}

@keyframes sparkOrbit2 {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  30% { opacity: 1; transform: translate(8px, 14px) scale(1.3); }
  65% { opacity: 0.7; transform: translate(4px, 28px) scale(0.8); }
  100% { opacity: 0; transform: translate(12px, 42px) scale(0.3); }
}

@keyframes sparkOrbit3 {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  30% { opacity: 1; transform: translate(-16px, 8px) scale(1.2); }
  70% { opacity: 0.7; transform: translate(-42px, 4px) scale(0.8); }
  100% { opacity: 0; transform: translate(-70px, 12px) scale(0.3); }
}

@keyframes sparkOrbit4 {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  30% { opacity: 1; transform: translate(-8px, -14px) scale(1.4); }
  70% { opacity: 0.7; transform: translate(-16px, -26px) scale(0.8); }
  100% { opacity: 0; transform: translate(-22px, -40px) scale(0.3); }
}

.btn-primary:hover .spark {
  animation-duration: 1.4s;
  box-shadow: 0 0 16px #35e06f, 0 0 6px #ffffff;
}

.btn-primary.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 10px;
}

.btn-primary.btn-block {
  width: 100%;
}

.btn-dark {
  background: #111812;
  color: var(--text-bright);
  padding: 15px 28px;
  font-size: 16.5px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.btn-dark:hover {
  color: #fff;
  background: #182319;
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(53, 224, 111, 0.2);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 14px 26px;
  font-size: 15.5px;
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(53, 224, 111, 0.08);
  color: var(--accent-soft);
  transform: translateY(-2px);
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.cta-row.center {
  justify-content: center;
}

.cta-secondary {
  color: var(--accent-soft);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.cta-secondary:hover {
  color: var(--accent-hover);
  gap: 10px;
}

.cta-note {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 16px;
}

/* ==================== Hero Section & Ambient Glow ==================== */
.hero {
  position: relative;
  padding: 88px 0 84px;
}

.hero::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: 100vw;
  height: 850px;
  background: radial-gradient(ellipse 55% 45% at 50% 40%, rgba(53, 224, 111, 0.2) 0%, rgba(53, 224, 111, 0.08) 40%, rgba(53, 224, 111, 0.015) 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
}

.nowrap {
  white-space: nowrap;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

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

.hero h1 {
  font-size: clamp(38px, 5.5vw, 66px);
  line-height: 1.12;
}

.sub {
  color: var(--muted);
  font-size: 19px;
  margin-top: 22px;
  line-height: 1.6;
}

/* Hero Flow Animation */
.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.flow {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(13, 18, 13, 0.8);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(53, 224, 111, 0.06);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.flow.appear {
  opacity: 1;
  transform: none;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.flow-card {
  width: 84px;
  height: 84px;
  transition: filter 0.3s;
}

.flow-card .fc-check {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.flow.checked .flow-card {
  animation: flowCardPop 0.5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.flow.checked .flow-card .fc-check {
  animation: flowCheckDraw 0.6s cubic-bezier(.4, 0, .2, 1) forwards;
}

.flow-line {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}

.flow-line .line-track {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.flow-line i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 2px;
  background: var(--accent-grad);
  box-shadow: 0 0 10px var(--glow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.4, 0, .2, 1);
}

.flow.verify .flow-line i {
  transform: scaleX(1);
}

.flow-line code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 4px 9px 2px;
  border-radius: 999px;
  transition: border-color 1.1s ease, box-shadow 1.1s ease, background 1.1s ease;
}

.flow.verify .flow-line code {
  border-color: var(--accent);
  background: rgba(53, 224, 111, 0.12);
  box-shadow: 0 0 14px rgba(53, 224, 111, 0.4);
}

.flow-dest {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dot.ok {
  background: var(--ok);
  box-shadow: 0 0 8px rgba(109, 242, 154, 0.6);
}

.dot.pending {
  background: var(--warn);
  box-shadow: 0 0 8px rgba(245, 201, 106, 0.55);
}

.dot.pending.flash {
  background: var(--ok);
  box-shadow: 0 0 10px rgba(109, 242, 154, 0.6);
  animation: dotFlash 0.55s ease;
}

@keyframes dotFlash {
  0% { background: var(--warn); box-shadow: 0 0 8px rgba(245, 201, 106, 0.55); transform: scale(1); }
  45% { background: #eafff1; box-shadow: 0 0 18px rgba(255, 255, 255, 0.95), 0 0 26px rgba(109, 242, 154, 0.85); transform: scale(1.65); }
  100% { background: var(--ok); box-shadow: 0 0 10px rgba(109, 242, 154, 0.6); transform: scale(1); }
}

@keyframes flowCardPop {
  0% { transform: scale(1) rotate(0); }
  55% { transform: scale(1.1) rotate(-3deg); filter: drop-shadow(0 0 14px rgba(53, 224, 111, 0.5)); }
  100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 8px rgba(53, 224, 111, 0.3)); }
}

@keyframes flowCheckDraw {
  0% { stroke-dashoffset: 20; }
  50% { stroke-dashoffset: 0; filter: drop-shadow(0 0 8px var(--glow)); }
  100% { stroke-dashoffset: 0; }
}

.flow-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  color: var(--muted);
  font-size: 14.5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.flow-caption.appear {
  opacity: 1;
  transform: none;
}

.flow-caption .fc-verified,
.flow-caption .fc-checksum {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.flow-caption .fc-verified.show,
.flow-caption .fc-checksum.show {
  opacity: 1;
  transform: none;
}

.ok-text {
  color: var(--ok);
  font-weight: 700;
}

/* Trust Strip */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(14, 20, 15, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.trust-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(53, 224, 111, 0.5) 25%, rgba(109, 242, 154, 0.95) 50%, rgba(53, 224, 111, 0.5) 75%, transparent 100%);
  background-size: 200% 100%;
  animation: borderShimmer 6s ease-in-out infinite;
}

.trust-strip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(53, 224, 111, 0.5) 25%, rgba(109, 242, 154, 0.95) 50%, rgba(53, 224, 111, 0.5) 75%, transparent 100%);
  background-size: 200% 100%;
  animation: borderShimmer 6s ease-in-out infinite;
}

@keyframes borderShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.trust-marquee-track {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 26px 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.trust-marquee-group:last-child {
  display: none;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: all 0.25s ease;
  opacity: 0;
  transform: translateY(14px);
}

.trust-strip.in .trust-item,
.trust-strip.in-view .trust-item {
  animation: trustFadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.trust-strip.in .item-1, .trust-strip.in-view .item-1 { animation-delay: 0.1s; }
.trust-strip.in .item-2, .trust-strip.in-view .item-2 { animation-delay: 0.22s; }
.trust-strip.in .item-3, .trust-strip.in-view .item-3 { animation-delay: 0.34s; }
.trust-strip.in .item-4, .trust-strip.in-view .item-4 { animation-delay: 0.46s; }

@keyframes trustFadeUp {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

.trust-item:hover {
  background: rgba(53, 224, 111, 0.06);
  transform: translateY(-2px);
}

.trust-item b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--accent-soft);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.trust-item:hover b {
  color: #fff;
  text-shadow: 0 0 12px rgba(53, 224, 111, 0.5);
}

.trust-item span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ==================== Sections Common ==================== */
.section {
  padding: 100px 0;
  position: relative;
}

.section-alt {
  background: rgba(255, 255, 255, 0.012);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}

.section-sub {
  color: var(--muted);
  font-size: 18px;
  margin-top: 16px;
  line-height: 1.6;
}

/* ==================== 1:30 AM Post-Shoot Reality: Problem vs Solution ==================== */
.reality-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
  align-items: stretch;
}

.reality-card {
  border-radius: var(--radius-xl);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chaos / Nightmare Card */
.reality-card-chaos {
  background: radial-gradient(circle at top left, rgba(255, 123, 112, 0.08) 0%, rgba(18, 12, 12, 0.95) 70%);
  border: 1px solid rgba(255, 123, 112, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 123, 112, 0.05);
}

.reality-card-chaos:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 123, 112, 0.45);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 35px rgba(255, 123, 112, 0.1);
}

.reality-badge-chaos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bad);
  background: rgba(255, 123, 112, 0.12);
  border: 1px solid rgba(255, 123, 112, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.reality-dot-bad {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 8px var(--bad);
}

/* Relief / InJest Card */
.reality-card-relief {
  background: radial-gradient(circle at top left, rgba(53, 224, 111, 0.1) 0%, rgba(12, 20, 14, 0.96) 70%);
  border: 1px solid rgba(53, 224, 111, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 35px rgba(53, 224, 111, 0.1);
}

.reality-card-relief:hover {
  transform: translateY(-4px);
  border-color: rgba(53, 224, 111, 0.55);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 45px rgba(53, 224, 111, 0.18);
}

.reality-badge-relief {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(53, 224, 111, 0.12);
  border: 1px solid rgba(53, 224, 111, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.reality-dot-ok {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.reality-card-header h3 {
  font-size: 24px;
  font-family: var(--font-head);
  letter-spacing: -0.4px;
  color: var(--text-bright);
  margin-bottom: 8px;
  line-height: 1.3;
}

.reality-sub {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ==================== Chaos vs InJested TrueVerified Reality ==================== */

/* Left: Chaotic Scattered Canvas */
.chaos-scatter-canvas {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0;
}

.float-win-1 {
  transform: rotate(-2.2deg) translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 123, 112, 0.12);
  z-index: 1;
  transition: transform 0.3s ease;
  animation: floatChaosWin1 5s ease-in-out infinite;
}

.float-win-2 {
  transform: rotate(2.4deg) translateY(12px) translateX(10px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 123, 112, 0.18);
  z-index: 2;
  margin-top: -24px;
  transition: transform 0.3s ease;
  animation: floatChaosWin2 5.5s ease-in-out infinite;
}

@keyframes floatChaosWin1 {
  0%, 100% { transform: rotate(-2.2deg) translateY(-8px); }
  50% { transform: rotate(-1.5deg) translateY(-14px); }
}

@keyframes floatChaosWin2 {
  0%, 100% { transform: rotate(2.4deg) translateY(12px) translateX(10px); }
  50% { transform: rotate(3deg) translateY(6px) translateX(14px); }
}

.win-dialog-box {
  background: #180e0e;
  border: 1px solid rgba(255, 123, 112, 0.5);
  border-radius: 9px;
  overflow: hidden;
  font-family: var(--font-body);
}

.win-dialog-titlebar {
  background: rgba(255, 123, 112, 0.16);
  border-bottom: 1px solid rgba(255, 123, 112, 0.3);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffd0cb;
}

.win-close-x {
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

.win-dialog-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.win-conflict-warning {
  font-size: 12px;
  color: #ffd0cb;
}

.win-opt-item {
  background: rgba(255, 123, 112, 0.12);
  border: 1.5px solid var(--bad);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: dangerPulseOpt 1.8s infinite ease-in-out;
}

@keyframes dangerPulseOpt {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 123, 112, 0.2); }
  50% { box-shadow: 0 0 16px rgba(255, 123, 112, 0.5); }
}

.win-opt-bullet {
  font-size: 13px;
  color: var(--bad);
  margin-top: 1px;
}

.win-opt-item b {
  font-size: 12px;
  color: #fff;
  display: block;
}

.win-opt-item p {
  font-size: 11px;
  color: #ff9b91;
  margin: 2px 0 0;
}

/* Windows Error Stalled Dialog */
.win-dialog-error {
  border-color: rgba(255, 123, 112, 0.6);
  background: #1c0f0f;
}

.win-error-msg b {
  font-size: 12px;
  color: #fff;
  display: block;
}

.win-error-msg p {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 0;
  font-family: var(--font-mono);
}

.win-stalled-bar-wrap {
  height: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 123, 112, 0.35);
}

.win-stalled-bar-fill {
  height: 100%;
  width: 99%;
  background: repeating-linear-gradient(
    -45deg,
    #ff7b70,
    #ff7b70 8px,
    #b91c1c 8px,
    #b91c1c 16px
  );
  background-size: 32px 32px;
  animation: stripeMove 1.2s linear infinite;
}

.win-telemetry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--font-mono);
  color: #ffc2bb;
}

/* Floating Sticky Note & Balloon Alert */
.chaos-sticky-note {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #fff3bf;
  color: #5c3b00;
  border: 1px solid #ffe066;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  transform: rotate(4.5deg);
  z-index: 3;
  animation: floatSticky 4.2s ease-in-out infinite;
}

@keyframes floatSticky {
  0%, 100% { transform: rotate(4.5deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-6px); }
}

.chaos-balloon-alert {
  position: absolute;
  bottom: 0px;
  left: 4px;
  background: rgba(30, 14, 14, 0.95);
  border: 1px solid rgba(255, 123, 112, 0.6);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #ff9b91;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
  z-index: 3;
  animation: floatBalloon 4.8s ease-in-out infinite;
}

@keyframes floatBalloon {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-1.5deg) translateY(-5px); }
}

/* Right: InJested & TrueVerified Seal Card */
.injest-verified-seal-card {
  background: radial-gradient(circle at top left, rgba(20, 48, 26, 0.6) 0%, #0d1710 100%);
  border: 1px solid rgba(53, 224, 111, 0.4);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(53, 224, 111, 0.12);
  min-height: 420px;
  justify-content: space-between;
}

.verified-stamp-banner {
  background: rgba(53, 224, 111, 0.12);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 0 18px rgba(53, 224, 111, 0.2);
}

.stamp-check-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #051b0c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 12px var(--accent);
  flex-shrink: 0;
}

.stamp-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stamp-text-wrap b {
  font-size: 13px;
  color: #ffffff;
  font-family: var(--font-head);
}

.stamp-text-wrap code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-soft);
}

.verified-points-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.verified-point-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.v-point-icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 1px;
}

.v-point-text b {
  display: block;
  font-size: 14px;
  color: #e9f6ea;
  font-family: var(--font-head);
  margin-bottom: 2px;
}

.v-point-text p {
  font-size: 12.5px;
  color: #9cb8a1;
  line-height: 1.45;
  margin: 0;
}

.reality-footer {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.reality-pill-bad {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bad);
  background: rgba(255, 123, 112, 0.12);
  border: 1px solid rgba(255, 123, 112, 0.25);
  border-radius: 8px;
  padding: 8px 14px;
}

.reality-pill-ok {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ok);
  background: rgba(53, 224, 111, 0.12);
  border: 1px solid rgba(53, 224, 111, 0.3);
  border-radius: 8px;
  padding: 8px 14px;
}

.chaos-window {
  background: rgba(20, 15, 15, 0.9);
  border: 1px solid rgba(255, 123, 112, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.chaos-window:hover {
  transform: translateY(-3px);
}

.chaos-window-header {
  background: rgba(255, 123, 112, 0.12);
  border-bottom: 1px solid rgba(255, 123, 112, 0.2);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--bad);
}

.window-dots {
  display: flex;
  gap: 5px;
}

.window-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 123, 112, 0.4);
}

.chaos-window-body {
  padding: 18px;
  font-size: 13.5px;
  color: #d1b4b4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chaos-alert-banner {
  background: rgba(255, 123, 112, 0.12);
  border: 1px solid rgba(255, 123, 112, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #ffc4bf;
  font-size: 13px;
}

.chaos-alert-banner b {
  color: var(--bad);
  font-size: 13.5px;
}

.chaos-warning-icon {
  font-size: 16px;
  line-height: 1;
}

.live-pulse-bad {
  animation: pulseBad 1.2s infinite;
}

@keyframes pulseBad {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--bad)); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 8px var(--bad)); }
}

.chaos-collision-box {
  background: #110c0c;
  border: 1px solid rgba(255, 123, 112, 0.2);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.collision-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.col-tag {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--warn);
}

.collision-item code {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 123, 112, 0.3);
  font-size: 11px;
}

.col-size {
  font-size: 10.5px;
  color: var(--muted);
}

.collision-vs {
  font-weight: 800;
  color: var(--bad);
  font-size: 11px;
  background: rgba(255, 123, 112, 0.15);
  border-radius: 4px;
  padding: 2px 6px;
}

.collision-target code {
  border-color: var(--bad);
  color: var(--bad);
  animation: borderFlicker 2s infinite;
}

@keyframes borderFlicker {
  0%, 100% { border-color: rgba(255, 123, 112, 0.4); }
  50% { border-color: rgba(255, 123, 112, 0.9); box-shadow: 0 0 10px rgba(255, 123, 112, 0.3); }
}

.chaos-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.chaos-btn {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.chaos-btn.danger-pulse {
  background: rgba(255, 123, 112, 0.18);
  border: 1px solid var(--bad);
  color: #fff;
  animation: dangerPulse 2s ease-in-out infinite;
}

@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 123, 112, 0.2); }
  50% { box-shadow: 0 0 14px rgba(255, 123, 112, 0.45); }
}

.chaos-btn.dim {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.hazard-footnote {
  font-size: 11.5px;
  color: var(--bad);
  font-weight: 600;
}

/* Stalled Progress Bar */
.chaos-progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chaos-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
}

.stalled-pct {
  color: var(--bad);
  font-family: var(--font-mono);
}

.chaos-progress-track {
  height: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 123, 112, 0.3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.chaos-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 99%;
  background: repeating-linear-gradient(
    -45deg,
    #ff7b70,
    #ff7b70 10px,
    #d94336 10px,
    #d94336 20px
  );
  background-size: 28px 28px;
  animation: hazardStripe 1.5s linear infinite;
  border-radius: 999px;
}

@keyframes hazardStripe {
  0% { background-position: 0 0; }
  100% { background-position: 28px 0; }
}

.chaos-telemetry-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.bad-val {
  color: var(--bad);
}

.chaos-hazard-note {
  background: rgba(255, 123, 112, 0.08);
  border-left: 3px solid var(--bad);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #e6b8b5;
  margin-top: 4px;
}

.chaos-hazard-note strong {
  color: #ff9b94;
}

.freeze-banner {
  margin-top: 36px;
  text-align: center;
  background: rgba(255, 123, 112, 0.08);
  border: 1px solid rgba(255, 123, 112, 0.3);
  border-radius: var(--radius-lg);
  padding: 24px 30px;
}

.midnight-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 123, 112, 0.3);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--muted);
  margin-bottom: 12px;
}

.clock-live {
  color: #fff;
  font-weight: 800;
}

.freeze-banner h3 {
  font-size: clamp(20px, 3vw, 28px);
  color: #ff9b94;
  letter-spacing: -0.5px;
}

/* ==================== Section: Meet InJest Reveal ==================== */
.reveal-transition {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0;
  position: relative;
}

.reveal-transition::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 200px;
  background: radial-gradient(circle, rgba(53, 224, 111, 0.1) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.reveal-transition .hero-tagline {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 16px 0 24px;
  position: relative;
  z-index: 1;
}

.feature-pill-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-dim);
  border: 1px solid rgba(53, 224, 111, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-soft);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: default;
  user-select: none;
}

.feature-pill:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(53, 224, 111, 0.7);
  color: #fff;
  background: rgba(53, 224, 111, 0.18);
  box-shadow: 0 6px 20px rgba(53, 224, 111, 0.25);
}

@keyframes pillBreath {
  0%, 100% {
    border-color: rgba(53, 224, 111, 0.28);
    box-shadow: 0 0 0 rgba(53, 224, 111, 0);
    transform: translateY(0);
  }
  50% {
    border-color: rgba(53, 224, 111, 0.55);
    box-shadow: 0 4px 16px rgba(53, 224, 111, 0.16);
    transform: translateY(-2px);
  }
}

.feature-pill:nth-child(1) { animation: pillBreath 4s ease-in-out infinite 0s; }
.feature-pill:nth-child(2) { animation: pillBreath 4s ease-in-out infinite 1s; }
.feature-pill:nth-child(3) { animation: pillBreath 4s ease-in-out infinite 2s; }
.feature-pill:nth-child(4) { animation: pillBreath 4s ease-in-out infinite 3s; }

/* ==================== Section: 5-Stage Core Workflow ==================== */
.workflow-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.workflow-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.workflow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
  transition: all 0.3s ease;
}

.workflow-card:hover {
  transform: translateY(-6px);
  border-color: rgba(53, 224, 111, 0.4);
  background: var(--bg-card-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(53, 224, 111, 0.1);
}

.workflow-card:hover::before {
  background: var(--accent-grad);
  box-shadow: 0 0 12px var(--accent);
}

/* One-Time Sequential Pipeline Reveal Sweep on Scroll */
.workflow-stages.animating .workflow-card {
  animation: workflowSequenceSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 0.14s);
}

@keyframes workflowSequenceSweep {
  0% {
    opacity: 0.4;
    transform: translateY(12px);
    border-color: var(--line);
  }
  50% {
    opacity: 1;
    border-color: rgba(53, 224, 111, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 18px rgba(53, 224, 111, 0.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    border-color: var(--line);
    box-shadow: none;
  }
}

.workflow-stages.animating .workflow-card::before {
  animation: workflowBarSweep 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 0.14s);
}

@keyframes workflowBarSweep {
  0% {
    background: var(--line);
  }
  50% {
    background: var(--accent-grad);
    box-shadow: 0 0 12px var(--accent);
  }
  100% {
    background: var(--line);
    box-shadow: none;
  }
}

.wf-step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-step-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.workflow-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
  color: var(--text-bright);
}

.workflow-card p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
  overflow-wrap: break-word;
  word-break: normal;
}

.workflow-card code {
  background: rgba(53, 224, 111, 0.1);
  border: 1px solid rgba(53, 224, 111, 0.25);
  color: var(--accent-soft);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  display: inline-block;
  vertical-align: middle;
  word-break: break-all;
}

.wf-interactive-preview {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent-soft);
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

/* ==================== Section: TrueVerify Interactive Micro-Demo ==================== */
.trueverify-box {
  background: var(--bg-card);
  border: 1px solid rgba(53, 224, 111, 0.35);
  border-radius: var(--radius-xl);
  padding: 44px 38px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(53, 224, 111, 0.08);
  position: relative;
}

.tv-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  margin-top: 36px;
}

.tv-pipeline::before {
  content: "";
  position: absolute;
  top: 43.5px;
  left: calc((100% - 60px) / 8);
  right: calc((100% - 60px) / 8);
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(53, 224, 111, 0.22) 0, rgba(53, 224, 111, 0.22) 6px, transparent 6px, transparent 14px);
  z-index: 0;
}

.tv-pipeline::after {
  content: "";
  position: absolute;
  top: 43.5px;
  left: calc((100% - 60px) / 8);
  width: 0%;
  max-width: calc(100% - (100% - 60px) / 4);
  height: 3px;
  background: repeating-linear-gradient(90deg, #35e06f 0, #35e06f 6px, transparent 6px, transparent 14px);
  box-shadow: 0 0 14px rgba(53, 224, 111, 0.95), 0 0 28px rgba(53, 224, 111, 0.6);
  z-index: 0;
}

.tv-pipeline.animating::after {
  animation: tvLineDottedProgress 3.0s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes tvLineDottedProgress {
  0% {
    width: 0%;
    opacity: 0.8;
  }
  3% {
    width: 0%;
    opacity: 1;
  }
  30% {
    width: calc((100% - (100% - 60px) / 4) * 0.3333);
  }
  33% {
    width: calc((100% - (100% - 60px) / 4) * 0.3333);
  }
  60% {
    width: calc((100% - (100% - 60px) / 4) * 0.6666);
  }
  63% {
    width: calc((100% - (100% - 60px) / 4) * 0.6666);
  }
  90% {
    width: calc(100% - (100% - 60px) / 4);
  }
  100% {
    width: calc(100% - (100% - 60px) / 4);
    opacity: 1;
  }
}

.tv-step {
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.tv-step:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(53, 224, 111, 0.15);
}

/* High-Impact Progressive Step Pipeline Animation (3s Timeline) */
.tv-pipeline.animating .tv-step {
  animation: tvStepImpactBloom 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--s) * 0.9s);
}

@keyframes tvStepImpactBloom {
  0% {
    border-color: var(--line-strong);
    background: var(--bg-surface);
    box-shadow: none;
    transform: translateY(0);
  }
  30% {
    border-color: #ffffff;
    background: rgba(53, 224, 111, 0.14);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 35px rgba(53, 224, 111, 0.45);
    transform: translateY(-8px);
  }
  100% {
    border-color: rgba(53, 224, 111, 0.55);
    background: rgba(53, 224, 111, 0.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(53, 224, 111, 0.15);
    transform: translateY(0);
  }
}

.tv-pipeline.animating .tv-step-icon {
  animation: tvIconImpactPop 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--s) * 0.9s);
}

@keyframes tvIconImpactPop {
  0% {
    background: var(--accent-dim);
    border-color: rgba(53, 224, 111, 0.4);
    color: var(--accent-soft);
    box-shadow: none;
    transform: scale(1);
  }
  25% {
    background: #ffffff;
    border-color: #ffffff;
    color: #051b0c;
    box-shadow: 0 0 0 10px rgba(53, 224, 111, 0.35), 0 0 32px var(--accent);
    transform: scale(1.32);
  }
  60% {
    transform: scale(0.96);
  }
  100% {
    background: var(--accent-grad);
    border-color: rgba(255, 255, 255, 0.9);
    color: #051b0c;
    box-shadow: 0 0 16px var(--accent);
    transform: scale(1);
  }
}

.tv-pipeline.animating .tv-step code {
  animation: tvCodeImpactPop 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--s) * 0.9s);
}

@keyframes tvCodeImpactPop {
  0% {
    border-color: rgba(53, 224, 111, 0.25);
    background: rgba(53, 224, 111, 0.06);
    box-shadow: none;
    transform: scale(1);
  }
  30% {
    border-color: #ffffff;
    background: rgba(53, 224, 111, 0.35);
    box-shadow: 0 0 16px var(--accent);
    transform: scale(1.08);
  }
  100% {
    border-color: var(--accent);
    background: rgba(53, 224, 111, 0.18);
    box-shadow: 0 0 10px rgba(53, 224, 111, 0.3);
    transform: scale(1);
  }
}

.tv-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  font-weight: 800;
  font-size: 16px;
}

.tv-step b {
  font-size: 15px;
  color: var(--text-bright);
}

.tv-step span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.tv-step code {
  font-size: 11px;
  padding: 2px 6px;
}

.trueverify-callout {
  margin-top: 36px;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  background: rgba(53, 224, 111, 0.08);
  border: 1px solid rgba(53, 224, 111, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.trueverify-callout p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* ==================== Section: Playable Interactive Simulator ==================== */
.simulator-wrap {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(53, 224, 111, 0.07);
  position: relative;
}

/* Animated Auto-Demo Cursor */
.sim-demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  transform-origin: 0 0;
}

.sim-demo-cursor.active {
  opacity: 1;
}

.sim-demo-cursor.fading {
  opacity: 0;
}

.cursor-pointer {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(53, 224, 111, 0.5));
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sim-demo-cursor.clicking .cursor-pointer {
  transform: scale(0.82);
}

.cursor-ripple {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #35e06f;
  opacity: 0;
  pointer-events: none;
}

.sim-demo-cursor.clicking .cursor-ripple {
  animation: cursorRippleAnim 0.5s ease-out forwards;
}

@keyframes cursorRippleAnim {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(3.5); opacity: 0; }
}

.sim-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px;
}

.sim-header-lead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sim-header-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-soft);
  letter-spacing: -0.2px;
}

.sim-action-btn {
  background: var(--accent-grad);
  color: #051b0c;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14.5px;
  border-radius: 12px;
  padding: 10px 24px;
  min-width: 230px;
  justify-content: center;
  text-align: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(53, 224, 111, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sim-action-btn:hover {
  box-shadow: 0 6px 24px rgba(53, 224, 111, 0.45);
  transform: translateY(-2px);
}

.sim-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  align-items: stretch;
}

/* Stacked cards box - perfectly balanced heights */
.sim-cards-scroll-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  height: 100%;
  justify-content: space-between;
}

.sim-card-display {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  justify-content: center;
}

.sim-card-display:hover {
  border-color: rgba(53, 224, 111, 0.4);
  background: rgba(255, 255, 255, 0.03);
}

.sim-card-display.active {
  border-color: var(--line);
  box-shadow: none;
  background: var(--bg-surface);
}

/* Heartbeat pulse glow pattern adhering precisely to the SD card silhouette */
@keyframes sdCardHeartbeatGlow {
  0% {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  }
  14% {
    filter: drop-shadow(0 0 8px rgba(53, 224, 111, 0.32)) drop-shadow(0 0 3px rgba(53, 224, 111, 0.45));
  }
  28% {
    filter: drop-shadow(0 0 4px rgba(53, 224, 111, 0.12)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  }
  42% {
    filter: drop-shadow(0 0 12px rgba(53, 224, 111, 0.42)) drop-shadow(0 0 5px rgba(53, 224, 111, 0.55));
  }
  65% {
    filter: drop-shadow(0 0 3px rgba(53, 224, 111, 0.1)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  }
  100% {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  }
}

.sim-card-display.ingesting .card-chart-svg {
  animation: sdCardHeartbeatGlow 1.35s infinite ease-in-out;
}

.sim-card-liquid-visual {
  flex-shrink: 0;
}

.card-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sim-card-display .card-chart-svg {
  width: 96px;
  height: 96px;
  display: block;
}

.sim-card-display .card-chart-value {
  font-size: 15.5px;
  font-weight: 800;
  font-family: var(--font-head);
  color: #f1f7f2;
  margin-top: 4px;
  letter-spacing: -0.3px;
  line-height: 1;
}

.sim-drive-main-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sim-drive-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sim-drive-check {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sim-drive-check.checked,
.sim-card-display.selected .sim-drive-check {
  background: rgba(53, 224, 111, 0.22);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(53, 224, 111, 0.35);
}

.sim-drive-check.check-pop {
  animation: checkPopPulse 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes checkPopPulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.sim-drive-letter {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 16.5px;
  color: var(--accent-soft);
}

.sim-drive-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sim-drive-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim-drive-label {
  font-size: 17.5px;
  color: var(--text-bright);
  font-family: var(--font-head);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.sim-drive-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-sans);
  line-height: 1.25;
}

.sim-scan-counts {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  align-items: center;
  margin-top: 1px;
}

.sim-token-photos {
  color: #70d6ff;
  font-weight: 700;
}

.sim-token-videos {
  color: #ffb356;
  font-weight: 700;
}

.sim-token-audio {
  color: #ff70a6;
  font-weight: 700;
}

.sim-token-other {
  color: #4eeb97;
  font-weight: 700;
}

.sim-scan-details {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}

.sim-dot-sep {
  color: var(--muted);
  opacity: 0.5;
}

.sim-card-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--muted);
  flex-wrap: wrap;
}

.sim-health-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px rgba(53, 224, 111, 0.6);
}

.sim-card-liquid-visual {
  flex: 0 0 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.card-chart-svg {
  width: 88px;
  height: 88px;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 6px rgba(53, 224, 111, 0.1));
}

.card-chart-bg {
  fill: #131a14;
}

.card-chart-outline {
  fill: none;
  stroke: rgba(184, 230, 191, 0.18);
  stroke-width: 1.5;
}

.card-chart-value {
  font-size: 15.5px;
  font-weight: 800;
  font-family: var(--font-head);
  color: #f1f7f2;
  white-space: nowrap;
}

.sim-monitor-display {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.sim-progress-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-progress-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
}

.sim-progress-track {
  height: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.sim-progress-fill-transfer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #d4d4d8, #ffffff, #f4f4f5, #ffffff, #d4d4d8);
  background-size: 200% 100%;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  transition: width 0.08s linear;
}

.sim-progress-fill-verified {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #1fae55, var(--accent));
  border-radius: 8px;
  box-shadow: 0 0 12px var(--accent);
  transition: width 0.08s linear;
  pointer-events: none;
}

/* Completion Celebration Animations */
@keyframes progressCompleteFlash {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 12px var(--accent);
  }
  30% {
    filter: brightness(1.4);
    box-shadow: 0 0 26px #6df29a, 0 0 10px #ffffff;
  }
  100% {
    filter: brightness(1);
    box-shadow: 0 0 14px rgba(109, 242, 154, 0.45);
  }
}

.sim-progress-track.done .sim-progress-fill-verified {
  background: var(--ok);
  animation: progressCompleteFlash 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 16px 2px rgba(109, 242, 154, 0.5);
}

@keyframes destBadgePop {
  0% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes cardEjectCelebration {
  0% { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); }
  25% { filter: drop-shadow(0 0 20px rgba(109, 242, 154, 0.85)) drop-shadow(0 0 6px #6df29a); }
  100% { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); }
}

.sim-card-display.completed .card-chart-svg {
  animation: cardEjectCelebration 0.9s ease-out;
}

.sim-progress-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.sim-progress-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-progress-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.dot-transfer-legend {
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.dot-verified-legend {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.sim-dest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-dest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  gap: 12px;
}

.sim-dest-info-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sim-dest-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.sim-dest-path {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
}

.sim-dest-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.sim-dest-status.ok {
  color: var(--ok);
}

/* ==================== Section: Organized As It Copies & Paperwork ==================== */
.org-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 48px;
}

.org-features-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.org-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: all 0.25s ease;
}

.org-feature-item:hover {
  background: var(--bg-card-hover);
  border-color: rgba(53, 224, 111, 0.35);
  transform: translateX(4px);
}

.org-icon-check {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(53, 224, 111, 0.14);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.org-icon-check svg {
  width: 16px;
  height: 16px;
}

.org-feature-item h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 4px;
}

.org-feature-item p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Directory Tree Terminal Panel */
.org-visual-panel {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 35px rgba(53, 224, 111, 0.05);
  position: sticky;
  top: 100px;
}

.org-terminal-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.terminal-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.terminal-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(53, 224, 111, 0.12);
  color: var(--accent-soft);
  border: 1px solid rgba(53, 224, 111, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
}

.tree-display {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tree-row.root {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-soft);
}

.root-icon {
  font-size: 18px;
}

.tree-branch {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 2px solid rgba(53, 224, 111, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.folder-main {
  margin-top: 4px;
}

.folder-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-bright);
  font-weight: 700;
}

.tree-sub-branch {
  margin-left: 18px;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tree-guide {
  color: var(--muted-dim);
}

.item-tag {
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}

.tag-video { color: var(--cat-videos); background: rgba(255, 182, 76, 0.1); }
.tag-photos { color: var(--cat-photos); background: rgba(107, 207, 254, 0.1); }
.tag-audio { color: var(--cat-audio); background: rgba(255, 122, 193, 0.1); }
.tag-csv { color: var(--cat-other); background: rgba(21, 224, 161, 0.1); }

.tree-count {
  color: var(--muted);
  font-size: 12px;
}

.csv-badge {
  background: rgba(53, 224, 111, 0.15);
  color: var(--accent);
  border: 1px solid rgba(53, 224, 111, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
}

/* ==================== Interactive CSV Paperwork Showcase ==================== */
.paperwork-banner {
  margin-top: 56px;
  background: #0d140e;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  border: 1px solid rgba(53, 224, 111, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(53, 224, 111, 0.12);
  z-index: 1;
}

.paperwork-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.paperwork-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(53, 224, 111, 0.12);
  color: var(--accent-soft);
  border: 1px solid rgba(53, 224, 111, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.paperwork-content h3 {
  font-size: 26px;
  color: var(--text-bright);
  margin-bottom: 8px;
  font-family: var(--font-head);
}

/* ==================== 1:1 InJest App CSV Preview & Modal Shell ==================== */
.paperwork-content p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 820px;
  margin: 0;
}

/* App Window / Modal Container for CSV */
.csv-app-window-frame {
  background: #090e0a;
  border: 1px solid var(--panel-border, #1a291e);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}

/* App-accurate modal titlebar */
.csv-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #0c140e;
  border-bottom: 1px solid var(--panel-border, #1a291e);
}

.csv-modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.csv-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  gap: 8px;
}

.csv-tabs-switch-row {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.csv-app-tab-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.csv-app-tab-btn:hover {
  color: var(--text-bright);
}

.csv-app-tab-btn.active {
  background: #1e3323;
  color: var(--accent);
  border: 1px solid rgba(53, 224, 111, 0.35);
  box-shadow: 0 0 10px rgba(53, 224, 111, 0.2);
}

/* App CSV Preview Table */
.csv-app-preview-wrap {
  overflow-x: auto;
  background: #080c09;
  max-height: 420px;
}

.csv-app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  text-align: left;
}

.csv-app-table th,
.csv-app-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--panel-border, #1a291e);
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c9d6cc;
}

/* Header Row 1 (Title) */
.csv-title-row td {
  font-weight: 700;
  color: var(--accent-soft);
  font-size: 13.5px;
  padding-top: 12px;
  padding-bottom: 8px;
}

/* Preamble Summary Rows - pinned strip, matching the app's own technique
   exactly (see PC/src/renderer/styles.css's own .csv-pin comment): the row's
   <td> spans the whole table so there's room to travel, and an inner
   position:sticky;left:0 strip is what actually stays put while the table
   scrolls sideways - sticky on the cell itself does nothing, since the cell
   already reaches the row's edge either way. Padding lives on the strip
   rather than the cell so its resting position and its pinned position are
   the same and it doesn't visibly jump the instant it sticks. */
.csv-app-table tr:has(.csv-pin) td {
  overflow: visible;
  background: #080c09;
  padding: 0;
}
.csv-pin {
  position: sticky;
  left: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 7px 12px;
}
.csv-pin-label {
  flex: 0 0 180px;
  font-weight: 700;
  color: var(--muted);
}
.csv-pin-value {
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csv-pin-label-videos, .csv-pin-value-videos { color: #f59e0b; }
.csv-pin-label-photos, .csv-pin-value-photos { color: #38bdf8; }
.csv-pin-label-audio, .csv-pin-value-audio { color: #f472b6; }
.csv-pin-label-other, .csv-pin-value-other { color: #2dd4bf; }
.csv-pin-value-videos, .csv-pin-value-photos, .csv-pin-value-audio, .csv-pin-value-other { font-weight: 700; }

/* Packed horizontal field rows - several short "label: value" pairs on one
   line (e.g. "Client: X · Project: Y") instead of one full-width row per
   field. Matches the app's own current layout for its aggregate block and
   each card's own summary block, now that one InJest Log/Media Summary CSV
   can hold several cards' worth of sections. */
.csv-pin-fields {
  flex-wrap: wrap;
  row-gap: 6px;
  font-size: 14px;
}
tr.csv-pin-block-first .csv-pin-fields { margin-top: 4px; }
tr.csv-pin-block-last .csv-pin-fields { margin-bottom: 10px; }
.csv-pin-field {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.csv-pin-field-label { color: var(--muted); }
.csv-pin-field-value { font-size: 15px; font-weight: 700; color: var(--text-bright); }
.csv-pin-field-sep { color: var(--panel-border, #1a291e); font-weight: 700; }
.csv-pin-field-value.csv-count-ok, .csv-pin-field-label.csv-count-ok { color: var(--ok); }
.csv-pin-field-value.csv-count-warn, .csv-pin-field-label.csv-count-warn { color: var(--warn); }
.csv-pin-field-value.csv-count-bad, .csv-pin-field-label.csv-count-bad { color: var(--bad); }
/* Same per-category colours as the type breakdown everywhere else (the
   donut, the Type column) - needs the extra .csv-pin-field-value/-label
   compound selector to outrank the plain-white .csv-pin-field-value rule
   above it, since a packed field's value/label carry both classes. */
.csv-pin-field-value.csv-pin-value-videos, .csv-pin-field-label.csv-pin-label-videos { color: #f59e0b; }
.csv-pin-field-value.csv-pin-value-photos, .csv-pin-field-label.csv-pin-label-photos { color: #38bdf8; }
.csv-pin-field-value.csv-pin-value-audio, .csv-pin-field-label.csv-pin-label-audio { color: #f472b6; }
.csv-pin-field-value.csv-pin-value-other, .csv-pin-field-label.csv-pin-label-other { color: #2dd4bf; }

/* A card's own divider row ("CARD 01 — Fujifilm X-T4 (F:)") marking where
   its section starts inside the consolidated project CSV - bolder and
   accent-colored so a new card reads at a glance while scanning past
   several in the same file. The extra .csv-app-table prefix matches the
   specificity of the tr:has(.csv-pin) td rule above (which would otherwise
   win and paint this row plain dark instead of accent-tinted). */
.csv-app-table tr.csv-card-divider-row td {
  background: color-mix(in oklch, var(--accent) 16%, #080c09);
}
.csv-card-divider {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
}

/* Sr. No. column (added to every row now, matching the app's own table) -
   narrower than a real data column since it only ever holds a couple of
   digits. */
.csv-app-table .csv-srno { color: var(--muted); }

/* Sticky Column Headers */
.csv-app-table th.csv-th-sticky {
  position: sticky;
  top: 0;
  background: #0c140e;
  color: var(--accent-soft);
  font-weight: 700;
  border-top: 1px solid var(--panel-border, #1a291e);
  border-bottom: 1px solid var(--panel-border, #1a291e);
  z-index: 2;
  letter-spacing: 0.3px;
}

/* Column Dividers */
.csv-app-table .csv-divided {
  border-right: 1px solid var(--panel-border, #1a291e);
}

/* A card section's own repeated column-header row (every card after the
   first repeats it) - not the one sticky-pinned row, just a thin top
   border to read as a section boundary while scanning past it. */
.csv-app-table tr.csv-repeat-header th {
  border-top: 1px solid var(--panel-border, #1a291e);
  color: var(--accent-soft);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.csv-app-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* Interactive File Clickable Cell */
.csv-file-cell {
  cursor: pointer;
}

.csv-app-table tr:hover td.csv-file-cell {
  background: rgba(255, 255, 255, 0.06);
}

/* Real App Extension Pills */
.fext-pill {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-right: 4px;
}

.fext-pill-video {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.fext-pill-photo {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.fext-pill-audio {
  background: rgba(244, 114, 182, 0.18);
  color: #f472b6;
  border: 1px solid rgba(244, 114, 182, 0.35);
}

/* App-Accurate Silent Audio Alert Cell */
.csv-no-audio-cell {
  background: rgba(255, 123, 112, 0.16) !important;
  color: #ff7b70 !important;
  font-weight: 700 !important;
}

/* Has-audio column reading a measured dB level (track exists but reads as
   silent) - amber rather than the red used for a genuinely missing track,
   matching the app's own has_audio warn/bad split. */
.csv-warn-cell {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #f5c96a !important;
  font-weight: 700 !important;
}

/* Ingest log Status column for 'skipped'/'FAILED' rows - same amber/red
   split as the app's own csv-flag-warn/csv-flag-no on the same column. */
td.csv-status-skipped {
  background: rgba(245, 158, 11, 0.16);
  color: #f5c96a;
  font-weight: 700;
}
td.csv-status-failed {
  background: rgba(255, 123, 112, 0.16);
  color: #ff7b70;
  font-weight: 700;
}

/* td. prefix on both (see the .csv-summary-val-videos comment above for
   why a bare class alone loses to .csv-app-table td's own color rule). */
td.csv-cell-hash {
  color: var(--accent-soft);
  font-size: 11.5px;
}

td.csv-status-copied {
  color: var(--ok);
  font-weight: 700;
}

.csv-modal-statusbar {
  background: #0c140e;
  border-top: 1px solid var(--panel-border, #1a291e);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: #9cb8a1;
  font-family: var(--font-mono);
}

.csv-pill-features-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.csv-feat-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.csv-feat-card h4 {
  font-size: 14.5px;
  color: var(--text-bright);
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.csv-feat-card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.csv-preview-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
}

.csv-preview-lines code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== Section: 6 Feature Teasers ==================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.feature-teaser-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-teaser-card:hover {
  transform: translateY(-5px);
  border-color: rgba(53, 224, 111, 0.4);
  background: var(--bg-card-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.teaser-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-grad);
  color: #051b0c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(53, 224, 111, 0.35);
  transition: all 0.25s ease;
}

.teaser-icon svg {
  width: 22px;
  height: 22px;
}

.feature-teaser-card:hover .teaser-icon {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 24px rgba(53, 224, 111, 0.55);
}

/* Sidebar Nav Micro-Animations applied on Feature Teaser Hover */
.nav-icon-arrow { transform-origin: center; }
.nav-icon-tray { transform-origin: center bottom; }
.feature-teaser-card:hover .nav-icon-arrow {
  animation: arrow-down-ingest 1.25s infinite cubic-bezier(0.25, 1, 0.5, 1);
}
.feature-teaser-card:hover .nav-icon-tray {
  animation: tray-bounce 1.25s infinite ease-in-out;
}

@keyframes arrow-down-ingest {
  0% { transform: translateY(0); opacity: 1; }
  35% { transform: translateY(8px); opacity: 0; }
  40% { transform: translateY(-8px); opacity: 0; }
  75% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes tray-bounce {
  0%, 100% { transform: scaleY(1); }
  40% { transform: scaleY(0.85) translateY(0.5px); }
  55% { transform: scaleY(1.08) translateY(-0.2px); }
  70% { transform: scaleY(0.97); }
}

.nav-icon-cloud { transform-origin: center; transition: transform 0.25s ease; }
.nav-icon-cloud-arrow { transform-origin: center; transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); }
.feature-teaser-card:hover .nav-icon-cloud-arrow {
  animation: cloud-chevron-drop 1.3s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
}
.feature-teaser-card:hover .nav-icon-cloud {
  animation: cloud-pulse 1.3s infinite ease-in-out;
}

@keyframes cloud-chevron-drop {
  0% { transform: translateY(0); opacity: 1; }
  35% { transform: translateY(6px); opacity: 0; }
  36% { transform: translateY(-6px); opacity: 0; }
  70% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes cloud-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.nav-icon-paper {
  transform: translateY(2px);
  opacity: 0.35;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.feature-teaser-card:hover .nav-icon-paper {
  animation: paper-slide-backup 1.2s infinite ease-in-out;
}

@keyframes paper-slide-backup {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(3px); opacity: 0.35; }
}

.feature-teaser-card:hover .nav-icon-enc-chev1 {
  animation: enc-chev-left 0.8s infinite ease-in-out;
}
.feature-teaser-card:hover .nav-icon-enc-chev2 {
  animation: enc-chev-right 0.8s infinite ease-in-out;
}

@keyframes enc-chev-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2.5px); }
}
@keyframes enc-chev-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2.5px); }
}

.feature-teaser-card:hover .nav-icon-arrow-right {
  animation: arrow-slide-right 0.8s infinite ease-in-out;
}
.feature-teaser-card:hover .nav-icon-arrow-left {
  animation: arrow-slide-left 0.8s infinite ease-in-out;
}

@keyframes arrow-slide-right {
  0% { transform: translateX(0); }
  50% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes arrow-slide-left {
  0% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.nav-icon-search-group {
  transform-origin: 17px 17px;
  transition: transform 0.25s ease;
}
.feature-teaser-card:hover .nav-icon-search-group {
  animation: search-orbit 1.2s infinite linear;
}

@keyframes search-orbit {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1.5px, -1.5px); }
  50% { transform: translate(2px, 1.5px); }
  75% { transform: translate(-1.5px, 2px); }
  100% { transform: translate(0, 0); }
}

.feature-teaser-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
  color: var(--text-bright);
}

.feature-teaser-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1;
}

.teaser-subtext {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-soft);
}

/* ==================== Section: Pricing Teaser & Windows ==================== */
.pricing-teaser-card {
  background: var(--bg-card);
  border: 1px solid rgba(53, 224, 111, 0.35);
  border-radius: var(--radius-xl);
  padding: 44px 38px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(53, 224, 111, 0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}

.pricing-teaser-price {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-tag {
  font-size: clamp(40px, 5.5vw, 60px);
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--text-bright);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 4px 0;
}

.price-tag.price-dropping {
  color: #ff9b94;
}

.price-tag.price-landed {
  color: var(--text-bright);
}

.price-sub {
  color: var(--accent-soft);
  font-size: 15px;
  font-weight: 700;
}

.pricing-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-feature-list li {
  color: var(--muted);
  font-size: 15px;
  padding-left: 24px;
  position: relative;
}

.pricing-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 5px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ==================== Final CTA Band ==================== */
.final-cta-band {
  background: radial-gradient(circle at center, rgba(53, 224, 111, 0.15) 0%, transparent 70%), var(--bg-surface);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 100px 0;
  text-align: center;
  position: relative;
}

.final-cta-band h2 {
  font-size: clamp(34px, 5vw, 56px);
}

.final-cta-band p {
  font-size: 18px;
  color: var(--muted);
  margin: 16px auto 36px;
  max-width: 600px;
}

/* ==================== Footer ==================== */
.site-footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-brand p {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 10px;
  max-width: 320px;
  line-height: 1.5;
}

.footer-cols {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}

.footer-col h4 {
  font-size: 12.5px;
  color: var(--muted-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.footer-col a {
  color: var(--muted);
}

.footer-col a:hover {
  color: var(--accent-soft);
}

.footer-legal {
  width: 100%;
  color: var(--muted-dim);
  font-size: 13px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ==================== Shared Inner Pages Compatibility (Pricing/FAQ/Tour/Modals) ==================== */
.subhero { padding: 68px 0 56px; text-align: center; }
.subhero h1 { font-size: clamp(32px, 5vw, 48px); }
.subhero .sub { margin: 18px auto 0; text-align: center; }
.trial-banner { background: var(--field); border: 1px solid rgba(53, 224, 111, 0.3); border-radius: 16px; padding: 20px 26px; display: flex; align-items: center; gap: 16px; max-width: 720px; margin: 32px auto 0; text-align: left; }
.trial-banner .ti { width: 52px; height: 52px; border-radius: 12px; background: var(--accent-grad); color: #06210f; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-head); flex-shrink: 0; line-height: 1; }
.trial-banner .ti-num { color: #06210f; font-weight: 800; font-size: 18px; }
.trial-banner .ti-unit { color: #06210f; font-weight: 700; font-size: 8.5px; letter-spacing: 0.5px; margin-top: 2px; }
.trial-banner strong { color: var(--text-bright); display: block; margin-bottom: 2px; }
.trial-banner span { color: var(--muted); font-size: 14.5px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; align-items: stretch; }
.price-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 22px; padding: 36px 30px; display: flex; flex-direction: column; position: relative; transition: all 0.2s ease; }
.price-card:hover { transform: translateY(-4px); border-color: rgba(53, 224, 111, 0.3); }
.price-card.featured { border-color: rgba(53, 224, 111, 0.55); box-shadow: 0 0 50px rgba(53, 224, 111, 0.12), 0 20px 50px rgba(0, 0, 0, 0.35); }
.price-card .price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent-grad); color: #06210f; font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-amount .cur { font-size: 22px; font-weight: 800; color: var(--accent-soft); font-family: var(--font-head); }
.price-amount .num { font-size: 44px; font-weight: 800; font-family: var(--font-head); letter-spacing: -1px; color: var(--text-bright); }
.price-amount .price-period { font-size: 15px; font-weight: 600; color: var(--muted); }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 24px 0 28px; flex: 1; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.price-features li span { flex: 1; }
.price-features li b { color: var(--text-bright); font-weight: 700; }
.price-features li::before { content: ""; flex: 0 0 auto; width: 11px; height: 6px; margin-top: 6px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }

/* Monthly/Yearly toggle - reuses the checkout modal's .auth-tabs sliding-
   pill component (see the .auth-tabs rules further down) rather than a
   second implementation of the same sliding-pill mechanic. */
.billing-toggle-wrap { display: flex; justify-content: center; margin-bottom: 8px; }
.billing-toggle { width: 320px; max-width: 100%; margin-bottom: 0; }
.billing-toggle .auth-tab { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 0; }
.save-pill { background: rgba(53, 224, 111, 0.18); color: var(--accent-soft); font-size: 10px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.billing-toggle .auth-tab.active .save-pill, .billing-toggle .auth-tab.on .save-pill { background: rgba(6, 33, 15, 0.25); color: #06210f; }

/* Pricing Guarantee & Clarification Bar */
.pricing-guarantee-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
  padding: 0 4px;
}

.pg-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.pg-item svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.pg-item strong {
  color: var(--text-bright);
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 800;
  display: block;
  margin-bottom: 3px;
}

.pg-item a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pg-item a:hover {
  color: #ffffff;
}

@media (max-width: 1024px) {
  .pricing-guarantee-bar {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }
}

/* Compare Table & FAQ */
.compare-wrap { margin-top: 48px; overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: rgba(13, 18, 13, 0.7); }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.compare-table thead th { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--text-bright); background: rgba(255, 255, 255, 0.03); }
.compare-table thead th.col-injest { color: var(--accent-soft); }
.compare-table td.col-injest { color: var(--text-bright); font-weight: 600; }
.compare-table .yes { color: var(--ok); font-weight: 800; }
.compare-table .no { color: rgba(156, 184, 161, 0.55); }

/* ==================== Why InJest Page Styles ==================== */
.subhero {
  padding: 80px 0 40px;
  text-align: center;
  position: relative;
}

.subhero::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 280px;
  background: radial-gradient(circle, rgba(53, 224, 111, 0.15) 0%, rgba(53, 224, 111, 0) 70%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 0;
}

.subhero h1 {
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 16px 0 18px;
  position: relative;
  z-index: 1;
}

.subhero .sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Tour Matrix (6 Tabs) */
.tour-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.tour-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.tour-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
  transition: all 0.3s ease;
}

.tour-card:hover {
  transform: translateY(-6px);
  border-color: rgba(53, 224, 111, 0.4);
  background: var(--bg-card-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(53, 224, 111, 0.1);
}

.tour-card:hover::before {
  background: var(--accent-grad);
  box-shadow: 0 0 12px var(--accent);
}

.tour-card-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tour-card-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.tour-card h3 {
  font-size: 20px;
  font-family: var(--font-head);
  color: var(--text-bright);
  margin-bottom: 8px;
}

.tour-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
}

.tour-card .tour-link {
  color: var(--accent-soft);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}

.tour-card:hover .tour-link {
  gap: 10px;
  color: var(--accent);
}

/* 4-Step Mini Pipeline */
.step-pipeline-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0 44px;
}

.step-pipeline-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.step-pipeline-item:hover {
  border-color: rgba(53, 224, 111, 0.4);
  transform: translateY(-3px);
}

.step-pipeline-item .step-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
  display: inline-block;
}

.step-pipeline-item h4 {
  font-size: 16.5px;
  color: var(--text-bright);
  margin-bottom: 6px;
  font-family: var(--font-head);
}

.step-pipeline-item p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* ==================== Interactive App Explorer Stage ==================== */
.explorer-app-shell {
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 720px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 50px rgba(53, 224, 111, 0.08);
  margin-top: 36px;
  position: relative;
}

.explorer-sidebar {
  background: rgba(8, 12, 9, 0.95);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explorer-sidebar-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 12px 14px;
}

.explorer-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted-strong);
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
}

.explorer-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-bright);
  border-color: rgba(255, 255, 255, 0.08);
}

.explorer-tab-btn.active {
  background: rgba(53, 224, 111, 0.1);
  border-color: rgba(53, 224, 111, 0.4);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(53, 224, 111, 0.15), inset 0 0 12px rgba(53, 224, 111, 0.05);
}

/* Authentic App Style Icon Box */
.app-tab-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: all 0.22s ease;
}

.app-tab-svg {
  width: 18px;
  height: 18px;
  display: block;
}

.explorer-tab-btn:hover .app-tab-icon-box {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(53, 224, 111, 0.3);
  box-shadow: 0 0 10px rgba(53, 224, 111, 0.25);
  transform: scale(1.05);
}

.explorer-tab-btn.active .app-tab-icon-box {
  background: var(--accent-grad);
  border-color: transparent;
  color: #051b0c;
  box-shadow: 0 0 14px rgba(53, 224, 111, 0.5);
  transform: scale(1.05);
}

.explorer-tab-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-bright);
  flex: 1;
}

.explorer-tab-btn.active .explorer-tab-label {
  color: #ffffff;
  font-weight: 800;
}

.explorer-tab-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  color: var(--accent);
  font-size: 14px;
}

.explorer-tab-btn.active .explorer-tab-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ==================== Tab Icon Micro-Animations ==================== */
/* 1. Ingest */
.tab-icon-arrow { transform-origin: center; transition: transform 0.2s ease; }
.tab-icon-tray { transform-origin: center bottom; transition: transform 0.2s ease; }

@keyframes tab-arrow-ingest {
  0% { transform: translateY(0); opacity: 1; }
  35% { transform: translateY(8px); opacity: 0; }
  40% { transform: translateY(-8px); opacity: 0; }
  75% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes tab-tray-bounce {
  0%, 100% { transform: scaleY(1); }
  40% { transform: scaleY(0.85) translateY(0.5px); }
  55% { transform: scaleY(1.08) translateY(-0.2px); }
  70% { transform: scaleY(0.97); }
}

.explorer-tab-btn:hover .tab-icon-arrow,
.explorer-tab-btn.active .tab-icon-arrow {
  animation: tab-arrow-ingest 1.2s infinite cubic-bezier(0.25, 1, 0.5, 1);
}
.explorer-tab-btn:hover .tab-icon-tray,
.explorer-tab-btn.active .tab-icon-tray {
  animation: tab-tray-bounce 1.2s infinite ease-in-out;
}

/* 2. Import */
.tab-icon-cloud { transform-origin: center; transition: transform 0.2s ease; }
.tab-icon-cloud-arrow { transform-origin: center; transition: transform 0.2s ease; }

@keyframes tab-cloud-arrow {
  0% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(4px); opacity: 0.3; }
  70% { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.explorer-tab-btn:hover .tab-icon-cloud-arrow,
.explorer-tab-btn.active .tab-icon-cloud-arrow {
  animation: tab-cloud-arrow 1.1s infinite ease-in-out;
}

/* 3. Projects */
.tab-icon-paper {
  transform: translateY(2px);
  opacity: 0.4;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.explorer-tab-btn:hover .tab-icon-paper,
.explorer-tab-btn.active .tab-icon-paper {
  transform: translateY(-2px);
  opacity: 1;
}

/* 4. Media Encoder */
.tab-icon-enc-chev1, .tab-icon-enc-chev2 {
  transition: transform 0.2s ease;
}
@keyframes tab-chev-pulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2.5px); }
}
.explorer-tab-btn:hover .tab-icon-enc-chev1,
.explorer-tab-btn.active .tab-icon-enc-chev1 {
  animation: tab-chev-pulse 0.8s infinite ease-in-out;
}
.explorer-tab-btn:hover .tab-icon-enc-chev2,
.explorer-tab-btn.active .tab-icon-enc-chev2 {
  animation: tab-chev-pulse 0.8s infinite ease-in-out 0.15s;
}

/* 5. Transfer */
.tab-icon-arrow-right, .tab-icon-arrow-left {
  transition: transform 0.2s ease;
}
@keyframes tab-slide-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@keyframes tab-slide-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}
.explorer-tab-btn:hover .tab-icon-arrow-right,
.explorer-tab-btn.active .tab-icon-arrow-right {
  animation: tab-slide-right 0.9s infinite ease-in-out;
}
.explorer-tab-btn:hover .tab-icon-arrow-left,
.explorer-tab-btn.active .tab-icon-arrow-left {
  animation: tab-slide-left 0.9s infinite ease-in-out;
}

/* 6. Library */
.tab-icon-search-group {
  transform-origin: 17px 17px;
  transition: transform 0.25s ease;
}
@keyframes tab-search-orbit {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(1.5px, 1px); }
  75% { transform: translate(-1px, 1.5px); }
  100% { transform: translate(0, 0); }
}
.explorer-tab-btn:hover .tab-icon-search-group,
.explorer-tab-btn.active .tab-icon-search-group {
  animation: tab-search-orbit 1.2s infinite linear;
}

.explorer-viewport {
  background: var(--bg-card);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

.explorer-tab-pane {
  display: none;
  flex-direction: column;
  gap: 28px;
  animation: paneFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.explorer-tab-pane.active {
  display: flex;
}

@keyframes paneFadeIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.explorer-pane-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explorer-pane-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-soft);
  background: rgba(53, 224, 111, 0.1);
  border: 1px solid rgba(53, 224, 111, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  width: fit-content;
}

.explorer-pane-header h2 {
  font-size: clamp(24px, 3.5vw, 36px);
  color: var(--text-bright);
  letter-spacing: -0.02em;
}

.explorer-pane-header p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 760px;
}

.explorer-shot-frame {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  display: flex;
  justify-content: center;
}

.explorer-screenshot-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));
  transition: transform 0.3s ease;
}

.explorer-shot-frame:hover .explorer-screenshot-img {
  transform: translateY(-2px);
}

.explorer-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.explorer-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.explorer-card:hover {
  border-color: rgba(53, 224, 111, 0.35);
  background: rgba(255, 255, 255, 0.02);
}

.explorer-card h4 {
  font-size: 16px;
  color: var(--text-bright);
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  gap: 8px;
}

.explorer-card h4::before {
  content: "✓";
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}

.explorer-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Safety Pillars Bento Grid */
.safety-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.safety-pillar {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.safety-pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
  transition: all 0.3s ease;
}

.safety-pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(53, 224, 111, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(53, 224, 111, 0.12);
}

.safety-pillar:hover::before {
  background: var(--accent-grad);
  box-shadow: 0 0 12px var(--accent);
}

.safety-pillar-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
}

.safety-pillar h3 {
  font-size: 20px;
  color: var(--text-bright);
  font-family: var(--font-head);
  letter-spacing: -0.3px;
}

.safety-pillar p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Technical Whitepaper 2x2 Specs Grid */
.whitepaper-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.whitepaper-spec-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.whitepaper-spec-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
  transition: all 0.3s ease;
}

.whitepaper-spec-card:hover {
  transform: translateY(-5px);
  border-color: rgba(53, 224, 111, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(53, 224, 111, 0.12);
}

.whitepaper-spec-card:hover::before {
  background: var(--accent-grad);
  box-shadow: 0 0 12px var(--accent);
}

.whitepaper-spec-card h4 {
  font-size: 19px;
  color: var(--text-bright);
  font-family: var(--font-head);
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.3;
}

.whitepaper-spec-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.whitepaper-spec-card code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-soft);
  background: rgba(53, 224, 111, 0.1);
  border: 1px solid rgba(53, 224, 111, 0.2);
  border-radius: 4px;
  padding: 1px 6px;
}

/* Modern Bento Comparison Cards */
.bento-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.bento-compare-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  transition: all 0.25s ease;
}

.bento-compare-card:hover {
  border-color: rgba(53, 224, 111, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.bento-compare-header h4 {
  font-size: 18px;
  color: var(--text-bright);
  font-family: var(--font-head);
  margin-bottom: 6px;
}

.bento-compare-header p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.bento-compare-vs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.bento-injest-val {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bento-other-val {
  font-size: 13px;
  color: rgba(156, 184, 161, 0.6);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Split 2-Column Feature Rows */
.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
  margin-top: 52px;
}

.split.reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.split-copy h3 {
  font-size: 24px;
  color: var(--text-bright);
  font-family: var(--font-head);
  letter-spacing: -0.3px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
}

.feature-list b {
  color: var(--text-bright);
}

.split-visual {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Directory Tree Visual Mockup */
.tree {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-bright);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tree-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.tree-line.root {
  font-weight: 800;
  color: var(--accent-soft);
  border-left: 3px solid var(--accent);
  background: rgba(53, 224, 111, 0.08);
}

.tree-line.l1 {
  margin-left: 16px;
  border-left: 2px solid rgba(53, 224, 111, 0.4);
}

.tree-line.l2 {
  margin-left: 32px;
  border-left: 2px solid rgba(53, 224, 111, 0.2);
  font-size: 12.5px;
}

.tree-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
}

.tree-line.sidecar {
  color: #ffb356;
  background: rgba(255, 179, 86, 0.08);
  border-color: rgba(255, 179, 86, 0.2);
}

/* Destination Panel Visual */
.dest-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dest-panel-row {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dp-name b {
  display: block;
  font-size: 14px;
  color: var(--text-bright);
  font-family: var(--font-head);
}

.dp-name span {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.dp-status {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dp-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dp-status.ok {
  color: var(--ok);
}

.dp-status.ok .dot {
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}

.dp-status.warn {
  color: #ffb356;
}

.dp-status.warn .dot {
  background: #ffb356;
}

/* P2P Noise Protocol Code Visual */
.p2p-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  padding: 12px 0;
}

.p2p-code-mock {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-soft);
  letter-spacing: 4px;
  padding: 16px 28px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed var(--accent);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(53, 224, 111, 0.15);
}

.p2p-route {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.p2p-route .seg {
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.p2p-route .seg.active {
  color: var(--ok);
  font-weight: 700;
  background: rgba(53, 224, 111, 0.15);
  border: 1px solid rgba(53, 224, 111, 0.35);
}

/* Pro Block Callout */
.pro-block {
  background: linear-gradient(135deg, rgba(20, 30, 22, 0.85), rgba(12, 17, 13, 0.95));
  border: 1px solid rgba(53, 224, 111, 0.35);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  margin-top: 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(53, 224, 111, 0.06);
}

.pro-block h3 {
  font-size: 22px;
  color: var(--text-bright);
  margin-bottom: 16px;
}

/* Safety & Trust 8-Card Grid */
.safety-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.safety-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s ease;
}

.safety-card:hover {
  transform: translateY(-4px);
  border-color: rgba(53, 224, 111, 0.4);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 18px rgba(53, 224, 111, 0.1);
  background: var(--bg-card-hover);
}

.safety-card h3 {
  font-size: 16px;
  color: var(--text-bright);
  margin: 0;
  font-family: var(--font-head);
}

.safety-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.compare-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 14px;
  font-style: italic;
}

/* ==================== Modern Accordion & FAQ System ==================== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
  width: 100%;
}

.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.accordion-item:hover {
  border-color: rgba(53, 224, 111, 0.35);
  background: rgba(255, 255, 255, 0.02);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(53, 224, 111, 0.08);
}

.accordion-item.open {
  border-color: rgba(53, 224, 111, 0.5);
  background: rgba(18, 26, 19, 0.95);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(53, 224, 111, 0.1);
}

.accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-bright);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.accordion-trigger:hover {
  color: var(--accent);
}

.accordion-trigger .chev {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
}

.accordion-item.open .accordion-trigger .chev {
  transform: rotate(-135deg);
  border-color: var(--accent);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-panel-inner {
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.accordion-panel-inner p + p {
  margin-top: 12px;
}

.accordion-panel-inner a {
  color: var(--accent);
  text-decoration: underline;
}

/* FAQ Category Navigation & Group Headers */
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.faq-nav a {
  background: rgba(16, 24, 18, 0.85);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.faq-nav a:hover {
  color: var(--text-bright);
  border-color: rgba(53, 224, 111, 0.4);
  background: rgba(53, 224, 111, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 15px rgba(53, 224, 111, 0.15);
}

.faq-group {
  margin-bottom: 56px;
  scroll-margin-top: 100px;
}

.faq-group h2 {
  font-size: 26px;
  color: var(--text-bright);
  margin-bottom: 6px;
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Legal Pages Styling */
.legal-toc {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 28px 0 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.legal-toc h4 {
  font-size: 16px;
  color: var(--text-bright);
  margin-bottom: 14px;
  font-family: var(--font-head);
}

.legal-toc ol {
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}

.legal-toc a {
  color: var(--accent-soft);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}

.legal-toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.legal h2 {
  font-size: 24px;
  color: var(--text-bright);
  margin: 44px 0 14px;
  font-family: var(--font-head);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}

.legal p, .legal ul, .legal ol {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.legal ul, .legal ol {
  padding-left: 22px;
}

.legal li {
  margin-bottom: 8px;
}

.legal strong {
  color: var(--text-bright);
}

.legal-updated {
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 24px;
}

/* ==================== v1 App-Authentic Login Overlay & Modal ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 7, 4, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal.auth-card,
.modal {
  width: 400px;
  max-width: calc(100vw - 32px);
  background: #0e130e;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(53, 224, 111, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  box-sizing: border-box;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease;
}

.modal-close:hover {
  color: var(--text-bright);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
  margin-bottom: 22px;
}

.auth-brand img,
.auth-brand span {
  flex-shrink: 0;
}

/* Tabs */
.auth-tabs {
  display: flex;
  gap: 6px;
  background: #141b14;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  position: relative;
  margin-bottom: 18px;
}

.auth-tabs::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 8px;
  background: var(--accent-grad);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.15s ease;
  z-index: 0;
}

.auth-tabs:has(.auth-tab.active)::before,
.auth-tabs:has(.auth-tab.on)::before {
  opacity: 1;
}

.auth-tabs:has(#tab-signup.active)::before,
.auth-tabs:has(.auth-tab[data-auth-tab="signup"].active)::before,
.auth-tabs:has(.auth-tab[data-auth-tab="signup"].on)::before,
.auth-tabs:has(.auth-tab[data-cycle="yearly"].active)::before,
.auth-tabs:has(.auth-tab[data-tier="DUO"].active)::before {
  transform: translateX(calc(100%));
}

.auth-tab {
  flex: 1;
  padding: 7px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: center;
}

.auth-tab.active,
.auth-tab.on {
  color: #06210f;
  font-weight: 700;
}

.auth-forgot-heading {
  text-align: center;
  margin-bottom: 4px;
}

.auth-forgot-heading h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 5px;
}

.auth-forgot-heading p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form[hidden],
[hidden] {
  display: none !important;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-body);
  text-align: left;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form .password-field input {
  background: #141b14;
  color: var(--text-bright);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field-label {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-body);
  text-align: left;
  margin-bottom: -6px;
}
/* Custom dropdown (see checkout.js) - a plain <select>'s open list is
   rendered by the OS/browser and can't be reskinned with CSS, only the
   closed box can. This swaps the whole thing for a button + a styled list
   this codebase fully controls instead. */
.custom-select {
  position: relative;
}
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #141b14;
  color: var(--text-bright);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
}
.custom-select-trigger svg {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.custom-select.open .custom-select-trigger svg {
  transform: rotate(180deg);
}
.custom-select-trigger:focus-visible,
.custom-select.open .custom-select-trigger {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(53, 224, 111, 0.25);
}
.custom-select-trigger[data-placeholder="true"] {
  color: var(--muted);
}
.custom-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #141b14;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  max-height: 240px;
  overflow-y: auto;
}
.custom-select-list li {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-bright);
  border-radius: 7px;
  cursor: pointer;
}
.custom-select-list li:hover,
.custom-select-list li.is-active {
  background: rgba(53, 224, 111, 0.12);
  color: var(--accent-soft);
}
.custom-select-list li[aria-selected="true"] {
  color: var(--accent-soft);
  font-weight: 700;
}
.flag-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  margin-bottom: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.checkout-terms-row {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px !important;
  font-size: 13.5px;
  color: var(--muted);
}
.checkout-terms-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.checkout-terms-row a {
  color: var(--accent-soft);
  text-decoration: none;
}
.checkout-bill {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin-top: 4px;
}
.checkout-bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0;
}
.checkout-bill-row strong {
  color: var(--text-bright);
}
.checkout-bill-total {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 14px;
}

.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus,
.auth-form .password-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(53, 224, 111, 0.25);
}

.password-field {
  position: relative;
  display: flex;
  width: 100%;
}

.password-field input {
  flex: 1;
  padding-right: 34px !important;
  width: 100%;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease;
}

.password-toggle:hover {
  color: var(--text-bright);
}

.password-toggle.showing,
.password-toggle:active {
  color: var(--accent) !important;
  filter: drop-shadow(0 0 6px rgba(53, 224, 111, 0.6));
}

.auth-form button.primary,
.modal button.primary {
  background: var(--accent-grad);
  border: none;
  border-radius: 10px;
  color: #06210f;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 0;
  width: 100%;
  cursor: pointer;
  transition: box-shadow 0.15s, filter 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-form button.primary:hover:not(:disabled),
.modal button.primary:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(53, 224, 111, 0.35);
}

.auth-form button.primary:disabled,
.modal button.primary:disabled {
  opacity: 0.5;
  cursor: default;
}
.auth-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  text-align: center;
  font-family: var(--font-body);
  display: block;
  margin: 0 auto;
}

.auth-link:hover {
  color: var(--accent-soft);
}

.auth-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  margin: -4px 0 0;
  text-align: left;
}

.auth-error {
  font-size: 12px;
  color: var(--bad);
  background: rgba(255, 123, 112, 0.1);
  border: 1px solid rgba(255, 123, 112, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  display: none;
}

.auth-error.show,
.auth-error:not(:empty) {
  display: block;
}

.auth-status {
  font-size: 12px;
  color: var(--ok);
  background: var(--accent-dim);
  border: 1px solid rgba(53, 224, 111, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin: 12px 0 8px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-divider span {
  padding: 0 6px;
}

/* Google's real rendered sign-in button, shown directly and visibly - see
   pricing.html's own comment on why this is no longer disguised as an
   InJest-styled button. Just centers whatever Google renders into it. */
.google-signin-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

.google-signin-slot {
  display: flex;
  justify-content: center;
}

/* Checkout Success Steps */
.checkout-success-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 20px;
  text-align: left;
}

.checkout-success-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.checkout-success-step .step-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #06210f;
  font-weight: 800;
  font-size: 11px;
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.checkout-success-step p {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

/* Same proportions as the hero's own Download button (.btn-primary
   .btn-magnetic) - only stretched to fill the modal's narrower width. */
.checkout-download-btn {
  width: 100%;
}

/* Reveal Transitions */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   COMPLETE MOBILE OPTIMIZATION & RESPONSIVE DESIGN SYSTEM
   Breakpoints: 1024px (Tablet Land), 768px (Tablet Port), 580px (Mobile L),
                430px (iPhone Pro Max), 390px (iPhone 14/15), 360px (Android), 320px (SE)
   ========================================================================== */

/* 1. Global Safe Area & Touch Target Standards */
@supports (padding-top: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  .site-footer {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  .modal {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* ==================== 1024px Breakpoint (Tablet Landscape & Small Desktops) ==================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .org-grid { grid-template-columns: 1fr; gap: 32px; }
  .org-visual-panel { position: static; }
  .paperwork-banner { grid-template-columns: 1fr; gap: 24px; }
  .workflow-stages { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pricing-teaser-card { grid-template-columns: 1fr; }
  .tv-pipeline { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .tour-matrix { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .safety-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .step-pipeline-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 32px; }
  .explorer-app-shell { grid-template-columns: 1fr; }
  .explorer-sidebar {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 14px;
    gap: 8px;
    scrollbar-width: none;
  }
  .explorer-sidebar::-webkit-scrollbar { display: none; }
  .explorer-sidebar-title { display: none; }
  .explorer-tab-btn { white-space: nowrap; flex: 0 0 auto; padding: 10px 16px; width: auto; }
  .explorer-tab-arrow { display: none; }
  .safety-pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .whitepaper-specs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .bento-compare-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .reality-compare-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sim-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ==================== 768px Breakpoint (Tablets & Mobile Viewports) ==================== */
@media (max-width: 768px) {
  /* Layout & Spacing */
  .wrap, .wrap-narrow {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    width: 100%;
    box-sizing: border-box;
  }
  .section {
    padding: 48px 0;
  }
  .section-head {
    margin-bottom: 28px;
  }
  .section-head h2, .section h2 {
    font-size: clamp(24px, 5.8vw, 34px);
    line-height: 1.18;
  }
  .section-sub {
    font-size: 14.5px;
    line-height: 1.55;
    margin-top: 10px;
  }

  /* Header & Fullscreen Mobile Nav Drawer */
  .site-header {
    height: 64px;
  }
  .header-row {
    height: 64px;
  }
  .logo-word {
    font-size: 19px;
  }
  .site-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 64px);
    flex-direction: column;
    gap: 8px;
    background: rgba(10, 14, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 24px 20px 48px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    z-index: 999;
  }
  .site-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    min-height: 52px;
    transition: all 0.2s ease;
  }
  .site-nav a:hover,
  .site-nav a.active {
    background: rgba(53, 224, 111, 0.12);
    border-color: rgba(53, 224, 111, 0.4);
    color: var(--text-bright);
    transform: translateX(4px);
  }
  .site-nav a::after {
    content: "→";
    color: var(--accent);
    font-size: 18px;
    font-weight: 800;
  }

  /* Hamburger Menu Toggle Button */
  .menu-btn {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .menu-btn span {
    width: 20px;
    height: 2px;
    background: var(--text-bright);
    transition: all 0.25s ease;
  }
  .menu-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .menu-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .menu-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Hero Mobile Composition */
  .hero {
    padding: 36px 0 48px;
  }
  .hero h1 {
    font-size: clamp(28px, 7.8vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.03em;
  }
  .hero .sub {
    font-size: 15.5px;
    line-height: 1.55;
    margin-top: 14px;
  }
  .hero-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
    justify-content: center;
  }
  .hero-subnotes {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
  }
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 24px;
  }

  /* Flow Diagram on Mobile (Keep Exact Horizontal Composition, Scale Proportionally) */
  .flow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 1.5vw, 12px);
    padding: clamp(12px, 2.8vw, 20px) clamp(8px, 2vw, 16px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .flow-card {
    width: clamp(44px, 12vw, 70px);
    height: clamp(44px, 12vw, 70px);
    flex-shrink: 0;
  }
  .flow-node {
    font-size: clamp(9.5px, 2.5vw, 12.5px);
    gap: 4px;
    flex-shrink: 0;
  }
  .flow-line {
    min-width: clamp(30px, 9vw, 70px);
    flex: 1 1 auto;
    gap: 4px;
  }
  .flow-line .line-track {
    height: 2px;
  }
  .flow-line code {
    font-size: clamp(7.5px, 2vw, 10.5px);
    padding: 2px 4px;
    white-space: nowrap;
  }
  .flow-dest {
    gap: 4px;
    flex-shrink: 0;
  }
  .dest-row {
    padding: clamp(4px, 1.2vw, 8px) clamp(6px, 1.8vw, 10px);
    font-size: clamp(9.5px, 2.5vw, 12.5px);
    gap: 4px;
  }
  .flow-caption {
    font-size: clamp(11.5px, 2.8vw, 14.5px);
    margin-top: 10px;
  }

  /* Continuous Infinite Auto-Scrolling Marquee Strip on Mobile */
  .trust-strip {
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }
  .trust-marquee-track {
    display: flex;
    flex-direction: row;
    width: max-content;
    animation: trustMarqueeLoop 22s linear infinite;
    will-change: transform;
  }
  .trust-marquee-track:hover,
  .trust-marquee-track:active {
    animation-play-state: paused;
  }
  .trust-marquee-group {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 5px;
    flex-shrink: 0;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .trust-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(53, 224, 111, 0.06);
    border: 1px solid rgba(53, 224, 111, 0.22);
    border-radius: 999px;
    flex: 0 0 auto;
    white-space: nowrap;
    opacity: 1;
    transform: none;
  }
  .trust-item b {
    font-size: 12px;
    color: var(--accent);
  }
  .trust-item b::after {
    content: " ·";
    color: var(--muted);
  }
  .trust-item span {
    font-size: 11.5px;
    color: var(--muted-strong);
  }

  @keyframes trustMarqueeLoop {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* Reality Comparison Section (Side-by-Side Compact Comparison on Mobile) */
  .reality-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 1.8vw, 12px);
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
    margin-top: 20px;
  }
  .reality-card {
    padding: clamp(12px, 2.8vw, 18px) clamp(8px, 2vw, 14px);
    border-radius: clamp(10px, 2.5vw, 16px);
    gap: clamp(8px, 2vw, 14px);
    box-sizing: border-box;
  }
  .reality-badge-chaos,
  .reality-badge-relief {
    font-size: clamp(8.5px, 2.2vw, 10.5px);
    padding: 3px 6px;
    margin-bottom: 6px;
    gap: 4px;
  }
  .reality-card-header h3 {
    font-size: clamp(13px, 3.2vw, 16.5px);
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .reality-card-header p {
    font-size: clamp(9.5px, 2.3vw, 12px);
    line-height: 1.35;
  }
  .chaos-window {
    padding: 8px 6px;
    border-radius: 6px;
    gap: 6px;
  }
  .win-copy-title {
    font-size: 9.5px;
    gap: 4px;
  }
  .win-progress-bar {
    height: 10px;
    border-radius: 5px;
  }
  .win-telemetry-row {
    font-size: 8.5px;
  }
  .chaos-sticky-note {
    position: static;
    transform: none;
    margin-top: 6px;
    font-size: 8.5px;
    padding: 4px 6px;
    animation: none;
    width: 100%;
    box-sizing: border-box;
  }
  .chaos-balloon-alert {
    position: static;
    transform: none;
    margin-top: 6px;
    font-size: 8.5px;
    padding: 4px 6px;
    animation: none;
    width: 100%;
    box-sizing: border-box;
    gap: 4px;
  }
  .injest-verified-seal-card {
    padding: 8px 6px;
    border-radius: 6px;
    min-height: auto;
    gap: 6px;
  }
  .verified-stamp-banner {
    padding: 6px 6px;
    border-radius: 6px;
    gap: 4px;
  }
  .verified-stamp-lead {
    font-size: 9.5px;
    gap: 4px;
  }
  .verified-stamp-banner code {
    font-size: 8px;
    word-break: break-all;
  }
  .seal-perk-item {
    font-size: clamp(9px, 2.2vw, 11px);
    line-height: 1.3;
    gap: 4px;
  }
  .seal-perk-item b {
    font-size: clamp(9.5px, 2.3vw, 11.5px);
  }
  .seal-perk-item p {
    font-size: clamp(8.5px, 2vw, 10.5px);
  }
  .reality-pill-bad,
  .reality-pill-ok {
    font-size: clamp(8px, 1.9vw, 10px);
    padding: 5px 6px;
    border-radius: 6px;
    text-align: center;
  }

  /* Core Workflow Stages (Horizontal Snap-Scroll Pipeline) */
  .workflow-stages {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 6px 2px 14px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
  }
  .workflow-card {
    flex: 0 0 clamp(230px, 72vw, 290px);
    scroll-snap-align: start;
    padding: 18px 16px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
  }
  .wf-step-num {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .workflow-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .workflow-card p {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .wf-interactive-preview {
    font-size: 11px;
    padding: 8px 10px;
    margin-top: 10px;
  }

  /* TrueVerify Safety Pipeline (Keep Horizontal 4-Step Pipeline, Scale Proportionally) */
  .tv-pipeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(4px, 1.2vw, 10px);
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .tv-pipeline::before {
    display: block;
    top: clamp(22px, 5.5vw, 32px);
    left: calc((100% - clamp(16px, 4vw, 30px)) / 8);
    right: calc((100% - clamp(16px, 4vw, 30px)) / 8);
    height: 2px;
  }
  .tv-pipeline::after {
    display: block;
    top: clamp(22px, 5.5vw, 32px);
    left: calc((100% - clamp(16px, 4vw, 30px)) / 8);
    height: 2px;
  }
  .tv-step {
    padding: clamp(10px, 2.5vw, 16px) clamp(4px, 1.2vw, 8px);
    border-radius: clamp(8px, 1.8vw, 12px);
    gap: clamp(4px, 1vw, 8px);
    min-width: 0;
  }
  .tv-step-icon {
    width: clamp(28px, 7.5vw, 38px);
    height: clamp(28px, 7.5vw, 38px);
    font-size: clamp(12px, 3vw, 15px);
    font-weight: 800;
    margin-bottom: 2px;
  }
  .tv-step h4 {
    font-size: clamp(11px, 2.8vw, 14px);
    margin: 0;
    font-weight: 800;
    white-space: nowrap;
  }
  .tv-step p {
    font-size: clamp(8.5px, 2.2vw, 11.5px);
    line-height: 1.3;
    margin: 0;
  }
  .tv-step code {
    font-size: clamp(7.5px, 1.8vw, 10px);
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ==================== Interactive Simulator on Mobile (Fully Usable & Touch-Friendly) ==================== */
  .simulator-wrap {
    padding: 14px 10px;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .sim-top-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .sim-header-lead {
    font-size: 12px;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  .sim-header-label {
    font-size: 11.5px;
    white-space: normal;
  }
  .sim-action-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: 14px;
    justify-content: center;
    border-radius: 8px;
  }
  .sim-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .sim-cards-scroll-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .sim-card-display {
    padding: 10px 10px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .sim-drive-main-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .sim-drive-lead {
    gap: 5px;
    flex-shrink: 0;
  }
  .sim-drive-check {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  .sim-drive-letter {
    font-size: 13px;
    font-weight: 800;
  }
  .sim-drive-info {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 4px;
  }
  .sim-drive-label {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .sim-drive-meta {
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--muted);
    white-space: normal;
  }
  .sim-scan-counts {
    font-size: 10.5px;
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 2px 0;
  }
  .sim-scan-details {
    font-size: 10.5px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .sim-card-liquid-visual {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sim-card-display .card-chart-svg {
    width: 48px;
    height: 48px;
  }
  .sim-card-display .card-chart-value {
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
  }

  .sim-monitor-display {
    padding: 12px 10px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .sim-progress-block {
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .sim-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    width: 100%;
  }
  #sim-progress-percent {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent);
  }
  .sim-progress-track {
    height: 8px;
    border-radius: 4px;
    margin: 6px 0;
  }
  .sim-dest-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
  }
  .sim-dest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    min-height: 36px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.35);
  }
  .sim-dest-info-wrap {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
  }
  .sim-dest-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .sim-dest-path {
    font-size: 10.5px;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sim-dest-status {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* ==================== Deep Tour & Interactive App Explorer (No Chopped Tabs) ==================== */
  .explorer-app-shell {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    min-height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .explorer-sidebar {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: none;
  }
  .explorer-sidebar::-webkit-scrollbar {
    display: none;
  }
  .explorer-sidebar-title {
    display: none !important;
  }
  .explorer-tab-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding: 8px 14px;
    gap: 8px;
    border-radius: 999px;
    min-height: 40px;
  }
  .explorer-tab-arrow {
    display: none !important;
  }
  .app-tab-icon-box {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }
  .app-tab-svg {
    width: 14px;
    height: 14px;
  }
  .explorer-tab-label {
    font-size: 13px;
    font-weight: 700;
  }
  .explorer-viewport {
    padding: 18px 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .explorer-pane-header {
    margin-bottom: 16px;
  }
  .explorer-pane-header h2 {
    font-size: clamp(20px, 5.2vw, 26px);
    line-height: 1.25;
  }
  .explorer-pane-header p {
    font-size: 13.5px;
    line-height: 1.5;
  }
  .explorer-shot-frame {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
  }
  .explorer-shot-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
  }
  .explorer-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .explorer-card {
    padding: 16px 14px;
  }
  .explorer-card h4 {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .explorer-card p {
    font-size: 13px;
    line-height: 1.45;
  }

  /* Deep Tour Specific Layouts */
  .tour-matrix {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tour-card {
    padding: 18px 16px;
  }
  .step-pipeline-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .safety-pillars-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .whitepaper-specs-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bento-compare-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .paperwork-banner {
    padding: 18px 14px;
    border-radius: var(--radius-md);
  }
  .paperwork-content h3 {
    font-size: 18px;
  }
  .paperwork-content p {
    font-size: 13.5px;
  }

  /* Interactive CSV Showcase on Mobile */
  .csv-app-window-frame {
    border-radius: var(--radius-md);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .csv-modal-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .csv-modal-title-group {
    justify-content: space-between;
  }
  .csv-tabs-switch-row {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 4px;
    gap: 6px;
    scrollbar-width: none;
    width: 100%;
    box-sizing: border-box;
  }
  .csv-tabs-switch-row::-webkit-scrollbar { display: none; }
  .csv-app-tab-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 11.5px;
    border-radius: 999px;
  }
  .csv-app-preview-wrap {
    max-height: 340px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  .csv-app-table {
    min-width: 540px;
  }
  .csv-app-table th, .csv-app-table td {
    padding: 8px 10px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  .csv-modal-statusbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
    font-size: 11.5px;
  }
  .csv-pill-features-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 6 Feature Pillars */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .feature-teaser-card {
    padding: 20px 18px;
  }

  /* Pricing Cards & Teaser */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    margin-inline: 0;
    gap: 18px;
  }
  .price-card {
    padding: 24px 18px;
    border-radius: var(--radius-lg);
  }
  .price-amount .num {
    font-size: 36px;
  }
  .price-foot .btn {
    min-height: 50px;
    font-size: 16px;
  }

  /* Subhero on Subpages */
  .subhero {
    padding: 48px 0 28px;
  }
  .subhero h1 {
    font-size: clamp(26px, 6.8vw, 38px);
  }

  /* FAQ Accordion System on Mobile */
  .faq-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 8px;
    gap: 8px;
    scrollbar-width: none;
    width: 100%;
    box-sizing: border-box;
  }
  .faq-nav::-webkit-scrollbar { display: none; }
  .faq-nav a {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .accordion {
    gap: 12px;
  }
  .accordion-trigger {
    padding: 16px 18px;
    font-size: 15px;
    min-height: 50px;
  }
  .accordion-panel-inner {
    padding: 0 18px 16px;
    font-size: 14px;
  }

  /* Legal Pages on Mobile */
  .legal-toc {
    padding: 18px 16px;
  }
  .legal-toc ol {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .legal h2 {
    font-size: 20px;
    margin-top: 30px;
  }

  /* Modals & Bottom Sheets */
  .modal-backdrop {
    padding: 16px;
    align-items: flex-end;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    padding: 24px 18px max(24px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 10px;
  }
  .form-field input,
  .form-field select {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS auto-zoom */
  }

  /* Footer on Mobile */
  .site-footer {
    padding: 44px 0 max(28px, env(safe-area-inset-bottom));
  }
  .footer-row {
    flex-direction: column;
    gap: 32px;
  }
  .footer-brand {
    max-width: 100%;
  }
  .footer-cols {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .footer-col a {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
}

/* ==================== 430px & 390px Breakpoint (Modern Phone Screens) ==================== */
@media (max-width: 480px) {
  .hero-stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-stat-card {
    padding: 14px 16px;
  }
  .sim-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .trial-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px;
    gap: 12px;
  }
  .trial-banner .ti {
    width: 44px;
    height: 44px;
  }
  .trial-banner .ti-num {
    font-size: 15px;
  }
  .trial-banner .ti-unit {
    font-size: 7px;
  }
  .p2p-code-mock {
    font-size: clamp(15px, 5vw, 22px);
    letter-spacing: 2px;
    padding: 12px 16px;
    word-break: break-all;
  }
  .p2p-route {
    flex-direction: column;
    gap: 6px;
  }
}

/* ==================== 320px & 360px Stress Test (Compact Phones) ==================== */
@media (max-width: 360px) {
  .wrap, .wrap-narrow {
    padding-left: 14px;
    padding-right: 14px;
  }
  .hero h1 {
    font-size: 26px;
  }
  .hero .sub {
    font-size: 14.5px;
  }
  .header-actions .btn-sm {
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .eyebrow {
    font-size: 11px;
    padding: 4px 10px;
  }
  .price-amount .num {
    font-size: 32px;
  }
  .accordion-trigger {
    padding: 14px 16px;
    font-size: 14.5px;
  }
  .accordion-panel-inner {
    padding: 0 16px 14px;
    font-size: 13.5px;
  }
  .reality-pill-ok, .reality-pill-bad {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ==================== Reduced Motion Support ==================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .flow, .flow-line i, .flow-line code, .flow-caption, .flow-caption .fc-verified, .flow-caption .fc-checksum { transition: none; }
  .flow.checked .flow-card, .flow.checked .flow-card .fc-check, .dot.pending.flash { animation: none; }
  .paperwork-banner, .p-dot, .btn-magnetic, .spark, .chaos-sticky-note, .chaos-balloon-alert { animation: none; }
  .btn, .workflow-card, .tv-step, .feature-teaser-card, .accordion-panel, .accordion-trigger .chev { transition: none; }
}

/* ==================== Mobile Desktop-Only Splash Gate ==================== */
.mobile-pc-gate {
  display: none !important;
}

@media (max-width: 768px) {
  body > *:not(.mobile-pc-gate):not(script):not(style) {
    display: none !important;
  }

  .mobile-pc-gate {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(28px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    background: radial-gradient(100% 60% at 50% 12%, rgba(53, 224, 111, 0.18) 0%, rgba(12, 16, 12, 0.98) 70%), #0c100c;
    text-align: center;
    color: var(--text);
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    z-index: 99999;
  }

  .mobile-gate-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  .mobile-gate-logo-badge {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-gate-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 20px rgba(53, 224, 111, 0.45));
  }

  .mobile-gate-brand {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
  }

  .mobile-gate-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 380px;
    margin: auto 0;
    padding: 12px 0;
  }

  .mobile-gate-title {
    font-size: clamp(24px, 7vw, 30px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  .mobile-gate-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
  }

  .mobile-gate-desc strong {
    color: var(--accent-soft);
  }

  .mobile-gate-card {
    background: rgba(16, 24, 17, 0.85);
    border: 1px solid rgba(53, 224, 111, 0.3);
    border-radius: 18px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(53, 224, 111, 0.1);
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
  }

  .mobile-gate-screen-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(53, 224, 111, 0.12);
    border: 1px solid rgba(53, 224, 111, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    box-shadow: 0 0 16px rgba(53, 224, 111, 0.25);
  }

  .mobile-gate-card h3 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
  }

  .mobile-gate-card p {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
    margin: 0;
  }

  .mobile-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
  }

  .mobile-gate-actions .btn {
    width: 100%;
    min-height: 48px;
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-gate-foot {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--muted-dim);
    margin-top: 16px;
    letter-spacing: 0.2px;
  }
}