/* ================================================================
   CardForge splash — obsidian entry experience. Loaded only on
   cardforge/index.html. Tokens inherited from cardforge-base.css :root.
   ================================================================ */

html, body { height: 100%; }
body.cf-splash {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--cf-ob-bg-0);
  color: var(--cf-ob-text-1);
  -webkit-font-smoothing: antialiased;

  /* Bigger splash-specific mini-cards — default is 180×252 @ 0.45
     scale; splash uses 240×336 @ 0.6 scale for more visual weight. */
  --mini-card-scale: 0.6;
  --mini-card-width: 240px;
  --mini-card-height: 336px;
}

/* ---- Top nav ---- */
.cf-splash-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: rgba(7, 9, 12, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cf-ob-line-1);
  /* Self-contained font — pages that don't set body { font-family: Inter }
     (e.g. deck.html) would otherwise inherit the browser default and the
     nav links would render in Times New Roman. */
  font-family: 'Inter', system-ui, sans-serif;
}

.cf-splash-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cf-ob-ember);
}
.cf-splash-nav__brand > span {
  background: linear-gradient(135deg, var(--cf-ob-ember), var(--cf-ob-ember-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cf-splash-nav__brand-mark {
  font-size: 22px;
  color: var(--cf-ob-ember);
  filter: drop-shadow(0 0 8px var(--cf-ob-ember-33, rgba(255, 122, 26, 0.33)));
  transition: filter 0.2s ease;
}
.cf-splash-nav__brand:hover .cf-splash-nav__brand-mark {
  filter: drop-shadow(0 0 14px var(--cf-ob-ember-33, rgba(255, 122, 26, 0.55)));
}

.cf-splash-nav__links {
  display: flex;
  gap: 18px;
  align-items: center;
}
.cf-splash-nav__links a:not(.cf-btn) {
  color: var(--cf-ob-text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  transition: color 0.15s, background 0.15s;
}
.cf-splash-nav__links a:not(.cf-btn):hover { color: var(--cf-ob-text-1); background: rgba(255, 255, 255, 0.04); }
.cf-splash-nav__links a.cf-nav-active { color: var(--cf-ob-ember, #ff7a1a); }

.cf-splash-nav__auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--cf-ob-line-2);
  color: var(--cf-ob-text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cf-splash-nav__auth:hover { border-color: var(--cf-ob-ember-33); color: var(--cf-ob-text-1); }
.cf-splash-nav__auth--user { cursor: default; }
.cf-splash-nav__auth[hidden] { display: none; }
.cf-splash-nav__user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Signed-in avatar + popover menu (mirrors pixel-agents pa-avatar pattern) ---- */
.cf-splash-nav__user-wrap {
  position: relative;
  display: inline-block;
}
.cf-splash-nav__user-wrap[hidden] { display: none; }

.cf-splash-nav__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cf-ob-ember-dim, rgba(255, 122, 26, 0.12));
  border: 1.5px solid var(--cf-ob-ember-33);
  color: var(--cf-ob-ember);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cf-splash-nav__avatar:hover,
.cf-splash-nav__avatar:focus-visible {
  background: var(--cf-ob-ember);
  border-color: var(--cf-ob-ember);
  color: var(--cf-ob-bg-0, #07090c);
  outline: none;
}

.cf-splash-nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--cf-ob-bg-1, #0d1015);
  border: 1px solid var(--cf-ob-line-2);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.cf-splash-nav__menu[hidden] { display: none; }

.cf-splash-nav__menu-meta {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--cf-ob-text-mute, #6b7280);
  border-bottom: 1px solid var(--cf-ob-line-1);
  margin-bottom: 4px;
}
.cf-splash-nav__menu-meta strong {
  display: block;
  margin-top: 2px;
  color: var(--cf-ob-text-1);
  font-weight: 600;
  font-size: 12px;
  word-break: break-all;
}

.cf-splash-nav__menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cf-ob-text-2);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cf-splash-nav__menu-item:hover,
.cf-splash-nav__menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--cf-ob-text-1);
  outline: none;
}
.cf-splash-nav__menu-item i {
  font-size: 12px;
  color: var(--cf-ob-ember);
}

/* ---- Hero section ---- */
.cf-splash-hero {
  min-height: calc(100vh - 65px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 64px 80px;
  position: relative;
  overflow: hidden;
}


.cf-splash-hero__title {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(44px, 6.2vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  margin: 0 0 28px;
}
.cf-splash-hero__title__count {
  font-style: italic;
  color: var(--cf-ob-ember);
  font-weight: 800;
}

.cf-splash-hero__tagline {
  font-size: 16px;
  line-height: 1.55;
  color: var(--cf-ob-text-2);
  max-width: 520px;
  margin: 0 0 28px;
}

/* ---- Combo ticker (flipboard) ---- */
.cf-combo-ticker {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  border: 1px solid var(--cf-ob-line-2);
  margin: 0 0 28px;
  max-width: 540px;
}
.cf-combo-ticker__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--cf-ob-text-mute);
  text-transform: uppercase;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
}
.cf-combo-ticker__digits {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: space-between;
}
.cf-combo-ticker__digit {
  flex: 1;
  min-width: 40px;
  aspect-ratio: 1 / 1.1;
  background: linear-gradient(180deg, var(--cf-ob-bg-3) 0%, var(--cf-ob-bg-3) 49%, rgba(0, 0, 0, 0.4) 50%, var(--cf-ob-bg-3) 51%, var(--cf-ob-bg-3) 100%);
  border: 1px solid var(--cf-ob-line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Unbounded', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--cf-ob-ember);
  text-shadow: 0 0 14px var(--cf-ob-ember-33);
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.cf-combo-ticker__digit::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  transform: translateY(-0.5px);
}

.cf-splash-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cf-btn--primary {
  background: var(--cf-ob-ember);
  border: 1px solid var(--cf-ob-ember);
  color: #fff;
  box-shadow: 0 0 22px var(--cf-ob-ember-33);
}
.cf-btn--primary:hover {
  background: var(--cf-ob-ember-soft);
  transform: translateY(-1px);
}
.cf-btn--ghost {
  background: transparent;
  border: 1px solid var(--cf-ob-line-2);
  color: var(--cf-ob-text-1);
}
.cf-btn--ghost:hover { border-color: var(--cf-ob-ember-33); }

.cf-splash-hero__visual {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-splash-hero__visual::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--cf-ob-ember-22), transparent 65%);
  filter: blur(50px);
  z-index: 0;
}

/* ---- Hero card fan ---- */
.cf-hero-fan {
  position: relative;
  width: 620px;
  height: 540px;
  z-index: 1;
}
.cf-hero-fan__card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Width/height come from .mini-card — mini-card class is added
     alongside .cf-hero-fan__card so full-fidelity card rendering
     works via .mini-card-scaler inside. Transition lives on the
     higher-specificity .cf-hero-fan > .cf-hero-fan__card rule
     further down (so opacity + transform both animate). */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  transform-origin: center bottom;
  text-decoration: none;
  color: inherit;
}
/* Stagger — outer cards move first, inner follow. Only applies when
   the fan is hovered (otherwise delays would slow the mouseleave
   snap-back identically, which still reads smooth). */
/* Per-card stagger on the opacity reveal so the fan dissolves in
   from the outside cards first, settling at the center last. The
   second value (transform delay) stays at 0ms so the hover fan-out
   cascade isn't perturbed. */
/* Four delays — one per transition property (opacity, transform,
   box-shadow, border-color). Only opacity gets the reveal stagger;
   the other three must stay at 0ms or hover crossfade lags. */
.cf-hero-fan__card[data-fan-pos="2"] { transition-delay: 140ms, 0ms, 0ms, 0ms; }
.cf-hero-fan__card[data-fan-pos="1"],
.cf-hero-fan__card[data-fan-pos="3"] { transition-delay: 70ms, 0ms, 0ms, 0ms; }
.cf-hero-fan__card[data-fan-pos="0"],
.cf-hero-fan__card[data-fan-pos="4"] { transition-delay: 0ms, 0ms, 0ms, 0ms; }
/* Ensure .mini-card bg/border don't fight our fan styles */
.cf-hero-fan__card.mini-card { border-color: var(--cf-ob-line-2); }
.cf-hero-fan__card.mini-card:hover { border-color: var(--cf-ob-ember-33); }
.cf-hero-fan__card[data-fan-pos="0"] {
  transform: translate(-50%, -50%) rotate(-16deg) translate(-220px, 30px) scale(0.88);
  z-index: 1;
}
.cf-hero-fan__card[data-fan-pos="1"] {
  transform: translate(-50%, -50%) rotate(-8deg) translate(-115px, 0) scale(0.94);
  z-index: 2;
}
.cf-hero-fan__card[data-fan-pos="2"] {
  transform: translate(-50%, -50%) rotate(0deg) translate(0, -12px) scale(1);
  z-index: 5;
}
.cf-hero-fan__card[data-fan-pos="3"] {
  transform: translate(-50%, -50%) rotate(8deg) translate(115px, 0) scale(0.94);
  z-index: 3;
}
.cf-hero-fan__card[data-fan-pos="4"] {
  transform: translate(-50%, -50%) rotate(16deg) translate(220px, 30px) scale(0.88);
  z-index: 2;
}
/* Hover anywhere on the fan → cards spread outward (no scale pop). */
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="0"] {
  transform: translate(-50%, -50%) rotate(-22deg) translate(-290px, 40px) scale(0.88);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="1"] {
  transform: translate(-50%, -50%) rotate(-12deg) translate(-165px, 6px) scale(0.94);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="2"] {
  transform: translate(-50%, -50%) rotate(0deg) translate(0, -12px) scale(1);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="3"] {
  transform: translate(-50%, -50%) rotate(12deg) translate(165px, 6px) scale(0.94);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="4"] {
  transform: translate(-50%, -50%) rotate(22deg) translate(290px, 40px) scale(0.88);
}
/* Single-card hover gets a glow + a subtle vertical lift. The lift
   is what makes the z-stack flip read as smooth motion instead of
   a snap when moving from card to card — z-index changes are
   instant, but the transform crossfade gives the eye continuous
   motion to track. Each position keeps its rotation; only Y
   translate and scale shift on hover. */
