*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cyan: #29ABE2;
  --cyan-dark: #1a8abf;
  --cyan-light: #e8f7fd;
  --dark: #0f1923;
  --dark-mid: #1a2836;
  --dark-surface: #1e2f3d;
  --text-primary: #0f1923;
  --text-secondary: #5a6a78;
  --text-muted: #8a9aaa;
  --bg: #ffffff;
  --bg-secondary: #f6f8fa;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.13);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 0.5px solid transparent;
}

nav.scrolled {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border);
}

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

.nav-logo-placeholder {
  width: 80px;
  height: 64px;
  flex-shrink: 0;
}

.nav-logo-text {
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo-text.visible { opacity: 1; }

.logo-product {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #3a4a5a;
  letter-spacing: -0.5px;
  line-height: 1;
}

.logo-product .logo-sub {
  color: var(--cyan);
  font-size: 0.65em;
  vertical-align: baseline;
  position: relative;
  top: 0.15em;
}

.logo-byline {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
  list-style: none;
}

.nav-links li {
  display: flex;
  align-items: stretch;
}

.nav-links a {
  font-size: 14px;
  color: white;
  text-decoration: none;
  padding: 0 20px;
  display: flex;
  align-items: center;
  transition: color 0.2s, background 0.2s;
}

.nav-links a:hover {
  background: var(--cyan);
  color: white;
}

nav.scrolled .nav-links a { color: var(--text-secondary); }
nav.scrolled .nav-links a:hover { background: var(--cyan); color: white; }

.btn-nav {
  background: var(--cyan);
  color: white !important;
  padding: 8px 18px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-nav:hover { background: var(--cyan-dark) !important; }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--bg);
  border-radius: 2px;
  transition: background 0.2s;
}

nav.scrolled .nav-burger span { background: var(--text-primary); }

/* ── LOGO ANIMATOR ── */
.logo-animator {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 200;
}

#logoAnim {
  position: absolute;
  will-change: transform, width;
  z-index: 102;
}

/* ── HERO ── */
.hero-fullscreen {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,25,40,0.65) 0%, rgba(10,25,40,0.5) 60%, rgba(10,25,40,0.75) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hero-spacer { height: 180px; }

.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.06em;
  transition: opacity 0.15s;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity 0.15s;
}

.btn-hero-primary {
  background: var(--cyan);
  color: white;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
}

.btn-hero-primary:hover { background: var(--cyan-dark); transform: translateY(-1px); }

.btn-hero-secondary {
  background: rgba(255,255,255,0.12);
  color: white;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.2s;
  display: inline-block;
}

.btn-hero-secondary:hover { background: rgba(255,255,255,0.2); }

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
  animation: bounce 1.6s ease-in-out infinite;
  white-space: nowrap;
}

.scroll-arrow {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(255,255,255,0.6);
  border-bottom: 1.5px solid rgba(255,255,255,0.6);
  transform: rotate(45deg);
  margin: 6px auto 0;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ── SHARED SECTION STYLES ── */
.section-label {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

.section-label.light { color: rgba(41,171,226,0.8); }

h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.75px;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

h2.light { color: white; }

.section-intro {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 2.5rem;
}

.check {
  width: 16px;
  height: 16px;
  background: var(--cyan);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

/* ── INTRO STRIP ── */
.intro-strip {
  padding: 5rem 2rem;
  border-bottom: 0.5px solid var(--border);
}

/* Dark variant — keeps the light/dark section rhythm (about → why → security → …) */
.intro-strip.intro-dark { background: var(--dark); border-bottom: none; }
.intro-dark h2 { color: #fff; }
.intro-dark .intro-body { color: rgba(255,255,255,0.65); }
.intro-dark .stat-label { color: rgba(255,255,255,0.5); }

.intro-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}

.intro-left h2 { margin-bottom: 0; }

.intro-body {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.stats-row {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 0.5px solid var(--border);
}

.stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── SPLIT SECTIONS ── */
.split-section {
  padding: 0;
  overflow: hidden;
}

.split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.split-reverse .split-inner {
  direction: rtl;
}

.split-reverse .split-inner > * {
  direction: ltr;
}

.split-text {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-body {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

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

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 0.5px solid var(--border);
}

.feature-list li:last-child { border-bottom: none; }

.split-image {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── FEATURE DEMO LINK ── */
.feature-demo-link {
  cursor: pointer;
  transition: color 0.2s;
}

.feature-demo-link:hover {
  color: var(--cyan);
}

.feature-demo-cta {
  font-size: 11px;
  color: var(--cyan);
  font-weight: 600;
  margin-left: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.feature-demo-link:hover .feature-demo-cta {
  opacity: 1;
}

/* ── PACKING MODAL ── */
.pack-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.pack-modal-overlay.open {
  display: flex;
}

.pack-modal {
  background: var(--bg);
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 800px;
  width: 90%;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.pack-modal-replay {
  position: absolute;
  top: 14px;
  right: 52px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px;
}

.pack-modal-replay:hover { color: var(--cyan); }

.pack-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

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

.pack-modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pack-modal-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.pack-scene {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

.pack-centre-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pack-box-wrap {
  position: relative;
  display: inline-block;
}

.pack-box-img {
  width: 220px;
  height: auto;
  display: block;
  border-radius: 8px;
}

.pack-qr-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15,25,35,0.85);
  padding: 4px 10px 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(41,171,226,0.3);
  margin-top: 6px;
}

.pack-qr-tag span {
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan);
  font-family: 'Inter', sans-serif;
}

.pack-scan-flash {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--cyan);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.pack-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(41,171,226,0.9);
  border: 1px solid var(--cyan);
  color: white;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.08em;
  padding: 6px 20px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s;
}

/* Active case slot */
.pack-active-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.4s, transform 0.5s ease-in-out;
  min-height: 100px;
}

.pack-active-case.visible {
  opacity: 1;
  transform: translateY(0);
}

.pack-active-case.drop {
  opacity: 0;
  transform: translateY(80px) scale(0.4);
  transition: opacity 0.8s ease-in, transform 1s ease-in;
}

.pack-active-case-img {
  width: 100px;
  height: auto;
  border-radius: 6px;
}

.pack-active-case-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan);
  font-family: 'Inter', sans-serif;
}

/* Scan beam */
.pack-beam-col {
  display: flex;
  align-items: center;
  align-self: center;
  width: 60px;
  flex-shrink: 0;
}

.pack-scan-beam {
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transition: width 0.4s;
  margin-left: auto;
}

/* Tablet device */
.pack-tablet {
  flex-shrink: 0;
  align-self: stretch;
}

.pack-tablet-frame {
  background: #0f1923;
  border: 2px solid #2a3a4a;
  border-radius: 16px;
  padding: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 260px;
}

.pack-tablet-notch {
  width: 40px;
  height: 4px;
  background: #2a3a4a;
  border-radius: 2px;
  margin: 2px auto 6px;
}

.pack-tablet-screen {
  background: #1a2836;
  border-radius: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pack-tablet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pack-tablet-app-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
}

.pack-tablet-btn {
  font-size: 9px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.04em;
  cursor: default;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.pack-tablet-btn.flash {
  background: var(--cyan);
  color: white;
  border-color: var(--cyan);
}

.pack-tablet-body {
  padding: 12px 14px;
  flex: 1;
  font-family: 'Inter', sans-serif;
}

.pack-tablet-location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
  transition: color 0.3s;
}

.pack-tablet-location.active {
  color: var(--cyan);
}

.pack-tablet-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0;
}

.pack-tablet-home {
  width: 28px;
  height: 4px;
  background: #2a3a4a;
  border-radius: 2px;
  margin: 6px auto 2px;
}

.pack-manifest-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pack-manifest-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  padding: 5px 0;
}

.pack-manifest-dot {
  width: 8px;
  height: 8px;
  background: rgba(41,171,226,0.2);
  border-radius: 50%;
  flex-shrink: 0;
}

.pack-manifest-dot.parent {
  width: 10px;
  height: 10px;
  background: var(--cyan);
}

.pack-manifest-id {
  color: rgba(255,255,255,0.3);
  transition: color 0.3s;
}

.pack-manifest-id.active {
  color: white;
}

.pack-manifest-children {
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.08);
  margin-left: 4px;
}

.pack-manifest-child {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  padding: 4px 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

.pack-manifest-child.visible {
  opacity: 1;
  transform: translateY(0);
}

.pack-manifest-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-align: center;
  transition: color 0.3s;
}

.pack-manifest-footer.complete {
  color: var(--cyan);
}

/* ── PLATFORM — LIGHT ── */
.platform-section {
  background: var(--bg);
  padding: 5rem clamp(1.5rem, 6vw, 7rem);
}

.platform-inner {
  max-width: none;
  margin: 0 auto;
}

