/* Landing page
   Layout: centred hero, faded section title, feature cards in pair / wide / pair / wide rows,
   a "built for" strip, moving question cards, three steps, split call to action, dark footer. */

:root {
  --tint-a: linear-gradient(165deg, var(--tint-a-from) 0%, var(--tint-a-to) 100%);
  --tint-b: linear-gradient(165deg, var(--tint-b-from) 0%, var(--tint-b-to) 100%);
  --tint-c: linear-gradient(100deg, var(--tint-c-from) 0%, var(--tint-c-to) 100%);
  --glow-a: var(--glow-a-light);
  --glow-b: var(--glow-b-light);
  --faded: color-mix(in srgb, var(--ink-3) 78%, transparent);
}
:root[data-theme="dark"] {
  --tint-a: linear-gradient(165deg, var(--tint-a-dark-from) 0%, var(--tint-a-dark-to) 100%);
  --tint-b: linear-gradient(165deg, var(--tint-b-dark-from) 0%, var(--tint-b-dark-to) 100%);
  --tint-c: linear-gradient(100deg, var(--tint-c-dark-from) 0%, var(--tint-c-dark-to) 100%);
  --glow-a: var(--glow-a-dark);
  --glow-b: var(--glow-b-dark);
  --faded: color-mix(in srgb, var(--ink-3) 66%, transparent);
}

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
  padding-top: env(safe-area-inset-top, 0px);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  max-width: 1240px; margin: 0 auto; height: 68px; padding: 0 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav-links { display: flex; gap: 32px; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-size: .95rem; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

main { overflow-x: clip; }
main > section { max-width: calc(var(--page-max) + var(--page-gutter) * 2); margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

.btn-xl { min-height: 60px; padding: 0 36px; font-size: 1.05rem; }

/* Glyphs used in sample cards */
.glyph { width: 1.25em; height: 1.25em; flex: none; }
.glyph .d { fill: currentColor; stroke: none; opacity: .16; }

/* Load and scroll reveals */
@media (prefers-reduced-motion: no-preference) {
  .reveal-load { opacity: 0; transform: translateY(16px); animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--d) * 110ms + 80ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .reveal.in { opacity: 1; transform: none; }
}

/* Faded section title */
.ghost { padding-top: 120px; padding-bottom: 40px; }
.ghost h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--faded); }

/* Feature cards */
.deck { display: grid; gap: 24px; }
.deck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fcard {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  display: flex; flex-direction: column; min-height: 560px;
  padding: 44px 44px 0;
}
.tint-a { background: var(--tint-a); }
.tint-b { background: var(--tint-b); }
.tint-c { background: var(--tint-c); }
.tint-d {
  background:
    radial-gradient(80% 120% at 0% 0%, var(--brand-550) 0%, transparent 60%),
    radial-gradient(60% 90% at 100% 100%, var(--brand-850) 0%, transparent 70%),
    var(--brand-600);
  color: var(--on-brand);
}
.fcard-copy h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em; }
.fcard-copy p { margin-top: 14px; font-size: 1.05rem; color: var(--ink-2); max-width: 42ch; }
.fcard-copy.on-dark p { color: color-mix(in srgb, var(--on-brand) 78%, transparent); }
.more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  color: var(--brand); font-weight: 580; font-size: .95rem; text-decoration: none;
}
.more i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-size: .8rem; transition: transform .25s var(--ease); }
.more:hover i { transform: translateX(3px); }
.on-dark .more { color: var(--brand-150); }
.fcard-art { margin-top: auto; padding-top: 40px; position: relative; }

.fcard-wide { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; min-height: 440px; padding: 48px 56px; }
.fcard-wide .fcard-art { margin: 0; padding: 0; }

/* Art: receipts stacked at the bottom edge */
.art-receipts { display: grid; gap: 12px; padding-bottom: 0; margin-bottom: -18px; }
.receipt {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px;
  width: min(100%, 420px);
}
.receipt:nth-child(2) { margin-left: 28px; }
.receipt:nth-child(3) { margin-left: 56px; opacity: .85; }
.receipt div { flex: 1; display: grid; line-height: 1.3; min-width: 0; }
.receipt strong { font-size: .95rem; }
.receipt div span { font-size: .8rem; color: var(--ink-3); }
.receipt b { font-size: .98rem; font-weight: 650; }
.avatar.sm { width: 32px; height: 32px; font-size: .72rem; }

