/* /app-launch/ — Orbit bento grid. Dark, calm, three accent colours (violet / mint / coral) shared with the rings. */
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
.bn-page {
  --pg-bg: #0b0c0f; --pg-ink: #eef0f4; --f-display: "Geist", system-ui, sans-serif; --h-weight: 700;
  --tile: #14161b; --tile-2: #1a1d23; --line: rgba(255, 255, 255, .08); --muted: #8d93a0;
  --v: #8b7bff; --m: #5ef2c2; --c: #ff7a59; --y: #ffd166;
  --bar-bg: #0b0c0f; --bar-fg: #eef0f4; --tag: #5ef2c2; --btn-bg: #eef0f4; --btn-fg: #0b0c0f; --order-bg: #14161b; --order-fg: #eef0f4;
  font-family: "Geist", system-ui, sans-serif;
}
.bn-page h1, .bn-page h2, .bn-page h3 { letter-spacing: -.04em; }
.bn-page .dm-bar { border-bottom: 1px solid var(--line); }
.bn-page .dm-bar__name { display: inline-flex; align-items: center; gap: .5rem; font: 700 1.3rem "Geist", sans-serif; letter-spacing: -.05em; }
.bn-logo { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--v); box-shadow: 6px -4px 0 -4px var(--m); }
.bn-pill { display: inline-block; margin: 0; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: .8rem; color: var(--muted); }

/* ---------- Hero ---------- */
.bn-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; padding: 5rem max(24px, (100vw - 1200px) / 2) 4rem; position: relative; overflow: hidden; }
.bn-hero::before { content: ""; position: absolute; width: 900px; height: 900px; right: -200px; top: -300px; background: radial-gradient(closest-side, rgba(139, 123, 255, .28), transparent); pointer-events: none; }
.bn-hero h1 { font-size: clamp(3.2rem, 7vw, 6.4rem); line-height: .95; margin: 1.2rem 0 1.2rem; }
.bn-hero h1 span { background: linear-gradient(90deg, var(--v), var(--m)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bn-lead { font-size: 1.15rem; color: var(--muted); max-width: 30rem; margin: 0 0 1.8rem; }
.bn-cta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.bn-ghost { color: var(--pg-ink); text-decoration: none; font-weight: 600; }
.bn-ghost::after { content: " →"; }
.bn-rating { margin: 1.6rem 0 0; color: var(--y); font-size: .9rem; } .bn-rating b { color: var(--pg-ink); } .bn-rating span { color: var(--muted); }

.bn-phone { justify-self: center; width: min(300px, 70vw); aspect-ratio: 9 / 19; border-radius: 46px; padding: 12px; background: linear-gradient(145deg, #2a2d35, #0f1014); box-shadow: 0 50px 100px -40px rgba(139, 123, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .12); position: relative; z-index: 1;
  transform: rotate(-4deg) translateY(30px); opacity: 0; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .8s; }
.bn-phone.in { transform: rotate(-4deg); opacity: 1; }
.bn-phone__screen { height: 100%; border-radius: 36px; background: #0d0f13; padding: 2.4rem 1.1rem 1rem; display: grid; align-content: start; gap: 1rem; overflow: hidden; }
.bn-phone__hi { margin: 0; font-weight: 600; font-size: 1.05rem; }
.bn-rings--phone { width: 70%; justify-self: center; }
.bn-phone__stats { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); } .bn-phone__stats b { display: block; font-size: 1.1rem; color: var(--pg-ink); }
.bn-phone__card { display: flex; gap: .7rem; align-items: center; padding: .7rem; border-radius: 16px; background: var(--tile-2); font-size: .78rem; }
.bn-phone__card i { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--v), var(--m)); flex: none; }
.bn-phone__card--2 i { background: linear-gradient(135deg, var(--c), var(--y)); }
.bn-phone__card span { display: block; color: var(--muted); font-size: .7rem; }

/* rings (shared) */
.bn-rings { transform: rotate(-90deg); }
.bn-rings circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.bn-rings .t { stroke: rgba(255, 255, 255, .06); }
.bn-rings .r1, .bn-rings .r2, .bn-rings .r3 { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1); }
.bn-rings .r1 { stroke: var(--c); } .bn-rings .r2 { stroke: var(--m); transition-delay: .15s; } .bn-rings .r3 { stroke: var(--v); transition-delay: .3s; }
.in .bn-rings .r1 { stroke-dashoffset: 19; } .in .bn-rings .r2 { stroke-dashoffset: 29; } .in .bn-rings .r3 { stroke-dashoffset: 17; }

