/* The homepage (16 Oct 2026). House style (cub-site.css), pushed for a front
   page. Every class starts with hm- so the injected theme leaves it alone.
   Performance: no backdrop-filter, no blend modes, no large animated blurs;
   motion is transform/opacity only, and paused while off screen.
   Reduced motion stops movement; it never hides anything. */

@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/files/oswald-700.woff2) format('woff2'); }

.hm-body { background: #08090b; }
.hm { --hm-red: #d10a10; --hm-red-d: #a50f12; --hm-ink: #dfe2e6; --hm-dim: #9aa2ac; --hm-mute: #6b737e;
  --hm-line: #1c2027; --hm-panel: #0d0f12; --hm-mono: 'JetBrains Mono', ui-monospace, monospace;
  --hm-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --hm-disp: 'Oswald', 'Space Grotesk', var(--hm-sans);
  color: var(--hm-ink); font-family: var(--hm-sans); overflow-x: clip; }
.hm a { color: inherit; }
.hm-wrap { max-width: 1220px; margin: 0 auto; padding: 0 20px; position: relative; }
.hm-eyebrow { font: 600 .72rem/1.4 var(--hm-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--hm-red); display: flex; align-items: center; gap: 10px; }
.hm-eyebrow { flex-wrap: wrap; row-gap: 4px; }
.hm-eyebrow > span, .hm-eyebrow i { white-space: nowrap; }
.hm-eyebrow i { font-style: normal; color: var(--hm-mute); letter-spacing: .14em; }
.hm-red { color: var(--hm-red); }

/* buttons */
.hm-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hm-cta-c { justify-content: center; }
.hm-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font: 600 .78rem/1 var(--hm-mono);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--hm-ink); background: #0f1115;
  border: 1px solid #262b33; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.hm-btn:hover { transform: translateY(-2px); border-color: var(--hm-red); }
.hm-btn-red { background: var(--hm-red-d); border-color: var(--hm-red-d); color: #fff; box-shadow: 0 10px 30px -10px rgba(209,10,16,.6); }
.hm-btn-red:hover { background: var(--hm-red); box-shadow: 0 14px 40px -10px rgba(209,10,16,.8); }
.hm-btn-lg { padding: 18px 28px; font-size: .84rem; }
.hm-btn span { transition: transform .18s ease; }
.hm-btn:hover span { transform: translateX(4px); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hm-hero { position: relative; padding: 96px 0 56px; min-height: min(100vh, 980px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
/* A flex column shrinks auto-margined children to their content: keep the wraps full width. */
.hm-hero > .hm-wrap { width: 100%; }
.hm-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hm-grid { position: absolute; inset: -2px; 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: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); animation: hmGrid 18s linear infinite; }
@keyframes hmGrid { to { background-position: 56px 56px, 56px 56px; } }
.hm-glow { position: absolute; width: 900px; height: 900px; right: -180px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(209,10,16,.22) 0%, rgba(165,15,18,.08) 38%, transparent 68%); }
.hm-scan { position: absolute; left: 0; right: 0; height: 160px; top: -160px;
  background: linear-gradient(180deg, transparent, rgba(209,10,16,.06), transparent); animation: hmScan 7s linear infinite; will-change: transform; }
@keyframes hmScan { to { transform: translateY(1200px); } }
.hm-embers { position: absolute; inset: 0; width: 100%; height: 100%; }

.hm-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f9e63; box-shadow: 0 0 0 0 rgba(63,158,99,.6); animation: hmPing 2s infinite; }
@keyframes hmPing { 70% { box-shadow: 0 0 0 10px rgba(63,158,99,0); } 100% { box-shadow: 0 0 0 0 rgba(63,158,99,0); } }
.hm-title { font: 700 clamp(2.9rem, 7.2vw, 6.2rem)/.94 var(--hm-disp); text-transform: uppercase; letter-spacing: .005em; margin: 22px 0 24px; }
.hm-line { display: block; }
.hm-title .hm-red { text-shadow: 0 0 40px rgba(209,10,16,.35); }
.hm-lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65; color: var(--hm-dim); max-width: 600px; margin: 0; }

.hm-hero-art { display: flex; justify-content: center; perspective: 900px; }
.hm-bear-stage { position: relative; width: min(440px, 80vw); aspect-ratio: 1; transform-style: preserve-3d; transition: transform .25s ease-out; }
.hm-bear { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; transform: translateZ(40px);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); animation: hmFloat 6s ease-in-out infinite; }
@keyframes hmFloat { 50% { transform: translateZ(40px) translateY(-12px); } }
.hm-bear-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(209,10,16,.45), transparent 65%);
  animation: hmBreathe 4s ease-in-out infinite; }
