/* ============================================================
   Web3 Page — SC Airy light theme (spec 035 §4.10)
   ============================================================ */

.web3-page {
  width: min(980px, calc(100% - 2rem));
  margin: 2.2rem auto 3.5rem;
}

.web3-hero,
.web3-block {
  background: var(--bg-panel);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glow);
}

.web3-hero {
  padding: 1.6rem 1.5rem 1.45rem;
  margin-bottom: 1.1rem;
}

/* eyebrow: SC blue, mono 700 (§3.2) */
.web3-kicker {
  display: inline-flex;
  margin: 0 0 0.75rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(4, 115, 234, 0.35);
  background: var(--sc-blue-50);
  color: var(--sc-blue);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.web3-hero h1 {
  margin: 0 0 0.7rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
}

.web3-hero h1 span {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.web3-lead {
  margin: 0;
  max-width: 42rem;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
}

.web3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.15rem;
}

/* primary CTA (§3.2): blue gradient, white text */
.web3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--btn-radius);
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--cta-shadow);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--btn-ease), box-shadow var(--btn-ease), border-color var(--btn-ease), transform var(--btn-ease);
}

.web3-btn:hover {
  background: var(--cta-bg-hover);
  transform: var(--btn-lift);
}

.web3-btn:active {
  transform: var(--btn-press);
  box-shadow: var(--cta-shadow-active);
}

/* secondary button (§3.2): white, border, navy text */
.web3-btn.is-ghost {
  background: var(--btn-2-bg);
  color: var(--sc-navy);
  border: 1px solid var(--btn-2-border);
  box-shadow: var(--btn-2-shadow);
}

.web3-btn.is-ghost:hover {
  background: var(--btn-2-bg);
  border-color: var(--btn-2-border-hover);
  color: var(--sc-blue-ink);
  box-shadow: var(--btn-2-shadow-hover);
}

.web3-btn.is-ghost:active {
  box-shadow: none;
}

.web3-block {
  padding: 1.35rem 1.4rem 1.25rem;
  margin-bottom: 1rem;
}

.web3-block h2 {
  margin: 0 0 0.7rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.35rem;
}


.web3-block p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.web3-block h3 {
  margin: 0 0 0.25rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1rem;
}

.w3-icon {
  flex: none;
  width: 22px;
  height: 22px;
  stroke: var(--sc-blue);
}

/* ============================================================
   Five-step flow animation (web3-flow.js switches data-step)
   Dark "on-chain" stage; every scene element is styled and timed here.
   ============================================================ */

.w3-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.w3-flow-head h2 {
  margin-bottom: 0.2rem;
}

.w3-sub {
  font-size: 0.95rem;
}

.w3-play {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--btn-2-border);
  border-radius: var(--btn-radius);
  background: var(--btn-2-bg);
  color: var(--text-secondary);
  font: 600 0.85rem var(--font-display);
  cursor: pointer;
  box-shadow: var(--btn-2-shadow);
  transition: border-color var(--btn-ease), color var(--btn-ease), box-shadow var(--btn-ease), transform var(--btn-ease);
}

.w3-play:hover {
  border-color: var(--btn-2-border-hover);
  color: var(--sc-blue-ink);
  box-shadow: var(--btn-2-shadow-hover);
}

.w3-play:active {
  transform: var(--btn-press);
  box-shadow: none;
}

.w3-play .w3-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.4;
}

.w3-play .is-play,
.w3-flow.is-paused .w3-play .is-pause {
  display: none;
}

.w3-flow.is-paused .w3-play .is-play {
  display: block;
}

.w3-stage {
  position: relative;
  margin: 1rem 0 0.8rem;
  padding: 1.2rem 1.3rem 0.4rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(4, 115, 234, 0.32), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, #0a1a38 0%, #050d1f 100%);
  box-shadow: inset 0 0 0 1px rgba(92, 200, 255, 0.18), 0 18px 40px -24px rgba(5, 13, 31, 0.8);
}

/* —— caption (big, plain words for the current step) —— */
.w3-cap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.25rem;
  max-width: 40rem;
  min-height: 5.2rem;
}

