/* The homepage: quieter than a dashboard, and it has to move without shouting.
   Everything here is CSS or a few lines of script — no libraries, so the page
   loads in one round trip and nothing can be blocked by a CDN. */

/* --- the hero, and the thing moving behind it ---------------------------- */
.hero-wrap { position: relative; overflow: hidden; isolation: isolate; }

/* Two slow, very soft colour fields drifting across each other. At 8% opacity
   they read as depth rather than decoration, and they never compete with text. */
.hero-wrap::before,
.hero-wrap::after {
  content: ""; position: absolute; inset: -35% -20%; z-index: -2;
  background: radial-gradient(38% 42% at 30% 40%, rgba(57,135,229,.34), transparent 70%),
              radial-gradient(34% 38% at 72% 58%, rgba(124,77,224,.26), transparent 72%);
  filter: blur(38px);
  animation: drift 34s ease-in-out infinite alternate;
}
.hero-wrap::after {
  background: radial-gradient(30% 34% at 62% 30%, rgba(75,179,127,.22), transparent 70%),
              radial-gradient(26% 30% at 24% 72%, rgba(217,164,65,.18), transparent 72%);
  animation-duration: 46s; animation-direction: alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(5%, 3%, 0) scale(1.12); }
}

/* A ledger grid, scrolling upward: money moving, drawn as the thing it moves
   through. Masked to nothing at the edges so it has no boundary to look boxy. */
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 100% 34px, 128px 100%;
  animation: ledger 22s linear infinite;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 30%, transparent 100%);
          mask-image: radial-gradient(72% 62% at 50% 42%, #000 30%, transparent 100%);
}
@keyframes ledger { to { background-position: 0 -340px, 0 0; } }

/* Text arriving, once, on load. */
.rise { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
.rise.d1 { animation-delay: .06s } .rise.d2 { animation-delay: .14s }
.rise.d3 { animation-delay: .22s } .rise.d4 { animation-delay: .3s }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Sections arriving as you reach them. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.seen { opacity: 1; transform: none; }

/* --- the scripted demo --------------------------------------------------- */
.stage {
  position: relative; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-1); overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}
.stage-chrome {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #34342f; }
.stage-url {
  margin-left: 8px; font-size: 11.5px; color: var(--text-muted); font-family: var(--mono);
  background: var(--surface-2); border-radius: 6px; padding: 3px 10px;
}
.stage-caption {
  margin-left: auto; font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 7px;
}
.stage-caption .rec { width: 7px; height: 7px; border-radius: 50%; background: #d1584f;
  animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.stage-body { position: relative; min-height: 396px; padding: 20px 22px; }
.scene { position: absolute; inset: 0; padding: 20px 22px; opacity: 0;
  transition: opacity .45s ease; pointer-events: none; }
.scene.on { opacity: 1; }

/* The cursor. One element, moved by script. */
.cursor {
  position: absolute; left: 0; top: 0; width: 19px; height: 19px; z-index: 9;
  pointer-events: none; transition: transform .85s cubic-bezier(.4,.05,.2,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
.cursor.click::after {
  content: ""; position: absolute; left: -9px; top: -9px; width: 34px; height: 34px;
  border-radius: 50%; border: 2px solid rgba(57,135,229,.85); animation: tap .45s ease-out;
}
@keyframes tap { from { transform: scale(.25); opacity: 1 } to { transform: scale(1); opacity: 0 } }

.press { box-shadow: 0 0 0 2px rgba(57,135,229,.55) !important; }
.caret::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px;
  background: var(--accent); vertical-align: -.16em; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

.fake-input {
  border: 1px solid var(--border-strong); background: var(--surface-2); border-radius: 9px;
  padding: 9px 12px; font-size: 13.5px; color: var(--text-primary); min-height: 38px;
}
.stage-steps { display: flex; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--border); }
.step-dot { height: 3px; flex: 1; border-radius: 2px; background: var(--border-strong);
  overflow: hidden; }
.step-dot > i { display: block; height: 100%; width: 0; background: var(--accent); }
.step-dot.on > i { animation: fill linear forwards; }
@keyframes fill { to { width: 100% } }

/* Clicking the stage pauses the script; freeze the progress bar and the
   recording dot too, or they keep running and it looks broken rather than held. */
.stage.paused .step-dot > i,
.stage.paused .stage-caption .rec { animation-play-state: paused; }
.stage.paused .cursor { opacity: .35; }

.row-in { opacity: 0; transform: translateY(6px); animation: rise .4s ease forwards; }
.count { font-variant-numeric: tabular-nums; }

/* --- feature cards that open -------------------------------------------- */
.feat {
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface-1);
  overflow: hidden; transition: border-color .2s ease, transform .2s ease;
}
.feat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.feat > button {
  width: 100%; text-align: left; background: none; border: 0; color: inherit;
  font: inherit; cursor: pointer; padding: 17px 18px; display: flex;
  align-items: center; gap: 12px;
}
.feat .ico {
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid;
  place-items: center; background: var(--surface-2); font-size: 14px;
}
.feat .t { color: var(--text-primary); font-weight: 570; font-size: 14.5px; }
.feat .chev { margin-left: auto; color: var(--text-muted); transition: transform .25s ease; }
.feat[open] .chev { transform: rotate(90deg); }
.feat .more {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease;
}
.feat[open] .more { grid-template-rows: 1fr; }
.feat .more > div { overflow: hidden; }
.feat .more p { margin: 0 18px 17px; font-size: 13.5px; color: var(--text-secondary); }
.feat .more .eg {
  margin: 0 18px 17px; padding: 11px 13px; border-radius: 9px; background: var(--surface-2);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .hero-wrap::before, .hero-wrap::after, .hero-grid, .step-dot > i { animation: none; }
  .rise, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .cursor { transition: none; }
}