.cf-hero-fan__card:hover {
  z-index: 10;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 40px var(--cf-ob-ember-22);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="0"]:hover {
  transform: translate(-50%, -50%) rotate(-22deg) translate(-290px, 18px) scale(0.94);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="1"]:hover {
  transform: translate(-50%, -50%) rotate(-12deg) translate(-165px, -16px) scale(1.0);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="2"]:hover {
  transform: translate(-50%, -50%) rotate(0deg) translate(0, -34px) scale(1.04);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="3"]:hover {
  transform: translate(-50%, -50%) rotate(12deg) translate(165px, -16px) scale(1.0);
}
.cf-hero-fan:hover .cf-hero-fan__card[data-fan-pos="4"]:hover {
  transform: translate(-50%, -50%) rotate(22deg) translate(290px, 18px) scale(0.94);
}

/* Dissolve-in / crossfade + smooth fan-out. This rule has higher
   specificity than the single-class .cf-hero-fan__card, so we have
   to include all transitions here — opacity for the reveal,
   transform for the fan-out hover cascade, box-shadow + border-color
   for the per-card hover glow. Otherwise the transform transition
   gets wiped and hover "pops" instead of animating.
   Transform uses 1.8s for the fan-out cascade (intentionally slow
   so the spread reads as deliberate). The hover-glow properties
   (box-shadow + border-color) use a faster 320ms so card-to-card
   movement crossfades smoothly instead of overlapping at 1.1s and
   reading as instant/laggy. */
