/* ==========================================================================
   Home
   ========================================================================== */
.page-home { background: var(--bg); }
.page-home main { background: linear-gradient(180deg, #f6f7ff 0%, #f7f8ff 40%, #f9f9ff 100%); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-bottom: 142px; }
.hero__bg {
  position: absolute; inset: 0 0 auto; height: 780px; background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 440px, transparent 655px);
          mask-image: linear-gradient(180deg, #000 0, #000 440px, transparent 655px);
}
.hero__stage { position: relative; max-width: 1440px; height: 627px; margin: 0 auto; }
.hero__motif { position: absolute; pointer-events: none; }
.hero__motif--d { top: 8px; left: -1px; width: 1442px; height: 621px; }
.hero__motif--t, .hero__motif--m { display: none; }
.hero__hex { transform-box: fill-box; transform-origin: center; animation: hexFloat 7s var(--ease-in-out) infinite; }
@keyframes hexFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -4px); } }
.hero__content { position: relative; max-width: 900px; margin: 0 auto; padding-top: 96px; text-align: center; }
.hero__eyebrow { font-size: 14px; }
.hero__title { margin-top: 30px; }
.hero__lead { max-width: 760px; margin: 25px auto 0; }
.hero__btns { margin-top: 35px; }

.hero__demo { position: relative; width: 1134px; max-width: calc(100% - 2 * var(--gutter)); margin: 30px auto 0; }

