:root {
  color-scheme: light;
  --ink: #17253c;
  --soft-ink: #3f5069;
  --muted: #738097;
  --green: #14b893;
  --green-dark: #068969;
  --blue: #466cff;
  --purple: #8b61da;
  --pink: #f1778a;
  --orange: #f5a641;
  --white: #fff;
  --shadow: 0 24px 70px rgba(41, 63, 104, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { margin: 0; min-height: 100%; background: #fbfcff; scroll-behavior: auto; }
body { margin: 0; overflow: hidden; width: 100%; min-width: 300px; height: 100dvh; color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #6174ff; outline-offset: 4px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
img { display: block; max-width: 100%; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-shell { position: relative; isolation: isolate; width: 100%; height: 100dvh; min-height: 420px; overflow: hidden; background: #f9fbff; }
.site-shell::before { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 43% 52% at -6% 92%, #e4f8f1 0%, transparent 76%), radial-gradient(ellipse 38% 53% at 108% 8%, #e8ebff 0%, transparent 76%), linear-gradient(112deg, #fcfdff, #f8fbff 70%, #fdfbff); }
.site-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .18; background-image: radial-gradient(#91a1b4 .72px, transparent .72px); background-size: 25px 25px; mask-image: linear-gradient(90deg, transparent, black 44%, transparent); }
.topbar { height: 88px; position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px, 4.8vw, 90px); border-bottom: 1px solid rgba(166, 182, 204, .22); background: rgba(252, 253, 255, .68); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 232px; }
.brand-icon { position: relative; width: 43px; height: 43px; border-radius: 13px; color: #fff; display: grid; place-items: center; background: linear-gradient(145deg, #23c69f, #089e90); box-shadow: 0 9px 20px #15b89335; }
.brand-icon > svg { width: 25px; height: 25px; stroke-width: 2; }
.brand-leaf { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 100px; background: #fff; color: #0eab83; top: -6px; right: -6px; transform: rotate(-15deg); border: 2px solid #f9fcff; }
.brand-leaf svg { width: 10px; height: 10px; stroke-width: 2; }
.brand-text { display: flex; flex-direction: column; line-height: 1.03; gap: 4px; }
.brand-text strong { font-size: 20px; font-weight: 830; letter-spacing: -.9px; }
.brand-dot { color: var(--green); }
.brand-text small { font-size: 8px; font-weight: 850; color: #71849b; letter-spacing: 1.8px; }
.top-center { display: flex; align-items: center; gap: 16px; color: #99a5ba; font-size: 9px; font-weight: 850; letter-spacing: 1.7px; white-space: nowrap; }
.topline { height: 1px; width: clamp(22px, 4vw, 56px); background: #d0d8e6; }
.build-mark { display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 9px; border: 1px solid #e6eaf2; background: #fff; border-radius: 100px; box-shadow: 0 5px 20px #aab4cc19; color: #63718a; font-size: 12px; font-weight: 840; letter-spacing: -.15px; white-space: nowrap; }
.build-mark strong { color: #192743; font-weight: 900; }
.build-mark em { font-weight: 650; font-style: normal; font-size: 11px; color: #8c9bb0; }
.build-spark { background: #ecf3ff; color: #567cfc; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; }
.build-spark svg { width: 15px; height: 15px; }
#presentation { position: absolute; inset: 88px 0 92px; overflow: hidden; }
.slide { position: absolute; inset: 0; padding: 18px clamp(52px, 8.15vw, 146px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(60px) scale(.99); transition: opacity .43s ease, transform .52s var(--ease), visibility .43s; }
.slide::-webkit-scrollbar { display: none; }
.slide[data-state="before"] { transform: translateX(-60px) scale(.99); }
.slide.active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.slide-inner { width: 100%; max-width: 1440px; min-height: 100%; margin: 0 auto; position: relative; z-index: 1; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); align-items: center; column-gap: clamp(35px, 5.3vw, 94px); }
.words { position: relative; z-index: 3; padding: 12px 0 18px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 10px; font-weight: 860; letter-spacing: 2px; border-radius: 100px; padding: 8px 13px; }
.eyebrow-green { background: #e8f9f3; color: #089e7a; }
.eyebrow-coral { background: #fff0ef; color: #ed6976; }
.eyebrow-purple { background: #f0ecff; color: #8259c4; }
.eyebrow-blue { background: #eaf1ff; color: #426ff6; }
.eyebrow-orange { background: #fff4e7; color: #ef9630; }
.tiny-circle { height: 7px; width: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px #ffffff90; }
.eyebrow-suffix { opacity: .5; border-left: 1px solid currentColor; padding-left: 9px; margin-left: 6px; font-size: 10px; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-size: clamp(49px, 4.75vw, 77px); line-height: 1.087; letter-spacing: -3.5px; margin-bottom: 23px; margin-top: 25px; color: #18263e; font-weight: 890; }
.slide-one h1 { font-size: clamp(52px, 4.95vw, 82px); }
.highlight-word { position: relative; isolation: isolate; display: inline-block; }
.highlight-word::after { content: ''; position: absolute; height: 12px; left: 0; right: 0; bottom: 3px; border-radius: 20px; z-index: -1; opacity: .27; transform: rotate(-1.2deg); }
.mint-word { color: #08ab87; }
.mint-word::after { background: #14d4a6; }
.coral-word { color: #eb7380; }
.coral-word::after { background: #ffb6ab; }
.purple-word { color: #8760d5; }
.purple-word::after { background: #be9aff; }
.blue-word { color: #4e6fff; }
.blue-word::after { background: #98b5ff; }
.orange-word { color: #ef9e36; }
.orange-word::after { background: #ffd68f; }
.lead { font-size: clamp(16px, 1.23vw, 19px); line-height: 1.75; font-weight: 450; letter-spacing: -.16px; color: #627188; max-width: 520px; margin-bottom: 25px; }
.lead strong { font-weight: 770; color: #384b66; }
.slide-decoration { position: absolute; z-index: -1; pointer-events: none; width: 520px; height: 520px; border-radius: 49% 51% 56% 44%; filter: blur(3px); opacity: .64; }
.dec-one { top: -160px; right: -220px; background: radial-gradient(circle at 50% 50%, #d9f9ee, transparent 71%); }
.dec-two { bottom: -230px; left: -160px; background: radial-gradient(circle at 50% 50%, #ffedef, transparent 70%); }
.dec-three { top: -210px; right: -190px; background: radial-gradient(circle at 50% 50%, #e9deff, transparent 70%); }
.dec-four { bottom: -230px; right: -180px; background: radial-gradient(circle at 50% 50%, #e2edff, transparent 70%); }
.dec-five { top: -240px; left: -200px; background: radial-gradient(circle at 50% 50%, #fff1d9, transparent 70%); }

/* Large illustration frames */
.visual { min-width: 0; position: relative; border-radius: 34px; box-shadow: var(--shadow); isolation: isolate; overflow: hidden; }
.hero-visual { height: clamp(410px, 37.7vw, 590px); background: radial-gradient(ellipse at 65% 38%, #234970, #10263f 66%, #12273d); border: 8px solid #fff; box-shadow: 0 22px 65px rgba(17, 57, 83, .20), 0 0 0 1px #d4e6ec; }
.hero-visual::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 40%, #0b233e32 100%); }
.hero-visual > img { position: absolute; width: 114%; max-width: none; height: 86%; object-fit: contain; left: -7%; top: 10%; mix-blend-mode: screen; filter: saturate(1.28) contrast(1.12); animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.025); } }
.hero-halo { pointer-events: none; width: 380px; height: 380px; position: absolute; top: 5%; left: 15%; border: 1px dashed #66ddec3d; border-radius: 50%; box-shadow: 0 0 0 55px #56c6ff07, 0 0 0 116px #56c6ff03; }
.visual-number { position: absolute; top: 25px; right: 25px; z-index: 3; letter-spacing: 2px; font-size: 11px; color: #d8f5ff; font-weight: 800; }
.visual-number span { opacity: .45; }
.hero-top-tag { position: absolute; z-index: 5; left: 26px; top: 25px; color: #effffb; border: 1px solid #b1e3ea44; background: #0f32487c; backdrop-filter: blur(8px); border-radius: 100px; display: flex; gap: 8px; align-items: center; padding: 7px 14px 7px 8px; font-size: 11px; font-weight: 700; }
.hero-tag-icon { width: 27px; height: 27px; background: #2baf99; border-radius: 50%; display: grid; place-items: center; }
.hero-tag-icon svg { width: 15px; height: 15px; }
.float-caption { position: absolute; z-index: 5; bottom: 28px; left: 27px; display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 12px; background: #fefeff; box-shadow: 0 12px 30px #031a3120; border-radius: 15px; }
.float-caption strong { display: block; color: #1c3450; font-size: 14px; letter-spacing: -.2px; }
.float-caption small { display: block; margin-top: 4px; color: #7b91a3; font-size: 11px; }
.caption-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.caption-icon.mint { background: #e2f9f0; color: #09a986; }
.floating-stamp { position: absolute; z-index: 5; right: 20px; bottom: 26px; width: 87px; height: 87px; display: grid; align-content: center; text-align: center; border: 1px dashed #a4e9e5; border-radius: 50%; color: #d9fff7; font-size: 11px; font-weight: 900; letter-spacing: 1px; line-height: 1.4; transform: rotate(13deg); }
.floating-stamp span { font-size: 16px; line-height: 1; }
.intro-pills { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 28px; }
.intro-pills span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dbede8; color: #4f796d; background: #fff; border-radius: 100px; padding: 8px 11px; font-size: 11px; font-weight: 760; }
.intro-pills svg { color: #12b494; width: 14px; height: 14px; stroke-width: 3; }
.cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 21px; background: linear-gradient(135deg, #12bb93, #07a38e); color: white; border: none; border-radius: 15px; padding: 17px 20px 17px 25px; font-size: 14px; font-weight: 800; box-shadow: 0 11px 24px #0baf8b3b; transition: transform .2s ease, box-shadow .2s ease; }
.cta-primary svg { width: 19px; height: 19px; }
.cta-primary:hover { transform: translateY(-3px); box-shadow: 0 17px 28px #0baf8b40; }
.micro-caption { margin-top: 25px; display: flex; align-items: center; gap: 7px; color: #9aa6b8; font-size: 11px; font-weight: 530; }
.micro-dot { width: 6px; height: 6px; background: #e9aa6a; border-radius: 50%; }

/* Problem page */
.slide-two h2 { font-size: clamp(51px, 4.55vw, 75px); }
.stat-row { display: flex; align-items: center; gap: 21px; padding: 11px 0 16px; margin: 6px 0 19px; border-bottom: 1px solid #e6ebf3; max-width: 525px; }
.stat-number { font-size: clamp(73px, 6.2vw, 102px); letter-spacing: -7px; font-weight: 920; line-height: 1; color: #f17a77; white-space: nowrap; }
.stat-number span { font-size: .55em; letter-spacing: -2px; }
.stat-description { max-width: 295px; color: #45546d; font-size: 14px; font-weight: 710; line-height: 1.5; }
.stat-description small { display: block; color: #99a4b4; font-size: 10px; font-weight: 550; margin-top: 8px; }
.message-ribbon { display: flex; align-items: center; gap: 11px; color: #876c58; font-size: 13px; font-weight: 530; }
.message-ribbon b { color: #bd6f4d; }
.ribbon-icon { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: #f1a451; background: #fff4e6; }
.ribbon-icon svg { width: 17px; height: 17px; }
.problem-visual { height: clamp(410px, 38vw, 595px); border: 7px solid white; background: linear-gradient(140deg, #fff5f0 0%, #f5f8ff 100%); }
.problem-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 12%, #ffcdbc 0%, transparent 43%), radial-gradient(circle at 90% 83%, #baf3e7 0%, transparent 42%); opacity: .39; }
.problem-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 29px 28px 16px; font-size: 10px; font-weight: 900; letter-spacing: 1.4px; }
.problem-header > span:first-child { color: #d18b83; }
.problem-header strong { color: #0fa880; }
.cross-line { flex: 1; max-width: 57px; height: 1px; background: #cdd7d9; }
.problem-image-wrap { position: relative; z-index: 2; margin: 0 auto; width: 86%; height: 60%; display: grid; place-items: center; filter: drop-shadow(0 18px 20px rgba(68, 77, 96, .1)); }
.problem-image-wrap::before { content: ''; position: absolute; inset: 8% 2%; background: #fff9; filter: blur(34px); border-radius: 50%; }
.problem-image-wrap img { z-index: 1; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: 10px; mask-image: radial-gradient(ellipse at 50% 50%, black 57%, transparent 82%); }
.problem-bottom { position: absolute; bottom: 20px; left: 18px; right: 18px; display: flex; align-items: center; gap: 8px; justify-content: center; z-index: 5; }
.small-story { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid #f1edf2; padding: 11px 9px; border-radius: 14px; background: #fff; box-shadow: 0 6px 25px #9aa7bc1b; }
.small-story strong, .small-story small { display: block; white-space: nowrap; }
.small-story strong { font-size: clamp(9px, .88vw, 13px); color: #30435a; margin-top: 3px; }
.small-story small { font-size: clamp(7px, .63vw, 9px); color: #94a0b0; font-weight: 800; letter-spacing: .7px; }
.icon-bg { flex: 0 0 35px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; }
.icon-bg svg { width: 18px; height: 18px; }
.icon-bg-coral { background: #fff0eb; color: #f0877a; }
.icon-bg-green { background: #e7f8ef; color: #11a582; }
.story-arrow { flex: 0 0 25px; height: 25px; display: grid; place-items: center; color: #abb8bc; }
.story-arrow svg { width: 19px; height: 19px; }

/* Design/material page */
.slide-three h2 { font-size: clamp(47px, 4.45vw, 72px); }
.material-list { display: grid; gap: 10px; max-width: 540px; }
.material-item { display: flex; align-items: center; gap: 13px; padding: 13px 16px 13px 13px; border: 1px solid #e7e7f1; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px #6375960a; }
.material-item .material-icon { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; }
.material-item .material-icon svg { width: 21px; height: 21px; }
.material-item div { min-width: 0; flex: 1 1 auto; }
.material-item strong, .material-item small { display: block; }
.material-item strong { color: #2c3954; font-size: 13px; font-weight: 850; }
.material-item small { color: #8995a6; font-size: 11px; margin-top: 5px; line-height: 1.4; }
.material-count { color: #b2b9c9; font-size: 11px; font-weight: 900; }
.material-glass .material-icon { color: #4e84ea; background: #eaf1ff; }
.material-steel .material-icon { color: #916ae0; background: #f1eaff; }
.material-seal .material-icon { color: #07aa94; background: #e3f9ef; }
.design-visual { height: clamp(420px, 38.8vw, 595px); background: #f1f4ff; border: 7px solid #fff; overflow: hidden; }
.design-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 42%, #ffffff, transparent 72%), linear-gradient(143deg, #e8e6ff, #effbff); }
.design-subtitle { position: absolute; top: 29px; left: 30px; display: flex; align-items: center; gap: 9px; z-index: 3; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; color: #707ca7; }
.mini-color-dot { height: 8px; width: 8px; border-radius: 50%; background: #9678df; }
.design-image { position: absolute; width: 92%; height: 70%; left: 4%; top: 11%; display: grid; place-items: center; }
.design-image img { height: 100%; width: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: 10px; filter: contrast(1.07) saturate(.9); mask-image: radial-gradient(ellipse, black 56%, transparent 76%); }
.design-bottom { position: absolute; z-index: 4; left: 23px; right: 23px; bottom: 23px; display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #ece8ff; box-shadow: 0 11px 26px #5d68a222; padding: 14px 15px; border-radius: 16px; }
.design-mini-icon { display: grid; place-items: center; flex: 0 0 41px; height: 41px; color: #805cda; background: #f1eafd; border-radius: 12px; }
.design-mini-icon svg { width: 19px; height: 19px; }
.design-bottom strong { font-size: 13px; color: #3c4264; display: block; }
.design-bottom span { display: block; font-size: 11px; margin-top: 4px; color: #8591a7; }
.tiny-sticker { position: absolute; right: 18px; top: 58px; color: #8066bf; border: 1px solid #ae94e8a0; border-radius: 12px; transform: rotate(13deg); font-size: 10px; line-height: 1.35; letter-spacing: 1.1px; font-weight: 920; text-align: center; padding: 8px 11px; opacity: .78; }
.tiny-sticker span { color: #bba6ef; }

/* Return-loop page */
.slide-four h2 { font-size: clamp(49px, 4.6vw, 72px); }
.steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; max-width: 540px; margin-top: 18px; }
.step-tile { min-height: 132px; padding: 12px 16px 14px; position: relative; background: #fff; border: 1px solid #e4e9f4; border-radius: 16px; box-shadow: 0 5px 22px #a6b1d019; }
.step-index { position: absolute; right: 16px; top: 16px; font-size: 10px; color: #a0afc6; font-weight: 850; letter-spacing: 1px; }
.step-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; margin-bottom: 9px; }
.step-icon svg { width: 19px; height: 19px; }
.step-blue { background: #ebf2ff; color: #5c78ec; }
.step-orange { background: #fff0e5; color: #f0a14e; }
.step-cyan { background: #e4f6ff; color: #43a7d3; }
.step-green { background: #e3f8ef; color: #13b187; }
.step-tile strong { display: block; font-size: 13px; color: #35425d; }
.step-tile small { display: block; color: #8290a8; font-size: 10px; margin-top: 4px; }
.loop-visual { height: clamp(430px, 39vw, 600px); border: 7px solid #fff; background: radial-gradient(ellipse at 30% 30%, #2c5170 0%, #182d4a 67%, #132640 100%); }
.loop-visual::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#c0f6ff 1px, transparent 1px); background-size: 20px 20px; }
.loop-pictorial { position: absolute; inset: 0 0 14%; }
.loop-pictorial img { width: 100%; height: 100%; object-fit: contain; filter: saturate(1.6) contrast(1.15); mix-blend-mode: screen; }
.loop-circle-circle { position: absolute; top: 24%; right: 10%; display: grid; place-items: center; width: 48px; height: 48px; color: #aafcf2; background: #0b4a63a6; border: 1px solid #aafcf244; border-radius: 50%; animation: badgePulse 3s ease-in-out infinite; }
.loop-circle-circle svg { width: 22px; height: 22px; }
@keyframes badgePulse { 50% { box-shadow: 0 0 0 13px #35e7e90a; } }
.loop-overlay { position: absolute; z-index: 3; bottom: 22px; left: 22px; right: 22px; display: flex; gap: 10px; align-items: center; padding: 16px; border-radius: 15px; border: 1px solid #a8dff238; background: #102e46c9; backdrop-filter: blur(17px); }
.loop-dot { width: 9px; height: 9px; border-radius: 50%; background: #1be0b2; box-shadow: 0 0 0 7px #1be0b222; flex: 0 0 9px; margin: 0 8px; }
.loop-overlay strong { display: block; font-size: 14px; color: #f4ffff; }
.loop-overlay small { display: block; font-size: 11px; color: #a9cfde; margin-top: 5px; line-height: 1.5; }
.loop-metric { position: absolute; top: 21px; left: 23px; display: flex; align-items: center; gap: 12px; background: #fff; padding: 10px 15px; border-radius: 15px; box-shadow: 0 8px 26px #06132136; }
.loop-metric strong { color: #13b993; font-size: 31px; line-height: 1; letter-spacing: -1.8px; }
.loop-metric strong span { font-size: 19px; }
.loop-metric small { font-size: 9px; font-weight: 740; line-height: 1.4; color: #6c7e95; }

/* Finale and creators */
.slide-five h2 { font-size: clamp(50px, 4.75vw, 76px); }
.impact-list { display: grid; gap: 13px; margin: 18px 0 24px; }
.impact-list > div { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #3d5066; }
.impact-check { width: 25px; height: 25px; display: grid; place-items: center; background: #e8f9ef; color: #12a87d; border-radius: 50%; }
.impact-check svg { width: 14px; height: 14px; stroke-width: 2.8; }
.end-line { border-left: 3px solid #f2b24c; padding-left: 16px; color: #68768f; font-size: 15px; line-height: 1.6; font-weight: 590; max-width: 450px; }
.end-line span { color: #d98d24; font-weight: 880; }
.team-visual { height: clamp(460px, 40vw, 610px); border: 7px solid #fff; background: #eff4ff; }
.team-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 57% 24%, #d2f4e3, transparent 64%), radial-gradient(ellipse at 86% 54%, #e6ddff, transparent 64%), #f5f8ff; }
.team-visual-top { position: relative; z-index: 4; margin: 26px 27px 0; display: flex; align-items: center; justify-content: space-between; }
.team-visual-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #57718c; font-size: 10px; letter-spacing: 1.1px; font-weight: 900; }
.team-visual-eyebrow svg { color: #2dbd92; width: 17px; height: 17px; }
.team-star { color: #f4ad57; font-size: 26px; }
.team-gears-image { position: absolute; inset: 5% 2% 38%; display: grid; place-items: center; }
.team-gears-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.15) contrast(1.05); border-radius: 18px; mask-image: radial-gradient(ellipse, black 47%, transparent 75%); }
.team-panel { position: absolute; z-index: 4; bottom: 18px; left: 17px; right: 17px; background: #fff; border: 1px solid #e8edf5; padding: 19px 19px 18px; box-shadow: 0 14px 40px #283b7430; border-radius: 20px; }
.team-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid #eef0f6; color: #73839b; font-weight: 900; letter-spacing: 1.2px; font-size: 9px; }
.team-panel-head span:last-child { display: flex; align-items: center; gap: 7px; color: #10a980; }
.team-panel-head svg { width: 14px; height: 14px; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin-top: 17px; }
.person { min-width: 0; display: flex; gap: 10px; align-items: center; }
.person strong { font-size: clamp(10px, .85vw, 13px); color: #32415e; line-height: 1.4; font-weight: 830; }
.person-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 11px; font-size: 11px; font-weight: 900; }
.pa-purple { color: #7552c6; background: #eeeaff; }
.pa-pink { color: #e46f8b; background: #fff0f4; }
.pa-green { color: #16aa84; background: #e8f8f0; }
.pa-blue { color: #4e80e8; background: #edf3ff; }

/* Floating previous/next navigation */
.edge-arrow { position: absolute; z-index: 20; top: 51%; transform: translateY(-50%); width: 43px; height: 43px; display: grid; place-items: center; color: #8293a8; background: #ffffffce; border-radius: 50%; border: 1px solid #e3eaf3; box-shadow: 0 6px 25px #9caac224; transition: color .2s ease, background .2s ease, transform .2s ease; }
.edge-arrow:hover:not(:disabled) { background: #fff; color: #1aa989; transform: translateY(-50%) scale(1.08); }
.edge-arrow:disabled { opacity: .24; cursor: not-allowed; }
.edge-arrow svg { width: 19px; height: 19px; }
.edge-left { left: clamp(12px, 2.5vw, 43px); }
.edge-right { right: clamp(12px, 2.5vw, 43px); }
.bottombar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 30; height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 clamp(28px, 4.8vw, 90px); border-top: 1px solid rgba(169, 184, 202, .24); background: rgba(255,255,255,.75); backdrop-filter: blur(15px); }
.bottom-help { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #91a0b3; font-weight: 680; }
.help-star { font-size: 17px; color: #f5a74f; }
.pager { display: flex; align-items: center; gap: 15px; }
.page-current { color: #233e55; font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; }
.page-total { color: #aeb9ca; font-size: 11px; font-variant-numeric: tabular-nums; }
.page-progress { display: flex; gap: 5px; align-items: center; }
.progress-piece { background: transparent; border: 0; padding: 9px 0; width: clamp(20px, 2.55vw, 39px); height: 25px; display: grid; align-items: center; }
.progress-piece span { height: 5px; width: 100%; border-radius: 30px; background: #dee6ef; transition: background .28s ease, height .28s ease; }
.progress-piece.completed span { background: #afdccb; }
.progress-piece.selected span { height: 7px; background: #13af90; box-shadow: 0 2px 7px #12b39244; }
.bottom-controls { display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.keyboard-hint { display: flex; align-items: center; gap: 4px; color: #98a4b7; font-size: 10px; margin-right: 7px; white-space: nowrap; }
kbd { display: inline-flex; width: 19px; height: 19px; place-items: center; align-items: center; justify-content: center; background: #f4f7fa; border: 1px solid #e3e9f1; border-radius: 5px; font-size: 10px; font-family: inherit; color: #7c8ba1; }
.bottom-prev, .bottom-next { border: 1px solid #e4eaf3; border-radius: 12px; height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: transform .22s ease, background .2s ease; }
.bottom-prev { background: #fff; width: 44px; color: #63758c; }
.bottom-prev:disabled { opacity: .35; cursor: default; }
.bottom-next { border-color: #1f2d45; background: #21364f; color: #fff; gap: 13px; padding: 0 14px 0 19px; font-size: 12px; font-weight: 800; box-shadow: 0 6px 14px #2036501a; }
.bottom-next:hover, .bottom-prev:hover:not(:disabled) { transform: translateY(-2px); }
.bottom-next svg, .bottom-prev svg { width: 17px; height: 17px; transition: transform .2s ease; }

/* Mid-width desktop / small laptops */
@media (max-width: 1260px) {
  .top-center { display: none; }
  .slide { padding-left: 76px; padding-right: 76px; }
  .two-col { column-gap: 35px; }
  h1, h2 { letter-spacing: -2.7px; }
  .lead { font-size: 15px; line-height: 1.62; }
  .hero-visual, .problem-visual, .design-visual, .loop-visual, .team-visual { height: min(63vh, 520px); }
  .slide-one h1 { font-size: clamp(48px, 5vw, 66px); }
  .slide-two h2, .slide-three h2, .slide-four h2, .slide-five h2 { font-size: clamp(45px, 4.9vw, 66px); }
  .step-tile { min-height: 112px; }
}

/* Tablet portrait / mobile landscape */
@media (max-width: 890px) {
  .topbar { height: 73px; padding: 0 28px; }
  .brand { min-width: 0; }
  .build-mark { font-size: 11px; }
  #presentation { inset: 73px 0 78px; }
  .slide { padding: 25px 55px 35px; }
  .two-col { grid-template-columns: minmax(0,1fr); max-width: 600px; gap: 16px; align-content: start; }
  .words { padding: 0; }
  h1, h2 { font-size: clamp(43px, 6.8vw, 57px) !important; margin: 15px 0; letter-spacing: -2.4px; }
  .lead { max-width: 580px; font-size: 15px; line-height: 1.6; margin-bottom: 17px; }
  .visual { width: 100%; }
  .hero-visual, .problem-visual, .design-visual, .loop-visual, .team-visual { height: 400px; }
  .intro-pills { margin-bottom: 18px; }
  .cta-primary { padding: 12px 19px; }
  .micro-caption { margin-top: 13px; }
  .material-list { gap: 7px; }
  .material-item { padding: 8px 13px; }
  .material-item .material-icon { height: 37px; flex-basis: 37px; }
  .steps-grid { gap: 8px; }
  .step-tile { min-height: 103px; padding: 10px 13px; }
  .step-icon { height: 29px; width: 29px; margin-bottom: 6px; }
  .step-icon svg { width: 15px; height: 15px; }
  .step-tile small { font-size: 10px; }
  .impact-list { gap: 8px; margin-bottom: 15px; }
  .bottombar { height: 78px; padding: 0 28px; }
  .bottom-help, .keyboard-hint { display: none; }
  .bottombar { grid-template-columns: 1fr auto; }
  .pager { justify-self: start; }
  .bottom-controls { justify-self: end; }
  .edge-left { left: 6px; }
  .edge-right { right: 6px; }
  .edge-arrow { width: 38px; height: 38px; }
}

/* Phones */
@media (max-width: 560px) {
  .topbar { height: 66px; padding: 0 16px; }
  .brand { gap: 9px; }
  .brand-icon { width: 33px; height: 33px; border-radius: 10px; }
  .brand-icon > svg { width: 20px; height: 20px; }
  .brand-leaf { width: 14px; height: 14px; top: -5px; right: -5px; }
  .brand-leaf svg { width: 8px; height: 8px; }
  .brand-text strong { font-size: 15px; letter-spacing: -.7px; }
  .brand-text small { font-size: 6px; letter-spacing: 1.1px; }
  .build-mark { gap: 5px; font-size: 9px; padding: 6px 8px 6px 6px; }
  .build-mark em { font-size: 9px; }
  .build-spark { width: 19px; height: 19px; }
  .build-spark svg { width: 11px; height: 11px; }
  #presentation { inset: 66px 0 69px; }
  .slide { padding: 24px 20px 30px; }
  .slide-inner { gap: 19px; }
  .eyebrow { min-height: 26px; font-size: 8px; letter-spacing: 1.15px; padding: 6px 10px; gap: 7px; }
  .eyebrow-suffix { font-size: 8px; }
  .tiny-circle { width: 5px; height: 5px; }
  h1, h2 { font-size: clamp(37px, 10.4vw, 55px) !important; line-height: 1.09; letter-spacing: -2.35px; margin: 15px 0 12px; }
  .lead { font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; }
  .highlight-word::after { height: 7px; }
  .intro-pills { gap: 6px; margin-bottom: 12px; }
  .intro-pills span { font-size: 9px; padding: 6px 8px; }
  .intro-pills svg { width: 12px; height: 12px; }
  .cta-primary { font-size: 12px; padding: 11px 14px; border-radius: 11px; }
  .cta-primary svg { width: 17px; height: 17px; }
  .micro-caption { margin-top: 9px; font-size: 9px; }
  .visual { border-width: 5px; border-radius: 23px; }
  .hero-visual { height: 340px; }
  .hero-visual > img { width: 130%; left: -15%; height: 83%; top: 14%; }
  .hero-top-tag { top: 14px; left: 13px; font-size: 10px; padding: 5px 9px 5px 5px; }
  .hero-tag-icon { width: 23px; height: 23px; }
  .visual-number { top: 18px; right: 15px; }
  .float-caption { bottom: 14px; left: 12px; padding: 8px 10px 8px 7px; gap: 7px; }
  .float-caption strong { font-size: 11px; }
  .float-caption small { font-size: 9px; }
  .caption-icon { height: 32px; width: 32px; border-radius: 8px; }
  .caption-icon svg { width: 17px; height: 17px; }
  .floating-stamp { width: 53px; height: 53px; right: 12px; bottom: 12px; font-size: 7px; }
  .floating-stamp span { font-size: 10px; }
  .stat-row { gap: 13px; margin: 4px 0 12px; padding: 4px 0 13px; }
  .stat-number { font-size: 68px; letter-spacing: -5px; }
  .stat-description { font-size: 11px; }
  .stat-description small { font-size: 9px; margin-top: 3px; }
  .message-ribbon { font-size: 11px; }
  .problem-visual { height: 335px; }
  .problem-header { margin: 18px 8px 0; font-size: 8px; letter-spacing: 1px; }
  .problem-image-wrap { height: 68%; width: 99%; }
  .problem-bottom { left: 6px; right: 6px; bottom: 11px; gap: 1px; }
  .small-story { gap: 4px; padding: 6px 4px; border-radius: 9px; }
  .small-story strong { font-size: 8px; }
  .small-story small { font-size: 6px; letter-spacing: 0; }
  .icon-bg { flex-basis: 28px; width: 28px; height: 28px; border-radius: 8px; }
  .icon-bg svg { width: 14px; height: 14px; }
  .story-arrow { flex-basis: 14px; }
  .story-arrow svg { width: 13px; height: 13px; }
  .design-visual { height: 335px; }
  .design-subtitle { top: 16px; left: 17px; font-size: 8px; }
  .design-bottom { bottom: 10px; left: 10px; right: 10px; padding: 9px; gap: 8px; }
  .design-mini-icon { width: 34px; flex-basis: 34px; height: 34px; }
  .design-bottom strong { font-size: 10px; }
  .design-bottom span { font-size: 9px; }
  .tiny-sticker { top: 35px; right: 10px; font-size: 7px; }
  .material-item { gap: 8px; padding: 7px 10px; border-radius: 11px; }
  .material-item .material-icon { height: 34px; flex-basis: 34px; border-radius: 9px; }
  .material-item .material-icon svg { width: 18px; height: 18px; }
  .material-item strong { font-size: 11px; }
  .material-item small { font-size: 9px; margin-top: 2px; }
  .steps-grid { gap: 8px; }
  .step-tile { min-height: 105px; padding: 10px; }
  .step-index { top: 12px; right: 12px; }
  .loop-visual { height: 330px; }
  .loop-metric { padding: 7px 10px; top: 10px; left: 10px; gap: 6px; }
  .loop-metric strong { font-size: 22px; }
  .loop-metric small { font-size: 7px; }
  .loop-overlay { left: 10px; right: 10px; bottom: 10px; padding: 11px; }
  .loop-overlay strong { font-size: 11px; }
  .loop-overlay small { font-size: 9px; }
  .loop-dot { width: 7px; height: 7px; flex-basis: 7px; margin: 0 4px; }
  .impact-list { gap: 8px; margin: 9px 0 14px; }
  .impact-list > div { font-size: 11px; }
  .impact-check { width: 21px; height: 21px; }
  .end-line { font-size: 12px; margin-bottom: 0; }
  .team-visual { height: 385px; }
  .team-visual-top { margin: 14px 15px 0; }
  .team-visual-eyebrow { font-size: 8px; letter-spacing: .6px; }
  .team-gears-image { inset: 7% 3% 47%; }
  .team-panel { bottom: 9px; left: 8px; right: 8px; padding: 12px; border-radius: 15px; }
  .team-panel-head { font-size: 7px; padding-bottom: 9px; letter-spacing: .55px; }
  .team-grid { margin-top: 11px; gap: 10px 5px; }
  .person { gap: 6px; }
  .person strong { font-size: 10px; }
  .person-avatar { width: 29px; height: 29px; flex-basis: 29px; border-radius: 9px; font-size: 9px; }
  .bottombar { height: 69px; padding: 0 15px; gap: 8px; }
  .pager { gap: 8px; }
  .page-current { font-size: 12px; }
  .page-total { font-size: 9px; }
  .page-progress { gap: 4px; }
  .progress-piece { width: 19px; }
  .bottom-controls { gap: 5px; }
  .bottom-prev, .bottom-next { height: 37px; border-radius: 10px; }
  .bottom-prev { width: 36px; }
  .bottom-next { padding: 0 10px; gap: 5px; font-size: 10px; }
  .bottom-prev svg, .bottom-next svg { width: 14px; height: 14px; }
  .edge-arrow { display: none; }
}

@media (max-width: 350px) {
  .brand-text small { display: none; }
  .brand-text strong { font-size: 14px; }
  .build-mark { font-size: 8px; }
  .slide { padding-inline: 15px; }
  h1, h2 { font-size: 34px !important; }
  .bottom-next { font-size: 9px; }
  .page-progress .progress-piece { width: 14px; }
}
@media (max-height: 740px) and (min-width: 891px) {
  .topbar { height: 68px; }
  #presentation { inset: 68px 0 70px; }
  .bottombar { height: 70px; }
  h1, h2 { margin-top: 14px; margin-bottom: 12px; font-size: clamp(44px, 4vw, 62px) !important; }
  .lead { font-size: 14px; line-height: 1.54; margin-bottom: 12px; }
  .hero-visual, .problem-visual, .design-visual, .loop-visual, .team-visual { height: min(69vh, 485px); }
  .micro-caption { margin-top: 13px; }
  .intro-pills { margin-bottom: 17px; }
  .stat-number { font-size: 65px; }
  .material-item { padding-block: 8px; }
  .step-tile { min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Keep the complete slide illustration and team credits within a phone-sized view. */
@media (max-width: 560px) {
  .problem-visual { height: 254px; }
  .problem-image-wrap { height: 65%; }
  .design-visual { height: 276px; }
  .design-image { height: 76%; top: 10%; }
  .loop-visual { height: 246px; }
  .loop-pictorial { inset: 1% 0 14%; }
  .team-visual { height: 298px; }
  .team-gears-image { inset: 10% 3% 45%; }
  .team-panel { padding: 10px 12px; bottom: 7px; }
  .team-grid { gap: 7px 5px; margin-top: 9px; }
}