.platform-intro {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 3rem;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.platform-item {
  background: linear-gradient(150deg, #16222e 0%, #0f1923 100%);
  border: 0.5px solid rgba(41,171,226,0.14);
  border-radius: 14px;
  padding: 1.6rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.platform-item:hover {
  transform: translateY(-2px);
  border-color: rgba(41,171,226,0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.platform-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}

.platform-item-text {
  flex: 1;
  min-width: 0;
}

.platform-icon {
  width: 76px;
  height: 76px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(41,171,226,0.12);
  border: 0.5px solid rgba(41,171,226,0.25);
}

.platform-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.platform-item:hover .platform-icon {
  background: rgba(41,171,226,0.2);
  border-color: rgba(41,171,226,0.5);
}

/* ── Per-tile signature icon animations ── */
/* shared scan line (QR + fingerprint) */
.icn-scan {
  stroke: #7ad2ff;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 2px rgba(120,210,255,0.95));
}
.icn-scan-qr { animation: icnScanQr 3s linear infinite; }
.icn-scan-fp { animation: icnScanFp 3.4s linear infinite; }
@keyframes icnScanQr {
  0%   { transform: translateY(0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}
@keyframes icnScanFp {
  0%   { transform: translateY(0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(18px); opacity: 0; }
}

/* AI — spark twinkle */
.icn-ai-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: icnSpark 3.5s ease-in-out infinite;
}
@keyframes icnSpark {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1.05); opacity: 1; }
}

/* Focus — lenses pull focus */
.icn-lens {
  transform-box: fill-box;
  transform-origin: center;
  animation: icnLens 4s ease-in-out infinite;
}
.icn-lens2 { animation-delay: 0.4s; }
@keyframes icnLens {
  0%, 100% { transform: scale(0.88); }
  50%      { transform: scale(1); }
}

/* Helm — wheel turns */
.icn-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: icnSpin 14s linear infinite;
}
@keyframes icnSpin { to { transform: rotate(360deg); } }

/* Clipboard — check draws itself */
.icn-check {
  stroke-dasharray: 9;
  animation: icnCheck 5s ease-in-out infinite;
}
@keyframes icnCheck {
  0%   { stroke-dashoffset: 9; opacity: 0; }
  14%  { opacity: 1; }
  42%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Layers — breathe apart */
.icn-layer-top { animation: icnLayerTop 5s ease-in-out infinite; }
.icn-layer-bot { animation: icnLayerBot 5s ease-in-out infinite; }
@keyframes icnLayerTop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.8px); }
}
@keyframes icnLayerBot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2.8px); }
}

/* Toolbox — lid hinges open */
.icn-lid {
  transform-box: fill-box;
  transform-origin: left bottom;
  animation: icnLidOpen 4.5s ease-in-out infinite;
}
@keyframes icnLidOpen {
  0%, 35%  { transform: rotate(0deg); }
  55%, 80% { transform: rotate(-34deg); }
  100%     { transform: rotate(0deg); }
}

/* Reports — live equalizer */
.icn-bar { stroke-width: 1.8; }
.icn-bar1 { stroke-dasharray: 3; animation: icnBar1 1.6s ease-in-out infinite; }
.icn-bar2 { stroke-dasharray: 5; animation: icnBar2 2.1s ease-in-out infinite; }
.icn-bar3 { stroke-dasharray: 2; animation: icnBar3 1.3s ease-in-out infinite; }
@keyframes icnBar1 { 0%, 100% { stroke-dashoffset: 1.5; } 50% { stroke-dashoffset: 0; } }
@keyframes icnBar2 { 0%, 100% { stroke-dashoffset: 3; }   50% { stroke-dashoffset: 0.5; } }
@keyframes icnBar3 { 0%, 100% { stroke-dashoffset: 1; }   50% { stroke-dashoffset: 0; } }

/* Theming — roller travels up & down (rigid with handle), leaving a fading paint trail */
.icn-paint-rig { animation: icnRollMove 2.8s ease-in-out infinite; }
.icn-roller { animation: icnHue 2.8s ease-in-out infinite; }
.icn-paint-trail {
  fill: var(--cyan);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: top;
  animation: icnPaintTrail 2.8s ease-in-out infinite;
}
@keyframes icnRollMove {
  0%   { transform: translateY(-2.6px); }
  45%  { transform: translateY(2.6px); }
  100% { transform: translateY(-2.6px); }
}
@keyframes icnPaintTrail {
  0%   { opacity: 0;    transform: scaleY(0); }
  30%  { opacity: 0.5;  transform: scaleY(1); }
  70%  { opacity: 0.16; transform: scaleY(1); }
  100% { opacity: 0;    transform: scaleY(1); }
}
@keyframes icnHue {
  0%, 100% { stroke: var(--cyan); }
  50%      { stroke: #9be7ff; }
}

/* Session security — shackle clicks open and locks */
.icn-shackle { animation: icnLock 5s ease-in-out infinite; }
@keyframes icnLock {
  0%, 55%  { transform: translateY(0); }
  70%, 85% { transform: translateY(-2px); }
  100%     { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .platform-icon svg * { animation: none !important; }
  .icn-scan { opacity: 0; }
  .icn-check, .icn-bar1, .icn-bar2, .icn-bar3 { stroke-dashoffset: 0; }
  .icn-ai-spark { opacity: 1; transform: none; }
  .icn-lens { transform: none; }
}

.platform-item h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 3px;
}

.platform-tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}

.platform-item p {
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  line-height: 1.65;
}

/* ── MODULES — DARK ── */
.modules-section {
  padding: 5rem 2rem;
  background: var(--dark);
}

.modules-section .section-label { color: rgba(41,171,226,0.8); }
.modules-section h2 { color: white; }
.modules-section .section-intro { color: rgba(255,255,255,0.6); }

.modules-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 2.5rem;
}

.pillar-card {
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1.75rem;
  background: var(--dark-surface);
}

.pillar-card.featured { border: 1.5px solid var(--cyan); }

.pillar-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

.pillar-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
  color: white;
}

.pillar-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  margin-bottom: 1.25rem;
}

.pillar-features { list-style: none; }

.pillar-features li {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding: 7px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pillar-features li:last-child { border-bottom: none; }

/* ── ROADMAP ── */
.roadmap-strip {
  background: var(--dark-surface);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 2rem 2.5rem;
}

.roadmap-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}

.roadmap-intro {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
  max-width: 560px;
}

.roadmap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.roadmap-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dark-mid);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

.roadmap-soon {
  font-size: 10px;
  font-weight: 500;
  color: var(--cyan-dark);
  background: var(--cyan-light);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

.roadmap-soon--near-term {
  color: #0f6e56;
  background: #e1f5ee;
}

.roadmap-soon--medium-term {
  color: var(--cyan-dark);
  background: var(--cyan-light);
}

.roadmap-soon--future {
  color: #5a6a78;
  background: #f0f2f4;
}

/* ── PLATFORM FEATURED ITEM ── */
.platform-item--featured {
  background: var(--dark-mid) !important;
  border: 0.5px solid rgba(41,171,226,0.3) !important;
  position: relative;
}

.platform-item-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(41,171,226,0.12);
  border: 0.5px solid rgba(41,171,226,0.3);
  border-radius: 100px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

/* ── THE LIGHTHOUSE — single tile, figure right, beam sweeps left onto the title ── */
.platform-item--lighthouse {
  background: linear-gradient(135deg, #16222e 0%, #0c141d 100%) !important;
  border: 0.5px solid rgba(41,171,226,0.32) !important;
  position: relative;
  overflow: hidden;
}

.platform-item--lighthouse .platform-item-text {
  position: relative;
  z-index: 2;
}

.lighthouse-figure {
  position: relative;
  flex: none;
  align-self: center;
  width: 52px;
  overflow: visible;
}

.lighthouse-svg {
  width: 52px;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

/* the beam — cone from the lantern, sweeping left across the title */
.lighthouse-beam {
  position: absolute;
  top: 17px;
  right: 26px;
  width: 230px;
  height: 130px;
  margin-top: -65px;
  background: linear-gradient(270deg,
    rgba(255,243,196,0.55) 0%,
    rgba(120,210,255,0.22) 40%,
    rgba(41,171,226,0) 100%);
  clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
  transform-origin: 100% 50%;
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: lhBeamSweep 6s ease-in-out infinite;
}

.lighthouse-name {
  font-size: 16px;
  animation: lhTextGlow 6s ease-in-out infinite;
}

.lh-glow {
  transform-origin: center;
  animation: lhPulse 6s ease-in-out infinite;
}

@keyframes lhBeamSweep {
  0%, 100% { transform: rotate(-7deg); opacity: 0.35; }
  50%      { transform: rotate(9deg);  opacity: 0.85; }
}

@keyframes lhTextGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(120,210,255,0); }
  50%      { text-shadow: 0 0 18px rgba(120,210,255,0.85), 0 0 6px rgba(255,243,196,0.55); }
}

@keyframes lhPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lighthouse-beam,
  .lighthouse-name,
  .lh-glow { animation: none; }
  .lighthouse-beam { transform: rotate(1deg); opacity: 0.5; }
  .lighthouse-name { text-shadow: 0 0 14px rgba(120,210,255,0.6); }
  .lh-glow { opacity: 0.9; }
}

/* ── DIFFERENTIATOR SECTION ── */
.differentiator-section {
  padding: 5rem 2rem;
  background: var(--bg);
  border-top: 0.5px solid var(--border);
}

.differentiator-dark {
  background: var(--dark);
  border-top: none;
}

.differentiator-dark .section-label { color: rgba(41,171,226,0.8); }
.differentiator-dark h2 { color: white; }
.differentiator-dark .diff-body { color: rgba(255,255,255,0.6); font-weight: 400; }
.differentiator-dark .diff-card { background: var(--dark-surface); border-color: rgba(255,255,255,0.08); }
.differentiator-dark .diff-card h4 { color: white; }
.differentiator-dark .diff-card p { color: rgba(255,255,255,0.55); }
.differentiator-dark .diff-icon { background: rgba(41,171,226,0.12); }

/* ── SPLIT DARK ── */
.split-dark { background: var(--dark); }
.split-dark .section-label { color: rgba(41,171,226,0.8); }
.split-dark h2 { color: white; }
.split-dark .split-body { color: rgba(255,255,255,0.6); }
.split-dark .feature-list li { color: rgba(255,255,255,0.6); border-bottom-color: rgba(255,255,255,0.08); }

/* Crew section uses a portrait image — let the text column be the only
   thing that sets the height (no min-height gaps), and pin the image so
   it stretches to match the text instead of inflating the row. */
#crew .split-inner { min-height: 0; }
#crew .split-image { min-height: 0; }
#crew .split-image img { position: absolute; inset: 0; }

.differentiator-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5rem;
  align-items: start;
}

.diff-body {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-top: 0.75rem;
}