/* ---------- Outlook preview (designed at 2×, scaled by JS via --s) ---------- */
.olk { --s: 0.5; position: relative; width: 100%; aspect-ratio: 982 / 552; border-radius: 8px; box-shadow: 0 30px 60px -30px rgba(7, 26, 95, 0.28), 0 2px 8px rgba(7, 26, 95, 0.06); background: #fff; overflow: hidden; }
.olk__scale { position: absolute; left: 0; top: 0; width: 1964px; height: 1104px; transform: scale(var(--s)); transform-origin: 0 0; display: flex; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #242424; font-size: 15px; }
.olk__app { position: relative; width: 1228px; height: 100%; background: #faf9f8; display: flex; flex-direction: column; border-right: 1px solid #e6e6e6; }
.olk__bar { flex: none; display: flex; align-items: center; height: 46px; padding: 0 18px; background: #0f6cbd; color: #fff; gap: 18px; }
.olk__bar strong { font-size: 17px; font-weight: 600; width: 150px; }
.olk__waffle { width: 18px; height: 18px; background: radial-gradient(circle, #fff 1.6px, transparent 2px) 0 0 / 6px 6px; opacity: 0.9; }
.olk__search { display: flex; align-items: center; gap: 10px; width: 740px; height: 32px; padding: 0 14px; border-radius: 5px; background: #fff; color: #767676; font-size: 14px; }
.olk__search i { width: 12px; height: 12px; border: 2px solid #0f6cbd; border-radius: 50%; }
.olk__icons { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.olk__icons i { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; }
.olk__icons b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #c55bd2; font-size: 11px; font-weight: 700; }
.olk__tabs { flex: none; display: flex; align-items: center; gap: 22px; height: 36px; padding: 0 16px; font-size: 14px; color: #616161; }
.olk__tabs .is-on { color: #0f6cbd; font-weight: 600; box-shadow: 0 2px 0 #0f6cbd; padding-bottom: 2px; }
.olk__burger { width: 16px; height: 10px; border-top: 2px solid #616161; border-bottom: 2px solid #616161; position: relative; }
.olk__ribbon { flex: none; display: flex; align-items: center; gap: 22px; height: 40px; margin: 0 8px; padding: 0 6px; background: #fff; border-radius: 6px; font-size: 13px; color: #424242; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.olk__new { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 4px; background: #0f6cbd; color: #fff; font-size: 15px; font-weight: 600; }
.olk__new em { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.5); margin-left: 8px; }
.olk__body { flex: 1; display: flex; min-height: 0; margin-top: 8px; }
.olk__folders { width: 162px; flex: none; padding: 8px 0 0 12px; font-size: 13px; color: #242424; }
.olk__folders p { position: relative; display: flex; align-items: center; gap: 6px; height: 26px; white-space: nowrap; }
.olk__folders p.is-on::before { content: ""; position: absolute; left: -9px; top: 6px; width: 3px; height: 14px; border-radius: 2px; background: #0f6cbd; }
.olk__folders p.is-on { font-weight: 600; }
.olk__folders b { color: #0f6cbd; font-weight: 600; margin-left: auto; margin-right: 12px; }
.olk__folders i { font-style: normal; color: #8a8a8a; margin-left: auto; margin-right: 12px; }
.olk__fh { color: #616161; }
.olk__acct { margin-top: 12px; font-weight: 600; font-size: 12px; white-space: normal !important; height: auto !important; line-height: 16px; padding-right: 4px; word-break: break-all; }
.olk__list { width: 292px; flex: none; background: #fff; border-left: 1px solid #edebe9; border-right: 1px solid #edebe9; overflow: hidden; }
.olk__lh { display: flex; justify-content: space-between; align-items: center; height: 42px; padding: 0 14px; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #616161; }
.olk__lh strong { color: #242424; font-weight: 600; }
.olk__day { padding: 8px 14px 4px; font-size: 12px; color: #616161; }
.olk__mail { position: relative; display: flex; gap: 12px; height: 66px; padding: 10px 12px 0 12px; border-bottom: 1px solid #f3f2f1; transition: background-color 0.35s; }
.olk__mail > div { flex: 1; min-width: 0; }
.olk__mail p { display: flex; justify-content: space-between; font-size: 13px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olk__mail time { font-size: 11px; color: #8a8a8a; }
.olk__mail i { display: block; height: 7px; margin-top: 9px; width: 70%; border-radius: 4px; background: #eceef3; }
.olk__mail i + i { width: 100%; margin-top: 7px; }
.olk__mail .subj { font-weight: 700; }
.olk__mail .prev { color: #616161; font-size: 12px; }
.olk__mail--hot { box-shadow: inset 3px 0 0 #0f6cbd; }
.olk__mail--hot strong { font-weight: 700; }
.olk__mail.is-sel { background: #e8f1fb; }
.av { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; }
.olk__read { position: relative; flex: 1; background: #fff; overflow: hidden; }
.olk__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; color: #616161; font-size: 14px; transition: opacity 0.4s; }
.olk__envelope { width: 124px; height: 124px; border-radius: 50%; background: #f0f0f3; position: relative; }
.olk__envelope::before { content: ""; position: absolute; left: 41px; top: 47px; width: 40px; height: 28px; border: 2px solid #b8b8c0; border-radius: 3px; }
.olk__envelope::after { content: ""; position: absolute; left: 47px; top: 44px; width: 26px; height: 26px; border-right: 2px solid #b8b8c0; border-bottom: 2px solid #b8b8c0; transform: rotate(45deg) scaleY(0.55); transform-origin: center; }
.olk__msg { position: absolute; inset: 0; padding: 26px 34px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); font-size: 14px; line-height: 21px; color: #242424; }
.olk__msg h4 { font-size: 19px; line-height: 26px; font-weight: 600; margin-bottom: 18px; }
.olk__msg p + p { margin-top: 12px; }
.olk__from { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 13px; }
.olk__from strong { display: block; font-size: 14px; }
.olk__from span:not(.av) { color: #616161; }
.olk__att { display: flex; gap: 10px; margin-top: 16px; }
.olk__att span { padding: 8px 12px; border: 1px solid #e1dfdd; border-radius: 4px; font-size: 12px; color: #424242; }
.olk__reply { margin-top: 22px; padding: 14px 16px; border: 1px solid #c7d6fb; border-radius: 6px; background: #f6f8ff; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--ease-out); }
.olk__rl { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #355af0; margin-bottom: 6px; }
.olk__typed { min-height: 42px; }
.olk__typed::after { content: ""; display: inline-block; width: 1px; height: 15px; margin-left: 1px; vertical-align: -2px; background: #355af0; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.olk__panel { position: relative; flex: 1; background: linear-gradient(180deg, #f2f7ff 0%, #fff 14%); font-family: var(--font); color: var(--navy); overflow: hidden; }
.olk__panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: radial-gradient(60% 100% at 70% 0, rgba(113, 230, 255, 0.25), transparent 70%), radial-gradient(50% 90% at 20% 0, rgba(213, 113, 229, 0.12), transparent 70%); pointer-events: none; }
.olk__ph { position: relative; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 18px; font-size: 13px; color: #8b93b8; }
.olk__ph img { width: 90px; height: auto; }
.olk__idle { position: absolute; inset: 44px 0 64px; display: grid; place-content: center; justify-items: center; text-align: center; transition: opacity 0.4s, transform 0.5s var(--ease-out); }
.olk__idle strong { margin-top: 24px; font-size: 16px; }
.olk__idle p { margin-top: 12px; font-size: 12px; line-height: 20px; color: #9aa1c2; }
.olk__ring { position: relative; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(from 200deg, #355af0, #7a5cf0, #d571e5, #71e6ff, #355af0); -webkit-mask: radial-gradient(circle, transparent 38px, #000 39px); mask: radial-gradient(circle, transparent 38px, #000 39px); animation: spin 3.2s linear infinite; filter: drop-shadow(0 6px 14px rgba(53, 90, 240, 0.35)); }
.olk__ring--s { width: 28px; height: 28px; -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px); animation-duration: 1s; }
@keyframes spin { to { transform: rotate(360deg); } }
.olk__work { position: absolute; inset: 60px 26px 70px; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.olk__status { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.olk.is-done .olk__ring--s { animation: none; background: #355af0; -webkit-mask: none; mask: none; }
.olk.is-done .olk__ring--s::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; }
.olk__steps { margin-top: 18px; display: grid; gap: 10px; }
.olk__steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s, transform 0.5s var(--ease-out); }
.olk__steps li.is-on { opacity: 1; transform: none; }
.olk__steps b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #eef2ff; color: #355af0; font-size: 11px; }
.olk__steps em { font-style: normal; color: #355af0; font-weight: 600; }
.olk__card { margin-top: 22px; padding: 16px; border: 1px solid #e3e8fb; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px -18px rgba(53, 90, 240, 0.45); font-size: 13px; line-height: 20px; opacity: 0; transform: translateY(12px); transition: opacity 0.5s, transform 0.6s var(--ease-out); }
.olk__card b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: #355af0; color: #fff; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.olk__ct { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.olk__src { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f8; font-size: 12px; color: #5b6386; }
.olk__actions { display: flex; gap: 8px; margin-top: 14px; }
.olk__actions span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 5px; font-size: 12px; font-weight: 600; transition: transform 0.2s, box-shadow 0.3s; }
.olk__insert { background: #355af0; color: #fff; }
.olk__insert.is-press { transform: scale(0.94); box-shadow: 0 0 0 4px rgba(53, 90, 240, 0.2); }
.olk__sap { border: 1px solid #355af0; color: #355af0; }
.olk__assist { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: 13px; font-weight: 600; background: #fff; }
.olk__assist::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #d571e5, #71e6ff, #bfffb6); opacity: 0.8; }
.olk__cursor { position: absolute; left: 0; top: 0; width: 34px; height: 44px; z-index: 5; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 22'%3E%3Cpath d='M1 1v17.5l4.6-4.4 3 6.9 3-1.3-3-6.8H15z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; transform: translate(var(--cx, 870px), var(--cy, 600px)); transition: transform 1.1s var(--ease-in-out); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.olk__cursor.is-click { animation: click 0.3s var(--ease-out); }
@keyframes click { 50% { scale: 0.82; } }
/* states */
.olk.is-open .olk__empty { opacity: 0; }
.olk.is-open .olk__msg { opacity: 1; transform: none; }
.olk.is-work .olk__idle { opacity: 0; transform: scale(0.96); }
.olk.is-work .olk__work { opacity: 1; }
.olk.is-card .olk__card { opacity: 1; transform: none; }
.olk.is-reply .olk__reply { opacity: 1; transform: none; }

/* ---------- Trust ---------- */
.trust { padding-top: 0; }
.trust__eyebrow { margin-bottom: 40px; }
.trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 425px)); gap: 28px; }
.tcard { display: flex; flex-direction: column; min-height: 300px; padding: 24px 24px 24px; border-color: #eceffa; }
.tcard__logo { align-self: flex-start; height: 40px; width: auto; }
.tcard__logo--dornier { height: 15px; margin: 0 0 25px; }
.tcard blockquote { display: flex; align-items: center; height: 110px; max-width: 380px; margin-top: 32px; font-size: 16px; line-height: 22px; color: var(--navy); }
.tcard figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: 14px; line-height: 18px; color: var(--grey-text); }
.tcard figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tcard figcaption strong { display: block; font-size: 18px; line-height: 22px; font-weight: 700; color: var(--navy); }

/* ---------- CEO ---------- */
.ceo { padding-top: 116px; }
.ceo__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ceo__text { padding-top: 4px; }
.ceo__media { margin-right: 56px; }
.ceo__title { margin-top: 47px; max-width: 600px; }
.ceo__lead { max-width: 520px; margin-top: 33px; }
/* Inline 16:9 video (1920×1080 source → no letterboxing). Poster + branded play button until clicked. */
.ceo__media { position: relative; }
.ceo__frame { position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0b1a4f; box-shadow: 0 30px 60px -34px rgba(7, 26, 95, 0.45); } /* no 1px ring: it painted a light line over the pink tab */
.ceo__player { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1a4f; }
.ceo__player:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.ceo__cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; overflow: hidden; }
.ceo__cover[hidden] { display: none; }
/* click → the full video starts underneath; the cover fades away once it is actually playing */
.ceo__cover { transition: opacity 0.55s var(--ease-out); }
.ceo__cover.is-out { opacity: 0; pointer-events: none; }
.ceo__frame.is-starting .ceo__cover { cursor: progress; }
.ceo__frame.is-starting .ceo__playicon { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: ceo-spin 0.75s linear infinite; }
@keyframes ceo-spin { to { transform: rotate(360deg); } }
.ceo__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 26, 95, 0.62) 0%, rgba(7, 26, 95, 0.2) 45%, rgba(7, 26, 95, 0.04) 75%); opacity: 0.8; transition: opacity 0.5s var(--ease-out); will-change: opacity; }
/* Hover never transforms the (playing) teaser video: scaling a decoding video inside a rounded clip
   re-rasterises every frame and stutters. The hover is the overlay deepening + the button state. */
.ceo__cover:hover::after, .ceo__cover:focus-visible::after { opacity: 1; }
.ceo__poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s var(--ease-out); }
/* muted, looping 14 s teaser plays in the frame (signals "this is a video"); the poster fades away once it runs */
.ceo__teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ceo__cover.is-teasing .ceo__poster { opacity: 0; }
.ceo__cover .ceo__poster { position: relative; }
.ceo__cover:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.ceo__play { position: absolute; z-index: 1; left: 24px; bottom: 24px; gap: 12px; height: 52px; padding: 0 24px 0 20px; font-size: 16px; pointer-events: none; }
.ceo__cover:hover .ceo__play, .ceo__cover:focus-visible .ceo__play { background: var(--btn-hover); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28), 0 10px 22px -12px rgba(7, 26, 95, 0.6); }
.ceo__playicon { flex: none; width: 0; height: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
/* design motif: the pink hexagon tab peeks out behind the frame's right edge */
.ceo__deco { position: absolute; z-index: 0; top: 50%; left: calc(100% - 1px); width: auto; height: 38%; transform: translate(-10px, -50%); transition: transform 0.9s var(--ease-out); }
.ceo__media:hover .ceo__deco { transform: translate(-3px, -50%); } /* still tucked 4px under the frame — never a gap */

/* ---------- Problem ---------- */
.problem { padding-top: 120px; }
.problem__inner { display: grid; grid-template-columns: 536px 1fr; padding-left: 60px; }
.problem__title { margin-top: 23px; font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -0.038em; max-width: 420px; }
/* One spacing model for every item and state: each item is a row between two divider lines (first item has one
   above, last item one below); --acc-p above and below a closed title, so closed rows are identical and their
   titles centred. Open: same --acc-p above the title, title → text 5px, text → divider 44px; the badge is centred on
   the title's first line. Button padding animates with the panel height (same duration/easing). */
.acc { --acc-p: 38px; --acc-lh: 28px; --acc-badge: 51px; max-width: 784px; }
.acc__item { border-bottom: 1px solid var(--line-blue); }
.acc__item:first-child { border-top: 1px solid var(--line-blue); }
.acc__btn { position: relative; display: flex; align-items: flex-start; width: 100%; padding: var(--acc-p) 0 var(--acc-p) 96px; text-align: left; transition: padding 0.7s var(--ease-out); }
.acc__item.is-open .acc__btn { padding-bottom: 5px; }
.acc__num { position: absolute; left: 0; top: calc(var(--acc-p) + (var(--acc-lh) - var(--acc-badge)) / 2); display: grid; place-items: center; width: var(--acc-badge); height: var(--acc-badge); border-radius: 8px; background: var(--blue); color: #fff; font-size: 28px; font-weight: 600; transform: scale(0.4); opacity: 0; transition: transform 0.6s var(--ease-spring), opacity 0.3s; }
.acc__item.is-open .acc__num { transform: none; opacity: 1; }
.acc__title { font-size: 20px; line-height: var(--acc-lh); font-weight: 600; color: var(--navy); transition: color 0.3s; }
.acc__btn:hover .acc__title { color: var(--blue); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-out); }
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel p { max-width: 530px; margin-left: 96px; padding-bottom: 44px; font-size: 16px; line-height: 22px; color: var(--navy); opacity: 0; transform: translateY(-6px); transition: opacity 0.5s, transform 0.6s var(--ease-out); }
.acc__item.is-open .acc__panel p { opacity: 1; transform: none; transition-delay: 0.12s; }
/* 002 canvas is ~12% transparent margin → 105.7vw keeps the visible cards inside the 48px gutters; art clips the rest */
.problem__art { margin: 46px 0 0; overflow: hidden; }
/* Lottie 002 has its own small caption at the bottom — crop it, the HTML caption below is the design's (larger) one */
.problem__crop { width: min(1522px, 105.7vw); margin-left: 50%; transform: translateX(-50%); aspect-ratio: 1000 / 530; overflow: hidden; }
.problem__caption { margin-top: 39px; font-size: 20px; line-height: 32px; font-weight: 600; text-align: center; }
.br-p { display: none; }

/* ---------- Scatter ---------- */
.scatter { padding-top: 119px; overflow-x: clip; } /* clip (not hidden): hidden would break the sticky pin below */
/* Scroll-scrubbed mode (home.js adds .scatter--scrub): the section becomes a runway; title + graph stay
   pinned under the header while scrolling drives the animation, then the page scrolls on. */
.scatter--scrub { --pin-top: calc(var(--banner-h) + var(--nav-h)); --pin-h: calc(100svh - var(--pin-top)); height: calc(var(--pin-h) + var(--runway, 325svh)); padding-top: 0; margin-top: 64px; }
.scatter--scrub .scatter__pin { position: sticky; top: var(--pin-top); height: var(--pin-h); display: flex; flex-direction: column; justify-content: center; padding: 36px 0 16px; }
.scatter--scrub .scatter__art { flex: none; }
.scatter__title { max-width: 860px; margin: 0 auto; line-height: 54px; }
/* sizes below are measured at the 1440/768/360 captures and expressed as fractions so they scale between them */
/* 000: content union over all frames spans 8.5–88.5% of the canvas (centre 48.54%) → translate by that centre */
.scatter__art { position: relative; width: min(1509px, 104.8%); margin: 4px 0 0 50%; transform: translateX(-50%); }

/* ---------- Solution ---------- */
.solution { padding-top: 0; margin-top: 200px; position: relative; }
.solution__title { margin-top: 42px; max-width: 1220px; }
.solution__lead { max-width: 820px; margin-top: 39px; }
.solution__grid { display: grid; grid-template-columns: 807px 1fr; gap: 41px; margin-top: 38px; padding-left: 2px; padding-right: 2px; }
.works { padding: 28px 28px 30px; }
.works__title { font-size: 16px; line-height: 20px; font-weight: 700; }
.works__chips { display: flex; flex-wrap: wrap; gap: 16px 8px; margin-top: 19px; max-width: 640px; }
.works__note { margin-top: 23px; font-size: 16px; line-height: 20px; color: var(--grey-text); }
.kpi { display: grid; gap: 17px; padding: 20px; box-shadow: var(--shadow-float); }
.kpi__tile { display: grid; place-items: center; height: 99px; border-radius: 6px; background: url("../../img/home/accuracy-bg.webp") center / cover; font-size: 24px; font-weight: 700; color: var(--navy); transition: transform 0.6s var(--ease-out), background-position 1.2s var(--ease-out); background-size: 130% auto; background-position: 0 50%; }
.kpi:hover .kpi__tile { background-position: 100% 50%; }
.kpi__tile:hover { transform: scale(1.015); }

/* ---------- Results ---------- */
.results { padding-top: 118px; }
.results__title { margin-top: 42px; }
/* All three cards share one internal grid (subgrid rows: number / title / text) → numbers, titles and body text
   start on the same lines even when one title wraps; identical padding; icon centred on the number's line box. */
.results__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto minmax(150px, auto); column-gap: 34px; row-gap: 0; margin-top: 36px; }
.stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 52px 44px 40px; }
.stat__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stat__top img { flex: none; margin-right: 4px; transition: transform 0.6s var(--ease-out); }
.stat:hover .stat__top img { transform: scale(1.06); }
.stat__num { font-size: 67px; line-height: 80px; font-weight: 700; letter-spacing: -0.038em; font-variant-numeric: tabular-nums; }
.stat__title { margin-top: 39px; font-size: 24px; line-height: 32px; font-weight: 700; }
.stat__text { margin-top: 12px; max-width: 336px; font-size: 16px; line-height: 20px; color: var(--grey-text); }

/* ---------- Products ---------- */
.products { padding-top: 123px; }
.products__title { margin-top: 34px; max-width: 620px; margin-left: auto; margin-right: auto; }
.products__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 580px)); justify-content: center; gap: 62px; margin-top: 39px; }
.prod__text { font-size: 20px; line-height: 32px; }
.prod__text strong { font-weight: 700; }
.prod__link { display: inline-block; margin-top: 14px; }
.prod__art { width: 410px; margin: 41px auto -106px; }

/* ---------- Connect ---------- */
.connect { padding-top: 100px; overflow: hidden; }
.connect__text { max-width: 640px; margin: 41px auto 0; font-size: 20px; line-height: 32px; }
.connect__text strong { font-weight: 700; }
.connect__btn { margin-top: 38px; }
.connect__art { width: 1200px; max-width: 100%; margin: -14px auto 0; }

/* ---------- How ---------- */
.how { padding-top: 92px; padding-bottom: 121px; overflow: hidden; }
.how__title { margin-top: 41px; max-width: 820px; }
.how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; margin-top: 38px; }
/* each step spans both grid rows via subgrid → text in row 1, art in row 2: every illustration starts on the same line */
.step { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; padding: 0 36px 8px; }
.step + .step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #e2e5ef; }
.step__title { margin-top: 23px; font-size: 20px; line-height: 28px; font-weight: 600; }
.step__text p { margin-top: 4px; max-width: 330px; font-size: 16px; line-height: 22px; }
.step__art { align-self: start; }
/* Step art — sized from each canvas' measured visible box (fractions of the canvas): --vw visible width,
   --x0 left padding, --y0 top padding, --pb bottom padding (of height), --ar = h / w. Every step shows its
   cards at the same share of the column (--fit), left edge on the text, and all three end on one baseline. */
.step__art {
  --fit: 0.95;
  --cw: calc(100% * var(--fit) / var(--vw));                 /* canvas width */
  width: var(--cw);
  margin-left: calc(-1 * var(--cw) * var(--x0));
  margin-top: calc(40px - var(--cw) * var(--ar) * var(--y0));   /* visible cards start 40px below the tallest text */
  margin-bottom: calc(-1 * var(--cw) * var(--ar) * var(--pb));
}
.step__art--1 { --vw: 0.898; --x0: 0.05;  --y0: 0.035; --pb: 0.147; --ar: 0.6923; }
.step__art--2 { --vw: 0.874; --x0: 0.064; --y0: 0.059; --pb: 0.139; --ar: 1.25; }
.step__art--3 { --vw: 0.876; --x0: 0.064; --y0: 0.068; --pb: 0.178; --ar: 1; }
.step__art .lottie { scale: 1; } /* exact sizing here — exempt from the global 5 % reduction */

/* ==========================================================================
   Tablet (768–1199) — measured from the 768px capture
   ========================================================================== */
@media (max-width: 1199px) {
  .br-d { display: none; }
  .hero { padding-bottom: 0; }
  .hero__bg { height: 700px; background-size: cover; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 450px, transparent 640px); mask-image: linear-gradient(180deg, #000 0, #000 450px, transparent 640px); }
  .hero__motif--d { display: none; }
  .hero__motif--t { display: block; top: 47px; left: 65px; width: 688px; height: 505px; }
  .hero__stage { max-width: 768px; height: 551px; }
  .hero__content { width: 559px; margin: 0 0 0 104px; padding: 106px 0 0; }
  .hero__title { margin-top: 20px; font-size: 41px; line-height: 46px; }
  .hero__lead { max-width: none; margin-top: 12px; font-size: 16px; line-height: 22px; }
  .hero__btns { flex-direction: column; gap: 8px; margin-top: 16px; }
  .hero__btns .btn { width: 100%; }
  .hero__demo { width: auto; max-width: none; margin: 74px var(--gutter) 0; }

  .trust { padding-top: 150px; }
  .trust__eyebrow { font-size: 16px; margin-bottom: 29px; }
  .trust__grid { grid-template-columns: 1fr; gap: 16px; }
  .tcard { min-height: 0; padding: 24px; }
  .tcard__logo--dornier { margin-bottom: 0; }
  .tcard blockquote { height: auto; max-width: none; margin: 20px 0 30px; font-size: 16px; line-height: 22px; }
  .tcard figcaption strong { font-size: 16px; line-height: 20px; }
  .tcard figcaption { font-size: 12px; line-height: 16px; }

  .ceo { padding-top: 58px; }
  /* stacked: the video gets the full content width (16:9) instead of a 312px column */
  .ceo__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ceo__title { margin-top: 26px; max-width: 560px; font-size: 42px; line-height: 48px; }
  .ceo__lead { max-width: 560px; margin-top: 24px; font-size: 16px; line-height: 22px; }
  .ceo__media { max-width: 820px; margin: 40px 0 0; }
  .ceo__deco { display: none; }
  .ceo__play { left: 20px; bottom: 20px; height: 48px; }

  .problem { padding-top: 58px; }
  .problem__inner { grid-template-columns: 330px 1fr; gap: 46px; padding-left: var(--gutter); }
  .problem__title { margin-top: 20px; font-size: 43px; line-height: 48px; max-width: 300px; }
  .acc { --acc-p: 28px; --acc-lh: 32px; }
  .acc__btn { flex-direction: column; padding: var(--acc-p) 0; }
  .acc__item.is-open .acc__btn { padding-bottom: 0; }
  /* number badge sits above the title; it collapses (instead of display:none) so open/close stays smooth */
  .acc__num { position: static; width: 32px; height: 0; margin-bottom: 0; border-radius: 6px; font-size: 16px; overflow: hidden; transform: scale(0.6); transform-origin: 0 0; transition: height 0.7s var(--ease-out), margin 0.7s var(--ease-out), transform 0.5s var(--ease-out), opacity 0.3s; }
  .acc__item.is-open .acc__num { height: 30px; margin-bottom: 20px; }
  .acc__title { font-size: 20px; }
  .acc__panel p { max-width: none; margin: 12px 0 0; padding-bottom: 32px; font-size: 16px; line-height: 22px; }
  .problem__art { width: auto; margin: 12px 0 0; }
  /* 002 bleeds slightly past the viewport (780px canvas at 768) — content stays inside the gutters */
  .problem__crop { width: auto; margin: 0; transform: none; aspect-ratio: 1000 / 538; }
  .problem__crop .lottie { width: 101.5%; margin-left: -0.75%; }
  .problem__caption { margin-top: 40px; }

  .scatter { padding-top: 66px; }
  .scatter--scrub { --runway: 250svh; margin-top: 32px; }
  .scatter--scrub .scatter__art { width: 100%; } /* pinned: the graph can use the full content width */
  .scatter__title { max-width: 620px; font-size: 43px; line-height: 48px; }
  /* the documents frames span 80% of the canvas → 110% keeps them inside the gutters */
  .scatter__art { width: min(520px, 100%); margin: 26px auto 0; transform: none; }
  .solution { margin-top: 32px; }
  .solution .eyebrow { text-align: left; }
  .solution__title { margin-top: 24px; max-width: 672px; font-size: 43px; line-height: 48px; }
  .solution__lead { max-width: none; margin-top: 23px; font-size: 16px; line-height: 22px; }
  .solution__grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 31px; padding: 0; }
  .works { padding: 28px; }
  .works__title { font-size: 16px; line-height: 20px; white-space: nowrap; }
  .works__chips { gap: 12px 8px; margin-top: 24px; }
  .works__note { margin-top: 24px; font-size: 16px; line-height: 22px; }
  .kpi { padding: 20px; gap: 17px; }
  .kpi__tile { height: auto; min-height: 202px; font-size: 24px; background-size: cover; }
  .kpi:hover .kpi__tile { background-position: center; }

  .results { padding-top: 61px; }
  .results .eyebrow, .results__title { text-align: left; }
  .results__title { margin-top: 24px; font-size: 43px; line-height: 48px; }
  .results__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; margin-top: 27px; }
  .stat { display: block; grid-row: auto; padding: 16px 16px 14px; }
  .stat__num { font-size: 64px; line-height: 76px; }
  .stat__top img { margin: 0; }
  .stat__title { margin-top: 16px; font-size: 24px; line-height: 32px; }
  .stat__text { margin-top: 8px; max-width: none; font-size: 16px; line-height: 22px; color: var(--navy); }

  .products { padding-top: 52px; }
  .products .eyebrow, .products__title { text-align: left; }
  .products__title { margin: 24px 0 0; max-width: none; font-size: 43px; line-height: 48px; }
  .products__grid { grid-template-columns: 1fr; gap: 60px; margin-top: 30px; }
  .prod__text { font-size: 16px; line-height: 22px; }
  .prod__link { font-size: 20px; margin-top: 12px; }
  .prod__art { --w: min(68.3%, 550px); width: var(--w); margin: 5px auto calc(var(--w) * -0.16); }
  .prod + .prod .prod__art { --w: min(67.6%, 545px); }

  .connect { padding-top: 86px; }
  .connect__text { max-width: 680px; margin-top: 24px; font-size: 16px; line-height: 22px; }
  .connect__btn { width: 100%; margin-top: 30px; }
  /* logos span 8–92% of the canvas; only the faint outermost orbit may run into the viewport edge */
  .connect__art { --w: min(108%, 1200px); width: var(--w); max-width: none; margin: 13px 0 0 calc((100% - var(--w)) / 2); }

  .how { padding-top: 30px; padding-bottom: 21px; }
  .how__title { margin-top: 24px; font-size: 43px; line-height: 48px; }
  .how__grid { grid-template-columns: 1fr; gap: 41px; margin-top: 28px; }
  .how__grid { grid-template-rows: none; }
  .step { display: grid; grid-template-columns: minmax(0, 270fr) minmax(0, 390fr); grid-template-rows: none; grid-row: auto; gap: 28px; min-height: 0; padding: 0; }
  .step + .step::before { display: none; }
  .step__title { margin-top: 26px; font-size: 18px; line-height: 24px; }
  .step__text p { max-width: none; margin-top: 8px; font-size: 16px; line-height: 22px; }
  /* Pull the canvases up so the visible cards start level with the step number; the empty canvas bottom hangs into the row gap */
  /* art column: cards start level with the step number, same visible width in every row */
  .step__art { margin-top: calc(-1 * var(--cw) * var(--ar) * var(--y0)); }
}

/* ==========================================================================
   Phone (≤767) — measured from the 360px capture
   ========================================================================== */
@media (max-width: 767px) {
  .hero__bg { height: 900px; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 700px, transparent 880px); mask-image: linear-gradient(180deg, #000 0, #000 700px, transparent 880px); }
  .hero__motif--t { display: none; }
  .hero__motif--m { display: block; top: 44px; left: 17px; width: calc(100% - 34px); height: 721px; }
  .hero__stage { height: auto; }
  .hero__content { width: auto; margin: 0; padding: 184px 33px 0; }
  .br-p { display: inline; }
  .hero__eyebrow { font-size: 14px; line-height: 17px; }
  .hero__title { margin-top: 20px; font-size: 39px; line-height: 44px; }
  .hero__lead { margin-top: 12px; font-size: 16px; line-height: 22px; }
  .hero__btns { margin-top: 16px; }
  .hero__demo { margin: 77px 33px 0; }

  .trust { padding-top: 70px; }
  .trust__eyebrow { text-align: left; font-size: 14px; line-height: 18px; margin-bottom: 12px; }
  .tcard { padding: 24px 20px; }
  .tcard blockquote { font-size: 16px; line-height: 22px; }

  .ceo { padding-top: 41px; }
  .ceo__inner { grid-template-columns: 1fr; gap: 0; }
  .ceo__inner > * { min-width: 0; }
  .ceo__title { margin-top: 18px; font-size: 39px; line-height: 44px; }
  .ceo__lead { margin-top: 15px; }
  .ceo__media { margin-top: 32px; }
  .ceo__play { left: 12px; bottom: 12px; height: 44px; padding: 0 16px 0 14px; gap: 10px; font-size: 15px; }

  .problem { padding-top: 81px; }
  .problem__inner { grid-template-columns: 1fr; gap: 30px; }
  .problem__title { font-size: 39px; line-height: 46px; max-width: none; }
  .problem__art { margin: 19px 0 0; }
  .problem__crop { margin: 0; aspect-ratio: 1000 / 540; }
  .problem__crop .lottie { width: 104%; margin-left: -2%; }
  .problem__caption { margin-top: 10px; font-size: 20px; line-height: 32px; text-align: left; }
  .acc { --acc-p: 24px; }

  .scatter { padding-top: 82px; }
  .scatter--scrub { --runway: 213svh; margin-top: 24px; }
  .scatter__title { font-size: 39px; line-height: 44px; }
  /* 113% keeps the widest Lottie frames (documents / cards) inside the 16px gutters */
  .scatter__art { width: min(392px, 108.9%); margin: 52px 0 0 50%; transform: translateX(-50%); }
  .solution { margin-top: 112px; }
  .solution__title { font-size: 39px; line-height: 44px; letter-spacing: -0.042em; }
  .works__title { white-space: normal; }
  .solution__grid { grid-template-columns: 1fr; }
  .works__chips { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
  .works .chip { height: 48px; font-size: 16px; gap: 14px; padding: 0 16px; }
  .works { padding: 24px 20px 24px 28px; }
  .kpi__tile { min-height: 202px; }

  .results__title, .products__title, .how__title { font-size: 39px; line-height: 44px; }
  .stat__num { font-size: 70px; line-height: 70px; }
  .stat { padding: 12px 16px 16px; }
  .stat__title { margin-top: 23px; }
  .stat__text { margin-top: 15px; }
  .products { padding-top: 70px; }
  .connect .container { text-align: left; }
  .connect { padding-top: 70px; }
  .connect__btn { margin-top: 16px; }
  .how { padding-top: 45px; }
  .connect { overflow: hidden; }
  .connect__art { --w: min(111.1%, 640px); width: var(--w); max-width: none; margin: -5px 0 -15px calc((100% - var(--w)) / 2); }
  .cta-band h2 { max-width: 300px; }
  .prod__art { --w: min(114.6%, 480px); margin-left: calc((100% - var(--w)) / 2); }
  .prod + .prod .prod__art { --w: min(113.4%, 475px); }

  .how__title { margin-top: 16px; }
  .how__grid { gap: 33px; }
  .step { grid-template-columns: 1fr; gap: 24px; }
  .step__title { margin-top: 16px; font-size: 24px; line-height: 30px; }
  .step__art { --fit: 0.95; margin-top: 0; max-width: none; }
}

/* ==========================================================================
   German (site/de/) — layout tweaks for longer copy and compounds.
   Every rule is scoped to html[lang="de"]; EN rendering is untouched.
   ========================================================================== */
/* No auto-hyphenation in short, narrow copy blocks (quotes, stat cards, steps) */
html[lang="de"] :is(.tcard blockquote, .stat__text, .step__text p) { -webkit-hyphens: manual; hyphens: manual; }
html[lang="de"] .nobr { white-space: nowrap; }
html[lang="de"] .works__chips { max-width: none; }
@media (min-width: 1200px) {
  /* H1 at 56px needs 953px for "Verwandeln Sie Ihr Servicegeschäft" → 52px keeps the two-line hero inside the white frame */
  html[lang="de"] .hero__title { font-size: 52px; line-height: 62px; }
  /* "Ihre Servicemitarbeiter" does not fit the 536px column */
  html[lang="de"] .problem__inner { grid-template-columns: 590px 1fr; column-gap: 60px; }
  html[lang="de"] .problem__title { max-width: none; font-size: 52px; line-height: 52px; }
  html[lang="de"] .scatter__title { max-width: 900px; }
  /* Works card is one note line taller → keep the two fixed-height KPI tiles centred */
  html[lang="de"] .kpi { align-content: center; }
  html[lang="de"] .step__text p { max-width: 346px; }
}
@media (max-width: 1199px) {
  html[lang="de"] .ceo__title { max-width: 620px; }
  /* Problem: headline above the accordion (like phone) — "Servicemitarbeiter" can't fit a 330px column */
  html[lang="de"] .problem__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  html[lang="de"] .problem__title { max-width: none; }
}
@media (max-width: 767px) {
  html[lang="de"] :is(.ceo__title, .problem__title, .scatter__title, .solution__title, .results__title, .products__title, .how__title) { font-size: 35px; line-height: 40px; max-width: none; }
  html[lang="de"] .hero__title { font-size: 32px; line-height: 38px; }
}

/* "Works with what you already have" tags blend in one by one, after their card has landed */
.works__chips > [data-reveal="chip"] {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.94);
  filter: saturate(0.4);
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-spring), filter 0.9s var(--ease-out), background-color 0.3s;
  transition-delay: calc(0.3s + var(--d, 0) * 1s);
}
.works__chips > [data-reveal="chip"].is-in { opacity: 1; transform: none; filter: none; }

/* Hero product preview video (replaces .olk). Same footprint as the old
   animation: full width of .hero__demo at the recording's aspect ratio. */
.hero__video { display: block; width: 100%; height: auto; aspect-ratio: 1770 / 994; background: transparent; }