/* Landing page only: hero story animation, ticker, before/after, card art, team. */

.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-grid { grid-template-columns: 1.1fr 1fr; }

/* Rotating business word in the headline */
.rot { display: block; position: relative; height: 1.1em; overflow: hidden; color: var(--dp-color-accent); padding-bottom: .1em; box-sizing: content-box; }
.rot-word { display: inline-block; position: relative; }
.rot-word::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .09em; border-radius: 99px;
  background: currentColor; opacity: .25; transform-origin: left; transform: scaleX(var(--u, 1));
  transition: transform 700ms var(--ease-out);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hero stage ---------- */
.stage-wrap { justify-self: end; width: 100%; max-width: 500px; }
.stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1.06; container-type: inline-size;
  line-height: 1.3; --px: 0; --py: 0;
}
.stage > * { font-size: 2.7cqw; }
.stage-caption { margin: 10px 0 0; text-align: right; font-size: var(--dp-typography-label); color: var(--dp-color-ink-secondary); letter-spacing: .04em; }

.ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.ring.r1 { width: 66cqw; height: 66cqw; border: 1px solid var(--dp-color-rule); }
.ring.r2 { width: 94cqw; height: 94cqw; border: 1px dashed #cfd5df; animation: spin 42s linear infinite; }
.ring.r2::before { content: ""; position: absolute; top: -0.9cqw; left: 50%; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--dp-color-accent); box-shadow: 0 0 0 1.2cqw rgba(7,76,224,.12); }
.glow { position: absolute; left: 50%; top: 48%; width: 70cqw; height: 70cqw; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(7,76,224,.16), rgba(7,76,224,0) 65%); pointer-events: none; }

