:root {
  --acc: #C8631A;
  --accd: #A44E10;
  --cream: #F4EDE1;
  --paper: #FBF7EE;
  --paper-hot: #FFFCF5;
  --ink: #141A19;
  --muted: #5B6360;
  --body: #3A423F;
  --navy: #101D33;
  --blue: #1D4BA0;
  --gold: #F6D67A;
  --dim: #2E4364;
  --line: #31486C;
}

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--cream); color: var(--ink); }
* { box-sizing: border-box; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--acc); }
a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

@keyframes dashflow { to { stroke-dashoffset: -320; } }
@keyframes dashslow { to { stroke-dashoffset: -160; } }
@keyframes pulsering { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: .35; } }
@keyframes blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes pktA { 0% { transform: translate(0,0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translate(360px,0); opacity: 0; } }
@keyframes pktD { 0% { transform: translate(0,0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translate(178px,0); opacity: 0; } }
@keyframes drift { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(0,-7px); } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}

.btn { color: inherit; }
.btn:hover { color: inherit; }

.btn-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #F7F2E6;
  border-radius: 999px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease;
}
.btn-navy:hover {
  background: var(--acc);
  color: #F7F2E6;
}
.btn-nav {
  padding: 13px 24px;
  box-shadow: 0 8px 20px -6px rgba(29,75,160,.55);
}
.btn-nav:hover { box-shadow: 0 12px 26px -6px rgba(200,99,26,.55); transform: translateY(-2px); }
.btn-hero {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 20px 34px;
  box-shadow: 0 14px 30px -8px rgba(29,75,160,.55);
}
.btn-hero:hover { box-shadow: 0 18px 36px -8px rgba(200,99,26,.55); transform: translateY(-3px); }

.btn-gold {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  padding: 20px 34px;
  border-radius: 999px;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,.45);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease;
}
.btn-gold:hover {
  background: #FFFCF5;
  color: var(--ink);
  box-shadow: 0 22px 40px -10px rgba(0,0,0,.5);
  transform: translateY(-3px);
}

.card-cream {
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(20,26,25,.04), 0 20px 38px -26px rgba(20,26,25,.45);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, background .35s ease;
}
.card-cream:hover {
  background: var(--paper-hot);
  box-shadow: 0 1px 0 rgba(20,26,25,.04), 0 26px 44px -24px rgba(20,26,25,.5);
  transform: translateY(-4px);
}

.hero-panel {
  position: relative;
  border-radius: 26px;
  background: var(--navy);
  padding: 28px;
  box-shadow: 0 30px 60px -26px rgba(16,29,51,.8);
  transform: rotate(-1.3deg);
  transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease;
}
.hero-panel:hover { transform: rotate(0deg) translateY(-4px); }

.ticker-track:hover { animation-play-state: paused; }

.stage-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  color: #F2EADA;
  background: transparent;
}
.stage-tab:focus-visible { outline: 2px solid #E9C55E; outline-offset: 2px; }
.stage-tab .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3F5477;
}
#how[data-stage="0"] .stage-tab[data-jump="0"],
#how[data-stage="1"] .stage-tab[data-jump="1"],
#how[data-stage="2"] .stage-tab[data-jump="2"] {
  background: var(--acc);
}
#how[data-stage="0"] .stage-tab[data-jump="0"] .dot,
#how[data-stage="1"] .stage-tab[data-jump="1"] .dot,
#how[data-stage="2"] .stage-tab[data-jump="2"] .dot {
  background: #E9C55E;
}

.sys-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 210px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #17273F;
  padding: 13px 16px;
  transition: transform .85s cubic-bezier(.62,.04,.31,1), opacity .5s ease, border-color .5s ease;
}
.relay-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 136px;
  border: 2.5px solid var(--acc);
  border-radius: 20px;
  background: #1C2F4C;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 0 0 6px rgba(200,99,26,.12);
  transition: transform .85s cubic-bezier(.62,.04,.31,1), opacity .5s ease;
}

#how[data-stage="0"] .node-bamboo  { transform: translate(40px, 40px);   opacity: 1;    border-color: var(--dim); }
#how[data-stage="1"] .node-bamboo  { transform: translate(40px, 274px);  opacity: 1;    border-color: var(--dim); }
#how[data-stage="2"] .node-bamboo  { transform: translate(40px, 270px);  opacity: 1;    border-color: #63A1F5; }

#how[data-stage="0"] .node-adp     { transform: translate(770px, 30px);  opacity: 1;    border-color: var(--dim); }
#how[data-stage="1"] .node-adp     { transform: translate(910px, 60px);  opacity: 1;    border-color: var(--dim); }
#how[data-stage="2"] .node-adp     { transform: translate(900px, 270px); opacity: 1;    border-color: #E9C55E; }

#how[data-stage="0"] .node-plexxis { transform: translate(560px, 180px); opacity: 1;    border-color: var(--dim); }
#how[data-stage="1"] .node-plexxis { transform: translate(910px, 190px); opacity: 1;    border-color: var(--dim); }
#how[data-stage="2"] .node-plexxis { transform: translate(900px, 40px);  opacity: 0.26; border-color: var(--dim); }

#how[data-stage="0"] .node-cmic    { transform: translate(860px, 330px); opacity: 1;    border-color: var(--dim); }
#how[data-stage="1"] .node-cmic    { transform: translate(910px, 320px); opacity: 1;    border-color: var(--dim); }
#how[data-stage="2"] .node-cmic    { transform: translate(900px, 110px); opacity: 0.26; border-color: var(--dim); }

#how[data-stage="0"] .node-qb      { transform: translate(110px, 290px); opacity: 1;    border-color: var(--dim); }
#how[data-stage="1"] .node-qb      { transform: translate(910px, 450px); opacity: 1;    border-color: var(--dim); }
#how[data-stage="2"] .node-qb      { transform: translate(900px, 460px); opacity: 0.26; border-color: var(--dim); }

#how[data-stage="0"] .node-auto    { transform: translate(380px, 470px); opacity: 1;    border-color: var(--dim); }
#how[data-stage="1"] .node-auto    { transform: translate(40px, 470px);  opacity: 0.32; border-color: var(--dim); }
#how[data-stage="2"] .node-auto    { transform: translate(40px, 470px);  opacity: 0;    border-color: var(--dim); }

#how[data-stage="0"] .relay-node { transform: translate(455px, 232px); opacity: 0; }
#how[data-stage="1"] .relay-node { transform: translate(455px, 232px); opacity: 1; }
#how[data-stage="2"] .relay-node { transform: translate(440px, 228px); opacity: 1; }

.layer { position: absolute; inset: 0; transition: opacity .5s ease; pointer-events: none; }
.layer-svg { pointer-events: none; }
.op-0, .op-1, .op-2 { opacity: 0; }
#how[data-stage="0"] .op-0,
#how[data-stage="1"] .op-1,
#how[data-stage="2"] .op-2 { opacity: 1; }

#how { height: 340vh; }
.how-wide {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  flex-direction: column;
  padding: 26px clamp(20px, 3.5vw, 48px) 28px;
  display: flex;
}
.how-narrow { display: none; padding: clamp(40px, 9vw, 64px) clamp(20px, 5vw, 32px); }

@media (max-width: 899px) {
  #how { height: auto; }
  .how-wide { display: none; }
  .how-narrow { display: block; }
}