/* ---------- Bento grid ---------- */
.bn-sec { padding: 5rem max(16px, (100vw - 1200px) / 2); }
.bn-head { text-align: center; margin-bottom: 2.6rem; }
.bn-head h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin: 1rem 0 0; }
.bn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 14px;
  grid-template-areas: "rings rings heart heart" "rings rings streak timer" "sleep sleep board classes" "route route board classes" "route route sync sync"; }
.bn-tile { position: relative; border-radius: 26px; padding: 1.4rem; background: var(--tile); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(26px); transition: opacity .7s calc(var(--i, 0) * .09s), transform .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * .09s), border-color .3s; will-change: transform; }
.bn-tile.in { opacity: 1; transform: none; }
.bn-tile.in:hover { transition: transform .15s ease-out, border-color .3s; border-color: rgba(255, 255, 255, .16); }
.bn-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 123, 255, .16), transparent 45%); }
.bn-tile:hover::before { opacity: 1; }
.bn-k { margin: 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bn-tile h3 { margin: .35rem 0 0; font-size: 1.45rem; }
.bn-tile h3 small { font-size: .8rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.bn-note { margin: auto 0 0; padding-top: .8rem; font-size: .85rem; color: var(--muted); }
.bn-tile--rings { grid-area: rings; } .bn-tile--heart { grid-area: heart; } .bn-tile--streak { grid-area: streak; } .bn-tile--timer { grid-area: timer; }
.bn-tile--sleep { grid-area: sleep; } .bn-tile--board { grid-area: board; } .bn-tile--classes { grid-area: classes; } .bn-tile--route { grid-area: route; } .bn-tile--sync { grid-area: sync; }

.bn-tile--rings h3 { font-size: 2rem; }
.bn-rings-wrap { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
.bn-rings-wrap .bn-rings { width: 100%; max-width: 300px; justify-self: center; }
.bn-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; font-size: .9rem; color: var(--muted); }
.bn-legend li { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; }
.bn-legend i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; margin-top: .35rem; } .c1 { background: var(--c); } .c2 { background: var(--m); } .c3 { background: var(--v); }
.bn-legend b { color: var(--pg-ink); font-size: 1.15rem; }

.bn-bpm { font-size: 2.4rem; color: var(--c); font-variant-numeric: tabular-nums; }
.bn-ecg { width: 100%; height: 90px; margin-top: .6rem; }
.bn-ecg path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 122, 89, .6)); vector-effect: non-scaling-stroke; }