/* Phone */
.phone {
  position: absolute; left: 29cqw; top: 9cqw; width: 42cqw; height: 86cqw; padding: 1.3cqw;
  background: #16191f; border-radius: 6.6cqw;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(22,25,31,.35), inset 0 0 0 .35cqw #2b303a;
  translate: calc(var(--px) * -4px) calc(var(--py) * -4px);
  transition: translate 300ms var(--ease-out);
}
.screen { position: relative; height: 100%; border-radius: 5.4cqw; overflow: hidden; background: #fff; }
.notch { position: absolute; top: 1.4cqw; left: 50%; translate: -50% 0; width: 11cqw; height: 2.6cqw; border-radius: 99px; background: #16191f; z-index: 5; }
.statusbar { height: 5.6cqw; display: flex; align-items: center; padding: .8cqw 4cqw 0; font-size: .72em; font-weight: 600; }

/* Before: a business nobody can find */
.scr-before { position: absolute; inset: 0; background: #eef0f3; color: #7d8592; }
.scr-before .inner { padding: 0 3cqw; }
.search { display: flex; align-items: center; gap: 1.6cqw; background: #fff; border-radius: 99px; padding: 1.6cqw 2.6cqw; font-size: .8em; color: #5d6470; margin: 1.5cqw 0 3cqw; }
.search svg { width: 2.6cqw; height: 2.6cqw; flex: none; }
.ghost-card { background: #fff; border-radius: 2.6cqw; padding: 2.6cqw; }
.ghost-img { height: 18cqw; border-radius: 1.8cqw; margin-bottom: 2.2cqw; background: repeating-linear-gradient(45deg, #e6e9ee 0 1.2cqw, #f1f3f6 1.2cqw 2.4cqw); display: grid; place-items: center; font-size: .7em; }
.ghost-card b { display: block; color: #5d6470; font-size: .95em; margin-bottom: 1.4cqw; }
.ghost-row { display: flex; align-items: center; gap: 1.4cqw; font-size: .74em; padding: .9cqw 0; border-top: 1px solid #eef0f3; }
.ghost-row i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; border: .3cqw solid #c3c8d1; flex: none; position: relative; }
.ghost-row i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; height: .3cqw; background: #c3c8d1; translate: -50% -50%; rotate: -45deg; }
.ghost-lines { margin-top: 3cqw; display: grid; gap: 1.6cqw; }
.ghost-lines span { height: 1.6cqw; border-radius: 99px; background: #dfe2e7; }
.ghost-lines span:nth-child(2) { width: 70%; }
.ghost-lines span:nth-child(3) { width: 85%; }

/* After: their new website */
.scr-after { position: absolute; inset: 0; background: #fff; color: #16191f; clip-path: inset(0 0 100% 0); }
.site-nav { display: flex; align-items: center; gap: 1.4cqw; padding: .4cqw 3cqw 1.8cqw; font-weight: 700; font-size: .82em; }
.site-nav .dot { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--biz); }
.site-nav .burger { margin-left: auto; width: 3cqw; height: 1.8cqw; border-top: .35cqw solid #16191f; border-bottom: .35cqw solid #16191f; position: relative; }
.site-hero { margin: 0 2.4cqw; height: 25cqw; border-radius: 2.6cqw; background: linear-gradient(135deg, var(--biz-light), var(--biz)); display: grid; place-items: center; position: relative; overflow: hidden; }
.site-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.35), transparent 45%); }
.site-hero svg { width: 11cqw; height: 11cqw; color: #fff; display: none; }
.stage[data-biz="bakery"] .ico-bakery, .stage[data-biz="boutique"] .ico-boutique, .stage[data-biz="florist"] .ico-florist,
.stage[data-biz="bookshop"] .ico-bookshop, .stage[data-biz="wine"] .ico-wine { display: block; }
.site-body { padding: 2.6cqw 3cqw 0; }
.site-body h4 { margin: 0 0 1.2cqw; font: 700 1.08em/1.15 var(--font-display); letter-spacing: -.02em; }
.site-body .bar { height: 1.3cqw; border-radius: 99px; background: #e9ecf0; margin-bottom: 1.2cqw; }
.site-body .bar.short { width: 64%; }
.site-btn { display: inline-flex; align-items: center; margin: 1.2cqw 0 2cqw; padding: 1.5cqw 3.2cqw; border-radius: 1.4cqw; background: var(--biz); color: #fff; font-weight: 600; font-size: .78em; transition: transform 120ms ease-out, filter 120ms; }
.site-btn.press { transform: scale(.92); filter: brightness(1.15); }
.site-rating { font-size: .72em; color: #454c58; display: flex; align-items: center; gap: 1cqw; }
.stars { color: #f0a020; letter-spacing: .05em; }
.site-list { margin-top: 2cqw; display: grid; gap: 1.6cqw; }
.site-item { display: grid; grid-template-columns: 6.4cqw 1fr auto; gap: 1.8cqw; align-items: center; }
.site-item .thumb { height: 6.4cqw; border-radius: 1.4cqw; background: var(--biz-soft); }
.site-item .bar { margin: 0; }
.site-item .price { width: 5cqw; height: 2.2cqw; border-radius: 99px; background: var(--biz-soft); }

.scan { position: absolute; left: 0; right: 0; top: 0; height: .5cqw; background: var(--dp-color-accent); box-shadow: 0 0 3cqw 1.2cqw rgba(7,76,224,.45); opacity: 0; z-index: 4; }

.cursor { position: absolute; left: 0; top: 0; width: 5.4cqw; z-index: 6; opacity: 0; translate: 32cqw 80cqw; filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.3)); }
.cursor.click::after { content: ""; position: absolute; left: -2cqw; top: -2cqw; width: 4cqw; height: 4cqw; border-radius: 50%; border: .4cqw solid var(--dp-color-accent); animation: ripple 500ms ease-out forwards; }

/* Floating cards */
.fc {
  position: absolute; z-index: 3; background: #fff; border: 1px solid var(--dp-color-rule); border-radius: 2.6cqw;
  padding: 2.2cqw 2.6cqw; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(22,25,31,.25);
  opacity: 0; transform: translateY(2.4cqw) scale(.92);
  transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-spring), translate 300ms var(--ease-out);
}
.fc small { display: block; color: var(--dp-color-ink-secondary); font-size: .78em; }
.fc b { display: block; font-size: .92em; line-height: 1.25; }
.fc .row { display: flex; align-items: center; gap: 2cqw; }
.fc .badge-ic { flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 1.8cqw; display: grid; place-items: center; background: #e8efff; color: var(--dp-color-accent); }
.fc .badge-ic svg { width: 3.6cqw; height: 3.6cqw; }
.fc-map { left: 0; top: 4cqw; width: 37cqw; translate: calc(var(--px) * 10px) calc(var(--py) * 8px); }
.fc-map .open { color: #0a7a4b; font-weight: 600; }
.fc-ad { left: 0; top: 56cqw; width: 34cqw; translate: calc(var(--px) * 14px) calc(var(--py) * 10px); }
.fc-ad .spons { font-size: .66em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-color-accent); margin-bottom: .6cqw; }
.fc-ad .thumb { height: 9cqw; border-radius: 1.6cqw; margin-top: 1.4cqw; background: linear-gradient(135deg, var(--biz-light), var(--biz)); }
.fc-book { right: 0; top: 16cqw; width: 33cqw; translate: calc(var(--px) * 12px) calc(var(--py) * 12px); }
.fc-book .badge-ic { background: var(--dp-color-accent); color: #fff; }
.fc-review { right: 1cqw; top: 41cqw; width: 29cqw; translate: calc(var(--px) * 8px) calc(var(--py) * 6px); }
.fc-review .stars { font-size: 1.1em; }
.fc-chart { right: 0; top: 70cqw; width: 42cqw; translate: calc(var(--px) * 16px) calc(var(--py) * 12px); }
.chart { display: flex; align-items: flex-end; gap: 1.3cqw; height: 13cqw; margin-top: 1.6cqw; position: relative; }
.chart i { flex: 1; border-radius: .8cqw .8cqw .3cqw .3cqw; background: #d5d9e1; transform-origin: bottom; transform: scaleY(0); transition: transform 700ms var(--ease-spring); }
.chart i.up { background: linear-gradient(to top, #3d7bff, var(--dp-color-accent)); }
.chart .split { width: 0; align-self: stretch; border-left: 1px dashed #b9c0cc; margin: 0 .4cqw; }
.chart-key { display: flex; justify-content: space-between; font-size: .66em; color: var(--dp-color-ink-secondary); margin-top: .8cqw; }

/* Story states */
.stage.build .scan { animation: scan 1100ms cubic-bezier(.45,0,.25,1) forwards; }
.stage.build .scr-after { transition: clip-path 1100ms cubic-bezier(.45,0,.25,1); clip-path: inset(0 0 0 0); }
.stage.live .fc-map, .stage.live .fc-ad, .stage.live .fc-review, .stage.live .fc-chart,
.stage.booked .fc-book { opacity: 1; transform: none; }
.stage.live .fc-ad { transition-delay: 160ms; }
.stage.live .fc-review { transition-delay: 320ms; }
.stage.live .fc-chart { transition-delay: 480ms; }
.stage.live .chart i { transform: scaleY(1); }
.stage.live .chart i:nth-child(n+5) { transition-delay: 700ms; }
.stage.live .chart i:nth-child(n+6) { transition-delay: 820ms; }
.stage.live .chart i:nth-child(n+7) { transition-delay: 940ms; }
.stage.live .chart i:nth-child(n+8) { transition-delay: 1060ms; }
.stage.pointing .cursor { opacity: 1; translate: var(--cx) var(--cy); transition: translate 900ms cubic-bezier(.5,0,.2,1), opacity 300ms; }
.stage.out .fc { opacity: 0; transform: translateY(-1.6cqw) scale(.96); transition-delay: 0ms; transition-duration: 380ms; }
.stage.out .cursor { opacity: 0; transition: opacity 250ms; }
.stage.out .screen > :not(.notch) { opacity: 0; transition: opacity 380ms; }
.stage.instant, .stage.instant * { transition: none !important; }
/* No JS / reduced motion: show the finished story */
.stage.static .scr-after { clip-path: none; }
.stage.static .fc { opacity: 1; transform: none; }
.stage.static .chart i { transform: none; }

/* Business themes (inside the illustration only) */
.stage[data-biz="bakery"]     { --biz: #b65d2a; --biz-light: #e9a066; --biz-soft: #f6e6da; }
.stage[data-biz="boutique"]   { --biz: #3b4a6b; --biz-light: #8a9bc4; --biz-soft: #e3e8f3; }
.stage[data-biz="florist"]    { --biz: #a14468; --biz-light: #e597b3; --biz-soft: #f6e1e9; }
.stage[data-biz="bookshop"]   { --biz: #74512f; --biz-light: #c49a6c; --biz-soft: #f0e7dc; }
.stage[data-biz="wine"]       { --biz: #7a2340; --biz-light: #c7708d; --biz-soft: #f3e0e6; }

/* Hero background: dot grid with a glow that follows the pointer */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(22,25,31,.10) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000 20%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 35%), rgba(7,76,224,.07), transparent 60%);
}

/* ---------- Ticker ---------- */
.ticker { margin-top: 56px; padding: 18px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { font: 700 clamp(1.4rem, 2.6vw, 2rem)/1 var(--font-display); letter-spacing: -.03em; color: #b9bfca; padding: 0 22px; white-space: nowrap; transition: color 200ms var(--ease-out); }
.ticker span:hover { color: var(--dp-color-ink); }
.ticker span.sep { color: var(--dp-color-accent); padding: 0; font-size: 1rem; align-self: center; }

/* ---------- Service card art ---------- */
.art { height: 128px; margin: -8px -8px 22px; border-radius: 8px; background: var(--dp-color-ground-muted); position: relative; overflow: hidden; }
/* Website: a page that builds itself */
.art-web .win { position: absolute; left: 18%; right: 18%; top: 18px; bottom: -6px; background: #fff; border-radius: 8px 8px 0 0; box-shadow: var(--shadow); padding: 18px 12px 0; }
.art-web .win::before { content: ""; position: absolute; left: 10px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #d5d9e1; box-shadow: 8px 0 #d5d9e1, 16px 0 #d5d9e1; }
.art-web .blk { height: 34px; border-radius: 5px; background: linear-gradient(135deg, #7ea2f5, var(--dp-color-accent)); transform-origin: left; }
.art-web .ln { height: 6px; border-radius: 9px; background: #e3e6eb; margin-top: 8px; transform-origin: left; }
.art-web .ln:nth-of-type(3) { width: 70%; }
.art-web .cta { width: 34%; height: 12px; border-radius: 4px; background: var(--dp-color-accent); margin-top: 10px; transform-origin: left; }
.card.in .art-web .win > *, .card:hover .art-web .win > * { animation: grow-x 700ms var(--ease-out) both; }
.card:hover .art-web .win > * { animation-name: grow-x2; }
.art-web .win > :nth-child(2) { animation-delay: 120ms !important; }
.art-web .win > :nth-child(3) { animation-delay: 220ms !important; }
.art-web .win > :nth-child(4) { animation-delay: 360ms !important; }
/* Advertising: reach rings pulsing out from a pin */
.art-ads .pulse { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid var(--dp-color-accent); opacity: 0; }
.card.in .art-ads .pulse { animation: reach 2.8s var(--ease-out) infinite; }
.art-ads .pulse:nth-child(2) { animation-delay: .9s !important; }
.art-ads .pulse:nth-child(3) { animation-delay: 1.8s !important; }
.art-ads .core { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--dp-color-accent); box-shadow: 0 6px 16px -6px rgba(7,76,224,.7); display: grid; place-items: center; color: #fff; }
.art-ads .core svg { width: 15px; height: 15px; }
.art-ads .who { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: var(--shadow); opacity: 0; }
.art-ads .who::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #c7d3ee; }
.art-ads .who:nth-of-type(1) { left: 24%; top: 26%; } .art-ads .who:nth-of-type(2) { right: 22%; top: 20%; } .art-ads .who:nth-of-type(3) { right: 30%; bottom: 16%; } .art-ads .who:nth-of-type(4) { left: 30%; bottom: 14%; }
.card.in .art-ads .who { animation: pop-in 500ms var(--ease-spring) both; }
.art-ads .who:nth-of-type(2) { animation-delay: 250ms !important; } .art-ads .who:nth-of-type(3) { animation-delay: 500ms !important; } .art-ads .who:nth-of-type(4) { animation-delay: 750ms !important; }
/* Presence: a pin drops onto a map, then rating appears */
.art-map { background-color: #eef1f4; background-image: linear-gradient(#e2e6eb 1px, transparent 1px), linear-gradient(90deg, #e2e6eb 1px, transparent 1px); background-size: 24px 24px; }
.art-map .road { position: absolute; background: #fff; }
.art-map .road.h { left: 0; right: 0; top: 58%; height: 10px; }
.art-map .road.v { top: 0; bottom: 0; left: 38%; width: 10px; rotate: 12deg; }
.art-map .pin { position: absolute; left: 50%; top: 22%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--dp-color-accent); box-shadow: -2px 4px 10px -2px rgba(7,76,224,.6); }
.art-map .pin::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.art-map .shadow { position: absolute; left: 50%; top: 52%; width: 18px; height: 6px; margin-left: -9px; border-radius: 50%; background: rgba(22,25,31,.18); }
.art-map .chip { position: absolute; left: calc(50% + 22px); top: 18%; background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.art-map .chip .stars { font-size: 11px; }
.card.in .art-map .pin, .card:hover .art-map .pin { animation: drop 800ms cubic-bezier(.3,1.4,.5,1) both; }
.card:hover .art-map .pin { animation-name: drop2; }
.card.in .art-map .shadow { animation: shadow-in 800ms ease-out both; }
.card.in .art-map .chip, .card:hover .art-map .chip { animation: pop-in 500ms var(--ease-spring) 650ms both; }
.card:hover .art-map .chip { animation-name: pop-in2; }

/* ---------- Before / after ---------- */
.ba-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.ba { position: relative; aspect-ratio: 4 / 3.3; border-radius: var(--dp-radius-panel); overflow: hidden; border: 1px solid var(--dp-color-rule); box-shadow: 0 2px 4px rgba(22,25,31,.04), 0 24px 48px -24px rgba(22,25,31,.3); container-type: inline-size; user-select: none; --pos: 50%; }
.ba > * { font-size: 2.6cqw; }
.ba-layer { position: absolute; inset: 0; padding: 5cqw 5cqw 0; }
.ba-before { background: #f3f4f6; }
.ba-after { background: #fff; clip-path: inset(0 0 0 var(--pos)); }
.ba .q { display: flex; align-items: center; gap: 2cqw; background: #fff; border: 1px solid var(--dp-color-rule); border-radius: 99px; padding: 2cqw 3.4cqw; font-size: .95em; margin-bottom: 4cqw; color: var(--dp-color-ink-secondary); }
.ba .q svg { width: 3cqw; height: 3cqw; }
.ba-before .res { background: #fff; border-radius: 2cqw; padding: 3.6cqw; color: #8a919d; }
.ba-before .res b { color: #5d6470; font-size: 1.15em; display: block; margin-bottom: 1cqw; }
.ba-before .res p { margin: .6cqw 0; font-size: .92em; }
.ba-before .faded { margin-top: 3cqw; display: grid; gap: 2cqw; }
.ba-before .faded span { height: 2.4cqw; border-radius: 99px; background: #e2e5ea; }
.ba-before .faded span:nth-child(2) { width: 60%; } .ba-before .faded span:nth-child(3) { width: 80%; }
.ba-after .ad { border: 1px solid var(--dp-color-rule); border-radius: 2cqw; padding: 2.6cqw 3.4cqw; margin-bottom: 3cqw; }
.ba-after .ad small { font-weight: 700; font-size: .72em; letter-spacing: .08em; color: var(--dp-color-accent); }
.ba-after .ad b { display: block; font-size: 1.05em; }
.ba-after .ad span { font-size: .85em; color: var(--dp-color-ink-secondary); }
.ba-after .rich { border: 1px solid var(--dp-color-rule); border-radius: 2cqw; overflow: hidden; }
.ba-after .photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1cqw; height: 17cqw; }
.ba-after .photos i { background: linear-gradient(135deg, #e597b3, #a14468); }
.ba-after .photos i:nth-child(2) { background: linear-gradient(135deg, #f3c6d6, #c5708f); }
.ba-after .photos i:nth-child(3) { background: linear-gradient(135deg, #b9d4b0, #5f8f5a); }
.ba-after .info { padding: 3cqw 3.4cqw; }
.ba-after .info b { font: 700 1.3em/1.2 var(--font-display); letter-spacing: -.02em; display: block; }
.ba-after .info p { margin: .8cqw 0 0; font-size: .9em; color: var(--dp-color-ink-secondary); }
.ba-after .open { color: #0a7a4b; font-weight: 600; }
.ba-after .acts { display: flex; gap: 1.6cqw; margin-top: 2.6cqw; flex-wrap: wrap; }
.ba-after .acts span { padding: 1.2cqw 2.6cqw; border-radius: 99px; background: #e8efff; color: var(--dp-color-accent); font-weight: 600; font-size: .85em; }
.ba-after .acts span:first-child { background: var(--dp-color-accent); color: #fff; }
.ba-tag { position: absolute; top: 3cqw; z-index: 2; padding: .8cqw 2.2cqw; border-radius: 99px; font-size: .78em; font-weight: 600; background: rgba(22,25,31,.75); color: #fff; pointer-events: none; }
.ba-tag.b { left: 3cqw; } .ba-tag.a { right: 3cqw; background: var(--dp-color-accent); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(22,25,31,.12); z-index: 2; pointer-events: none; }
.ba-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--dp-color-accent); display: grid; place-items: center; font: 700 16px/1 var(--font-body); letter-spacing: 2px;
  box-shadow: 0 4px 14px rgba(22,25,31,.22); transition: transform 200ms var(--ease-spring);
}
.ba:hover .ba-handle::after { transform: scale(1.08); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.ba:has(input:focus-visible) { outline: 2px solid var(--dp-color-accent); outline-offset: 3px; }
.ba.hinting .ba-after, .ba.hinting .ba-handle { transition: clip-path 900ms var(--ease-out), left 900ms var(--ease-out); }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dp-spacing-grid-gap); margin-top: 44px; }
.person { text-align: left; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
  font: 700 1.5rem/1 var(--font-display); color: #fff; background: linear-gradient(135deg, #5a8cff, var(--dp-color-accent));
  box-shadow: 0 0 0 5px #e8efff; transition: transform 360ms var(--ease-spring), box-shadow 300ms var(--ease-out);
}
.person:nth-child(2) .avatar { background: linear-gradient(135deg, #3b4252, #16191f); box-shadow: 0 0 0 5px #e6e8ec; }
.person:nth-child(3) .avatar { background: linear-gradient(135deg, #7fa6ff, #2e63e6); }
.person:hover .avatar { transform: rotate(-8deg) scale(1.06); }
.person .role { font-size: var(--dp-typography-metadata); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-color-accent); margin-bottom: 8px; }
.person h3 { margin-bottom: 4px; }
.person .subtitle { margin: 0 0 8px; font-size: var(--dp-typography-metadata); font-weight: 500; color: var(--dp-color-ink-secondary); }
.signoff { margin-top: 36px; font: 600 1.25rem/1.4 var(--font-display); letter-spacing: -.01em; max-width: 720px; }
.signoff span { color: var(--dp-color-accent); }

@keyframes spin { to { rotate: 360deg; } }
@keyframes scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes grow-x { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes grow-x2 { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes reach { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes drop { 0% { translate: 0 -90px; opacity: 0; } 60% { opacity: 1; } 100% { translate: 0 0; } }
@keyframes drop2 { 0% { translate: 0 -40px; } 100% { translate: 0 0; } }
@keyframes shadow-in { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pop-in2 { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) {
  .ba-grid { gap: 36px; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stage-wrap { justify-self: center; max-width: 440px; }
  .stage-caption { text-align: center; }
  .ba-grid { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; gap: 0; }
  .person { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; padding: 20px 0; border-top: 1px solid var(--dp-color-rule); }
  .person .avatar { grid-row: span 4; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker span:nth-child(n+16) { display: none; }
  .ring.r2 { animation: none; }
  .art * { animation: none !important; opacity: 1 !important; }
  .art-ads .pulse { opacity: .3 !important; }
}