@keyframes hmBreathe { 50% { opacity: .55; transform: scale(1.08); } }
.hm-ring { position: absolute; inset: 0; border-radius: 50%; }
.hm-ring-1 { border: 1px solid rgba(209,10,16,.35); border-top-color: var(--hm-red); border-right-color: transparent; animation: hmSpin 14s linear infinite; }
.hm-ring-2 { inset: 6%; border: 1px dashed rgba(255,255,255,.12); animation: hmSpin 40s linear infinite reverse; }
@keyframes hmSpin { to { transform: rotate(360deg); } }
.hm-chip { position: absolute; font: 600 .66rem/1 var(--hm-mono); letter-spacing: .16em; padding: 8px 11px; background: #0d0f12;
  border: 1px solid #2a2f37; color: var(--hm-ink); transform: translateZ(70px); white-space: nowrap; animation: hmBob 5s ease-in-out infinite; }
.hm-chip::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--hm-red); margin-right: 8px; vertical-align: 1px; }
.hm-chip-1 { top: 10%; left: -4%; }
.hm-chip-2 { top: 22%; right: -8%; animation-delay: -1.2s; }
.hm-chip-3 { bottom: 18%; left: -10%; animation-delay: -2.4s; }
.hm-chip-4 { bottom: 6%; right: 2%; animation-delay: -3.6s; }
@keyframes hmBob { 50% { transform: translateZ(70px) translateY(-8px); } }

.hm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 64px 0 0; border: 1px solid var(--hm-line); background: rgba(13,15,18,.86); }
.hm-stats div { padding: 22px 18px; border-right: 1px solid var(--hm-line); position: relative; overflow: hidden; text-align: center; }
.hm-stats div:last-child { border-right: 0; }
.hm-stats div::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--hm-red); transition: width 1.2s ease; }
.hm-stats.is-in div::after { width: 100%; }
.hm-stats dt { font: 600 .66rem/1.3 var(--hm-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hm-mute); }
.hm-stats dd { margin: 8px 0 0; font: 700 clamp(1.6rem, 3vw, 2.3rem)/1 var(--hm-disp); color: var(--hm-ink); font-variant-numeric: tabular-nums; }
.hm-stat-today { margin: 6px 0 0; font: 600 .72rem/1.2 var(--hm-mono); letter-spacing: .08em; color: var(--hm-mute); font-variant-numeric: tabular-nums; }
.hm-stat-today.is-up { color: #3ba55c; }
.hm-stat-today.is-down { color: var(--hm-red); }

/* ── ticker ───────────────────────────────────────────────────────────── */
.hm-ticker { border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); background: #0b0c0f; padding: 14px 0; 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); }
.hm-tick-row { overflow: hidden; padding: 5px 0; }
.hm-tick-track { display: flex; width: max-content; animation: hmTick 90s linear infinite; }
.hm-tick-rev .hm-tick-track { animation-direction: reverse; animation-duration: 110s; }
.hm-tick-track span { font: 600 .8rem/1 var(--hm-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hm-mute); padding: 0 22px; white-space: nowrap; }
.hm-tick-track span::after { content: '✦'; color: var(--hm-red); margin-left: 44px; font-size: .6rem; vertical-align: 2px; }
.hm-ticker:hover .hm-tick-track { animation-play-state: paused; }
@keyframes hmTick { to { transform: translateX(-50%); } }

/* ── sections ─────────────────────────────────────────────────────────── */
.hm-sec { padding: 110px 0; border-top: 1px solid var(--hm-line); }
.hm-sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin: 0 auto 48px; max-width: 760px; }
.hm-sec-head .hm-eyebrow { justify-content: center; }
.hm-sec-head h2, .hm-about h2, .hm-final h2 { font: 700 clamp(2rem, 4.6vw, 3.4rem)/1 var(--hm-disp); text-transform: uppercase; margin: 14px 0 0; letter-spacing: .01em; }
.hm-sec-head p { margin: 16px auto 0; color: var(--hm-dim); max-width: 560px; font-size: 1rem; line-height: 1.65; }
.hm-sec-head p a { color: var(--hm-red); text-decoration: none; font: 600 .8rem var(--hm-mono); letter-spacing: .14em; text-transform: uppercase; }
.hm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.hm-reveal.is-in { opacity: 1; transform: none; }

