/*
 * theme.css — Steward's design-system values, rebuilt for the BSuite bundle
 * pivot: neon-dark × bold-geometric. A near-black violet ground, a hot-orange
 * button, a soft violet link/glow. Opens dark by default; a light set sits
 * under html[data-theme="light"] for the switch.
 */

:root {
  color-scheme: dark;

  --canvas: #100e1b;
  --surface: #282632;
  --surface-2: #221f30;
  --border: #322e42;
  --border-strong: #4a4460;
  --ink: #f3f1fa;
  --muted: #9896a1;

  --accent: #ff6a3d;
  --accent-hover: #ff8259;
  --accent-ink: #1c0d04;
  --accent-text: #9486f7;
  --accent-strong: #ff6a3d;
  --accent-soft: #241f3a;
  --accent-border: #453b70;

  --success: #34d399;
  --success-ink: #06231a;
  --success-soft: #142a22;
  --success-strong: #6ee7b0;
  --warning: #fbbf24;
  --warning-ink: #271d02;
  --warning-soft: #2c2310;
  --warning-strong: #fcd34d;
  --danger: #f87171;
  --danger-ink: #260a0a;
  --danger-soft: #2c1616;
  --danger-strong: #fca5a5;

  --chart-1: #ff6a3d;
  --chart-2: #9486f7;
  --chart-3: #34d399;
  --chart-4: #fbbf24;
  --chart-5: #f87171;
  --chart-6: #9896a1;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.16em;

  --radius-btn: 999px;
  --radius-card: 20px;
  --radius-input: 12px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 24px 60px -24px color-mix(in srgb, var(--accent-text) 45%, transparent);
  --shadow-raised: 0 32px 80px -20px color-mix(in srgb, #000000 55%, transparent);
  --shadow-btn: 0 12px 32px -10px color-mix(in srgb, var(--accent) 65%, transparent);
  --card-pad: 2rem;
  --caps: uppercase;
  --caps-tracking: 0.08em;
  --btn-weight: 700;
  --measure: 65ch;

  --x-violet-band: #1c1830;
  --x-violet-band-ink: #f3f1fa;
  --x-panel: #17131f;
  --x-glow: color-mix(in srgb, var(--accent-text) 30%, transparent);
  --x-glow-orange: color-mix(in srgb, var(--accent) 30%, transparent);
  --x-grid-line: color-mix(in srgb, var(--border) 70%, transparent);
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f5f3fb;
  --surface: #ffffff;
  --surface-2: #eeecf7;
  --border: #ddd9ef;
  --border-strong: #c3bce0;
  --ink: #1c1730;
  --muted: #635e78;

  --accent: #ff5a2b;
  --accent-hover: #e8491c;
  --accent-ink: #240b02;
  --accent-text: #5b4bcf;
  --accent-strong: #b73e14;
  --accent-soft: #efe9ff;
  --accent-border: #d8cdfa;

  --success: #0f9d67;
  --success-ink: #ffffff;
  --success-soft: #e1f7ee;
  --success-strong: #0b7a51;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #fdf1dc;
  --warning-strong: #92400e;
  --danger: #dc2626;
  --danger-ink: #ffffff;
  --danger-soft: #fde2e2;
  --danger-strong: #b91c1c;

  --chart-1: #ff5a2b;
  --chart-2: #5b4bcf;
  --chart-3: #0f9d67;
  --chart-4: #b45309;
  --chart-5: #dc2626;
  --chart-6: #635e78;

  --shadow-card: 0 20px 50px -24px color-mix(in srgb, var(--accent-text) 30%, transparent);
  --shadow-raised: 0 30px 70px -24px color-mix(in srgb, var(--ink) 25%, transparent);
  --shadow-btn: 0 12px 28px -10px color-mix(in srgb, var(--accent) 45%, transparent);

  --x-violet-band: #efebff;
  --x-violet-band-ink: #1c1730;
  --x-panel: #ffffff;
  --x-glow: color-mix(in srgb, var(--accent-text) 18%, transparent);
  --x-glow-orange: color-mix(in srgb, var(--accent) 18%, transparent);
  --x-grid-line: color-mix(in srgb, var(--border) 90%, transparent);
}

/*
 * app.css — Steward's own screen: the glowing dark ground, the sticky bar
 * that gains a blurred surface on scroll, the hero's composed app-tile grid,
 * the violet bundle-hook band, the bento six-app grid, the checklist and the
 * price panel, and the one moment that moves — the six-app grid staggering
 * in once as it enters view.
 */

/* ---- The page itself: a near-black violet ground with a soft glow. ------ */
.steward-page {
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, var(--x-glow), transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 8%, var(--x-glow-orange), transparent 60%),
    var(--canvas);
}