.bn-cal { margin-top: auto; padding-top: 1rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bn-cal i { aspect-ratio: 1; border-radius: 5px; background: rgba(255, 255, 255, .06); transition: background .3s calc(var(--d) * 35ms), transform .3s calc(var(--d) * 35ms); }
.in .bn-cal i.on { background: var(--m); }
.bn-cal i.today { box-shadow: 0 0 0 2px var(--pg-ink); }
.in .bn-cal i.today { animation: bn-pulse 1.6s 1.4s infinite; }
@keyframes bn-pulse { 50% { box-shadow: 0 0 0 5px rgba(94, 242, 194, .25); } }

.bn-timer { flex: 1; display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: center; margin-top: .6rem; }
.bn-timer svg { transform: rotate(-90deg); } .bn-timer circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.bn-timer .t { stroke: rgba(255, 255, 255, .06); } .bn-timer .p { stroke: var(--y); stroke-dasharray: 100; transition: stroke-dashoffset 1s linear; }
.bn-t { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .bn-ex { font-size: .85rem; color: var(--muted); }

.bn-bars { flex: 1; min-height: 90px; margin-top: 1rem; display: flex; align-items: flex-end; gap: 4px; }
.bn-bars i { flex: 1; border-radius: 4px 4px 2px 2px; height: 4%; transition: height .8s cubic-bezier(.2, .8, .2, 1) calc(var(--d) * 30ms); }
.in .bn-bars i { height: var(--h); }
.bn-bars .s0 { background: #3a3f4b; } .bn-bars .s1 { background: #7cc6ff; } .bn-bars .s2 { background: var(--v); } .bn-bars .s3 { background: #4b3fc9; }

.bn-board { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; counter-reset: b; }
.bn-board li { counter-increment: b; display: grid; grid-template-columns: 1.2rem 30px 1fr auto; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 14px; background: var(--tile-2); font-size: .9rem; }
.bn-board li::before { content: counter(b); color: var(--muted); font-size: .8rem; text-align: center; }
.bn-board li:first-child { box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .35); } .bn-board li:first-child::before { content: "★"; color: var(--y); }
.bn-board i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #0b0c0f; font-size: .8rem; }
.bn-board b { font-variant-numeric: tabular-nums; }

.bn-map { width: 100%; height: auto; margin-top: .8rem; border-radius: 16px; background: #10151a; }
.bn-map__roads { stroke: rgba(255, 255, 255, .07); stroke-width: 8; fill: none; }
.bn-map__run { fill: none; stroke: var(--m); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(94, 242, 194, .6)); }
.bn-map__dot { fill: #fff; stroke: var(--m); stroke-width: 3; }

.bn-classes { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.bn-classes li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .75rem; border-radius: 14px; background: var(--tile-2); font-size: .88rem; }
.bn-classes span { display: block; font-size: .75rem; color: var(--muted); } .bn-classes em { font-style: normal; color: var(--pg-ink); }
.bn-classes button { border: 0; border-radius: 999px; padding: .45rem .8rem; background: var(--pg-ink); color: #0b0c0f; font: 600 .78rem "Geist", sans-serif; cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s; }
.bn-classes button:hover { transform: scale(1.05); }
.bn-classes button.on { background: var(--m); }

.bn-tile--sync { flex-direction: row; align-items: center; gap: 1.4rem; }
.bn-tile--sync h3 { font-size: 1.3rem; } .bn-tile--sync .bn-note { margin: 0; padding: .3rem 0 0; }
.bn-orbit { position: relative; width: 110px; height: 110px; flex: none; }
.bn-orbit b { position: absolute; inset: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--v), var(--m)); box-shadow: 0 0 30px rgba(139, 123, 255, .6); }
.bn-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .15); animation: bn-spin 8s linear infinite; }
.bn-orbit i::after { content: ""; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--m); }
.bn-orbit i:nth-child(2) { inset: 14px; animation-duration: 5s; animation-direction: reverse; } .bn-orbit i:nth-child(2)::after { background: var(--c); }
.bn-orbit i:nth-child(3) { inset: 26px; animation-duration: 3.4s; } .bn-orbit i:nth-child(3)::after { background: var(--y); width: 7px; height: 7px; top: -3.5px; }
@keyframes bn-spin { to { transform: rotate(360deg); } }
.bn-section-dim { color: var(--muted); }

/* ---------- Pricing ---------- */
.bn-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 820px; margin: 0 auto 1.4rem; }
.bn-price { padding: 1.8rem; border-radius: 26px; background: var(--tile); border: 1px solid var(--line); }
.bn-price h3 { margin: 0; font-size: 1.1rem; color: var(--muted); }
.bn-price > b { display: block; margin: .5rem 0 1rem; font-size: 2.8rem; letter-spacing: -.04em; } .bn-price small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.bn-price ul { margin: 0; padding-left: 1.1rem; color: var(--muted); display: grid; gap: .4rem; }
.bn-price--plus { background: linear-gradient(160deg, rgba(139, 123, 255, .22), var(--tile) 55%); border-color: rgba(139, 123, 255, .4); }
.bn-order { max-width: 820px; margin: 0 auto; border: 1px solid var(--line); }
.bn-order .dm-note { background: rgba(94, 242, 194, .08); border-color: rgba(94, 242, 194, .3); }

@media (max-width: 960px) {
  .bn-hero { grid-template-columns: minmax(0, 1fr); padding-top: 3rem; }
  .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "rings rings" "heart heart" "streak timer" "sleep sleep" "board board" "classes classes" "route route" "sync sync"; grid-auto-rows: auto; }
  .bn-tile { min-height: 180px; }
  .bn-prices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bn-rings-wrap { grid-template-columns: minmax(0, 1fr); }
  .bn-rings-wrap .bn-rings { max-width: 220px; }
  .bn-timer { grid-template-columns: 70px 1fr; } .bn-t { font-size: 1.5rem; }
  .bn-tile--sync { flex-direction: column; align-items: flex-start; gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .bn-tile, .bn-phone { opacity: 1; transform: none; transition: none; } .bn-orbit i { animation: none; } }

/* Own fonts (not the studio's Hanken Grotesk / IBM Plex Mono): body text and labels */
.bn-page { --f-body: "Geist", system-ui, sans-serif; --f-mono: "Geist", system-ui, sans-serif; }