/* Art: phone rising from the bottom edge */
.art-phone { display: grid; justify-items: center; }
.phone {
  width: min(100%, 300px); background: var(--surface); color: var(--ink);
  border: 9px solid var(--brand-900); border-bottom: 0; border-radius: 40px 40px 0 0;
  padding: 16px 18px 20px; display: grid; gap: 14px;
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--brand-900) 50%, transparent);
}
.phone-notch { width: 84px; height: 22px; border-radius: 999px; background: var(--brand-900); justify-self: center; margin-top: -6px; }
.phone-top { display: flex; gap: 12px; align-items: center; }
.phone-top div { display: grid; line-height: 1.3; }
.phone-top strong { font-size: .95rem; }
.phone-top span:not(.avatar) { font-size: .76rem; color: var(--ink-3); }
.phone-balance { padding: 16px; border-radius: var(--r-control); background: var(--pos-soft); display: grid; gap: 2px; }
.phone-balance span { font-size: .78rem; color: var(--pos); }
.phone-balance strong { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.03em; color: var(--pos); }
.phone-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding-top: 10px; font-size: .84rem; border-top: 1px solid var(--line); }
.phone-row span:nth-child(2) { color: var(--ink-3); }
.phone-row strong { color: var(--pos); font-weight: 600; }

/* Art: owed card */
.art-owed { display: grid; justify-items: end; }
.owed { width: min(100%, 420px); padding: 20px 22px; border-radius: var(--r-card); display: grid; gap: 4px; transform: rotate(-2deg); }
.owed-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; }
.owed-head span { font-size: .85rem; color: var(--ink-3); font-weight: 550; }
.owed-head strong { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -0.03em; color: var(--neg); }
.owed-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.owed-row span:nth-child(2) { flex: 1; }
.owed-row strong { font-weight: 650; }

/* Art: overlapping schedule bubbles */
.art-bubbles { height: 260px; margin: 0 -44px; padding: 0; }
.bub {
  position: absolute; border-radius: 50%; display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; line-height: 1.05;
  box-shadow: var(--shadow);
}
.b1 { width: 150px; height: 150px; left: 6%; bottom: 40px; background: var(--brand); color: var(--brand-ink); font-size: 1.4rem; }
.b2 { width: 130px; height: 130px; left: 34%; bottom: -20px; background: var(--surface); color: var(--ink); font-size: 1.1rem; }
.b3 { width: 118px; height: 118px; left: 55%; bottom: 90px; background: var(--brand-900); color: var(--on-brand); font-size: 1.02rem; }
.b4 { width: 140px; height: 140px; right: 4%; bottom: -10px; background: var(--brand-soft); color: var(--brand); font-size: 1.1rem; }
.b5 { width: 64px; height: 64px; left: 31%; bottom: 178px; background: var(--pos-soft); color: var(--pos); font-size: 1.6rem; }

/* Art: team */
.art-team { display: grid; gap: 12px; justify-items: start; padding-bottom: 44px; }
.team-stack { display: flex; margin-bottom: 6px; }
.team-stack .avatar { width: 54px; height: 54px; font-size: 1rem; border: 3px solid var(--surface); }
.team-stack .avatar + .avatar { margin-left: -14px; }
.team-stack .avatar:nth-child(2) { background: var(--brand); color: var(--brand-ink); }
.team-stack .avatar:nth-child(3) { background: var(--pos-soft); color: var(--pos); }
.live { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; font-size: .92rem; color: var(--ink-2); }
.live:nth-child(3) { margin-left: 32px; }
.live strong { color: var(--ink); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 4px var(--pos-soft); flex: none; }

/* Art: ledger switcher */
.art-switch { display: grid; justify-items: end; }
.switch { width: min(100%, 360px); padding: 8px; border-radius: var(--r-card); color: var(--ink); transform: rotate(2deg); }
.switch-item { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border-radius: var(--r-control); font-size: .98rem; }
.switch-item i { font-size: 1.25rem; color: var(--ink-3); }
.switch-item.on { background: var(--bg); font-weight: 620; }
.switch-item.on i { color: var(--brand); }
.switch-item.muted { color: var(--ink-3); }
.switch-sep { height: 1px; background: var(--line); margin: 6px 8px; }