.cf-hero-fan > .cf-hero-fan__card,
.cf-splash-showcase__strip > .cf-showcase-card {
  opacity: 0;
  transition:
    opacity 0.7s ease-out,
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 320ms ease,
    border-color 280ms ease;
  will-change: transform;
}
.cf-hero-fan.cf-splash-loaded > .cf-hero-fan__card,
.cf-splash-showcase__strip.cf-splash-loaded > .cf-showcase-card {
  opacity: 1;
}

/* Ember loader — shown while the API resolves on first visit (no
   localStorage cache). Hidden once cards are rendered. Sits over
   the empty fan center; small + subtle so it reads as "the forge is
   firing up" rather than as the main UI. */
.cf-hero-fan__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 2px solid var(--cf-ob-line-2);
  border-top-color: var(--cf-ob-ember);
  border-radius: 50%;
  animation: cf-fan-loader-spin 0.9s linear infinite;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 16px var(--cf-ob-ember-22);
}
@keyframes cf-fan-loader-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-hero-fan__loader { animation: none; }
}

/* Portrait-only fallback (.cf-mini-fallback) for preset cards that
   don't have a renderedFront payload from the API. */
.cf-mini-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--cf-ob-bg-3);
}
.cf-mini-fallback__portrait {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.cf-mini-fallback__portrait::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 12, 0.92) 100%);
  pointer-events: none;
}
.cf-mini-fallback__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px 12px;
  background: rgba(7, 9, 12, 0.85);
  border-top: 1px solid var(--cf-ob-line-1);
  z-index: 1;
}
.cf-mini-fallback__name {
  font-family: 'Unbounded', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--cf-ob-text-1);
  letter-spacing: 0.3px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-mini-fallback__class {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--cf-ob-ember);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
}

