/* ============================================================
   Total Security WP — marketing site
   Custom layer on top of Tailwind (CDN). Keep this file small;
   utility classes handle most layout, this handles what
   Tailwind can't express cleanly (sticky flight sections, glow,
   scrollbars, keyframes).
   ============================================================ */

html {
  scroll-behavior: auto; /* GSAP ScrollToPlugin drives programmatic scroll */
}

body {
  overflow-x: hidden;
}

::selection { background: rgba(77,179,255,0.28); }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c2b38; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #4db3ff; }

.vignette-grain {
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* ---------------- Sidebar nav items ---------------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: #94a3b8;
  text-align: left;
  transition: color .15s ease, background-color .15s ease;
}
.nav-item:hover { color: #e2e8f0; background: rgba(255,255,255,0.04); }
.nav-item.is-active {
  color: #4db3ff;
  background: rgba(77,179,255,0.08);
  box-shadow: inset 2px 0 0 0 #4db3ff;
}
.nav-ico { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------------- Hero dashboard card ---------------- */
.chip-tab {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
  padding: 3px 8px;
  border-radius: 6px;
  transition: color .15s, background-color .15s;
}
.chip-tab.is-active { color: #4db3ff; background: rgba(77,179,255,0.1); }
.chip-tab:hover { color: #cbd5e1; }

.status-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #1c2b38;
  background: rgba(13,21,32,0.6);
  border-radius: 0.5rem;
  padding: 0.65rem 0.8rem;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  box-shadow: 0 0 8px 1px currentColor;
}

.alert-row {
  font-size: 11px;
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.35;
}

/* ---------------- Scroll-flight module sections ---------------- */
/* Section height sets how long the sticky pane stays pinned: pinned travel =
   section height - pane height. Too tall and the visitor scrolls through a dead
   zone where nothing on screen responds. These are deliberately just over one
   viewport — enough dwell for the camera move to read, not enough to feel stuck. */
.module-section {
  position: relative;
  min-height: 132vh;
}
.module-section--tall { min-height: 124vh; }

.module-sticky {
  position: sticky;
  top: 4rem;
  /* min-height, NOT height. With a fixed height and align-items:center, copy
     taller than the pane was painted outside the box — and so outside the
     section — landing on top of the neighbouring section. (Reproducible at
     930x500: pricing over faq, install over faq and over the footer.)
     Growing the box also collapses the sticky range to zero on its own, so an
     over-tall pane degrades to ordinary scrolling instead of pinning content
     the visitor can never scroll down to. */
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  padding: 2.5rem 1.25rem;
}
@media (min-width: 640px) { .module-sticky { padding: 2.5rem 2rem; } }
@media (min-width: 1024px) { .module-sticky { padding: 2.5rem 3.5rem; } }

.module-sticky--right { justify-content: flex-end; text-align: right; }
.module-sticky--right .feature-list { text-align: right; }
.module-sticky--right .feature-list li::before { order: 2; margin-left: 0.5rem; margin-right: 0; }
.module-sticky--center { justify-content: center; }

.module-copy {
  position: relative;
  max-width: 34rem;
  background: rgba(8,12,19,0.88);
  border: 1px solid rgba(27,40,54,0.8);
  backdrop-filter: blur(22px);
  border-radius: 0.5rem;
  padding: 1.85rem 2.1rem;
  box-shadow: 0 0 46px 2px rgba(5,7,12,0.5);
}

/* HUD corner brackets — the "targeting frame" language reused on every
   bounded panel (module copy, HUD side-panels, pricing cards) so the whole
   site reads as one instrument, not a stack of generic glass cards. */
.hud-frame, .module-copy, .module-hud, .price-card {
  position: relative;
}
.hud-frame::before, .hud-frame::after,
.module-copy::before, .module-copy::after,
.module-hud::before, .module-hud::after,
.price-card::before, .price-card::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: currentColor;
  color: rgba(77,179,255,0.55);
  pointer-events: none;
}
.price-card--pro::before, .price-card--pro::after { color: rgba(217,180,92,0.6); }
.hud-frame::before, .module-copy::before, .module-hud::before, .price-card::before {
  top: -1px; left: -1px;
  border-top: 1.5px solid; border-left: 1.5px solid;
}
.hud-frame::after, .module-copy::after, .module-hud::after, .price-card::after {
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid; border-right: 1.5px solid;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.module-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: white;
  line-height: 1.15;
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
}
.module-desc {
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 34rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.module-sticky--center .module-desc { margin-left: auto; margin-right: auto; }

.feature-list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.45;
}
.feature-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #4db3ff;
  margin-top: 0.42rem;
  flex-shrink: 0;
  box-shadow: 0 0 6px 1px rgba(77,179,255,0.7);
}
.text-pro-line { color: #d9b45c !important; }
.text-pro-line::before { background: #d9b45c !important; box-shadow: 0 0 6px 1px rgba(217,180,92,0.7) !important; }

.tier-tags { margin-top: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.tag-free, .tag-pro {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.tag-free { color: #22c58f; background: rgba(34,197,143,0.1); border: 1px solid rgba(34,197,143,0.3); }
.tag-pro { color: #d9b45c; background: rgba(217,180,92,0.1); border: 1px solid rgba(217,180,92,0.3); margin-right: 6px; }

/* Floating HUD side-panels (audit stream / terminal) */
.module-hud {
  position: absolute;
  top: 50%;
  right: 3.5rem;
  transform: translateY(-50%);
  width: 19rem;
  max-width: calc(100% - 2.5rem);
  background: rgba(8,12,19,0.86);
  border: 1px solid rgba(28,43,56,0.7);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 38px 2px rgba(5,7,12,0.45);
  border-radius: 0.6rem;
  padding: 1rem 1.1rem;
  display: none;
}
@media (min-width: 1024px) { .module-hud { display: block; } }
.module-hud--terminal { right: auto; left: 3.5rem; }
.hud-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #64748b;
  margin-bottom: 0.6rem;
}

/* ---------------- Feature wall cards ---------------- */
.fw-card {
  border: 1px solid #1c2b38;
  background: rgba(8,12,19,0.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: 0.5rem;
  padding: 1rem 1.1rem;
  transition: border-color .2s, transform .2s;
}
.fw-card:hover { border-color: rgba(77,179,255,0.4); transform: translateY(-2px); }
.fw-card h4 { font-family: 'Space Grotesk', sans-serif; color: white; font-size: 0.88rem; margin-bottom: 0.3rem; }
.fw-card p { color: #64748b; font-size: 0.78rem; line-height: 1.4; }

/* ---------------- Pricing cards ---------------- */
.price-card {
  position: relative;
  border: 1px solid #1c2b38;
  background: rgba(8,12,19,0.88);
  backdrop-filter: blur(22px);
  border-radius: 0.6rem;
  padding: 1.75rem;
  box-shadow: 0 0 46px 2px rgba(5,7,12,0.5);
}
.price-card--pro {
  border-color: rgba(217,180,92,0.4);
  box-shadow: 0 0 46px 2px rgba(5,7,12,0.5), 0 0 50px -18px rgba(217,180,92,0.5);
}
.pro-ribbon {
  position: absolute; top: -0.6rem; right: 1.5rem;
  background: #d9b45c; color: #05070c;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.05em;
}
.price-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.5rem; }
.price-list li {
  font-size: 0.83rem; color: #cbd5e1; line-height: 1.4;
  padding-left: 1.2rem; position: relative;
}
.price-list li::before {
  content: '✓'; position: absolute; left: 0; color: #22c58f; font-size: 0.75rem; top: 0.05rem;
}
.price-card--pro .price-list li::before { color: #d9b45c; }
.price-btn {
  display: block; width: 100%; text-align: center;
  font-size: 0.85rem; font-weight: 600;
  padding: 0.7rem 1rem; border-radius: 0.7rem;
  transition: filter .15s, transform .15s;
}
.price-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.price-btn--free { background: rgba(255,255,255,0.06); color: white; border: 1px solid #1c2b38; }
.price-btn--pro { background: #d9b45c; color: #05070c; }

/* ---------------- FAQ accordion ---------------- */
.faq-item { border: 1px solid #1c2b38; background: rgba(8,12,19,0.88); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-radius: 0.5rem; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.05rem; text-align: left;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.86rem; color: #e2e8f0;
}
.faq-q svg { flex-shrink: 0; transition: transform .25s ease; color: #4db3ff; }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
  padding: 0 1.05rem;
  font-size: 0.82rem; color: #94a3b8; line-height: 1.55;
}
.faq-item.is-open .faq-a { padding: 0 1.05rem 1rem; }

.req-chip { border: 1px solid #1c2b38; border-radius: 0.4rem; padding: 0.5rem 0.3rem; display: flex; flex-direction: column; gap: 2px; }
.req-val { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #4db3ff; font-weight: 600; }
.req-label { font-size: 0.62rem; color: #64748b; }

/* ---------------- Installation steps ---------------- */
.install-steps { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.install-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.install-steps li span {
  flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 999px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 700;
  color: #05070c; background: #4db3ff;
}
.install-steps li p:first-child { font-family: 'Space Grotesk', sans-serif; color: white; font-size: 0.9rem; margin-bottom: 0.15rem; }
.install-steps li p:last-child { color: #94a3b8; font-size: 0.82rem; line-height: 1.5; }
.install-steps code { color: #4db3ff; background: rgba(77,179,255,0.08); padding: 1px 5px; border-radius: 4px; font-size: 0.8em; }

/* ---------------- Misc ---------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-bounce, .animate-spin, .animate-pulse { animation: none !important; }
}

@media (max-width: 1023px) {
  #dash-card { max-width: 100%; }
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------- Trust bar ---------------- */
.trust-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.4rem 1.4rem;
  margin-top: 1.1rem;
}
.trust-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: #7a8ba0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.trust-ico { width: 13px; height: 13px; flex-shrink: 0; color: #4db3ff; opacity: 0.9; }
.trust-bar--footer {
  border-bottom: 1px solid #1b2836;
  padding: 1.1rem 1.25rem;
  gap: 0.6rem 2rem;
}

/* ---------------- Loader diagnostic rows ---------------- */
.loader-row { display: flex; align-items: center; gap: 0.55rem; opacity: 0.45; transition: opacity .3s ease, color .3s ease; }
.loader-row.is-active { opacity: 1; color: #cbd5e1; }
.loader-row.is-done { opacity: 1; color: #cbd5e1; }
.loader-dot {
  width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
  background: #1b2836; transition: background .3s ease, box-shadow .3s ease;
}
.loader-row.is-active .loader-dot { background: #4db3ff; box-shadow: 0 0 7px 1px rgba(77,179,255,0.75); }
.loader-row.is-done .loader-dot { background: #22c58f; box-shadow: 0 0 7px 1px rgba(34,197,143,0.75); }
.loader-status-txt { font-size: 10px; color: #475569; }
.loader-row.is-done .loader-status-txt { color: #22c58f; }

/* ============================================================
   PRESTIGE PASS — sections added to carry the actual product:
   real console screenshots, a defense-in-depth model, threat
   coverage, and the engineering guarantees behind the claims.
   ============================================================ */

/* ---------------- Shared section furniture ---------------- */
.band {
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, rgba(5,7,12,0) 0%, rgba(5,7,12,0.88) 8%, rgba(5,7,12,0.92) 92%, rgba(5,7,12,0) 100%);
}
.band-inner { max-width: 78rem; margin: 0 auto; padding: clamp(3.5rem, 8vh, 6rem) 1.25rem; }
@media (min-width: 640px) { .band-inner { padding: clamp(3.5rem, 8vh, 7rem) 2rem; } }
@media (min-width: 1024px) { .band-inner { padding: clamp(4rem, 9vh, 8rem) 3.5rem; } }

.section-index {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.18em; color: #4a5b70;
  margin-bottom: 1.1rem;
}
.section-index::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(77,179,255,0.28), transparent);
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; color: #fff;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.015em;
}
.section-lede {
  color: #8697aa; font-size: 0.95rem; line-height: 1.65;
  max-width: 40rem; margin-top: 0.9rem;
}

/* Word-level headline reveal (JS splits into .rw > span) */
.rw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rw > span { display: inline-block; will-change: transform; }

/* ---------------- Console gallery ---------------- */
.console-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: 1fr;
  margin-top: 2.75rem;
}
@media (min-width: 1024px) {
  .console-grid { grid-template-columns: 16.5rem 1fr; gap: 2.25rem; align-items: start; }
}

.console-rail {
  /* No max-height and no overflow: a nav list has no business being its own
     scroll container, and being one is what made it a wheel trap. */
  display: flex; flex-direction: column; gap: 0.85rem;
  padding-right: 0.35rem;
}
.console-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.2em; color: #46586d;
  margin-bottom: 0.4rem;
}
.console-group-items { display: flex; flex-direction: column; gap: 2px; }

.console-tab {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; text-align: left;
  padding: 0.42rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  font-size: 0.815rem; color: #93a4b8;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.console-tab:hover { color: #e2e8f0; background: rgba(255,255,255,0.035); }
.console-tab .ct-dot {
  width: 5px; height: 5px; border-radius: 999px; flex-shrink: 0;
  background: #24384b; transition: background .18s ease, box-shadow .18s ease;
}
.console-tab[aria-selected="true"] {
  color: #fff;
  background: rgba(77,179,255,0.09);
  border-color: rgba(77,179,255,0.28);
}
.console-tab[aria-selected="true"] .ct-dot {
  background: #4db3ff; box-shadow: 0 0 8px 1px rgba(77,179,255,0.8);
}
.console-tab[data-tier="pro"][aria-selected="true"] {
  background: rgba(217,180,92,0.09); border-color: rgba(217,180,92,0.3);
}
.console-tab[data-tier="pro"][aria-selected="true"] .ct-dot {
  background: #d9b45c; box-shadow: 0 0 8px 1px rgba(217,180,92,0.8);
}
.ct-pro {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.08em; font-weight: 700;
  color: #d9b45c; border: 1px solid rgba(217,180,92,0.35);
  padding: 1px 5px; border-radius: 999px;
}

/* Browser chrome around the real screenshot */
.console-viewer {
  position: relative;
  border: 1px solid rgba(28,43,56,0.9);
  border-radius: 0.65rem;
  background: rgba(8,13,20,0.82);
  backdrop-filter: blur(18px);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.95), 0 0 70px -40px rgba(77,179,255,0.35);
}
.console-chrome {
  display: flex; align-items: center; gap: 0.5rem;
  height: 2.25rem; padding: 0 0.85rem;
  border-bottom: 1px solid rgba(28,43,56,0.9);
  background: rgba(255,255,255,0.02);
}
.console-chrome i { width: 8px; height: 8px; border-radius: 999px; display: block; }
.console-url {
  flex: 1; margin-left: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #5a6b7f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.console-shot-wrap {
  position: relative;
  aspect-ratio: 1259 / 868;
  background: #0a0f18;
  overflow: hidden;
}
.console-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  opacity: 0;
  transition: opacity .45s ease;
}
.console-shot.is-live { opacity: 1; }
.console-shot { z-index: 1; }
/* Scanline sweep on switch — reads as the console repainting, not a fade */
.console-sweep {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent 42%, rgba(77,179,255,0.16) 50%, transparent 58%);
  transform: translateY(-100%);
  opacity: 0;
}
.console-sweep.is-running { animation: consoleSweep .55s ease-out; }
@keyframes consoleSweep {
  0%   { transform: translateY(-100%); opacity: 1; }
  100% { transform: translateY(100%);  opacity: 0; }
}
.console-caption {
  border-top: 1px solid rgba(28,43,56,0.9);
  padding: 0.85rem 1.1rem;
  background: rgba(255,255,255,0.015);
}
.console-caption h4 {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff; font-size: 0.9rem; margin-bottom: 0.2rem;
}
.console-caption p { color: #7d8fa3; font-size: 0.78rem; line-height: 1.5; }

.console-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #46586d; letter-spacing: 0.1em;
}

/* ---------------- Defense in depth ---------------- */
.depth-grid {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  margin-top: 2.75rem;
}
@media (min-width: 1024px) { .depth-grid { grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: start; } }

.depth-stack { display: flex; flex-direction: column; gap: 4px; }
.depth-layer {
  position: relative;
  display: flex; align-items: center; gap: 0.85rem;
  width: 100%; text-align: left;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(28,43,56,0.85);
  border-left-width: 2px;
  border-left-color: rgba(77,179,255,0.35);
  background: rgba(8,12,19,0.82);
  backdrop-filter: blur(10px);
  border-radius: 0.35rem;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.depth-layer:hover { background: rgba(14,23,34,0.75); transform: translateX(3px); }
.depth-layer[aria-selected="true"] {
  background: rgba(77,179,255,0.08);
  border-color: rgba(77,179,255,0.4);
  border-left-color: #4db3ff;
}
.depth-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #4db3ff; flex-shrink: 0;
  width: 1.6rem;
}
.depth-name {
  font-family: 'Space Grotesk', sans-serif;
  color: #e2e8f0; font-size: 0.875rem;
}
.depth-layer[aria-selected="true"] .depth-name { color: #fff; }
.depth-where {
  margin-left: auto; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em; color: #52657a;
}

.depth-detail {
  border: 1px solid rgba(28,43,56,0.85);
  background: rgba(8,12,19,0.88);
  backdrop-filter: blur(20px);
  border-radius: 0.5rem;
  padding: 1.5rem 1.6rem;
  position: relative;
  min-height: 30rem;
}
.depth-detail .eyebrow { margin-bottom: 0.45rem; color: #4db3ff; }
.depth-detail h3 {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem;
}
.depth-detail > p { color: #8697aa; font-size: 0.855rem; line-height: 1.6; }
.depth-stops {
  margin-top: 1.2rem;
  border-top: 1px solid rgba(28,43,56,0.8);
  padding-top: 1.1rem;
}
.depth-stops-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.18em; color: #46586d;
  margin-bottom: 0.65rem;
}
.depth-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.depth-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #cbd5e1;
  border: 1px solid rgba(255,84,89,0.28);
  background: rgba(255,84,89,0.07);
  padding: 3px 8px; border-radius: 0.3rem;
}
.depth-caps { margin-top: 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; }
.depth-caps li {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.815rem; color: #b6c4d3; line-height: 1.45;
}
.depth-caps li::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px; flex-shrink: 0;
  margin-top: 0.45rem; background: #22c58f;
  box-shadow: 0 0 6px 1px rgba(34,197,143,0.6);
}
.depth-caps li.is-pro { color: #d9b45c; }
.depth-caps li.is-pro::before { background: #d9b45c; box-shadow: 0 0 6px 1px rgba(217,180,92,0.6); }

/* ---------------- Guarantee cards ---------------- */
.guarantee-grid {
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  margin-top: 2.75rem;
  background: rgba(28,43,56,0.7);
  border: 1px solid rgba(28,43,56,0.7);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media (min-width: 640px) { .guarantee-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .guarantee-grid { grid-template-columns: repeat(4, 1fr); } }
.guarantee {
  background: #070b12;
  padding: 1.6rem 1.5rem;
  transition: background-color .25s ease;
}
.guarantee:hover { background: #0a1119; }
.guarantee-ico { width: 20px; height: 20px; color: #4db3ff; margin-bottom: 0.9rem; }
.guarantee h4 {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff; font-size: 0.925rem; margin-bottom: 0.4rem; line-height: 1.3;
}
.guarantee p { color: #74869a; font-size: 0.79rem; line-height: 1.55; }

/* ---------------- Hero stat strip ---------------- */
.hero-stats {
  display: none;
  gap: 0 2.25rem; flex-wrap: wrap; justify-content: center;
  margin-top: 0.9rem;
}
@media (min-width: 1280px) and (min-height: 820px) { .hero-stats { display: flex; } }
.hero-stat { text-align: center; }
.hero-stat b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 600; color: #fff; line-height: 1.1;
}
.hero-stat span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; color: #5c6e83;
}

/* ---------------- Top rail scroll progress ---------------- */
#rail-progress {
  position: absolute; left: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, #4db3ff, #22c58f);
  width: 0%;
  box-shadow: 0 0 10px 0 rgba(77,179,255,0.7);
}

/* ---------------- Reveal primitive ---------------- */
.reveal { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .console-sweep.is-running { animation: none; }
  .depth-layer:hover { transform: none; }
}

/* The defense section is the one band where the 3D behind it is the point —
   six barrier rings absorbing tracers — so it sits sheerer than the rest. */
#defense.band {
  background: linear-gradient(180deg, rgba(5,7,12,0) 0%, rgba(5,7,12,0.72) 10%, rgba(5,7,12,0.78) 90%, rgba(5,7,12,0) 100%);
}
#defense .section-lede, #defense .section-title { text-shadow: 0 4px 24px rgba(0,0,0,0.85); }

/* ---------------- Console gallery: sizing corrections ----------------
   Grid children default to min-width:auto, so a wide flex row inside the
   rail was inflating the whole column past the viewport. Pin them to 0 and
   let the labels wrap instead. */
.console-grid > * { min-width: 0; }
.console-rail { min-width: 0; }
.console-tab > span:not(.ct-dot):not(.ct-pro) { min-width: 0; overflow-wrap: anywhere; }
/* On desktop the rail should stand as tall as the viewer next to it rather
   than becoming a second scroll surface inside the page. */


/* The stat strip moved out of the hero (no room above the fold) and into the
   guarantees band, where it can be shown at every width. */
.hero-stats {
  display: flex;
  gap: 1.25rem 2.75rem;
  justify-content: flex-start;
  margin-top: 2.25rem;
  padding-bottom: 0.25rem;
}
.hero-stat { text-align: left; }
.hero-stat b { font-size: 1.6rem; letter-spacing: -0.02em; }
.hero-stat span { display: block; margin-top: 0.3rem; }

/* ---------------- Module copy + HUD pairing ----------------
   The HUD side-panels used to be absolutely positioned siblings of the
   sticky pane. The install terminal was pinned to `left: 3.5rem` — the
   copy's own side — so it sat straight on top of the steps, and the audit
   HUD overlapped too on any viewport under ~1240px. Laying the two out as
   one flex row makes an overlap structurally impossible at every width. */
.module-pair {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: 100%;
}
.module-sticky--right .module-pair { justify-content: flex-end; }
.module-pair > .module-copy { flex: 0 1 34rem; min-width: 0; }

.module-pair > .module-hud {
  position: static;
  top: auto; right: auto; left: auto;
  transform: none;
  flex: 0 0 19rem;
  width: 19rem;
  max-width: 19rem;
  display: block;
}

/* Below this the row cannot hold both without squeezing the copy into a
   column too narrow to read, so the HUD — the secondary element — is the
   one that goes. (It was already hidden under 1024px.) */
@media (max-width: 1279px) {
  .module-pair > .module-hud { display: none; }
}

/* Between 1280 and 1440 the copy gives up its slack first, so the two never
   push past the pane's padding. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .module-pair > .module-copy { flex: 0 1 30rem; }
  .module-pair > .module-hud { flex: 0 0 17rem; width: 17rem; }
}

/* ============================================================
   HERO FIT — removes the "scroll to explore" dead spot.
   ------------------------------------------------------------
   The hero sticky pane is `overflow-y-auto` as a safety net so
   tall content is never clipped. But when it ACTUALLY overflows,
   syncLenisPrevent() marks it `data-lenis-prevent`, Lenis hands
   the wheel to the pane, and the visitor burns 130-310px of
   hidden internal scroll before the page moves at all. That is
   the dead spot at "SCROLL TO EXPLORE" — the wheel is scrolling
   the card, not the document.

   The cure is to make the hero FIT, so the pane never overflows
   and the attribute is never applied. Everything hidden below is
   repeated further down the page (the trust bar is also in the
   footer; the lede restates the H1).
   ============================================================ */

/* Reclaim the pane's own padding first. */
@media (min-width: 1024px) and (max-height: 980px) {
  #dashboard > .sticky { padding-top: .5rem; padding-bottom: .5rem; }
  #dashboard > .sticky > .max-w-2xl { margin-bottom: .5rem; }
  #dashboard > .sticky > .max-w-2xl > h1 { font-size: 1.9rem; }
  #dashboard > .sticky > .max-w-2xl > p { margin-top: .5rem; font-size: .78rem; }
}

/* Drop the lede: the H1 above it already carries the message. */
@media (min-width: 1024px) and (max-height: 900px) {
  #dashboard > .sticky > .max-w-2xl > p { display: none; }
  #dashboard > .sticky > .max-w-2xl > .trust-bar { margin-top: .35rem; }
}

/* Drop the trust bar: it is repeated verbatim in the footer. */
@media (min-width: 1024px) and (max-height: 840px) {
  #dashboard > .sticky > .max-w-2xl > .trust-bar { display: none; }
  #dashboard > .sticky > .max-w-2xl > h1 { font-size: 1.75rem; }
  #dashboard > .sticky > .max-w-2xl > span { margin-bottom: .4rem; }
}

/* Last resort on genuinely short screens: compact the card itself. */
@media (min-width: 1024px) and (max-height: 780px) {
  #dashboard > .sticky > .max-w-2xl > h1 { font-size: 1.55rem; }
  #dashboard .hero-stats { display: none; }
}

/* The dashboard card is `overflow-hidden`, so capping the CARD clips its lower
   rows. The chart canvas is the one genuinely elastic element in the grid, so
   cap that instead and the whole card shrinks honestly, losing no content. */
@media (min-width: 1024px) {
  #threat-chart { max-height: 240px; }
}
@media (min-width: 1024px) and (max-height: 900px) { #threat-chart { max-height: 210px; } }
@media (min-width: 1024px) and (max-height: 840px) { #threat-chart { max-height: 190px; } }
@media (min-width: 1024px) and (max-height: 780px) { #threat-chart { max-height: 150px; } }
@media (min-width: 1024px) and (max-height: 730px) { #threat-chart { max-height: 120px; } }