/* showcase */
.hm-show { border: 1px solid var(--hm-line); background: var(--hm-panel); }
.hm-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--hm-line); }
.hm-tab { position: relative; text-align: left; padding: 18px 20px 20px; background: transparent; border: 0; border-right: 1px solid var(--hm-line); color: var(--hm-mute); cursor: pointer; font: inherit; transition: color .2s, background .2s; }
.hm-tab:last-child { border-right: 0; }
.hm-tab b { display: block; font: 700 1.02rem/1.2 var(--hm-sans); color: inherit; }
.hm-tab small { font: 600 .64rem var(--hm-mono); letter-spacing: .16em; text-transform: uppercase; }
.hm-tab:hover { color: var(--hm-ink); background: #111318; }
.hm-tab.is-on { color: var(--hm-ink); background: #12141a; }
.hm-tab-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--hm-red); }
.hm-tab.is-on .hm-tab-bar { width: 100%; transition: width 7s linear; }
.hm-show.is-paused .hm-tab.is-on .hm-tab-bar, .hm-show.is-manual .hm-tab.is-on .hm-tab-bar { transition: none; width: 100%; }
/* Text starts at the same height on every tab (owner: CUB Studio's sat higher
   because centring moved it with the length of its text). */
.hm-pane { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; padding: 44px; align-items: start; }
.hm-pane-copy { padding-top: 8px; }
.hm-pane[hidden] { display: none; }
.hm-pane.is-on .hm-pane-copy > *, .hm-pane.is-on .hm-frame { animation: hmIn .6s ease both; }
.hm-pane.is-on .hm-pane-copy > *:nth-child(2) { animation-delay: .05s; }
.hm-pane.is-on .hm-pane-copy > *:nth-child(3) { animation-delay: .1s; }
.hm-pane.is-on .hm-pane-copy > *:nth-child(4) { animation-delay: .15s; }
.hm-pane.is-on .hm-frame { animation-delay: .08s; }
@keyframes hmIn { from { opacity: 0; transform: translateY(14px); } }
.hm-pane h3 { font: 700 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--hm-disp); text-transform: uppercase; margin: 12px 0 14px; }
.hm-pane p { color: var(--hm-dim); line-height: 1.7; margin: 0 0 18px; }
.hm-pane ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.hm-pane li { display: flex; gap: 10px; align-items: baseline; color: var(--hm-ink); font-size: .95rem; }
.hm-pane li::before { content: '▸'; color: var(--hm-red); font-size: .8rem; }
.hm-frame { display: block; border: 1px solid #262b33; background: #0a0b0e; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transition: transform .5s ease; text-decoration: none; }
.hm-frame:hover { transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-4px); }
.hm-frame-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #1c2027; background: #0f1115; }
.hm-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a2f37; }
.hm-frame-bar i:first-child { background: var(--hm-red-d); }
.hm-frame-bar span { margin-left: 10px; font: .66rem var(--hm-mono); color: var(--hm-mute); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-frame { background: #0a0b0e linear-gradient(110deg, #0d0f12 30%, #15181d 50%, #0d0f12 70%) 0 0 / 300% 100%; }
.hm-frame img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }

/* right now */
.hm-now-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-card { display: flex; flex-direction: column; background: var(--hm-panel); border: 1px solid var(--hm-line); padding: 22px; text-decoration: none; min-height: 220px;
  transition: border-color .2s, transform .2s; position: relative; overflow: hidden; }
a.hm-card:hover { border-color: var(--hm-red-d); transform: translateY(-3px); }
.hm-card-h { display: flex; justify-content: space-between; align-items: center; font: 600 .66rem var(--hm-mono); letter-spacing: .18em; color: var(--hm-mute); margin-bottom: 22px; }
.hm-big { font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--hm-disp); text-transform: uppercase; color: var(--hm-ink); }
.hm-card p { color: var(--hm-dim); margin: 10px 0 auto; font-size: .92rem; line-height: 1.5; }
.hm-more { margin-top: 18px; font: 600 .7rem var(--hm-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-red); }
.hm-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--hm-mute); }
.hm-pulse[data-state="ok"] { background: #3f9e63; animation: hmPing 2s infinite; }
.hm-pulse[data-state="bad"] { background: #e0a020; }
.hm-song { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; }
.hm-eq i { width: 3px; background: var(--hm-red); height: 30%; animation: hmEq 1s ease-in-out infinite; }
.hm-eq i:nth-child(2) { animation-delay: -.2s; } .hm-eq i:nth-child(3) { animation-delay: -.5s; }
.hm-eq i:nth-child(4) { animation-delay: -.7s; } .hm-eq i:nth-child(5) { animation-delay: -.35s; }
@keyframes hmEq { 50% { height: 100%; } }
.hm-term { padding: 0; }
.hm-term .hm-card-h { padding: 14px 18px 12px; margin: 0; border-bottom: 1px solid var(--hm-line); }
.hm-term-body { margin: 0; padding: 18px; font: .82rem/1.85 var(--hm-mono); color: var(--hm-dim); white-space: pre-wrap; min-height: 150px; }
.hm-term-body b { color: var(--hm-ink); font-weight: 600; }
.hm-term-body .p { color: var(--hm-red); } .hm-term-body .ok { color: #3f9e63; }
.hm-caret { display: inline-block; width: 8px; height: 1em; background: var(--hm-red); vertical-align: -2px; animation: hmBlink 1s steps(1) infinite; }
@keyframes hmBlink { 50% { opacity: 0; } }

/* rules */
.hm-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--hm-line); }
.hm-rule { padding: 34px 30px 36px; border-right: 1px solid var(--hm-line); background: var(--hm-panel); position: relative; transition: background .25s; }
.hm-rule:last-child { border-right: 0; }
.hm-rule:hover { background: #111318; }
.hm-rule-n { display: block; font: 700 4.6rem/1 var(--hm-disp); color: transparent; -webkit-text-stroke: 1px rgba(209,10,16,.7); margin-bottom: 18px; }
.hm-rule h3 { font: 700 1.25rem/1.25 var(--hm-sans); margin: 0 0 12px; }
.hm-rule p { color: var(--hm-dim); line-height: 1.7; margin: 0; font-size: .95rem; }

/* bento */
.hm-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-tile { position: relative; display: flex; flex-direction: column; padding: 22px; min-height: 190px; background: var(--hm-panel); border: 1px solid var(--hm-line);
  text-decoration: none; overflow: hidden; transition: border-color .2s, transform .2s; }
.hm-tile::before { content: ''; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(209,10,16,.18), transparent 70%); opacity: 0; transition: opacity .3s; }
.hm-tile:hover { border-color: var(--hm-red-d); transform: translateY(-3px); }
.hm-tile:hover::before { opacity: 1; }
.hm-tile-n { font: 700 2.4rem/1 var(--hm-disp); color: var(--hm-red); }
.hm-tile h3 { margin: 12px 0 6px; font: 700 1.05rem var(--hm-sans); }
.hm-tile p { margin: 0 0 12px; color: var(--hm-dim); font-size: .88rem; line-height: 1.55; }
.hm-tile small { margin-top: auto; font: .66rem/1.6 var(--hm-mono); letter-spacing: .06em; color: var(--hm-mute); }
.hm-tile-bots, .hm-tile-streaming, .hm-tile-developer, .hm-tile-games { grid-column: span 2; }

/* about */
.hm-about { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; max-width: 820px; }
.hm-about .hm-eyebrow, .hm-about .hm-cta { justify-content: center; }
.hm-about p { margin-left: auto; margin-right: auto; }
.hm-about-art { position: relative; display: flex; justify-content: center; }
.hm-about-art::before { content: ''; position: absolute; inset: -10%; border-radius: 50%; border: 1px dashed rgba(209,10,16,.35); animation: hmSpin 30s linear infinite; }
.hm-about-art img { width: 200px; height: 200px; position: relative; }
.hm-about p { color: var(--hm-dim); line-height: 1.75; max-width: 720px; font-size: 1.02rem; }
.hm-about p b { color: var(--hm-ink); }

/* supporters */
.hm-supp-list { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-supp-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 20px; background: var(--hm-panel); border: 1px solid var(--hm-line); min-width: 220px; max-width: 380px; }
.hm-supp-item b { font-size: .98rem; }
.hm-supp-item span { font: .7rem var(--hm-mono); color: var(--hm-mute); letter-spacing: .08em; }
.hm-supp-item q { color: var(--hm-dim); font-size: .9rem; line-height: 1.5; }

/* final */
.hm-final { position: relative; text-align: center; padding: 140px 0 150px; border-top: 1px solid var(--hm-line); overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(165,15,18,.25), transparent 70%); }
.hm-final-bear { position: absolute; z-index: -1; left: 50%; top: 50%; width: 620px; height: 620px; transform: translate(-50%, -50%);
  background: url('/static/images/brand/cub-bear-512.png') center / contain no-repeat; opacity: .06; }
