/* Scroll story: five composited cards, four vector links, no particle renderer. */
body.experience[data-page="home"] #hero.scroll-story {
  --story-inset: 104px;
  width: 100%; max-width: none; padding: 0; margin: 0;
  height: auto; border: 0; overflow: visible; scroll-margin-top: 0;
}
body.experience[data-page="home"] #hero.story-ready { height: 330svh; }
#hero .story-stage { position: relative; height: calc(100svh - 104px); min-height: 660px; overflow: clip; isolation: isolate; background: var(--exp-bg); }
#hero.story-ready .story-stage { position: sticky; top: 104px; }
#hero .story-ambient { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 65%, #7f49ff20, transparent 60%); }
#hero .story-ambient::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#a486d526 .7px, transparent .7px); background-size: 32px 32px; mask-image: linear-gradient(transparent 20%, #000 70%); }
#hero .story-topline { position: absolute; inset: 32px 5% auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 4; font: 9px "Space Mono", monospace; letter-spacing: .12em; color: var(--exp-muted); }
#hero .story-topline > span { display: flex; align-items: center; gap: 10px; }
#hero .story-topline i { width: 5px; height: 5px; border-radius: 50%; background: var(--exp-accent); }
#hero .story-topline a { font: 11px "Manrope", sans-serif; color: var(--exp-text); letter-spacing: 0; border-bottom: 1px solid var(--exp-line); padding: 8px 0; }
#hero .story-topline a span { margin-left: 10px; }
#hero .story-copy { position: absolute; top: 11%; left: 5%; right: 5%; height: 38%; text-align: center; z-index: 3; pointer-events: none; }
#hero .story-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; }
#hero .story-panel:first-child { opacity: 1; visibility: visible; }
#hero .story-panel[hidden] { display: none; }
#hero .story-kicker { margin: 0 0 16px; color: var(--exp-accent); font: 10px "Space Mono", monospace; letter-spacing: .05em; }
#hero .story-panel h1, #hero .story-panel h2 { color: var(--exp-text); font: 600 clamp(48px, 6.8vw, 104px)/1.02 "Manrope", sans-serif; letter-spacing: -.065em; text-transform: none; margin: 0; max-width: none; }
#hero .story-panel em { font-style: normal; color: var(--exp-accent); background: linear-gradient(110deg, #cfb7ff, #8952ff 80%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hero .story-lead { margin: 22px 0 0; font-size: clamp(12px, 1.05vw, 15px); color: var(--exp-muted); line-height: 1.75; }
#hero .story-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; pointer-events: auto; }
#hero .story-world { position: absolute; width: min(1150px, 94%); height: 38%; left: 50%; top: 52%; transform: translateX(-50%); perspective: 1000px; pointer-events: none; }
#hero .story-board { position: absolute; inset: 0; transform-style: preserve-3d; }
#hero .story-orbit { position: absolute; width: 80%; height: 110%; top: -5%; left: 10%; border: 1px solid var(--exp-line); border-radius: 50%; transform: rotateX(66deg) rotateZ(-12deg); }
#hero .story-wave { position: absolute; width: 44%; aspect-ratio: 1; border: 1px solid #ac83ff; border-radius: 50%; left: 28%; top: 50%; opacity: 0; transform: translateY(-50%) scale(.1); }
#hero .story-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#hero .story-wires path { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
#hero .story-wire-bases { stroke: var(--exp-line); stroke-width: 1; }
#hero .story-wire-fills { stroke: #a377ff; stroke-width: 2; }
#hero .story-wire-fills path { stroke-dasharray: 1; stroke-dashoffset: 1; }
#hero .story-pulses { fill: #eee4ff; stroke: #8650ff; stroke-width: 4; }
#hero .story-pulses circle { opacity: 0; }
#hero .story-card { position: absolute; width: 16%; height: 142px; top: 50%; left: 10%; margin: -71px 0 0 -8%; border: 1px solid #9f78ef55; border-radius: 15px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--exp-text); background: linear-gradient(155deg, #252035, #101018 80%); box-shadow: 0 16px 24px #00000028, inset 0 1px #ffffff0d; }
#hero .story-card:nth-of-type(2) { left: 30%; }
#hero .story-card:nth-of-type(3) { left: 50%; }
#hero .story-card:nth-of-type(4) { left: 70%; }
#hero .story-card:nth-of-type(5) { left: 90%; }
#hero .story-card-index { position: absolute; inset: 10px 11px auto; display: flex; justify-content: space-between; color: #ae98d1; font: 8px "Space Mono", monospace; }
#hero .story-card-index b { font-weight: 400; font-size: 6px; letter-spacing: .05em; }
#hero .story-icon { color: #c8abff; margin: 12px 0 10px; width: 30px; height: 30px; }
#hero .story-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#hero .story-card strong { font-size: clamp(10px, 1vw, 13px); font-weight: 600; letter-spacing: -.025em; }
#hero .story-card small { margin-top: 5px; font-size: 8px; color: #afa4c2; }
#hero .story-card-end { border-color: #ab85ff; background: linear-gradient(135deg, #7140cf, #3b2073); }
#hero .story-card-end strong { color: #fff; }
#hero .story-check { position: absolute; top: -9px; right: -8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #be9aff; color: #201331; font-size: 11px; opacity: 0; transform: scale(.5); }
#hero .story-card.is-done .story-check { opacity: 1; transform: scale(1); }
#hero .story-card.is-done { border-color: #bd97ff; }
#hero .story-receipt { position: absolute; bottom: -2px; width: 100%; text-align: center; color: var(--exp-muted); font: 10px "Space Mono", monospace; opacity: 0; }
#hero .story-receipt span { color: var(--exp-accent); margin-right: 8px; }
#hero .story-footer { position: absolute; bottom: 24px; left: max(130px, 9%); right: max(160px, 9%); display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--exp-muted); }
#hero .story-scroll-hint { position: absolute; left: 0; font-size: 10px; }
#hero .story-scroll-hint > span { color: var(--exp-accent); font-size: 19px; margin-right: 7px; }
#hero .story-chapters { display: flex; gap: 7px; }
#hero .story-chapters button { display: flex; align-items: center; gap: 7px; background: transparent; border: 0; border-top: 1px solid var(--exp-line); padding: 14px 8px 6px; min-height: 44px; cursor: pointer; color: var(--exp-muted); }
#hero .story-chapters button span { font: 9px "Space Mono", monospace; }
#hero .story-chapters button b { font-size: 9px; font-weight: 400; }
#hero .story-chapters button[aria-current] { color: var(--exp-accent); border-top-color: var(--exp-accent); }
#hero .story-signature { display: none; }
#hero .story-progress { position: absolute; inset: auto 0 0; height: 1px; background: var(--exp-line); }
#hero .story-progress span { display: block; height: 100%; background: var(--exp-accent); transform: scaleX(0); transform-origin: left; }
#hero:not(.story-ready) .story-chapters { display: none; }
:root[data-theme="light"] #hero .story-panel em { background-image: linear-gradient(110deg, #7542ce, #5922ba); }
:root[data-theme="light"] #hero .story-card { background: linear-gradient(155deg, #fff, #ede7fa); box-shadow: 0 16px 24px #3b1e7010; }
:root[data-theme="light"] #hero .story-card-end { background: linear-gradient(135deg, #7140cf, #3b2073); }
:root[data-theme="light"] #hero .story-icon { color: #7042c7; }
:root[data-theme="light"] #hero .story-card small, :root[data-theme="light"] #hero .story-card-index { color: #6a587f; }
:root[data-theme="light"] #hero .story-card-end .story-icon, :root[data-theme="light"] #hero .story-card-end small, :root[data-theme="light"] #hero .story-card-end .story-card-index { color: #dfceff; }
@media (max-width: 900px) {
  body.experience[data-page="home"] #hero.scroll-story { --story-inset: 0px; }
  #hero .story-stage { height: 100svh; }
  #hero.story-ready .story-stage { top: 0; }
  #hero .story-world { top: 50%; height: 30%; }
  #hero .story-receipt { display: none; }
  #hero .story-footer { bottom: 76px; left: 20px; right: 20px; flex-direction: column; gap: 7px; }
  #hero .story-scroll-hint { position: static; }
  #hero .story-signature { display: none; }
  #hero .story-topline { top: 22px; }
  #hero .story-copy { top: 12%; }
  #hero .story-panel h1, #hero .story-panel h2 { font-size: clamp(40px, 7.3vw, 66px); }
  #hero .story-card { height: 118px; margin-top: -59px; padding: 10px 4px; }
  #hero .story-card-index b { display: none; }
}
@media (max-width: 600px) {
  body.experience[data-page="home"] #hero.story-ready { height: 310svh; }
  #hero .story-stage { min-height: 640px; }
  #hero .story-topline { inset: 15px 20px auto; font-size: 6px; letter-spacing: .04em; gap: 6px; }
  #hero .story-topline > span { gap: 6px; }
  #hero .story-topline a { font-size: 10px; white-space: nowrap; }
  #hero .story-topline a span { margin-left: 4px; }
  #hero .story-copy { top: 10%; left: 16px; right: 16px; height: 35%; }
  #hero .story-kicker { font-size: 8px; margin-bottom: 16px; }
  #hero .story-panel h1, #hero .story-panel h2 { font-size: clamp(30px, 8.7vw, 50px); line-height: 1.07; }
  #hero .story-lead { font-size: 11px; margin-top: 16px; }
  #hero .story-world { top: 42%; height: 35%; width: calc(100% - 32px); }
  #hero .story-card { width: 36%; margin-left: -18%; height: 84px; margin-top: -42px; border-radius: 11px; }
  #hero .story-card-index { inset: 6px 7px auto; font-size: 6px; }
  #hero .story-card-index b { display: block; font-size: 5px; }
  #hero .story-icon { width: 21px; height: 21px; margin: 7px 0 5px; }
  #hero .story-card strong { font-size: 9px; }
  #hero .story-card small { font-size: 6px; margin-top: 3px; }
  #hero .story-check { width: 17px; height: 17px; right: -5px; top: -6px; font-size: 9px; }
  #hero .story-receipt { display: none; }
  #hero .story-actions { gap: 8px; margin-top: 16px; width: 100%; }
  body.experience #hero .story-actions .btn { min-height: 42px; padding: 10px 12px; font-size: 10px; }
  body.experience #hero .story-actions .btn-primary::after { display: none; }
  #hero .story-footer { bottom: 76px; left: 16px; right: 16px; flex-direction: column; gap: 7px; }
  #hero .story-scroll-hint { position: static; font-size: 8px; }
  #hero .story-chapters { gap: 4px; width: 100%; justify-content: center; }
  #hero .story-chapters button { padding: 10px 7px 0; gap: 5px; }
  #hero .story-chapters button b, #hero .story-chapters button span { font-size: 8px; }
}
@media (max-height: 700px) and (min-width: 601px) {
  #hero .story-stage { min-height: 560px; }
  #hero .story-copy { top: 12%; }
  #hero .story-panel h1, #hero .story-panel h2 { font-size: 56px; }
  #hero .story-lead { margin-top: 12px; }
  #hero .story-world { top: 54%; height: 31%; }
  #hero .story-card { height: 108px; margin-top: -54px; }
  #hero .story-actions { margin-top: 12px; }
}
/* Static mode keeps the useful result and removes the long pinned sequence. */
body.experience[data-page="home"] #hero.story-static { height: auto; }
#hero.story-static .story-stage { position: relative; top: 0; }
#hero.story-static .story-chapters, #hero.story-static .story-scroll-hint { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-height: 650px) {
  #hero .story-stage { min-height: 680px; }
}
@media (max-width: 600px) {
  #hero:not(.story-ready) .story-card:nth-of-type(1) { left: 24%; top: 15%; }
  #hero:not(.story-ready) .story-card:nth-of-type(2) { left: 76%; top: 15%; }
  #hero:not(.story-ready) .story-card:nth-of-type(3) { left: 76%; top: 50%; }
  #hero:not(.story-ready) .story-card:nth-of-type(4) { left: 24%; top: 50%; }
  #hero:not(.story-ready) .story-card:nth-of-type(5) { left: 50%; top: 86%; }
}

