/* ---------- In-view animation base ---------- */
.anim { opacity: 0; translate: 0 34px; transition: opacity .8s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), translate .8s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.anim.is-in { opacity: 1; translate: none; }
.h2.reveal { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; transition: clip-path .9s cubic-bezier(.2,.8,.2,1); }
.h2.reveal.is-in { clip-path: inset(0 0 -10% 0); }

/* ---------- What we do: stacking cards ---------- */
.blocks { gap: 28px; padding-bottom: 40px; }
.block { position: sticky; top: calc(92px + var(--i) * 16px); grid-template-columns: 46% 1fr; gap: 36px; padding: 20px; border-radius: 26px; box-shadow: 0 1px 2px rgba(13,20,36,.04), 0 24px 50px -24px rgba(13,20,36,.28); transform-origin: 50% 0; will-change: transform; }
.block__art { min-height: 260px; background: linear-gradient(140deg, #e3edfb, #f3f7fc); border: 1px solid #e3eaf4; }
.block__body { display: flex; flex-direction: column; justify-content: center; padding: 8px 8px 4px 0; }
.block h3 { font-size: clamp(22px, 2.4vw, 30px); margin-top: 0; }
.tags span { transition: border-color .2s, color .2s, transform .2s; }
.tags span:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.block__cta span { transition: transform .25s; }
.block__cta:hover span { transform: translateX(6px); }

/* ---------- Illustrations ---------- */
.ill { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.ill img { display: block; }
.anim .ill [style*="--d"], .anim .ill-draw, .anim .ill b, .anim .ill-wire b { animation-play-state: paused; }
.is-in .ill [style*="--d"], .is-in .ill-draw, .is-in .ill b, .is-in .ill-wire b { animation-play-state: running; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes barIn { from { width: 0; } }
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes travel { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes floaty { 50% { translate: 0 -6px; } }
@keyframes tick { from { background: #fff; } to { background: var(--blue); } }

.ill--acq { align-content: center; gap: 0; }
.ill-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.ill-tabs span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); }
.ill-tabs i, .ill-thumbs + .ill-test small::before { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ill-links { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 22px; }
.ill-links i { justify-self: center; width: 2px; background: repeating-linear-gradient(var(--blue) 0 3px, transparent 3px 6px); }
.ill-panel { display: grid; grid-template-columns: auto 1fr; gap: 14px; width: 100%; padding: 12px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); }
.ill-thumbs { display: flex; }
.ill-thumbs img { width: 74px; height: 92px; object-fit: cover; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 10px 20px -8px rgba(6,19,48,.5); }
.ill-thumbs img + img { margin-left: -14px; rotate: 6deg; }
.ill-test { display: grid; align-content: center; gap: 6px; }
.ill-test small { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ill b { display: block; height: 7px; width: var(--w); border-radius: 4px; background: var(--blue); animation: barIn 1.2s cubic-bezier(.2,.8,.2,1) both; }
.ill b:nth-of-type(2) { background: #7fb2ff; animation-delay: .15s; }
.ill b:nth-of-type(3) { background: #bcd6ff; animation-delay: .3s; }
.ill svg { width: 100%; height: 34px; }
.ill-draw { stroke-dasharray: 400; animation: draw 1.6s .3s ease-out both; }

.ill--fan { position: absolute; }
.ill--fan img { position: absolute; left: 50%; top: 50%; width: 112px; aspect-ratio: 9/16; margin: -100px 0 0 -56px; object-fit: cover; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 18px 30px -12px rgba(6,19,48,.55); transform: translateX(var(--x)) rotate(var(--r)); animation: fanIn 1s cubic-bezier(.2,.8,.2,1) var(--d) both; transition: transform .4s; }
@keyframes fanIn { from { transform: translateX(0) rotate(0) scale(.85); opacity: 0; } }
.block:hover .ill--fan img { transform: translateX(calc(var(--x) * 1.15)) rotate(calc(var(--r) * 1.3)) translateY(-6px); }
.ill-badge { position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; animation: popIn .6s var(--d) both; }

.ill--flow { align-content: center; gap: 26px; }
.ill-nodes { display: flex; align-items: center; width: 100%; }
.ill-node { display: grid; justify-items: center; gap: 8px; animation: popIn .6s var(--d) both; }
.ill-node span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--blue); font-size: 20px; box-shadow: var(--shadow); border: 1px solid #d8e4f5; }
.ill-wire { position: relative; flex: 1; height: 2px; margin: 0 6px 22px; background: #bcd3f5; }
.ill-wire b { position: absolute; top: -3px; width: 8px !important; height: 8px; border-radius: 50%; background: var(--blue); animation: travel 2.2s linear infinite !important; }
.ill-foot { display: flex; justify-content: space-between; width: 100%; }
.ill-foot span { padding: 6px 10px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }

.ill--report { overflow: hidden; }
.ill-shot { width: 74%; border-radius: 14px; box-shadow: 0 24px 40px -18px rgba(6,19,48,.6); rotate: -3deg; transition: rotate .5s, scale .5s; }
.block:hover .ill-shot { rotate: 0deg; scale: 1.03; }
.ill-pill { position: absolute; padding: 8px 14px; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 900; background: linear-gradient(135deg, #1673ff, #4fc3ff); box-shadow: 0 14px 26px -10px rgba(22,115,255,.6); animation: popIn .6s var(--d) both, floaty 4s ease-in-out 1s infinite; }
.ill-pill small { font-size: 10px; font-weight: 700; opacity: .85; }
.ill-pill--b { background: linear-gradient(135deg, #16a34a, #4ade80); box-shadow: 0 14px 26px -10px rgba(22,163,74,.6); }

.ill--check { grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: stretch; }
.ill-card { padding: 12px 14px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); text-align: left; }
.ill-card small { display: block; margin-bottom: 8px; font-size: 10px; letter-spacing: .04em; }
.ill-card p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 0; border-top: 1px solid #eef2f7; animation: popIn .5s var(--d) both; }
.ill--check .ill-card p i { width: 13px; height: 13px; border-radius: 4px; border: 2px solid var(--blue); animation: tick .3s calc(var(--d) + 500ms) both; animation-play-state: inherit; }
.ill-card--side { display: grid; align-content: center; gap: 8px; background: #f7faff; }

.ill--build { align-content: center; gap: 14px; }
.ill-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.ill-tiles div { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 8px; background: #fff; border: 1.5px solid #cfe0fb; border-radius: 12px; animation: popIn .5s var(--d) both; }
.ill-tiles span { color: var(--blue); font-size: 16px; }
.ill-tiles em { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: #fff; font-style: normal; font-size: 11px; }
.ill-note { margin: 0; width: 100%; padding: 8px; border-radius: 8px; background: #fff; color: var(--blue); text-align: center; }

.ill--launch { grid-template-columns: 38% 1fr; gap: 12px; align-items: stretch; }
.ill--launch > img { width: 100%; height: 100%; max-height: 170px; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); }
.ill--launch .ill-card p { justify-content: space-between; }
.ill--launch .ill-card p i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(22,115,255,.15); }
.ill-orbit { position: relative; height: 50px; margin: 6px 10px; border: 2px dashed #9cc0f5; border-radius: 50%; }
.ill-orbit i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--blue); offset-path: ellipse(50% 50% at 50% 50%); animation: orbit 3s linear infinite; }
@keyframes orbit { to { offset-distance: 100%; } }
.ill-row { justify-content: space-between; border-top: 0 !important; }

/* ---------- Dark creatives + showcase ---------- */
.dark-sec { padding: clamp(72px, 9vw, 110px) 0; background: radial-gradient(ellipse at 50% 0%, #10203f, #07090f 60%); color: #fff; overflow: hidden; }
.dark-sec--tight { padding-top: 40px; background: #07090f; }
.h2--light { color: #fff; }
.lead--light { color: #a9b6cc; }
.plus { color: var(--blue); font-weight: 800; }
.cmarq { overflow: hidden; margin-top: 18px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.cmarq + .cmarq { margin-top: 18px; }
.cmarq__track { display: flex; gap: 18px; width: max-content; animation: scroll 60s linear infinite; }
.cmarq--rev .cmarq__track { animation-direction: reverse; animation-duration: 68s; }
.cmarq:hover .cmarq__track { animation-play-state: paused; }
.ccard { position: relative; flex: none; width: clamp(180px, 17vw, 250px); aspect-ratio: 4/5; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #111; transition: transform .35s, box-shadow .35s; }
.ccard img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ccard span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: rgba(22,115,255,.9); color: #fff; opacity: 0; scale: .6; transition: opacity .3s, scale .3s; }
.ccard:hover { transform: translateY(-8px); box-shadow: 0 24px 40px -16px rgba(22,115,255,.6); }
.ccard:hover img { transform: scale(1.06); }
.ccard:hover span { opacity: 1; scale: 1; }

.meta-row { display: flex; justify-content: center; gap: 0; margin: -12px 0 36px; font-size: 12px; color: #c5d0e0; }
.meta-row span { padding: 0 12px; border-left: 1px solid #2a3446; }
.meta-row span:first-child { border-left: 0; }
.show { overflow: hidden; display: grid; gap: 22px; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.show__track { display: grid; gap: 22px; }
.show__row { display: flex; align-items: center; gap: 14px; width: max-content; will-change: transform; }
.scard { position: relative; flex: none; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #111; transition: transform .35s, box-shadow .35s; }
.scard--a { width: 120px; height: 200px; }
.scard--b { width: 200px; height: 200px; }
.scard--c { width: 150px; height: 200px; }
.scard img { width: 100%; height: 100%; object-fit: cover; }
.scard span { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(7,9,15,.75); font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s; }
.scard:hover { transform: scale(1.05); box-shadow: 0 0 0 2px var(--blue), 0 20px 40px -14px rgba(22,115,255,.6); z-index: 2; }
.scard:hover span { opacity: 1; }
.show__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 36px; }
.show__bar p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #c5d0e0; }
.show__bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.show__btns { display: flex; gap: 8px; }
.sbtn { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #2a3446; background: #11161f; color: #fff; font-size: 13px; font-weight: 700; transition: background .2s, border-color .2s; }
.sbtn:hover { background: #1a2232; border-color: var(--blue); }
.sbtn--sq { width: 40px; padding: 0; }

/* ---------- Process steps with illustrations ---------- */
.steps { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.step { padding: 22px; border-radius: 24px; transition: box-shadow .3s, translate .8s cubic-bezier(.2,.8,.2,1) var(--d, 0ms), opacity .8s var(--d, 0ms); }
.step:hover { box-shadow: 0 30px 60px -28px rgba(22,115,255,.45); }
.step h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.step .step__n { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; flex: none; }
.step__art { position: relative; height: 190px; margin-bottom: 16px; border-radius: 16px; background: linear-gradient(140deg, #e3edfb, #f3f7fc); border: 1px solid #e3eaf4; overflow: hidden; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #9cc0f5; animation: dotPulse 1.6s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; } .dots i:nth-child(4) { animation-delay: .45s; } .dots i:nth-child(5) { animation-delay: .6s; }
@keyframes dotPulse { 50% { background: var(--blue); transform: scale(1.3); } }

/* ---------- Sticky bottom CTA bar (all sizes, like the reference) ---------- */
.sticky-cta { display: grid; left: 50%; right: auto; bottom: 14px; width: min(1180px, calc(100% - 24px)); translate: -50% 0; grid-template-columns: 2fr 1fr 1fr; gap: 6px; padding: 6px; }
.sticky-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 11px; font-size: 14px; font-weight: 700; }
.sticky-cta__main { background: var(--blue); color: #fff; }
.sticky-cta__main:hover { background: var(--blue-2); }
.sticky-cta__alt { color: var(--ink-2); border: 1px solid var(--line); background: #fff; }
.sticky-cta__alt:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 960px) {
  .block { position: relative; top: auto; grid-template-columns: 1fr; gap: 18px; }
  .block__art { min-height: 230px; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ill--check, .ill--launch { grid-template-columns: 1fr; }
  .ill--launch > img { display: none; }
  .ill--check .ill-card--side { display: none; }
  .ill-tabs span { padding: 8px 4px; font-size: 10px; }
  .scard--a { width: 96px; height: 160px; } .scard--b { width: 160px; height: 160px; } .scard--c { width: 120px; height: 160px; }
  .show__bar { flex-direction: column; align-items: flex-start; }
  .sticky-cta { grid-template-columns: 1fr 1fr; }
  .sticky-cta__main { grid-column: 1 / -1; }
  .sticky-cta a { padding: 11px; font-size: 13px; }
  .sticky-cta__alt:last-child { display: none; }
  .sticky-cta { grid-template-columns: 1.4fr 1fr; }
  .sticky-cta__main { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; translate: none; }
  .block { transform: none !important; filter: none !important; }
}