/* Built-for strip: three photos with captions */
.strip { padding-top: 96px; padding-bottom: 24px; text-align: center; }
.eyebrow { font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: 0; color: var(--brand); }
.who { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px; margin-top: 32px; text-align: left; }
.who-card { margin: 0; display: flex; flex-direction: column; }
.who-card:first-child { grid-row: 1 / span 2; }
.who-frame { aspect-ratio: 16 / 10; border-radius: var(--r-card); }
.who-card:first-child .who-frame { aspect-ratio: auto; flex: 1; min-height: 420px; }
.who-frame img { position: absolute; inset: 0; transition: transform .8s var(--ease); }
.who-card:hover .who-frame img { transform: scale(1.03); }
.who-card figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--font-display); font-weight: 650; font-size: 1.2rem; letter-spacing: -0.02em; }
.who-card figcaption i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1.1rem; }
.strip-more { margin-top: 28px; color: var(--ink-3); font-size: .95rem; }

/* Moving question cards */
.calls { padding-top: 96px; padding-bottom: 24px; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.calls-title { max-width: calc(var(--page-max) + var(--page-gutter) * 2); margin: 0 auto; padding: 0 var(--page-gutter); font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.calls-title span { color: var(--faded); }
.marquee {
  margin-top: 48px; 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);
}
.marquee-track { display: flex; width: max-content; }
.qlist { list-style: none; margin: 0; padding: 12px 0 28px; display: flex; gap: 20px; padding-right: 20px; }
.q { width: 330px; padding: 28px; border-radius: var(--r-card); display: grid; gap: 14px; align-content: start; }
.q i { font-size: 2rem; color: var(--brand); }
.q p { font-size: 1.3rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.q span { font-size: .85rem; color: var(--pos); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.q span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .qlist[aria-hidden="true"] { display: none; }
}

/* How it works */
.how { padding-top: 96px; padding-bottom: 24px; }
.how-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.035em; }
/* Timeline: numbers sit on one line that runs through the steps */
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: var(--line); }
.step { position: relative; padding-right: 12px; }
.step-num { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--brand); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; box-shadow: inset 0 0 0 1.5px var(--brand); }
.step:first-child .step-num { background: var(--brand); color: var(--brand-ink); }
.step h3 { margin-top: 24px; font-size: 1.35rem; letter-spacing: -0.02em; }
.step p { margin-top: 8px; color: var(--ink-2); max-width: 30ch; }

/* Split call to action */
.get { padding-top: 96px; padding-bottom: 96px; }
.get-inner { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.get-visual { border-radius: 0; min-height: 440px; }
.get-visual img { position: absolute; inset: 0; }
.get-ring {
  position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--on-brand) 35%, transparent);
}
.get-ring::before, .get-ring::after { content: ""; position: absolute; border-radius: 50%; background: var(--on-brand); }
.get-ring::before { width: 22px; height: 22px; left: 50%; top: -11px; margin-left: -11px; }
.get-ring::after { width: 12px; height: 12px; right: 12%; bottom: 8%; opacity: .5; }
.get-visual img + .get-ring { display: none; }
.get-copy { padding: clamp(32px, 5vw, 64px); display: grid; align-content: center; gap: 18px; }
.get-copy h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.035em; }
.get-copy p { color: var(--ink-2); font-size: 1.05rem; max-width: 44ch; }
.get-ctas { display: grid; gap: 12px; margin-top: 12px; }
.store-btn {
  display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 0 24px;
  border-radius: var(--r-control); background: var(--ink); color: var(--bg);
  text-decoration: none; font-weight: 620; font-size: 1.15rem;
  transition: transform .2s var(--ease), opacity .2s;
}
.store-btn:hover { opacity: .92; }
.store-btn:active { transform: scale(.99); }
.store-btn i { font-size: 1.9rem; }
.store-btn span { display: grid; line-height: 1.2; }
.store-btn small { font-size: .78rem; font-weight: 500; opacity: .7; }
.store-btn.alt { background: var(--brand); color: var(--brand-ink); }