.diff-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.diff-card {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.diff-icon {
  width: 36px;
  height: 36px;
  background: var(--cyan-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
}

.diff-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diff-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.diff-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── INDUSTRIES ── */
.industries-section {
  padding: 5rem 2rem;
  border-top: 0.5px solid var(--border);
}

.industries-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.industries {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}

.industry-tag {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── REGISTER ── */
.register-section {
  background: var(--dark);
  padding: 5rem 2rem;
}

.register-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}

.register-text h2 { color: white; }

.register-body {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-top: 0.75rem;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

.optional {
  font-weight: 400;
  color: rgba(255,255,255,0.4);
}

.form-group input,
.form-group textarea {
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: white;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255,255,255,0.3);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--cyan);
  background: rgba(255,255,255,0.1);
}

.btn-submit {
  background: var(--cyan);
  color: white;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.2s, transform 0.15s;
  align-self: flex-start;
}

.btn-submit:hover { background: var(--cyan-dark); transform: translateY(-1px); }

/* ── FOOTER ── */
.site-footer {
  background: #0a1520;
  color: white;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
}

.footer-logo-img {
  height: 52px;
  width: auto;
  margin-bottom: 1.25rem;
  display: block;
}

.footer-company {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
}

.footer-address {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}

.footer-email {
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
}

.footer-email:hover { color: white; }

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-top: 0.25rem;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-heading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}

.footer-nav-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav-col a:hover { color: white; }

.footer-bottom {
  border-top: 0.5px solid rgba(255,255,255,0.08);
  padding: 1.25rem 2rem;
  max-width: 1080px;
  margin: 0 auto;
}

.footer-bottom span {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .intro-inner { grid-template-columns: 1fr; gap: 2rem; }
  .register-inner { grid-template-columns: 1fr; gap: 3rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 3rem; }
  .differentiator-inner { grid-template-columns: 1fr; gap: 3rem; }
  .diff-cards { grid-template-columns: 1fr 1fr; }

  .split-inner {
    grid-template-columns: 1fr;
    direction: ltr !important;
  }

  .split-reverse .split-inner {
    direction: ltr;
  }

  .split-text { padding: 3rem 1.5rem; }

  .split-image {
    min-height: 280px;
    order: -1;
  }

  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  nav { padding: 0 1rem; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 0.5px solid var(--border);
    padding: 0.5rem 1.5rem 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }

  .nav-links.open { display: flex; }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 0.5px solid var(--border);
    color: var(--text-secondary) !important;
    font-size: 15px;
  }

  .nav-links li:last-child a { border-bottom: none; }
  .nav-burger { display: flex; }

  .intro-strip { padding: 3rem 1rem; }
  .modules-section { padding: 3rem 1rem; }
  .platform-section { padding: 3rem 1rem; }
  .industries-section { padding: 3rem 1rem; }
  .register-section { padding: 3rem 1rem; }
  .footer-inner { padding: 3rem 1rem 2rem; }
  .differentiator-section { padding: 3rem 1rem; }
  .diff-cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   NETWORK MAPPING
   ══════════════════════════════════════════════ */
.netmap-section {
  padding: 5rem 2rem;
  background: var(--bg-secondary);
  border-top: 0.5px solid var(--border);
}

.netmap-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: start;
}

.netmap-body {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.netmap-features { margin-bottom: 1.75rem; }

.netmap-shot-link {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid var(--border-strong);
  background: #eef4f8;
  transition: transform 0.2s, box-shadow 0.2s;
}

.netmap-shot-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,25,35,0.12);
}

.netmap-shot {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.netmap-shot-cap {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--bg);
  border-top: 0.5px solid var(--border);
}

/* ── interactive canvas ── */
.netmap-demo-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.netmap-demo-hint {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.netmap-canvas {
  position: relative;
  height: 520px;
  border-radius: 16px;
  border: 0.5px solid var(--border-strong);
  overflow: hidden;
  background-color: #eef4f9;
  cursor: grab;
  box-shadow: inset 0 0 60px rgba(15,25,35,0.04);
  touch-action: none;
  outline: none;
}

.netmap-canvas.panning { cursor: grabbing; }
.netmap-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(41,171,226,0.4); }

.netmap-world {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.netmap-svg {
  position: absolute;
  top: -2500px; left: -2500px;
  width: 5000px; height: 5000px;
  pointer-events: none;
}

.netmap-grid line {
  stroke: rgba(41,108,150,0.16);
  stroke-width: 1;
}

.netmap-tile {
  fill: rgba(41,171,226,0.05);
  stroke: rgba(41,171,226,0.28);
  stroke-width: 1.25;
  transition: fill 0.15s;
}

.netmap-tile.active {
  fill: rgba(41,171,226,0.22);
  stroke: var(--cyan);
  stroke-width: 2;
}

.netmap-cable {
  stroke: var(--cyan);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.75;
}

.netmap-nodes {
  position: absolute;
  top: 0; left: 0;
}

.netmap-node {
  position: absolute;
  transform: translate(-50%, calc(-100% + 16px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.netmap-node.dragging { cursor: grabbing; z-index: 5; }

.netmap-node-icon {
  width: 88px;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  filter: drop-shadow(0 9px 9px rgba(15,25,35,0.2));
  transition: transform 0.12s ease;
}

.netmap-node:hover .netmap-node-icon,
.netmap-node.dragging .netmap-node-icon {
  transform: scale(1.07) translateY(-2px);
}

.netmap-node-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255,255,255,0.92);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15,25,35,0.08);
}

@keyframes netmapPop {
  0% { transform: translate(-50%, calc(-100% + 16px)) scale(0.4); opacity: 0; }
  100% { transform: translate(-50%, calc(-100% + 16px)) scale(1); opacity: 1; }
}
.netmap-node.pop { animation: netmapPop 0.35s ease-out; }

/* canvas chrome */
.netmap-toolbar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,0.94);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(15,25,35,0.1);
  backdrop-filter: blur(6px);
}

.netmap-tool {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.netmap-tool:hover { background: var(--cyan); color: #fff; }
.netmap-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.netmap-tool#netmapAdd { background: var(--cyan); color: #fff; }
.netmap-tool#netmapAdd:hover { background: var(--cyan-dark); }

.netmap-zoom {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.94);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 14px rgba(15,25,35,0.1);
}

.netmap-zbtn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.netmap-zbtn:hover { background: var(--cyan); color: #fff; }

.netmap-zlevel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 44px;
  text-align: center;
}

.netmap-breadcrumb {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.9);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}

.netmap-breadcrumb strong { color: var(--text-secondary); font-weight: 600; }

/* ══════════════════════════════════════════════
   INTEGRATION / ERM
   ══════════════════════════════════════════════ */
.integration-section {
  padding: 5rem 2rem;
  background: var(--bg);
  border-top: 0.5px solid var(--border);
}

.integration-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.integration-head { max-width: 680px; }

.integration-body {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-top: 0.5rem;
}

.integration-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 3rem 0;
  flex-wrap: wrap;
}

.int-node {
  flex: 1;
  min-width: 240px;
  max-width: 340px;
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  text-align: center;
}

.int-node-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.int-node-label sub { font-size: 0.62em; color: var(--cyan); top: 0.15em; position: relative; }

.int-node-sub {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.int-node-tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
}

.int-node--erm {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-strong);
}
.int-node--erm .int-node-label { color: var(--text-primary); }
.int-node--erm .int-node-sub { color: var(--text-muted); }
.int-node--erm .int-node-tag { background: var(--bg); border: 0.5px solid var(--border-strong); color: var(--text-secondary); }

.int-node--h2flow {
  background: linear-gradient(160deg, #1e2f3d, #0f1923);
  border: 1px solid rgba(41,171,226,0.4);
}
.int-node--h2flow .int-node-label { color: #fff; }
.int-node--h2flow .int-node-sub { color: var(--cyan); }
.int-node--h2flow .int-node-tag { background: rgba(41,171,226,0.14); border: 0.5px solid rgba(41,171,226,0.3); color: var(--cyan); }

.int-link {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}

.int-link-line {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 14px);
  opacity: 0.6;
}

.int-link-arrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
}
.int-link-arrow--up { color: var(--text-muted); }

.integration-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.int-card {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
}

.int-card-icon {
  width: 40px;
  height: 40px;
  background: var(--cyan-light);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.int-card-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--cyan); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.int-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  background: var(--cyan-light);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.int-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.int-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── coming-soon module card ── */
.pillar-card.coming-soon { border: 1px dashed rgba(41,171,226,0.45); background: var(--dark-mid); }

.pillar-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(41,171,226,0.14);
  border: 0.5px solid rgba(41,171,226,0.35);
  border-radius: 100px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* ── network mapping + integration responsive ── */
@media (max-width: 900px) {
  .netmap-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .netmap-canvas { height: 440px; }
  .integration-cards { grid-template-columns: 1fr; }
  .integration-diagram { flex-direction: column; }
  .int-link { flex-basis: auto; width: 2px; height: 70px; flex-direction: column; }
  .int-link-line { width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--cyan) 0 8px, transparent 8px 14px); }
}

@media (max-width: 700px) {
  .netmap-section { padding: 3rem 1rem; }
  .integration-section { padding: 3rem 1rem; }
  .netmap-canvas { height: 380px; }
  .netmap-breadcrumb { display: none; }
}

/* ══════════════════════════════════════════════
   PROCUREMENT SPOTLIGHT
   ══════════════════════════════════════════════ */
.pro-section {
  padding: 5rem 2rem;
  background: var(--bg);
  border-top: 0.5px solid var(--border);
}

.pro-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.pro-head { max-width: 740px; }

.pro-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pro-new::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(41,171,226,0.5);
  animation: proPulse 2s infinite;
}

@keyframes proPulse {
  0% { box-shadow: 0 0 0 0 rgba(41,171,226,0.45); }
  70% { box-shadow: 0 0 0 8px rgba(41,171,226,0); }
  100% { box-shadow: 0 0 0 0 rgba(41,171,226,0); }
}

.pro-body {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-top: 0.5rem;
}

/* ── process flow ── */
.pro-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 2.75rem 0 2rem;
}

