/* Readable at every point; animations never gate access to content. */
@keyframes section-arrive{from{opacity:.32;translate:0 32px}to{opacity:1;translate:0 0}}
@keyframes reading-progress{from{scale:0 1}to{scale:1 1}}
@keyframes hero-arrive{from{opacity:.5;translate:0 18px}to{opacity:1;translate:0 0}}
.scroll-progress{display:none;position:fixed;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--purple),var(--blue));transform-origin:left;pointer-events:none;z-index:110}
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:hero-arrive .8s ease-out both}
  .scroll-reveal{transition:opacity .6s ease,translate .6s cubic-bezier(.2,.65,.3,1)}
  .reveal-pending{opacity:.4;translate:0 24px}
  @supports(animation-timeline:view()){
    .scroll-reveal{animation:section-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    .scroll-reveal:focus-within{animation:none;opacity:1;translate:none}
    .scroll-progress{display:block;animation:reading-progress linear both;animation-timeline:scroll(root block)}
  }
}
@media(max-width:650px){@keyframes section-arrive{from{opacity:.5;translate:0 18px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){.scroll-reveal,.hero-copy{animation:none;opacity:1;translate:none}.hero-art{transform:none}.hero-art::after,.scroll-progress{display:none}}
@media print{.scroll-reveal,.hero-copy{animation:none!important;opacity:1!important;translate:none!important}.scroll-progress{display:none!important}}

/* Marketing scene: independent mascot and a quiet area for the copy. */
.hero.hero-immersive{position:relative;isolation:isolate;overflow:hidden;width:100%;margin:0;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:25px 40px;padding:64px max(40px,calc((100% - 1280px)/2)) 0;background:radial-gradient(circle at 85% 35%,rgba(113,52,250,0.12) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(104,202,214,0.14) 0%,transparent 45%),var(--paper)}
.hero-immersive .hero-copy{position:relative;z-index:2;padding:0 0 25px;max-width:650px}
.hero-immersive h1{font-size:clamp(44px,4.4vw,65px)}
.hero-immersive .hero-description,.hero-immersive .micro{color:#554967}
.hero-immersive .hero-bottom{width:100%;grid-column:1/-1;margin-top:5px;border-color:#2d1b6226;padding:23px 0}
.marketing-scene{position:relative;min-width:0;height:610px;isolation:isolate}
.scene-halo{position:absolute;inset:8% 6% 10% 6%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(113,52,250,0.2) 0%,rgba(104,202,214,0.14) 45%,transparent 70%);filter:blur(50px);pointer-events:none;z-index:1}
.scene-halo::after{content:'';position:absolute;inset:18% 10%;border-radius:50%;background:radial-gradient(circle,rgba(234,225,250,0.65) 0%,transparent 65%);filter:blur(28px)}
.scene-orbit{display:none}
.mascot-control{position:absolute;inset:10% -3% 5%;width:106%;border:0;padding:0;background:none;border-radius:50%;z-index:2;cursor:pointer;touch-action:manipulation}
.mascot-control img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(45,27,98,0.15));pointer-events:none}
.mascot-control:focus-visible{outline:3px solid var(--purple);outline-offset:4px;border-radius:24px}
.marketing-note{position:absolute;display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,0.85);border-top-color:rgba(255,255,255,0.95);border-bottom-color:rgba(45,27,98,0.08);border-radius:16px;background:rgba(255,255,255,0.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px 18px;box-shadow:0 10px 25px rgba(45,27,98,0.06),0 2px 6px rgba(45,27,98,0.03),inset 0 1px 0 rgba(255,255,255,0.9);z-index:3;pointer-events:none;color:var(--ink);transform:none;white-space:nowrap}
.card-copy{display:flex;flex-direction:column;gap:3px}
.card-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--purple);line-height:1.2}
.marketing-note strong{display:block;font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.card-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#ede4ff,#dfd2fa);color:var(--purple);font-size:18px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.8)}
.card-icon.icon-teal{background:linear-gradient(135deg,#dcf5f6,#c5edf0);color:#1c6974}
.results-stat{display:flex;align-items:center;gap:6px;background:#f4effc;padding:6px 10px;border-radius:8px;border:1px solid #e5daf7}
.stat-growth{color:var(--purple);font-size:14px;font-weight:600}
.stat-number{font-size:12px;font-weight:600;color:var(--purple);letter-spacing:-.01em}
.card-strategy,.note-strategy{left:0;top:10%;right:auto;bottom:auto}
.card-content,.note-content{right:-6px;top:22%;left:auto;bottom:auto}
.card-results,.note-results{right:2%;bottom:12%;left:auto;top:auto}
.scene-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);background:rgba(255,255,255,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 14px;border-radius:999px;border:1px solid rgba(220,215,230,0.6);white-space:nowrap;letter-spacing:.01em}
.touch-hint{display:none}
@keyframes mascot-greet{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-8deg) translateY(-15px)}65%{transform:rotate(6deg) translateY(-8px)}}
@media(prefers-reduced-motion:no-preference){.mascot-control.is-greeting img{animation:mascot-greet .85s ease-in-out}}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
 .mascot-control{transform:translate(calc(var(--layer-x,0px) * 2),calc(var(--layer-y,0px) * 2)) rotate(var(--tilt-y,0deg));transition:transform .5s cubic-bezier(.2,.65,.3,1)}
 .marketing-note{translate:calc(var(--layer-x,0px) * -.65) calc(var(--layer-y,0px) * -.65);transition:translate .65s ease-out}
}
@media(max-width:1100px){.hero.hero-immersive{padding:45px 32px 0;gap:20px}.marketing-scene{height:540px}.marketing-note{padding:11px 14px;gap:10px}.marketing-note strong{font-size:12px}.card-tag{font-size:9px}.card-icon{width:32px;height:32px;font-size:16px}.card-content,.note-content{right:0;top:24%}.card-strategy,.note-strategy{top:6%;left:0}}
@media(max-width:800px){.hero.hero-immersive{grid-template-columns:1fr;padding:40px 24px 0;gap:10px}.hero-immersive .hero-copy{max-width:620px;padding-bottom:0}.hero-immersive h1{font-size:clamp(42px,7.5vw,60px)}.marketing-scene{width:min(100%,550px);height:520px;margin:auto}.hero-immersive .hero-bottom{margin-top:20px}.card-strategy,.note-strategy{top:4%;left:4px}.card-content,.note-content{top:23%;right:4px}.card-results,.note-results{bottom:8%;right:4px}}
@media(max-width:450px){.hero.hero-immersive{padding:32px 20px 0}.hero-immersive h1{font-size:clamp(39px,10.5vw,47px)}.marketing-scene{height:420px;margin-top:14px}.marketing-note{padding:8px 11px;border-radius:12px;gap:8px}.card-tag{font-size:8px}.marketing-note strong{font-size:11px}.card-icon{width:26px;height:26px;font-size:14px;border-radius:7px}.results-stat{padding:4px 7px}.stat-number{font-size:10px}.stat-growth{font-size:11px}.card-strategy,.note-strategy{top:2%;left:0}.card-content,.note-content{top:22%;right:0}.card-results,.note-results{bottom:7%;right:0}.scene-hint{font-size:9px;padding:4px 10px;bottom:2px}.mascot-control{inset:8% -4% 4%;width:108%}}
@media(hover:none),(pointer:coarse){.mouse-hint{display:none}.touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.mascot-control,.marketing-note{translate:none;transition:none}.mascot-control{transform:none}.scene-hint{display:none}.mascot-control.is-greeting{background:#ffffff44}}