/* ============================================================
   Home page only (body.home). Loaded after site.css.
   The rest of the site keeps its compact utility look; the marketing
   home gets depth: a night-sky masthead with the lighthouse beam
   sweeping across it, a product screen that sits in real perspective
   and overlaps the paper below, and colour blocks that break the rhythm.
   ============================================================ */
.home {
  --night: #0E1C38; --night-2: #24427A;
  --sheet-shadow: 0 1px 0 rgba(24,45,86,.06), 0 40px 80px -40px rgba(24,45,86,.45);
  --deep-shadow: 0 2px 0 rgba(255,255,255,.06), 0 60px 120px -40px rgba(5,12,28,.5), 0 30px 60px -40px rgba(5,12,28,.45);
}

/* ---------- nav: navy on the home page ---------- */
.home .nav, .home .nav.solid { background: var(--night); border-color: var(--inverse-line); }
.home .nav-links a { color: var(--inverse-muted); }
.home .nav-links a:hover { color: #fff; }
.home .nav-links a::after { background: var(--gold); }
.home .nav .btn.ghost { color: #fff; }
.home .nav .btn.ghost:hover { background: var(--inverse-line); }
.home .nav .btn.gold { box-shadow: 3px 3px 0 var(--paper); }
.home .burger span { background: #fff; }
.home .nav :focus-visible, .home .hero :focus-visible, .home .leads-lead :focus-visible,
.home .cta :focus-visible, .home .mbar :focus-visible { outline-color: var(--gold); }
.home .mobile-menu { background: var(--night); border-color: var(--inverse-line); }
.home .mobile-menu a { color: #fff; border-color: var(--inverse-line); }
.home .mobile-menu .btn.ghost { color: #fff; }

/* ---------- the sky: gradient, faint stars, one sweeping beam ---------- */
.hero-sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 71% 44%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 34%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 93% 22%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(90% 70% at 100% 0%, var(--night-2) 0%, var(--navy) 48%, var(--night) 100%);
}
/* The beam's source sits just off the top-right corner, like the lantern of a
   lighthouse out of frame. A conic wedge, faded with distance, swings slowly. */
.beam { position: absolute; left: 104%; top: 14%; width: 0; height: 0; }
.beam::before {
  content: ''; position: absolute; width: 240vmax; height: 240vmax; left: -120vmax; top: -120vmax;
  background: conic-gradient(from 0deg,
    transparent 0deg 208deg,
    rgba(255,236,190,.04) 214deg, rgba(255,236,190,.2) 226deg, rgba(255,236,190,.04) 238deg,
    transparent 244deg 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%);
          mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%);
  transform: rotate(8deg);
  animation: sweep 18s ease-in-out infinite alternate;
}
.beam::after { /* the lantern glow at the source */
  content: ''; position: absolute; width: 520px; height: 520px; left: -260px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,216,140,.35), rgba(202,174,83,.08) 55%, transparent);
}
@keyframes sweep { from { transform: rotate(-14deg); } to { transform: rotate(22deg); } }

/* ---------- hero ---------- */
html body.home .hero { padding: clamp(56px, 7vw, 96px) 0 0; color: var(--inverse-muted); isolation: isolate; }
/* The sky stops partway down the product screen, so the screen hangs over the paper. */
.home .hero > .hero-sky { bottom: clamp(140px, 16vw, 240px); }
.home .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-16); }
.home .hero-lead { grid-column: 1 / -1; }
.home .hero .eyebrow { color: var(--gold); }
.home .hero h1 {
  color: #fff; margin-top: var(--space-5);
  font-size: clamp(46px, 7.4vw, 104px); font-weight: 800; font-stretch: 86%;
  line-height: .92; letter-spacing: -0.045em; max-width: none;
}
.home .hero h1 em { color: var(--gold); background-image: none; }
html body.home .hero-deck { grid-column: 1 / -1; padding-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-16); align-items: end; }
.home .hero .lede { color: var(--inverse-muted); font-size: clamp(18px, 1.6vw, 21px); max-width: 44ch; }
.home .hero-cta { margin-top: 0; }
.home .hero .btn.gold { box-shadow: 5px 5px 0 var(--paper); }
.home .hero .btn.gold:hover { box-shadow: 7px 7px 0 var(--paper); }
.home .hero .btn.line { color: #fff; }
.home .hero .btn.line::after { background: var(--gold); }
.home .hero-note { color: var(--inverse-muted); border-top-color: var(--inverse-line); grid-column: 2; margin-top: calc(-1 * var(--space-4)); }

/* The masthead settles once on load; the screen rises into its tilt. */
html body.home .hero-lead { animation: settle .8s var(--ease) both; }
html body.home .hero-deck { animation: settle .8s var(--ease) .12s both; }

/* ---------- product screen in perspective ---------- */
.home .hero-shot-wrap { max-width: 1160px; padding: 0 var(--space-6); margin-top: clamp(40px, 4vw, 56px); perspective: 2400px; perspective-origin: 50% 0%; }
html body.home .shot {
  width: 100%; margin: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, -9deg)) rotateZ(.4deg);
  transform-style: preserve-3d; transform-origin: 50% 30%;
  transition: transform .7s var(--ease);
  box-shadow: var(--deep-shadow);
  animation: rise 1.2s var(--ease) .18s backwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(90px) rotateX(26deg) rotateY(-9deg); } }