/* The disorder has recognizable causes, then disappears as the tools connect. */
#hero .story-chaos { position: absolute; inset: 0; pointer-events: none; }
#hero .chaos-tangle { width: 100%; height: 100%; overflow: visible; opacity: .6; }
#hero .chaos-tangle path { stroke: var(--exp-accent); stroke-width: 1; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }
#hero .chaos-note { position: absolute; z-index: 2; padding: 9px 12px; border: 1px dashed #a780f088; background: var(--exp-surface); color: var(--exp-accent); font: 10px "Space Mono", monospace; box-shadow: 0 5px 15px #00000018; white-space: nowrap; }
#hero .chaos-note b { margin-right: 8px; font-size: 13px; }
#hero .chaos-note-1 { left: 0; top: 0; transform: rotate(-8deg); }
#hero .chaos-note-2 { left: 52%; top: -4%; transform: rotate(8deg); }
#hero .chaos-note-3 { right: 0; bottom: 4%; transform: rotate(-11deg); }
#hero .chaos-note-4 { left: 1%; bottom: 0; transform: rotate(5deg); font-size: 8px; }
#hero .chaos-paper { position: absolute; width: 12%; height: 100px; border: 1px solid var(--exp-line); border-radius: 5px; background: repeating-linear-gradient(transparent 0 15px, #ac88eb22 15px 16px), var(--exp-surface); opacity: .5; }
#hero .chaos-paper-1 { top: 20%; left: 26%; transform: rotate(35deg); }
#hero .chaos-paper-2 { bottom: 0; right: 13%; transform: rotate(-28deg); }
#hero.is-chaotic .story-card-index { visibility: hidden; }
#hero.is-chaotic .story-card-end { background: var(--exp-surface); border-style: dashed; }
#hero.is-chaotic .story-card-end strong { color: var(--exp-text); }
#hero.is-chaotic .story-card::after { content: '?'; position: absolute; top: -8px; right: -6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; background: #ad80f1; color: #1e102f; font: 700 13px "Space Mono", monospace; }
#hero.story-static .story-chaos { display: none; }
/* Training is a distinct offer, with room for the approach and practical aims. */
.experience .training-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7%; padding: clamp(28px, 4vw, 62px); border: 1px solid #9d76de44; border-radius: 22px; background: radial-gradient(ellipse at 0 0, #7f49ff1c, transparent 65%), var(--exp-surface); }
.experience .training-heading .section-kicker { font-size: 9px; line-height: 1.8; }
.experience .training-heading h2 { margin: 0; color: var(--exp-text); font: 600 clamp(36px, 4.3vw, 60px)/1.08 "Manrope", sans-serif; letter-spacing: -.055em; }
.experience .training-heading h2 em { font-style: normal; color: var(--exp-accent); }
.experience .training-intro { margin: 28px 0; color: var(--exp-muted); font-size: 18px; line-height: 1.65; }
.experience .training-copy > p { margin: 0 0 22px; color: var(--exp-muted); font-size: 14px; line-height: 1.85; }
.experience .training-copy .training-lead { color: var(--exp-text); font-size: 19px; line-height: 1.65; }
.experience .training-lead strong { font-weight: 600; }
.experience .training-takeaways { list-style: none; padding: 0; margin: 26px 0; border-top: 1px solid var(--exp-line); }
.experience .training-takeaways li { padding: 15px 0; display: flex; gap: 18px; border-bottom: 1px solid var(--exp-line); font-size: 13px; color: var(--exp-text); }
.experience .training-takeaways span { color: var(--exp-accent); font: 10px "Space Mono", monospace; padding-top: 3px; }
.experience .training-copy .training-signoff { color: var(--exp-accent); margin-bottom: 0; font-size: 13px; }
@media (max-width: 900px) {
  .experience .training-shell { grid-template-columns: 1fr; gap: 36px; }
  #hero .chaos-note { font-size: 8px; padding: 7px 9px; }
  #hero .chaos-note-4 { font-size: 7px; }
}
@media (max-width: 600px) {
  #hero .chaos-note { font-size: 7px; padding: 7px; }
  #hero .chaos-note b { font-size: 9px; margin-right: 4px; }
  #hero .chaos-note-1 { left: 0; top: -8%; }
  #hero .chaos-note-2 { left: auto; right: 0; top: 40%; }
  #hero .chaos-note-3 { bottom: -3%; right: 8%; }
  #hero .chaos-note-4 { display: none; }
  #hero .chaos-paper { width: 25%; height: 70px; }
  #hero.is-chaotic .story-card::after { width: 18px; height: 18px; font-size: 10px; }
  .experience .training-shell { padding: 26px 20px; border-radius: 16px; }
  .experience .training-heading h2 { font-size: 36px; }
  .experience .training-heading .section-kicker { font-size: 8px; letter-spacing: .08em; }
  .experience .training-intro { font-size: 16px; margin: 22px 0; }
  .experience .training-copy .training-lead { font-size: 17px; }
  .experience .training-copy > p { font-size: 13px; }
  .experience .training-takeaways li { font-size: 12px; }
}
:root[data-theme="light"] #hero.is-chaotic .story-card-end { background: linear-gradient(155deg, #fff, #ede7fa); }
:root[data-theme="light"] #hero.is-chaotic .story-card-end .story-icon { color: #7042c7; }
:root[data-theme="light"] #hero.is-chaotic .story-card-end small { color: #6a587f; }