.hm-final .hm-eyebrow { justify-content: center; }
.hm-final h2 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.hm-final p { color: var(--hm-dim); max-width: 560px; margin: 18px auto 0; line-height: 1.7; font-size: 1.05rem; }

/* ── small screens ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hm-hero-in { grid-template-columns: minmax(0, 1fr); }
  .hm-hero-art { order: -1; }
  .hm-bear-stage { width: min(300px, 70vw); }
  .hm-pane { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .hm-frame { transform: none; }
  .hm-now-grid, .hm-rules { grid-template-columns: minmax(0, 1fr); }
  .hm-rule { border-right: 0; border-bottom: 1px solid var(--hm-line); }
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tile-bots, .hm-tile-streaming, .hm-tile-developer, .hm-tile-games { grid-column: span 2; }
  .hm-tabs { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 640px) {
  .hm-wrap { padding: 0 16px; }
  .hm-hero { padding: 36px 0 32px; min-height: 0; }
  .hm-bear-stage { width: min(230px, 62vw); }
  .hm-chip { font-size: .58rem; padding: 6px 8px; }
  .hm-chip-1, .hm-chip-3 { left: 0; } .hm-chip-2 { right: 0; }
  .hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-stats div { border-bottom: 1px solid var(--hm-line); }
  /* Two columns fit four: phones show the server count, not the tools count (owner, 2 Nov 2026) */
  .hm-stats:has(.hm-stat-cp) .hm-stat-tools { display: none; }
  .hm-sec { padding: 72px 0; }
  .hm-bento { grid-template-columns: minmax(0, 1fr); }
  .hm-tile-bots, .hm-tile-streaming, .hm-tile-developer, .hm-tile-games { grid-column: auto; }
  .hm-about-art img { width: 150px; height: 150px; }
  .hm-final { padding: 96px 0 104px; }
  .hm-final-bear { width: 380px; height: 380px; }
}

