/* Desktop composition follows the 1672 × 941 reference.
   One unit scales every element together below the reference width;
   wider desktop screens keep the composition centered at its original size.
   Mobile layout is intentionally outside this build stage. */
:root { --hero-unit: min(0.0598086124402vw, 1px); }

@font-face { font-family: "IBM Plex Sans"; src: url("../assets/block-01-hero/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/block-01-hero/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/block-01-hero/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; background: #f3f4f6; color: #111; font-family: "IBM Plex Sans", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.hero {
  position: relative; isolation: isolate; width: 100%; max-width: calc(1672 * var(--hero-unit)); height: calc(941 * var(--hero-unit)); margin-inline: auto;
  background-color: #f3f4f6;
  background-image: linear-gradient(#e7e9ec99 calc(1 * var(--hero-unit)), transparent calc(1 * var(--hero-unit))), linear-gradient(90deg, #e7e9ec99 calc(1 * var(--hero-unit)), transparent calc(1 * var(--hero-unit))), radial-gradient(ellipse at 35% 43%, #ffffff70, transparent 78%);
  background-size: calc(77 * var(--hero-unit)) calc(79 * var(--hero-unit)), calc(77 * var(--hero-unit)) calc(79 * var(--hero-unit)), 100% 100%;
  background-position: 0 calc(99 * var(--hero-unit)), calc(50 * var(--hero-unit)) 0, 0 0;
}
.hero__header { position: absolute; inset: 0 0 auto; height: calc(100 * var(--hero-unit)); border-bottom: calc(1 * var(--hero-unit)) solid #e7e9ec88; }
.hero__brand { position: absolute; left: calc(79 * var(--hero-unit)); top: calc(22 * var(--hero-unit)); width: calc(310 * var(--hero-unit)); height: calc(60 * var(--hero-unit)); display: flex; align-items: center; }
.hero__brand img { display: block; width: 100%; height: auto; }
.hero__nav { position: absolute; left: calc(625 * var(--hero-unit)); top: calc(24 * var(--hero-unit)); width: calc(533 * var(--hero-unit)); height: calc(61 * var(--hero-unit)); display: flex; align-items: center; justify-content: space-between; }
.hero__nav button, .hero__nav a { text-decoration: none; border: 0; padding: 0; background: none; color: #20252c; font-size: calc(20 * var(--hero-unit)); font-weight: 600; }
.hero__button { text-decoration: none; height: calc(79 * var(--hero-unit)); border: calc(1 * var(--hero-unit)) solid transparent; border-radius: calc(7 * var(--hero-unit)); display: inline-flex; justify-content: center; align-items: center; gap: calc(16 * var(--hero-unit)); white-space: nowrap; padding: 0; font-size: calc(23 * var(--hero-unit)); line-height: calc(28 * var(--hero-unit)); font-weight: 600; opacity: 1; transition: background-color .16s ease, box-shadow .16s ease; }
.hero__button span { font-size: calc(29 * var(--hero-unit)); font-weight: 400; }
.hero__button--header { position: absolute; right: calc(74 * var(--hero-unit)); top: calc(24 * var(--hero-unit)); height: calc(61 * var(--hero-unit)); width: calc(282 * var(--hero-unit)); color: #fff; background: linear-gradient(115deg, #15181b, #1d2228); border-color: #101419; }
.hero__button--primary { width: calc(369 * var(--hero-unit)); color: #111; background: linear-gradient(110deg, #ff6608, #ff5c00); border-color: #ff731f; box-shadow: inset 0 calc(1 * var(--hero-unit)) 0 #ffffff35; }
.hero__button--secondary { width: calc(298 * var(--hero-unit)); color: #111; background: #ffffff26; border-color: #697383; box-shadow: inset 0 0 0 calc(1 * var(--hero-unit)) #ffffffb3; }
.hero__button--primary:enabled:hover { background: #e85200; }
.hero__button--secondary:enabled:hover { background: #fff; }
.hero__button--header:enabled:hover { background: #30363d; }
.hero__button:enabled, .hero__nav button:enabled { cursor: pointer; }
.hero a:focus-visible, .hero button:focus-visible { outline: calc(3 * var(--hero-unit)) solid #ff5c00; outline-offset: calc(5 * var(--hero-unit)); }
.hero__copy { position: absolute; left: calc(78 * var(--hero-unit)); top: calc(160 * var(--hero-unit)); width: calc(744 * var(--hero-unit)); z-index: 2; }
.hero__eyebrow { margin: 0; color: #505866; font-size: calc(24 * var(--hero-unit)); font-weight: 600; line-height: calc(32 * var(--hero-unit)); letter-spacing: calc(2 * var(--hero-unit)); text-transform: uppercase; }
.hero h1 { margin: calc(27 * var(--hero-unit)) 0 0; font-size: calc(80 * var(--hero-unit)); line-height: calc(80 * var(--hero-unit)); letter-spacing: calc(-2 * var(--hero-unit)); font-weight: 700; }
.hero h1 span { display: block; white-space: nowrap; }
.hero__description { margin: calc(22 * var(--hero-unit)) 0 0; color: #414b5a; font-size: calc(28 * var(--hero-unit)); line-height: calc(36 * var(--hero-unit)); letter-spacing: calc(-.25 * var(--hero-unit)); white-space: nowrap; }
.hero__actions { display: flex; gap: calc(26 * var(--hero-unit)); margin-top: calc(32 * var(--hero-unit)); }
.hero__journey { position: absolute; left: calc(814 * var(--hero-unit)); top: calc(103 * var(--hero-unit)); width: calc(800 * var(--hero-unit)); height: calc(699.776 * var(--hero-unit)); }
.hero__staircase { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(12 * var(--hero-unit)) calc(10 * var(--hero-unit)) #202c3c0d); }
.hero__steps { margin: 0; padding: 0; list-style: none; }
.hero__step { position: absolute; display: flex; align-items: center; transform: skewY(8deg); transform-origin: left top; color: #111; white-space: nowrap; }
.hero__step--01 { left: calc(44 * var(--hero-unit)); top: calc(81 * var(--hero-unit)); width: calc(197 * var(--hero-unit)); height: calc(56 * var(--hero-unit)); }
.hero__step--02 { left: calc(146 * var(--hero-unit)); top: calc(209 * var(--hero-unit)); width: calc(237 * var(--hero-unit)); height: calc(56 * var(--hero-unit)); color: #fff; }
.hero__step--03 { left: calc(265 * var(--hero-unit)); top: calc(340 * var(--hero-unit)); width: calc(263 * var(--hero-unit)); height: calc(58 * var(--hero-unit)); }
.hero__step--04 { left: calc(387 * var(--hero-unit)); top: calc(470 * var(--hero-unit)); width: calc(275 * var(--hero-unit)); height: calc(54 * var(--hero-unit)); }
.hero__step--05 { left: calc(480 * var(--hero-unit)); top: calc(578 * var(--hero-unit)); width: calc(280 * var(--hero-unit)); height: calc(53 * var(--hero-unit)); color: #fff; transform: skewY(8deg) scaleX(.9); }
.hero__number { flex: 0 0 calc(38 * var(--hero-unit)); margin-right: calc(13 * var(--hero-unit)); border-right: calc(1 * var(--hero-unit)) solid #1b263933; font-size: calc(28 * var(--hero-unit)); line-height: calc(56 * var(--hero-unit)); font-weight: 700; letter-spacing: calc(-.8 * var(--hero-unit)); }
.hero__step--02 .hero__number, .hero__step--05 .hero__number { border-color: #ffffff26; }
.hero__step h2 { margin: 0; font-size: calc(24 * var(--hero-unit)); line-height: calc(30 * var(--hero-unit)); font-weight: 700; letter-spacing: calc(-.6 * var(--hero-unit)); }
.hero__step p { margin: 0; font-size: calc(17 * var(--hero-unit)); line-height: calc(24 * var(--hero-unit)); font-weight: 400; letter-spacing: calc(-.4 * var(--hero-unit)); color: #4e5764; }
.hero__step--02 h2 { font-size: calc(21 * var(--hero-unit)); letter-spacing: calc(-.7 * var(--hero-unit)); }
.hero__step--03 h2 { font-size: calc(24 * var(--hero-unit)); }
.hero__step--03 p { color: #231a13; }
.hero__step--02 p, .hero__step--05 p { color: #d9dde2; }
.hero__step--05 h2 { font-size: calc(21 * var(--hero-unit)); line-height: calc(25 * var(--hero-unit)); letter-spacing: calc(-.7 * var(--hero-unit)); }
.hero__step--05 p { font-size: calc(16 * var(--hero-unit)); line-height: calc(21 * var(--hero-unit)); letter-spacing: calc(-.5 * var(--hero-unit)); }
.hero__step--05 .hero__number { flex-basis: calc(33 * var(--hero-unit)); margin-right: calc(11 * var(--hero-unit)); }
.hero__annotations { position: absolute; inset: 0; pointer-events: none; }
.hero__note, .hero__arrow { position: absolute; display: block; height: auto; }
.hero__note--system { left: calc(1344 * var(--hero-unit)); top: calc(126 * var(--hero-unit)); width: calc(279 * var(--hero-unit)); }
.hero__note--find { left: calc(1132 * var(--hero-unit)); top: calc(117 * var(--hero-unit)); width: calc(134 * var(--hero-unit)); }
.hero__note--trust { left: calc(1310 * var(--hero-unit)); top: calc(274 * var(--hero-unit)); width: calc(136 * var(--hero-unit)); }
.hero__note--request { left: calc(1454 * var(--hero-unit)); top: calc(396 * var(--hero-unit)); width: calc(119 * var(--hero-unit)); }
.hero__note--automation { left: calc(1538 * var(--hero-unit)); top: calc(533 * var(--hero-unit)); width: calc(123 * var(--hero-unit)); }
.hero__arrow { width: calc(53 * var(--hero-unit)); }
.hero__arrow--01 { left: calc(1126 * var(--hero-unit)); top: calc(198 * var(--hero-unit)); }
.hero__arrow--02 { left: calc(1282 * var(--hero-unit)); top: calc(332 * var(--hero-unit)); }
.hero__arrow--03 { left: calc(1432 * var(--hero-unit)); top: calc(467 * var(--hero-unit)); }
.hero__arrow--04 { left: calc(1564 * var(--hero-unit)); top: calc(609 * var(--hero-unit)); width: calc(47 * var(--hero-unit)); }
.hero__benefits { position: absolute; left: calc(78 * var(--hero-unit)); top: calc(828 * var(--hero-unit)); display: flex; list-style: none; padding: 0; margin: 0; }
.hero__benefits li { display: flex; align-items: flex-start; gap: calc(18 * var(--hero-unit)); width: calc(271 * var(--hero-unit)); height: calc(55 * var(--hero-unit)); }
.hero__benefits li + li { padding-left: calc(47 * var(--hero-unit)); border-left: calc(1 * var(--hero-unit)) solid #cbd0d8; width: calc(353 * var(--hero-unit)); gap: calc(40 * var(--hero-unit)); }
.hero__benefits li:last-child { gap: calc(35 * var(--hero-unit)); padding-left: calc(39 * var(--hero-unit)); }
.hero__benefits img { flex: 0 0 calc(40 * var(--hero-unit)); width: calc(40 * var(--hero-unit)); height: calc(40 * var(--hero-unit)); margin-top: calc(5 * var(--hero-unit)); }
.hero__benefits h2 { margin: 0 0 calc(3 * var(--hero-unit)); font-size: calc(20 * var(--hero-unit)); line-height: calc(26 * var(--hero-unit)); letter-spacing: calc(-.4 * var(--hero-unit)); font-weight: 600; color: #1b222d; }
.hero__benefits p { margin: 0; font-size: calc(17 * var(--hero-unit)); line-height: calc(21 * var(--hero-unit)); color: #596477; }
.hero__signature { position: absolute; right: calc(75 * var(--hero-unit)); top: calc(875 * var(--hero-unit)); margin: 0; color: #606b7d; font-size: calc(17 * var(--hero-unit)); line-height: calc(24 * var(--hero-unit)); letter-spacing: calc(1.5 * var(--hero-unit)); }