/* Footer: always dark */
.footer { background: var(--brand-950); color: var(--night-muted); padding: 64px var(--page-gutter) 28px; }
.footer-inner { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer .logo { color: var(--on-brand); }
.footer-brand p { margin-top: 16px; max-width: 38ch; font-size: .93rem; line-height: 1.6; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 650; color: var(--on-brand); letter-spacing: 0; margin-bottom: 4px; }
.footer-col a { color: var(--night-muted); text-decoration: none; font-size: .93rem; }
.footer-col a:hover { color: #fff; }
.footer-credit { max-width: var(--page-max); margin: 10px auto 0; font-size: .78rem; color: var(--night-faint); text-align: center; line-height: 1.6; }
.footer-credit a { color: var(--night-link); }
.footer-credit a:hover { color: #fff; }
.footer-note { max-width: var(--page-max); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--night-line); font-size: .85rem; color: var(--night-subtle); text-align: center; }
.footer-note a { color: var(--night-muted); margin-left: 14px; }
.footer-note a:hover { color: #fff; }

/* Tablet */
@media (max-width: 1024px) {
  .fcard { padding: 36px 32px 0; min-height: 520px; }
  .fcard-wide { padding: 40px; }
  .art-bubbles { margin: 0 -32px; }
}

/* Phone */
@media (max-width: 860px) {
  .nav-inner { grid-template-columns: 1fr auto; padding: 0 16px; }
  .nav-links { display: none; }
  main > section { padding-left: 16px; padding-right: 16px; }


  .ghost { padding-top: 72px; padding-bottom: 24px; }
  .deck, .deck-row { gap: 16px; }
  .deck-row { grid-template-columns: 1fr; }
  .fcard { min-height: 0; padding: 30px 24px 0; }
  .fcard-wide { grid-template-columns: 1fr; gap: 32px; padding: 30px 24px 32px; }
  .art-owed, .art-switch { justify-items: center; }
  .receipt:nth-child(2) { margin-left: 16px; }
  .receipt:nth-child(3) { margin-left: 32px; }
  .art-bubbles { margin: 0 -24px; height: 240px; }
  .b1 { width: 124px; height: 124px; font-size: 1.2rem; left: 4%; }
  .b2 { width: 108px; height: 108px; font-size: .98rem; }
  .b3 { width: 100px; height: 100px; font-size: .92rem; left: 52%; bottom: 100px; }
  .b4 { width: 118px; height: 118px; font-size: .98rem; }
  .b5 { left: 38%; bottom: 168px; width: 50px; height: 50px; font-size: 1.2rem; }
  .pill { font-size: .84rem; gap: 8px; }
  .art-team { padding-bottom: 30px; }

  .strip, .calls, .how { padding-top: 72px; }
  .who { grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; }
  .who-card:first-child { grid-row: auto; }
  .who-frame, .who-card:first-child .who-frame { aspect-ratio: 4 / 3; flex: none; min-height: 0; }
  .calls-title { padding: 0 16px; }
  .marquee { margin-top: 32px; }
  .q { width: 270px; padding: 22px; }
  .q p { font-size: 1.12rem; }
  .steps { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .steps::before { left: 24px; right: auto; top: 24px; bottom: 24px; width: 1px; height: auto; }
  .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; padding-right: 0; }
  .step-num { grid-row: 1 / span 2; }
  .step h3 { margin-top: 10px; }
  .step p { margin-top: 4px; }

  .get { padding-top: 72px; padding-bottom: 64px; }
  .get-inner { grid-template-columns: 1fr; }
  .get-visual { min-height: 0; aspect-ratio: 4 / 5; }
  .store-btn { min-height: 64px; font-size: 1.05rem; }

  .footer { padding: 48px 16px 24px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
  .nav-signin { display: none; }
  .nav-inner { gap: 8px; }
  .nav-actions { gap: 4px; }
  .nav-actions .btn-sm { padding: 0 14px; }
}

/* Smallest phones (320px): tighten the top bar so it fits without sideways scroll */
@media (max-width: 360px) {
  .nav-inner { padding: 0 12px; gap: 6px; }
  .nav .logo { font-size: 1rem; gap: 8px; }
  .nav .logo .logo-img { height: 24px; }
  .nav-actions .icon-btn { width: 40px; }
  .nav-actions .btn-sm { padding: 0 12px; }
}

/* ---------- Hero: dark rounded panel, headline left, actions right, fanned ledger cards, spinning badge ---------- */
.hero { position: relative; margin-top: 28px; padding-bottom: 92px; }
.hero-panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 36px; background: #12132A; color: #F4F5FA;
  padding: clamp(56px, 8vh, 104px) clamp(32px, 6vw, 112px) 0;
}
:root[data-theme="dark"] .hero-panel { box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }
/* Faint rings, like ripples from the top right */
.hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 88% -12%, rgb(255 255 255 / .045) 0 1px, transparent 1px 36px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 95%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 95%);
}
.hero-glow { position: absolute; z-index: -1; width: 560px; height: 560px; border-radius: 50%; filter: blur(110px); opacity: .55; pointer-events: none; }
.hero-glow-a { background: #3A3FA0; left: -200px; top: 40px; }
.hero-glow-b { background: #4A3B8F; right: -160px; bottom: -120px; }

.hero-inner { max-width: var(--page-max); margin: 0 auto; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px clamp(32px, 5vw, 96px); align-items: end; }
.hero h1 { font-size: clamp(3rem, min(6vw, 10vh), 7.2rem); font-weight: 700; letter-spacing: -0.05em; line-height: .98; color: #F4F5FA; max-width: 12ch; }
.hero h1 .hl { color: #C9CCF8; }
.hero-aside { padding-bottom: 10px; }
.hero-sub { font-size: clamp(1.02rem, 1.1vw, 1.2rem); line-height: 1.6; color: rgb(244 245 250 / .72); max-width: 38ch; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.btn-light { background: #C9CCF8; color: #12132A; min-height: 60px; padding: 0 12px 0 30px; font-size: 1.02rem; font-weight: 620; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5); }
.btn-light:hover { background: #DADCFB; }
.btn-light .go { background: rgb(18 19 42 / .1); width: 40px; height: 40px; margin-right: 0; margin-left: 14px; }
.round-btn {
  width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: #F4F5FA; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  font-size: 1.3rem; text-decoration: none; transition: background-color .4s var(--spring, var(--ease)), transform .5s var(--spring, var(--ease));
}
.round-btn:hover { background: rgb(255 255 255 / .12); transform: translateY(2px); }
.round-btn:focus-visible, .btn-light:focus-visible { outline-color: #C9CCF8; }

/* Cards fan out from the bottom edge, with a proof point on each side */
.hero-fan { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; margin-top: clamp(24px, 3vh, 56px); }
.fan { position: relative; width: clamp(540px, 50vw, 960px); height: clamp(260px, min(24vw, 36vh), 480px); }
.lcard {
  position: absolute; bottom: 0; width: clamp(220px, 18vw, 330px); aspect-ratio: 4 / 5; border-radius: clamp(18px, 1.5vw, 24px);
  padding: clamp(14px, 1.25vw, 22px); display: flex; flex-direction: column; gap: clamp(10px, .9vw, 16px);
  background: #FCFCFD; color: #16182B; text-align: left;
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(22 24 43 / .06);
}
.lc-1 { left: 0; transform: translateY(30%) rotate(-8deg); transform-origin: bottom right; }
.lc-3 { right: 0; transform: translateY(30%) rotate(8deg); transform-origin: bottom left; }
.lc-2 { left: 50%; z-index: 2; width: clamp(240px, 20vw, 370px); transform: translate(-50%, 16%); }

.lc-head { display: flex; align-items: center; gap: 10px; }
.lc-head > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.lc-head strong { font-size: clamp(.8rem, .9vw, 1rem); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-head small, .lc-tile small, .lc-rows small { font-size: clamp(.64rem, .68vw, .78rem); color: #62657B; }
.lc-head .avatar { width: clamp(28px, 2.4vw, 38px); height: clamp(28px, 2.4vw, 38px); font-size: clamp(.62rem, .65vw, .78rem); }
.lc-ico { width: clamp(28px, 2.4vw, 38px); height: clamp(28px, 2.4vw, 38px); flex: none; border-radius: 32%; display: grid; place-items: center; background: #E2E3F4; color: #2A2E7F; font-size: clamp(.9rem, 1vw, 1.15rem); }

.lc-tile { border-radius: clamp(12px, 1vw, 16px); padding: clamp(10px, 1vw, 16px); display: grid; gap: 2px; }
.lc-tile strong { font-family: var(--font-display); font-size: clamp(1.15rem, 1.65vw, 1.9rem); letter-spacing: -0.035em; line-height: 1.1; }
.lc-tile-pos { background: #DDEFE6; color: #1B7650; }
.lc-tile-pos small { color: #1B7650; }
.lc-tile-brand { color: #F4F5FA; background: radial-gradient(90% 120% at 0% 0%, #4C52C9 0%, transparent 60%), #2A2E7F; }
.lc-tile-brand small { color: rgb(244 245 250 / .75); }
.lc-bar { height: 6px; border-radius: 999px; background: rgb(255 255 255 / .2); margin-top: 8px; overflow: hidden; }
.lc-bar span { display: block; width: 72%; height: 100%; border-radius: inherit; background: #C9CCF8; }

.lc-rows { display: grid; }
.lc-rows > div { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: clamp(6px, .6vw, 10px) 0; border-top: 1px solid rgb(22 24 43 / .08); }
.lc-rows span { font-size: clamp(.72rem, .78vw, .9rem); font-weight: 550; }
.lc-rows small { grid-row: 2; }
.lc-rows b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: clamp(.72rem, .8vw, .92rem); font-weight: 650; }
.lc-rows .pos { color: #1B7650; }

.lc-order { display: grid; gap: 4px; }
.lc-order > div { display: flex; align-items: center; gap: 10px; padding: clamp(6px, .6vw, 10px); border-radius: 12px; font-size: clamp(.72rem, .78vw, .9rem); font-weight: 550; }
.lc-order i { width: clamp(20px, 1.6vw, 26px); height: clamp(20px, 1.6vw, 26px); flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .85em; background: #E7E8EE; color: #474A60; }
.lc-order span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-order em { font-style: normal; font-size: .82em; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #E2E3F4; color: #2A2E7F; }
.lc-order em.done { background: #DDEFE6; color: #1B7650; }
.lc-order em.later { background: transparent; color: #62657B; padding: 0; }
.lc-order .on { background: #F1F2F4; }
.lc-order .on i { background: #2A2E7F; color: #FCFCFD; }

.hero-stat { display: flex; align-items: center; gap: 14px; color: rgb(244 245 250 / .72); font-size: .92rem; line-height: 1.35; }
.hero-stat strong { display: block; color: #F4F5FA; font-weight: 600; font-size: 1rem; }
.stat-l { justify-self: start; margin-top: 8%; }
.stat-l > span:last-child { min-width: 190px; }
.stat-l .stat-ico { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #C9CCF8; background: rgb(201 204 248 / .1); box-shadow: inset 0 0 0 1px rgb(201 204 248 / .25); }
.stat-r { justify-self: end; margin-top: 18%; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.stat-r .stat-row { display: flex; align-items: center; gap: 12px; }
.stat-r .faces { display: flex; }
.stat-r .faces .avatar { width: 36px; height: 36px; font-size: .72rem; box-shadow: 0 0 0 3px #12132A; }
.stat-r .faces .avatar + .avatar { margin-left: -10px; }
.stat-r .faces .avatar:nth-child(2) { background: #8FD9C4; color: #12132A; }
.stat-r .faces .avatar:nth-child(3) { background: #F7BB78; color: #2B1A10; }
.stat-r b { font-family: var(--font-display); font-size: clamp(1.8rem, 2.4vw, 2.6rem); color: #F4F5FA; letter-spacing: -0.04em; line-height: 1; }
.stat-r .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5FD1A1; margin-right: 8px; vertical-align: 2px; }

/* Spinning badge that bulges out of the bottom of the panel */
.hero-badge {
  position: absolute; left: 50%; bottom: 30px; z-index: 3; transform: translateX(-50%);
  width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center;
  background: #12132A; color: #F4F5FA; text-decoration: none;
  box-shadow: 0 22px 44px -16px rgb(122 128 230 / .75);
}
.hero-badge svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); font-family: var(--font-body); font-size: 9.6px; font-weight: 600; letter-spacing: .14em; fill: rgb(244 245 250 / .85); }
.hero-badge i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #C9CCF8; color: #12132A; font-size: 1.25rem; transition: transform .5s var(--spring, var(--ease)); }
.hero-badge:hover i { transform: translateY(3px); }
.hero-badge:focus-visible { outline-color: #C9CCF8; }
@media (prefers-reduced-motion: no-preference) {
  .hero-badge svg { animation: badge-spin 22s linear infinite; }
  @keyframes badge-spin { to { transform: rotate(360deg); } }
}

/* Tablets and phones */
@media (max-width: 1023px) {
  .hero-top { grid-template-columns: 1fr; gap: 24px; }
  .hero-fan { grid-template-columns: 1fr; justify-items: center; }
  .hero-stat { display: none; }
  .fan { width: min(100%, 640px); height: clamp(220px, 46vw, 330px); }
  .lcard { width: clamp(180px, 28vw, 250px); }
  .lc-2 { width: clamp(200px, 31vw, 280px); }
}
@media (max-width: 860px) {
  .hero { margin-top: 16px; padding-bottom: 80px; }
  .hero-panel { border-radius: 28px; padding: 52px 24px 0; }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .hero-actions { margin-top: 24px; }
  .hero-actions .btn-light { flex: 1; justify-content: space-between; }
  .hero-glow { width: 320px; height: 320px; filter: blur(80px); }
  .hero-badge { width: 100px; height: 100px; bottom: 30px; }
  .hero-badge svg { font-size: 9.2px; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
  .hero-badge i { width: 36px; height: 36px; font-size: 1.05rem; }
  .fan { width: 100%; height: 300px; }
  .lcard { width: 54vw; max-width: 250px; }
  .lc-2 { width: 62vw; max-width: 280px; transform: translate(-50%, 8%); }
  .lc-1 { left: -14%; transform: translateY(26%) rotate(-9deg); }
  .lc-3 { right: -14%; transform: translateY(26%) rotate(9deg); }
}

/* Hero motion: headline halves rise in, the app screens rise from the edge and fan out,
   then the centre screen floats gently. Hover fans the side screens out a little more.
   Uses the separate translate/rotate/scale properties so it never fights each card's own transform. */
.lcard { transition: translate .7s var(--spring, var(--ease)), rotate .7s var(--spring, var(--ease)), scale .7s var(--spring, var(--ease)); }
.lc-1 { --from: translateY(85%) rotate(0deg); }
.lc-3 { --from: translateY(85%) rotate(0deg); }
.lc-2 { --from: translate(-50%, 75%); }
.fan:hover .lc-1 { translate: -16px -10px; rotate: -3deg; }
.fan:hover .lc-3 { translate: 16px -10px; rotate: 3deg; }
.fan:hover .lc-2 { scale: 1.02; }
.hero-badge { transition: scale .6s var(--spring, var(--ease)); }
.hero-badge:hover { scale: 1.06; }

@media (prefers-reduced-motion: no-preference) {
  .hero-title { opacity: 0; transform: translateY(40px); filter: blur(8px); animation: rise-soft 1.1s var(--spring, var(--ease)) forwards; }
  .hero-title .ht-b { display: inline; }
  .lcard { opacity: 0; animation: fan-in 1.2s var(--spring, var(--ease)) forwards; }
  .lc-2 { animation-delay: .35s, 1.6s; animation-name: fan-in, float; animation-duration: 1.2s, 6s; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-timing-function: var(--spring, var(--ease)), ease-in-out; }
  .lc-1 { animation-delay: .55s; }
  .lc-3 { animation-delay: .65s; }
  @keyframes fan-in { from { opacity: 0; transform: var(--from); } to { opacity: 1; } }
  @keyframes float { from { translate: 0 0; } to { translate: 0 -8px; } }
  .hero-glow-a { animation: drift-a 16s ease-in-out infinite alternate; }
  .hero-glow-b { animation: drift-b 19s ease-in-out infinite alternate; }
  @keyframes drift-a { to { transform: translate(60px, 40px) scale(1.08); } }
  @keyframes drift-b { to { transform: translate(-70px, -30px) scale(1.1); } }
}