.pro-step {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(150deg, #16222e 0%, #0f1923 100%);
  border: 0.5px solid rgba(41,171,226,0.14);
  border-radius: 12px;
  padding: 1.4rem 1.25rem;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.pro-step:hover {
  transform: translateY(-3px);
  border-color: rgba(41,171,226,0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.pro-step-num {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.pro-step h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.pro-step p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
}

.pro-flow-arrow {
  flex: 0 0 26px;
  align-self: center;
  display: flex;
  justify-content: center;
}

.pro-flow-arrow::after {
  content: '';
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  transform: rotate(45deg);
  opacity: 0.65;
}

/* ── highlights ── */
.pro-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pro-highlight {
  background: linear-gradient(150deg, #16222e 0%, #0f1923 100%);
  border: 0.5px solid rgba(41,171,226,0.14);
  border-radius: 14px;
  padding: 1.5rem;
  border-top: 2px solid var(--cyan);
}

.pro-highlight-icon {
  width: 40px;
  height: 40px;
  background: rgba(41,171,226,0.12);
  border: 0.5px solid rgba(41,171,226,0.25);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.pro-highlight-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--cyan);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.pro-highlight h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 7px;
}

.pro-highlight p {
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .pro-flow { flex-direction: column; gap: 0; }
  .pro-flow-arrow { flex-basis: 26px; padding: 7px 0; }
  .pro-flow-arrow::after { transform: rotate(135deg); }
  .pro-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .pro-section { padding: 3rem 1rem; }
}

/* ══════════════════════════════════════════════
   SECTION TONE ALTERNATION (dark / light)
   Overrides to maintain dark↔light rhythm:
   Network Mapping → dark · Integration → dark · Modules → light
   ══════════════════════════════════════════════ */

/* ── Network Mapping → DARK ── */
.netmap-section {
  background: var(--dark);
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
.netmap-section .section-label { color: rgba(41,171,226,0.9); }
.netmap-section h2 { color: #fff; }
.netmap-body { color: rgba(255,255,255,0.6); }
.netmap-section .feature-list li {
  color: rgba(255,255,255,0.65);
  border-bottom-color: rgba(255,255,255,0.08);
}
.netmap-demo-hint { color: rgba(255,255,255,0.5); }
.netmap-shot-link {
  background: var(--dark-surface);
  border-color: rgba(255,255,255,0.12);
}
.netmap-shot-cap {
  background: var(--dark-surface);
  color: rgba(255,255,255,0.6);
  border-top-color: rgba(255,255,255,0.08);
}

/* ── Integration → DARK ── */
.integration-section {
  background: var(--dark);
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
.integration-section .section-label { color: rgba(41,171,226,0.9); }
.integration-section h2 { color: #fff; }
.integration-body { color: rgba(255,255,255,0.6); }
.int-node--h2flow {
  box-shadow: 0 0 0 1px rgba(41,171,226,0.35), 0 18px 40px rgba(0,0,0,0.5), 0 8px 30px rgba(41,171,226,0.28);
}
/* light "ERM" + "H2Flow" nodes and white cards already read well on dark */

/* ── Modules → LIGHT ── */
.modules-section {
  background: var(--bg-secondary);
  border-top: 0.5px solid var(--border);
}
.modules-section .section-label { color: var(--cyan); }
.modules-section h2 { color: var(--text-primary); }
.modules-section .section-intro { color: var(--text-secondary); }
.pillar-card {
  background: var(--bg);
  border-color: var(--border);
}
.pillar-card.featured { border: 1.5px solid var(--cyan); }
.pillar-card h3 { color: var(--text-primary); }
.pillar-tagline { color: var(--text-muted); }
.pillar-features li {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}
.roadmap-strip {
  background: var(--bg);
  border-color: var(--border);
}
.roadmap-intro { color: var(--text-secondary); }
.roadmap-tag {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

/* ── network demo: connector tool state ── */
.netmap-tool.active { background: var(--cyan); color: #fff; }
.netmap-tool.active:hover { background: var(--cyan-dark); }
.netmap-canvas.connect-mode,
.netmap-canvas.connect-mode .netmap-node { cursor: crosshair; }

/* ── Configuration Tree interactive demo ───────────────────────────────── */
.ct-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #eef3f8 100%);
  min-height: 600px;
}
.ct-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  cursor: crosshair;
}
.ct-img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  height: auto;
  width: auto;
  border-radius: 10px;
  user-select: none;
  -webkit-user-drag: none;
}
.ct-hint {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.85);
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.ct-pin {
  position: absolute;
  transform: translate(-12px, -12px);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 3;
}
.ct-pin-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #29abe2;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.ct-pin-label {
  background: rgba(10,37,64,0.92);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid rgba(41,171,226,0.5);
}
.ct-addcard, .ct-tooltip {
  position: absolute;
  transform: translate(-50%, 14px);
  z-index: 5;
  width: 232px;
  max-width: 80vw;
}
.ct-addcard {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
  padding: 12px;
  text-align: left;
}
.ct-addcard-title { font-size: 0.75rem; font-weight: 700; color: #0a2540; margin-bottom: 8px; }
.ct-addcard-select, .ct-addcard-note {
  width: 100%; box-sizing: border-box;
  font-size: 0.78rem; font-family: inherit;
  padding: 7px 8px; border: 1px solid rgba(0,0,0,0.15);
  border-radius: 7px; color: #0a2540; background: #fff;
  margin-bottom: 8px;
}
.ct-addcard-note { resize: none; line-height: 1.35; }
.ct-addcard-row { display: flex; gap: 8px; justify-content: flex-end; }
.ct-addcard-add, .ct-addcard-cancel {
  font-size: 0.75rem; font-weight: 600; padding: 6px 12px;
  border-radius: 7px; cursor: pointer; border: none; font-family: inherit;
}
.ct-addcard-add { background: #29abe2; color: #fff; }
.ct-addcard-cancel { background: transparent; color: #64748b; border: 1px solid rgba(0,0,0,0.15); }
.ct-tooltip {
  background: #0a2540;
  color: #fff;
  border: 1px solid rgba(41,171,226,0.5);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.4);
  padding: 10px 12px;
  text-align: left;
}
.ct-tooltip-title { font-size: 0.78rem; font-weight: 700; margin-bottom: 4px; }
.ct-tooltip-body { font-size: 0.72rem; line-height: 1.45; color: rgba(255,255,255,0.8); }
.ct-tooltip-remove {
  margin-top: 8px; font-size: 0.68rem; font-weight: 600;
  background: transparent; color: #f7a1a1; border: 1px solid rgba(239,68,68,0.4);
  border-radius: 6px; padding: 4px 9px; cursor: pointer; font-family: inherit;
}
.ct-reset {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  font-size: 0.68rem; font-weight: 600; font-family: inherit;
  background: rgba(10,37,64,0.06); color: #0a2540;
  border: 1px solid rgba(10,37,64,0.18);
  border-radius: 7px; padding: 5px 11px; cursor: pointer;
}
.ct-reset:hover { background: rgba(10,37,64,0.12); }

/* ═══════════════════════════════════════════════════════════════════════
   DEEP WATCH homepage (Option A rebuild) — all classes prefixed dw-/kp-.
   The legacy styles above still serve /demos/. nav.dw-nav deliberately
   out-specifies the global `nav` rules.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --dw-bg: #0b1017;
  --dw-bg2: #0a1219;
  --dw-panel: #101a24;
  --dw-card: #111b26;
  --dw-ink: #ffffff;
  --dw-body: #aebccb;
  --dw-dim: #9fb0bf;
  --dw-faint: #8fa0af;
  --dw-mut: #7f92a1;
  --dw-sub: #5f7181;
  --dw-line: rgba(255,255,255,.06);
  --dw-cyan: #29ABE2;
}

/* ── nav ── */
nav.dw-nav {
  position: sticky; top: 0; left: auto; right: auto; z-index: 100;
  height: auto; padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(11,16,23,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dw-line);
}
.dw-nav-brand { display: flex; align-items: baseline; gap: 11px; }
.dw-logo { font-weight: 800; font-size: 23px; letter-spacing: -.5px; color: var(--dw-ink); }
.dw-logo sub { color: var(--dw-cyan); font-size: .62em; }
.dw-logo-tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dw-sub); }
.dw-nav-links { display: flex; align-items: center; gap: 26px; font-size: 13px; }
.dw-nav-links a { color: var(--dw-dim); text-decoration: none; transition: color .15s; }
.dw-nav-links a:hover { color: var(--dw-ink); }
.dw-nav-links a.dw-nav-cta { background: var(--dw-cyan); color: #fff; padding: 9px 18px; border-radius: 7px; font-weight: 600; }
.dw-nav-links a.dw-nav-cta:hover { background: #1a8abf; }

/* ── hero ── */
.dw-hero { position: relative; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 90px 60px; background: var(--dw-bg); }
.dw-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dw-hero-shade { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(7,11,17,.94) 0%, rgba(7,11,17,.78) 42%, rgba(7,11,17,.34) 100%); }
.dw-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(41,171,226,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(41,171,226,.06) 1px, transparent 1px); background-size: 56px 56px; }
.dw-hero-content { position: relative; max-width: 660px; }
.dw-pill { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dw-cyan); border: 1px solid rgba(41,171,226,.35); border-radius: 100px; padding: 6px 15px; margin-bottom: 26px; }
.dw-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dw-cyan); box-shadow: 0 0 10px var(--dw-cyan); display: inline-block; }
.dw-hero-logo { font-size: clamp(68px, 10vw, 122px); line-height: .92; font-weight: 900; letter-spacing: -4px; margin: 0 0 16px; color: var(--dw-ink); text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.dw-hero-logo sub { color: var(--dw-cyan); font-size: .52em; vertical-align: baseline; }
.dw-hero-tagline { font-size: clamp(13px, 1.6vw, 17px); font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--dw-cyan); margin: 0 0 30px; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.dw-hero p { font-size: 19px; line-height: 1.6; color: #c2d0dc; font-weight: 300; max-width: 560px; margin: 0 0 34px; }
.dw-hero p.dw-hero-sub { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; font-weight: 600; letter-spacing: -.5px; color: var(--dw-ink); max-width: 620px; margin: 0 0 14px; }
.dw-hero p.dw-hero-sub span { color: var(--dw-cyan); }
.dw-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.dw-btn-primary { background: var(--dw-cyan); color: #fff; font-weight: 600; font-size: 15px; padding: 15px 30px; border-radius: 9px; text-decoration: none; border: none; cursor: pointer; font-family: inherit; display: inline-block; }
.dw-btn-primary:hover { background: #1a8abf; }
.dw-btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 500; font-size: 15px; padding: 15px 30px; border-radius: 9px; text-decoration: none; display: inline-block; }
.dw-btn-ghost:hover { background: rgba(255,255,255,.14); }

/* ── stats ── */
.dw-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--dw-line); border-bottom: 1px solid var(--dw-line); background: var(--dw-bg); }
.dw-stat { padding: 30px 34px; border-right: 1px solid var(--dw-line); }
.dw-stat:last-child { border-right: none; }
.dw-stat-num { font-size: 36px; font-weight: 800; color: var(--dw-cyan); letter-spacing: -1px; line-height: 1; }
.dw-stat-label { font-size: 11px; letter-spacing: .08em; color: var(--dw-mut); margin-top: 8px; text-transform: uppercase; }

/* ── shared section bits ── */
.dw-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dw-cyan); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.dw-section-intro { font-size: 16px; color: var(--dw-dim); font-weight: 300; max-width: 560px; margin: 0 0 40px; line-height: 1.7; }

/* ── about ── */
.dw-about { padding: 76px 60px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; background: var(--dw-bg); }
.dw-about h2 { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 0; color: var(--dw-ink); }
.dw-about p { font-size: 17px; line-height: 1.75; color: var(--dw-body); font-weight: 300; margin: 0; }

/* ── AI triage centrepiece ── */
.dw-triage { position: relative; padding: 80px 60px; background: linear-gradient(180deg, #0d1520 0%, #0a1219 100%); border-top: 1px solid rgba(41,171,226,.18); overflow: hidden; }
.dw-triage-glow { position: absolute; top: -100px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(41,171,226,.14), transparent 70%); }
.dw-triage-head { position: relative; max-width: 720px; }
.dw-triage h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -1.4px; line-height: 1.08; margin: 0 0 20px; color: var(--dw-ink); }
.dw-triage-head p { font-size: 17px; line-height: 1.72; color: #b0bfce; font-weight: 300; margin: 0 0 8px; }
.dw-triage-head strong { color: #fff; font-weight: 600; }

.dw-integrity { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.dw-int-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 20px 22px; }
.dw-int-title { font-weight: 700; font-size: 15px; margin-bottom: 5px; color: #fff; }
.dw-int-body { font-size: 13px; color: #93a3b2; line-height: 1.55; }
.dw-privacy { font-size: 13px; line-height: 1.6; color: var(--dw-faint); margin: 18px 0 0; max-width: 760px; position: relative; }
.dw-privacy strong { color: #cfe0ec; font-weight: 600; }

/* ── knowledge pool ── */
.kp { margin-top: 44px; position: relative; }
.kp-steps { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.kp-step { flex: 1 1 0; min-width: 150px; border-radius: 11px; padding: 12px 15px; transition: all .5s ease; background: rgba(255,255,255,.03); border: 1px solid rgba(41,171,226,.24); opacity: .62; }
.kp-step-active { background: rgba(41,171,226,.14); border: 1px solid var(--dw-cyan); box-shadow: 0 6px 20px rgba(41,171,226,.18); opacity: 1; }
.kp-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.kp-step-num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; transition: all .5s ease; background: rgba(41,171,226,.24); color: var(--dw-ink); }
.kp-step-active .kp-step-num { background: var(--dw-cyan); color: #fff; }
.kp-step-title { font-size: 13px; font-weight: 700; letter-spacing: -.2px; color: var(--dw-ink); }
.kp-step-body { font-size: 11.5px; line-height: 1.4; color: #93a3b2; padding-left: 28px; }

.kp-scene { position: relative; width: 100%; height: 430px; border-radius: 16px; background: rgba(255,255,255,.02); border: 1px solid rgba(41,171,226,.24); overflow: hidden; }
.kp-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.kp-guide { stroke: var(--dw-cyan); stroke-width: 1.4; opacity: .22; }
.kp-feed { stroke: var(--dw-cyan); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: .7; animation: kpFlow 1.4s linear infinite; }
.kp-feed-t { stroke: var(--dw-cyan); stroke-width: 1.4; stroke-dasharray: 4 7; opacity: .55; animation: kpFlow 1.5s linear infinite; }
.kp-f2 { animation-duration: 1.6s; }
.kp-f3 { stroke-width: 2; opacity: .85; animation-duration: 1.1s; }
.kp-f5 { animation-duration: 1.8s; }
.kp-f6 { animation-duration: 1.3s; }
.kp-f7 { animation-duration: 1.7s; }
.kp-f8 { animation-duration: 1.45s; }
.kp-f9 { animation-duration: 1.9s; }

.kp-riser { position: absolute; top: 86%; }
.kp-riser span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--dw-cyan); animation: kpRise 2.4s ease-in infinite; }
.kp-token { position: absolute; top: 30%; transform: translate(-50%,-50%); animation: kpToken 6s ease-in-out infinite; z-index: 6; }
.kp-token div { width: 16px; height: 16px; border-radius: 50%; background: var(--dw-cyan); box-shadow: 0 0 16px 4px var(--dw-cyan); }

.kp-node { position: absolute; text-align: center; z-index: 4; }
.kp-vessel { left: 9%; top: 30%; transform: translate(-50%,-50%); }
.kp-node-box { width: 58px; height: 58px; border-radius: 14px; background: #132330; border: 1px solid rgba(41,171,226,.24); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.kp-node-title { font-size: 11px; font-weight: 700; margin-top: 9px; color: var(--dw-ink); }
.kp-node-sub { font-size: 10px; color: #93a3b2; }

.kp-chip { position: absolute; transform: translate(-50%,-50%); z-index: 4; display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.045); border: 1px solid rgba(41,171,226,.24); border-radius: 9px; padding: 7px 12px; }
.kp-chip span { font-size: 11px; font-weight: 600; color: var(--dw-ink); }
.kp-chip-manuals { left: 34%; top: 14%; animation: kpScan 2.8s ease-in-out infinite; }
.kp-chip-faults { left: 66%; top: 14%; animation: kpScan 3.2s ease-in-out infinite; }

.kp-bosun { position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%); text-align: center; z-index: 5; }
.kp-bosun-ring { position: absolute; left: 50%; top: 42px; width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--dw-cyan); animation: kpPulseRing 2.6s ease-out infinite; }
.kp-bosun-orb { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #7fd4ff, #29ABE2 55%, #127bad); display: flex; align-items: center; justify-content: center; margin: 0 auto; animation: kpGlow 2.6s ease-in-out infinite; }

.kp-answer { position: absolute; left: 90%; top: 30%; transform: translate(-50%,-50%); z-index: 4; width: 150px; }
.kp-answer-card { background: rgba(255,255,255,.045); border: 1px solid rgba(41,171,226,.24); border-radius: 12px; padding: 13px 14px; }
.kp-answer-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12px; font-weight: 800; color: var(--dw-ink); }
.kp-answer-tick { width: 18px; height: 18px; border-radius: 50%; background: #1f9d57; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.kp-answer-body { font-size: 10.5px; color: #93a3b2; line-height: 1.45; }
.kp-answer-body strong { color: var(--dw-cyan); font-weight: 700; }
.kp-answer-time { margin-top: 9px; text-align: center; }
.kp-answer-secs { font-size: 19px; font-weight: 900; color: var(--dw-cyan); letter-spacing: -.5px; }

.kp-pool { position: absolute; left: 50%; top: 64%; transform: translate(-50%,-50%); z-index: 5; text-align: center; }
.kp-pool-card { background: linear-gradient(135deg, #29ABE2, #127bad); border-radius: 14px; padding: 12px 24px; box-shadow: 0 8px 30px rgba(41,171,226,.4); color: #fff; }
.kp-pool-title { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.kp-pool-num { font-size: 22px; font-weight: 900; letter-spacing: -.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kp-pool-sub { font-size: 9.5px; opacity: .85; letter-spacing: .04em; }

.kp-tenants { position: absolute; left: 0; top: 86%; width: 100%; z-index: 4; }
.kp-tenant { position: absolute; transform: translate(-50%,-50%); animation: kpBob 3s ease-in-out infinite; width: 26px; height: 26px; border-radius: 8px; background: #132330; border: 1px solid rgba(41,171,226,.24); }
.kp-tenants-caption { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); font-size: 10px; color: #93a3b2; white-space: nowrap; }

@keyframes kpFlow { to { stroke-dashoffset: -24; } }
@keyframes kpBob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-58%); } }
@keyframes kpGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(41,171,226,0), 0 0 26px 4px rgba(41,171,226,.35); } 50% { box-shadow: 0 0 0 8px rgba(41,171,226,.08), 0 0 44px 10px rgba(41,171,226,.6); } }
@keyframes kpToken {
  0% { left: 9%; opacity: 0; }
  5% { left: 9%; opacity: 1; }
  24% { left: 50%; opacity: 1; }
  52% { left: 50%; opacity: 1; }
  70% { left: 90%; opacity: 1; }
  86% { left: 90%; opacity: 1; }
  93% { left: 90%; opacity: 0; }
  100% { left: 9%; opacity: 0; }
}
@keyframes kpRise {
  0% { transform: translate(-50%,0) scale(.6); opacity: 0; }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%,-96px) scale(1); opacity: 0; }
}
@keyframes kpPulseRing { 0% { transform: translate(-50%,-50%) scale(.7); opacity: .6; } 100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; } }
@keyframes kpScan { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ── ROI ── */
.dw-roi { margin-top: 40px; background: linear-gradient(135deg, #0f1e2b, #0a141d); border: 1px solid rgba(41,171,226,.32); border-radius: 18px; padding: 34px 38px; position: relative; }
.dw-roi-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.dw-roi-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--dw-ink); }
.dw-roi-note { font-size: 12px; color: var(--dw-mut); max-width: 230px; line-height: 1.5; }
.dw-roi-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; margin-top: 20px; }
.dw-roi-sliders { display: flex; flex-direction: column; gap: 22px; }
.dw-roi-caption { display: flex; justify-content: space-between; font-size: 13px; color: #c2d0dc; margin-bottom: 8px; }
.dw-roi-val { color: var(--dw-cyan); font-weight: 700; }
.dw-roi-row input[type="range"] { width: 100%; accent-color: var(--dw-cyan); }
.dw-roi-result { text-align: center; border-left: 1px solid rgba(255,255,255,.08); padding-left: 34px; }
.dw-roi-result-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dw-mut); margin-bottom: 10px; }
.dw-roi-annual { font-size: 52px; font-weight: 900; letter-spacing: -2px; color: var(--dw-cyan); line-height: 1; }
.dw-roi-days { font-size: 13px; color: #93a3b2; margin-top: 14px; line-height: 1.5; }

/* ── platform ── */
.dw-platform { padding: 76px 60px; background: var(--dw-bg); }
.dw-platform h2, .dw-modules h2 { font-size: 38px; font-weight: 800; letter-spacing: -1px; margin: 0 0 8px; color: var(--dw-ink); }
.dw-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dw-plat-card { background: var(--dw-panel); border: 1px solid rgba(41,171,226,.12); border-radius: 14px; padding: 24px; }
.dw-plat-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dw-cyan); margin-bottom: 12px; }
.dw-plat-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.dw-plat-body { font-size: 13px; color: var(--dw-faint); line-height: 1.6; }

/* ── netmap split ── */
.dw-netmap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--dw-panel); }
.dw-netmap-imgwrap { padding: 56px 44px; }
.dw-netmap-frame { border-radius: 14px; overflow: hidden; border: 1px solid rgba(41,171,226,.22); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.dw-netmap-frame img { width: 100%; display: block; }
.dw-netmap-text { padding: 56px 50px; }
.dw-netmap-text h2 { font-size: 32px; font-weight: 800; letter-spacing: -.8px; line-height: 1.12; margin: 0 0 16px; color: var(--dw-ink); }
.dw-netmap-text p { font-size: 15px; color: var(--dw-dim); font-weight: 300; line-height: 1.7; margin: 0 0 20px; }
.dw-features { display: flex; flex-direction: column; gap: 9px; }
.dw-feature { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--dw-body); }
.dw-check { width: 16px; height: 16px; border-radius: 50%; background: var(--dw-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 10px; font-weight: 800; }
.dw-demo-link { margin-top: 22px; font-size: 14px; padding: 12px 22px; }

/* ── modules ── */
.dw-modules { padding: 76px 60px; background: var(--dw-bg2); }
.dw-modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dw-mod-card { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 26px; background: var(--dw-card); }
.dw-mod-num { font-size: 11px; letter-spacing: .06em; color: var(--dw-cyan); margin-bottom: 14px; }
.dw-mod-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.dw-mod-tag { font-size: 13px; font-style: italic; color: #6f8393; margin-bottom: 18px; }
.dw-mod-features { display: flex; flex-direction: column; gap: 8px; }
.dw-mod-features div { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dw-dim); padding-bottom: 8px; border-bottom: 1px solid var(--dw-line); }
.dw-mod-features div::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--dw-cyan); flex-shrink: 0; }

