/* Three scenes, one continuous story. UI examples are illustrative. */
.hero-carousel{display:block;min-height:560px;height:560px;overflow:visible;isolation:isolate}
.hero-carousel .hero-label{top:19px;right:10px;letter-spacing:.16em}
.hero-scenes{position:absolute;inset:40px 0 60px;isolation:isolate}
.hero-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);filter:blur(6px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .8s var(--ease),visibility .7s;pointer-events:none}
.hero-scene.is-active{opacity:1;visibility:visible;transform:none;filter:none;pointer-events:auto}
.scene-kicker{position:absolute;top:18px;left:24px;z-index:2;display:flex;align-items:center;gap:10px;font-size:12px;padding:12px 16px;background:#ffffff70;border:1px solid white;border-radius:10px;backdrop-filter:blur(18px);box-shadow:inset 0 1px 1px white,0 8px 35px #455f7a07}
.scene-spark{width:15px;height:15px;border-radius:5px;background:var(--brand-gradient);box-shadow:inset 0 0 0 1px #fff6}
.scene-glass{position:absolute;width:116%;max-width:none;left:-8%;top:55px;height:auto;pointer-events:none}
.context-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:25px;background:#ffffff75;border:1px solid white;border-radius:8px;padding:10px 14px;font-size:12px;backdrop-filter:blur(16px);box-shadow:0 8px 28px #46586a09}
.context-chip span{color:#81949e}.chip-client{top:135px;left:18px}.chip-policy{top:204px;right:4px}.chip-commission{bottom:111px;left:48px}
.scene-caption{position:absolute;bottom:5px;left:24px;right:12px;display:flex;align-items:center;gap:14px;background:#ffffff70;backdrop-filter:blur(22px);border:1px solid white;padding:15px 17px;border-radius:12px;box-shadow:0 10px 30px #61708008}
.scene-step{font-size:13px;color:#68777f;background:var(--brand-gradient);height:34px;width:34px;display:grid;place-items:center;border-radius:8px;flex-shrink:0}
.scene-caption strong{font-size:13px;font-weight:500}.scene-caption small{display:block;color:#777;font-size:11px;margin-top:3px}
.agent-simulation,.approval-simulation{position:absolute;top:80px;left:24px;right:12px;background:linear-gradient(135deg,#ffffffb0,#ffffff48);border:1px solid #fff;border-radius:17px;padding:22px;backdrop-filter:blur(24px);box-shadow:inset 0 1px 1px #fff,0 20px 60px #4965810a}
.agent-simulation:before,.approval-simulation:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 5% 0%,#acceea3b,transparent 65%),radial-gradient(ellipse at 100% 100%,#ffe9892c,transparent 60%);z-index:-1;pointer-events:none}
.simulation-heading{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}.simulation-heading>div>span{font-size:9px;letter-spacing:.12em;color:#797f85}.simulation-heading h3{font-size:25px;line-height:1.15;margin:7px 0 0;font-weight:400}.simulation-symbol{width:34px;height:34px;border:1px solid white;background:var(--brand-gradient);display:grid;place-items:center;border-radius:9px;font-size:23px}
.simulation-task{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #e2e7ea}.task-icon{width:31px;height:31px;border-radius:8px;background:#e6f0f7;display:grid;place-items:center;font-size:19px;flex-shrink:0}.task-two .task-icon{background:#ffebe3}.task-three .task-icon{background:#fff5d0}.simulation-task strong{font-size:12px;font-weight:500}.simulation-task small{font-size:10px;color:#777;display:block;margin-top:2px}.task-ready{font-size:10px;margin-left:auto;color:#577465;white-space:nowrap}.task-ready>span{margin-left:5px}.simulation-footnote{font-size:9px;color:#83878b;margin-top:9px}
.approval-simulation{padding:23px 27px;top:77px}.approval-top{display:flex;align-items:center;gap:11px;font-size:9px;letter-spacing:.1em;color:#6e7478;margin-bottom:16px}.approval-symbol{width:30px;height:30px;border-radius:50%;border:1px solid #fff;background:var(--brand-gradient);display:grid;place-items:center;font-size:16px;color:#333}.approval-simulation h3{font-size:34px;line-height:1.12;margin-bottom:12px}.approval-simulation p{font-size:12px;line-height:1.6;margin-bottom:13px}.approval-check{font-size:11px;display:flex;gap:9px;margin:7px 0;color:#687177}.approval-check>span{color:#526e63}.approval-state{background:#fff8;border:1px solid #fff;border-radius:8px;padding:10px 12px;font-size:11px;display:flex;align-items:center;gap:8px;margin-top:16px}.approval-pulse{width:7px;height:7px;border-radius:50%;background:#b5944e}.approval-simulation>small{font-size:9px;color:#83878b;display:block;margin-top:9px}
.hero-scene-controls{position:absolute;bottom:9px;left:24px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}.scene-selectors{display:flex;gap:6px;min-width:0}.scene-selectors button{position:relative;border:1px solid transparent;border-radius:7px;background:transparent;padding:10px 11px 12px;font-size:11px;color:#71787e;overflow:hidden;white-space:nowrap;min-height:42px}.scene-selectors button>span:first-child{font-size:9px;margin-right:5px;color:#91979c}.scene-selectors button[aria-current=true]{background:#ffffff87;border-color:white;color:#151515}.scene-progress{position:absolute;height:2px;bottom:0;left:0;width:0;background:var(--brand-gradient)}.scene-toggle{background:transparent;border:0;color:#697177;padding:10px 0 10px 8px;font-size:11px;display:flex;align-items:center;gap:6px;min-height:42px;white-space:nowrap}.scene-toggle>span:first-child{font-size:13px}.scene-toggle:hover{color:#010101}
.hero-carousel.is-running .scene-selectors button[aria-current=true] .scene-progress,.hero-carousel.is-suspended .scene-selectors button[aria-current=true] .scene-progress{animation:scene-timer 6.5s linear forwards}.hero-carousel.is-suspended .scene-progress{animation-play-state:paused!important}
.hero-carousel:not(.is-running):not(.is-suspended) .scene-progress{width:100%;opacity:.55}
.hero-carousel.is-enhanced .is-active .context-chip{animation:context-arrive .9s var(--ease) both}.hero-carousel.is-enhanced .is-active .chip-client{animation-delay:.35s}.hero-carousel.is-enhanced .is-active .chip-policy{animation-delay:.6s}.hero-carousel.is-enhanced .is-active .chip-commission{animation-delay:.9s}.hero-carousel.is-enhanced .is-active .scene-glass{animation:scene-glass-drift 6.5s ease-in-out both}.hero-carousel.is-enhanced .is-active .simulation-task{animation:context-arrive .65s var(--ease) both}.hero-carousel.is-enhanced .is-active .task-one{animation-delay:.3s}.hero-carousel.is-enhanced .is-active .task-two{animation-delay:.7s}.hero-carousel.is-enhanced .is-active .task-three{animation-delay:1.1s}.hero-carousel.is-enhanced .is-active .task-ready{animation:context-arrive .5s var(--ease) both;animation-delay:1.5s}.hero-carousel.is-enhanced .is-active .approval-check{animation:context-arrive .7s .45s var(--ease) both}.hero-carousel.is-enhanced .is-active .approval-state{animation:context-arrive .8s .8s var(--ease) both}.hero-carousel.is-suspended .scene-glass{animation-play-state:paused!important}
@keyframes scene-timer{from{width:0}to{width:100%}}@keyframes context-arrive{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}@keyframes scene-glass-drift{from{transform:translateY(5px) scale(.99)}to{transform:translateY(-5px) scale(1.035)}}
@media(max-width:1000px) and (min-width:641px){.scene-kicker{font-size:10px;left:10px;padding:11px}.scene-caption,.agent-simulation,.approval-simulation,.hero-scene-controls{left:10px;right:0}.agent-simulation,.approval-simulation{padding:18px}.task-ready{font-size:9px}.simulation-task{gap:7px}.simulation-task small{max-width:135px}.scene-selectors button{padding:10px 7px 12px;font-size:10px}.scene-selectors button>span:first-child{display:none}.hero-carousel .toggle-label{display:none}.scene-caption strong{font-size:12px}.approval-simulation h3{font-size:30px}.context-chip{font-size:11px;padding:9px;gap:14px}.chip-client{left:5px}.chip-commission{left:20px}.simulation-heading h3{font-size:23px}}
@media(max-width:640px){.hero-carousel{height:510px;min-height:510px;margin-top:18px}.hero-scenes{inset:30px 0 60px}.hero-carousel .hero-label{top:4px;right:0;font-size:8px}.scene-kicker{top:13px;left:0;font-size:11px;padding:11px 13px}.scene-glass{top:65px;left:-3%;width:108%}.chip-client{top:117px;left:3px}.chip-policy{top:185px;right:0}.chip-commission{bottom:100px;left:20px}.context-chip{font-size:11px;padding:9px 12px}.scene-caption{left:0;right:0;bottom:0;padding:13px}.scene-caption strong{font-size:12px}.scene-caption small{font-size:10px}.agent-simulation,.approval-simulation{left:0;right:0;top:70px;padding:19px}.simulation-heading h3{font-size:25px}.simulation-task{gap:9px;padding:12px 0}.simulation-task small{font-size:9px}.task-ready{font-size:9px}.approval-simulation h3{font-size:31px}.hero-scene-controls{left:0;right:0;bottom:7px;gap:5px}.scene-selectors{gap:2px}.scene-selectors button{font-size:10px;padding:10px 8px 12px}.scene-selectors button>span:first-child{font-size:8px;margin-right:3px}.scene-toggle{font-size:10px;gap:4px}.hero-bottom{margin-top:12px}.approval-simulation{padding:21px}.approval-state{margin-top:13px}}
@media(max-width:359px){.scene-toggle .toggle-label{display:none}.scene-selectors button{padding:10px 7px 12px}.task-ready{font-size:8px}.simulation-task small{max-width:135px}.simulation-heading h3{font-size:23px}.scene-caption strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-scene{transition:none;transform:none;filter:none}.hero-carousel .hero-scene *,.hero-carousel .scene-progress{animation:none!important}.hero-carousel .scene-toggle{display:none}.hero-carousel .hero-scene-controls{justify-content:center}}
.hero-carousel{height:580px;min-height:580px}@media(max-width:640px){.hero-carousel{height:550px;min-height:550px}}

/* Hero: restrained monochrome icons and step markers. */
.hero-carousel .scene-spark,
.hero-carousel .scene-step,
.hero-carousel .simulation-symbol,
.hero-carousel .approval-symbol {
  background: #010101;
  color: #fff;
  border-color: #010101;
  box-shadow: none;
}
.hero-carousel .scene-spark::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  margin: 5px;
  border-radius: 1px;
  background: #fff;
}

/* Lighter outline for the small hero context marker. */
.hero-carousel .scene-spark {
  background: transparent;
  border: 1px solid #010101;
  border-radius: 4px;
  box-shadow: none;
}
.hero-carousel .scene-spark::after {
  content: none;
}

/* Reserve real space for every scene, including translated copy and its caption. */
.hero-carousel{height:auto;min-height:580px;padding-top:40px;padding-bottom:60px}
.hero-scenes{position:relative;inset:auto;display:grid;min-height:480px}
.hero-scene{position:relative;inset:auto;grid-area:1 / 1;display:flex;flex-direction:column;min-width:0}
.hero-carousel .scene-kicker{position:relative;top:auto;left:auto;align-self:flex-start;margin:18px 12px 0 24px}
.hero-carousel .agent-simulation,.hero-carousel .approval-simulation{position:relative;top:auto;left:auto;right:auto;margin:18px 12px 18px 24px}
.hero-carousel .scene-caption{position:relative;bottom:auto;left:auto;right:auto;margin: auto 12px 5px 24px;flex-shrink:0}
.hero-carousel .scene-kicker,.hero-carousel .context-chip,.hero-carousel .scene-caption,.hero-carousel .agent-simulation,.hero-carousel .approval-simulation,.hero-carousel .approval-state,.hero-carousel .simulation-symbol,.hero-carousel .approval-symbol{border:0}
.hero-carousel .scene-kicker{box-shadow:0 8px 35px #455f7a07}
.hero-carousel .agent-simulation,.hero-carousel .approval-simulation{box-shadow:0 20px 60px #4965810a}
.hero-carousel .scene-selectors button[aria-current=true]{border-color:transparent}
@media(max-width:1000px) and (min-width:641px){.hero-carousel .scene-kicker{margin-left:10px;margin-right:0}.hero-carousel .agent-simulation,.hero-carousel .approval-simulation{margin-left:10px;margin-right:0}.hero-carousel .scene-caption{margin-left:10px;margin-right:0}}
@media(max-width:640px){.hero-carousel{height:auto;min-height:550px;padding-top:30px;padding-bottom:60px}.hero-scenes{min-height:460px}.hero-carousel .scene-kicker{margin:13px 0 0}.hero-carousel .agent-simulation,.hero-carousel .approval-simulation{margin:18px 0}.hero-carousel .scene-caption{margin: auto 0 0}}

.hero-carousel{overflow-x:clip;overflow-y:visible}