/* Home page: hero with the live app, the story, the numbers. */
.hero { position: relative; padding-top: 118px; padding-bottom: 28px; overflow: hidden; background-color: transparent; background-image: radial-gradient(60% 50% at 70% 10%, rgba(224,122,58,.28), transparent 70%), radial-gradient(60% 60% at 20% 30%, rgba(40,70,170,.35), transparent 70%); }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 45%, transparent 92%); }
#gl.on { opacity: 1; }
.hero .wrap { position: relative; }
.hero-copy { display: grid; gap: 20px; max-width: 660px; }
.hero h1 { font-size: clamp(32px, 4.2vw, 54px); }
.hero h1 span:last-child { color: var(--warm); }
.hero .sub { font-size: clamp(16px, 1.2vw, 18px); color: var(--t2); max-width: 40ch; }
.ctas { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.persp { perspective: 1800px; margin-top: 52px; position: relative; margin-inline: calc((100% - min(1280px, 100vw - 40px)) / 2); }
.win { transform-origin: 50% 0; background: var(--s1); border-radius: 12px; box-shadow: 0 0 0 1px var(--line2), 0 -1px 0 rgba(255,255,255,.2) inset, 0 50px 110px -30px rgba(0,0,0,.85), 0 0 120px -40px rgba(91,114,181,.35); overflow: hidden; position: relative; aspect-ratio: 1280 / 780; width: 100%; }
.win iframe, .win .poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--s1); }
.win .poster { object-fit: cover; transition: opacity .5s; pointer-events: none; }
.win.live .poster { opacity: 0; }
.fullbar { display: none; }
body.expanded { overflow: hidden; }
.persp.expanded { perspective: none; margin: 0; }
.win.full { position: fixed; inset: 0; z-index: 60; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0; transform: none !important; box-shadow: none; background: var(--bg); }
.win.full .fullbar { display: flex; position: absolute; inset: 0 0 auto; height: 40px; align-items: center; justify-content: space-between; padding-inline: 14px; font-size: 13px; color: var(--t2); border-bottom: 1px solid var(--line); background: var(--bg); }
.win.full .fullbar i { font-style: normal; color: var(--t3); margin-inline-start: 6px; }
.win.full .fullbar button { min-height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px var(--line2); color: var(--text); font-size: 12.5px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.win.full .fullbar kbd { color: var(--t3); }
.win.full iframe, .win.full .poster { inset: 40px 0 0 0; height: calc(100% - 40px); }
.demo-note { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--t3); }
.demo-note .acts { display: inline-flex; gap: 18px; align-items: center; }
.demo-note button, .demo-note a { background: none; border: 0; padding: 0; cursor: pointer; color: var(--t2); display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: 13px; min-height: 44px; }
.demo-note button:hover, .demo-note a:hover { color: var(--text); }
.demo-note .m-only { display: none; }

/* Pillars strip */
.pills { padding-block: 56px 8px; }
.pills ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0; margin: 0; list-style: none; }

/* Story */
.story { padding-block: 12vh 6vh; }
.story .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.verbs { position: sticky; top: 28vh; align-self: start; display: grid; gap: 10px; }
.verbs h2 { font-size: clamp(28px, 3.2vw, 42px); color: #8b8d96; transition: color .5s var(--ease); }
.verbs h2.on { color: var(--text); }
.verbs p { margin-top: 16px; color: var(--t2); max-width: 30ch; min-height: 3.4em; }
.scenes { display: grid; gap: 20vh; padding-block: 6vh 12vh; }
.scene { background: var(--s1); border-radius: 12px; box-shadow: 0 0 0 1px var(--line); padding: 24px; display: grid; gap: 16px; min-width: 0; }
.term { font-family: var(--mono); font-size: 13px; color: var(--t2); direction: ltr; text-align: left; background: rgba(0,0,0,.28); border-radius: 9px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--line); overflow-x: auto; white-space: nowrap; }
.term::before { content: "$ "; color: var(--t3); }
.explain { font-size: 18px; line-height: 1.4; letter-spacing: -.01em; min-height: 2.8em; }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--warm); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fact path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .5s ease-out; }
.fact path.draw, .no-js .fact path { stroke-dashoffset: 0; }
.fact circle { fill: rgba(127,194,154,.14); }
.scene footer { display: flex; gap: 8px; flex-wrap: wrap; }
.mini { min-height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line2); color: var(--t2); font-size: 13px; display: inline-flex; align-items: center; }
.mini.solid { background: var(--btn); color: var(--on-accent); box-shadow: none; font-weight: 600; }

/* Numbers */
.numbers { padding-block: 9vh; border-block: 1px solid var(--line); }
.numbers .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.stat b { display: block; font-weight: 400; font-size: clamp(34px, 3.8vw, 52px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat b small { font-size: .4em; letter-spacing: 0; color: var(--t2); margin-inline-start: 6px; }
.stat > span { display: block; margin-top: 10px; color: var(--t2); max-width: 24ch; font-size: 14.5px; }
.note-fine { font-size: 12.5px; color: var(--t3); margin-top: 28px; }

@media (max-width: 900px) {
  .demo-note .d-only { display: none; }
  .demo-note .m-only { display: inline-flex; }
  .hero { padding-top: 96px; }
  #expand { display: none; }
  .win { transform: none !important; }
  .win iframe { display: none; }
  .win .poster { opacity: 1 !important; }
  .persp { margin-top: 34px; }
  .pills ul, .numbers .stats { grid-template-columns: 1fr; }
  .story .wrap { grid-template-columns: 1fr; gap: 24px; }
  .verbs { position: relative; top: 0; }
  .scenes { gap: 28px; padding-block: 0; }
}
@media (prefers-reduced-motion: reduce) { .win { transform: none !important; } .fact path { stroke-dashoffset: 0; transition: none; } }