/* home.css — homepage styles.
   Layers on top of styles.css, which still provides the menu, partner strip,
   solutions shell, roadmap, news, featured-in, footer and token sections. */

@font-face{
  font-family: "Stack Sans Notch";
  src: url("assets/fonts/stack-sans-notch.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: "Stack Sans Text";
  src: url("assets/fonts/stack-sans-text.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

.newhomedemo-page{
  --nhd-bg: #EFFAF6;
  --nhd-ink: #111827;
  --nhd-ink-soft: rgba(17,24,39,0.62);
  --nhd-ink-faint: rgba(17,24,39,0.38);
  --nhd-green: #00BA7C;
  --nhd-green-2: #00D899;
  --nhd-green-deep: #2E7360;
}

/* ---------------- HERO FRAME ---------------- */
.nhd-hero{ background: var(--nhd-bg); padding: 0; overflow: hidden; }
.nhd-frame{
  width: 100%; max-width: 1440px; margin: 0 auto;
  min-height: min(100vh, 1100px); min-height: min(100svh, 1100px);
  background: var(--nhd-bg); position: relative; overflow: hidden; contain: layout;
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 2.2fr) minmax(232px, 1fr);
  grid-template-rows: auto 1fr auto; grid-template-areas: "head visual copy" "stats stats stats";
  align-items: center; column-gap: clamp(16px, 2vw, 32px);
  padding: calc(72px + clamp(24px, 4vh, 44px)) clamp(24px, 6.9vw, 100px) clamp(28px, 4vh, 44px);
}
.nhd-frame .nhd-headline{ grid-area: head; max-width: 340px; }
.nhd-frame h1{
  font-family: "Stack Sans Notch", "Stack Sans Text", sans-serif;
  font-weight: 400; font-size: clamp(42px, 4.2vw, 60px); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0; color: var(--nhd-ink);
  max-width: none; white-space: normal;
}
.nhd-frame .nhd-visual{ grid-area: visual; justify-self: center; height: min(74vh, 780px); aspect-ratio: 660 / 770; max-width: 100%; }
.nhd-frame #stage{ width:100%; height:100%; display:block; will-change: transform; }
.nhd-frame .nhd-copy-right{ grid-area: copy; justify-self: end; width: 100%; max-width: 250px; }
.nhd-frame .nhd-sub{ font-size: 16px; line-height: 1.55; color: var(--nhd-ink-soft); margin: 0 0 26px; }
.nhd-frame .nhd-cta-col{ display:flex; flex-direction:column; gap: 12px; align-items:flex-start; }

.nhd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  font-size: 15px; font-family: "Stack Sans Text", sans-serif;
  padding: 14px 24px; border-radius: 999px; cursor:pointer; text-decoration:none;
  border: 1px solid transparent; white-space: nowrap;
}
.nhd-btn-primary{ background: var(--nhd-ink); color: #fff; transition: background .18s ease; }
.nhd-btn-primary:hover{ background: #263F39; }
.nhd-btn-primary svg{ width:15px; height:15px; }
.nhd-btn-outline{
  background: transparent; border-color: rgba(0,186,124,0.45); color: var(--nhd-green);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nhd-btn-outline:hover{ background: #00BA7C; border-color: #00BA7C; color: #fff; }

.nhd-frame .nhd-stats{ grid-area: stats; align-self: end; display:flex; align-items:flex-end; flex-wrap: wrap; gap: 20px 0; padding-top: 24px; }
.nhd-frame .nhd-stat{ margin-right: 58px; cursor: default; }
.nhd-frame .nhd-stat .nhd-label{ font-size: 13px; color: var(--nhd-ink-faint); margin: 0 0 6px; }
.nhd-frame .nhd-stat .nhd-value{
  font-size: 19px; color: var(--nhd-ink); font-family: "Stack Sans Notch", sans-serif;
  font-weight: 400; margin:0; transition: color .15s ease;
}
.nhd-frame .nhd-stat:hover .nhd-value{ color: #00BA7C; }
.nhd-frame .nhd-fintrac{ margin-left:auto; display:flex; align-items:center; }
.nhd-frame .nhd-fintrac img{ height: 46px; display:block; opacity:0.85; }

@media (max-width: 900px){
  .nhd-frame{ grid-template-columns: 1fr; grid-template-areas: "head" "visual" "copy" "stats"; min-height: 0; padding: calc(72px + 24px) 24px 36px; row-gap: 8px; }
  .nhd-frame .nhd-headline{ max-width: none; margin-top: 8px; }
  .nhd-frame h1{ font-size: clamp(40px, 11vw, 56px); }
  .nhd-frame .nhd-visual{ height: min(88vw, 460px); }
  .nhd-frame .nhd-copy-right{ justify-self: start; max-width: 100%; }
  .nhd-frame .nhd-stats{ padding-top: 28px; gap: 18px 36px; }
  .nhd-frame .nhd-stat{ margin-right: 0; }
  .nhd-frame .nhd-fintrac{ margin-left: 0; flex-basis: 100%; }
}

/* ---------------- SHARED NEW-SECTION SHELL ---------------- */
.nhd-section{ isolation: isolate; overflow: hidden; padding: 112px 0; position: relative; z-index: 1; }
.nhd-section-inner{ width: min(1120px, calc(100% - 80px)); max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; }
.nhd-section-label{
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhd-green-deep);
  margin: 0 auto 18px; font-weight: 400; text-align: center;
}
.nhd-section h2{
  font-family: "Stack Sans Notch", "Stack Sans Text", sans-serif; font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.015em;
  color: var(--nhd-ink); margin: 0 auto 24px; max-width: 42ch; text-align: center;
}
.nhd-section .nhd-lede{ font-size: 18px; line-height: 1.65; color: var(--nhd-ink-soft); margin: 0 auto; max-width: 58ch; text-align: center; }
.nhd-section-alt{ background: none; }
.nhd-section-alt .nhd-section-inner{
  background: #E7F5EF;
  border-radius: 32px;
  padding: 64px 24px;
  width: min(1120px, calc(100% - 48px));
}
.nhd-section-white{ background: #F7FCFA; }

@media (max-width: 640px){
  .nhd-section-alt .nhd-section-inner{ border-radius: 20px; padding: 48px 20px; }
}
.nhd-divider{ height: 1px; background: rgba(17,24,39,0.08); border: none; margin: 0; }

@media (max-width: 900px){
  .nhd-section{ padding: 80px 0; }
  .nhd-section-inner{ width: calc(100% - 48px); }
}

/* ---------------- CONNECTED FUTURE DIAGRAM ---------------- */
.nhd-connected-head{ max-width: 720px; margin: 0 auto 56px; text-align: center; }
.nhd-connected-head h2{ max-width: 18ch; }

.nhd-flow{ position: relative; --flow-forest: #1B342D; --flow-forest-2: #13241F; }
.nhd-flow::before{
  content: ""; position: absolute; inset: -28px -12px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(17,24,39,0.16) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, #000 35%, transparent 100%);
}
.nhd-flow .flow-lines{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nhd-flow-grid{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(200px, 0.9fr) 56px minmax(400px, 1.45fr) 56px minmax(200px, 0.9fr);
  align-items: center;
}
.nhd-flow .flow-side--in{ grid-column: 1; } .nhd-flow .flow-core{ grid-column: 3; } .nhd-flow .flow-side--out{ grid-column: 5; }

.nhd-flow .flow-col-label{ font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhd-green-deep); margin: 0; font-weight: 400; }
.nhd-flow .flow-side{ display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.nhd-flow .flow-nodes{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.nhd-flow .nhd-flow-node{
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid rgba(17,24,39,0.08); border-radius: 14px; padding: 12px 14px;
  font-size: 15px; line-height: 1.3; color: var(--nhd-ink); cursor: default;
  transition: border-color .18s ease, box-shadow .18s ease, translate .18s ease, opacity .18s ease;
}
.nhd-flow .nhd-flow-node .ico{
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: rgba(0,186,124,0.10); color: var(--nhd-green-deep);
  display: grid; place-items: center; transition: background .18s ease, color .18s ease;
}
.nhd-flow .nhd-flow-node .ico svg{ width: 19px; height: 19px; }
.nhd-flow .nhd-flow-node:hover{ border-color: rgba(0,186,124,0.45); box-shadow: 0 14px 34px rgba(20,30,28,0.08); translate: 0 -2px; }
.nhd-flow .nhd-flow-node:hover .ico{ background: var(--nhd-green); color: #fff; }

.nhd-flow .flow-vlink{ display: none; }

.nhd-flow .flow-core{
  position: relative;
  background: linear-gradient(160deg, var(--flow-forest), var(--flow-forest-2));
  color: #fff; border-radius: 22px; padding: 26px 28px 26px;
  box-shadow: 0 22px 54px rgba(19,36,31,0.16); isolation: isolate;
}
.nhd-flow .flow-core::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
  opacity: .8;
}
.nhd-flow .flow-core-head{ display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.nhd-flow .flow-core-head .flow-col-label{ color: var(--nhd-green-2); }
.nhd-flow .flow-core-head .flow-sub{ margin: 0; font-size: 13px; color: rgba(255,255,255,0.55); margin-left: auto; }

.nhd-flow .flow-badge{
  position: absolute; left: -27px; top: 50%; width: 54px; height: 54px; margin-top: -27px; z-index: 2;
  border-radius: 50%; background: var(--nhd-green-2); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--nhd-bg), 0 12px 28px rgba(0,216,153,0.38);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.nhd-flow .flow-badge svg{ width: 30px; height: 30px; display: block; }
.nhd-flow .flow-badge .mark-ring{ fill: var(--nhd-green-2); }
.nhd-flow .flow-badge .mark-ink{ fill: currentColor; }
.nhd-flow.is-hot .flow-badge{ transform: scale(1.08); box-shadow: 0 0 0 6px var(--nhd-bg), 0 14px 34px rgba(0,216,153,0.5); }
.nhd-flow .flow-port{
  position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; z-index: 2;
  border-radius: 50%; background: var(--nhd-green-2); box-shadow: 0 0 0 5px var(--nhd-bg);
}

.nhd-flow .flow-caps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.nhd-flow .flow-cap{
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  font-size: 13.5px; line-height: 1.25; color: rgba(255,255,255,0.92); cursor: default;
  transition: background .18s ease, border-color .18s ease, translate .18s ease;
}
.nhd-flow .flow-cap:last-child{ grid-column: 1 / -1; }
.nhd-flow .flow-cap .ico{
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(0,216,153,0.14); color: var(--nhd-green-2);
  display: grid; place-items: center; transition: background .18s ease, color .18s ease;
}
.nhd-flow .flow-cap .ico svg{ width: 16px; height: 16px; }
.nhd-flow .flow-cap:hover{ background: rgba(0,216,153,0.16); border-color: rgba(0,216,153,0.38); translate: 0 -1px; }
.nhd-flow .flow-cap:hover .ico{ background: var(--nhd-green-2); color: var(--flow-forest-2); }

.nhd-flow .flow-link-base{ fill: none; stroke: rgba(46,115,96,0.28); stroke-width: 1.5; stroke-linecap: round; transition: stroke .2s ease, stroke-width .2s ease; }
.nhd-flow .flow-link-dash{ fill: none; stroke: var(--nhd-green); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 9; opacity: .55; animation: nhdFlowDash 1.2s linear infinite; transition: opacity .2s ease, stroke-width .2s ease; }
/* Chips respond on a continuous 0-1 level set per frame, so intensity rises
   ahead of an approaching packet and decays in its wake. */
.nhd-flow .flow-cap{
  --cap-lit: 0;
  background: rgba(255,255,255,calc(0.04 + var(--cap-lit) * 0.10));
  border-color: rgba(0,216,153,calc(0.07 + var(--cap-lit) * 0.38));
}
.nhd-flow .flow-cap .ico{
  box-shadow: 0 0 calc(var(--cap-lit) * 14px) rgba(0,216,153,calc(var(--cap-lit) * 0.7));
}
/* Hovering a customer type illuminates every outcome, because the claim is
   that any of these customers gets all of these benefits — not that each
   customer maps to one particular one. */
.nhd-flow .nhd-flow-node.is-related{
  border-color: rgba(0,186,124,0.55);
  box-shadow: 0 6px 20px rgba(0,216,153,0.22);
}
.nhd-flow .nhd-flow-node.is-related:nth-child(2){ transition-delay: .06s; }
.nhd-flow .nhd-flow-node.is-related:nth-child(3){ transition-delay: .12s; }
.nhd-flow .nhd-flow-node.is-muted{ opacity: .55; }
.nhd-flow .flow-link.is-hot .flow-link-base{ stroke: rgba(0,186,124,0.55); stroke-width: 2; }
.nhd-flow .flow-link.is-hot .flow-link-dash{ opacity: 1; stroke-width: 2; animation-duration: .5s; }
@keyframes nhdFlowDash{ to{ stroke-dashoffset: -14; } }

.nhd-flow.js-ready .nhd-flow-node, .nhd-flow.js-ready .flow-core{ opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1), border-color .18s ease, box-shadow .18s ease; }
.nhd-flow.js-ready.is-in .nhd-flow-node, .nhd-flow.js-ready.is-in .flow-core{ opacity: 1; transform: none; }
.nhd-flow.js-ready.is-in .flow-core{ transition-delay: .1s; }
.nhd-flow.js-ready.is-in .flow-nodes li:nth-child(2){ transition-delay: .12s; }
.nhd-flow.js-ready.is-in .flow-nodes li:nth-child(3){ transition-delay: .24s; }
.nhd-flow.js-ready.is-in .flow-side--out .flow-nodes li:nth-child(1){ transition-delay: .3s; }
.nhd-flow.js-ready.is-in .flow-side--out .flow-nodes li:nth-child(2){ transition-delay: .42s; }
.nhd-flow.js-ready.is-in .flow-side--out .flow-nodes li:nth-child(3){ transition-delay: .54s; }
.nhd-flow.js-ready .flow-link-base{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.nhd-flow.js-ready .flow-link-dash{ opacity: 0; }
/* Packet opacity is set inline per frame, so the reveal gates the whole
   layer instead of the individual circles. */
.nhd-flow.js-ready .flow-lines{ opacity: 0; }
.nhd-flow.js-ready.is-in .flow-lines{ opacity: 1; transition: opacity .6s ease 1.3s; }
.nhd-flow.js-ready.is-in .flow-link-base{ stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease .25s, stroke .2s ease, stroke-width .2s ease; }
.nhd-flow.js-ready.is-in .flow-link-dash{ opacity: .55; transition: opacity .6s ease 1.1s, stroke-width .2s ease; }
.nhd-flow.js-ready.is-in .flow-link.is-hot .flow-link-dash{ opacity: 1; transition: opacity .2s ease, stroke-width .2s ease; }


@media (max-width: 999px){
  .nhd-flow-grid{ grid-template-columns: 1fr; }
  .nhd-flow .flow-side--in, .nhd-flow .flow-core, .nhd-flow .flow-side--out{ grid-column: auto; }
  .nhd-flow .flow-lines{ display: none; }
  .nhd-flow .flow-nodes{ flex-direction: row; flex-wrap: wrap; }
  .nhd-flow .nhd-flow-node{ flex: 1 1 150px; }
  .nhd-flow .flow-vlink{ display: block; width: 2px; height: 36px; margin: 0 auto; background: repeating-linear-gradient(to bottom, var(--nhd-green) 0 4px, transparent 4px 9px); opacity: .7; }
  .nhd-flow .flow-core{ margin: 0; padding-top: 44px; }
  .nhd-flow .flow-badge{ left: 50%; top: -27px; margin: 0 0 0 -27px; }
  .nhd-flow .flow-port{ right: 50%; top: auto; bottom: -7px; margin: 0 -7px 0 0; }
  .nhd-flow .flow-core-head .flow-sub{ display: none; }
}
@media (max-width: 560px){
  .nhd-flow .flow-caps{ grid-template-columns: 1fr; }
  .nhd-flow .flow-core{ padding: 40px 18px 20px; border-radius: 18px; }
  .nhd-flow .nhd-flow-node{ flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .nhd-flow .flow-link-dash{ animation: none; }
  .nhd-flow.js-ready .nhd-flow-node, .nhd-flow.js-ready .flow-core, .nhd-flow.js-ready .flow-link-base, .nhd-flow.js-ready .flow-link-dash{ transition: none; }
}

/* ---------------- WHY AXON: BENEFIT CARDS ---------------- */
.nhd-benefit-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.nhd-benefit-card{
  background: #fff; border: 1px solid rgba(17,24,39,0.08); border-radius: 18px;
  padding: 28px 26px 26px; min-height: 280px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.nhd-benefit-card:hover{
  border-color: rgba(0,186,124,0.35);
  box-shadow: 0 18px 40px rgba(20,30,28,0.10);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce){
  .nhd-benefit-card{ transition: none; }
  .nhd-benefit-card:hover{ transform: none; }
}
.nhd-benefit-card .icon-wrap{
  width: 118px; height: 118px; margin: 0 0 16px -6px;
  overflow: hidden; border-radius: 50%;
}

@media (max-width: 640px){
  .nhd-benefit-card .icon-wrap{ width: 96px; height: 96px; }
}

/* Dot-matrix benefit icons: the accent dots settle into place when the card
   enters view, and lift on hover. The pale filler dots inherit currentColor
   so the icon sits correctly on whatever ground the card uses. */
.nhd-benefit-card .icon-wrap{ color: rgba(17,24,39,0.10); }
.nhd-benefit-card .icon-wrap svg{ width: 100%; height: 100%; display: block; overflow: visible; }

.nhd-benefit-card .icon-wrap .dot-on{
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.4);
}
.nhd-benefit-card.is-in .icon-wrap .dot-on{
  animation: nhdDotIn .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes nhdDotIn{
  from{ opacity: 0; transform: scale(0.4); }
  to{ opacity: 1; transform: scale(1); }
}

/* Hover: a gentle ripple outward from the icon centre. */
.nhd-benefit-card .icon-wrap .dot-on{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.nhd-benefit-card:hover.is-in .icon-wrap .dot-on{
  animation: none; opacity: 1;
  transform: scale(1.18);
  transition-delay: var(--rd, 0ms);
}

@media (prefers-reduced-motion: reduce){
  .nhd-benefit-card .icon-wrap .dot-on{
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}

.nhd-benefit-card h3{ font-family: "Stack Sans Notch", sans-serif; font-size: 20px; font-weight: 400; margin: 0 0 10px; color: var(--nhd-ink); }
.nhd-benefit-card p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--nhd-ink-soft); }

@media (max-width: 1000px){ .nhd-benefit-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .nhd-benefit-grid{ grid-template-columns: 1fr; } }

/* ---------------- SOLUTIONS: new copy boxes ---------------- */
.nhd-solutions-copy-grid{ display: grid; gap: 16px; max-width: 720px; margin: 48px auto 0; }
.nhd-solutions-copy-box{
  background: #fff; border: 1px solid rgba(17,24,39,0.10); border-radius: 16px;
  padding: 22px 20px; text-align: center; box-shadow: 0 10px 30px rgba(20,30,28,0.06);
}
.nhd-solutions-copy-label{
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--nhd-green-deep); margin-bottom: 12px;
}
.nhd-solutions-copy-text{ margin: 0; font-size: 16px; line-height: 1.55; color: var(--nhd-ink); text-align: center; }

/* ---------------- REGULATION & COMPLIANCE: interactive world map ----------------
   Replaces the static 4-card grid with a single interactive map — hover to
   highlight, click to focus + pan/zoom, tabs/keyboard as alternate paths.
   Ported from public/compare-hero/globe-demo/version-a.{html,js}. */
.nhd-reg{
  --map-bg-1: #0E6B54;
  --map-bg-2: #16A085;
  --map-land: #0A3D30;
  position: relative;
  background: #F4FBF8;
  padding: 112px 0;
}
@media (max-width: 900px){ .nhd-reg{ padding: 80px 0; } }

.nhd-reg-intro{
  max-width: 720px; margin: 0 auto 56px; padding: 0 24px; text-align: center;
}
.nhd-reg-eyebrow{
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nhd-green-deep); margin: 0 0 18px; font-weight: 600;
}
.nhd-reg-heading{
  color: var(--nhd-ink); margin: 0 0 20px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}
.nhd-reg.is-in .nhd-reg-heading{ opacity: 1; transform: translateY(0); }
.nhd-reg-lede{
  font-size: 17px; line-height: 1.6; color: var(--nhd-ink-soft); margin: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1) 0.15s, transform 0.8s cubic-bezier(.22,1,.36,1) 0.15s;
}
.nhd-reg.is-in .nhd-reg-lede{ opacity: 1; transform: translateY(0); }

.nhd-reg-stage{
  position: relative;
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 40px; align-items: center;
}
@media (max-width: 980px){ .nhd-reg-stage{ grid-template-columns: 1fr; } }

.nhd-reg-map-frame{
  position: relative; border-radius: 32px;
  background: radial-gradient(ellipse 90% 80% at 50% 20%, var(--map-bg-2) 0%, var(--map-bg-1) 100%);
  overflow: hidden; aspect-ratio: 16/11;
  box-shadow: 0 30px 70px rgba(11,23,18,0.1), inset 0 0 0 1px rgba(11,23,18,0.06);
  opacity: 0; transform: scale(0.96);
  transition: opacity 1s cubic-bezier(.22,1,.36,1) 0.1s, transform 1s cubic-bezier(.22,1,.36,1) 0.1s;
}
.nhd-reg.is-in .nhd-reg-map-frame{ opacity: 1; transform: scale(1); }

.nhd-reg-map-frame::before{
  content: ""; position: absolute; inset: -26px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.4px);
  background-size: 26px 26px; opacity: 0.5;
  animation: nhdRegGridDrift 40s linear infinite;
}
@keyframes nhdRegGridDrift{
  from{ background-position: 0 0; }
  to{ background-position: 26px 52px; }
}
@media (prefers-reduced-motion: reduce){
  .nhd-reg-map-frame::before{ animation: none !important; }
}
.nhd-reg-map-frame::after{
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 100px 30px rgba(4,20,15,0.28);
}

.nhd-reg-map-glow{
  position: absolute; z-index: 1; pointer-events: none;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  left: 20%; top: 10%; filter: blur(10px);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1), opacity 0.6s ease;
}

.nhd-reg-map-viewport{ position: relative; z-index: 2; width: 100%; height: 100%; }
.nhd-reg-map-svg-wrap{
  position: absolute; inset: 0;
  transition: transform 0.9s cubic-bezier(.34,1.56,.36,1);
  will-change: transform;
}
.nhd-reg-map-svg-wrap.is-parallax{
  transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}
.nhd-reg-map-svg-wrap svg{ width: 100%; height: 100%; display: block; }

.nhd-reg-map-svg-wrap path,
.nhd-reg-map-svg-wrap g > path{
  fill: var(--map-land);
  stroke: rgba(255,255,255,0.14);
  stroke-width: 0.6;
  transition: fill 0.4s ease, opacity 0.4s ease;
}
.nhd-reg-map-svg-wrap .jurisdiction path, .nhd-reg-map-svg-wrap path.jurisdiction{
  fill: rgba(0,217,153,0.5);
  stroke: #fff;
  stroke-width: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transform-origin: center;
  transform-box: fill-box;
}
.nhd-reg.is-in .nhd-reg-map-svg-wrap .jurisdiction path,
.nhd-reg.is-in .nhd-reg-map-svg-wrap path.jurisdiction{
  animation:
    nhdRegJurReveal 0.6s cubic-bezier(.34,1.56,.36,1) forwards,
    nhdRegJurGlow 3.4s ease-in-out infinite;
  animation-delay: calc(0.5s + var(--reveal-delay, 0s)), calc(1.1s + var(--reveal-delay, 0s));
}
@keyframes nhdRegJurReveal{
  0%{ opacity: 0; transform: scale(0.7); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes nhdRegJurGlow{
  0%, 100%{ filter: drop-shadow(0 0 0 rgba(0,217,153,0)); }
  50%{ filter: drop-shadow(0 0 6px rgba(0,217,153,0.85)); }
}
@media (prefers-reduced-motion: reduce){
  .nhd-reg-map-svg-wrap .jurisdiction path, .nhd-reg-map-svg-wrap path.jurisdiction{
    opacity: 1 !important; transform: none !important;
  }
}
.nhd-reg-map-svg-wrap .jurisdiction:hover path, .nhd-reg-map-svg-wrap path.jurisdiction:hover,
.nhd-reg-map-svg-wrap .jurisdiction.is-hot path, .nhd-reg-map-svg-wrap path.jurisdiction.is-hot{
  fill: rgba(0,217,153,0.72);
  stroke: #fff;
  animation: none;
  filter: drop-shadow(0 0 8px rgba(0,217,153,0.9));
}
.nhd-reg-map-svg-wrap .jurisdiction.is-selected path, .nhd-reg-map-svg-wrap path.jurisdiction.is-selected{
  fill: #00E8A4;
  stroke: #F2FFFA;
  stroke-width: 1.5;
  animation: none;
  filter:
    drop-shadow(0 0 2px rgba(242,255,250,0.95))
    drop-shadow(0 0 9px rgba(0,232,164,0.85))
    drop-shadow(0 0 22px rgba(0,217,153,0.45));
  transition: fill 0.45s ease, stroke-width 0.45s ease, filter 0.45s ease;
}
.nhd-reg-map-svg-wrap .jurisdiction--sm path{
  stroke-width: 1.6;
  filter: drop-shadow(0 0 3px rgba(0,217,153,0.9));
}
.nhd-reg-map-svg-wrap .jurisdiction--sm.is-hot path, .nhd-reg-map-svg-wrap .jurisdiction--sm.is-selected path{
  stroke-width: 2;
}
.nhd-reg-map-frame.has-focus .nhd-reg-map-svg-wrap path{
  opacity: 0.22 !important;
  fill: #04211A;
  transition: opacity 0.55s ease, fill 0.55s ease;
}
/* Unselected jurisdictions recede but keep their green, sitting above plain
   land so the selected region is the single bright thing on the map.
   Paired selectors throughout: a jurisdiction is sometimes a <g> wrapping
   paths (Canada, UK) and sometimes a <path> carrying the class itself (every
   EU member), so each rule has to match both shapes. */
.nhd-reg-map-frame.has-focus .nhd-reg-map-svg-wrap .jurisdiction:not(.is-hot):not(.is-selected) path,
.nhd-reg-map-frame.has-focus .nhd-reg-map-svg-wrap path.jurisdiction:not(.is-hot):not(.is-selected){
  opacity: 0.55 !important;
  fill: rgba(0,217,153,0.5);
  transition: opacity 0.55s ease, fill 0.55s ease;
}
.nhd-reg-map-frame.has-focus .nhd-reg-map-svg-wrap .jurisdiction.is-hot path,
.nhd-reg-map-frame.has-focus .nhd-reg-map-svg-wrap path.jurisdiction.is-hot{
  opacity: 1 !important;
  fill: rgba(0,217,153,0.72);
}
.nhd-reg-map-frame.has-focus .nhd-reg-map-svg-wrap .jurisdiction.is-selected path,
.nhd-reg-map-frame.has-focus .nhd-reg-map-svg-wrap path.jurisdiction.is-selected{
  opacity: 1 !important;
  fill: #00E8A4;
}
/* Shapeless focus (Bahrain): no country is selected, so every jurisdiction
   recedes and the halo is the only bright thing. */
.nhd-reg-map-frame.has-shapeless-focus .nhd-reg-map-svg-wrap .jurisdiction:not(.is-hot) path,
.nhd-reg-map-frame.has-shapeless-focus .nhd-reg-map-svg-wrap path.jurisdiction:not(.is-hot){
  opacity: 0.55 !important;
  fill: rgba(0,217,153,0.5);
}

/* ----- Arrival: halo + light sweep on the selected jurisdiction ----- */
.nhd-reg-halo{
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
.nhd-reg-halo.is-arriving{
  animation: nhdRegHalo 1.5s cubic-bezier(.16,.84,.2,1) forwards;
}
@keyframes nhdRegHalo{
  0%{ opacity: 0; transform: scale(0.35); }
  35%{ opacity: 1; }
  100%{ opacity: 0.55; transform: scale(1); }
}
/* Opacity and the gradient offsets are driven from JS (see runSweep), since
   the band has to travel inside the rect's own space to stay within its
   clip path. */
.nhd-reg-sweep{
  opacity: 0;
  pointer-events: none;
}

.nhd-reg-markers{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.nhd-reg-marker{
  appearance: none; -webkit-appearance: none; border: none; background: transparent;
  padding: 0; margin: 0; font: inherit;
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
}
.nhd-reg-marker::before{
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
}
.nhd-reg-marker-dot{
  display: none;
}
.nhd-reg-marker-label{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--nhd-ink);
  background: #fff; border: 1px solid rgba(11,23,18,0.1);
  box-shadow: 0 6px 16px rgba(11,23,18,0.12);
  padding: 5px 10px 5px 8px; border-radius: 20px;
  opacity: 0; transform: translateY(-50%) translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none; display: flex; align-items: center; gap: 6px;
}
.nhd-reg-marker-label .nhd-reg-status-chip{
  font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 10px;
  background: rgba(0,186,124,0.12); color: var(--nhd-green-deep);
}
.nhd-reg-marker:hover .nhd-reg-marker-label,
.nhd-reg-marker.is-active .nhd-reg-marker-label,
.nhd-reg-marker:focus-visible .nhd-reg-marker-label{
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.nhd-reg-marker:focus-visible{ outline: none; }

.nhd-reg-arcs{ position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.nhd-reg-info-panel{ position: relative; min-height: 320px; }
.nhd-reg-info-empty{ display: none; }
.nhd-reg-info-card{
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(.22,1,.36,1), transform 0.4s cubic-bezier(.22,1,.36,1);
  position: absolute; inset: 0; pointer-events: none;
}
.nhd-reg-info-card.is-active{
  opacity: 1; transform: translateY(0); pointer-events: auto; position: relative;
}
.nhd-reg-info-status{
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px; margin-bottom: 16px;
}
.nhd-reg-info-status.status-active{ background: var(--nhd-green); color: #fff; }
.nhd-reg-info-status.status-final{ background: rgba(0,186,124,0.12); color: var(--nhd-green-deep); border: 1px solid rgba(0,186,124,0.3); }
.nhd-reg-info-status.status-progress{ background: rgba(17,24,39,0.05); color: var(--nhd-ink-soft); border: 1px solid rgba(17,24,39,0.09); }
.nhd-reg-info-title{
  font-family: "Stack Sans Notch", "Stack Sans Text", sans-serif; font-weight: 400;
  font-size: 30px; line-height: 1.15; margin: 0 0 14px; color: var(--nhd-ink);
}
.nhd-reg-info-body{ font-size: 15px; line-height: 1.65; color: var(--nhd-ink-soft); margin: 0; }

.nhd-reg-jur-tabs{ display: flex; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.nhd-reg-jur-tab{
  appearance: none; border: 1px solid rgba(17,24,39,0.12); background: #fff;
  padding: 9px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
  color: var(--nhd-ink-soft); cursor: pointer; font-family: inherit;
  transition: all 0.2s ease;
}
.nhd-reg-jur-tab.is-active{ background: var(--nhd-green); border-color: var(--nhd-green); color: #fff; }
.nhd-reg-jur-tab:focus-visible{ outline: 2px solid var(--nhd-green); outline-offset: 2px; }
.nhd-reg-jur-tab:hover:not(.is-active){ border-color: var(--nhd-green); color: var(--nhd-green-deep); }

.nhd-reg-outro{ max-width: 640px; margin: 64px auto 0; padding: 0 24px; text-align: center; }
.nhd-reg-outro p{
  font-size: 15px; color: var(--nhd-ink-faint); margin: 0;
  opacity: 0; transition: opacity 0.8s ease;
}
.nhd-reg.is-in .nhd-reg-outro p{ opacity: 1; transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce){
  .nhd-reg-heading, .nhd-reg-lede, .nhd-reg-map-frame, .nhd-reg-info-card, .nhd-reg-outro p{ transition: none !important; opacity: 1 !important; transform: none !important; }
  .nhd-reg-map-svg-wrap .jurisdiction path, .nhd-reg-map-svg-wrap path.jurisdiction{ animation: none !important; }
  .nhd-reg-halo, .nhd-reg-sweep{ display: none !important; }
}

/* ---------------- HEADLINE TYPOGRAPHY CONSISTENCY ----------------
   Every H2 on the page — kept sections (Solutions, Roadmap, News,
   Featured in), new sections (Connected Future, Why AXON), and
   Compliance — shares one type system: same font, same size, same
   solid color, no gradient. */
.sol-section-title,
.roadmap-title,
.insights-title,
.press-title,
.nhd-reg-heading{
  font-family: "Stack Sans Notch", "Stack Sans Text", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
/* Neutralize the live site's gradient-text treatment (from styles.css on
   the first three, from press-featured-video.css on press-title) so all
   four kept headlines match at plain solid color and the same size —
   gradient decision is deferred per team feedback. */
.sol-section-title,
.roadmap-title,
.insights-title,
.press-title{
  background-image: none;
  -webkit-text-fill-color: var(--ink, #111827);
  color: var(--ink, #111827);
}

/* ---------------- SOLUTIONS: Features icons ----------------
   Scoped override of styles.css, which paints these a washed-out white.
   Duotone icons expose a secondary layer, so the fill reads as a soft green
   wash behind a brighter green stroke. */
.newhomedemo-page .sol-feat i{
  color: var(--nhd-green-2);
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(0,216,153,0.35));
  transition: color .2s ease, filter .2s ease, transform .2s ease;
}
.newhomedemo-page .sol-feat i::after{ opacity: .9; }
.newhomedemo-page .sol-feat{ color: rgba(255,255,255,0.85); }
.newhomedemo-page .sol-feat:hover i{
  color: #7BFFD4;
  filter: drop-shadow(0 0 9px rgba(0,216,153,0.6));
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce){
  .newhomedemo-page .sol-feat i{ transition: none; }
  .newhomedemo-page .sol-feat:hover i{ transform: none; }
}

/* ---------------- SOLUTIONS: stage video ----------------
   Replaces the 19MB handtyping GIF (800x438, stretched) with a re-encoded
   720p clip at ~0.7MB. The overlay is lighter than the shared stylesheet's
   48%, since this footage is brighter and needs less taming — but it still
   carries a bottom-weighted scrim so the white copy stays readable. */
.newhomedemo-page .sol-stage{
  position: relative;
  background: #0A1F1A;
}
.newhomedemo-page .sol-stage-video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.newhomedemo-page .sol-stage::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4,20,16,0.72) 0%, rgba(4,20,16,0.42) 46%, rgba(4,20,16,0.18) 100%),
    linear-gradient(to top, rgba(4,20,16,0.55) 0%, rgba(4,20,16,0) 55%);
}
.newhomedemo-page .sol-stage > *:not(.sol-stage-video){ position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce){
  .newhomedemo-page .sol-stage-video{ display: none; }
  .newhomedemo-page .sol-stage{
    background: #0A1F1A url('assets/animation/axon-sunset-solutions-poster.jpg') center / cover no-repeat;
  }
}