.w3-cap-k {
  color: #5cc8ff;
  font: 700 0.75rem var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.w3-cap-t {
  color: #ffffff;
  font: 700 clamp(1.25rem, 2.6vw, 1.6rem) / 1.2 var(--font-display);
}

.w3-cap-d {
  color: #c3d0e6;
  font-size: 0.95rem;
  line-height: 1.5;
}

.w3-cap.is-in > * {
  animation: w3-cap-in 0.5s ease both;
}

.w3-cap.is-in .w3-cap-t { animation-delay: 0.06s; }
.w3-cap.is-in .w3-cap-d { animation-delay: 0.12s; }

@keyframes w3-cap-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.w3-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* —— scene base —— */
.w3-scene * {
  transition: opacity 0.45s ease, stroke 0.45s ease, fill 0.45s ease;
}

.w3-scene :is(.f-sim, .f-nft, .f-dial, .f-vault-door, .f-agree, .f-ring, .f-chip, .f-stamp, .f-burst, .f-halo, .f-spark,
  .f-fire, .f-shard, .f-ember, .f-confetti, .f-paid) {
  transform-box: fill-box;
  transform-origin: center;
}

.f-label {
  fill: #8ea3c7;
  font: 600 13px var(--font-display);
  text-anchor: middle;
}

.f-addr {
  font: 600 11px var(--font-mono);
}

.f-rail {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
  stroke-dasharray: 2 9;
}

.f-arrow {
  fill: none;
  stroke: #5cc8ff;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.f-comet {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 110;
  stroke-dashoffset: 10;
  opacity: 0;
  filter: drop-shadow(0 0 6px #5cc8ff);
}

.f-ring {
  fill: none;
  stroke: #5cc8ff;
  stroke-width: 2;
  opacity: 0;
}

.f-av-body {
  fill: #0f2244;
  stroke: #3b5480;
  stroke-width: 2;
}

.f-av-ico {
  fill: none;
  stroke: #9fb4d6;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.f-vault-body {
  fill: #0f2244;
  stroke: #3b5480;
  stroke-width: 2.5;
}

.f-vault-door {
  fill: #0a1a36;
  stroke: #4a6694;
  stroke-width: 2;
}

.f-dial circle,
.f-dial path {
  fill: none;
  stroke: #c9d6ea;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.f-led {
  fill: #334766;
}

.f-chip {
  opacity: 0;
}

.f-chip rect {
  fill: rgba(92, 200, 255, 0.16);
  stroke: #5cc8ff;
  stroke-width: 1.5;
}

.f-chip text {
  fill: #e0f4ff;
  font: 700 12px var(--font-mono);
  letter-spacing: 0.12em;
  text-anchor: middle;
}

.f-chip-burn rect { fill: rgba(255, 61, 0, 0.18); stroke: #ff6a3d; }
.f-chip-burn text { fill: #ffd2c2; }
.f-chip-done rect { fill: rgba(56, 210, 0, 0.18); stroke: #38D200; }
.f-chip-done text { fill: #d6ffc4; }

.f-doc {
  opacity: 0;
}

.f-doc-body {
  fill: #f8fafc;
  stroke: #5cc8ff;
  stroke-width: 1.5;
}

.f-doc-lines {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 2;
  stroke-linecap: round;
}

.f-tie {
  fill: none;
  stroke: #5cc8ff;
  stroke-width: 2;
  stroke-dasharray: 3 4;
}

.f-sign {
  fill: none;
  stroke: #0473EA;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.f-stamp {
  opacity: 0;
}

.f-stamp rect {
  fill: rgba(56, 210, 0, 0.16);
  stroke: #38D200;
  stroke-width: 2;
}

.f-stamp text {
  fill: #8dff5c;
  font: 700 13px var(--font-mono);
  letter-spacing: 0.14em;
  text-anchor: middle;
}

.f-market {
  opacity: 0.35;
}

.f-paid {
  opacity: 0;
  fill: #5dff2a;
  font: 700 14px var(--font-mono);
  text-anchor: middle;
}

.f-burst {
  opacity: 0;
}

.f-burst path {
  stroke: #f0c14b;
  stroke-width: 3;
  stroke-linecap: round;
}

.f-halo,
.f-spark {
  opacity: 0;
}

.f-spark {
  fill: #fff6d4;
}

.f-sim path {
  fill: #ffffff;
  stroke: #5cc8ff;
  stroke-width: 2.5;
}

.f-sim-chip {
  fill: url(#w3-gold);
  stroke: #c4922a;
  stroke-width: 1;
}

.f-nft {
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(240, 193, 75, 0.35)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}

.f-nft .f-ring {
  stroke: #f0c14b;
}

.f-nft-tag {
  fill: #9fb4d6;
  font: 700 9px var(--font-mono);
  letter-spacing: 0.08em;
}

.f-nft-num {
  fill: url(#w3-gold);
  font: 700 21px var(--font-mono);
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.f-nft-ok {
  fill: #64748b;
}

.f-shard {
  opacity: 0;
  fill: #1a2a48;
  stroke: #f0c14b;
  stroke-width: 1.5;
}

.f-fire {
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(255, 120, 0, 0.8));
}

.f-ember {
  opacity: 0;
  fill: #ffb020;
}

.f-confetti {
  opacity: 0;
}

/* —— shared "active actor" glow —— */
.w3-flow[data-step="1"] .f-owner .f-av-body,
.w3-flow[data-step="1"] .f-vault-body,
.w3-flow[data-step="2"] .f-owner .f-av-body,
.w3-flow[data-step="5"] .f-vault-body,
.w3-flow:is([data-step="4"], [data-step="5"]) .f-av-F3 .f-av-body {
  stroke: #5cc8ff;
  filter: drop-shadow(0 0 8px rgba(92, 200, 255, 0.65));
}

.w3-flow:not([data-step="1"]) .f-led {
  fill: #38D200;
  filter: drop-shadow(0 0 5px #38D200);
}

.w3-flow:is([data-step="3"], [data-step="4"], [data-step="5"]) .f-owner { opacity: 0.3; }
.w3-flow:is([data-step="3"], [data-step="4"], [data-step="5"]) .f-market { opacity: 1; }
/* after signing, the agreement is filed with custody (small, docked on the vault) */
.w3-flow:is([data-step="3"], [data-step="4"]) .f-agree { transform: translate(-195px, -42px) scale(0.4); }
.w3-flow:is([data-step="3"], [data-step="4"], [data-step="5"]) :is(.f-doc, .f-stamp) { opacity: 1; }
.w3-flow:is([data-step="3"], [data-step="4"], [data-step="5"]) .f-tie,
.w3-flow:is([data-step="3"], [data-step="4"]) .f-doc-label { opacity: 0; }
.w3-flow:is([data-step="3"], [data-step="4"], [data-step="5"]) .f-sign { stroke-dashoffset: 0; }
.w3-flow:is([data-step="3"], [data-step="4"]) .f-nft-ok { fill: #38D200; }
.w3-flow:is([data-step="2"], [data-step="3"], [data-step="4"]) .f-sim { opacity: 0; transform: translateX(175px); }

/* —— step 1: owner moves the SIM into custody —— */
.w3-flow[data-step="1"] .f-owner .f-ring { animation: w3-pulse 1.6s ease-out infinite; }
.w3-flow[data-step="1"] .f-arrow-1 { animation: w3-draw-on 0.7s ease 0.2s both; }
.w3-flow[data-step="1"] .f-comet-1 { animation: w3-comet 1.3s ease-in-out 0.4s 3 both; }
.w3-flow[data-step="1"] .f-sim { animation: w3-sim-in 1.6s cubic-bezier(.5, 0, .3, 1) 0.5s both; }
.w3-flow[data-step="1"] .f-dial { animation: w3-lock 0.8s ease-in-out 2.1s both; }
.w3-flow[data-step="1"] .f-led { animation: w3-led 0.3s ease 2.8s both; }
.w3-flow[data-step="1"] .f-vault .f-ring { animation: w3-pulse 1.4s ease-out 2.3s 2; }
.w3-flow[data-step="1"] .f-chip-lock { animation: w3-pop 0.5s cubic-bezier(.2, .9, .3, 1.5) 2.8s both; }

/* —— step 2: mint the NFT, owner signs —— */
.w3-flow[data-step="2"] .f-sim { animation: w3-fade-out 0.4s ease both; }
.w3-flow[data-step="2"] .f-arrow-2 { animation: w3-draw-on 0.5s ease 0.2s both; }
.w3-flow[data-step="2"] .f-comet-2 { animation: w3-comet 0.8s ease-in 0.3s both; }
.w3-flow[data-step="2"] .f-halo { animation: w3-flash 1.4s ease-out 0.9s both; }
.w3-flow[data-step="2"] .f-burst { animation: w3-burst 1s ease-out 0.95s both; }
.w3-flow[data-step="2"] .f-nft { animation: w3-mint 0.9s cubic-bezier(.2, .9, .3, 1.25) 1s both; }
.w3-flow[data-step="2"] .f-nft-shine { animation: w3-shine 1s ease-in-out 2s both; }
.w3-flow[data-step="2"] .f-nft .f-ring { animation: w3-pulse 1.8s ease-out 1.9s infinite; }
.w3-flow[data-step="2"] .f-spark { animation: w3-twinkle 1.2s ease-in-out calc(1.4s + var(--d)) 3 both; }
.w3-flow[data-step="2"] .f-doc { animation: w3-fade-in 0.5s ease 2s both; }
.w3-flow[data-step="2"] .f-sign { animation: w3-draw-on 1s ease-in-out 2.4s both; }
.w3-flow[data-step="2"] .f-stamp { animation: w3-stamp 0.45s cubic-bezier(.3, 1.6, .5, 1) 3.5s both; }
.w3-flow[data-step="2"] .f-nft-ok { animation: w3-ok 0.3s ease 3.8s both; }
.w3-flow[data-step="2"] .f-agree { animation: w3-agree-dock 0.8s ease-in-out 4.4s both; }
.w3-flow[data-step="2"] :is(.f-tie, .f-doc-label) { animation: w3-fade-out-plain 0.3s ease 4.3s both; }

/* —— step 3: free trading between wallets —— */
.w3-flow[data-step="3"] .f-nft { animation: w3-hop 5.6s ease-in-out both; }
.w3-flow[data-step="3"] .f-arrow-3 { animation: w3-draw-on 1.2s ease 0.1s both; }
.w3-flow[data-step="3"] .f-comet-3 { animation: w3-comet 1.8s linear 0.4s infinite; }
.w3-flow[data-step="3"] .f-av-A1 .f-ring { animation: w3-pulse 0.9s ease-out 1s both; }
.w3-flow[data-step="3"] .f-av-7C .f-ring { animation: w3-pulse 0.9s ease-out 2.8s both; }
.w3-flow[data-step="3"] .f-av-F3 .f-ring { animation: w3-pulse 0.9s ease-out 4.4s both; }
.w3-flow[data-step="3"] .f-paid-1 { animation: w3-paid 5.6s ease-out both; }
.w3-flow[data-step="3"] .f-paid-2 { animation: w3-paid-2 5.6s ease-out both; }

/* —— step 4: holder walks the NFT to custody and burns it there —— */
.w3-flow[data-step="4"] .f-av-F3 { animation: w3-walk-in 2.2s linear 0.3s both; }
.w3-flow[data-step="4"] .f-arrow-4 { animation: w3-draw-on 0.8s ease 0.2s both; }
.w3-flow[data-step="4"] .f-comet-4 { animation: w3-comet 1.1s ease-in-out 0.4s 2 both; }
.w3-flow[data-step="4"] .f-vault .f-ring { animation: w3-pulse 1s ease-out 2.4s both; }
.w3-flow[data-step="4"] .f-nft { animation: w3-carry-burn 4.8s linear both; }
.w3-flow[data-step="4"] .f-fire { animation: w3-fire 2.2s ease-in-out 2.4s both; }
.w3-flow[data-step="4"] .f-shard { animation: w3-shard 2.4s cubic-bezier(.2, .7, .4, 1) 2.4s both; }
.w3-flow[data-step="4"] .f-ember { animation: w3-ember 1.3s ease-out calc(2.9s + var(--d)) 2 both; }
.w3-flow[data-step="4"] .f-chip-burn { animation: w3-pop 0.5s cubic-bezier(.2, .9, .3, 1.5) 3.9s both; }

/* —— step 5: the agreement comes back out; under it, custody hands the SIM over —— */
.w3-flow[data-step="5"] .f-agree { animation: w3-agree-up 0.8s cubic-bezier(.3, 1.3, .5, 1) 0.1s both; }
.w3-flow[data-step="5"] .f-doc .f-ring { animation: w3-pulse 1s ease-out 0.9s both; }
.w3-flow[data-step="5"] .f-av-F3 { animation: w3-walk-back 2s linear 2.8s both; }
.w3-flow[data-step="5"] .f-dial { animation: w3-unlock 0.6s ease-in-out 0.8s both; }
.w3-flow[data-step="5"] .f-vault-door { animation: w3-door 2.2s ease-in-out 0.9s both; }
.w3-flow[data-step="5"] .f-vault .f-ring { animation: w3-pulse 1s ease-out 0.9s both; }
.w3-flow[data-step="5"] .f-arrow-5 { animation: w3-draw-on 0.5s ease 1.1s both; }
.w3-flow[data-step="5"] .f-comet-5 { animation: w3-comet 0.8s ease-in-out 1.2s both; }
.w3-flow[data-step="5"] .f-sim { animation: w3-handover 4.6s linear 0.3s both; }
.w3-flow[data-step="5"] .f-confetti { animation: w3-confetti 1.3s cubic-bezier(.1, .7, .3, 1) 2.2s both; }
.w3-flow[data-step="5"] .f-av-F3 .f-ring { animation: w3-pulse 1.4s ease-out 4.9s infinite; }
.w3-flow[data-step="5"] .f-chip-done { animation: w3-pop 0.5s cubic-bezier(.2, .9, .3, 1.5) 4.9s both; }

@keyframes w3-pulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes w3-draw-on {
  from { stroke-dashoffset: 100; opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes w3-comet {
  0% { stroke-dashoffset: 10; opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 1; }
}

@keyframes w3-sim-in {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(88px, -56px) rotate(-14deg) scale(1.15); }
  100% { transform: translate(175px, 0) rotate(0); }
}

/* holder walks an arc from wallet 0xF3 (x 850) to the custody counter (x 370), with a small step bob */
@keyframes w3-walk-in {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(-60px, -31px); }
  25% { transform: translate(-120px, -46px); }
  37.5% { transform: translate(-180px, -66px); }
  50% { transform: translate(-240px, -65px); }
  62.5% { transform: translate(-300px, -66px); }
  75% { transform: translate(-360px, -46px); }
  87.5% { transform: translate(-420px, -31px); }
  100% { transform: translate(-480px, 0); }
}

@keyframes w3-walk-back {
  0% { transform: translate(-480px, 0); }
  12.5% { transform: translate(-420px, -31px); }
  25% { transform: translate(-360px, -46px); }
  37.5% { transform: translate(-300px, -66px); }
  50% { transform: translate(-240px, -65px); }
  62.5% { transform: translate(-180px, -66px); }
  75% { transform: translate(-120px, -46px); }
  87.5% { transform: translate(-60px, -31px); }
  100% { transform: translate(0, 0); }
}

/* the card rides above the holder (walk = 6.25%–52.1%), then burns at the counter */
@keyframes w3-carry-burn {
  0%, 6.25% { transform: translate(400px, -50px) scale(0.6); opacity: 1; filter: none; }
  12% { transform: translate(340px, -81px) scale(0.6); }
  17.7% { transform: translate(280px, -96px) scale(0.6); }
  23.4% { transform: translate(220px, -116px) scale(0.6); }
  29.2% { transform: translate(160px, -115px) scale(0.6); }
  34.9% { transform: translate(100px, -116px) scale(0.6); }
  40.6% { transform: translate(40px, -96px) scale(0.6); }
  46.4% { transform: translate(-20px, -81px) scale(0.6); }
  52.1% { transform: translate(-80px, -50px) scale(0.6); filter: none; }
  57% { transform: translate(-84px, -50px) scale(0.6) rotate(-3deg); }
  62% { transform: translate(-76px, -50px) scale(0.6) rotate(3deg); filter: sepia(1) saturate(5) hue-rotate(-25deg) brightness(1.2); }
  67% { transform: translate(-83px, -50px) scale(0.6) rotate(-2deg); }
  72% { transform: translate(-77px, -50px) scale(0.62) rotate(2deg); filter: sepia(1) saturate(6) hue-rotate(-30deg) brightness(1.6); opacity: 1; }
  77%, 100% { transform: translate(-80px, -50px) scale(0.75); opacity: 0; filter: brightness(3); }
}

/* SIM leaves the vault under the agreement, lands at the holder's hand, then rides home with them */
@keyframes w3-handover {
  0%, 19.6% { transform: translate(175px, 0); opacity: 0; }
  24% { transform: translate(200px, -25px) scale(1.2); opacity: 1; }
  32% { transform: translate(255px, -40px) scale(1.15) rotate(-8deg); }
  41.3%, 54.3% { transform: translate(315px, 13px); opacity: 1; }
  59.7% { transform: translate(375px, -18px); }
  65.2% { transform: translate(435px, -33px); }
  70.6% { transform: translate(495px, -53px); }
  76.1% { transform: translate(555px, -52px); }
  81.5% { transform: translate(615px, -53px); }
  87% { transform: translate(675px, -33px); }
  92.4% { transform: translate(735px, -18px); }
  97.8%, 100% { transform: translate(795px, 13px); opacity: 1; }
}

@keyframes w3-agree-dock {
  from { transform: none; }
  to { transform: translate(-195px, -42px) scale(0.4); }
}

@keyframes w3-agree-up {
  from { transform: translate(-195px, -42px) scale(0.4); }
  to { transform: translate(-180px, -195px) scale(1); }
}

@keyframes w3-fade-out-plain {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes w3-door {
  0% { transform: scaleX(1); }
  25%, 75% { transform: scaleX(0.12); }
  100% { transform: scaleX(1); }
}

@keyframes w3-lock {
  from { transform: rotate(0deg); }
  to { transform: rotate(270deg); }
}

@keyframes w3-unlock {
  from { transform: rotate(270deg); }
  to { transform: rotate(0deg); }
}

@keyframes w3-led {
  from { fill: #334766; }
  to { fill: #38D200; }
}

@keyframes w3-pop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes w3-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes w3-fade-out {
  from { opacity: 1; transform: translateX(175px); }
  to { opacity: 0; transform: translateX(175px); }
}

@keyframes w3-flash {
  0% { transform: scale(0.2); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

@keyframes w3-burst {
  0% { transform: scale(0.4) rotate(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.5) rotate(20deg); opacity: 0; }
}

@keyframes w3-mint {
  0% { transform: scale(0.05, 0.7); opacity: 0; }
  60% { transform: scale(1.12, 1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes w3-shine {
  from { transform: translateX(0) skewX(-20deg); }
  to { transform: translateX(260px) skewX(-20deg); }
}

@keyframes w3-twinkle {
  0%, 100% { transform: scale(0.2); opacity: 0; }
  50% { transform: scale(1.3) rotate(45deg); opacity: 1; }
}

@keyframes w3-stamp {
  0% { transform: scale(2.4) rotate(-14deg); opacity: 0; }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}

@keyframes w3-ok {
  from { fill: #64748b; }
  to { fill: #38D200; }
}

@keyframes w3-hop {
  0%, 8% { transform: translate(0, 0) scale(1); opacity: 1; }
  13% { transform: translate(90px, -95px) scale(0.75); }
  18%, 40% { transform: translate(180px, -50px) scale(0.6); opacity: 1; }
  45% { transform: translate(235px, -95px) scale(0.6); }
  50%, 68% { transform: translate(290px, -50px) scale(0.6); opacity: 1; }
  73% { transform: translate(345px, -95px) scale(0.6); }
  78%, 100% { transform: translate(400px, -50px) scale(0.6); opacity: 1; }
}

@keyframes w3-paid {
  0%, 42% { transform: translateY(0); opacity: 0; }
  47% { opacity: 1; }
  62% { transform: translateY(-22px); opacity: 1; }
  70%, 100% { transform: translateY(-30px); opacity: 0; }
}

@keyframes w3-paid-2 {
  0%, 70% { transform: translateY(0); opacity: 0; }
  75% { opacity: 1; }
  90% { transform: translateY(-22px); opacity: 1; }
  98%, 100% { transform: translateY(-30px); opacity: 0; }
}

@keyframes w3-fire {
  0%, 18% { transform: scale(0.2); opacity: 0; }
  35% { transform: scale(1.15); opacity: 1; }
  45% { transform: scale(0.95) rotate(-5deg); }
  55% { transform: scale(1.1) rotate(4deg); }
  65% { transform: scale(0.95) rotate(-3deg); opacity: 1; }
  85%, 100% { transform: scale(0.4); opacity: 0; }
}

@keyframes w3-shard {
  0%, 46% { transform: translate(0, 0) rotate(0); opacity: 0; }
  50% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

@keyframes w3-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), -70px) scale(0.3); opacity: 0; }
}

@keyframes w3-confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

/* —— step list —— */
.w3-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w3-step-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem 0.8rem 0.9rem;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--btn-radius-lg);
  background: var(--bg-tint);
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.w3-step-btn:hover {
  border-color: var(--glass-border-hover);
}

.w3-step-btn.is-active {
  border-color: var(--sc-blue);
  background: #ffffff;
  box-shadow: 0 6px 18px -10px rgba(4, 89, 191, 0.45);
}

.w3-step-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.w3-step-top b {
  color: var(--text-primary);
  font: 700 0.95rem var(--font-display);
  line-height: 1.25;
}

.w3-step-top .w3-icon {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
}

.w3-step-btn.is-active .w3-step-top .w3-icon {
  stroke: var(--sc-blue);
}

.w3-step-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  font: 700 0.75rem var(--font-mono);
}

.w3-step-btn.is-active .w3-step-num {
  background: var(--sc-blue);
  border-color: var(--sc-blue);
  color: #ffffff;
}

/* the caption in the stage shows the sentence; keep it here for screen readers */
.w3-step-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.w3-step-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--sc-blue);
  transform: scaleX(0);
  transform-origin: left;
}

.w3-step-btn.is-active .w3-step-bar {
  animation: w3-bar 6.5s linear both;
}

.w3-flow.is-paused .w3-step-bar,
.w3-flow.is-offscreen .w3-step-bar {
  animation-play-state: paused;
}

@keyframes w3-bar {
  to { transform: scaleX(1); }
}

/* ============================================================
   Properties, fit and notes
   ============================================================ */

.w3-props {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w3-props li {
  padding: 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-tint);
}

.w3-props .w3-icon {
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-bottom: 0.65rem;
  border-radius: 10px;
  background: var(--sc-blue-50);
}

.w3-props p,
.w3-fit p {
  font-size: 0.9rem;
}

.w3-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.w3-fit article {
  display: flex;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-tint);
}

.w3-fit .w3-icon {
  margin-top: 2px;
}

/* amber callout — "not open yet" */
.web3-note {
  background: var(--amber-50);
  border-left: 3px solid #f59e0b;
}

.web3-note h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.1rem;
}

.web3-note h2 .w3-icon {
  stroke: var(--amber-ink);
}

.w3-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0 0 0 1.1rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  /* show each step's end state; the progress bar keeps its timing for manual play */
  .w3-scene *,
  .w3-cap > * {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 860px) {
  .w3-props {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 800px) {
  .w3-fit,
  .w3-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .web3-hero,
  .web3-block {
    padding: 1.15rem 1rem;
  }
}

@media (max-width: 520px) {
  .w3-props {
    grid-template-columns: minmax(0, 1fr);
  }

  /* five compact tabs: number + icon; the stage caption carries the title */
  .w3-steps {
    gap: 0.35rem;
  }

  .w3-step-btn {
    align-items: center;
    padding: 0.55rem 0.2rem 0.65rem;
  }

  .w3-step-top {
    flex-direction: column;
    gap: 0.3rem;
  }

  .w3-step-top b {
    font-size: 0.7rem;
    text-align: center;
  }

  .w3-step-top .w3-icon {
    display: none;
  }

  .w3-stage {
    padding: 1rem 0.9rem 0.2rem;
  }

  .w3-cap {
    min-height: 8.6rem;
  }

  .w3-flow-head {
    flex-direction: column;
    gap: 0.6rem;
  }
}