/* ── register ── */
.dw-register { padding: 80px 60px; background: linear-gradient(135deg, #0f1e2b, #0a141d); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.dw-register h2 { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.08; margin: 0 0 18px; color: var(--dw-ink); }
.dw-register-text p { font-size: 16px; color: var(--dw-dim); font-weight: 300; line-height: 1.75; margin: 0; }
.dw-form { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.dw-form input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 13px 15px; color: #fff; font-size: 14px; font-family: 'Inter', sans-serif; }
.dw-form input::placeholder { color: #7f92a1; }
.dw-form input:focus { outline: none; border-color: rgba(41,171,226,.6); }
.dw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── footer ── */
.dw-footer { padding: 44px 60px; background: #070b11; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--dw-line); flex-wrap: wrap; gap: 16px; }
.dw-footer-company { font-size: 12px; color: var(--dw-sub); margin-top: 6px; }
.dw-footer-email { font-size: 12px; color: var(--dw-cyan); text-decoration: none; }

/* ── responsive ── */
@media (max-width: 980px) {
  nav.dw-nav { padding: 14px 20px; }
  .dw-nav-links { gap: 14px; }
  .dw-nav-links a:not(.dw-nav-cta) { display: none; }
  .dw-hero, .dw-about, .dw-triage, .dw-platform, .dw-modules, .dw-register { padding-left: 22px; padding-right: 22px; }
  .dw-about { grid-template-columns: 1fr; gap: 20px; padding-top: 54px; padding-bottom: 54px; }
  .dw-stats { grid-template-columns: repeat(2, 1fr); }
  .dw-stat:nth-child(2n) { border-right: none; }
  .dw-integrity, .dw-platform-grid, .dw-modules-grid { grid-template-columns: 1fr; }
  .dw-roi { padding: 24px 20px; }
  .dw-roi-grid { grid-template-columns: 1fr; }
  .dw-roi-result { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; }
  .dw-netmap { grid-template-columns: 1fr; }
  .dw-netmap-imgwrap { padding: 34px 22px 0; }
  .dw-netmap-text { padding: 28px 22px 44px; }
  .dw-register { grid-template-columns: 1fr; gap: 30px; }
  .kp-scene { display: none; } /* fixed-geometry scene does not scale below tablet */
  .kp-steps { flex-direction: column; }
  .kp-step { opacity: 1; }
}

/* demos page intro strip */
.demos-intro { background: var(--dw-bg); padding: 60px 60px 50px; }
.demos-intro h1 { color: var(--dw-ink); font-size: 40px; font-weight: 800; letter-spacing: -1px; margin: 0 0 10px; }
.demos-intro p { color: var(--dw-dim); font-size: 16px; font-weight: 300; max-width: 560px; margin: 0; }
@media (max-width: 980px) { .demos-intro { padding: 40px 22px 34px; } }

/* ── Knowledge pool v2 — split-screen opted-in / opted-out comparison ── */
.kp2 { margin-top: 44px; position: relative; }
.kp2-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.kp2-eyebrow { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--dw-cyan); font-weight: 700; margin-bottom: 6px; }
.kp2-title { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--dw-ink); }
.kp2-subtitle { font-size: 12px; color: #93a3b2; font-weight: 500; }
.kp2-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kp2-tag-in, .kp2-tag-out { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; border-radius: 100px; padding: 5px 13px; white-space: nowrap; }
.kp2-tag-in { color: var(--dw-cyan); background: rgba(41,171,226,.1); border: 1px solid rgba(41,171,226,.4); }
.kp2-tag-out { color: #E0564A; background: rgba(224,86,74,.08); border: 1px solid rgba(224,86,74,.4); }
.kp2-drag-hint { font-size: 11.5px; color: #93a3b2; font-weight: 600; text-align: center; }

.kp2-stage { position: relative; }
.kp2-layer { position: relative; z-index: 0; display: grid; grid-template-columns: 1.02fr .98fr; gap: 20px; align-items: stretch; }
.kp2-clip { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 0 0 50%); }

.kp2-chatpane { background: #101a26; border: 1px solid rgba(41,171,226,.24); border-radius: 16px; padding: 20px 22px; height: 690px; overflow: hidden; display: flex; flex-direction: column; }
.kp2-chathead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(41,171,226,.24); }
.kp2-live { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: var(--dw-ink); }
.kp2-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0564a; animation: kp2Blink 1.6s ease-in-out infinite; }
.kp2-chathead-right { display: flex; align-items: center; gap: 8px; }
.kp2-poolbadge-in { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 4px 10px; border-radius: 100px; background: rgba(41,171,226,.14); border: 1px solid rgba(41,171,226,.4); color: var(--dw-cyan); white-space: nowrap; }
.kp2-poolbadge-out { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 4px 10px; border-radius: 100px; background: rgba(224,86,74,.1); border: 1px solid rgba(224,86,74,.4); color: #E0564A; white-space: nowrap; }
.kp2-clock { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kp2-clock-in { color: var(--dw-cyan); }
.kp2-clock-out { color: #E0564A; }

.kp2-msgs { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; flex: 1; }
.kp2-msg { border-radius: 12px; padding: 11px 14px; transition: opacity .5s ease, transform .5s ease; opacity: 0; transform: translateY(10px); background: rgba(255,255,255,.045); border: 1px solid rgba(41,171,226,.24); }
.kp2-msg-shown { opacity: 1; transform: translateY(0); }
.kp2-msg-match { background: rgba(41,171,226,.09); border: 1px solid rgba(41,171,226,.45); }
.kp2-msg-resolved { background: rgba(31,157,87,.08); border: 1px solid rgba(31,157,87,.4); }
.kp2-msg-nomatch { background: rgba(232,163,61,.07); border: 1px solid rgba(232,163,61,.4); }
.kp2-msg-escalated { background: rgba(224,86,74,.06); border: 1px solid rgba(224,86,74,.35); }
.kp2-msg-system { background: transparent; border: 1px dashed rgba(41,171,226,.24); }
.kp2-msg-system.kp2-msg-shown { opacity: .7; }
.kp2-msg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.kp2-msg-label { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; color: #93a3b2; }
.kp2-msg-time { font-size: 10.5px; color: #93a3b2; font-variant-numeric: tabular-nums; }
.kp2-msg-title { font-size: 14px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 3px; color: var(--dw-ink); }
.kp2-msg-body { font-size: 12px; color: #93a3b2; line-height: 1.5; }
.kp2-msg-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 4px 10px; white-space: nowrap; background: rgba(41,171,226,.14); border: 1px solid rgba(41,171,226,.4); color: var(--dw-cyan); }
.kp2-cyan { color: var(--dw-cyan) !important; }
.kp2-green { color: #1f9d57 !important; }
.kp2-amber { color: #E8A33D !important; }
.kp2-red { color: #E0564A !important; }
.kp2-grey { color: #8a9aaa !important; }

.kp2-side { display: flex; flex-direction: column; gap: 14px; height: 690px; }
.kp2-poolscene { position: relative; background: #101a26; border: 1px solid rgba(41,171,226,.24); border-radius: 16px; flex: 1; min-height: 0; overflow: hidden; }
.kp2-callout { position: absolute; top: 14px; left: 16px; z-index: 8; display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: -.2px; padding: 7px 13px; border-radius: 10px; white-space: nowrap; color: var(--dw-ink); }
.kp2-callout-in { background: rgba(41,171,226,.12); border: 1px solid rgba(41,171,226,.45); }
.kp2-callout-out { background: rgba(224,86,74,.09); border: 1px solid rgba(224,86,74,.4); }
.kp2-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kp2-line-main { stroke: var(--dw-cyan); stroke-width: .6; stroke-dasharray: 2.2 2.8; animation: kp2Flow 1.2s linear infinite; opacity: .8; }
.kp2-line-t { stroke: var(--dw-cyan); stroke-width: .45; stroke-dasharray: 1.8 2.6; opacity: .5; animation: kp2Flow 1.6s linear infinite; }
.kp2-lt2 { animation-duration: 1.4s; } .kp2-lt3 { animation-duration: 1.8s; }
.kp2-lt4 { animation-duration: 1.3s; } .kp2-lt5 { animation-duration: 1.7s; }
.kp2-lt6 { animation-duration: 1.5s; } .kp2-lt7 { animation-duration: 1.9s; }
.kp2-lt8 { animation-duration: 1.45s; }
.kp2-line-off { stroke: var(--dw-cyan); stroke-width: .45; stroke-dasharray: 1.8 2.6; opacity: .05; }

.kp2-absorb { position: absolute; left: 60%; top: 46%; width: 70px; height: 70px; border: 1.5px solid var(--dw-cyan); border-radius: 50%; animation: kp2Absorb 2.6s ease-in infinite; }
.kp2-orbwrap { position: absolute; left: 60%; top: 46%; transform: translate(-50%,-50%); z-index: 6; text-align: center; }
.kp2-orb { width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #7fd4ff, #29ABE2 52%, #127bad); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: kp2Glow 2.8s ease-in-out infinite; color: #fff; }
.kp2-orb-grey { background: radial-gradient(circle at 36% 30%, #6a7a88, #3a4a58 52%, #22303d); animation: none; }
.kp2-orb-num { font-size: 19px; font-weight: 900; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.kp2-orb-label { font-size: 8px; font-weight: 700; letter-spacing: .08em; opacity: .9; margin-top: 3px; }

.kp2-fleet { position: absolute; left: 16%; top: 72%; transform: translate(-50%,-50%); z-index: 6; text-align: center; }
.kp2-fleet-box { width: 46px; height: 46px; border-radius: 12px; background: #132330; border: 1.5px solid var(--dw-cyan); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.kp2-fleet-glow { box-shadow: 0 0 18px rgba(41,171,226,.25); }
.kp2-fleet-label { font-size: 10px; font-weight: 800; margin-top: 6px; white-space: nowrap; color: var(--dw-ink); }

.kp2-tenant { position: absolute; z-index: 5; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 8px; background: #132330; border: 1px solid var(--dw-cyan); animation: kp2Bob 3.2s ease-in-out infinite; }
.kp2-t1 { left: 34%; top: 14%; } .kp2-t2 { left: 55%; top: 9%; animation-delay: .4s; }
.kp2-t3 { left: 76%; top: 13%; animation-delay: .8s; } .kp2-t4 { left: 90%; top: 32%; animation-delay: .2s; }
.kp2-t5 { left: 91%; top: 60%; animation-delay: 1s; } .kp2-t6 { left: 80%; top: 82%; animation-delay: .6s; }
.kp2-t7 { left: 58%; top: 88%; animation-delay: .3s; } .kp2-t8 { left: 38%; top: 86%; animation-delay: .9s; }
.kp2-t-off { opacity: .16; filter: grayscale(1); animation: none; }
.kp2-caption { position: absolute; bottom: 13px; left: 0; width: 100%; text-align: center; z-index: 7; }
.kp2-caption span { font-size: 11px; color: #93a3b2; font-weight: 600; letter-spacing: .03em; background: rgba(255,255,255,.045); border: 1px solid rgba(41,171,226,.24); border-radius: 100px; padding: 6px 14px; white-space: nowrap; }

.kp2-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.kp2-stat { background: #101a26; border: 1px solid rgba(41,171,226,.24); border-radius: 13px; padding: 15px 14px 13px; text-align: center; }
.kp2-stat-label { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #93a3b2; font-weight: 700; margin-bottom: 7px; white-space: nowrap; }
.kp2-stat-val { font-size: 22px; font-weight: 900; letter-spacing: -.8px; line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s; white-space: nowrap; }
.kp2-rate { font-size: 11px; color: #93a3b2; text-align: right; margin-top: -4px; }

.kp2-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; margin-left: -22px; cursor: ew-resize; z-index: 30; display: flex; align-items: center; justify-content: center; touch-action: none; }
.kp2-divider-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, rgba(41,171,226,.2), #29ABE2 20%, #29ABE2 80%, rgba(41,171,226,.2)); box-shadow: 0 0 14px rgba(41,171,226,.7); }
.kp2-handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: #29ABE2; box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 22px rgba(41,171,226,.6); display: flex; align-items: center; justify-content: center; gap: 3px; transition: transform .12s ease; }
.kp2-dragging .kp2-handle { transform: translate(-50%,-50%) scale(1.08); }
.kp2-dragging { user-select: none; }

@keyframes kp2Flow { to { stroke-dashoffset: -22; } }
@keyframes kp2Glow { 0%,100% { box-shadow: 0 0 24px 4px rgba(41,171,226,.35); } 50% { box-shadow: 0 0 46px 12px rgba(41,171,226,.65); } }
@keyframes kp2Absorb { 0% { transform: translate(-50%,-50%) scale(2.1); opacity: 0; } 25% { opacity: .55; } 100% { transform: translate(-50%,-50%) scale(.55); opacity: 0; } }
@keyframes kp2Bob { 0%,100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-4px); } }
@keyframes kp2Blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

@media (max-width: 980px) {
  .kp2-stage, .kp2-legend { display: none; } /* fixed-geometry comparison needs desktop width */
}

/* ── Native platform toolkit section (light, sits after Procurement) ── */
.native-section { background: var(--bg-secondary, #f6f8fa); padding: 90px 40px; }
.native-inner { max-width: 1200px; margin: 0 auto; }
.native-head { max-width: 720px; margin: 0 0 44px; }
.native-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 0 0 14px; color: var(--text-primary, #0f1923); }
.native-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.native-card { background: #fff; border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 16px; padding: 26px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.native-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,25,35,.09); border-color: rgba(41,171,226,.35); }
.native-card--wide { grid-column: span 3; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.native-card--wide .native-icon { margin-bottom: 0; }
.native-card--wide h4 { grid-column: 2; margin-top: 2px; }
.native-card--wide p { grid-column: 2; }
.native-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(41,171,226,.1); border: 1px solid rgba(41,171,226,.25); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.native-icon svg { width: 24px; height: 24px; fill: none; stroke: #29ABE2; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.native-card h4 { font-size: 18px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 8px; color: var(--text-primary, #0f1923); }
.native-card p { font-size: 14px; line-height: 1.65; color: var(--text-secondary, #5a6a78); margin: 0; }

.native-demos { margin-top: 56px; }
.native-demos-head { margin-bottom: 26px; }
.native-demos-head h3 { font-size: 26px; font-weight: 800; letter-spacing: -.6px; margin: 0; color: var(--text-primary, #0f1923); }
.native-demo { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.native-demo:last-child { margin-bottom: 0; }
.native-demo--netmap { grid-template-columns: .82fr 1.18fr; }
.native-demo-text h4 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin: 0 0 12px; color: var(--text-primary, #0f1923); }
.native-demo-text p { font-size: 15px; line-height: 1.7; color: var(--text-secondary, #5a6a78); margin: 0; }

@media (max-width: 900px) {
  .native-section { padding: 60px 20px; }
  .native-grid { grid-template-columns: 1fr; }
  .native-card--wide { grid-column: span 1; grid-template-columns: 1fr; gap: 0; }
  .native-card--wide .native-icon { margin-bottom: 16px; }
  .native-card--wide h4, .native-card--wide p { grid-column: 1; }
  .native-demo, .native-demo--netmap { grid-template-columns: 1fr; gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DEEP WATCH DARK PALETTE — full-site override (2026-07-06, Claude Design).
   Appended last so it wins the cascade. Flips the theme variables to the
   navy-black stack + cyan, then pins the per-section backgrounds from the
   defined palette. The whole site is now dark; no light sections remain.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --cyan: #29ABE2;
  --cyan-dark: #1a8abf;
  --dark: #0a1219;
  --dark-mid: #101a24;
  --dark-surface: #111b26;
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.62);
  --text-muted: rgba(255,255,255,0.42);
  --bg: #0a1219;
  --bg-secondary: #101a24;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
}

body { background: #0b1017; color: #fff; }

/* Section backgrounds — the palette's navy stack */
.differentiator-section,
.industries-section,
.integration-section,
.pro-section,
.modules-section,
.netmap-section,
.platform-section,
.native-section,
.register-section { background: #0a1219; border-top-color: rgba(255,255,255,0.06); }

/* split-dark keeps its own tone; light split sections now read the body base */
.split-dark { background: #0a1219; }

/* Card / surface tones */
.diff-card { background: #111b26; border-color: rgba(255,255,255,0.08); }
.diff-card h4 { color: #fff; }
.diff-card p { color: rgba(255,255,255,0.6); }
.native-card { background: #111b26; border-color: rgba(255,255,255,0.08); }
.native-card h4 { color: #fff; }
.native-card p { color: rgba(255,255,255,0.6); }
.native-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.4); border-color: rgba(41,171,226,0.4); }
.native-demo-text h4 { color: #fff; }
.native-demo-text p { color: rgba(255,255,255,0.62); }
.native-demos-head h3 { color: #fff; }
.int-card { background: #101a24; border-color: rgba(255,255,255,0.08); }
.int-node { background: #111b26; border-color: rgba(255,255,255,0.08); }
.int-node--erm .int-node-label { color: #fff; }
.int-node--erm .int-node-tag { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); }
.industry-tag { background: #101a24; border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.72); }
.industry-tag:hover { border-color: var(--cyan); color: #fff; }

/* Text defaults that used the light palette */
.differentiator-section h2,
.industries-section h2,
.integration-section h2,
.pro-section h2,
.platform-section h2,
.native-section h2,
.split-text h2 { color: #fff; }
.section-intro,
.split-body,
.diff-body,
.platform-intro,
.pro-body,
.integration-body,
.native-section .section-intro { color: rgba(255,255,255,0.62); }
.feature-list li { color: rgba(255,255,255,0.62); border-bottom-color: rgba(255,255,255,0.08); }
.section-label { color: var(--cyan); }
.platform-item h4, .pro-step h4, .pro-highlight h4, .pillar-card h3 { color: #fff; }
.platform-item p, .pro-step p, .pro-highlight p, .pillar-tagline { color: rgba(255,255,255,0.55); }
.native-head h2 { color: #fff; }

/* Network map canvas — dark panel to match (nodes/lines are cyan-drawn) */
.netmap-canvas { background-color: #0d1520 !important; border-color: rgba(255,255,255,0.12); }

/* Config-tree demo stage — palette radial */
.ct-stage { background: radial-gradient(circle at 50% 40%, #12202d, #0a1219); }

/* Footer — darkest chrome */
.site-footer { background: #070b11; }

/* Register form on the dark section */
.register-form { background: #101a24; border: 1px solid rgba(255,255,255,0.08); }
.register-form input, .register-form textarea { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: #fff; }
.register-form label { color: rgba(255,255,255,0.7); }

/* Roadmap status pills — dark chips (palette) */
.roadmap-soon--near-term { color: #4cd693; background: rgba(76,214,147,0.12); }
.roadmap-soon--medium-term { color: #5fc0ec; background: rgba(41,171,226,0.14); }
.roadmap-soon--future { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
.roadmap-tag { color: rgba(255,255,255,0.82); }

/* ═══ Section refinements (2026-07-06) ═══ */

/* Subtle hue alternation so adjacent sections read as distinct */
#why { background: #0a1219; }
#security { background: #0c1622; }
#assets { background: #0a1219; }
#maintenance { background: #0c1622; }
#crew { background: #0a1219; }
#procurement { background: #0c1622; }
#native { background: #0a1219; }
#platform { background: #0c1622; }
#integration { background: #0a1219; }
.industries-section { background: #0c1622; }
#modules { background: #0a1219; }
#register { background: #0c1622; }

/* Config-tree demo — rounded frame matching the rest */
.ct-stage { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); }
.ct-img { border-radius: 16px; display: block; }

/* Network map demo — white canvas + legible dark node text */
.netmap-canvas { background-color: #f4f8fb !important; border-color: rgba(255,255,255,0.14); }
.netmap-node, .netmap-node-label { color: #0f1923; }
.netmap-breadcrumb { color: #5a6a78; }
.netmap-breadcrumb strong { color: #0f1923; }
.netmap-zlevel { color: #5a6a78; }

/* Integration cards — white to pop */
.int-card { background: #ffffff; border-color: rgba(0,0,0,0.06); }
.int-card h4 { color: #0f1923; }
.int-card p { color: #5a6a78; }

/* Modules cards — white to pop, uniform borders (drop the featured-only cyan) */
.pillar-card, .pillar-card.featured { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); }
.pillar-card h3 { color: #0f1923; }
.pillar-tagline { color: #5a6a78; }
.pillar-features li { color: #45586a; border-bottom-color: rgba(0,0,0,0.08); }
.pillar-card.coming-soon { background: #eef2f6; border: 1px dashed rgba(41,171,226,0.45); }

/* Config-tree demo — kill the leftover white outer square; the rounded
   blue ct-stage is the only frame now */
.ct-demo { background: transparent; padding: 0; min-height: 0; }

/* Network map — soft tinted panel so the light-bodied isometric icons read */
.netmap-canvas { background-color: #eaf1f7 !important; }

/* Modules — back to dark cards (uniform; no featured-only cyan border) */
.pillar-card, .pillar-card.featured { background: #111b26; border: 1px solid rgba(255,255,255,0.08); }
.pillar-card h3 { color: #ffffff; }
.pillar-tagline { color: rgba(255,255,255,0.5); }
.pillar-features li { color: rgba(255,255,255,0.6); border-bottom-color: rgba(255,255,255,0.08); }
.pillar-card.coming-soon { background: #0f1923; border: 1px dashed rgba(41,171,226,0.45); }

/* ═══ Configuration-tree demo — echoes the app Spread Editor (white) ═══ */
.native-demo--config { display: block; }
.native-demo--config .native-demo-text { max-width: 760px; margin: 0 0 20px; }

.ct-app { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.35); color: #0f1923; }
.ct-app-toolbar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #f4f7fa; border-bottom: 1px solid rgba(0,0,0,0.08); }
.ct-app-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #0f1923; }
.ct-app-title svg { color: #29ABE2; }
.ct-app-badge { font-size: 10.5px; font-weight: 600; color: #6b7a89; background: #eef3f8; border: 1px solid rgba(0,0,0,0.06); border-radius: 100px; padding: 3px 10px; }
.ct-app .ct-reset { margin-left: auto; background: #fff; border: 1px solid rgba(0,0,0,0.14); color: #45586a; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; transition: all .15s; }
.ct-app .ct-reset:hover { border-color: #29ABE2; color: #29ABE2; }

.ct-app-body { display: grid; grid-template-columns: 250px 1fr; min-height: 460px; }
.ct-tree-pane { border-right: 1px solid rgba(0,0,0,0.08); background: #fafbfc; display: flex; flex-direction: column; }
.ct-tree-head { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a97a4; padding: 12px 14px 8px; }
.ct-tree { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.ct-tree-foot { font-size: 10.5px; color: #8a97a4; padding: 8px 14px; border-top: 1px solid rgba(0,0,0,0.06); }

.ct-node { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; cursor: default; border-left: 2px solid transparent; }
.ct-node--root { background: rgba(41,171,226,0.1); border-left-color: #29ABE2; font-weight: 600; }
.ct-node--child { padding-left: 26px; }
.ct-node-ico { width: 13px; height: 13px; flex-shrink: 0; color: #8a97a4; }
.ct-node--root .ct-node-ico { color: #29ABE2; }
.ct-node-badge { min-width: 18px; height: 18px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ct-node-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #23313f; }
.ct-node-del { background: none; border: none; padding: 2px; cursor: pointer; color: #b7c2cd; display: flex; opacity: 0; transition: opacity .15s; }
.ct-node--child:hover .ct-node-del { opacity: 1; }
.ct-node-del:hover { color: #dc2626; }

.ct-canvas-pane { display: flex; flex-direction: column; padding: 14px; gap: 10px; background: #ffffff; }
.ct-node-header { padding: 10px 14px; background: #f7f9fb; border: 1px solid rgba(0,0,0,0.07); border-radius: 10px; }
.ct-node-title { font-size: 12.5px; font-weight: 700; color: #0f1923; }
.ct-node-meta { font-size: 10.5px; color: #6b7a89; margin-top: 2px; }

/* override the earlier dark ct-stage — white canvas now */
.native-demo--config .ct-stage { flex: 1; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); background: #ffffff; display: flex; align-items: center; justify-content: center; position: relative; cursor: crosshair; }
.native-demo--config .ct-img { max-width: 100%; max-height: 420px; height: auto; width: auto; border-radius: 0; }
.native-demo--config .ct-hint { background: rgba(15,25,35,0.72); }

@media (max-width: 760px) {
  .ct-app-body { grid-template-columns: 1fr; }
  .ct-tree-pane { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); max-height: 180px; }
}

/* Config demo: canvas pins amber to match their tree badges (app parity) */
.native-demo--config .ct-pin-dot { background: #f59e0b; }

/* Network map toolbar — the resting tool icons inherited the flipped-to-white
   text colour, so Connect/Reset were white-on-white on the light toolbar.
   Give them dark ink; hover/active/Add keep their cyan fill + white icon. */
.netmap-tool { color: #45586a; }
.netmap-toolbar { border-color: rgba(15,25,35,0.10); }
.netmap-zbtn { color: #45586a; }

/* Demo "simplified taste" note */
.native-demo-note {
  margin-top: 14px !important;
  padding: 11px 14px;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.72) !important;
  background: rgba(41,171,226,0.07);
  border-left: 2px solid var(--cyan);
  border-radius: 8px;
}

/* kp2 divider — default to the left (opted-in shown), pill handle w/ label */
.kp2-clip { clip-path: inset(0 0 0 90%); }   /* default X=90%: opted-in fills the left, opted-out sliver on the right */
.kp2-divider { left: 90%; }
.kp2-handle {
  width: auto; height: auto; border-radius: 22px;
  padding: 12px 8px; gap: 6px; white-space: nowrap;
  flex-direction: column;
}
.kp2-handle-arrows { display: flex; gap: 3px; }
.kp2-handle-text {
  font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0.05em;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.kp2-legend { justify-content: space-between; }