/* Continue-draft banner above hero */
.cf-continue-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  padding: 12px 18px;
  margin: 0 0 24px;
  background: var(--cf-ob-ember-dim);
  border: 1px solid var(--cf-ob-ember-33);
  font-size: 13px;
}
.cf-continue-banner__text { color: var(--cf-ob-text-1); }
.cf-continue-banner__text strong { color: var(--cf-ob-ember); }
.cf-continue-banner[hidden] { display: none; }

/* ---- Ways-to-start tiles ---- */
.cf-splash-ways {
  padding: 80px 80px;
  background: var(--cf-ob-bg-1);
  border-top: 1px solid var(--cf-ob-line-1);
}
.cf-splash-ways__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 32px;
  text-align: center;
}
.cf-splash-ways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.cf-way {
  position: relative;
  display: block;
  padding: 28px 28px 52px;
  background: var(--cf-ob-bg-2);
  border: 1px solid var(--cf-ob-line-2);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.cf-way:hover {
  border-color: var(--cf-ob-ember-33);
  background: var(--cf-ob-bg-3);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--cf-ob-ember-22);
}
.cf-way__icon {
  width: 42px;
  height: 42px;
  background: var(--cf-ob-ember-dim);
  color: var(--cf-ob-ember);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 16px;
  transition: background 200ms ease-out, transform 200ms ease-out;
}
.cf-way:hover .cf-way__icon {
  background: var(--cf-ob-ember-33);
  transform: scale(1.1);
}
.cf-way__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
.cf-way__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cf-ob-text-2);
  margin: 0;
}
.cf-way__arrow {
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-size: 13px;
  color: var(--cf-ob-text-mute);
  transition: color 0.2s ease, transform 0.2s ease;
}
.cf-way:hover .cf-way__arrow {
  color: var(--cf-ob-ember);
  transform: translateX(3px);
}

/* ---- Showcase ---- */
.cf-splash-showcase {
  padding: 80px 40px;
}
.cf-splash-showcase__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  text-align: center;
}
.cf-splash-showcase__sub {
  text-align: center;
  color: var(--cf-ob-text-2);
  margin: 0 0 40px;
}
.cf-splash-showcase__strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 40px 20px;
  scrollbar-width: none;
}
.cf-splash-showcase__strip::-webkit-scrollbar { display: none; }
/* .cf-showcase-card uses .mini-card (180×252). Width/height come
   from the mini-card vars; just make flex items non-shrinking. */
.cf-showcase-card {
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

/* ---- Showcase carousel nav (prev/next overlay buttons) ----
   The viewport wraps the scrolling strip + its prev/next buttons.
   Buttons are hidden by default (the JS reveals them only when
   there's content to scroll to in that direction). */
.cf-splash-showcase__viewport {
  position: relative;
  /* Narrow the strip so it doesn't fit an integer number of cards —
     the next card peeks ~30% on the right at scroll start, and on
     the left once the user has scrolled. The peek signals there's
     more content to scroll to without relying solely on the nav
     buttons. */
  max-width: 1160px;
  margin: 0 auto;
}
.cf-showcase-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13, 16, 21, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--cf-ob-line-2);
  color: var(--cf-ob-ember);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
}
.cf-showcase-nav:hover,
.cf-showcase-nav:focus-visible {
  background: var(--cf-ob-bg-3);
  border-color: var(--cf-ob-ember-33);
  outline: none;
}
.cf-showcase-nav:active {
  transform: translateY(-50%) scale(0.94);
}
.cf-showcase-nav[hidden] { display: none; }
.cf-showcase-nav--prev { left: 12px; }
.cf-showcase-nav--next { right: 12px; }
@media (max-width: 520px) {
  /* On phones the native swipe scroll is enough — overlay buttons
     would only crowd the strip. */
  .cf-showcase-nav { display: none; }
}