.home .shot .demo-label { border-radius: 12px 12px 0 0; }
.home .shot .ui { border-radius: 0 0 12px 12px; }

/* ---------- strip ---------- */
html body.home .strip { margin-top: clamp(48px, 7vw, 96px); border: 0; }
.home .strip-in { justify-content: space-between; font-family: var(--display); font-size: 13px; letter-spacing: .1em; padding-block: var(--space-6); border-block: 1px solid var(--rule); }
.home .strip-in i { width: 24px; height: 3px; }

/* ---------- tour ---------- */
.home .tour .sec-h { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-4) var(--space-16); align-items: end; }
.home .tour .sec-h .eyebrow, .home .tour .sec-h h2 { grid-column: 1; }
.home .tour .sec-h .sub { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
.home .tour h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; }
.home .tour-frame { border-radius: 6px; box-shadow: 0 50px 90px -50px rgba(14,28,56,.7), 18px 18px 0 var(--gold); }

/* ---------- how it works: deeper night, screen in perspective ---------- */
.home .how { background: radial-gradient(70% 50% at 90% 10%, var(--night-2), transparent 70%), linear-gradient(var(--navy), var(--night)); }
.home .how .sec-h h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; }
.home .steps-visual { perspective: 2000px; }
.home .steps-sticky { border-radius: 8px; transform: rotateY(-5deg) rotateX(2deg); box-shadow: var(--deep-shadow), 16px 16px 0 var(--gold); }
.home .how .step-n { font-size: clamp(28px, 3vw, 40px); font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; }

/* ---------- inside: real screens on a warm table ---------- */
.home .inside { background: linear-gradient(var(--paper), var(--paper-2)); }
.home .inside .sec-h h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; }
.home .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 0; gap: var(--space-12) var(--space-10); }
.home .bento > .tile { grid-column: span 6; padding: 0; border: 0; }
.home .bento > .tile:nth-child(2n) { padding: 0; border: 0; }
.home .bento > .tile:nth-child(1), .home .bento > .tile:nth-child(4), .home .bento > .tile:nth-child(5) { grid-column: span 7; }
.home .bento > .tile:nth-child(2), .home .bento > .tile:nth-child(3), .home .bento > .tile:nth-child(6) { grid-column: span 5; }
/* Every second screen sits lower, so the grid reads as placed rather than generated. */
.home .bento > .tile:nth-child(2n) { margin-top: var(--space-10); }
.home .bento .tile-h { margin-bottom: var(--space-4); padding-left: 0; }
.home .bento .tile-h::before { content: none; }
.home .bento > .tile > :not(.tile-h) {
  background: var(--card); border: 0; border-top: 3px solid var(--navy); border-radius: 0;
  padding: var(--space-5); box-shadow: 8px 8px 0 var(--rule); flex: 1;
}

/* ---------- metrics: a gold block, one enormous number ---------- */
.home .metrics { background: var(--gold); border: 0; color: var(--navy); }
.home .metrics-in { padding-block: clamp(56px, 7vw, 96px); align-items: center; }
html body.home .metrics-in > div:first-child b { font-size: clamp(80px, 11vw, 150px); font-weight: 900; font-stretch: 112%; letter-spacing: -0.06em; line-height: .8; color: var(--navy); margin-left: -0.05em; }
.home .metrics small, html body.home .metrics-in > div:first-child small { color: var(--navy); }
.home .metrics-in > div:not(:first-child) { border-color: rgba(24,45,86,.28); }
.home .metrics-in > div:not(:first-child) b { color: var(--navy); font-weight: 800; }

/* ---------- onboarding: outlined numerals ---------- */
.home .onb h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; }
.home .onb-steps li { grid-template-columns: 120px minmax(0, 1fr); }
.home .onb-steps span { font-size: clamp(64px, 7vw, 96px); font-weight: 900; font-stretch: 112%; color: transparent; -webkit-text-stroke: 1.5px var(--navy); line-height: .8; }