/* Reduced motion = calmer, not still (16 Oct 2026). The owner's desktop has
   Windows animation effects off and they want the page alive, so fades,
   counters, typing, the demos and gentle loops keep going; only big movement
   (tilt, floating, embers, scan sweep, glitch) stops. Nothing is ever hidden. */
@media (prefers-reduced-motion: reduce) {
  .hm-embers, .hm-scan { display: none; }
  .hm-bear, .hm-chip, .hm-grid, .hm-bear-stage::after, .hm-cat-ico { animation: none !important; }
  .hm-frame, .hm-frame:hover { transform: none; }
  .hm-reveal { transform: none !important; }
}
@media print { .hm-hero-bg, .hm-ticker { display: none; } }

/* ── pass 2 (16 Oct 2026) ─────────────────────────────────────────────── */
/* live line in the hero */
.hm-liveline { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.hm-liveline a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: .78rem/1.3 var(--hm-mono); color: var(--hm-dim); letter-spacing: .04em; max-width: 100%; }
.hm-liveline a:hover { color: var(--hm-ink); }
/* The whole song shows, wrapping if it must (owner: "its not displaying it all"). */
.hm-liveline a { align-items: flex-start; }
.hm-liveline span:last-child { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.hm-liveline .hm-pulse, .hm-liveline .hm-eq { margin-top: 4px; flex: 0 0 auto; }
.hm-liveline .hm-pulse { flex: 0 0 10px; }

/* the glow that follows the pointer across cards */
.hm-glowable { position: relative; isolation: isolate; }
.hm-glowable::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(209,10,16,.14), transparent 60%); }
.hm-glowable:hover::after { opacity: 1; }

/* bear glitch: a split second every few seconds */
.hm-bear-stage::after { content: ''; position: absolute; inset: 7%; background: url('/static/images/brand/cub-bear-512.png') center / contain no-repeat;
  opacity: 0; transform: translateZ(41px); animation: hmGlitch 7s steps(1) infinite; pointer-events: none; mix-blend-mode: normal; }
@keyframes hmGlitch {
  0%, 91%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  92% { opacity: .9; clip-path: inset(18% 0 62% 0); transform: translateZ(41px) translateX(-10px); filter: hue-rotate(-60deg) saturate(3); }
  94% { opacity: .9; clip-path: inset(55% 0 25% 0); transform: translateZ(41px) translateX(12px); filter: hue-rotate(120deg); }
  96% { opacity: .8; clip-path: inset(35% 0 48% 0); transform: translateZ(41px) translateX(-6px); }
}