/* ---- The bar: transparent at the top, a blurred surface once scrolled. -- */
[data-bar] {
  background: color-mix(in srgb, var(--canvas) 70%, transparent);
  backdrop-filter: blur(0px);
  transition: backdrop-filter 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
[data-bar].is-scrolled {
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: blur(14px);
  border-color: var(--border);
}

/* ---- Hero glow + the mini app-tile grid (the product-first visual). ----- */
.hero-glow {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 60%;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--x-glow), transparent 70%);
  pointer-events: none;
}

.mini-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.mini-tile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow-card);
}
.mini-tile .icon { color: var(--accent-text); }
.mini-tile:nth-child(odd) { transform: translateY(0.75rem); }

/* ---- Bundle-hook band, tinted violet. ------------------------------------ */
.band-violet {
  background: var(--x-violet-band);
  color: var(--x-violet-band-ink);
  border-block: 1px solid var(--border);
}

/* ---- The six-app grid: a bento layout, HostVerge given the wide tile. --- */
.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 48rem) {
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .app-tile-big { grid-column: span 2; }
}

.app-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: border-color 200ms ease, transform 200ms ease;
}
.app-tile:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.app-tile-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 1.1rem;
}
.app-tile-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.app-tile-name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin-top: 0.3rem; }
.app-tile-tag { color: var(--muted); margin-top: 0.5rem; }
.app-tile-list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.app-tile-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.925rem;
  color: var(--ink);
  opacity: 0.88;
}
.app-tile-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

/* ---- The three pricing tiers. ------------------------------------------- */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 64rem) {
  .tier-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.tier-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}
.tier-card-featured {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
  box-shadow: var(--shadow-raised);
}
@media (min-width: 64rem) {
  .tier-card-featured { transform: translateY(-0.75rem); }
}
.tier-badge {
  position: absolute;
  top: -0.85rem;
  left: 2rem;
}
.tier-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.tier-price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.9rem; }
.tier-price-amount { font-family: var(--font-display); font-weight: 700; font-size: 2.75rem; letter-spacing: var(--display-tracking); color: var(--ink); }
.tier-price-period { color: var(--muted); font-size: 0.95rem; }
.tier-price-note { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); }

.tier-limits { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
.tier-limits li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.tier-limits li:last-child { border-bottom: none; }
.tier-limit-app { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); }
.tier-limit-value { color: var(--ink); opacity: 0.9; }

/* ---- The price panel: a raised dark card holding the checklist + form. -- */
.price-panel {
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-card) + 4px);
  background: var(--x-panel);
  padding: 2.5rem;
  box-shadow: var(--shadow-raised);
}
@media (min-width: 48rem) { .price-panel { padding: 3.25rem; } }

.checklist { display: flex; flex-direction: column; gap: 0.75rem; }
.checklist li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.95rem; }

.guarantee-badge {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
}
.guarantee-badge .icon { color: var(--success); flex-shrink: 0; }

.lead-form {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 1.75rem;
}

/* ---- Motion: the six-app grid stagger — the one thing that moves. ------
   RESTS fully visible always (no JS, a failed script, or a search engine
   all see the finished grid) — the animation is a transient keyframe run
   only once app:inview fires on the grid, never a persistent hidden state. */
.stagger-item {
  opacity: 1;
  transform: none;
}
.stagger.is-inview .stagger-item {
  animation: stagger-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
html.reduced-motion .stagger-item {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}