/* ---------- pricing: a real sheet of paper ---------- */
html body.home .pricing { padding: var(--section-space) 0; }
.home .pricing h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; }
.home .receipt { background: var(--card); padding: var(--space-8) var(--space-10) var(--space-10); border-top: 6px solid var(--navy); box-shadow: var(--sheet-shadow); transform: rotate(-.6deg); }
.home .rc-price b { font-weight: 900; font-stretch: 125%; }

/* ---------- Ad Manager (NextLevel) ---------- */
.leads { position: relative; padding: var(--section-space) 0; color: var(--inverse-muted);
  background: radial-gradient(60% 60% at 10% 100%, var(--night-2), transparent 70%), linear-gradient(var(--night), var(--navy)); overflow: hidden; }
.leads-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.leads .eyebrow { color: var(--gold); }
.leads h2 { color: #fff; margin-top: var(--space-4); font-size: clamp(34px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.04em; line-height: .98; }
.leads h2 em { color: var(--gold); }
.leads .sub { margin-top: var(--space-5); font-size: var(--text-lg); max-width: 52ch; }
.leads-stat { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--inverse-border); display: grid; gap: var(--space-3); }
.leads-stat b { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(56px, 7vw, 96px); line-height: .85; letter-spacing: -0.05em; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.leads-stat span { font-size: var(--text-md); max-width: 46ch; }
.leads .fine { color: var(--inverse-muted); font-size: var(--text-sm); margin-top: var(--space-4); max-width: 60ch; }
.leads-sheet { background: var(--card); color: var(--body); padding: var(--space-10); border-top: 3px solid var(--navy-3); box-shadow: 0 60px 120px -50px rgba(0,0,0,.7), 0 20px 40px -30px rgba(0,0,0,.5); }
.leads-logo { width: 180px; height: auto; }
.leads-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.leads-list li { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-top: 1px solid var(--rule); }
.leads-list b { color: var(--ink); font-family: var(--display); font-size: var(--text-lg); letter-spacing: -0.015em; }
.leads-list span { font-size: var(--text-sm); color: var(--muted); }
.leads-price { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) 0 0; border-top: 1px solid var(--rule); }
.leads-price b { font-family: var(--display); font-weight: 800; font-size: var(--title-md); line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.leads-price span { flex: 1 1 22ch; font-size: var(--text-sm); color: var(--body); }
.leads-cta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: center; margin-top: var(--space-8); }

/* ---------- faq ---------- */
html body.home .faq { padding: var(--section-space) 0; }
.home .faq h2 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.04em; }

/* ---------- closing call to action under the same sky ---------- */
.home .cta { background: var(--night); isolation: isolate; }
.home .cta > .hero-sky { inset: 0; }
.home .cta .beam::before { animation: none; }
.home .cta h2 { font-size: clamp(42px, 6.4vw, 92px); font-weight: 800; font-stretch: 86%; letter-spacing: -0.045em; line-height: .95; }
.home .cta .btn.gold { box-shadow: 5px 5px 0 var(--paper); }
.home .cta .btn.gold:hover { box-shadow: 7px 7px 0 var(--paper); }
.home :is(.nav, .hero, .cta) .btn.gold:active { box-shadow: 1px 1px 0 var(--paper); }

/* ---------- mobile action bar ---------- */
.mbar { display: none; }

@media (max-width: 1000px) {
  .home .hero-in, html body.home .hero-deck { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .home .hero-note { grid-column: 1; margin-top: 0; }
  .home .tour .sec-h { grid-template-columns: minmax(0, 1fr); }
  .home .tour .sec-h .sub { grid-column: 1; grid-row: auto; }
  .home .receipt { transform: none; }
  .home .bento { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .home .bento > .tile:nth-child(n) { grid-column: auto; margin-top: 0; }
  .leads-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
}
@media (max-width: 820px) {
  html body.home .shot { --rx: 5deg; --ry: -4deg; }
  .mbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: rgba(14,28,56,.96); border-top: 1px solid var(--inverse-line); transition: transform .3s var(--ease), visibility 0s; }
  .mbar.hide { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
  .mbar .btn.gold { box-shadow: none; }
  .home .foot { padding-bottom: 96px; }
}
@media (max-width: 560px) {
  .home .strip-in { font-size: var(--text-xs); }
  .home .hero-shot-wrap { padding-inline: var(--space-4); }
  .home .onb-steps li { grid-template-columns: 72px minmax(0, 1fr); }
  .home .receipt { padding: var(--space-6) var(--space-5) var(--space-8); transform: none; }
  .leads-sheet { padding: var(--space-6) var(--space-5); transform: none; }
  .leads-cta .btn.gold { width: 100%; justify-content: center; }
  .home .steps-sticky { transform: none; }
  .home .tour-frame { box-shadow: 0 30px 60px -30px rgba(14,28,56,.6), 8px 8px 0 var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .beam::before { animation: none; transform: rotate(8deg); }
  html body.home .shot { transition: none; }
}