/* New homepage directions: shared helpers. No JavaScript. */
.nsec { padding: 120px 0; }
.nsec + .nsec { padding-top: 24px; }
.neb { margin: 0 0 16px; font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; color: var(--red); }
.neb--light { color: #FF8A91; }
.nhead { max-width: 820px; }
.nhead--c { margin: 0 auto; text-align: center; }
.nhead h2 { line-height: 1.15; }
.nhead h2 span { color: var(--red); }
.nhead > p:not(.neb) { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.nhead--c > p:not(.neb) { margin-inline: auto; max-width: 720px; }
.ndark { background: var(--deep, #23123F); color: #fff; }
.ndark .nhead h2 { color: #fff; } .ndark .nhead h2 span { color: #FF8A91; } .ndark .nhead > p:not(.neb) { color: rgba(255,255,255,.78); }
.nband { margin: 0 16px; border-radius: 32px; }
.nlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--violet); }
.nlink::after { content: "\2192"; transition: translate .2s; } .nlink:hover::after { translate: 3px 0; }
.ndark .nlink { color: #fff; }
.ntick { position: relative; padding-left: 24px; } .ntick::before { content: ""; position: absolute; left: 3px; top: .35em; width: 5px; height: 10px; border: solid var(--violet); border-width: 0 2px 2px 0; rotate: 45deg; }
@media (max-width: 900px) { .nsec { padding: 80px 0; } .nband { margin: 0 8px; border-radius: 24px; } }

/* ===== scroll reveal (only where supported) ===== */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .rv { animation: rv6 linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes rv6 { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
} }
.sb { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; }
.sb--c { background: #D92D20; } .sb--h { background: #F97316; } .sb--m { background: #F5B83D; color: var(--ink); } .sb--l { background: #5B8DEF; }

/* ===== HERO: changing signals ===== */
.h6 { position: relative; overflow: hidden; min-height: 780px; display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, #fff 0%, #F5F0FC 100%); border: 1px solid rgba(112,52,196,.1); }
.h6__copy { position: relative; z-index: 1; display: grid; justify-items: center; }
.h6 h1 { font-size: clamp(54px, 8vw, 120px); line-height: .95; font-weight: 600; letter-spacing: -0.04em; }
.h6 h1 span { display: block; color: var(--red); }
.h6__sub { max-width: 640px; margin: 28px auto 32px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.h6__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hs { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hs__slot { position: absolute; width: 330px; height: 46px; }
.hs__slot--1 { left: 4%; top: 12%; } .hs__slot--2 { right: 4%; top: 15%; } .hs__slot--3 { left: 2%; top: 46%; } .hs__slot--4 { right: 2%; top: 50%; } .hs__slot--5 { left: 7%; bottom: 11%; } .hs__slot--6 { right: 6%; bottom: 9%; }
.hs__m { position: absolute; inset: 0 auto auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; box-shadow: 0 16px 34px -20px rgba(35,18,63,.45); border: 1px solid rgba(16,24,40,.06); font-size: 14px; color: var(--ink-2); white-space: nowrap; opacity: 0; }
.hs__slot:nth-child(even) .hs__m { inset: 0 0 auto auto; }
.hs__m:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hs__m { opacity: 0; animation: hsm 12s ease-in-out infinite; animation-delay: calc(var(--k) * 4s + var(--s) * .7s - 12s); }
  @keyframes hsm { 0% { opacity: 0; translate: 0 10px; } 4%, 30% { opacity: 1; translate: 0 0; } 34%, 100% { opacity: 0; translate: 0 -10px; } }
}
@media (max-width: 1150px) { .hs__slot--3, .hs__slot--4 { display: none; } }
@media (max-width: 760px) { .h6 { min-height: 0; padding: 110px 0 140px; } .hs__slot--1, .hs__slot--2 { display: none; } .hs__slot { width: auto; left: 16px !important; right: 16px !important; } .hs__slot--5 { bottom: 74px; } .hs__slot--6 { bottom: 22px; } .hs__m { font-size: 12.5px; } }

/* ===== TRUST ===== */
.tr6 { padding: 40px 0 24px; }
.tr6__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.tr6__cards li { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 24px 22px; border-radius: 22px; background: var(--warm); overflow: hidden; }
.tr6__cards b { display: flex; align-items: baseline; gap: 10px; font-size: 30px; font-weight: 500; color: var(--ink); } .tr6__cards b i { font-style: normal; font-size: 15px; color: #F5B83D; letter-spacing: 1px; }
.tr6__cards span { max-width: 78%; color: var(--ink-2); line-height: 1.4; font-size: 15px; }
.tr6__cards img { position: absolute; right: 20px; top: 22px; height: 22px; width: auto; opacity: .85; }
.tr6__cards li:nth-child(2) img { height: 28px; } .tr6__cards li:nth-child(3) img { height: 32px; }
.tr6__cards li:first-child { background: #F5F0FC; box-shadow: inset 0 0 0 1px rgba(112,52,196,.18); } .tr6__cards li:first-child b { color: var(--violet); }
.tr6__cards li:first-child img { height: 30px; opacity: 1; }
.tr6 .tmarq__track img { filter: none !important; opacity: 1; max-height: 34px; max-width: 120px; object-fit: contain; }
@media (max-width: 900px) { .tr6__cards { grid-template-columns: minmax(0, 1fr); } }

/* ===== STATEMENT with mouse trail ===== */
.st6 { position: relative; overflow: hidden; display: grid; align-items: center; min-height: 520px; margin-top: 56px; background: var(--deep, #23123F); }
.st6__field { position: absolute; inset: 10px; display: grid; grid-template-columns: repeat(28, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px; }
.st6__field i { border-radius: 8px; background: transparent; transition: background-color 1.8s ease, transform 1.8s ease; }
.st6__field i:hover { transition: none; transform: scale(.92); }
.st6__field i:nth-child(7n+1):hover { background: #D92D20; } .st6__field i:nth-child(7n+2):hover { background: #F97316; } .st6__field i:nth-child(7n+3):hover { background: #7034C4; }
.st6__field i:nth-child(7n+4):hover { background: #F5B83D; } .st6__field i:nth-child(7n+5):hover { background: #5B2A9E; } .st6__field i:nth-child(7n+6):hover { background: #CE202C; } .st6__field i:nth-child(7n):hover { background: #4A2287; }
.st6__copy { position: relative; z-index: 1; pointer-events: none; }
.st6__txt { max-width: 980px; margin: 0 auto; text-align: center; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.14; letter-spacing: -0.015em; color: #fff; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .st6__txt { background: linear-gradient(90deg, #fff 50%, rgba(255,255,255,.28) 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: st6f linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  @keyframes st6f { to { background-position: 0 0; } }
} }
@media (hover: none) { .st6__field { display: none; } }
@media (max-width: 900px) { .st6 { min-height: 360px; margin-top: 32px; } }

/* ===== PROBLEM ===== */
.pb6__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 56px; }
.pb6__row--rev .pb6__vis { order: 2; }
.pb6__vis { position: relative; height: 340px; border-radius: 32px; overflow: hidden; }
.pb6__cap { position: absolute; left: 22px; bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: rgba(255,255,255,.6); }
.pb6__vis--a { background: var(--deep, #23123F); }
.pr { position: absolute; left: 30%; top: 22%; width: 40%; height: 52%; display: grid; grid-template-columns: repeat(2, 1fr); align-content: end; gap: 8px; padding: 16px; border: 2px dashed rgba(255,255,255,.35); border-radius: 20px; }
.pr span { position: absolute; left: 16px; top: 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
.pr i { height: 30px; border-radius: 8px; background: rgba(255,255,255,.1); }
.pp { position: absolute; width: 34px; height: 34px; font-size: 14px; }
.pp--1 { left: 10%; top: 16%; } .pp--2 { right: 12%; top: 12%; } .pp--3 { right: 8%; top: 56%; } .pp--4 { left: 8%; top: 60%; } .pp--5 { left: 46%; top: 82%; } .pp--6 { right: 22%; top: 82%; }
@media (prefers-reduced-motion: no-preference) {
  .pp { animation: ppin 7s ease-out infinite both; } .pp--2 { animation-delay: 1.1s; } .pp--3 { animation-delay: 2.2s; } .pp--4 { animation-delay: 3.3s; } .pp--5 { animation-delay: 4.4s; } .pp--6 { animation-delay: 5.5s; }
  @keyframes ppin { 0% { opacity: 0; scale: .4; box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 6% { opacity: 1; scale: 1.1; } 10% { scale: 1; box-shadow: 0 0 0 14px rgba(255,255,255,0); } 80% { opacity: 1; } 100% { opacity: 0; } }
}
.pb6__vis--b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 28px 28px 48px; background: var(--gray); }
.pb6__vis--b .pb6__cap { color: var(--muted); }
.fb { display: grid; align-content: start; gap: 8px; padding: 16px; border-radius: 16px; background: #fff; }
.fb:nth-child(2) { translate: 10px 8px; rotate: 1.5deg; } .fb:nth-child(3) { translate: -6px -4px; rotate: -1.5deg; } .fb:nth-child(4) { rotate: 1deg; }
.fb p { font-size: 13.5px; font-weight: 600; } .fb i { height: 8px; border-radius: 4px; background: #E4E7EC; } .fb i:nth-of-type(2n) { width: 70%; } .fb i:nth-of-type(3n) { width: 50%; }
@media (prefers-reduced-motion: no-preference) { .fb i { animation: fbp 3.2s ease-in-out infinite; animation-delay: calc(var(--j) * .4s); } @keyframes fbp { 0%, 100% { background: #E4E7EC; } 50% { background: #F7C8C8; } } }
.pb6__k { margin-bottom: 18px; font-size: 14px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; color: var(--red); }
.pb6__txt ul { margin: 0; padding: 0; list-style: none; }
.pb6__txt li { padding: 22px 0; border-top: 1px solid rgba(16,24,40,.12); color: var(--muted); line-height: 1.55; } .pb6__txt li:last-child { border-bottom: 1px solid rgba(16,24,40,.12); }
.pb6__txt b { display: block; margin-bottom: 8px; font-size: clamp(22px, 2vw, 26px); font-weight: 500; color: var(--ink); }
@media (max-width: 900px) { .pb6__row { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; } .pb6__row--rev .pb6__vis { order: 0; } .pb6__vis { height: 260px; } }

/* ===== SOLUTION: flow into one core ===== */
.cv { position: relative; aspect-ratio: 1000 / 420; max-width: 1120px; margin: 0 auto; }
.cv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cv__lines path { fill: none; stroke: rgba(112,52,196,.35); stroke-width: 2; stroke-dasharray: 6 8; }
@media (prefers-reduced-motion: no-preference) { .cv__lines path { animation: cvf 1.6s linear infinite; } @keyframes cvf { to { stroke-dashoffset: -28; } } }
.cv__dot { fill: #CE202C; }
@media (prefers-reduced-motion: reduce) { .cv__dot { display: none; } }
.cv__in { position: absolute; left: 0; top: 0; width: 25%; height: 100%; margin: 0; padding: 0; list-style: none; }
.cv__in li { position: absolute; right: 0; translate: 0 -50%; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(16,24,40,.1); box-shadow: 0 10px 24px -18px rgba(16,24,40,.5); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.cv__core { position: absolute; left: 60%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 16%; aspect-ratio: 1; border-radius: 50%; background: var(--deep, #23123F); }
.cv__core img { width: 66%; position: relative; }
.cv__core span { position: absolute; inset: 0; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .cv__core span { animation: cvc 2.4s ease-out infinite; } @keyframes cvc { 0% { box-shadow: 0 0 0 0 rgba(112,52,196,.45); } 100% { box-shadow: 0 0 0 36px rgba(112,52,196,0); } } }
.cv__out { position: absolute; left: 74%; top: 50%; translate: 0 -50%; width: 26%; padding: 22px 22px; border-radius: 20px; color: #fff; background: var(--deep, #23123F); }
.cv__k { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; color: #FF8A91; }
.cv__out ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .cv__out li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.35; }
.cv__out li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 5px; height: 10px; border: solid #FF8A91; border-width: 0 2px 2px 0; rotate: 45deg; }
@media (max-width: 900px) { .cv { aspect-ratio: auto; display: grid; gap: 14px; justify-items: center; } .cv__svg { display: none; } .cv__in, .cv__core, .cv__out { position: static; translate: none; width: auto; height: auto; }
  .cv__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .cv__in li { position: static; translate: none; white-space: normal; } .cv__core { width: 110px; } .cv__out { width: 100%; } }

/* ===== HOW: lifecycle loop ===== */
.lc6 { padding: 112px 0; color: #fff; background: var(--deep, #23123F); }
.lc6__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.lc6__copy { display: grid; gap: 16px; } .lc6__copy h2 { color: #fff; } .lc6__copy p:not(.eyebrow) { color: rgba(255,255,255,.8); line-height: 1.55; }
.lc { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.lc__ring { position: absolute; inset: 12%; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); }
.lc__arc { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(from -18deg, #FF5C66 0 36deg, transparent 36deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
@media (prefers-reduced-motion: no-preference) { .lc__arc { animation: lcr 15s linear infinite; } @keyframes lcr { to { rotate: 360deg; } } }
.lc__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.lc__n { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--i) * 72deg)) translateY(-38cqw) rotate(calc(var(--i) * -72deg)); outline: none; }
.lc__n span { position: absolute; left: 0; top: 0; translate: -50% -50%; display: block; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: var(--deep, #23123F); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: default; transition: background .3s, color .3s; }
.lc__center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 52%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.lc__c { position: absolute; display: grid; gap: 10px; opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s; }
.lc__c b { font-size: clamp(30px, 3vw, 42px); font-weight: 400; } .lc__c p { font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,.78); }
.lc__c--0 { opacity: 1; translate: 0 0; } .lc__n--0 span { background: #fff; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .lc__c { animation: lcc 15s linear infinite; animation-delay: calc(var(--i) * 3s - 15s); }
  @keyframes lcc { 0% { opacity: 0; translate: 0 8px; } 2%, 18% { opacity: 1; translate: 0 0; } 20%, 100% { opacity: 0; translate: 0 -8px; } }
  .lc__n span { animation: lcn 15s linear infinite; animation-delay: calc(var(--i) * 3s - 15s); }
  @keyframes lcn { 0%, 19% { background: #fff; color: var(--ink); border-color: #fff; } 20%, 100% { background: var(--deep, #23123F); color: #fff; border-color: rgba(255,255,255,.3); } }
  .lc:has(.lc__n:hover, .lc__n:focus-visible) .lc__c, .lc:has(.lc__n:hover, .lc__n:focus-visible) .lc__n span { animation: none; }
  .lc:has(.lc__n:hover, .lc__n:focus-visible) .lc__c { opacity: 0; }
  .lc:has(.lc__n:hover, .lc__n:focus-visible) .lc__n span { background: var(--deep, #23123F); color: #fff; }
  .lc:has(.lc__n:hover) .lc__arc { animation-play-state: paused; }
}
@media (max-width: 900px) { .lc6__grid { grid-template-columns: minmax(0, 1fr); } .lc__n span { font-size: 13.5px; padding: 8px 12px; } .lc__c p { font-size: 13.5px; } }

/* ===== EXPLORE ===== */
.ex__o, .ex__r { position: absolute; opacity: 0; pointer-events: none; }
.ex__seg { display: flex; width: max-content; max-width: 100%; margin: 0 auto 40px; padding: 5px; border-radius: 999px; background: var(--gray); }
.ex__seg label { padding: 10px 24px; border-radius: 999px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .25s, color .25s; }
.ex__g { display: none; }
.ex__wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.ex__c { display: none; grid-template-rows: 300px auto; overflow: hidden; border-radius: 28px; background: var(--warm); }
.ex__img { width: 100%; height: 100%; object-fit: cover; }
.ex__img--dash { background: #120A22 url("images/dashboard-hero.webp") no-repeat; background-size: 230%; }
.ex__t { display: grid; align-content: start; gap: 12px; padding: 28px 32px 32px; }
.ex__t h3 { font-size: 26px; } .ex__t p { color: var(--ink-2); line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .ex__c { animation: exin .5s ease-out both; } .ex__c .ex__img { animation: exzoom 8s ease-out both; }
  @keyframes exin { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes exzoom { from { scale: 1.06; } to { scale: 1; } }
}
.ex__list { display: grid; align-content: center; border-top: 1px solid var(--border); }
.ex__l { position: relative; display: block; padding: 22px 8px; border-bottom: 1px solid var(--border); font-size: 19px; color: var(--muted); cursor: pointer; transition: color .25s, padding .25s; }
.ex__l::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--red); transform: scaleY(0); transition: transform .3s; }
.ex__l:hover { color: var(--ink); }
@media (max-width: 900px) { .ex__seg label { padding: 9px 14px; font-size: 14px; } .ex__wrap { grid-template-columns: minmax(0, 1fr); } .ex__list { order: -1; } .ex__l { padding: 14px 8px; font-size: 16px; } .ex__c { grid-template-rows: 200px auto; } .ex__t { padding: 22px; } }

/* ===== PLATFORMS ===== */
.pl6__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
.pl6__c { position: relative; display: grid; align-content: start; justify-items: start; gap: 18px; padding: 44px 44px 0; border-radius: 32px; overflow: hidden; }
.pl6__c > p { max-width: 520px; font-size: 17px; line-height: 1.55; }
.pl6__c .btn { min-height: 40px; padding: 8px 18px; font-size: 14.5px; }
.btn--light { background: #fff; color: var(--violet); }
.pl6__logo { height: 62px; width: auto; }
.pl6__c--dc { color: #fff; background: var(--deep, #23123F); } .pl6__c--dc > p { color: rgba(255,255,255,.8); }
.pl6__c--dt { background: var(--warm); } .pl6__c--dt > p { color: var(--ink-2); }
.pl6__shot { width: 112%; max-width: none; margin-top: 16px; transform-origin: left top; transition: transform .6s ease; -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); }
.pl6__photo { width: calc(100% + 88px); max-width: none; margin: 16px -44px 0; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s ease; }
.pl6__c:hover .pl6__shot, .pl6__c:hover .pl6__photo { transform: translateY(-8px); }
@media (max-width: 900px) { .pl6__grid { grid-template-columns: minmax(0, 1fr); } .pl6__c { padding: 28px 22px 0; } .pl6__photo { width: calc(100% + 44px); margin: 12px -22px 0; } }

/* ===== BENEFITS + NUMBERS ===== */
.bn6__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bn6__list li { display: grid; align-content: start; gap: 10px; padding: 28px 24px; border-radius: 24px; border: 1px solid rgba(16,24,40,.1); color: var(--muted); line-height: 1.5; transition: background .3s, color .3s, transform .3s; }
.bn6__list b { font-size: 22px; font-weight: 500; color: var(--ink); transition: color .3s; }
.bn6__list li:hover { background: var(--deep, #23123F); color: rgba(255,255,255,.78); transform: translateY(-4px); } .bn6__list li:hover b { color: #fff; }
.bn6__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 64px 0 0; padding-top: 40px; border-top: 1px solid var(--border); }
.bn6__nums div { display: grid; gap: 8px; text-align: center; } .bn6__nums dd { margin: 0; order: -1; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; } .bn6__nums dt { color: var(--ink-2); }
@media (max-width: 900px) { .bn6__list, .bn6__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 560px) { .bn6__list { grid-template-columns: minmax(0, 1fr); } }

/* ===== three gaps ===== */
.gp6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gp6__c { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 12px; padding: 14px 14px 30px; border-radius: 30px; border: 1px solid rgba(16,24,40,.1); background: #fff; }
.gp6__c > :not(.gp6__vis) { margin-inline: 14px; }
.gp6__vis { position: relative; height: 230px; margin-bottom: 10px; border-radius: 22px; overflow: hidden; }
.gp6__vis.pb6__vis--b { padding: 18px 18px 18px; gap: 12px; }
.gp6__k { font-size: 14px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; color: var(--red); }
.gp6__c h3 { font-size: 23px; line-height: 1.25; } .gp6__c > p:not(.gp6__k) { color: var(--muted); line-height: 1.55; font-size: 15.5px; }
.gp6__vis--ctx .fb { padding: 12px; } .gp6__vis--ctx .fb p { font-size: 12.5px; }
.gp6__broken { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; border-radius: 50%; border: 2px dashed rgba(206,32,44,.55); background: #fff; }
.gp6__broken::before, .gp6__broken::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: var(--red); translate: -50% -50%; rotate: 45deg; } .gp6__broken::after { rotate: -45deg; }
.gp6__vis--act { background: var(--deep, #23123F); padding: 16px 18px; }
.al { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.al li { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(255,255,255,.08); }
.al li .sb { width: 22px; height: 22px; font-size: 11px; } .al li i { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); } .al li:nth-child(even) i { flex: .6; }
@media (prefers-reduced-motion: no-preference) {
  .al li { animation: alin 8s ease-out infinite both; animation-delay: calc(var(--a) * .45s); }
  @keyframes alin { 0% { opacity: 0; translate: 0 -10px; } 6%, 88% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
}
.gp6__q { display: grid; gap: 8px; color: var(--muted); } .gp6__q b { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); }
.gp6__rot { position: relative; display: block; min-height: 3.2em; }
.gp6__rot span { position: absolute; inset: 0 auto auto 0; font-size: 19px; line-height: 1.35; color: var(--ink); opacity: 0; }
.gp6__rot span:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .gp6__rot span { opacity: 0; animation: gq 15s ease-in-out infinite; animation-delay: calc(var(--q) * 3s - 15s); }
  @keyframes gq { 0% { opacity: 0; translate: 0 8px; } 3%, 17% { opacity: 1; translate: 0 0; } 20%, 100% { opacity: 0; translate: 0 -8px; } }
}
@media (prefers-reduced-motion: reduce) { .gp6__rot { min-height: 0; } .gp6__rot span { position: static; display: block; opacity: 1; font-size: 15.5px; } }
@media (max-width: 1000px) { .gp6 { grid-template-columns: minmax(0, 1fr); } }

/* ===== round 2 ===== */
/* statement band: a few squares glow on their own (calm); the mouse still paints the rest */
.st6 { background: radial-gradient(70% 90% at 50% 120%, #3A1D66, transparent 70%), var(--deep, #23123F); }
.st6__field { -webkit-mask: radial-gradient(ellipse 46% 42% at 50% 50%, rgba(0,0,0,.18) 55%, #000 85%); mask: radial-gradient(ellipse 46% 42% at 50% 50%, rgba(0,0,0,.18) 55%, #000 85%); }
.st6__field i { display: grid; place-items: center; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .st6__field i:nth-child(9) { animation: sf0 12s ease-in-out infinite; animation-delay: -0.0s; }
  .st6__field i:nth-child(9)::after { content: "9"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -0.0s; }
  .st6__field i:nth-child(40) { animation: sf1 12s ease-in-out infinite; animation-delay: -2.0s; }
  .st6__field i:nth-child(40)::after { content: "7"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -2.0s; }
  .st6__field i:nth-child(63) { animation: sf2 12s ease-in-out infinite; animation-delay: -5.0s; }
  .st6__field i:nth-child(63)::after { content: "8"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -5.0s; }
  .st6__field i:nth-child(88) { animation: sf3 12s ease-in-out infinite; animation-delay: -1.0s; }
  .st6__field i:nth-child(88)::after { content: "4"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -1.0s; }
  .st6__field i:nth-child(101) { animation: sf0 12s ease-in-out infinite; animation-delay: -7.0s; }
  .st6__field i:nth-child(101)::after { content: "9"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -7.0s; }
  .st6__field i:nth-child(130) { animation: sf1 12s ease-in-out infinite; animation-delay: -3.0s; }
  .st6__field i:nth-child(130)::after { content: "7"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -3.0s; }
  .st6__field i:nth-child(152) { animation: sf2 12s ease-in-out infinite; animation-delay: -9.0s; }
  .st6__field i:nth-child(152)::after { content: "8"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -9.0s; }
  .st6__field i:nth-child(171) { animation: sf3 12s ease-in-out infinite; animation-delay: -4.0s; }
  .st6__field i:nth-child(171)::after { content: "4"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -4.0s; }
  .st6__field i:nth-child(196) { animation: sf0 12s ease-in-out infinite; animation-delay: -6.0s; }
  .st6__field i:nth-child(196)::after { content: "9"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -6.0s; }
  .st6__field i:nth-child(214) { animation: sf1 12s ease-in-out infinite; animation-delay: -8.0s; }
  .st6__field i:nth-child(214)::after { content: "7"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -8.0s; }
  .st6__field i:nth-child(27) { animation: sf2 12s ease-in-out infinite; animation-delay: -10.0s; }
  .st6__field i:nth-child(27)::after { content: "8"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -10.0s; }
  .st6__field i:nth-child(118) { animation: sf3 12s ease-in-out infinite; animation-delay: -11.0s; }
  .st6__field i:nth-child(118)::after { content: "4"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -11.0s; }
  .st6__field i:nth-child(145) { animation: sf0 12s ease-in-out infinite; animation-delay: -5.5s; }
  .st6__field i:nth-child(145)::after { content: "9"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -5.5s; }
  .st6__field i:nth-child(205) { animation: sf1 12s ease-in-out infinite; animation-delay: -2.5s; }
  .st6__field i:nth-child(205)::after { content: "7"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -2.5s; }
  .st6__field i:nth-child(57) { animation: sf2 12s ease-in-out infinite; animation-delay: -8.5s; }
  .st6__field i:nth-child(57)::after { content: "8"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -8.5s; }
  .st6__field i:nth-child(183) { animation: sf3 12s ease-in-out infinite; animation-delay: -0.8s; }
  .st6__field i:nth-child(183)::after { content: "4"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: sfn 12s ease-in-out infinite; animation-delay: -0.8s; }
  @keyframes sf0 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(217,45,32,.85); } }
  @keyframes sf1 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(249,115,22,.85); } }
  @keyframes sf2 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(112,52,196,.85); } }
  @keyframes sf3 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(245,184,61,.85); } }
  @keyframes sfn { 0%, 38%, 62%, 100% { opacity: 0; } 46%, 54% { opacity: 1; } }
}
.st6__txt span { color: #FF8A91; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .st6__txt span { color: inherit; } } }
.st6__copy::before { content: "Our view"; display: block; margin: 0 auto 22px; width: max-content; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); font-size: 13px; font-weight: 600; letter-spacing: .5px; color: rgba(255,255,255,.75); }

/* visibility gap: internal sweep only looks inward, signals form outside */
.vg { background: var(--deep, #23123F); }
.vg__org { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.35); overflow: hidden; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.25; color: rgba(255,255,255,.8); }
.vg__org span { position: relative; }
.vg__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(112,52,196,.65), transparent 30%); }
@media (prefers-reduced-motion: no-preference) { .vg__sweep { animation: vgs 4s linear infinite; } @keyframes vgs { to { rotate: 360deg; } } }
.vc { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(0,0,0,.6); }
.vc .sb { width: 20px; height: 20px; font-size: 11px; }
.vc--v1 { left: 5%; top: 9%; } .vc--v2 { right: 5%; top: 15%; } .vc--v3 { left: 5%; bottom: 13%; } .vc--v4 { right: 5%; bottom: 8%; }
@media (prefers-reduced-motion: no-preference) {
  .vc { animation: vcin 7.5s ease-out infinite both; } .vc--v2 { animation-delay: 1.4s; } .vc--v3 { animation-delay: 2.8s; } .vc--v4 { animation-delay: 4.2s; } .vc--v5 { animation-delay: 5.6s; }
  @keyframes vcin { 0% { opacity: 0; scale: .7; } 6% { opacity: 1; scale: 1.04; } 10%, 82% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
}

/* action gap: an endless, unprioritized queue */
.ag { display: grid; grid-template-rows: auto 1fr; padding: 16px 16px 0; background: var(--deep, #23123F); }
.ag__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: #fff; }
.ag__h span { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11px; font-weight: 600; color: rgba(255,255,255,.75); }
.ag__feed { overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); mask: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); }
.ag__feed ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ag__feed li { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 12.5px; color: rgba(255,255,255,.85); }
.ag__feed .sb { width: 22px; height: 22px; font-size: 11px; }
@media (prefers-reduced-motion: no-preference) { .ag__feed ul { animation: agf 14s linear infinite; } @keyframes agf { to { transform: translateY(calc(-50% - 3.5px)); } } }
.ag__q { position: absolute; right: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px; border: 1px dashed #FF8A91; background: #2E1854; font-size: 13px; font-weight: 600; color: #fff; }
@media (prefers-reduced-motion: no-preference) { .ag__q { animation: agq 2.4s ease-in-out infinite; } @keyframes agq { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,145,.45); } 50% { box-shadow: 0 0 0 10px rgba(255,138,145,0); } } }

/* solution inputs: what each covers */
.cv__in li { display: grid; gap: 2px; text-align: right; } .cv__in li small { font-size: 12px; font-weight: 400; color: var(--muted); }

/* pillar tab text */
.ex__g--cap .ex__t p { font-size: 15.5px; } .ex__g--cap .ex__t p span { color: var(--red); margin: 0 4px; }

/* round 4: team bullets + pillar links */
.ex__bl { display: grid; gap: 8px; margin: 2px 0 6px; padding: 0; list-style: none; }
.ex__bl li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink); }
.ex__bl li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 5px; height: 10px; border: solid var(--violet); border-width: 0 2px 2px 0; rotate: 45deg; }
.ex__pl { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ex__pl a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(16,24,40,.08); font-weight: 600; font-size: 15.5px; color: var(--ink); transition: border-color .2s, color .2s; }
.ex__pl a::after { content: "\2192"; color: var(--violet); transition: translate .2s; }
.ex__pl a:hover { border-color: rgba(112,52,196,.45); color: var(--violet); } .ex__pl a:hover::after { translate: 3px 0; }
.ex__c { grid-template-rows: 260px auto; }
@media (max-width: 900px) { .ex__c { grid-template-rows: 200px auto; } }

/* ===== round 5: lighter, more polished ===== */
/* core: brand rings */
.cv__core { overflow: visible; background: radial-gradient(circle at 50% 35%, #4A2287, var(--deep, #23123F) 70%); box-shadow: 0 24px 50px -24px rgba(35,18,63,.7); }
.cv__r1, .cv__r2 { position: absolute; border-radius: 50%; pointer-events: none; }
.cv__r1 { inset: -16%; border: 2px dashed rgba(112,52,196,.35); }
.cv__r2 { inset: -32%; background: conic-gradient(from 20deg, transparent 0 40deg, rgba(206,32,44,.55) 40deg 70deg, transparent 70deg 200deg, rgba(112,52,196,.5) 200deg 250deg, transparent 250deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
@media (prefers-reduced-motion: no-preference) { .cv__r1 { animation: cvr 30s linear infinite; } .cv__r2 { animation: cvr 18s linear infinite reverse; } @keyframes cvr { to { rotate: 360deg; } } }
@media (max-width: 900px) { .cv__r1, .cv__r2 { display: none; } }
/* output card: light, numbered */
.cv__out { color: var(--ink); background: #fff; border: 1px solid rgba(112,52,196,.2); box-shadow: 0 30px 60px -38px rgba(35,18,63,.55); padding: 22px; }
.cv__out .cv__k { color: var(--violet); }
.cv__out ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cv__out ol li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.cv__out ol li::before { content: none; }
.cv__out ol i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #F1EAFB; font-style: normal; font-size: 13px; font-weight: 700; color: var(--violet); }
@media (prefers-reduced-motion: no-preference) {
  .cv__out ol li { animation: cvo 6s ease-in-out infinite; } .cv__out ol li:nth-child(2) { animation-delay: 2s; } .cv__out ol li:nth-child(3) { animation-delay: 4s; }
  @keyframes cvo { 0%, 30%, 100% { background: transparent; } 8%, 24% { background: #F5F0FC; } }
  .cv__out ol li i { animation: cvi 6s ease-in-out infinite; animation-delay: inherit; } .cv__out ol li:nth-child(2) i { animation-delay: 2s; } .cv__out ol li:nth-child(3) i { animation-delay: 4s; }
  @keyframes cvi { 0%, 30%, 100% { background: #F1EAFB; color: var(--violet); } 8%, 24% { background: var(--red); color: #fff; } }
}
/* capability strip under the flow */
.cvk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(16,24,40,.12); }
.cvk li { position: relative; padding: 22px 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .cvk li + li { padding-left: 18px; border-left: 1px solid var(--border); }
.cvk li::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--violet); transition: width .4s; } .cvk li + li::before { left: 18px; }
.cvk li:hover::before { width: 48px; }
.cvk b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
@media (max-width: 1000px) { .cvk { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } .cvk li + li { padding-left: 0; border-left: 0; } .cvk li + li::before { left: 0; } }
@media (max-width: 560px) { .cvk { grid-template-columns: minmax(0, 1fr); } }

/* loop: DeCYFIR-dial style segmented ring + ticks; the active segment steps with the stage */
.lc__ring { border: 0; background: repeating-conic-gradient(from -34deg, rgba(255,255,255,.14) 0 68deg, transparent 68deg 72deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.lc__ticks { position: absolute; inset: 9%; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.22) 0 .7deg, transparent .7deg 6deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.lc__arc { inset: 0; background: conic-gradient(from -34deg, #FF5C66 0 68deg, transparent 68deg); -webkit-mask: none; mask: none; }
@media (prefers-reduced-motion: no-preference) { .lc__arc { animation: lcr 15s steps(5, end) infinite; } }
.lc__ring { overflow: visible; }
.lc::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(112,52,196,.28), transparent 70%); }

/* benefits: N4 layout on light violet */
.bn6 { padding: 104px 0; margin-top: 24px; background: linear-gradient(180deg, #F5F0FC, #FBF9FE); }
.bn6__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; }
.bn6__top p { color: var(--ink-2); line-height: 1.6; font-size: 17px; }
.bn6__list { gap: 0; margin: 48px 0 0; border-top: 1px solid rgba(112,52,196,.3); }
.bn6__list li { position: relative; padding: 28px 24px 0 0; border: 0; border-radius: 0; background: transparent !important; transform: none !important; color: var(--muted); font-size: 15px; }
.bn6__list li + li { padding-left: 24px; border-left: 1px solid rgba(112,52,196,.15); }
.bn6__list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 3px; background: var(--red); transition: width .4s; } .bn6__list li + li::before { left: 24px; }
.bn6__list li:hover::before { width: 80px; }
.bn6__list b { display: block; margin-bottom: 10px; font-size: 24px; font-weight: 400; color: var(--ink) !important; }
.bn6__list li:hover { color: var(--muted) !important; }
.bn6__nums { border-top: 1px solid rgba(112,52,196,.2); }
@media (max-width: 900px) { .bn6__top { grid-template-columns: minmax(0, 1fr); } .bn6__list li:nth-child(3) { padding-left: 0; border-left: 0; } .bn6__list li:nth-child(3)::before { left: 0; } }
@media (max-width: 560px) { .bn6__list li + li { padding-left: 0; border-left: 0; } .bn6__list li + li::before { left: 0; } }

/* DeCYFIR platform card: light violet */
.pl6__c--dc { color: var(--ink); background: linear-gradient(160deg, #F1EAFB, #F8F4FD); } .pl6__c--dc > p { color: var(--ink-2); }

/* statement readability: solid text, squares kept clear of the words */
.st6__txt { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; animation: none !important; text-shadow: 0 2px 30px rgba(20,8,40,.9); font-weight: 500; }
.st6__txt span { color: #FF8A91 !important; }
.st6__field { -webkit-mask: radial-gradient(ellipse 58% 52% at 50% 50%, transparent 62%, #000 92%) !important; mask: radial-gradient(ellipse 58% 52% at 50% 50%, transparent 62%, #000 92%) !important; }
.st6__copy { position: relative; }
.st6__copy::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1040px, 100%); height: 130%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(35,18,63,.95), rgba(35,18,63,0)); }

#exo-team:checked ~ .ex__g--team { display: block; }
#exo-team:checked ~ .ex__seg label[for=exo-team] { background: var(--deep, #23123F); color: #fff; }
#exo-team:focus-visible ~ .ex__seg label[for=exo-team] { outline: 2px solid var(--violet); outline-offset: 2px; }
#ex-team-0:checked ~ .ex__wrap .ex__c--0 { display: grid; }
#ex-team-0:checked ~ .ex__wrap .ex__l--0 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-team-0:checked ~ .ex__wrap .ex__l--0::before { transform: scaleY(1); }
#ex-team-0:focus-visible ~ .ex__wrap .ex__l--0 { outline: 2px solid var(--violet); }
#ex-team-1:checked ~ .ex__wrap .ex__c--1 { display: grid; }
#ex-team-1:checked ~ .ex__wrap .ex__l--1 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-team-1:checked ~ .ex__wrap .ex__l--1::before { transform: scaleY(1); }
#ex-team-1:focus-visible ~ .ex__wrap .ex__l--1 { outline: 2px solid var(--violet); }
#ex-team-2:checked ~ .ex__wrap .ex__c--2 { display: grid; }
#ex-team-2:checked ~ .ex__wrap .ex__l--2 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-team-2:checked ~ .ex__wrap .ex__l--2::before { transform: scaleY(1); }
#ex-team-2:focus-visible ~ .ex__wrap .ex__l--2 { outline: 2px solid var(--violet); }
#ex-team-3:checked ~ .ex__wrap .ex__c--3 { display: grid; }
#ex-team-3:checked ~ .ex__wrap .ex__l--3 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-team-3:checked ~ .ex__wrap .ex__l--3::before { transform: scaleY(1); }
#ex-team-3:focus-visible ~ .ex__wrap .ex__l--3 { outline: 2px solid var(--violet); }
#ex-team-4:checked ~ .ex__wrap .ex__c--4 { display: grid; }
#ex-team-4:checked ~ .ex__wrap .ex__l--4 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-team-4:checked ~ .ex__wrap .ex__l--4::before { transform: scaleY(1); }
#ex-team-4:focus-visible ~ .ex__wrap .ex__l--4 { outline: 2px solid var(--violet); }
#exo-uc:checked ~ .ex__g--uc { display: block; }
#exo-uc:checked ~ .ex__seg label[for=exo-uc] { background: var(--deep, #23123F); color: #fff; }
#exo-uc:focus-visible ~ .ex__seg label[for=exo-uc] { outline: 2px solid var(--violet); outline-offset: 2px; }
#ex-uc-0:checked ~ .ex__wrap .ex__c--0 { display: grid; }
#ex-uc-0:checked ~ .ex__wrap .ex__l--0 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-uc-0:checked ~ .ex__wrap .ex__l--0::before { transform: scaleY(1); }
#ex-uc-0:focus-visible ~ .ex__wrap .ex__l--0 { outline: 2px solid var(--violet); }
#ex-uc-1:checked ~ .ex__wrap .ex__c--1 { display: grid; }
#ex-uc-1:checked ~ .ex__wrap .ex__l--1 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-uc-1:checked ~ .ex__wrap .ex__l--1::before { transform: scaleY(1); }
#ex-uc-1:focus-visible ~ .ex__wrap .ex__l--1 { outline: 2px solid var(--violet); }
#ex-uc-2:checked ~ .ex__wrap .ex__c--2 { display: grid; }
#ex-uc-2:checked ~ .ex__wrap .ex__l--2 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-uc-2:checked ~ .ex__wrap .ex__l--2::before { transform: scaleY(1); }
#ex-uc-2:focus-visible ~ .ex__wrap .ex__l--2 { outline: 2px solid var(--violet); }
#ex-uc-3:checked ~ .ex__wrap .ex__c--3 { display: grid; }
#ex-uc-3:checked ~ .ex__wrap .ex__l--3 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-uc-3:checked ~ .ex__wrap .ex__l--3::before { transform: scaleY(1); }
#ex-uc-3:focus-visible ~ .ex__wrap .ex__l--3 { outline: 2px solid var(--violet); }
#exo-cap:checked ~ .ex__g--cap { display: block; }
#exo-cap:checked ~ .ex__seg label[for=exo-cap] { background: var(--deep, #23123F); color: #fff; }
#exo-cap:focus-visible ~ .ex__seg label[for=exo-cap] { outline: 2px solid var(--violet); outline-offset: 2px; }
#ex-cap-0:checked ~ .ex__wrap .ex__c--0 { display: grid; }
#ex-cap-0:checked ~ .ex__wrap .ex__l--0 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-cap-0:checked ~ .ex__wrap .ex__l--0::before { transform: scaleY(1); }
#ex-cap-0:focus-visible ~ .ex__wrap .ex__l--0 { outline: 2px solid var(--violet); }
#ex-cap-1:checked ~ .ex__wrap .ex__c--1 { display: grid; }
#ex-cap-1:checked ~ .ex__wrap .ex__l--1 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-cap-1:checked ~ .ex__wrap .ex__l--1::before { transform: scaleY(1); }
#ex-cap-1:focus-visible ~ .ex__wrap .ex__l--1 { outline: 2px solid var(--violet); }
#ex-cap-2:checked ~ .ex__wrap .ex__c--2 { display: grid; }
#ex-cap-2:checked ~ .ex__wrap .ex__l--2 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-cap-2:checked ~ .ex__wrap .ex__l--2::before { transform: scaleY(1); }
#ex-cap-2:focus-visible ~ .ex__wrap .ex__l--2 { outline: 2px solid var(--violet); }
#ex-cap-3:checked ~ .ex__wrap .ex__c--3 { display: grid; }
#ex-cap-3:checked ~ .ex__wrap .ex__l--3 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-cap-3:checked ~ .ex__wrap .ex__l--3::before { transform: scaleY(1); }
#ex-cap-3:focus-visible ~ .ex__wrap .ex__l--3 { outline: 2px solid var(--violet); }
#ex-cap-4:checked ~ .ex__wrap .ex__c--4 { display: grid; }
#ex-cap-4:checked ~ .ex__wrap .ex__l--4 { color: var(--ink); font-weight: 600; padding-left: 22px; }
#ex-cap-4:checked ~ .ex__wrap .ex__l--4::before { transform: scaleY(1); }
#ex-cap-4:focus-visible ~ .ex__wrap .ex__l--4 { outline: 2px solid var(--violet); }
.lc:has(.lc__n--0:hover) .lc__c--0, .lc:has(.lc__n--0:focus-visible) .lc__c--0 { opacity: 1; translate: 0 0; }
.lc:has(.lc__n--0:hover) .lc__n--0 span, .lc:has(.lc__n--0:focus-visible) .lc__n--0 span { background: #fff; color: var(--ink); border-color: #fff; }
.lc:has(.lc__n--1:hover) .lc__c--1, .lc:has(.lc__n--1:focus-visible) .lc__c--1 { opacity: 1; translate: 0 0; }
.lc:has(.lc__n--1:hover) .lc__n--1 span, .lc:has(.lc__n--1:focus-visible) .lc__n--1 span { background: #fff; color: var(--ink); border-color: #fff; }
.lc:has(.lc__n--2:hover) .lc__c--2, .lc:has(.lc__n--2:focus-visible) .lc__c--2 { opacity: 1; translate: 0 0; }
.lc:has(.lc__n--2:hover) .lc__n--2 span, .lc:has(.lc__n--2:focus-visible) .lc__n--2 span { background: #fff; color: var(--ink); border-color: #fff; }
.lc:has(.lc__n--3:hover) .lc__c--3, .lc:has(.lc__n--3:focus-visible) .lc__c--3 { opacity: 1; translate: 0 0; }
.lc:has(.lc__n--3:hover) .lc__n--3 span, .lc:has(.lc__n--3:focus-visible) .lc__n--3 span { background: #fff; color: var(--ink); border-color: #fff; }
.lc:has(.lc__n--4:hover) .lc__c--4, .lc:has(.lc__n--4:focus-visible) .lc__c--4 { opacity: 1; translate: 0 0; }
.lc:has(.lc__n--4:hover) .lc__n--4 span, .lc:has(.lc__n--4:focus-visible) .lc__n--4 span { background: #fff; color: var(--ink); border-color: #fff; }

/* ===== Prioritize what attackers use ===== */
.pz6 { background: var(--warm); }
.section.pz6 { padding: 112px 0; }
.pz6__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.pz6__copy { display: grid; gap: 16px; } .pz6__copy .eyebrow { margin-bottom: 0; }
.pz6__copy h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.015em; }
.pz6__copy p:not(.eyebrow) { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.pz { padding: 22px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -44px rgba(16,24,40,.5); }
.pz__stage { position: relative; height: 412px; }
.pz__p { position: absolute; inset: 0; }
.pz__p + .pz__p { display: none; }
.pz__k { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; color: var(--violet); }
.pz__h { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; padding: 5px; border-radius: 14px; background: var(--warm); }
.pz__tab { display: grid; align-content: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-align: center; color: var(--muted); }
.pz__tab small { font-size: 11px; font-weight: 500; opacity: .75; }
.pz__tab--sev { color: #fff; background: var(--deep, #23123F); }
.pz__l { position: relative; margin: 0; padding: 0; list-style: none; }
.pz__rw { position: absolute; left: 0; right: 0; top: 0; height: 64px; translate: 0 var(--y); display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 0 14px 0 8px; border-radius: 14px; background: #fff; border: 1px solid rgba(16,24,40,.08); }
.pz__bd { position: relative; display: grid; place-items: center; height: 44px; }
.pz__bd b { position: absolute; }
.pz__cv { display: grid; justify-items: center; min-width: 56px; padding: 4px 8px; border-radius: 8px; background: #EEF1F6; font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--ink-2); }
.pz__cv small { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pz__ex { width: 36px; height: 36px; font-size: 15px; opacity: 0; }
.pz__t { display: grid; gap: 2px; min-width: 0; } .pz__t b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz__t small { font-size: 12px; color: var(--muted); opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz__rw--hot .pz__t small { color: var(--red); font-weight: 600; }
.pz__flag { font-style: normal; padding: 4px 9px; border-radius: 999px; background: #FDECEE; font-size: 11.5px; font-weight: 700; color: var(--red); opacity: 0; white-space: nowrap; }
.pz__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.pz__r { position: absolute; opacity: 0; pointer-events: none; }
.pz__dots label { cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--warm); transition: background .2s, color .2s; }
.pz__dots label:hover { color: var(--ink); }
.pz__lb--b { display: none; }
.pz:has(#pz1a:focus-visible) .pz__lb[data-k="1"], .pz:has(#pz1b:focus-visible) .pz__lb[data-k="1"], .pz:has(#pz2a:focus-visible) .pz__lb[data-k="2"], .pz:has(#pz2b:focus-visible) .pz__lb[data-k="2"], .pz:has(#pz3a:focus-visible) .pz__lb[data-k="3"], .pz:has(#pz3b:focus-visible) .pz__lb[data-k="3"] { outline: 2px solid var(--violet); outline-offset: 2px; }
.pz__by { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .pz__tab--sev { color: var(--muted); background: transparent; } .pz__tab--att { color: #fff; background: var(--deep, #23123F); }
  .pz__rw { translate: 0 calc(var(--y) + 72px); } .pz__rw--below { translate: 0 var(--y); } .pz__rw--hot { translate: 0 0; box-shadow: 0 0 0 2px var(--red); }
  .pz__cv { opacity: 0; } .pz__ex, .pz__t small, .pz__flag { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .pz__p + .pz__p { display: block; }
  .pz__p { opacity: 0; animation: pzv 24s linear infinite; animation-delay: var(--d); }
  @keyframes pzv { 0%, 32% { opacity: 1; visibility: visible; } 33.2%, 100% { opacity: 0; visibility: hidden; } }
  .pz__p * { animation-delay: inherit !important; }
  .pz__tab--sev { animation: pzts 24s linear infinite; } .pz__tab--att { animation: pzta 24s linear infinite; }
  @keyframes pzts { 0%, 15.5% { background: var(--deep, #23123F); color: #fff; } 16.5%, 100% { background: transparent; color: var(--muted); } }
  @keyframes pzta { 0%, 15.5% { background: transparent; color: var(--muted); } 16.5%, 100% { background: var(--deep, #23123F); color: #fff; } }
  .pz__rw:not(.pz__rw--below):not(.pz__rw--hot) { animation: pzd 24s cubic-bezier(.3,.7,.2,1) infinite; }
  .pz__rw--below { animation: none; }
  .pz__rw--hot { animation: pzu 24s cubic-bezier(.3,.7,.2,1) infinite, pzh 24s ease-out infinite; }
  @keyframes pzd { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 calc(var(--y) + 72px); } }
  @keyframes pzu { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 0; } }
  @keyframes pzh { 0%, 9% { box-shadow: none; } 10.5% { box-shadow: 0 0 0 2px var(--red), 0 0 0 10px rgba(206,32,44,.15); } 12%, 100% { box-shadow: 0 0 0 2px var(--red); } }
  .pz__cv { animation: pzc 24s linear infinite; } .pz__ex { animation: pze 24s linear infinite; }
  @keyframes pzc { 0%, 15.5% { opacity: 1; scale: 1; } 16.5%, 100% { opacity: 0; scale: .6; } }
  @keyframes pze { 0%, 15.5% { opacity: 0; scale: .6; } 17%, 100% { opacity: 1; scale: 1; } }
  .pz__flag { animation: pzf 24s linear infinite; } @keyframes pzf { 0%, 9% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
  .pz__t small { animation: pzs 24s linear infinite; } @keyframes pzs { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
  .pz__lb { animation: pzq 24s linear infinite; } .pz__lb[data-k="2"] { animation-delay: -16s; } .pz__lb[data-k="3"] { animation-delay: -8s; }
  @keyframes pzq { 0%, 32% { background: var(--deep, #23123F); color: #fff; } 33.4%, 100% { background: var(--warm); color: var(--muted); } }
}

/* clicking an example restarts the cycle from it; each example has two radios so a repeat click restarts again */
.pz:has(#pz1a:checked) .pz__lb--a[data-k="1"] { display: none; } .pz:has(#pz1a:checked) .pz__lb--b[data-k="1"] { display: inline-block; }
.pz:has(#pz2a:checked) .pz__lb--a[data-k="2"] { display: none; } .pz:has(#pz2a:checked) .pz__lb--b[data-k="2"] { display: inline-block; }
.pz:has(#pz3a:checked) .pz__lb--a[data-k="3"] { display: none; } .pz:has(#pz3a:checked) .pz__lb--b[data-k="3"] { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pzc1a { 0%, 15.5% { opacity: 1; scale: 1; } 16.5%, 100% { opacity: 0; scale: .6; } }
  @keyframes pzd1a { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 calc(var(--y) + 72px); } }
  @keyframes pze1a { 0%, 15.5% { opacity: 0; scale: .6; } 17%, 100% { opacity: 1; scale: 1; } }
  @keyframes pzf1a { 0%, 9% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
  @keyframes pzh1a { 0%, 9% { box-shadow: none; } 10.5% { box-shadow: 0 0 0 2px var(--red), 0 0 0 10px rgba(206,32,44,.15); } 12%, 100% { box-shadow: 0 0 0 2px var(--red); } }
  @keyframes pzq1a { 0%, 32% { background: var(--deep, #23123F); color: #fff; } 33.4%, 100% { background: var(--warm); color: var(--muted); } }
  @keyframes pzs1a { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
  @keyframes pzta1a { 0%, 15.5% { background: transparent; color: var(--muted); } 16.5%, 100% { background: var(--deep, #23123F); color: #fff; } }
  @keyframes pzts1a { 0%, 15.5% { background: var(--deep, #23123F); color: #fff; } 16.5%, 100% { background: transparent; color: var(--muted); } }
  @keyframes pzu1a { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 0; } }
  @keyframes pzv1a { 0%, 32% { opacity: 1; visibility: visible; } 33.2%, 100% { opacity: 0; visibility: hidden; } }
  .pz:has(#pz1a:checked) .pz__p { animation-name: pzv1a; }
  .pz:has(#pz1a:checked) .pz__tab--sev { animation-name: pzts1a; }
  .pz:has(#pz1a:checked) .pz__tab--att { animation-name: pzta1a; }
  .pz:has(#pz1a:checked) .pz__rw:not(.pz__rw--below):not(.pz__rw--hot) { animation-name: pzd1a; }
  .pz:has(#pz1a:checked) .pz__rw--hot { animation-name: pzu1a, pzh1a; }
  .pz:has(#pz1a:checked) .pz__cv { animation-name: pzc1a; }
  .pz:has(#pz1a:checked) .pz__ex { animation-name: pze1a; }
  .pz:has(#pz1a:checked) .pz__flag { animation-name: pzf1a; }
  .pz:has(#pz1a:checked) .pz__t small { animation-name: pzs1a; }
  .pz:has(#pz1a:checked) .pz__lb { animation-name: pzq1a; }
  .pz:has(#pz1a:checked) .pz__p:nth-child(1) { animation-delay: -24s; } .pz:has(#pz1a:checked) .pz__lb[data-k="1"] { animation-delay: -24s; }
  .pz:has(#pz1a:checked) .pz__p:nth-child(2) { animation-delay: -16s; } .pz:has(#pz1a:checked) .pz__lb[data-k="2"] { animation-delay: -16s; }
  .pz:has(#pz1a:checked) .pz__p:nth-child(3) { animation-delay: -8s; } .pz:has(#pz1a:checked) .pz__lb[data-k="3"] { animation-delay: -8s; }
  @keyframes pzc1b { 0%, 15.5% { opacity: 1; scale: 1; } 16.5%, 100% { opacity: 0; scale: .6; } }
  @keyframes pzd1b { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 calc(var(--y) + 72px); } }
  @keyframes pze1b { 0%, 15.5% { opacity: 0; scale: .6; } 17%, 100% { opacity: 1; scale: 1; } }
  @keyframes pzf1b { 0%, 9% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
  @keyframes pzh1b { 0%, 9% { box-shadow: none; } 10.5% { box-shadow: 0 0 0 2px var(--red), 0 0 0 10px rgba(206,32,44,.15); } 12%, 100% { box-shadow: 0 0 0 2px var(--red); } }
  @keyframes pzq1b { 0%, 32% { background: var(--deep, #23123F); color: #fff; } 33.4%, 100% { background: var(--warm); color: var(--muted); } }
  @keyframes pzs1b { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
  @keyframes pzta1b { 0%, 15.5% { background: transparent; color: var(--muted); } 16.5%, 100% { background: var(--deep, #23123F); color: #fff; } }
  @keyframes pzts1b { 0%, 15.5% { background: var(--deep, #23123F); color: #fff; } 16.5%, 100% { background: transparent; color: var(--muted); } }
  @keyframes pzu1b { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 0; } }
  @keyframes pzv1b { 0%, 32% { opacity: 1; visibility: visible; } 33.2%, 100% { opacity: 0; visibility: hidden; } }
  .pz:has(#pz1b:checked) .pz__p { animation-name: pzv1b; }
  .pz:has(#pz1b:checked) .pz__tab--sev { animation-name: pzts1b; }
  .pz:has(#pz1b:checked) .pz__tab--att { animation-name: pzta1b; }
  .pz:has(#pz1b:checked) .pz__rw:not(.pz__rw--below):not(.pz__rw--hot) { animation-name: pzd1b; }
  .pz:has(#pz1b:checked) .pz__rw--hot { animation-name: pzu1b, pzh1b; }
  .pz:has(#pz1b:checked) .pz__cv { animation-name: pzc1b; }
  .pz:has(#pz1b:checked) .pz__ex { animation-name: pze1b; }
  .pz:has(#pz1b:checked) .pz__flag { animation-name: pzf1b; }
  .pz:has(#pz1b:checked) .pz__t small { animation-name: pzs1b; }
  .pz:has(#pz1b:checked) .pz__lb { animation-name: pzq1b; }
  .pz:has(#pz1b:checked) .pz__p:nth-child(1) { animation-delay: -24s; } .pz:has(#pz1b:checked) .pz__lb[data-k="1"] { animation-delay: -24s; }
  .pz:has(#pz1b:checked) .pz__p:nth-child(2) { animation-delay: -16s; } .pz:has(#pz1b:checked) .pz__lb[data-k="2"] { animation-delay: -16s; }
  .pz:has(#pz1b:checked) .pz__p:nth-child(3) { animation-delay: -8s; } .pz:has(#pz1b:checked) .pz__lb[data-k="3"] { animation-delay: -8s; }
  @keyframes pzc2a { 0%, 15.5% { opacity: 1; scale: 1; } 16.5%, 100% { opacity: 0; scale: .6; } }
  @keyframes pzd2a { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 calc(var(--y) + 72px); } }
  @keyframes pze2a { 0%, 15.5% { opacity: 0; scale: .6; } 17%, 100% { opacity: 1; scale: 1; } }
  @keyframes pzf2a { 0%, 9% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
  @keyframes pzh2a { 0%, 9% { box-shadow: none; } 10.5% { box-shadow: 0 0 0 2px var(--red), 0 0 0 10px rgba(206,32,44,.15); } 12%, 100% { box-shadow: 0 0 0 2px var(--red); } }
  @keyframes pzq2a { 0%, 32% { background: var(--deep, #23123F); color: #fff; } 33.4%, 100% { background: var(--warm); color: var(--muted); } }
  @keyframes pzs2a { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
  @keyframes pzta2a { 0%, 15.5% { background: transparent; color: var(--muted); } 16.5%, 100% { background: var(--deep, #23123F); color: #fff; } }
  @keyframes pzts2a { 0%, 15.5% { background: var(--deep, #23123F); color: #fff; } 16.5%, 100% { background: transparent; color: var(--muted); } }
  @keyframes pzu2a { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 0; } }
  @keyframes pzv2a { 0%, 32% { opacity: 1; visibility: visible; } 33.2%, 100% { opacity: 0; visibility: hidden; } }
  .pz:has(#pz2a:checked) .pz__p { animation-name: pzv2a; }
  .pz:has(#pz2a:checked) .pz__tab--sev { animation-name: pzts2a; }
  .pz:has(#pz2a:checked) .pz__tab--att { animation-name: pzta2a; }
  .pz:has(#pz2a:checked) .pz__rw:not(.pz__rw--below):not(.pz__rw--hot) { animation-name: pzd2a; }
  .pz:has(#pz2a:checked) .pz__rw--hot { animation-name: pzu2a, pzh2a; }
  .pz:has(#pz2a:checked) .pz__cv { animation-name: pzc2a; }
  .pz:has(#pz2a:checked) .pz__ex { animation-name: pze2a; }
  .pz:has(#pz2a:checked) .pz__flag { animation-name: pzf2a; }
  .pz:has(#pz2a:checked) .pz__t small { animation-name: pzs2a; }
  .pz:has(#pz2a:checked) .pz__lb { animation-name: pzq2a; }
  .pz:has(#pz2a:checked) .pz__p:nth-child(1) { animation-delay: -8s; } .pz:has(#pz2a:checked) .pz__lb[data-k="1"] { animation-delay: -8s; }
  .pz:has(#pz2a:checked) .pz__p:nth-child(2) { animation-delay: -24s; } .pz:has(#pz2a:checked) .pz__lb[data-k="2"] { animation-delay: -24s; }
  .pz:has(#pz2a:checked) .pz__p:nth-child(3) { animation-delay: -16s; } .pz:has(#pz2a:checked) .pz__lb[data-k="3"] { animation-delay: -16s; }
  @keyframes pzc2b { 0%, 15.5% { opacity: 1; scale: 1; } 16.5%, 100% { opacity: 0; scale: .6; } }
  @keyframes pzd2b { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 calc(var(--y) + 72px); } }
  @keyframes pze2b { 0%, 15.5% { opacity: 0; scale: .6; } 17%, 100% { opacity: 1; scale: 1; } }
  @keyframes pzf2b { 0%, 9% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
  @keyframes pzh2b { 0%, 9% { box-shadow: none; } 10.5% { box-shadow: 0 0 0 2px var(--red), 0 0 0 10px rgba(206,32,44,.15); } 12%, 100% { box-shadow: 0 0 0 2px var(--red); } }
  @keyframes pzq2b { 0%, 32% { background: var(--deep, #23123F); color: #fff; } 33.4%, 100% { background: var(--warm); color: var(--muted); } }
  @keyframes pzs2b { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
  @keyframes pzta2b { 0%, 15.5% { background: transparent; color: var(--muted); } 16.5%, 100% { background: var(--deep, #23123F); color: #fff; } }
  @keyframes pzts2b { 0%, 15.5% { background: var(--deep, #23123F); color: #fff; } 16.5%, 100% { background: transparent; color: var(--muted); } }
  @keyframes pzu2b { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 0; } }
  @keyframes pzv2b { 0%, 32% { opacity: 1; visibility: visible; } 33.2%, 100% { opacity: 0; visibility: hidden; } }
  .pz:has(#pz2b:checked) .pz__p { animation-name: pzv2b; }
  .pz:has(#pz2b:checked) .pz__tab--sev { animation-name: pzts2b; }
  .pz:has(#pz2b:checked) .pz__tab--att { animation-name: pzta2b; }
  .pz:has(#pz2b:checked) .pz__rw:not(.pz__rw--below):not(.pz__rw--hot) { animation-name: pzd2b; }
  .pz:has(#pz2b:checked) .pz__rw--hot { animation-name: pzu2b, pzh2b; }
  .pz:has(#pz2b:checked) .pz__cv { animation-name: pzc2b; }
  .pz:has(#pz2b:checked) .pz__ex { animation-name: pze2b; }
  .pz:has(#pz2b:checked) .pz__flag { animation-name: pzf2b; }
  .pz:has(#pz2b:checked) .pz__t small { animation-name: pzs2b; }
  .pz:has(#pz2b:checked) .pz__lb { animation-name: pzq2b; }
  .pz:has(#pz2b:checked) .pz__p:nth-child(1) { animation-delay: -8s; } .pz:has(#pz2b:checked) .pz__lb[data-k="1"] { animation-delay: -8s; }
  .pz:has(#pz2b:checked) .pz__p:nth-child(2) { animation-delay: -24s; } .pz:has(#pz2b:checked) .pz__lb[data-k="2"] { animation-delay: -24s; }
  .pz:has(#pz2b:checked) .pz__p:nth-child(3) { animation-delay: -16s; } .pz:has(#pz2b:checked) .pz__lb[data-k="3"] { animation-delay: -16s; }
  @keyframes pzc3a { 0%, 15.5% { opacity: 1; scale: 1; } 16.5%, 100% { opacity: 0; scale: .6; } }
  @keyframes pzd3a { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 calc(var(--y) + 72px); } }
  @keyframes pze3a { 0%, 15.5% { opacity: 0; scale: .6; } 17%, 100% { opacity: 1; scale: 1; } }
  @keyframes pzf3a { 0%, 9% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
  @keyframes pzh3a { 0%, 9% { box-shadow: none; } 10.5% { box-shadow: 0 0 0 2px var(--red), 0 0 0 10px rgba(206,32,44,.15); } 12%, 100% { box-shadow: 0 0 0 2px var(--red); } }
  @keyframes pzq3a { 0%, 32% { background: var(--deep, #23123F); color: #fff; } 33.4%, 100% { background: var(--warm); color: var(--muted); } }
  @keyframes pzs3a { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
  @keyframes pzta3a { 0%, 15.5% { background: transparent; color: var(--muted); } 16.5%, 100% { background: var(--deep, #23123F); color: #fff; } }
  @keyframes pzts3a { 0%, 15.5% { background: var(--deep, #23123F); color: #fff; } 16.5%, 100% { background: transparent; color: var(--muted); } }
  @keyframes pzu3a { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 0; } }
  @keyframes pzv3a { 0%, 32% { opacity: 1; visibility: visible; } 33.2%, 100% { opacity: 0; visibility: hidden; } }
  .pz:has(#pz3a:checked) .pz__p { animation-name: pzv3a; }
  .pz:has(#pz3a:checked) .pz__tab--sev { animation-name: pzts3a; }
  .pz:has(#pz3a:checked) .pz__tab--att { animation-name: pzta3a; }
  .pz:has(#pz3a:checked) .pz__rw:not(.pz__rw--below):not(.pz__rw--hot) { animation-name: pzd3a; }
  .pz:has(#pz3a:checked) .pz__rw--hot { animation-name: pzu3a, pzh3a; }
  .pz:has(#pz3a:checked) .pz__cv { animation-name: pzc3a; }
  .pz:has(#pz3a:checked) .pz__ex { animation-name: pze3a; }
  .pz:has(#pz3a:checked) .pz__flag { animation-name: pzf3a; }
  .pz:has(#pz3a:checked) .pz__t small { animation-name: pzs3a; }
  .pz:has(#pz3a:checked) .pz__lb { animation-name: pzq3a; }
  .pz:has(#pz3a:checked) .pz__p:nth-child(1) { animation-delay: -16s; } .pz:has(#pz3a:checked) .pz__lb[data-k="1"] { animation-delay: -16s; }
  .pz:has(#pz3a:checked) .pz__p:nth-child(2) { animation-delay: -8s; } .pz:has(#pz3a:checked) .pz__lb[data-k="2"] { animation-delay: -8s; }
  .pz:has(#pz3a:checked) .pz__p:nth-child(3) { animation-delay: -24s; } .pz:has(#pz3a:checked) .pz__lb[data-k="3"] { animation-delay: -24s; }
  @keyframes pzc3b { 0%, 15.5% { opacity: 1; scale: 1; } 16.5%, 100% { opacity: 0; scale: .6; } }
  @keyframes pzd3b { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 calc(var(--y) + 72px); } }
  @keyframes pze3b { 0%, 15.5% { opacity: 0; scale: .6; } 17%, 100% { opacity: 1; scale: 1; } }
  @keyframes pzf3b { 0%, 9% { opacity: 0; } 10.5%, 100% { opacity: 1; } }
  @keyframes pzh3b { 0%, 9% { box-shadow: none; } 10.5% { box-shadow: 0 0 0 2px var(--red), 0 0 0 10px rgba(206,32,44,.15); } 12%, 100% { box-shadow: 0 0 0 2px var(--red); } }
  @keyframes pzq3b { 0%, 32% { background: var(--deep, #23123F); color: #fff; } 33.4%, 100% { background: var(--warm); color: var(--muted); } }
  @keyframes pzs3b { 0%, 19% { opacity: 0; } 21.5%, 100% { opacity: 1; } }
  @keyframes pzta3b { 0%, 15.5% { background: transparent; color: var(--muted); } 16.5%, 100% { background: var(--deep, #23123F); color: #fff; } }
  @keyframes pzts3b { 0%, 15.5% { background: var(--deep, #23123F); color: #fff; } 16.5%, 100% { background: transparent; color: var(--muted); } }
  @keyframes pzu3b { 0%, 16.5% { translate: 0 var(--y); } 19%, 100% { translate: 0 0; } }
  @keyframes pzv3b { 0%, 32% { opacity: 1; visibility: visible; } 33.2%, 100% { opacity: 0; visibility: hidden; } }
  .pz:has(#pz3b:checked) .pz__p { animation-name: pzv3b; }
  .pz:has(#pz3b:checked) .pz__tab--sev { animation-name: pzts3b; }
  .pz:has(#pz3b:checked) .pz__tab--att { animation-name: pzta3b; }
  .pz:has(#pz3b:checked) .pz__rw:not(.pz__rw--below):not(.pz__rw--hot) { animation-name: pzd3b; }
  .pz:has(#pz3b:checked) .pz__rw--hot { animation-name: pzu3b, pzh3b; }
  .pz:has(#pz3b:checked) .pz__cv { animation-name: pzc3b; }
  .pz:has(#pz3b:checked) .pz__ex { animation-name: pze3b; }
  .pz:has(#pz3b:checked) .pz__flag { animation-name: pzf3b; }
  .pz:has(#pz3b:checked) .pz__t small { animation-name: pzs3b; }
  .pz:has(#pz3b:checked) .pz__lb { animation-name: pzq3b; }
  .pz:has(#pz3b:checked) .pz__p:nth-child(1) { animation-delay: -16s; } .pz:has(#pz3b:checked) .pz__lb[data-k="1"] { animation-delay: -16s; }
  .pz:has(#pz3b:checked) .pz__p:nth-child(2) { animation-delay: -8s; } .pz:has(#pz3b:checked) .pz__lb[data-k="2"] { animation-delay: -8s; }
  .pz:has(#pz3b:checked) .pz__p:nth-child(3) { animation-delay: -24s; } .pz:has(#pz3b:checked) .pz__lb[data-k="3"] { animation-delay: -24s; }
}
@media (prefers-reduced-motion: reduce) {
  .pz__lb[data-k="1"] { background: var(--deep, #23123F); color: #fff; }
  .pz:has(#pz1a:checked, #pz1b:checked) .pz__p { display: none; } .pz:has(#pz1a:checked, #pz1b:checked) .pz__p:nth-child(1) { display: block; } .pz:has(#pz1a:checked, #pz1b:checked) .pz__lb { background: var(--warm); color: var(--muted); } .pz:has(#pz1a:checked, #pz1b:checked) .pz__lb[data-k="1"] { background: var(--deep, #23123F); color: #fff; }
  .pz:has(#pz2a:checked, #pz2b:checked) .pz__p { display: none; } .pz:has(#pz2a:checked, #pz2b:checked) .pz__p:nth-child(2) { display: block; } .pz:has(#pz2a:checked, #pz2b:checked) .pz__lb { background: var(--warm); color: var(--muted); } .pz:has(#pz2a:checked, #pz2b:checked) .pz__lb[data-k="2"] { background: var(--deep, #23123F); color: #fff; }
  .pz:has(#pz3a:checked, #pz3b:checked) .pz__p { display: none; } .pz:has(#pz3a:checked, #pz3b:checked) .pz__p:nth-child(3) { display: block; } .pz:has(#pz3a:checked, #pz3b:checked) .pz__lb { background: var(--warm); color: var(--muted); } .pz:has(#pz3a:checked, #pz3b:checked) .pz__lb[data-k="3"] { background: var(--deep, #23123F); color: #fff; }
}

@media (max-width: 900px) { .pz6__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pz { padding: 14px; } }
@media (max-width: 560px) { .pz__rw { grid-template-columns: 60px minmax(0, 1fr); } .pz__flag { display: none; } }
/* ===== 4 · Lavender typographic: the struck-through alert count ===== */
    .v4 { padding: 96px 0; background: linear-gradient(180deg, #F1EAFB, #FBF9FE); }
    .v4 .ov6__wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
    .v4__count { display: grid; gap: 6px; }
    .v4__count b { position: relative; justify-self: start; white-space: nowrap; font-size: clamp(28px, 3.1vw, 46px); line-height: 1.12; font-weight: 300; letter-spacing: -0.02em; color: rgba(112,52,196,.45); }
    .v4__count b::after { content: ""; position: absolute; left: -3%; right: -3%; top: 52%; height: 5px; border-radius: 3px; background: var(--red); transform-origin: left; }
    .v4__count small { margin-top: 14px; justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--red); font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #fff; }
    @media (prefers-reduced-motion: no-preference) {
      .v4__count b:nth-child(1)::after { animation: v4s1 10s ease-in-out infinite; } .v4__count b:nth-child(1) { animation: v4f1 10s ease-in-out infinite; }
      @keyframes v4s1 { 0%, 4% { transform: scaleX(0); } 11%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
      @keyframes v4f1 { 0%, 4% { color: rgba(112,52,196,.75); } 12%, 88% { color: rgba(112,52,196,.32); } 92%, 100% { color: rgba(112,52,196,.75); } }
      .v4__count b:nth-child(2)::after { animation: v4s2 10s ease-in-out infinite; } .v4__count b:nth-child(2) { animation: v4f2 10s ease-in-out infinite; }
      @keyframes v4s2 { 0%, 12% { transform: scaleX(0); } 19%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
      @keyframes v4f2 { 0%, 12% { color: rgba(112,52,196,.75); } 20%, 88% { color: rgba(112,52,196,.32); } 92%, 100% { color: rgba(112,52,196,.75); } }
      .v4__count b:nth-child(3)::after { animation: v4s3 10s ease-in-out infinite; } .v4__count b:nth-child(3) { animation: v4f3 10s ease-in-out infinite; }
      @keyframes v4s3 { 0%, 20% { transform: scaleX(0); } 27%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
      @keyframes v4f3 { 0%, 20% { color: rgba(112,52,196,.75); } 28%, 88% { color: rgba(112,52,196,.32); } 92%, 100% { color: rgba(112,52,196,.75); } }
      .v4__count b:nth-child(4)::after { animation: v4s4 10s ease-in-out infinite; } .v4__count b:nth-child(4) { animation: v4f4 10s ease-in-out infinite; }
      @keyframes v4s4 { 0%, 28% { transform: scaleX(0); } 35%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
      @keyframes v4f4 { 0%, 28% { color: rgba(112,52,196,.75); } 36%, 88% { color: rgba(112,52,196,.32); } 92%, 100% { color: rgba(112,52,196,.75); } }
      .v4__count small { animation: v4n 10s ease-in-out infinite; } @keyframes v4n { 0%, 38% { opacity: 0; translate: 0 8px; } 46%, 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; } }
    }
    .v4__txt { display: grid; gap: 22px; }
    .v4__txt .ov6__lbl { color: var(--violet); }
    .v4__txt h3 { margin: 0; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
    .v4__txt h3 span { color: var(--red); }
    .v4__txt p:last-child { font-size: 17px; line-height: 1.55; color: var(--ink-2); }

    /* V4 background: squares glow on their own; the mouse paints a fading trail (from the N6 dark band, tuned for light) */
    .v4 { position: relative; }
    .v4__field { position: absolute; inset: 10px; display: grid; grid-template-columns: repeat(28, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px; }
    .v4__field i { display: grid; place-items: center; border-radius: 8px; background: transparent; font-style: normal; transition: background-color 1.8s ease, transform 1.8s ease; }
    .v4 .ov6__wrap { z-index: 1; pointer-events: none; }
    @media (prefers-reduced-motion: no-preference) {
      .v4__field i:nth-child(17) { animation: v4g0 12s ease-in-out infinite; animation-delay: -0.0s; }
      .v4__field i:nth-child(17)::after { content: "9"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -0.0s; }
      .v4__field i:nth-child(21) { animation: v4g1 12s ease-in-out infinite; animation-delay: -1.5s; }
      .v4__field i:nth-child(21)::after { content: "7"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -1.5s; }
      .v4__field i:nth-child(25) { animation: v4g2 12s ease-in-out infinite; animation-delay: -3.0s; }
      .v4__field i:nth-child(25)::after { content: "8"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -3.0s; }
      .v4__field i:nth-child(28) { animation: v4g3 12s ease-in-out infinite; animation-delay: -4.5s; }
      .v4__field i:nth-child(28)::after { content: "4"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -4.5s; }
      .v4__field i:nth-child(212) { animation: v4g0 12s ease-in-out infinite; animation-delay: -6.0s; }
      .v4__field i:nth-child(212)::after { content: "9"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -6.0s; }
      .v4__field i:nth-child(216) { animation: v4g1 12s ease-in-out infinite; animation-delay: -7.5s; }
      .v4__field i:nth-child(216)::after { content: "7"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -7.5s; }
      .v4__field i:nth-child(220) { animation: v4g2 12s ease-in-out infinite; animation-delay: -9.0s; }
      .v4__field i:nth-child(220)::after { content: "8"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -9.0s; }
      .v4__field i:nth-child(223) { animation: v4g3 12s ease-in-out infinite; animation-delay: -10.5s; }
      .v4__field i:nth-child(223)::after { content: "4"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; animation: v4gn 12s ease-in-out infinite; animation-delay: -10.5s; }
      .v4__field i:nth-child(30) { animation: v4g0l 12s ease-in-out infinite; animation-delay: -0.0s; }
      .v4__field i:nth-child(89) { animation: v4g1l 12s ease-in-out infinite; animation-delay: -1.5s; }
      .v4__field i:nth-child(141) { animation: v4g2l 12s ease-in-out infinite; animation-delay: -3.0s; }
      .v4__field i:nth-child(177) { animation: v4g3l 12s ease-in-out infinite; animation-delay: -4.5s; }
      .v4__field i:nth-child(67) { animation: v4g0l 12s ease-in-out infinite; animation-delay: -6.0s; }
      .v4__field i:nth-child(119) { animation: v4g1l 12s ease-in-out infinite; animation-delay: -7.5s; }
      .v4__field i:nth-child(4) { animation: v4g2l 12s ease-in-out infinite; animation-delay: -9.0s; }
      .v4__field i:nth-child(206) { animation: v4g3l 12s ease-in-out infinite; animation-delay: -10.5s; }
      @keyframes v4g0 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(217,45,32,.7); } }
      @keyframes v4g0l { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(217,45,32,.3); } }
      @keyframes v4g1 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(249,115,22,.7); } }
      @keyframes v4g1l { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(249,115,22,.3); } }
      @keyframes v4g2 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(112,52,196,.7); } }
      @keyframes v4g2l { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(112,52,196,.3); } }
      @keyframes v4g3 { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(245,184,61,.7); } }
      @keyframes v4g3l { 0%, 100% { background: transparent; } 42%, 58% { background: rgba(245,184,61,.3); } }
      @keyframes v4gn { 0%, 38%, 62%, 100% { opacity: 0; } 46%, 54% { opacity: 1; } }
    }
    @media (hover: none) { }

    
    .ov6 { position: relative; overflow: hidden; margin-top: 56px; }
    .ov6__lbl { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--violet); }
    .v4__txt h3 { margin: 0; }
    @media (max-width: 900px) { .v4 .ov6__wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } .ov6 { margin-top: 32px; padding: 64px 0; } .v4__count b { font-size: 30px; } }

/* ===== N8: gaps inside the Our view band ===== */
.ov8__gaps { position: relative; z-index: 1; margin-top: 88px; padding-top: 72px; border-top: 1px solid rgba(112,52,196,.2); }
.ov8__head { display: grid; justify-items: center; gap: 16px; max-width: 820px; margin: 0 auto 48px; text-align: center; }
.ov8__head h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.15; }
.ov8__head p:not(.ov6__lbl) { color: var(--ink-2); line-height: 1.55; }
.ov8__gaps .gp6__c { background: #fff; border-color: rgba(112,52,196,.15); box-shadow: 0 24px 48px -40px rgba(35,18,63,.5); }
.ov8__gaps .rv { animation: none; opacity: 1; translate: none; }
.ov6 .v4__field { bottom: auto; height: 500px; }
@media (max-width: 900px) { .ov8__gaps { margin-top: 56px; padding-top: 48px; } }

.bn6__top .eyebrow { margin-bottom: 14px; }
.bn6__list li + li::before { left: 0; }
.pl6__shot { -webkit-mask: none; mask: none; }
.analyst__eb { text-align: center; margin-bottom: 14px; }
.integ__copy .eyebrow, .demo__copy .eyebrow { margin-bottom: 14px; }
/* ===== Preemptive Advantage V5 ===== */
/* 5 dark typographic */
.v5 { color: #fff; background: linear-gradient(160deg, #2E1854 0%, var(--deep) 60%); }
.v5__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.v5 h2 { color: #fff; } .v5 h2 span, .v5 .lbl { color: #FF8A91; } .v5 .intro { color: rgba(255,255,255,.8); }
.v5__words { position: relative; height: clamp(90px, 10vw, 150px); }
.v5__w { position: absolute; left: 0; bottom: 0; font-size: clamp(76px, 9vw, 140px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: #fff; opacity: 0; }
.v5__w:first-child { opacity: 1; } .v5__w:last-child { color: #FF6B74; }
.v5__ds { position: relative; height: 54px; margin-top: 14px; } .v5__d { position: absolute; left: 0; top: 0; font-size: 18px; color: rgba(255,255,255,.8); opacity: 0; } .v5__d:first-child { opacity: 1; }
.v5__bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.v5__bar i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
.v5__bar i::after { content: ""; position: absolute; inset: 0; background: #FF6B74; transform-origin: left; transform: scaleX(0); }
.v5__bar span { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: no-preference) {
  .v5__w, .v5__d { animation: on5 15s linear infinite; animation-delay: calc(var(--i) * 3s - 15s); }
  .v5__bar i::after { animation: v5b 15s linear infinite; animation-delay: calc(var(--i) * 3s - 15s); }
  @keyframes v5b { 0% { transform: scaleX(0); } 19% { transform: scaleX(1); } 20%, 100% { transform: scaleX(0); } }
  .v5__bar span { animation: v5s 15s linear infinite; animation-delay: calc(var(--i) * 3s - 15s); } @keyframes v5s { 0%, 19% { color: #fff; } 20%, 100% { color: rgba(255,255,255,.55); } }
}


.pa5 { position: relative; overflow: hidden; padding: 112px 0; margin-top: 24px; }
.pa5 .lbl { margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; }
.pa5 h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; font-weight: 400; }
.pa5 .intro { margin-top: 16px; font-size: 17px; line-height: 1.6; max-width: 520px; }
.pa5 ol { margin: 0; padding: 0; list-style: none; }
@keyframes on5 { 0%, 18% { opacity: 1; translate: 0 0; } 20%, 100% { opacity: 0; translate: 0 -8px; } }
@media (max-width: 900px) { .pa5 { padding: 72px 0; } .pa5 .v5__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pa5 .v5__bar span { font-size: 11px; } }

.bn6__list--8 { row-gap: 40px; border-top: 0; }
.bn6__list--8 li { border-top: 1px solid rgba(112,52,196,.3); }
.bn6__list--8 li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.bn6__list--8 b { font-size: 21px; }
@media (max-width: 900px) { .bn6__list--8 li:nth-child(n) { padding-left: 0; border-left: 0; } }
/* ===== Why CYFIRMA, Version 6 ===== */
:root { --deep: #23123F; }
@keyframes oc { 0%, 30%, 100% { background: transparent; } 8%, 24% { background: #F5F0FC; } }

/* ===== 5-7: N8 layout, platform core, brand arcs ===== */
.wc__cv { position: relative; aspect-ratio: 1000 / 440; max-width: 1120px; margin: 0 auto; }
.wc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wc__lines path { fill: none; stroke: rgba(112,52,196,.38); stroke-width: 2; stroke-dasharray: 6 8; }
@media (prefers-reduced-motion: no-preference) { .wc__lines path { animation: wcf 1.6s linear infinite; } @keyframes wcf { to { stroke-dashoffset: -28; } } }
.cv__dot { fill: var(--red); } @media (prefers-reduced-motion: reduce) { .cv__dot { display: none; } }
.arc { fill: none; stroke-linecap: round; }
.arc--red { stroke: var(--red); stroke-width: 4; stroke-opacity: .75; } .arc--v1 { stroke: var(--violet); stroke-width: 3; stroke-opacity: .55; } .arc--v2 { stroke: var(--violet); stroke-width: 2.5; stroke-opacity: .35; }
.arcs g { transform-origin: 600px 220px; }
.cw, .ccw { rotate: var(--s); }
@media (prefers-reduced-motion: no-preference) {
  .cw { animation: wcw var(--t) linear infinite; } .ccw { animation: wccw var(--t) linear infinite; }
  @keyframes wcw { from { rotate: var(--s); } to { rotate: calc(var(--s) + 360deg); } }
  @keyframes wccw { from { rotate: var(--s); } to { rotate: calc(var(--s) - 360deg); } }
}
.wc__in { position: absolute; left: 0; top: 0; width: 25%; height: 100%; }
.wc__in li { position: absolute; left: 6%; right: 0; translate: 0 -50%; display: grid; gap: 2px; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(16,24,40,.1); box-shadow: 0 10px 24px -18px rgba(16,24,40,.5); font-size: 14.5px; font-weight: 500; text-align: right; white-space: nowrap; }
.wc__in small { font-size: 12px; font-weight: 400; color: var(--muted); }
.wc__core { position: absolute; left: 60%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; align-content: center; gap: 14px; width: 21.6%; padding: 22px 18px; border-radius: 22px; background: #fff; border: 1px solid rgba(112,52,196,.2); box-shadow: 0 30px 60px -34px rgba(35,18,63,.6); }
.wc__core img { width: 82%; height: auto; } .wc__core img + i + img { width: 74%; }
.wc__core i { width: 70%; height: 1px; background: rgba(16,24,40,.12); }
.wc__out { position: absolute; left: 74.2%; top: 50%; translate: 0 -50%; width: 25.8%; padding: 22px; border-radius: 20px; color: var(--ink); background: #fff; border: 1px solid rgba(112,52,196,.2); box-shadow: 0 30px 60px -38px rgba(35,18,63,.55); }
.wc__k { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; color: var(--violet); }
.wc__out ol { display: grid; gap: 4px; } .wc__out li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.wc__out li i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #F1EAFB; font-style: normal; font-size: 13px; font-weight: 700; color: var(--violet); }
@media (prefers-reduced-motion: no-preference) {
  .wc__out li { animation: oc 6s ease-in-out infinite; } .wc__out li:nth-child(2) { animation-delay: 2s; } .wc__out li:nth-child(3) { animation-delay: 4s; }
  .wc__out li i { animation: wci 6s ease-in-out infinite; animation-delay: inherit; } .wc__out li:nth-child(2) i { animation-delay: 2s; } .wc__out li:nth-child(3) i { animation-delay: 4s; }
  @keyframes wci { 0%, 30%, 100% { background: #F1EAFB; color: var(--violet); } 8%, 24% { background: var(--red); color: #fff; } }
}
.wc__caps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid rgba(16,24,40,.12); }
.wc__caps li { position: relative; padding: 22px 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .wc__caps li + li { padding-left: 18px; border-left: 1px solid #EEF1F6; }
.wc__caps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--violet); transition: width .4s; } .wc__caps li + li::before { left: 18px; }
.wc__caps li:hover::before { width: 48px; }
.wc__caps b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--ink); }

/* 5 white, like N8 */
.v5w { background: #fff; border: 1px solid rgba(16,24,40,.08); }

/* 6 warm band, two tiles */
.v6w { background: var(--warm) url("images/arcs.svg") left -300px bottom -320px / 820px 820px no-repeat; }
.v6w .wc__in li { border-color: transparent; }
.wc__tiles { position: absolute; left: 49.2%; top: 0; width: 21.6%; height: 100%; }
.wc__tile { position: absolute; left: 0; right: 0; translate: 0 -50%; display: grid; justify-items: center; gap: 8px; padding: 16px 14px 14px; border-radius: 18px; background: #fff; border: 1px solid rgba(112,52,196,.18); box-shadow: 0 24px 48px -34px rgba(35,18,63,.6); color: var(--muted); font-size: 12px; font-weight: 500; text-align: center; text-decoration: none; transition: border-color .2s, translate .2s; }
.wc__tile:first-child { top: 36.4%; } .wc__tile:last-child { top: 63.6%; }
.wc__tile:hover { border-color: rgba(112,52,196,.5); translate: 0 calc(-50% - 2px); }
.wc__tile img { width: 64%; height: auto; } .wc__tile:last-child img { width: 58%; }

@media (max-width: 900px) {
  .wc__cv { aspect-ratio: auto; display: grid; gap: 14px; justify-items: center; } .wc__svg { display: none; }
  .wc__in, .wc__core, .wc__out, .wc__tiles, .wc__tile { position: static; translate: none; width: auto; height: auto; }
  .wc__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .wc__in li { position: static; translate: none; white-space: normal; text-align: center; }
  .wc__core { width: min(100%, 260px); } .wc__out { width: 100%; } .wc__tiles { display: grid; gap: 12px; width: min(100%, 300px); }
  .wc__caps { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .wc__caps li + li { padding-left: 0; border-left: 0; } .wc__caps li + li::before { left: 0; }
}
.pz6 { background: #fff; }

.ov6 .v4__field { bottom: 0; height: auto; }
.ov6 .v4__txt > p:last-child { max-width: 540px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(112,52,196,.25); font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; font-weight: 500; color: var(--ink); }

/* ===== N9 scroll choreography (pitch.com structure, Linear restraint): heading first, then the section's content rises and settles ===== */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  @keyframes n9h { from { opacity: 0; translate: 0 18px; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: none; } }
  @keyframes n9b { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes n9s { from { opacity: .3; scale: .96; translate: 0 40px; } to { opacity: 1; scale: 1; translate: 0 0; } }
  @keyframes n9x { from { clip-path: inset(0 3% round 36px); } to { clip-path: inset(0 0 round 32px); } }

  /* headings: arrive first */
  .pb6 .section__head.rv, .pz6__copy.rv, .wc .section__head.rv, .ex6 .section__head.rv, .pl6 .section__head.rv,
  .stats .section__head, .quotes .section__head, .research__head, .integ__copy, .demo__copy, .v5__copy, .ov6 .v4__txt {
    animation: n9h linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }

  /* content: follows a beat later */
  .gp6 > *, .pl6__c, .stats__grid > div, .research__grid > li, .wc__caps li, .integ__rot, .demo .form, .ex, .ov6 .v4__count {
    animation: n9b linear both; animation-timeline: view(); animation-range: entry 25% cover 32%; }
  .gp6 > :nth-child(2), .pl6__c:nth-child(2), .stats__grid > div:nth-child(2), .research__grid > li:nth-child(2), .wc__caps li:nth-child(2) { animation-range: entry 35% cover 38%; }
  .gp6 > :nth-child(3), .stats__grid > div:nth-child(3), .research__grid > li:nth-child(3), .wc__caps li:nth-child(3) { animation-range: entry 45% cover 44%; }
  .stats__grid > div:nth-child(4), .wc__caps li:nth-child(4) { animation-range: entry 55% cover 50%; }
  .wc__caps li:nth-child(5) { animation-range: entry 65% cover 56%; }

  /* the big visual of a section rises and grows into place */
  .pz.rv, .wc__cv.rv, .cs, .v5__big { animation: n9s linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; transform-origin: 50% 100%; }

  /* full-width bands widen as they enter */
  .ov6, .pa5 { animation: n9x linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
} }

/* ===== N9 ===== */
/* Industry recognition: Gartner pins, GigaOm slides over it */
.an9__card { background: var(--deep, #23123F); }
@media (min-width: 901px) {
  .an9__stack { timeline-scope: --an9b; }
  .an9__card { position: sticky; top: 96px; padding: 28px 0; }
  .an9__card--b { margin-top: 120px; view-timeline: --an9b block; box-shadow: 0 -40px 60px -30px rgba(0,0,0,.55); }
  .an9__card--b .gor__split { margin-top: 0; padding-top: 0; border-top: 0; }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
    .an9__card--a > .analyst__split { animation: an9back linear both; animation-timeline: --an9b; animation-range: entry 0% contain 0%; transform-origin: 50% 0; }
    @keyframes an9back { to { scale: .92; opacity: .25; filter: blur(2px); } }
    .an9__card--b { animation: an9up linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes an9up { from { translate: 0 80px; } to { translate: 0 0; } }
  } }
}
/* Outcomes: cards come from behind, column by column */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .bn6__list--8 { perspective: 1100px; }
  .bn6__list--8 li.rv { animation: bn9in linear both; animation-timeline: view(); transform-origin: 50% 100%; }
  .bn6__list--8 li.rv:nth-child(4n+1) { animation-range: entry 0% entry 65%; }
  .bn6__list--8 li.rv:nth-child(4n+2) { animation-range: entry 10% entry 75%; }
  .bn6__list--8 li.rv:nth-child(4n+3) { animation-range: entry 20% entry 85%; }
  .bn6__list--8 li.rv:nth-child(4n+4) { animation-range: entry 30% entry 95%; }
  @keyframes bn9in { from { opacity: 0; transform: translateZ(-320px) rotateX(24deg) translateY(60px); filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
  .bn6__list--8 li.rv:hover { transform: translateY(-4px); }
} }

/* GigaOm Radar feature, mirrored under the Gartner MQ */
.gor__split { margin-top: 72px; padding-top: 72px; border-top: 1px solid rgba(255,255,255,.12); grid-template-columns: minmax(0, 539px) minmax(0, 421px); }
.gor { position: relative; margin: 0; padding: 26px 26px 18px; border-radius: 22px; background: #fff; }
.gor__svg { display: block; width: min(100%, 400px); margin: 0 auto; overflow: visible; }
.gor__r { fill: none; stroke: rgba(16,24,40,.14); stroke-width: 1.5; }
.gor__r--e { fill: #F7F7F9; } .gor__r--c { fill: #F1EEF7; } .gor__r--l { fill: #E7DDF8; stroke: rgba(112,52,196,.35); }
.gor__ax { stroke: rgba(16,24,40,.18); stroke-width: 1; stroke-dasharray: 4 5; }
.gor__t { font: 700 10px "IBM Plex Sans", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; fill: #98A2B3; text-anchor: middle; }
.gor__t--l { text-anchor: start; } .gor__t--r { text-anchor: end; }
.gor__ring { font: 700 9.5px "IBM Plex Sans", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; fill: #98A2B3; text-anchor: middle; }
.gor__ring--l { fill: var(--violet); }
.gor__arrow { stroke: var(--violet); stroke-width: 2.5; } .gor__head { fill: var(--violet); }
.gor__dot { fill: var(--violet); stroke: #fff; stroke-width: 3; }
.gor__ping { fill: none; stroke: var(--violet); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .gor__ping { animation: ping 2.4s ease-out infinite; } }
.gor__lblbg { fill: var(--deep); } .gor__lbltx { font: 700 12px "IBM Plex Sans", Arial, sans-serif; letter-spacing: .06em; fill: #fff; text-anchor: middle; }
@media (max-width: 900px) { .gor__split { grid-template-columns: minmax(0, 1fr); margin-top: 48px; padding-top: 48px; } .gor__split .analyst__copy { order: -1; } }

.section.stats { padding-bottom: 96px; } .section.stats + .section.quotes { padding-top: 40px; }
@media (max-width: 900px) { .section.stats { padding: 72px 0 64px; } .section.stats + .section.quotes { padding-top: 24px; } }
.ov6 .v4__field { bottom: 0; height: auto; }
.pz6__copy strong { font-weight: 600; color: var(--ink); }
.pl6 .section__head p:not(.eyebrow) { max-width: 680px; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.pl9__for { margin: 0 0 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.7); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pl9__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 0; padding: 0; list-style: none; }
.pl9__chips li { padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid rgba(16,24,40,.1); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pl9__chips--plus li::before { content: "+ "; font-weight: 700; color: var(--red); }
.pl9__k { margin: 0 0 -8px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.pl6 .section__head p b { font-weight: 600; color: var(--ink); }
.wc__out .wc__q { gap: 0; } .wc__q li { padding: 6px 10px; font-size: 14.5px; gap: 10px; }
.wc__q li i { width: 8px; height: 8px; background: rgba(112,52,196,.35); }
@media (prefers-reduced-motion: no-preference) {
  .wc__q li, .wc__q li:nth-child(n) { animation: ocq 14s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
  .wc__q li i, .wc__q li:nth-child(n) i { animation: wciq 14s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
  @keyframes ocq { 0%, 15%, 100% { background: transparent; } 2%, 13% { background: #F5F0FC; } }
  @keyframes wciq { 0%, 15%, 100% { background: rgba(112,52,196,.35); } 2%, 13% { background: var(--red); } }
}
.pl9__n { margin: -8px 0 0; font-size: 13px; font-weight: 500; color: var(--muted); }
/* equal cards; logo, text, Best for, CTA, pillar count and image line up side by side */
.pl6__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: 20px; row-gap: 0; }
.pl6__c { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 18px; align-items: start; justify-items: start; }
.pl6__c > p { max-width: none; }
.pl9__for { justify-self: stretch; }
.pl6__shot, .pl6__photo { height: 300px; object-fit: cover; margin-top: 8px; }
.pl6__shot { object-position: left top; }
@media (max-width: 900px) { .pl6__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; } .pl6__c { grid-row: auto; grid-template-rows: none; } }
.pl9__for ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.pl9__for li { position: relative; padding-left: 18px; }
.pl9__for li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.pl9__for b { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--violet); }
/* ===== N10 ===== */
.section.ps10 { padding: 104px 0 8px; }
.ps10__h { max-width: 960px; margin: 0 auto; text-align: center; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.18; font-weight: 400; letter-spacing: -0.01em; }
.ps10__card { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) 2px minmax(0, 1fr); width: min(100%, 1000px); margin: 44px auto 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(112,52,196,.16); box-shadow: 0 30px 60px -44px rgba(35,18,63,.5); }
.ps10__out, .ps10__in { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px 22px 16px; }
.ps10__out { background: linear-gradient(160deg, #F4EDFC, #FBF8FE); }
.ps10__in { background: #F6F6F8; }
.ps10__op { position: relative; margin: 0; text-align: center; }
.ps10__op::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 2px; background: rgba(112,52,196,.45); }
.ps10__op span { position: relative; padding: 4px 12px; border-radius: 999px; background: var(--violet); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #fff; }
.ps10__op--late::before { background: rgba(16,24,40,.18); }
.ps10__op--late span { background: #fff; color: var(--muted); border: 1px solid rgba(16,24,40,.14); }
.ps10__chips { position: relative; display: flex; justify-content: space-around; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ps10__out .ps10__chips::before { content: ""; position: absolute; left: 0; right: -22px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(112,52,196,.35) 0 6px, transparent 6px 12px); }
.ps10__chips li { position: relative; display: grid; justify-items: center; gap: 6px; }
.ps10__chips em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--violet); }
.ps10__in .ps10__chips em { color: var(--muted); }
.ps10__out .ps10__chips li { padding-bottom: 20px; }  /* balances the stage name so each chip sits on the line */
.ps10__chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid rgba(16,24,40,.06); box-shadow: 0 16px 34px -20px rgba(35,18,63,.45); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.ps10__chips small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ps10__alert .sb { background: #F97316; }
.ps10__z { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ps10__in .ps10__z { text-align: right; }
.ps10__wall { position: relative; background: repeating-linear-gradient(180deg, var(--violet) 0 6px, transparent 6px 11px); }
.ps10__wall b { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 3px 8px; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--violet); white-space: nowrap; }
.ps10__run { position: absolute; top: calc(50% - 2px); left: 67.5%; width: 12px; height: 12px; border-radius: 50%; background: var(--red); opacity: 0; translate: -50% 0; box-shadow: 0 0 0 5px rgba(206,32,44,.15); }
@media (prefers-reduced-motion: no-preference) {
  .ps10__out li { animation: psc 9s ease-out infinite; animation-delay: calc(var(--i) * .8s); }
  @keyframes psc { 0% { opacity: .35; translate: 0 6px; } 6%, 84% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: .35; translate: 0 6px; } }
  .ps10__run { animation: psr 9s cubic-bezier(.5,0,.5,1) infinite; }
  @keyframes psr { 0%, 34% { left: 67.5%; opacity: 0; } 37% { opacity: 1; } 56% { left: calc(78.5% - 16px); opacity: 1; } 58%, 100% { left: calc(78.5% - 16px); opacity: 0; } }
  .ps10__alert { animation: psa 9s ease-out infinite; }
  @keyframes psa { 0%, 56% { opacity: .35; } 60%, 86% { opacity: 1; } 92%, 100% { opacity: .35; } }
}
@media (max-width: 760px) {
  .section.ps10 { padding: 72px 0 0; }
  .ps10__card { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .ps10__wall { height: 2px; background: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 11px); }
  .ps10__wall b { bottom: auto; top: 50%; translate: -50% -50%; }
  .ps10__chips { flex-direction: column; align-items: center; gap: 14px; }
  .ps10__out .ps10__chips li { padding-bottom: 0; }
  .ps10__chip, .ps10__chips small { white-space: normal; text-align: center; }
  .ps10__out .ps10__chips::before { left: 50%; right: auto; top: 0; bottom: -16px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(112,52,196,.35) 0 6px, transparent 6px 12px); }
  .ps10__in .ps10__z { text-align: left; }
  .ps10__run { display: none; }
}

/* more room between the perimeter band and the three gaps */
.section.ps10 + .section.pb6 { padding-top: 112px; }
@media (max-width: 760px) { .section.ps10 + .section.pb6 { padding-top: 72px; } }
.ps10__out .ps10__op span { white-space: nowrap; }
@media (max-width: 760px) { .ps10__out .ps10__op span { white-space: normal; display: inline-block; max-width: 92%; } }

/* ===================== N9v2: Pitch-style scroll choreography ===================== */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {

  /* headings rise out of a mask */
  .section__head h2, .pz6__copy h2, .bn6__top h2, .research__head h2, .integ__copy h2, .v5__copy h2, .analyst__title, .ov6 .v4__txt h3 {
    animation: v2mask linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  @keyframes v2mask { from { clip-path: inset(0 0 100% 0); transform: translateY(48px); } to { clip-path: inset(0 0 -20% 0); transform: none; } }

  /* the three gaps: a stacked deck fans out into three columns */
  .gp6 > .gp6__c { animation: v2fanL linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  .gp6 > .gp6__c:nth-child(1) { animation-name: v2fanL; z-index: 1; }
  .gp6 > .gp6__c:nth-child(2) { animation-name: v2fanM; z-index: 3; }
  .gp6 > .gp6__c:nth-child(3) { animation-name: v2fanR; z-index: 2; }
  @keyframes v2fanL { from { transform: translateX(104%) translateY(40px) rotate(-7deg) scale(.94); } to { transform: none; } }
  @keyframes v2fanM { from { transform: translateY(70px) scale(.96); } to { transform: none; } }
  @keyframes v2fanR { from { transform: translateX(-104%) translateY(40px) rotate(7deg) scale(.94); } to { transform: none; } }

  /* bands zoom open from a rounded window */
  .ov6 { animation: v2open linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .pa5 { animation: v2openWide linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes v2open { from { clip-path: inset(6% 12% round 72px); } to { clip-path: inset(0 0 round 32px); } }
  @keyframes v2openWide { from { clip-path: inset(8% 16% round 96px); } to { clip-path: inset(0 0 round 32px); } }
  .v5__big { animation: v2grow linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; transform-origin: 0 50%; }
  @keyframes v2grow { from { transform: scale(.7); opacity: .2; } to { transform: none; opacity: 1; } }

  /* product-style tilt: cards and diagrams lie back, then come up flat */
  .pz6__grid, .wc .container, .integ__split { perspective: 1400px; }
  .pz.rv { animation: v2tiltR linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; transform-origin: 50% 100%; }
  @keyframes v2tiltR { from { transform: rotateY(-22deg) rotateX(14deg) translateY(80px) scale(.9); opacity: .25; } to { transform: none; opacity: 1; } }
  .wc__cv.rv { animation: v2tiltUp linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; transform-origin: 50% 100%; }
  @keyframes v2tiltUp { from { transform: rotateX(32deg) translateY(90px) scale(.86); opacity: .2; } to { transform: none; opacity: 1; } }
  .integ__rot { animation: v2tiltUp linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; transform-origin: 50% 100%; }

  /* platforms: overlapped deck slides apart */
  .pl6__c { animation: v2splitL linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .pl6__c:nth-child(1) { animation-name: v2splitL; z-index: 2; }
  .pl6__c:nth-child(2) { animation-name: v2splitR; z-index: 1; }
  @keyframes v2splitL { from { transform: translateX(52%) rotate(-3deg) scale(.95); } to { transform: none; } }
  @keyframes v2splitR { from { transform: translateX(-52%) translateY(50px) rotate(3deg) scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }

  /* CTA numbers: letters close in and sharpen, one after another */
  .stats__grid > div { animation: none; }
  .stats__grid dd { animation: v2track linear both; animation-timeline: view(); }
  .stats__grid > div:nth-child(1) dd { animation-range: entry 10% cover 30%; }
  .stats__grid > div:nth-child(2) dd { animation-range: entry 22% cover 36%; }
  .stats__grid > div:nth-child(3) dd { animation-range: entry 34% cover 42%; }
  .stats__grid > div:nth-child(4) dd { animation-range: entry 46% cover 48%; }
  @keyframes v2track { from { letter-spacing: .45em; opacity: 0; filter: blur(8px); } to { letter-spacing: normal; opacity: 1; filter: none; } }
  .stats__grid dt { animation: v2late linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
  @keyframes v2late { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

  /* research covers fan out from a stack */
  .research__grid > li { animation: v2fanL linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .research__grid > li:nth-child(1) { animation-name: v2fanL; z-index: 1; }
  .research__grid > li:nth-child(2) { animation-name: v2fanM; z-index: 3; }
  .research__grid > li:nth-child(3) { animation-name: v2fanR; z-index: 2; }


  /* Outcomes: a gentle open and a soft lift from depth, column by column */
  .bn6 { animation: v2openSoft linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes v2openSoft { from { clip-path: inset(2% 4% round 48px); } to { clip-path: inset(0 0 round 32px); } }
  .bn6__list--8 li.rv { animation: v2deep linear both; animation-timeline: view(); }
  .bn6__list--8 li.rv:nth-child(4n+1) { animation-range: entry 0% entry 60%; }
  .bn6__list--8 li.rv:nth-child(4n+2) { animation-range: entry 8% entry 68%; }
  .bn6__list--8 li.rv:nth-child(4n+3) { animation-range: entry 16% entry 76%; }
  .bn6__list--8 li.rv:nth-child(4n+4) { animation-range: entry 24% entry 84%; }
  @keyframes v2deep { from { opacity: 0; scale: .92; translate: 0 36px; rotate: 1 0 0 14deg; filter: blur(3px); } to { opacity: 1; scale: 1; translate: 0 0; rotate: 1 0 0 0deg; filter: none; } }
} }
/* plain sections: no scroll moves in customer voice and the demo form */
.quotes .section__head, .quotes .section__head h2, .quotes .cs, .demo .demo__copy, .demo .demo__copy h2, .demo .form { animation: none !important; opacity: 1; translate: none; transform: none; filter: none; clip-path: none; }
/* CYFIRMA Difference: the five points are always fully shown */
.wc .wc__caps.rv, .wc .wc__caps li { animation: none !important; opacity: 1; translate: none; }
@media (max-width: 900px) { @supports (animation-timeline: view()) {
  /* phones: keep moves vertical so nothing slides off-screen sideways */
  @keyframes v2fanL { from { transform: translateY(50px); opacity: .3; } to { transform: none; opacity: 1; } }
  @keyframes v2fanR { from { transform: translateY(50px); opacity: .3; } to { transform: none; opacity: 1; } }
  @keyframes v2splitL { from { transform: translateY(50px); opacity: .3; } to { transform: none; opacity: 1; } }
  @keyframes v2splitR { from { transform: translateY(50px); opacity: .3; } to { transform: none; opacity: 1; } }
  @keyframes v2fly { from { translate: 0 60px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
} }

.st9 { position: relative; overflow-x: clip; }
.st9 > .container { position: relative; z-index: 1; }
.st9__arc { position: absolute; right: -230px; top: -230px; width: 600px; height: 600px; pointer-events: none; }
@media (max-width: 760px) { .st9__arc { right: -170px; top: -170px; width: 360px; height: 360px; } }
.st9__arc svg { width: 100%; height: 100%; overflow: visible; }
.st9__arc .pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .st9__arc .pulse { animation: v2pulse 3.4s ease-out infinite; }
  @keyframes v2pulse { 0% { scale: 1; opacity: .5; } 100% { scale: 5.5; opacity: 0; } }
}

/* ---- hero: dark, copy left, layered image right ---- */
.hero.hero--img { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 760px; margin: 0 16px; border-radius: 32px; padding: 96px 0;
  background: #000 url("images/hero-layers.webp") right center / auto 100% no-repeat !important; color: #fff; }
.hero--img::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,.55) 46%, rgba(0,0,0,0) 62%); pointer-events: none; }
.hero--img .hero__inner { position: relative; z-index: 1; width: min(100% - 48px, 1280px); }
.hero--img .hero__copy { max-width: 560px; }
.hero--img h1 { margin: 0 0 24px; color: #fff; font-size: clamp(44px, 5vw, 72px); line-height: 1.04; font-weight: 500; letter-spacing: -0.02em; }
.hero--img h1 span { color: #FF5C66; }
.hero--img .hero__sub { margin: 0 0 32px; max-width: 520px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.86); }
.hero--img .hero__btns .btn--secondary { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
@media (max-width: 1100px) { .hero.hero--img { background-size: auto 78% !important; background-position: right -120px center !important; } .hero--img::after { background: linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.1) 85%); } }
@media (max-width: 760px) {
  .hero.hero--img { min-height: 0; display: block; padding: 56px 0 calc(66vw + 24px); background-size: 150% auto !important; background-position: 30% 100% !important; margin: 0 8px; border-radius: 24px; }
  .hero--img::after { background: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0) 72%); }
  .hero--img .hero__btns { flex-direction: column; } .hero--img .hero__btns .btn { width: 100%; }
}

/* ---- hero, live: particle layers on a canvas (JS adds .is-live; without it the static image above stays) ---- */
.hp__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: none; }
.hp__lab { position: absolute; z-index: 1; display: none; max-width: 236px; translate: 0 -50%; opacity: 0; font-family: inherit; color: #fff; pointer-events: none; }
.hp__lab b { display: block; font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: .1px; }
.hp__lab span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; font-weight: 400; color: rgba(255,255,255,.62); }
.hero.hp.is-live { background-image: none !important; }
.hp.is-live .hp__canvas, .hp.is-live .hp__lab { display: block; }
.hp.is-live::after { background: linear-gradient(90deg, #000 0%, #000 26%, rgba(0,0,0,.6) 40%, rgba(0,0,0,0) 52%); }
@media (max-width: 1024px) {
  .hero.hp.is-live { display: block; min-height: 0; padding: 64px 0 calc(min(76vw, 470px) + 32px); }
  .hp.is-live::after { display: none; }
  .hp.is-live .hp__canvas { inset: auto 0 16px 0; height: min(76vw, 470px); }
}
@media (max-width: 520px) { .hp__lab { max-width: 118px; } .hp__lab b { font-size: 11.5px; } .hp__lab span { font-size: 10.5px; } }


/* ---- N9: the left side is deep CYFIRMA violet, the particle side stays black ---- */
.hero.hp.is-live { background: linear-gradient(90deg, #26133F 0%, #1C0E31 30%, #0B0614 50%, #000 62%) !important; }
.hp.is-live::after { background: linear-gradient(90deg, rgba(38,19,63,.9) 0%, rgba(28,14,49,.8) 28%, rgba(14,7,26,.45) 42%, rgba(0,0,0,0) 54%); }
@media (max-width: 1024px) {
  .hero.hp.is-live { background: linear-gradient(180deg, #26133F 0%, #1C0E31 38%, #0B0614 62%, #000 80%) !important; }
}

/* ---- N9 light tone: the earlier N9 hero gradient (white to soft lavender), dark text, diagram re-coloured in JS ---- */
.hero.hp--light.is-live { background: linear-gradient(180deg, #fff 0%, #F5F0FC 100%) !important; border: 1px solid rgba(112,52,196,.1); color: #101828; }
.hp--light.is-live::after { display: none; }
.hp--light.is-live h1 { color: #101828; } .hp--light.is-live h1 span { color: #CE202C; }
.hp--light.is-live .hero__sub { color: #475467; }
.hp--light.is-live .hero__btns .btn--secondary { color: #101828; border-color: rgba(16,24,40,.35); }
.hp--light .hp__lab { color: #101828; } .hp--light .hp__lab span { color: #667085; }
/* ---- N9 split tone: light violet left (dark text), deep violet to near black right (dark-palette diagram) ---- */
.hero.hp--split.is-live { background: linear-gradient(90deg, #F3ECFC 0%, #EADFF9 27%, #D3BEF2 34%, #A585DD 40%, #6A43AE 45.5%, #3A1E66 51%, #1D0F35 58%, #0B0617 70%, #050309 100%) !important; }
.hp--split.is-live::after { display: none; }
.hp--split.is-live h1 { color: #101828; } .hp--split.is-live h1 span { color: #CE202C; }
.hp--split.is-live .hero__sub { color: #344054; }
.hp--split.is-live .hero__btns .btn--secondary { color: #101828; border-color: rgba(16,24,40,.35); }
@media (max-width: 1024px) {
  .hero.hp--split.is-live { padding-bottom: calc(min(76vw, 470px) + 112px); background: linear-gradient(180deg, #F3ECFC 0%, #E8DCF9 calc(100% - min(76vw, 470px) - 112px), #9E7CD8 calc(100% - min(76vw, 470px) - 70px), #3A1E66 calc(100% - min(76vw, 470px) - 36px), #120A24 calc(100% - min(76vw, 470px) + 20px), #050309 100%) !important; }
}
/* ---- all-violet options: white text, deep violet left easing to near-black behind the diagram ---- */
.hero.hp--violet.is-live { background: linear-gradient(90deg, #24133D 0%, #1C0F31 32%, #0E0720 56%, #06030C 100%) !important; }
.hp--violet.is-live::after { display: none; }
.hp__arcs { display: none; }
.hp--arcs.is-live .hp__arcs { display: block; position: absolute; z-index: 0; left: -860px; bottom: -860px; width: 1720px; height: 1720px; pointer-events: none; }
.hp__arcs circle { fill: none; stroke: rgba(183,155,245,.30); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hp__arcs .a2 circle { stroke: rgba(183,155,245,.20); } .hp__arcs .a4 circle { stroke: rgba(183,155,245,.14); }
.hp__arcs circle.r { stroke: rgba(255,92,102,.75); stroke-width: 1.6; }
.hp__arcs g { transform-origin: 500px 500px; }
@media (prefers-reduced-motion: no-preference) {
  .hp__arcs .a1 { animation: hpArc 90s linear infinite; } .hp__arcs .a2 { animation: hpArc 140s linear infinite reverse; }
  .hp__arcs .a3 { animation: hpArc 120s linear infinite; } .hp__arcs .a4 { animation: hpArc 180s linear infinite reverse; }
  @keyframes hpArc { to { rotate: 360deg; } }
}
.hero.hp--tone.is-live { background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 34%), linear-gradient(100deg, #34205A 0%, #2A1849 26%, #170C2C 50%, #08040F 72%, #050309 100%) !important; }
@media (max-width: 1024px) {
  .hero.hp--violet.is-live { background: linear-gradient(180deg, #24133D 0%, #1C0F31 45%, #0B0618 70%, #06030C 100%) !important; }
  .hero.hp--tone.is-live { background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 30%), linear-gradient(180deg, #34205A 0%, #2A1849 35%, #120A24 65%, #050309 100%) !important; }
  .hp--arcs.is-live .hp__arcs { left: -700px; bottom: auto; top: -700px; width: 1400px; height: 1400px; }
}
@media (max-width: 1024px) { .hero.hp--light.is-live { background: linear-gradient(180deg, #fff 0%, #F5F0FC 100%) !important; } }

/* =========================================================
   Dark mode (html[data-theme="dark"], see shared/theme-toggle.js).
   This file shares styles.css's :root variables (--ink/--ink-2/--muted/
   --warm/--gray/--border/--gray-2/--violet-tint); the same flips are
   repeated here so n.css behaves correctly even if loaded without
   styles.css's dark block. --deep (this file's own :root, and the
   var(--deep, #23123F) fallbacks used throughout) is already a dark
   brand colour used for intentionally-dark bands, so it is left as-is.
   --white/--violet/--red are left alone for the same reason as in
   styles.css/base.css: literal surfaces are pinned explicitly below.
   ========================================================= */
html[data-theme="dark"] {
  --ink: #F2F4F7;
  --ink-2: #E4E7EC;
  --muted: #98A2B3;
  --warm: #141A2A;
  --gray: #1D2939;
  --border: rgba(255,255,255,.12);
  --gray-2: #5B6B82;
  --violet-tint: rgba(112,52,196,.22);
}

/* sections with a literal light gradient/surface (not using a variable, so
   the flips above can't reach them): swap to a dark equivalent */
html[data-theme="dark"] .h6 { background: linear-gradient(180deg, #0B0F1E 0%, #1D0F35 100%); }
html[data-theme="dark"] .v4 { background: linear-gradient(180deg, #1D0F35 0%, #130A24 100%); }
html[data-theme="dark"] .pl6__c--dc { background: linear-gradient(160deg, #2A1650, #1D0F35); }
html[data-theme="dark"] .ps10__out { background: linear-gradient(160deg, #241642, #1A0F30); }

/* light cards/surfaces (literal #fff / light hex used as a surface rather
   than a contrast color): swap to a dark surface */
html[data-theme="dark"] .hs__m,
html[data-theme="dark"] .fb,
html[data-theme="dark"] .gp6__c,
html[data-theme="dark"] .cv__in li,
html[data-theme="dark"] .cv__out,
html[data-theme="dark"] .wc__in li,
html[data-theme="dark"] .wc__out,
html[data-theme="dark"] .wc__core,
html[data-theme="dark"] .wc__tile,
html[data-theme="dark"] .v5w,
html[data-theme="dark"] .gor,
html[data-theme="dark"] .pz,
html[data-theme="dark"] .pz__rw,
html[data-theme="dark"] .ex__pl a,
html[data-theme="dark"] .pl9__chips li,
html[data-theme="dark"] .ps10__chip,
html[data-theme="dark"] .ps10__op--late span,
html[data-theme="dark"] .ps10__wall b,
html[data-theme="dark"] .tr6__cards li:first-child { background: #1D2939; border-color: rgba(255,255,255,.1); }

/* inset/secondary surfaces, slightly darker than the card surface above */
html[data-theme="dark"] .pz__cv,
html[data-theme="dark"] .ps10__in { background: #161C2C; }

/* small tint chips (reuse the flipped --violet-tint value explicitly,
   since these set a literal light lavender rather than the variable) */
html[data-theme="dark"] .cv__out ol li i,
html[data-theme="dark"] .wc__out li i { background: rgba(112,52,196,.22); }
html[data-theme="dark"] .pz__flag { background: rgba(206,32,44,.18); }

/* GigaOm radar chart: light SVG ring fills would wash out on a dark card */
html[data-theme="dark"] .gor__r--e { fill: #1D2939; }
html[data-theme="dark"] .gor__r--c { fill: #242D43; }
html[data-theme="dark"] .gor__r--l { fill: #2E2048; }

/* border-only fixes (literal rgba(16,24,40,...) borders are invisible on a
   dark page) */
html[data-theme="dark"] .bn6__list li,
html[data-theme="dark"] .wc__caps li + li { border-color: rgba(255,255,255,.12); }