/* ---- Footer ---- */
.cf-splash-footer {
  padding: 48px 80px 32px;
  border-top: 1px solid var(--cf-ob-line-1);
  display: flex;
  flex-direction: column;
  color: var(--cf-ob-text-mute);
  font-size: 12px;
}
.cf-splash-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--cf-ob-line-1);
}
.cf-splash-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-splash-footer__heading {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cf-ob-text-mute);
  margin: 0 0 8px;
}
.cf-splash-footer__col a {
  color: var(--cf-ob-text-2);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}
.cf-splash-footer__col a:hover { color: var(--cf-ob-text-1); }
.cf-splash-footer__bottom {
  padding-top: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--cf-ob-text-mute);
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  body.cf-splash {
    --mini-card-scale: 0.5;
    --mini-card-width: 200px;
    --mini-card-height: 280px;
  }
  .cf-splash-hero { grid-template-columns: 1fr; padding: 48px 32px; gap: 32px; }
  .cf-splash-hero__visual { min-height: 440px; order: -1; }
  .cf-hero-fan { width: 100%; max-width: 520px; height: 440px; }
  .cf-hero-fan__card[data-fan-pos="0"] { transform: translate(-50%, -50%) rotate(-14deg) translate(-160px, 16px) scale(0.88); }
  .cf-hero-fan__card[data-fan-pos="1"] { transform: translate(-50%, -50%) rotate(-7deg) translate(-85px, 0) scale(0.94); }
  .cf-hero-fan__card[data-fan-pos="3"] { transform: translate(-50%, -50%) rotate(7deg) translate(85px, 0) scale(0.94); }
  .cf-hero-fan__card[data-fan-pos="4"] { transform: translate(-50%, -50%) rotate(14deg) translate(160px, 16px) scale(0.88); }
  .cf-splash-ways { padding: 48px 32px; }
  .cf-splash-ways__grid { grid-template-columns: 1fr; }
  .cf-splash-nav { padding: 14px 20px; }
  .cf-splash-showcase { padding: 48px 0; }
  .cf-splash-footer { padding: 32px 24px; }
  .cf-splash-footer__cols { grid-template-columns: 1fr; gap: 28px; padding-bottom: 24px; text-align: center; }
}

@media (max-width: 980px) {
  .cf-combo-ticker { max-width: 100%; }
  .cf-combo-ticker__digit { font-size: 26px; min-width: 32px; }
}

/* Phone — tighten further so nothing overflows. */
@media (max-width: 520px) {
  body.cf-splash { overflow-x: hidden; }
  .cf-splash-nav { padding: 12px 14px; gap: 8px; }
  .cf-splash-nav__links { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .cf-splash-nav__links a { padding: 4px 6px; font-size: 12px; }
  .cf-splash-nav__auth { padding: 4px 8px; font-size: 12px; }
  .cf-splash-hero { padding: 36px 20px; gap: 24px; }
  .cf-splash-hero__visual { min-height: 200px; }
  .cf-splash-hero__title { font-size: clamp(32px, 9vw, 48px); line-height: 1.05; }
  .cf-splash-hero__tagline { font-size: 15px; }
  .cf-splash-ways { padding: 36px 20px; }
  .cf-splash-ways__title { font-size: 22px; }
  .cf-splash-showcase { padding: 36px 0; }
  .cf-splash-showcase__title { font-size: 22px; }
  .cf-splash-showcase__strip { padding: 0 20px 16px; }
  .cf-showcase-card { width: 180px; height: 260px; }
  .cf-splash-footer { padding: 24px 16px; font-size: 11px; }
  .cf-continue-banner { flex-direction: column; gap: 10px; align-items: stretch; padding: 10px 14px; }
  .cf-combo-ticker__digit { font-size: 20px; min-width: 24px; }
  .cf-combo-ticker { padding: 12px; gap: 8px; }
  .cf-combo-ticker__digits { gap: 4px; }
}