:root {
    --navy: #162a63; --blue: #2f6fb6; --teal: #159aad; --orange: #ef8a23;
    --ink: #18223f; --body: #4a5571; --muted: #828ca5;
    --line: #e7ebf3; --bg: #ffffff; --soft: #f5f7fc; --soft-2: #eef2fa;
    --good: #1f9d6b;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    --shadow: 0 24px 60px rgba(22, 42, 99, 0.12);
    --shadow-sm: 0 6px 22px rgba(22, 42, 99, 0.07);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.62; -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
  a { color: var(--blue); text-decoration: none; }
  a:hover { text-decoration: underline; }
  h1, h2, h3 { letter-spacing: -0.02em; }

  /* Logo */
  .logo { display: inline-flex; align-items: center; gap: 11px; }
  .logo svg { width: 34px; height: 34px; flex-shrink: 0; }
  .logo .word { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
  .logo .word .c1 { color: var(--navy); } .logo .word .c2 { color: var(--teal); }

  /* Header */
  header.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
  .nav a { color: var(--body); font-weight: 600; font-size: 14.5px; margin-left: 26px; }
  .nav a:hover { color: var(--ink); text-decoration: none; }
  .nav a[data-spy] { position: relative; padding-bottom: 3px; }
  .nav a[data-spy].active { color: var(--navy); }
  .nav a[data-spy].active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--teal); }
  .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: all 120ms ease; }
  .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
  .btn-primary:hover { text-decoration: none; background: #1d3680; transform: translateY(-1px); }
  .btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
  .btn-ghost:hover { text-decoration: none; border-color: var(--teal); color: var(--teal); }
  .nav .btn-primary { margin-left: 26px; padding: 10px 18px; }

  /* Hero */
  .hero { text-align: center; padding: 76px 0 16px; background: linear-gradient(180deg, var(--soft), #fff); }
  .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); background: #fff; border: 1px solid var(--line); padding: 7px 15px; border-radius: 999px; box-shadow: var(--shadow-sm); }
  .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
  h1 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.04; margin: 24px auto 0; max-width: 880px; font-weight: 850; }
  h1 .em { color: var(--teal); }
  .sub { font-size: clamp(17px, 2.1vw, 20px); color: var(--body); max-width: 660px; margin: 22px auto 0; }
  .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
  .trustbar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
  .trustbar span { font-size: 12.5px; color: var(--body); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow-sm); }
  .trustbar span b { color: var(--navy); }
  .trust { margin-top: 16px; font-size: 13px; color: var(--muted); }
  .trust code { font-family: var(--mono); color: var(--body); background: var(--soft); padding: 2px 7px; border-radius: 5px; }

  /* Product mockup frame */
  figure.shot { margin: 46px auto 0; max-width: 980px; }
  figure { margin-left: 0; margin-right: 0; }
  .frame { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
  .chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
  .chrome .d { width: 11px; height: 11px; border-radius: 50%; }
  .chrome .d.r { background: #ff5f57; } .chrome .d.y { background: #febc2e; } .chrome .d.g { background: #28c840; }
  .chrome .addr { margin-left: 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); background: #fff; padding: 5px 14px; border-radius: 6px; border: 1px solid var(--line); }
  .app { display: flex; min-height: 396px; text-align: left; }
  .app-nav { width: 216px; flex-shrink: 0; border-right: 1px solid var(--line); padding: 18px 14px; background: #fbfcff; }
  .app-search { font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: #fff; margin: 14px 0 16px; display: flex; align-items: center; gap: 8px; }
  .app-menu { display: flex; flex-direction: column; gap: 1px; }
  .app-menu a { font-size: 13.5px; color: var(--body); padding: 8px 11px; border-radius: 7px; cursor: default; display: flex; align-items: center; gap: 9px; }
  .app-menu a:hover { text-decoration: none; }
  .app-menu a.on { background: var(--soft-2); color: var(--navy); font-weight: 700; }
  .app-menu a svg { width: 16px; height: 16px; opacity: 0.7; }
  .app-dq { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; color: var(--muted); }
  .app-dq .bar { height: 6px; border-radius: 4px; background: var(--soft-2); margin-top: 7px; overflow: hidden; }
  .app-dq .bar i { display: block; height: 100%; width: 92%; background: linear-gradient(90deg, var(--teal), var(--good)); }
  .app-dq b { color: var(--ink); }
  .app-body { flex: 1; min-width: 0; padding: 18px 20px; }
  .app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .app-head .h { font-weight: 800; font-size: 16px; }
  .app-head .h span { color: var(--muted); font-weight: 500; font-size: 13.5px; margin-left: 6px; }
  .app-ai { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--teal); border: 1px solid #cfeaef; background: #effafb; border-radius: 8px; padding: 7px 13px; }
  table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.grid th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 9px 10px; border-bottom: 1px solid var(--line); }
  table.grid td { padding: 11px 10px; border-bottom: 1px solid #f1f3f9; color: var(--body); }
  table.grid td.nm { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--navy); }
  .sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
  .sdot.live { background: var(--good); } .sdot.drift { background: var(--orange); }
  .badge { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.03em; font-weight: 600; white-space: nowrap; }
  .badge.doc { background: #e8f0fb; color: var(--blue); }
  .badge.disc { background: #e3f6f8; color: var(--teal); }
  .badge.rev { background: #fdeede; color: #c4731a; }
  figcaption { text-align: center; color: var(--body); font-size: 14.5px; margin: 18px auto 0; max-width: 680px; }
  figcaption b { color: var(--ink); }

  /* Sections */
  section { padding: 62px 0; }
  .center { text-align: center; }
  .sec-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
  h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 10px 0 8px; font-weight: 820; }
  .lede { color: var(--body); max-width: 660px; font-size: 17px; margin: 0; }
  .center .lede { margin-left: auto; margin-right: auto; }
  .soft-bg { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  /* Spotlight (wow features) */
  .spot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .spot + .spot { margin-top: 64px; }
  .spot.rev .copy { order: 2; }
  .fnum { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--teal); }
  .fnum .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--soft-2); color: var(--navy); }
  .spot h2 { font-size: clamp(23px, 3vw, 30px); margin-top: 14px; }
  .spot .lede { font-size: 16.5px; }
  .spot .more { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
  .spot .more div { font-size: 14.5px; color: var(--body); padding-left: 24px; position: relative; }
  .spot .more div::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }

  /* Step-by-step walkthroughs (with mini screenshots) */
  .walk { max-width: 1000px; margin: 0 auto; }
  .walk-cap { text-align: center; color: var(--body); font-size: 15.5px; margin: 26px auto 0; max-width: 660px; }
  .walk-cap b { color: var(--ink); }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; text-align: left; }
  .step { position: relative; }
  .step + .step::before { content: "→"; position: absolute; left: -18px; top: 92px; color: #b9c2da; font-size: 19px; font-weight: 700; }
  .snum { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 11px; }
  .snum b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: var(--navy); color: #fff; font-size: 11px; }
  .svis { border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); padding: 15px; min-height: 138px; display: flex; flex-direction: column; justify-content: center; }
  .stitle { font-weight: 800; font-size: 16px; margin: 15px 0 4px; }
  .scap { color: var(--body); font-size: 13.5px; margin: 0; }
  /* mini-visual building blocks */
  .mini-q { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; color: var(--ink); font-size: 13px; background: var(--soft); line-height: 1.45; }
  .mini-q .cur { color: var(--teal); font-weight: 700; }
  .mini-list .mi { display: flex; align-items: center; gap: 9px; padding: 5px 0; color: var(--body); font-size: 12.5px; }
  .mini-list .mi .ok { color: var(--good); font-weight: 800; }
  .mini-list .mi b { font-family: var(--mono); color: var(--navy); font-weight: 600; }
  .mini-ans { font-size: 12.5px; color: var(--ink); line-height: 1.5; }
  .mini-ans .cite-mini { display: block; margin-top: 9px; border-top: 1px dashed #cfeaef; padding-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .mini-ans .cite-mini b { color: var(--teal); font-weight: 600; }
  .rec { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .rec .rv { font-family: var(--mono); font-weight: 700; font-size: 13.5px; color: var(--navy); }
  .rec .rl { font-size: 11px; color: var(--muted); }
  .mini-warn { background: #fffaf3; border: 1px solid #f6dcc0; border-radius: 9px; padding: 10px 12px; color: #c4731a; font-size: 12.5px; font-weight: 600; }
  .mini-btns { display: flex; gap: 8px; margin-top: 11px; }
  .mini-btns b { font-family: var(--sans); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 7px; }
  .mini-btns .y { background: var(--navy); color: #fff; } .mini-btns .n { border: 1px solid var(--line); color: var(--body); }
  .conn { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; color: var(--navy); }
  .conn .ok2 { margin-left: auto; color: var(--good); font-weight: 700; font-size: 11.5px; }
  .conn-sub { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
  .plan { display: flex; flex-direction: column; gap: 7px; }
  .plan .pr { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
  .plan .pr .e { color: var(--body); }
  .done { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--good); font-size: 14px; }
  .token { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 9px; background: var(--soft); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; }

  /* Chat card */
  .chat { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
  .chat .ch { padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--soft); font-family: var(--mono); font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  .chat .ch .gem { color: var(--teal); }
  .q { background: #eef3fb; border: 1px solid #dde6f5; border-radius: 11px; padding: 11px 14px; font-size: 14px; margin: 16px 16px 0; }
  .a { background: #f0fafb; border: 1px solid #cfeaef; border-radius: 11px; padding: 13px 15px; font-size: 14px; margin: 12px 16px 16px; }
  .a .cite { display: block; margin-top: 10px; border-top: 1px dashed #cfeaef; padding-top: 9px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .a .cite b { color: var(--teal); font-weight: 600; }

  /* Drift card */
  .drift { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
  .drift .dh { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--soft); letter-spacing: 0.04em; }
  .drift .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f1f3f9; }
  .drift .row:last-child { border-bottom: 0; } .drift .row.warn { background: #fffaf3; }
  .drift .lab { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
  .drift .val { font-weight: 700; font-size: 14px; margin-top: 2px; } .drift .val.w { color: #c4731a; }

  /* Migration preview card */
  .mig { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
  .mig .mh { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 13px; font-weight: 700; color: var(--navy); }
  .mig .mh .src { font-family: var(--mono); font-weight: 500; color: var(--muted); font-size: 12px; }
  .mig .mh .ok { margin-left: auto; font-size: 11.5px; color: var(--good); font-weight: 600; }
  .mig .mrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f1f3f9; font-size: 13.5px; }
  .mig .mrow .ent { font-weight: 600; color: var(--ink); }
  .pills { display: flex; gap: 7px; }
  .pill { font-family: var(--mono); font-size: 11.5px; padding: 3px 9px; border-radius: 6px; font-weight: 600; }
  .pill.cr { background: #e4f6ec; color: var(--good); } .pill.up { background: #e8f0fb; color: var(--blue); }
  .pill.cf { background: #fdeede; color: #c4731a; } .pill.z { background: var(--soft-2); color: var(--muted); }
  .mig .mconf { padding: 11px 16px; background: #fffaf3; font-size: 12.5px; color: #c4731a; border-bottom: 1px solid #f1f3f9; }
  .mig .mfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; font-size: 12px; color: var(--muted); }
  .mig .mfoot .mbtns { display: flex; gap: 8px; }
  .mig .mfoot b { font-family: var(--sans); font-size: 12.5px; padding: 6px 13px; border-radius: 7px; }
  .mig .mfoot .commit { background: var(--navy); color: #fff; } .mig .mfoot .roll { border: 1px solid var(--line); color: var(--body); }

  /* Topology */
  .topo { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); padding: 26px; margin-top: 40px; }
  .topo svg { width: 100%; height: auto; display: block; }
  .legend { display: flex; gap: 26px; justify-content: center; margin-top: 16px; font-size: 13px; color: var(--body); flex-wrap: wrap; }
  .legend i { display: inline-block; width: 24px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 8px; }

  /* Trace animation: flowing current on the rails + a pulse that walks the path end to end */
  .topo svg .trace-rails path { stroke-dasharray: 8 12; animation: traceFlow 1s linear infinite; }
  @keyframes traceFlow { to { stroke-dashoffset: -20; } }
  .topo svg .trace-dot { fill: #36e0f0; filter: drop-shadow(0 0 8px var(--teal)) drop-shadow(0 0 3px #fff); }
  .topo svg .trace-dot-1 { offset-path: path('M150 150 H512 L604 110 H760'); animation: traceDot 3.2s cubic-bezier(.4,0,.2,1) infinite; }
  .topo svg .trace-dot-2 { offset-path: path('M150 150 H512 L604 190 H760'); animation: traceDot 3.2s cubic-bezier(.4,0,.2,1) infinite; animation-delay: .55s; }
  @keyframes traceDot {
    0%   { offset-distance: 0%;   opacity: 0; }
    6%   { opacity: 1; }
    72%  { offset-distance: 100%; opacity: 1; }
    80%  { opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .topo svg .trace-rails path { animation: none; stroke-dasharray: none; }
    .topo svg .trace-dot { display: none; }
  }

  /* Step-walk eye-catch: a soft glow sweeps L→R across each workflow's steps */
  .walk .steps .svis { animation: stepGlow 4.8s ease-in-out infinite; }
  .walk .steps .step:nth-child(1) .svis { animation-delay: 0s; }
  .walk .steps .step:nth-child(2) .svis { animation-delay: .9s; }
  .walk .steps .step:nth-child(3) .svis { animation-delay: 1.8s; }
  .walk .steps .step:nth-child(4) .svis { animation-delay: 2.7s; }
  @keyframes stepGlow {
    0%   { box-shadow: var(--shadow-sm); border-color: var(--line); transform: translateY(0); }
    6%   { box-shadow: 0 7px 24px rgba(21,154,173,.18), 0 0 0 1.5px var(--teal); border-color: var(--teal); transform: translateY(-3px); }
    14%  { box-shadow: var(--shadow-sm); border-color: var(--line); transform: translateY(0); }
    100% { box-shadow: var(--shadow-sm); border-color: var(--line); transform: translateY(0); }
  }
  .walk .steps .step + .step::before { animation: arrowNudge 4.8s ease-in-out infinite; }
  .walk .steps .step:nth-child(2)::before { animation-delay: .5s; }
  .walk .steps .step:nth-child(3)::before { animation-delay: 1.4s; }
  .walk .steps .step:nth-child(4)::before { animation-delay: 2.3s; }
  @keyframes arrowNudge {
    0%, 16%, 100% { color: #b9c2da; transform: translateX(0); }
    8%            { color: var(--teal); transform: translateX(3px); }
  }

  /* Self-drawing topology graph (workflow 05, step 3) */
  .topo-mini { width: 100%; height: auto; max-height: 108px; display: block; }
  .topo-mini .tm-e { stroke-dasharray: 110; stroke-dashoffset: 110; animation: edgeDraw 5s ease-in-out infinite; }
  .topo-mini .tm-e1 { animation-delay: .15s; } .topo-mini .tm-e2 { animation-delay: .55s; }
  .topo-mini .tm-e3 { animation-delay: .8s; }  .topo-mini .tm-e4 { animation-delay: 1.05s; }
  .topo-mini .tm-e5 { animation-delay: 1.3s; }
  .topo-mini .tm-n { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: nodePop 5s ease-in-out infinite; }
  .topo-mini .tm-n1 { animation-delay: 0s; }   .topo-mini .tm-n2 { animation-delay: .4s; }
  .topo-mini .tm-n3 { animation-delay: .65s; } .topo-mini .tm-n4 { animation-delay: .9s; }
  .topo-mini .tm-n5 { animation-delay: 1.15s; }
  @keyframes edgeDraw {
    0%   { stroke-dashoffset: 110; opacity: 0; }
    5%   { opacity: 1; }
    24%  { stroke-dashoffset: 0; opacity: 1; }
    86%  { stroke-dashoffset: 0; opacity: 1; }
    97%  { opacity: 0; }
    100% { stroke-dashoffset: 110; opacity: 0; }
  }
  @keyframes nodePop {
    0%   { transform: scale(0);    opacity: 0; }
    8%   { transform: scale(1.15); opacity: 1; }
    16%  { transform: scale(1);    opacity: 1; }
    86%  { transform: scale(1);    opacity: 1; }
    97%  { transform: scale(1);    opacity: 0; }
    100% { transform: scale(0);    opacity: 0; }
  }
  /* Write intents (02): the proposed change quietly "breathes" while it awaits a confirm */
  .chat .a { animation: intentPulse 4.8s ease-in-out infinite; }
  @keyframes intentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(21,154,173,0);    border-color: #cfeaef; }
    50%      { box-shadow: 0 0 0 3px rgba(21,154,173,.13); border-color: var(--teal); }
  }
  .chat .mini-btns .y { animation: confirmPulse 4.8s ease-in-out infinite; }
  @keyframes confirmPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,42,99,0);   transform: translateY(0); }
    50%      { box-shadow: 0 5px 16px rgba(22,42,99,.28); transform: translateY(-2px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .walk .steps .svis { animation: none; }
    .walk .steps .step + .step::before { animation: none; }
    .topo-mini .tm-e { stroke-dashoffset: 0; opacity: 1; animation: none; }
    .topo-mini .tm-n { transform: scale(1); opacity: 1; animation: none; }
    .chat .a, .chat .mini-btns .y { animation: none; }
  }

  /* Feature grid (the rest) */
  .group + .group { margin-top: 46px; }
  .group-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
  .group-h h3 { font-size: 19px; margin: 0; color: var(--navy); }
  .group-h .gline { flex: 1; height: 1px; background: var(--line); }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .card { border: 1px solid var(--line); border-radius: 13px; padding: 22px; background: #fff; transition: all 140ms ease; }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d7deea; }
  .card .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--soft-2); color: var(--teal); margin-bottom: 13px; }
  .card .ic svg { width: 21px; height: 21px; }
  .card h4 { margin: 0 0 6px; font-size: 16px; }
  .card p { margin: 0; color: var(--body); font-size: 14px; }
  .card code { font-family: var(--mono); font-size: 12px; background: var(--soft); padding: 1px 5px; border-radius: 4px; color: var(--navy); }
  .card .tag { display: inline-block; margin-top: 13px; font-family: var(--mono); font-size: 11px; color: var(--teal); background: #eef8f9; border: 1px solid #d6eef1; padding: 3px 9px; border-radius: 6px; letter-spacing: 0.01em; }

  /* Scope / breadth band */
  .scope { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 38px; text-align: left; }
  .scope .col { border: 1px solid var(--line); border-radius: 13px; padding: 20px 20px 12px; background: #fff; box-shadow: var(--shadow-sm); }
  .scope .col h4 { margin: 0 0 12px; font-size: 14px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
  .scope .col h4 .d { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
  .scope .col ul { margin: 0; padding: 0; list-style: none; }
  .scope .col li { font-size: 13.5px; color: var(--body); padding: 7px 0; border-top: 1px solid var(--soft-2); }
  .scope .col li:first-of-type { border-top: 0; }

  /* AI guarantees */
  .guards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
  .guards span { font-size: 13px; color: var(--body); border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-sm); }
  .guards b { color: var(--ink); } .guards .ck { color: var(--good); font-weight: 800; margin-right: 5px; }

  /* Code */
  pre.code { text-align: left; max-width: 660px; margin: 30px auto 0; background: #0f1b3d; color: #d7e0f5; border-radius: 14px; padding: 22px 24px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; box-shadow: var(--shadow); }
  pre.code .c { color: #7f8bb5; } pre.code .g { color: #5fd2b0; }
  .modes { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 20px; font-size: 13.5px; color: var(--muted); }
  .modes b { color: var(--navy); }

  /* Compare */
  table.vs { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14.5px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  table.vs th, table.vs td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  table.vs thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--soft); }
  table.vs thead th.cc { color: var(--teal); }
  table.vs td:first-child { color: var(--body); font-weight: 600; }
  table.vs .no { color: var(--muted); } table.vs .cc { color: var(--navy); font-weight: 700; }
  table.vs tr:last-child td { border-bottom: 0; }

  /* Who */
  .who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
  .who div { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: #fff; }
  .who h4 { margin: 0 0 6px; font-size: 15.5px; color: var(--navy); }
  .who p { margin: 0; color: var(--body); font-size: 13.5px; }

  /* Final CTA */
  .final { text-align: center; color: #fff; background: linear-gradient(135deg, var(--navy), #1d3a86); border-radius: 20px; padding: 56px 32px; margin: 30px 0; box-shadow: var(--shadow); }
  .final h2 { font-size: clamp(28px, 4vw, 40px); }
  .final p { color: #c4d0ee; max-width: 540px; margin: 12px auto 0; }
  .final .btn-primary { background: #fff; color: var(--navy); }
  .final .btn-primary:hover { background: #eef2fa; }
  .final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
  .final .btn-ghost:hover { border-color: #fff; color: #fff; }

  /* Footer */
  footer.foot { border-top: 1px solid var(--line); padding: 36px 0; background: var(--soft); }
  footer.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
  .tagline { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--navy); font-weight: 600; margin-top: 6px; }
  .foot-meta { color: var(--muted); font-size: 13px; }
  .foot-meta span { margin-left: 16px; }

  @media (max-width: 860px) {
    .nav a:not(.btn) { display: none; }
    .spot, .cards, .who { grid-template-columns: 1fr; }
    .scope { grid-template-columns: 1fr 1fr; }
    .spot.rev .copy { order: 0; }
    .spot .visual { order: 2; }
    .steps { grid-template-columns: 1fr; }
    .step + .step::before { display: none; }
    .app-nav { display: none; }
  }
  @media (max-width: 560px) {
    .who { grid-template-columns: 1fr 1fr; }
    .cards { grid-template-columns: 1fr; }
    table.vs th, table.vs td { padding: 10px 11px; font-size: 12.5px; }
    table.grid th, table.grid td { padding: 8px 7px; font-size: 11.5px; }
    .app-body { padding: 14px 12px; }
    .scope { grid-template-columns: 1fr; }
  }

/* ============================================================
   Multi-page site components (added for full website)
   ============================================================ */
/* Active page in nav */
.nav a.here { color: var(--navy); position: relative; padding-bottom: 3px; }
.nav a.here::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--teal); }

/* Sub-page hero */
.phero { text-align: center; padding: 72px 0 8px; background: linear-gradient(180deg, var(--soft), #fff); }
.phero .eyebrow { margin-bottom: 6px; }
.phero h1 { font-size: clamp(32px, 4.6vw, 50px); line-height: 1.05; margin: 18px auto 0; max-width: 820px; font-weight: 850; }
.phero h1 .em { color: var(--teal); }
.phero .sub { font-size: clamp(16.5px, 2vw, 19px); color: var(--body); max-width: 640px; margin: 20px auto 0; }

/* Generic split row (copy + visual) — alias of .spot spacing */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.split + .split { margin-top: 56px; }
.split.rev .s-copy { order: 2; }
.split h3 { font-size: clamp(21px, 2.6vw, 27px); margin: 6px 0 10px; }
.split .lede { font-size: 16px; }
.s-list { margin: 16px 0 0; padding: 0; list-style: none; }
.s-list li { font-size: 14.5px; color: var(--body); padding-left: 26px; position: relative; margin-bottom: 8px; }
.s-list li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }

/* Callout */
.callout { border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 12px; padding: 20px 24px; background: var(--soft); color: var(--body); font-size: 15.5px; }
.callout b { color: var(--ink); }
.callout.navy { border-left-color: var(--navy); }
.callout.orange { border-left-color: var(--orange); }

/* Stat row */
.stat-row { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.stat { text-align: center; }
.stat .n { font-size: clamp(30px, 4vw, 40px); font-weight: 850; color: var(--navy); letter-spacing: -0.02em; }
.stat .n .u { color: var(--teal); }
.stat .l { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* Roadmap timeline */
.tl { max-width: 760px; margin: 36px auto 0; text-align: left; }
.tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.tl-item:first-child { border-top: 0; }
.tl-phase { font-family: var(--mono); font-size: 12px; color: var(--teal); font-weight: 700; }
.tl-phase .ph { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.tl-item h4 { margin: 0 0 5px; font-size: 16px; }
.tl-item p { margin: 0; font-size: 14px; color: var(--body); }
.tl-item.done .tl-phase { color: var(--good); }

/* Footer sitemap */
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 44px 0 8px; }
.foot-brandcol .tagline { margin-top: 10px; }
.foot-brandcol p { font-size: 13.5px; color: var(--muted); max-width: 280px; margin: 12px 0 0; }
.foot-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; font-weight: 700; }
.foot-col a { display: block; font-size: 14px; color: var(--body); padding: 5px 0; }
.foot-col a:hover { color: var(--teal); text-decoration: none; }

/* Pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; text-align: left; }
.tier { border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; background: #fff; display: flex; flex-direction: column; }
.tier.feat { border-color: var(--teal); box-shadow: var(--shadow); position: relative; }
.tier.feat .ribbon { position: absolute; top: -12px; left: 26px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.tier h3 { font-size: 19px; margin: 0 0 4px; }
.tier .who { font-size: 13.5px; color: var(--muted); min-height: 38px; }
.tier .price { font-size: 30px; font-weight: 850; color: var(--navy); margin: 10px 0 4px; }
.tier .price span { font-size: 14px; font-weight: 500; color: var(--muted); }
.tier ul { list-style: none; padding: 0; margin: 16px 0 22px; flex: 1; }
.tier li { font-size: 14px; color: var(--body); padding: 7px 0 7px 24px; position: relative; border-top: 1px solid var(--soft-2); }
.tier li:first-child { border-top: 0; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.tier .btn { justify-content: center; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.rev .s-copy { order: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: 6px; }
}

/* Footer wrap becomes block for sitemap layout */
footer.foot .wrap { display: block; }
footer.foot { padding-top: 0; }

/* ============================================================
   Truth pass — honest "shipped today" vs "on the roadmap" cues
   ============================================================ */
/* "Coming / roadmap" tag variant for cards */
.card .tag.soon { color: #c4731a; background: #fdeede; border-color: #f6dcc0; }
.badge.soon { background: #fdeede; color: #c4731a; }
.badge.now { background: #e4f6ec; color: var(--good); }

/* Operator-console nav group label + preview pill in the mock */
.app-menu .grp { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #aab3c8; padding: 11px 11px 4px; }
.app-menu .grp:first-child { padding-top: 2px; }
.app-preview { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--orange); background: #fff6ec; border: 1px solid #f6dcc0; border-radius: 6px; padding: 3px 8px; }

/* "Built today" eyebrow pill for the hero */
.nowpill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--good); background: #eafaf2; border: 1px solid #c7ecd8; border-radius: 999px; padding: 5px 12px; }
.nowpill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

/* Honest scope note under feature bands */
.scope-note { font-size: 13px; color: var(--muted); max-width: 720px; margin: 18px auto 0; font-style: italic; }
.center .scope-note { text-align: center; }

/* Roadmap band: two-column cards that read as "not yet" */
.road { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 34px; text-align: left; }
.road .rc { border: 1px dashed #d4dbea; border-radius: 13px; padding: 18px 20px; background: #fbfcff; }
.road .rc h4 { margin: 0 0 5px; font-size: 15.5px; color: var(--navy); display: flex; align-items: center; gap: 9px; }
.road .rc h4 .ph { font-family: var(--mono); font-size: 10px; color: #c4731a; background: #fdeede; border: 1px solid #f6dcc0; border-radius: 5px; padding: 2px 7px; font-weight: 600; letter-spacing: 0.03em; }
.road .rc p { margin: 0; font-size: 13.5px; color: var(--body); }
@media (max-width: 700px) { .road { grid-template-columns: 1fr; } }

/* Let split/spot grid items shrink below content (code blocks scroll internally) */
.split > *, .spot > * { min-width: 0; }
.split .s-vis, .spot .visual { min-width: 0; overflow: hidden; }

/* 4-step loop variant */
.steps.four { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps.four .step + .step::before { top: 88px; left: -14px; }

@media (max-width: 860px) { .steps.four { grid-template-columns: 1fr; } }

/* ============================================================
   Rebuild pass — grounded graphics (rack elevation, PoE, compliance,
   anatomy callouts, how-it-works). Reuses existing tokens.
   ============================================================ */
/* What-is-this one-liner under hero */
.whatis { max-width: 720px; margin: 30px auto 0; font-size: 18px; color: var(--body); }
.whatis b { color: var(--ink); }

/* 3-up how-it-works with big numerals */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; text-align: left; }
.how .h-step { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: #fff; box-shadow: var(--shadow-sm); position: relative; }
.how .h-step .hn { font-family: var(--mono); font-weight: 800; font-size: 13px; color: var(--teal); }
.how .h-step h4 { margin: 8px 0 6px; font-size: 17px; }
.how .h-step p { margin: 0; font-size: 14px; color: var(--body); }
.how .h-step + .h-step::before { content: "→"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: #b9c2da; font-weight: 700; }
@media (max-width: 860px){ .how { grid-template-columns: 1fr; } .how .h-step + .h-step::before { display: none; } }

/* Before / after problem cards */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; text-align: left; }
.ba .bcard { border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; background: #fff; }
.ba .bcard.before { background: #fbfcff; }
.ba .bcard h4 { margin: 0 0 12px; font-size: 14px; font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.ba .bcard.before h4 { color: var(--muted); } .ba .bcard.after h4 { color: var(--teal); }
.ba .bcard ul { margin: 0; padding: 0; list-style: none; }
.ba .bcard li { font-size: 14px; color: var(--body); padding: 8px 0 8px 26px; position: relative; border-top: 1px solid var(--soft-2); }
.ba .bcard li:first-child { border-top: 0; }
.ba .bcard.before li::before { content: "✕"; position: absolute; left: 0; color: #c0526b; font-weight: 800; }
.ba .bcard.after li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }
@media (max-width: 720px){ .ba { grid-template-columns: 1fr; } }

/* Rack elevation (SVG holds geometry; this is just the shell) */
.rackrow { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; margin-top: 8px; }
.rackrow .rk svg { width: 100%; height: auto; display: block; }
.poe { margin-top: 14px; }
.poe .pbar { height: 12px; border-radius: 6px; background: var(--soft-2); overflow: hidden; }
.poe .pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), #d9531e); }
.poe .pl { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; font-family: var(--mono); }
@media (max-width: 860px){ .rackrow { grid-template-columns: 1fr; } }

/* Vendor legend chips */
.vleg { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 16px; font-size: 12.5px; color: var(--body); }
.vleg span { display: inline-flex; align-items: center; gap: 7px; }
.vleg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Compliance / lifecycle mini-bars (reuses .drift container) */
.cbar { display: flex; align-items: center; gap: 10px; }
.cbar .track { flex: 1; height: 8px; border-radius: 5px; background: var(--soft-2); overflow: hidden; }
.cbar .track i { display: block; height: 100%; }
.cbar .track i.ok { background: var(--good); } .cbar .track i.warn { background: var(--orange); }
.cbar .pct { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--navy); width: 38px; text-align: right; }

/* CVE chip */
.cve { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; background: #fdeeee; border: 1px solid #f3c9c9; color: #b3343f; border-radius: 8px; padding: 6px 11px; }
.cve b { font-weight: 700; }

/* Anatomy-of labeled callout list beside a screenshot */
.anat { list-style: none; margin: 18px 0 0; padding: 0; }
.anat li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--soft-2); font-size: 14px; color: var(--body); }
.anat li:first-child { border-top: 0; }
.anat li b { color: var(--ink); }
.anat .num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--navy); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; }

/* ============================================================
   Reading & visual-perception pass — applies the psychology
   research: legible measure, higher contrast (processing
   fluency → trust), more white space, predictable scan anchors.
   ============================================================ */
/* Darker secondary text: lifts --muted to ≥4.5:1 on white so notes/
   captions read crisp (low contrast is unconsciously read as less true). */
:root { --muted: #6a7388; }
/* Constrain reading measure to ~50–66 chars (return-sweep comfort). */
.sub, .phero .sub, .lede, .whatis { max-width: 62ch; }
.center .lede, .hero .sub, .phero .sub, .whatis { margin-left: auto; margin-right: auto; }
.callout { max-width: 70ch; }
.figcaption, figcaption, .walk-cap, .scope-note { max-width: 64ch; margin-left: auto; margin-right: auto; }
/* A little more air between major groups (white space → comprehension + perceived value). */
section { padding: 72px 0; }
/* Scan anchors: keep bold strong enough to catch a fixation, never whole sentences. */
.lede b, .s-list b, p b { font-weight: 700; color: var(--ink); }
/* Body links stay one consistent treatment (similarity = function). */

/* ============================================================
   DEPTH & MOTION PASS — kills the "flat" feel: dark dimensional
   heroes with a live network backdrop, a real hook moment,
   richer shadows/gradients, self-building topology, scroll-reveal.
   ============================================================ */

/* ---- Overflow safety: nothing draws outside its box ---- */
img, svg { max-width: 100%; }
.topo { overflow: hidden; }
html, body { overflow-x: hidden; }            /* no sideways scroll on any page/width */
.app-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }  /* wide console table scrolls inside the mock */
@media (max-width: 600px) {
  table.vs { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ---- Deeper shadow tokens for layered depth ---- */
:root {
  --shadow: 0 30px 70px rgba(16, 30, 70, 0.16);
  --shadow-sm: 0 8px 26px rgba(16, 30, 70, 0.09);
  --glow-teal: 0 0 30px rgba(54, 224, 240, 0.45);
}

/* ============ DARK, DIMENSIONAL HERO (the hook) ============ */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 44px;
  color: #fff;
  background:
    radial-gradient(1100px 560px at 50% -8%, #234aa0 0%, #16307a 38%, #0d1d44 72%, #0a1736 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* faint engineering grid, faded at the edges */
.hero::before, .phero::before, .fx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 28%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 26%, #000 28%, transparent 76%);
}
.hero .wrap { position: relative; z-index: 2; }

/* animated network backdrop */
.hero-net { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.hero-net svg { width: 100%; height: 100%; display: block; }
.hn-edges path { stroke-dasharray: 5 13; animation: traceFlow 1.5s linear infinite; }
.hn-nodes circle { filter: drop-shadow(0 0 5px #36e0f0); }
.hn-p { filter: drop-shadow(0 0 8px #36e0f0); }
.hn-p1 { offset-path: path('M120 120 L360 220 L640 140 L900 240 L1180 120 L1320 200'); animation: heroPulse 7s linear infinite; }
.hn-p2 { offset-path: path('M300 420 L600 360 L860 460 L1180 380 L1320 200'); animation: heroPulse 8.5s linear infinite; animation-delay: 1.6s; }
.hn-p3 { offset-path: path('M360 220 L600 360 L900 240 L1180 380'); animation: heroPulse 9.5s linear infinite; animation-delay: 3.2s; }
@keyframes heroPulse {
  0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; }
  90% { opacity: 1; offset-distance: 100%; } 100% { offset-distance: 100%; opacity: 0; }
}

/* hero typography on dark */
.hero h1 { color: #fff; }
.hero h1 .em { color: #4fe0ee; text-shadow: var(--glow-teal); }
.hero .sub { color: #c7d4f2; }
.hero .sub em { color: #fff; font-style: italic; }
.hero .eyebrow { color: #8af0fb; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; }
.hero .trustbar span { color: #cfdaf3; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.hero .trustbar span b { color: #fff; }
.hero .trust { color: #93a3ca; }
.hero .trust a { color: #8af0fb; }
.hero .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.hero .btn-primary:hover { background: #eaf0fb; }
.hero .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.13); }
/* console mockup floats off the dark with a cool rim glow */
.hero .frame { box-shadow: 0 50px 110px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(54,224,240,.12); }
.hero figcaption { color: #aab8db; }
.hero figcaption b { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hn-edges path, .hn-p { animation: none; }
  .hn-p { opacity: 0; }
}

/* ============ Sub-page heroes get the same dimension ============ */
.phero {
  position: relative; overflow: hidden; color: #fff;
  padding: 84px 0 12px;
  background: radial-gradient(1000px 520px at 50% -18%, #234aa0 0%, #15307a 40%, #0c1c44 80%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.phero .wrap { position: relative; z-index: 2; }
.phero h1 { color: #fff; }
.phero h1 .em { color: #4fe0ee; text-shadow: var(--glow-teal); }
.phero .sub { color: #c7d4f2; }
.phero .sub em, .phero .sub b { color: #fff; }
.phero .eyebrow { color: #8af0fb; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); box-shadow: none; }
.phero .btn-primary { background: #fff; color: var(--navy); }
.phero .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); color: #fff; }
.phero .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.13); }
.phero .trustbar span { color: #cfdaf3; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.phero .trustbar span b { color: #fff; }
.phero .stat .n { color: #fff; } .phero .stat .n .u { color: #4fe0ee; } .phero .stat .l { color: #93a3ca; }

/* ============ Section rhythm + texture (de-flatten body) ============ */
.soft-bg { background: linear-gradient(180deg, #f2f6fd, #f7f9fe); position: relative; }
.soft-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(22,42,99,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.soft-bg .wrap { position: relative; z-index: 1; }

/* ============ Card / tile depth ============ */
.card { box-shadow: var(--shadow-sm); }
.card .ic { background: linear-gradient(140deg, #e9f6f9, #d6eef3); box-shadow: inset 0 0 0 1px rgba(21,154,173,.14); }
.card { position: relative; overflow: hidden; }
.card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--blue)); opacity: 0; transition: opacity 160ms ease; }
.card:hover::after { opacity: 1; }
.how .h-step { box-shadow: var(--shadow-sm); transition: transform 160ms ease, box-shadow 160ms ease; }
.how .h-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.how .h-step .hn { color: var(--teal); }
.scope .col { transition: transform 160ms ease, box-shadow 160ms ease; }
.scope .col:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ba .bcard, .drift, .chat, .mig, .topo { box-shadow: var(--shadow-sm); }

/* fnum chip gets a touch of brand gradient */
.fnum .n { background: linear-gradient(140deg, var(--navy), #2a4ea0); color: #fff; box-shadow: 0 4px 12px rgba(22,42,99,.25); }

/* ============ Self-building topology (WOW 05) ============ */
.topo-edges { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.topo.in .topo-edges { animation: topoDraw 1.7s ease-out forwards; }
@keyframes topoDraw { to { stroke-dashoffset: 0; } }
/* a permanent gentle current once drawn */
.topo-flow { stroke-dasharray: 4 16; opacity: 0; }
.topo.in .topo-flow { opacity: .55; animation: traceFlow 1.6s linear infinite; animation-delay: 1.5s; }
.topo .tn { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0); }
.topo.in .tn { animation: nodePop2 .5s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes nodePop2 { 0% { opacity: 0; transform: scale(0); } 70% { transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
/* if motion is off, show the finished graph immediately */
@media (prefers-reduced-motion: reduce) {
  .topo-edges { stroke-dashoffset: 0; } .topo-flow { display: none; }
  .topo .tn { opacity: 1; transform: scale(1); }
}
/* no-JS fallback: if .in never gets added, still reveal */
.no-js .topo-edges { stroke-dashoffset: 0; }
.no-js .topo .tn { opacity: 1; transform: scale(1); }

/* ============ Scroll-reveal (added by JS; invisible only when JS runs) ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   NETWORK BLACK BOX — flagship marquee (the premier feature).
   A dark "flight-recorder" panel: verdict banner, bisection
   timeline, and the before/after config proof. Built to read
   like a real product result, not a stock illustration.
   ============================================================ */
.marquee {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 50% -10%, #1b3e8e 0%, #142f78 30%, #0c1c45 70%, #0a1736 100%);
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.marquee::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 30%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 20%, #000 30%, transparent 80%);
}
.marquee .wrap { position: relative; z-index: 1; }
.marquee .sec-tag { color: #8af0fb; }
.marquee h2 { color: #fff; }
.marquee h2 .em { color: #4fe0ee; text-shadow: var(--glow-teal); }
.marquee .lede { color: #c7d4f2; }
.marquee .lede b { color: #fff; }
.marquee .eyebrow { color: #8af0fb; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); box-shadow: none; }

/* the recorder device frame */
.nbb { max-width: 940px; margin: 40px auto 0; }
.nbb-panel {
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #0f1f49, #0b1838);
  border: 1px solid rgba(120,150,220,.22);
  box-shadow: 0 50px 110px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05), 0 0 70px rgba(54,224,240,.10);
}
.nbb-bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(120,150,220,.18); }
.nbb-bar .rec { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 10px #ff4d4f; animation: recBlink 2s steps(1) infinite; }
@keyframes recBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: .25; } }
.nbb-bar .ttl { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: #cfe0ff; font-weight: 600; }
.nbb-bar .meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #7f93c4; }

/* verdict banner */
.nbb-verdict { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(90deg, rgba(180,35,24,.30), rgba(180,35,24,.08)); border-bottom: 1px solid rgba(255,120,110,.22); }
.nbb-verdict .vico { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,77,79,.18); border: 1px solid rgba(255,120,110,.4); }
.nbb-verdict .vtx { font-size: 14.5px; color: #ffd9d6; line-height: 1.5; }
.nbb-verdict .vtx b { color: #fff; font-weight: 750; }
.nbb-verdict .vtx .when { font-family: var(--mono); font-size: 12.5px; color: #ffb7b2; }
.nbb-verdict .vprobe { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: #9fe7c6; background: rgba(31,157,107,.16); border: 1px solid rgba(31,157,107,.4); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }

/* bisection timeline svg holder */
.nbb-time { padding: 22px 20px 6px; }
.nbb-time svg { width: 100%; height: auto; display: block; }
.nbb-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: #7f93c4; text-align: center; padding: 0 20px 16px; }

/* before / after diff */
.nbb-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(120,150,220,.18); border-top: 1px solid rgba(120,150,220,.18); }
.nbb-diff .side { background: #0b1838; padding: 15px 18px; text-align: left; }
.nbb-bar, .nbb-verdict .vtx { text-align: left; }
.nbb-diff .side .sh { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 11px; }
.nbb-diff .side .sh .tdot { width: 8px; height: 8px; border-radius: 50%; }
.nbb-diff .side.ok .sh { color: #6fe0b0; } .nbb-diff .side.ok .sh .tdot { background: #1f9d6b; box-shadow: 0 0 8px rgba(31,157,107,.7); }
.nbb-diff .side.bad .sh { color: #ff9a93; } .nbb-diff .side.bad .sh .tdot { background: #ff4d4f; box-shadow: 0 0 8px rgba(255,77,79,.7); }
.nbb-diff code { display: block; font-family: var(--mono); font-size: 11.5px; line-height: 1.85; color: #aebdde; white-space: pre; overflow-x: auto; }
.nbb-diff .ln { display: block; padding: 0 8px; border-radius: 4px; }
.nbb-diff .ln.add { background: rgba(31,157,107,.16); color: #b9f0d4; }
.nbb-diff .ln.del { background: rgba(255,77,79,.15); color: #ffc4c1; }
.nbb-diff .ln.ctx { color: #8497c4; }
@media (max-width: 720px) { .nbb-diff { grid-template-columns: 1fr; } }

/* footnote chips under the recorder */
.nbb-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.nbb-foot span { font-size: 13px; color: #cfdaf3; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 15px; }
.nbb-foot span b { color: #fff; } .nbb-foot .ck { color: #6fe0b0; font-weight: 800; margin-right: 5px; }

/* timeline animation: the search "narrows" then the break is found */
.nbb-time .probe { opacity: 0; }
.marquee.in .nbb-time .probe { animation: probeIn .5s ease-out forwards; }
.marquee.in .nbb-time .p1 { animation-delay: .3s; }
.marquee.in .nbb-time .p2 { animation-delay: .9s; }
.marquee.in .nbb-time .p3 { animation-delay: 1.5s; }
.nbb-time .found { opacity: 0; }
.marquee.in .nbb-time .found { animation: probeIn .6s cubic-bezier(.2,1.3,.4,1) forwards; animation-delay: 2.1s; }
@keyframes probeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nbb-time .sweep { opacity: 0; }
.marquee.in .nbb-time .sweep { animation: sweepGrow 1.8s ease-out forwards; animation-delay: .3s; }
@keyframes sweepGrow { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .nbb-bar .rec { animation: none; }
  .nbb-time .probe, .nbb-time .found, .nbb-time .sweep { opacity: 1; animation: none; }
}
/* no-JS fallback: if .in never gets added, still show the finished result */
.no-js .nbb-time .probe, .no-js .nbb-time .found, .no-js .nbb-time .sweep { opacity: 1; }

/* ============================================================
   A+ visual pass — result/status cards get a brand accent bar,
   richer header, and real depth (applies site-wide).
   ============================================================ */
.drift, .mig, .chat { position: relative; box-shadow: var(--shadow); }
.drift::before, .mig::before, .chat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}
.drift .dh, .mig .mh, .chat .ch { background: linear-gradient(180deg, #fbfcff, var(--soft)); }
/* the studio/import card "drift" rows get a touch more separation */
.drift .row { transition: background 120ms ease; }

/* Fix: bold text inside light subheads on DARK fields must stay light (was inheriting dark --ink, going invisible on the hero) */
.hero .sub b, .phero .sub b, .hero .trust b, .final p b, .final b { color: #fff; }

/* "by CybrIQ" attribution under the CrossConnect logo (small, brand colors) */
.logo .cc-lk { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.05; }
.logo .cc-by { font-size: 8.5px; font-weight: 600; letter-spacing: .02em; margin-top: 3px; color: #7a8499; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.logo .cc-by .cybriq-mark { height: 15px; width: auto; display: inline-block; }

/* AV & broadcast readiness rows (homepage §06) */
.avrow { display: flex; align-items: center; gap: 12px; margin: 9px 0; }
.avlbl { font-size: 13.5px; color: var(--body); flex: 1 1 210px; min-width: 0; }
.avbar { flex: 1 1 90px; height: 8px; border-radius: 999px; background: var(--soft-2); overflow: hidden; }
.avbar i { display: block; height: 100%; border-radius: 999px; }
.avstat { font-family: var(--mono); font-size: 12px; font-weight: 700; flex: 0 0 auto; min-width: 54px; text-align: right; }
@media (max-width: 560px) { .avrow { flex-wrap: wrap; gap: 6px 12px; } .avlbl { flex-basis: 100%; } }

/* Vendor coverage band (homepage, after topology) */
.vcov { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 940px; margin: 26px auto 0; text-align: left; }
.vcard { border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); padding: 16px 18px; border-top: 3px solid var(--teal); }
.vcard.f2 { border-top-color: var(--blue); } .vcard.f3 { border-top-color: var(--orange); }
.vcard .vk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.vcard.f2 .vk { color: var(--blue); } .vcard.f3 .vk { color: var(--orange); }
.vcard .vd { font-size: 13.5px; color: var(--body); margin: 7px 0 11px; line-height: 1.55; }
.vcard .vv { font-size: 13px; color: var(--navy); font-weight: 600; border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 720px) { .vcov { grid-template-columns: 1fr; } }

/* Camera fleet rows (homepage, cameras & occupancy band) */
.camrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.camrow .cdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.camrow .cnm { font-size: 13.5px; color: var(--ink); flex: 1 1 auto; }
.camrow .cst { font-family: var(--mono); font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }


/* --- Grouped "For your role" nav dropdown (audience pages) --- */
.nav .nav-group { position: relative; display: inline-block; margin-left: 26px; padding-bottom: 12px; margin-bottom: -12px; }
.nav .nav-group > .nav-parent { color: var(--body); font-weight: 600; font-size: 14.5px; cursor: default; user-select: none; position: relative; padding-bottom: 3px; }
.nav .nav-group:hover > .nav-parent, .nav .nav-group:focus-within > .nav-parent { color: var(--ink); }
.nav .nav-group > .nav-parent .cv { font-style: normal; font-size: 11px; opacity: .7; margin-left: 3px; transition: transform .15s ease; display: inline-block; }
.nav .nav-group:hover > .nav-parent .cv, .nav .nav-group:focus-within > .nav-parent .cv { transform: rotate(180deg); }
.nav .nav-group > .nav-parent.here { color: var(--navy); }
.nav .nav-group > .nav-parent.here::after { content: ""; position: absolute; left: 0; right: 14px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--teal); }
.nav .nav-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 188px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 60; }
.nav .nav-group:hover .nav-menu, .nav .nav-group:focus-within .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav .nav-menu a { margin-left: 0; padding: 10px 13px; border-radius: 9px; font-size: 14px; white-space: nowrap; display: flex; align-items: baseline; gap: 9px; }
.nav .nav-menu a .rl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.nav .nav-menu a:hover { background: var(--soft); color: var(--navy); }
.nav .nav-menu a:hover .rl { color: var(--teal); }
.nav .nav-menu a.here { background: var(--soft); color: var(--navy); }
.nav .nav-menu a.here .rl { color: var(--teal); }

/* --- Mermaid diagrams on role pages --- */
.cc-mermaid { max-width: 860px; margin: 28px auto 0; }
.cc-mermaid .mermaid { background: #fbfcfe; border: 1px solid var(--line); border-radius: 14px; padding: 24px 18px; box-shadow: var(--shadow-sm); text-align: center; }
.cc-mermaid .mermaid svg { max-width: 100%; height: auto; }
.cc-mermaid .mcap { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.mermaid .edgeLabel, .mermaid .edgeLabel p, .mermaid span.edgeLabel { color: #1d2733 !important; fill: #1d2733 !important; background-color: #eef5fa !important; }
.mermaid .edgeLabel rect { fill: #eef5fa !important; opacity: 1 !important; }
.mermaid .cluster-label, .mermaid .cluster-label p, .mermaid .cluster-label span, .mermaid .cluster-label div { color: #173a6b !important; fill: #173a6b !important; font-weight: 600; }
.mermaid g.cluster rect { fill: #f6f9fc !important; stroke: #9aa8c0 !important; }

/* --- Mobile navigation (hamburger + tappable role menu) --- */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .top { position: sticky; }
  .top.nav-open { background: #fff; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 40px; padding: 0 10px; margin-left: auto;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  }
  .nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease; }
  .top.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .top.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* nav becomes an opaque dropdown panel anchored under the header bar */
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
    flex-direction: column; align-items: stretch;
    background: #fff; border-top: 1px solid var(--line); box-shadow: var(--shadow);
    margin: 0; padding: 4px 28px 14px; }
  .top.nav-open .nav { display: flex; }
  .nav a:not(.btn) { display: block; }                 /* override the desktop hide rule */
  .nav > a { margin-left: 0; padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav > a.here::after { display: none; }

  /* role dropdown renders flat: a labeled group with its links indented */
  .nav .nav-group { margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
  .nav .nav-group > .nav-parent { display: block; padding: 13px 4px 6px; cursor: default;
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .nav .nav-group > .nav-parent.here::after { display: none; }
  .nav .nav-group > .nav-parent .cv { display: none; }
  .nav .nav-menu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 8px; gap: 0; }
  .nav .nav-menu a { padding: 11px 4px 11px 18px; font-size: 15.5px; border-radius: 0; }
}