/* how it works */
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; }
.hm-steps::before { content: ''; position: absolute; top: 34px; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, var(--hm-red-d), var(--hm-red), var(--hm-red-d)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s ease .2s; }
.hm-steps.is-in::before { transform: scaleX(1); }
.hm-step { text-align: center; padding: 0 10px; }
.hm-step-n { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; position: relative; font: 700 1.8rem/1 var(--hm-disp);
  color: #fff; background: #0d0f12; border: 1px solid var(--hm-red); box-shadow: 0 0 0 6px #08090b, 0 0 30px rgba(209,10,16,.35); }
.hm-step h3 { margin: 0 0 10px; font: 700 1.2rem var(--hm-sans); }
.hm-step p { margin: 0 auto; color: var(--hm-dim); line-height: 1.65; max-width: 320px; font-size: .95rem; }
#how .hm-cta { margin-top: 44px; }

/* feature explorer: eight highlight tiles */
.hm-explore { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-cat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 16px; background: var(--hm-panel);
  border: 1px solid var(--hm-line); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.hm-cat:hover, .hm-cat:focus-visible { border-color: var(--hm-red-d); background: #111318; transform: translateY(-3px); }
.hm-cat-ico { font-size: 1.9rem; line-height: 1; }
.hm-cat b { font: 700 1rem var(--hm-sans); color: var(--hm-ink); }
.hm-cat em { font: 600 .7rem var(--hm-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-red); }
@media (max-width: 760px) { .hm-explore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#features .hm-cta { margin-top: 32px; }

/* FAQ */
.hm-faq-wrap { max-width: 860px; }
.hm-faq details { border: 1px solid var(--hm-line); background: var(--hm-panel); margin-bottom: 10px; }
.hm-faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font: 600 1.02rem var(--hm-sans); display: flex; justify-content: space-between; gap: 16px; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: '+'; font: 700 1.2rem/1 var(--hm-mono); color: var(--hm-red); transition: transform .2s; }
.hm-faq details[open] summary::after { transform: rotate(45deg); }
.hm-faq details[open] { border-color: #2a2f37; }
.hm-faq-a { padding: 0 22px 18px; color: var(--hm-dim); line-height: 1.7; font-size: .95rem; }
.hm-faq-a p { margin: 0 0 10px; } .hm-faq-a ul, .hm-faq-a ol { margin: 0 0 10px; padding-left: 20px; }
.hm-faq-a strong { color: var(--hm-ink); } .hm-faq-a code { font-family: var(--hm-mono); font-size: .85em; background: rgba(255,255,255,.06); padding: 1px 5px; color: var(--hm-ink); }

/* centred blocks that used to sit left */
#supporters .hm-supp-list { justify-content: center; }
#supporters .hm-cta { justify-content: center; }
#more .hm-sec-head p a { display: inline-block; margin-top: 4px; }

@media (max-width: 1000px) {
  .hm-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hm-steps::before { display: none; }
}


/* ── product spotlights (16 Oct 2026) ─────────────────────────────────── */
.hm-spot { position: relative; padding: 120px 0; border-top: 1px solid var(--hm-line); overflow: hidden; isolation: isolate; }
.hm-spot::before { content: ''; position: absolute; z-index: -1; width: 760px; height: 760px; border-radius: 50%; top: 50%; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(209,10,16,.13), transparent 65%); }
.hm-spot-cm::before, .hm-spot-rd::before { right: -260px; }
.hm-spot-st::before { left: -260px; background: radial-gradient(circle, rgba(124,58,237,.13), transparent 65%); }
.hm-spot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hm-spot-flip .hm-spot-copy { order: 2; }
.hm-spot h2 { font: 700 clamp(2.3rem, 5vw, 3.9rem)/.98 var(--hm-disp); text-transform: uppercase; margin: 16px 0 20px; }
.hm-spot-copy > p { color: var(--hm-dim); line-height: 1.75; font-size: 1.03rem; margin: 0 0 22px; max-width: 560px; }
.hm-note { color: var(--hm-mute) !important; font: .74rem var(--hm-mono) !important; letter-spacing: .08em; margin-top: 16px !important; }
.hm-ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.hm-ticks li { position: relative; padding-left: 28px; color: var(--hm-dim); line-height: 1.55; }
.hm-ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; font-size: .7rem;
  color: #fff; background: var(--hm-red-d); }
.hm-ticks b { color: var(--hm-ink); }
.hm-mini { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 8px; border: 1px solid var(--hm-line); width: fit-content; max-width: 100%; }
.hm-mini div { padding: 12px 20px; border-right: 1px solid var(--hm-line); }
.hm-mini div:last-child { border-right: 0; }
.hm-mini dt { font: 600 .6rem var(--hm-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hm-mute); }
.hm-mini dd { margin: 4px 0 0; font: 700 1.35rem/1 var(--hm-disp); color: var(--hm-ink); }

/* CleanMe demo: a server that is saved, cleaned (keeping two things) and restored */
.hm-cm-demo { background: #0d0f12; border: 1px solid #262b33; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); max-width: 440px; justify-self: center; width: 100%;
  transform: perspective(1200px) rotateY(-6deg); }
.hm-cm-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--hm-line); font: 700 .78rem var(--hm-mono); letter-spacing: .14em; }
.hm-cm-cmd { color: #fff; background: var(--hm-red-d); padding: 5px 9px; font-size: .72rem; letter-spacing: .06em; transition: background .3s; }
.hm-cm-list { list-style: none; margin: 0; padding: 12px 10px; min-height: 330px; }
.hm-cm-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; color: #b6bcc4; font: .9rem var(--hm-sans);
  transition: opacity .35s ease, transform .35s ease, color .3s, background .3s; }
.hm-cm-list li.cat { color: var(--hm-mute); font: 600 .68rem var(--hm-mono); letter-spacing: .14em; padding-top: 12px; }
.hm-cm-list li.role { font-weight: 600; }
.hm-cm-list li.r1 { color: #e0a020; } .hm-cm-list li.r2 { color: #5aa7ff; } .hm-cm-list li.r3 { color: #8a919b; }
.hm-cm-list li i { font: 700 .6rem var(--hm-mono); font-style: normal; letter-spacing: .14em; color: #3f9e63; border: 1px solid rgba(63,158,99,.5); padding: 2px 6px; opacity: 0; transition: opacity .3s; }
.hm-cm-demo.is-clean li[data-keep] i, .hm-cm-demo.is-gone li[data-keep] i { opacity: 1; }
.hm-cm-demo.is-clean li[data-keep] { background: rgba(63,158,99,.08); }
.hm-cm-list li.gone { opacity: 0; transform: translateX(16px); }
.hm-cm-list li.back { animation: hmBack .45s ease both; }
@keyframes hmBack { from { opacity: 0; transform: translateX(-16px); } }
.hm-cm-foot { padding: 12px 18px; border-top: 1px solid var(--hm-line); font: .76rem var(--hm-mono); color: var(--hm-dim); min-height: 44px; }
.hm-cm-foot .ok { color: #3f9e63; }

/* CUB Studio demo: a stream that changes scenes, with an alert and chat */
.hm-st-demo { width: 100%; max-width: 560px; justify-self: center; transform: perspective(1200px) rotateY(6deg); }
.hm-st-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #2a2f37; background: #050608; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.hm-st-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;
  animation: hmScene 12s infinite; }
.hm-st-scene b { font: 700 clamp(1.4rem, 3vw, 2.2rem) var(--hm-disp); letter-spacing: .06em; color: #fff; }
.hm-st-scene small { font: .7rem var(--hm-mono); letter-spacing: .14em; color: #c9b8ff; text-transform: uppercase; margin-top: 6px; }
.hm-st-scene.s1 { background: radial-gradient(circle at 30% 30%, #3b1d7a, #12081f 70%); }
.hm-st-scene.s2 { background: linear-gradient(160deg, #0f2a3a, #071018); animation-delay: 4s; }
.hm-st-scene.s3 { background: radial-gradient(circle at 70% 40%, #5a0d10, #120405 70%); animation-delay: 8s; }
@keyframes hmScene { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
.hm-st-game { position: absolute; inset: 0; background:
    linear-gradient(transparent 62%, rgba(46,120,60,.7) 62%), radial-gradient(circle at 75% 25%, rgba(255,210,120,.9) 0 5%, transparent 6%),
    linear-gradient(180deg, #2b5f86, #7fb2d6 62%); }
.hm-st-cam { position: absolute; right: 4%; bottom: 6%; width: 22%; aspect-ratio: 1; display: grid; place-items: center; font-size: 2rem;
  background: #111; border: 2px solid #9146ff; }
.hm-st-live { position: absolute; left: 3%; top: 4%; font: 700 .58rem var(--hm-mono); letter-spacing: .12em; color: #fff; background: rgba(0,0,0,.55); padding: 5px 8px; }
.hm-st-live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff2b2b; margin-right: 5px; animation: hmBlink 1.2s steps(1) infinite; }
.hm-st-alert { position: absolute; left: 50%; top: 10%; transform: translate(-50%, -160%); background: #9146ff; color: #fff; padding: 9px 14px; font: .78rem var(--hm-sans);
  box-shadow: 0 10px 30px rgba(145,70,255,.5); white-space: nowrap; animation: hmAlert 12s infinite; animation-delay: 5s; }
@keyframes hmAlert { 0%, 4% { transform: translate(-50%, -160%); } 8%, 22% { transform: translate(-50%, 0); } 26%, 100% { transform: translate(-50%, -160%); } }
.hm-st-chat { position: absolute; left: 3%; bottom: 5%; width: 42%; display: grid; gap: 4px; }
.hm-st-chat p { margin: 0; font: .66rem/1.3 var(--hm-sans); color: #fff; background: rgba(0,0,0,.55); padding: 4px 7px; opacity: 0; animation: hmChat 12s infinite; }
.hm-st-chat p:nth-child(1) { animation-delay: 4.6s; } .hm-st-chat p:nth-child(2) { animation-delay: 5.6s; } .hm-st-chat p:nth-child(3) { animation-delay: 6.4s; }
.hm-st-chat p b { color: #c9b8ff; } .hm-st-chat p.bot b { color: var(--hm-red); }
@keyframes hmChat { 0% { opacity: 0; transform: translateY(6px); } 3%, 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; } }
.hm-st-bar { display: flex; gap: 6px; margin-top: 10px; }
.hm-st-bar span { flex: 1; text-align: center; padding: 8px 4px; font: 600 .62rem var(--hm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-mute);
  background: #0d0f12; border: 1px solid var(--hm-line); }
.hm-st-bar span.on { color: #fff; border-color: #9146ff; }
.hm-st-bar span.rec { flex: 0 0 auto; padding: 8px 12px; color: #ff4d4d; }
.hm-st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.hm-st-grid span { padding: 10px 12px; background: var(--hm-panel); border: 1px solid var(--hm-line); font: .88rem var(--hm-sans); color: var(--hm-ink); }

/* CUB Radio: a record with the bear on its label */
.hm-onair { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--hm-line); background: var(--hm-panel); max-width: 520px; }
.hm-onair .hm-eq { height: 26px; gap: 4px; }
.hm-onair .hm-eq i { width: 4px; }
.hm-onair div { display: flex; flex-direction: column; min-width: 0; }
.hm-onair small { font: 700 .6rem var(--hm-mono); letter-spacing: .18em; color: var(--hm-red); }
.hm-onair b { font: 700 1.15rem/1.25 var(--hm-sans); color: var(--hm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-onair span { color: var(--hm-dim); font-size: .88rem; }
.hm-vinyl-wrap { position: relative; justify-self: center; width: min(440px, 82vw); aspect-ratio: 1; }
.hm-vinyl { position: absolute; inset: 0; border-radius: 50%; animation: hmSpin 6s linear infinite;
  background: repeating-radial-gradient(circle at 50% 50%, #0b0b0d 0 2px, #17181c 2px 4px), #0b0b0d;
  box-shadow: 0 30px 80px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.05); }
.hm-vinyl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 20%, rgba(255,255,255,.07) 25%, transparent 32% 70%, rgba(255,255,255,.05) 75%, transparent 82%); }
.hm-vinyl-label { position: absolute; inset: 31%; border-radius: 50%; background: #a50f12 url('/static/images/brand/cub-bear-256.png') center / 88% no-repeat;
  box-shadow: 0 0 0 6px #7a0b0e; }
.hm-vinyl-label::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #08090b; }
.hm-arm { position: absolute; right: -4%; top: -2%; width: 12%; height: 62%; transform-origin: 50% 8%; transform: rotate(24deg);
  background: linear-gradient(90deg, #8a9099, #d6dae0, #8a9099); clip-path: polygon(40% 0, 60% 0, 60% 86%, 100% 100%, 0 100%, 40% 86%); }

/* community faces */
.hm-faces { display: flex; margin: 0 0 16px; }
.hm-faces img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #0d0f12; margin-left: -10px; background: #1b1e24; }
.hm-faces img:first-child { margin-left: 0; }

@media (max-width: 1000px) {
  .hm-spot { padding: 84px 0; }
  .hm-spot-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hm-spot-flip .hm-spot-copy { order: 0; }
  .hm-cm-demo, .hm-st-demo { transform: none; }
}
@media (max-width: 480px) { .hm-st-grid { grid-template-columns: minmax(0, 1fr); } }


/* feature tiles: cascade in, floating icons, a sweep of light, a pop on hover */
.hm-cat { position: relative; overflow: hidden; }
.hm-cat::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent); transform: skewX(-18deg); animation: hmSweep 8s ease-in-out infinite; }
.hm-cat:nth-child(2)::before { animation-delay: 1s; } .hm-cat:nth-child(3)::before { animation-delay: 2s; } .hm-cat:nth-child(4)::before { animation-delay: 3s; }
.hm-cat:nth-child(5)::before { animation-delay: 4s; } .hm-cat:nth-child(6)::before { animation-delay: 5s; } .hm-cat:nth-child(7)::before { animation-delay: 6s; }
.hm-cat:nth-child(8)::before { animation-delay: 7s; }
@keyframes hmSweep { 0%, 82% { left: -60%; } 100% { left: 130%; } }
.hm-cat-ico { display: inline-block; animation: hmIco 3.6s ease-in-out infinite; }
.hm-cat:nth-child(odd) .hm-cat-ico { animation-delay: -1.8s; }
@keyframes hmIco { 50% { transform: translateY(-5px) rotate(-4deg); } }
.hm-cat:hover .hm-cat-ico { animation: hmPop .5s ease; }
@keyframes hmPop { 40% { transform: scale(1.35) rotate(8deg); } }
.hm-cat:hover em { color: #fff; background: var(--hm-red-d); }
.hm-cat em { padding: 4px 8px; transition: color .2s, background .2s; }
.hm-cat.hm-reveal { transform: translateY(26px) scale(.96); }
.hm-cat.hm-reveal.is-in { transform: none; }

/* Decoding headline: no kerning or ligatures, so the decode never changes its width (see cub-fx.css). */
[data-scramble] { font-kerning: none; font-variant-ligatures: none; }