/* =========================================================
   SentEdge Glass — shared design system stylesheet
   Derived from websites/SentEdge.ai/DESIGN.md
   ========================================================= */

:root {
  /* Canvas */
  --background: #05081A;
  --surface: #05081A;
  --surface-bright: #1B2742;
  --surface-container-lowest: #03050F;
  --surface-container-low: #0A1026;
  --surface-container: #0E152F;
  --surface-container-high: #141D3C;
  --surface-container-highest: #1B2548;

  /* Text */
  --on-surface: #E6ECFB;
  --on-surface-variant: #A6B0C8;

  /* Glass tiers */
  --glass-1: rgba(255, 255, 255, 0.06);
  --glass-2: rgba(255, 255, 255, 0.10);
  --glass-3: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-elevated: rgba(255, 255, 255, 0.18);
  --glass-shine: rgba(255, 255, 255, 0.15);

  /* Edge Signal (primary) */
  --primary: #22D3EE;
  --on-primary: #042530;
  --primary-bright: #67E8F9;
  --primary-tint-weak: rgba(34, 211, 238, 0.08);
  --primary-tint: rgba(34, 211, 238, 0.12);
  --primary-border: rgba(34, 211, 238, 0.30);
  --primary-glow: rgba(34, 211, 238, 0.35);

  /* Secondary indigo */
  --secondary: #818CF8;
  --secondary-tint: rgba(129, 140, 248, 0.14);

  /* Tertiary amber (rare emphasis) */
  --tertiary: #FBBF24;
  --tertiary-tint: rgba(251, 191, 36, 0.14);

  /* Semantic */
  --success: #34D399;

  /* Spacing */
  --unit: 8px;
  --container-padding: 24px;
  --card-gap: 20px;
  --section-margin: 96px;
  --glass-padding: 28px;

  /* Radius */
  --r-sm: 0.375rem;
  --r: 0.75rem;
  --r-md: 0.875rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-full: 9999px;
}

/* ---------- Reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--on-surface);
  background: var(--background);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Living canvas: deep indigo radial gradient + subtle noise */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, #0E3A4A 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 85% 30%, #1E1B4B 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 95%, #0B1F3A 0%, transparent 60%),
    linear-gradient(180deg, #05081A 0%, #080C24 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  color: var(--on-surface);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}
h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

p {
  color: var(--on-surface-variant);
  font-size: 1.0625rem;
  line-height: 1.7;
}

a { color: var(--primary); }
a:hover { color: var(--primary-bright); }

code, .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* Eyebrow / caps label */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 0.375rem 0.875rem;
  background: var(--primary-tint);
  border: 1px solid var(--primary-border);
  border-radius: var(--r-full);
  margin-bottom: 1rem;
}

/* ---------- Layout ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

main { padding-top: 88px; }

section {
  padding: var(--section-margin) var(--container-padding);
  position: relative;
}

/* Legacy section background utilities — intentional no-ops in the glass system
   (the canvas shows through every section). */
.bg-white, .bg-light { background: transparent; }

/* ---------- Header ---------- */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 14px var(--container-padding);
  background: rgba(5, 8, 26, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo-link {
  color: var(--on-surface);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.2s ease;
}
.logo-link:hover { color: var(--primary); }

.logo-img { height: 40px; width: auto; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-link {
  color: var(--on-surface-variant);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r);
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 52px;
  padding: 0 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4);
}
.btn-primary:hover {
  background: var(--primary-bright);
  box-shadow: 0 0 0 1px var(--primary-bright), 0 0 24px var(--primary-glow);
  transform: translateY(-1px);
}

/* Ghost: the "secondary" slot. Also aliased to .btn-secondary for legacy markup. */
.btn-ghost, .btn-secondary {
  background: var(--glass-1);
  color: var(--on-surface);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover, .btn-secondary:hover {
  background: var(--glass-2);
  border-color: var(--glass-border-elevated);
  color: var(--on-surface);
}

/* ---------- Hero ---------- */
#hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(88px + 48px);
  padding-bottom: 48px;
}
.hero-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.hero-subtitle {
  font-size: 1.25rem;
  color: var(--on-surface-variant);
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.hero-image {
  max-width: 700px;
  width: 100%;
  height: auto;
  margin: 3rem auto 0;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-border-elevated);
  box-shadow: 0 20px 60px rgba(3, 5, 15, 0.5);
  background: var(--glass-1);
  padding: 8px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* ---------- Section header helper ---------- */
.section-lead {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2.5rem;
  color: var(--on-surface-variant);
  font-size: 1.0625rem;
}

/* ---------- Glass card tiers ---------- */
.glass-card,
.value-card,
.capability-card,
.phase,
.case-study-container,
.pricing-container,
.architect-card {
  position: relative;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: var(--glass-padding);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  color: var(--on-surface);
  transition: transform 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

/* L2 elevated */
.value-card, .phase {
  background: var(--glass-2);
  border-color: var(--glass-border-elevated);
  border-radius: var(--r-lg);
  padding: 32px;
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow: 0 12px 40px rgba(3, 5, 15, 0.4);
}

/* L3 focal — add inner shine */
.architect-card, .case-study-container, .pricing-container {
  background: var(--glass-3);
  border-color: var(--glass-border-elevated);
  border-radius: var(--r-xl);
  padding: 48px;
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  box-shadow:
    0 16px 50px rgba(3, 5, 15, 0.5),
    inset 1px 1px 0 var(--glass-shine);
}

.value-card:hover,
.capability-card:hover {
  transform: translateY(-4px);
  background: var(--glass-2);
  border-color: var(--primary-border);
}

.value-card-image {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  margin-bottom: 1.5rem;
  border: 1px solid var(--glass-border);
}

.value-card h3,
.capability-card h4 {
  color: var(--on-surface);
}

.value-card p,
.capability-card p {
  color: var(--on-surface-variant);
  font-size: 1rem;
  line-height: 1.65;
}

/* ---------- Value props grid ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--card-gap);
  margin-top: 3rem;
}

/* ---------- Capabilities grid ---------- */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--card-gap);
  margin-top: 3rem;
}
.capability-card {
  border-top: 1px solid var(--primary-border);
  border-radius: var(--r-md);
}
.capability-card h4 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--on-surface);
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.capability-card i {
  color: var(--primary);
  font-size: 1.125rem;
}

/* ---------- Process timeline ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--card-gap);
  margin-top: 3rem;
}
.phase {
  text-align: center;
}
.phase-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 0 24px var(--primary-glow);
}
.duration {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--primary-tint);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.5rem 0 1rem;
}
.phase ul {
  list-style: none;
  text-align: left;
  margin-top: 1rem;
}
.phase li {
  padding: 0.5rem 0;
  color: var(--on-surface-variant);
  font-size: 0.9375rem;
  padding-left: 1.5rem;
  position: relative;
}
.phase li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ---------- Case study ---------- */
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}
.case-section h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}
.case-section ul { list-style: none; padding: 0; }
.case-section li {
  padding: 0.5rem 0;
  color: var(--on-surface-variant);
  padding-left: 1.5rem;
  position: relative;
}
.case-section li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* Tech-stack badges use the secondary indigo (not cyan) */
.stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.badge {
  padding: 0.375rem 0.875rem;
  background: var(--secondary-tint);
  color: var(--secondary);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(52, 211, 153, 0.08);
  border-left: 3px solid var(--success);
  border-radius: var(--r);
  color: var(--on-surface);
  font-size: 0.9375rem;
}
.timeline-note strong { color: var(--success); }

/* ---------- Architect ---------- */
.architect-content {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.architect-info {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
}
.architect-info h3 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}
.architect-title {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.architect-bio {
  color: var(--on-surface-variant);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.credential-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--tertiary-tint);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--r);
}
.credential-note i {
  color: var(--tertiary);
  font-size: 1.125rem;
  margin-top: 0.125rem;
}
.credential-note span {
  color: var(--on-surface);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.credential-note strong { color: var(--tertiary); }

.architect-credential {
  flex-shrink: 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  /* Inset well so badges don't fight the glass */
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
}
.architect-credential img {
  height: 270px;
  width: auto;
  border-radius: var(--r);
}

/* ---------- Pricing ---------- */
.pricing-container {
  max-width: 900px;
  margin: 3rem auto 0;
  text-align: center;
}
.pricing-container h3 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.pricing-subtitle {
  font-size: 1.0625rem;
  color: var(--on-surface-variant);
  margin-bottom: 2rem;
}
.pricing-image {
  max-width: 500px;
  width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
}
.whats-included { text-align: left; margin: 2rem 0; }
.whats-included h4 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  color: var(--on-surface);
}
.whats-included ul {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
}
.whats-included li {
  padding: 0.75rem 0;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9375rem;
}
.whats-included i {
  color: var(--success);
  font-size: 1.125rem;
  flex-shrink: 0;
}
.contact-cta { margin-top: 2rem; }
.response-time {
  margin-top: 1rem;
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* ---------- Knowledge base teaser ---------- */
.kb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.kb-grid img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 40px rgba(3, 5, 15, 0.45);
}

/* ---------- Footer ---------- */
footer {
  padding: 3rem var(--container-padding);
  background: rgba(3, 5, 15, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  text-align: center;
}
footer p {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}
footer a { color: var(--primary); text-decoration: none; }
footer a:hover { color: var(--primary-bright); }

/* ---------- Modal (dark glass restyle) ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: auto;
  background: rgba(3, 5, 15, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.25s ease;
}
.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  position: relative;
  background: var(--glass-3);
  border: 1px solid var(--glass-border-elevated);
  margin: auto;
  padding: 0;
  border-radius: var(--r-xl);
  max-width: 900px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(3, 5, 15, 0.7),
              inset 1px 1px 0 var(--glass-shine);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  animation: slideIn 0.3s ease;
}
.modal-header {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 { margin: 0; font-size: 1.25rem; }
.modal-close {
  background: transparent;
  border: 1px solid var(--glass-border);
  font-size: 1.25rem;
  color: var(--on-surface-variant);
  cursor: pointer;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  transition: all 0.18s ease;
}
.modal-close:hover {
  background: var(--glass-1);
  color: var(--on-surface);
  border-color: var(--glass-border-elevated);
}
.modal-body { padding: 1.5rem; }
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--glass-border);
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- View transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.3s; }
::view-transition-old(root) { animation-name: fade-out; }
::view-transition-new(root) { animation-name: fade-in; }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Button group helper ---------- */
.button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --section-margin: 64px; --glass-padding: 24px; }
  .architect-card, .case-study-container, .pricing-container { padding: 32px; }
  .kb-grid { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 768px) {
  section { padding: 64px var(--container-padding); }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { width: 100%; }
  .value-grid, .capabilities-grid, .timeline { grid-template-columns: 1fr; }
  .architect-content { flex-direction: column; text-align: center; }
  .credential-note { flex-direction: column; align-items: center; text-align: center; }
  .architect-credential {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .architect-credential img {
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
  }
  header { padding: 10px 16px; }
  .header-container { gap: 0.5rem; }
  .logo-img { height: 32px; }
  .header-nav { gap: 0.5rem; }
  .btn { height: 44px; padding: 0 18px; font-size: 0.875rem; }
}
@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .architect-card, .case-study-container, .pricing-container { padding: 24px 20px; }
  .architect-credential { padding: 12px; }
  .header-container { flex-direction: column; align-items: stretch; }
  .logo-link { justify-content: center; }
  .header-nav { justify-content: center; flex-wrap: wrap; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   LEGACY COMPAT — remap the old SaaS variable names used by
   portfolio / knowledge-base / bazaar / clip-producer / index.html
   onto the glass palette. Loaded AFTER each page's inline <style>,
   so these redefinitions win on the cascade.
   ========================================================= */
:root {
  /* Structural vars declared on every page */
  --primary: #22D3EE;                   /* was #2563EB SaaS blue */
  --primary-dark: #67E8F9;              /* was #1E40AF — map hover tone to brighter cyan */
  --accent: #22D3EE;                    /* was #0EA5E9 */
  --dark: #E6ECFB;                      /* was #1E293B — flipped: this now reads as body-text colour on dark */
  --gray: #A6B0C8;                      /* was #64748B */
  --light-gray: #A6B0C8;                /* was #94A3B8 */
  --bg: transparent;                    /* was #F8FAFC — let the canvas show through */
  --white: rgba(255, 255, 255, 0.06);   /* was #FFFFFF — legacy "card white" becomes glass-1 */

  /* Semantic vars declared by some pages */
  --success: #34D399;                   /* was #10B981 */
  --warning: #FBBF24;                   /* was #F59E0B */
  --error: #FCA5A5;                     /* was #EF4444 */
  --purple: #818CF8;                    /* was #8B5CF6 — map to secondary indigo */
}

/* Logo inversion — temporary until a light-theme logo asset exists.
   Turns the dark-blue EKG/heart PNG into a white silhouette with a
   subtle edge-signal glow. Swap to a dedicated asset when ready. */
.logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(34, 211, 238, 0.4));
}

/* Catch hard-coded light surfaces from legacy pages */
body { background: var(--background) !important; }
html, body { color: var(--on-surface); }

/* Legacy pages often style headers with solid near-white; re-frost them */
header[class=""], header:not([class]) {
  background: rgba(5, 8, 26, 0.55) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}

/* Legacy cards that hard-code white/#FFF/#FFFFFF backgrounds */
[style*="background: #FFFFFF"],
[style*="background:#FFFFFF"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #FFFFFF"],
[style*="background-color:#FFFFFF"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"] {
  background: var(--glass-1) !important;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  color: var(--on-surface);
}

/* Legacy pale-tint section backgrounds ("off-white") */
[style*="background: #F1F5F9"],
[style*="background:#F1F5F9"],
[style*="background: #F8FAFC"],
[style*="background:#F8FAFC"],
[style*="background: #F0F9FF"],
[style*="background:#F0F9FF"],
[style*="background: #DBEAFE"],
[style*="background:#DBEAFE"] {
  background: var(--glass-1) !important;
  color: var(--on-surface);
}

/* Pill/badge tint pills (#DBEAFE etc.) used in inline styles */
.eyebrow-legacy,
span[style*="background: #DBEAFE"],
span[style*="background:#DBEAFE"] {
  background: var(--primary-tint) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-border) !important;
}

/* Ensure body-level content is readable on the canvas */
main, article, aside {
  color: var(--on-surface);
}

/* Softer border treatment for images on the dark canvas */
img {
  border-radius: 0;
}
img[style*="box-shadow"],
img[style*="border-radius"] {
  border: 1px solid var(--glass-border);
}

/* Legacy inputs/textareas — darken their fills so they don't flash white */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: var(--glass-1);
  color: var(--on-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  padding: 10px 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

/* Legacy modal content often hardcodes white */
.modal-content {
  background: var(--glass-3) !important;
  color: var(--on-surface);
  border: 1px solid var(--glass-border-elevated);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
}

/* =========================================================
   SECTION & CLASS OVERRIDES — legacy inline <style> declares
   hex-coded pale backgrounds on named sections/classes. These
   aren't caught by variable remapping; override them explicitly
   so the canvas shows through and cards render as glass.
   ========================================================= */

/* Section heroes with literal light gradients */
#hero,
.portfolio-hero,
.hero-section,
.cta-section,
.knowledge-base-hero,
.clip-producer-hero {
  background: transparent !important;
}

/* Legacy gradient CTA section — re-style as a focal glass panel */
.cta-section {
  background: var(--glass-2) !important;
  border: 1px solid var(--glass-border-elevated);
  border-radius: var(--r-xl);
  box-shadow:
    0 16px 50px rgba(3, 5, 15, 0.5),
    inset 1px 1px 0 var(--glass-shine);
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
}
.cta-section, .cta-section * { color: var(--on-surface); }

/* Card classes with literal pale backgrounds (portfolio / clip-producer) */
.project-card {
  background: var(--glass-2) !important;
  border: 1px solid var(--glass-border-elevated) !important;
  color: var(--on-surface);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
.project-benefits,
.feature-item,
.faq-item {
  background: var(--glass-1) !important;
  border: 1px solid var(--glass-border);
  color: var(--on-surface);
}

/* Category / duration / eyebrow pills that hard-code #DBEAFE */
.project-category,
.duration {
  background: var(--primary-tint) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-border);
}

/* Tech-stack pills that hard-code #F1F5F9 */
.tech-badge {
  background: var(--secondary-tint) !important;
  color: var(--secondary) !important;
  border: 1px solid rgba(129, 140, 248, 0.3);
}

/* Benefit tags that hard-code white */
.benefit-tag {
  background: var(--glass-1) !important;
  border: 1px solid var(--glass-border);
  color: var(--on-surface) !important;
}

/* Credential notes (pale blue tint) — reskin as amber trust tint */
.credential-note {
  background: var(--tertiary-tint) !important;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-left: 3px solid var(--tertiary);
  color: var(--on-surface);
}

/* Timeline note (pale green) — keep green signal but in glass tones */
.timeline-note {
  background: rgba(52, 211, 153, 0.08) !important;
  border-left: 3px solid var(--success);
  color: var(--on-surface);
}

/* Catch legacy SaaS-blue inline text on light pills */
[style*="color: #2563EB"],
[style*="color:#2563EB"] {
  color: var(--primary) !important;
}

/* Any inline gradient still using the legacy pale stops */
[style*="linear-gradient(135deg, #F8FAFC"],
[style*="linear-gradient(135deg,#F8FAFC"] {
  background: transparent !important;
}

/* Project icons use gradient of primary+accent; both vars remap to cyan, which
   flattens the icon. Give it a richer gradient using secondary as the second stop. */
.project-icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  color: var(--on-primary) !important;
  box-shadow: 0 0 20px var(--primary-glow);
}

/* Tighten text contrast inside project cards */
.project-card h2, .project-card h3, .project-card h4 { color: var(--on-surface); }
.project-card p, .project-card li { color: var(--on-surface-variant); }

/* Section heading tweaks — the legacy :root sets h2 color to var(--dark)
   which we've remapped to --on-surface. But h2 text-shadow helps on the gradient
   hotspot. Apply sparingly. */
section h2 { color: var(--on-surface); }

/* Hero image frame on legacy index — remove the white shadow that looks
   bright against the dark canvas */
.hero-image {
  box-shadow: 0 20px 60px rgba(3, 5, 15, 0.5) !important;
}

/* =========================================================
   --white REVERT + EXPANDED CARD OVERRIDES
   The earlier `--white: rgba(255,255,255,0.06)` remap broke every
   `color: var(--white)` site (hero titles, button labels, etc.).
   Revert to pure white and explicitly reskin every card class that
   used `background: var(--white)` as a glass panel.
   ========================================================= */
:root {
  --white: #FFFFFF;
}

/* Every legacy card class that used background: var(--white)
   gets reskinned as standard glass. Card classes already styled by
   glass.css (value-card, phase, capability-card, project-card,
   architect-card, case-study-container, pricing-container) are
   unaffected — glass.css rules for them load later anyway. */
.status-bar,
.service-card,
.filters-container,
.domain-group-card,
.leaderboard-section,
.pain-card,
.agent-card,
.outcome-card,
.integration-card,
.section-light,
.stat-card,
.pricing-container {
  background: var(--glass-1) !important;
  border: 1px solid var(--glass-border);
  color: var(--on-surface);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

/* Bazaar — service-card outer wrapper needs no solid, but also
   clipping the header so gradients round correctly */
.service-card {
  overflow: hidden;
}

/* Bazaar — small white chips (favicon tiles, pagination pills, etc.) */
.bazaar [style*="background: var(--white)"] {
  background: var(--glass-1) !important;
}

/* =========================================================
   BAZAAR — HTTP method header bars
   The original used saturated SaaS gradients (blue POST, green GET,
   amber PUT, red DELETE). Reskin as subtle tinted strips that keep
   the semantic colour cue without competing with the CTAs.
   ========================================================= */
.card-header {
  background: linear-gradient(135deg, var(--primary-tint), rgba(129, 140, 248, 0.12)) !important;
  color: var(--on-surface) !important;
  border-bottom: 1px solid var(--glass-border);
}
.card-header.method-get {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(52, 211, 153, 0.06)) !important;
  color: var(--success) !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.3);
}
.card-header.method-post {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.06)) !important;
  color: var(--primary) !important;
  border-bottom: 1px solid var(--primary-border);
}
.card-header.method-put,
.card-header.method-patch {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.06)) !important;
  color: var(--tertiary) !important;
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
}
.card-header.method-delete {
  background: linear-gradient(135deg, rgba(252, 165, 165, 0.22), rgba(252, 165, 165, 0.06)) !important;
  color: var(--error) !important;
  border-bottom: 1px solid rgba(252, 165, 165, 0.3);
}
/* Ensure elements inside the header inherit the new color */
.card-header .card-title,
.card-header .external-link-icon,
.card-header .card-subtitle {
  color: inherit !important;
}
.external-link-icon {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* =========================================================
   HERO SECTION TEXT — pin to pure white with a strong shadow
   so it stays legible over the knowledge-base photo background
   ========================================================= */
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero .hero-subtitle {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}
.hero .category-badge {
  background: rgba(34, 211, 238, 0.22) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-border);
  backdrop-filter: blur(10px);
}

/* Darken the KB hero photo overlay a little more for legibility */
.hero {
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 26, 0) 0%, rgba(5, 8, 26, 0.35) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* =========================================================
   BAZAAR INTRO — refreshed editorial layout
   Scoped under .bazaar-intro so these rules don't leak.
   ========================================================= */
.bazaar-intro {
  max-width: 960px;
  margin: 1rem auto 3rem;
  padding: 48px 24px 24px;
  text-align: center;
  background: transparent !important;
  border: none !important;
}
.bazaar-intro .bazaar-intro-hero { margin-bottom: 2.5rem; }
.bazaar-intro .eyebrow {
  margin: 0 auto 1.25rem;
}
.bazaar-intro h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 auto 1.5rem;
  max-width: 760px;
  color: var(--on-surface);
}
.bazaar-intro p.lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--on-surface-variant);
  max-width: 720px;
  margin: 0 auto 1rem;
  text-align: left;
}
.bazaar-intro strong {
  color: var(--primary);
  font-weight: 600;
}

/* Two-up feature cards (Why / How) */
.bazaar-intro .bazaar-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 3rem 0;
  text-align: left;
}
.bazaar-intro .bazaar-feature {
  background: var(--glass-2) !important;
  border: 1px solid var(--glass-border-elevated) !important;
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow: 0 12px 40px rgba(3, 5, 15, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.bazaar-intro .bazaar-feature:hover {
  transform: translateY(-2px);
  border-color: var(--primary-border) !important;
}
.bazaar-intro .bazaar-feature-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r);
  background: var(--primary-tint);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}
.bazaar-intro .bazaar-feature h3 {
  color: var(--on-surface);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.bazaar-intro .bazaar-feature p {
  color: var(--on-surface-variant);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
}

/* Styled code block with header + copy */
.bazaar-intro .bazaar-code-block {
  background: rgba(3, 5, 15, 0.55) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 2rem 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
}
.bazaar-intro .bazaar-code-header {
  background: var(--glass-1);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
}
.bazaar-intro .bazaar-code-lang {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.bazaar-intro .bazaar-code-lang i { color: var(--primary); }
.bazaar-intro .bazaar-code-copy {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  color: var(--on-surface-variant);
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: var(--r);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.18s ease;
  height: auto;
}
.bazaar-intro .bazaar-code-copy:hover {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary-border);
}
.bazaar-intro .bazaar-code-copy.is-copied {
  background: rgba(52, 211, 153, 0.14);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.3);
}
.bazaar-intro pre {
  margin: 0;
  padding: 18px 20px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  color: var(--on-surface);
  overflow-x: auto;
  line-height: 1.65;
  background: transparent;
}
.bazaar-intro pre code {
  color: inherit;
  background: none;
  font-family: inherit;
}

/* Info aside */
.bazaar-intro .bazaar-aside {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--primary-tint);
  border: 1px solid var(--primary-border);
  border-radius: var(--r);
  padding: 14px 18px;
  color: var(--on-surface);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: left;
}
.bazaar-intro .bazaar-aside i {
  color: var(--primary);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* Use-case grid */
.bazaar-intro .bazaar-usecases { margin: 4rem 0 2rem; }
.bazaar-intro .bazaar-usecases h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.bazaar-intro .bazaar-usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.bazaar-intro .bazaar-usecase {
  padding: 24px 20px;
  text-align: center;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.bazaar-intro .bazaar-usecase:hover {
  transform: translateY(-3px);
  border-color: var(--primary-border);
  background: var(--glass-2);
}
.bazaar-intro .bazaar-usecase i {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  display: block;
}
.bazaar-intro .bazaar-usecase h4 {
  font-size: 0.9375rem;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bazaar-intro .bazaar-usecase p {
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  line-height: 1.55;
  margin: 0;
}

/* Closing paragraph — softer, divided */
.bazaar-intro .bazaar-closing {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: 2rem 0 0;
  text-align: center;
  color: var(--on-surface-variant);
  font-size: 0.9375rem;
  line-height: 1.7;
  border-top: 1px solid var(--glass-border);
}

@media (max-width: 768px) {
  .bazaar-intro { padding: 32px 16px 16px; }
  .bazaar-intro .bazaar-feature-row { grid-template-columns: 1fr; }
  .bazaar-intro p.lead { text-align: left; }
}

/* =========================================================
   FORM CONTROLS — bazaar filter dropdowns and inputs
   These had class-level specificity (.filter-input, .filter-select,
   .cost-input) that beat the generic element selectors in the compat
   layer. Target them explicitly + add a custom caret icon so the
   selects look intentional instead of default-browser.
   ========================================================= */
.filter-input,
.filter-select,
.cost-input {
  background: var(--glass-1) !important;
  color: var(--on-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r) !important;
  padding: 10px 14px !important;
  font-size: 0.875rem !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.filter-input::placeholder,
.cost-input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.7;
}
.filter-input:hover,
.filter-select:hover,
.cost-input:hover {
  background: var(--glass-2) !important;
  border-color: var(--glass-border-elevated) !important;
}
.filter-input:focus,
.filter-select:focus,
.cost-input:focus {
  outline: none !important;
  border-color: var(--primary-border) !important;
  box-shadow: 0 0 0 3px var(--primary-tint) !important;
  background: var(--glass-2) !important;
}

/* Custom caret icon — replace native arrow */
.filter-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2322D3EE' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  padding-right: 38px !important;
}

/* Native <option> list — styled as much as the browser allows.
   Chrome/Firefox respect these; macOS Safari falls back to native. */
.filter-select option,
select option {
  background: var(--surface-container);
  color: var(--on-surface);
  padding: 8px 12px;
}
.filter-select option:checked,
select option:checked {
  background: var(--primary-tint);
  color: var(--primary);
}

/* Filter labels (the "Facilitator" / "Method" headers above each input) */
.filter-group label,
.filter-label,
label[class*="filter"] {
  color: var(--on-surface-variant) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.filter-group label i,
.filter-label i {
  color: var(--primary);
  margin-right: 0.375rem;
}

/* "Clear Filters" pill */
.btn-clear-filters,
button[class*="clear-filter"] {
  background: var(--glass-1) !important;
  color: var(--on-surface-variant) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-full) !important;
  padding: 8px 16px !important;
  font-size: 0.8125rem !important;
  transition: all 0.18s ease;
}
.btn-clear-filters:hover,
button[class*="clear-filter"]:hover {
  background: rgba(252, 165, 165, 0.12) !important;
  color: var(--error) !important;
  border-color: rgba(252, 165, 165, 0.3) !important;
}

/* "Group by Domain" toggle — if it's a checkbox/switch, just ensure
   surrounding text is legible. Label is on the right of the switch. */
.filters-container label,
.filters-container span {
  color: var(--on-surface-variant);
}

/* Cost-range wrapper — align Min/Max inputs sensibly in the row */
.cost-range-inputs .cost-input {
  width: 100%;
}

/* Treemap container — the white panel behind the ECharts treemap.
   The chart itself (ECharts-rendered wallet blocks) keeps its own
   vibrant palette; only the surround becomes glass. */
.treemap-container {
  background: var(--glass-1) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg) !important;
  box-shadow: 0 12px 40px rgba(3, 5, 15, 0.4) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  color: var(--on-surface);
}

/* =========================================================
   BAZAAR — view-mode segmented control + template-group cards
   ========================================================= */
.view-mode-toggle {
  display: inline-flex;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.view-mode-option {
  background: transparent;
  color: var(--on-surface-variant);
  border: none;
  padding: 7px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.view-mode-option:hover:not(.is-active) {
  background: var(--glass-2);
  color: var(--on-surface);
}
.view-mode-option.is-active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 0 16px var(--primary-glow);
}

/* Service card — compact payment option + muted footer row */
.service-card .payment-option {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 6px;
}
.service-card .payment-option:last-child { margin-bottom: 0; }
.service-card .pay-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.service-card .payment-network {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--primary-tint);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}
.service-card .payment-price {
  font-size: 0.8125rem !important;
  font-weight: 700;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}
.service-card .pay-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.service-card .pay-meta i { color: var(--on-surface-variant); font-size: 0.6875rem; }
.service-card .pay-to-link,
.service-card .pay-to-addr {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  color: var(--on-surface-variant);
  text-decoration: none;
}
.service-card .pay-to-link { color: var(--primary); }
.service-card .pay-to-link:hover { color: var(--primary-bright); text-decoration: underline; }

.service-card .card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.6875rem;
  color: var(--on-surface-variant);
}
.service-card .card-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.service-card .card-footer-item i { color: var(--on-surface-variant); font-size: 0.6875rem; }

/* Legacy .payment-title rule may still emit when there are multiple options.
   Just make it dark-theme compatible. */
.service-card .payment-title {
  font-size: 0.6875rem;
  color: var(--on-surface-variant);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Composition strip — top template clusters as a clickable bar */
.composition-strip {
  max-width: 1400px;
  margin: 0 auto 16px;
  padding: 16px 20px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.composition-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.composition-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.composition-title i { color: var(--primary); }
.composition-subtitle {
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  flex: 1;
}
.composition-clear {
  background: rgba(252, 165, 165, 0.12);
  color: var(--error);
  border: 1px solid rgba(252, 165, 165, 0.3);
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: background 0.18s ease;
}
.composition-clear:hover { background: rgba(252, 165, 165, 0.22); }

.composition-bar {
  display: flex;
  gap: 3px;
  height: 58px;
  width: 100%;
}
.composition-segment {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  color: var(--on-surface);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
}
.composition-segment-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--seg-color, var(--primary));
  border-top-left-radius: var(--r-sm);
  border-top-right-radius: var(--r-sm);
  transition: height 0.2s ease;
}
.composition-segment:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--glass-border-elevated);
  transform: translateY(-1px);
}
.composition-segment:hover .composition-segment-bar { height: 6px; }
.composition-segment.is-active {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--seg-color, var(--primary));
  box-shadow: 0 0 0 1px var(--seg-color, var(--primary)) inset;
}
.composition-segment.is-active .composition-segment-bar { height: 8px; }
.composition-segment.is-other {
  opacity: 0.75;
}
.composition-segment-label {
  margin-top: auto;
  font-size: 0.6875rem;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.composition-segment-count {
  font-size: 0.625rem;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.composition-segment.is-active .composition-segment-label { color: var(--seg-color); }

@media (max-width: 768px) {
  .composition-bar { height: 48px; }
  .composition-segment-label { font-size: 0.625rem; }
}

/* Template group card — header + aggregate stats */
.template-group-card {
  background: var(--glass-2) !important;
  border: 1px solid var(--glass-border-elevated) !important;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 8px 28px rgba(3, 5, 15, 0.4);
}
.template-group-card .template-header {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none;
}
.template-group-card .template-header:hover {
  background: var(--glass-1);
}
.template-group-card:not(.is-collapsed) .template-header {
  border-bottom-color: var(--glass-border);
}
.template-header-main {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.template-expand-icon {
  font-size: 0.75rem;
  color: var(--primary);
  width: 14px;
  margin-top: 4px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.template-group-card.is-collapsed .template-expand-icon {
  transform: rotate(-90deg);
}
.template-description {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.4;
  margin-bottom: 6px;
  word-break: break-word;
}
.template-description .tpl-placeholder {
  color: var(--primary);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--primary-tint);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}
.template-resource {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--on-surface-variant);
  margin-bottom: 10px;
  word-break: break-all;
  opacity: 0.75;
}
.template-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}
.template-stats .stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.template-stats .stat strong {
  color: var(--on-surface);
  font-weight: 600;
}
.template-stats .stat i {
  color: var(--primary);
  font-size: 0.75rem;
}
.template-count-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 28px;
  padding: 0 12px;
  background: var(--primary-tint);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.template-body {
  max-height: 100000px;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  padding: 16px 20px;
}
.template-group-card.is-collapsed .template-body {
  max-height: 0;
  padding: 0 20px;
  opacity: 0;
}
.template-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* Leaderboard items — preserve the gold/silver/bronze medal accents
   but fix the item body background to glass */
.leaderboard-item {
  background: var(--glass-1) !important;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--on-surface);
  transition: background 0.18s ease, transform 0.18s ease;
}
.leaderboard-item:hover {
  background: var(--glass-2) !important;
  transform: translateY(-1px);
}
.leaderboard-name, .leaderboard-info { color: var(--on-surface); }
.leaderboard-stats, .leaderboard-stat, .leaderboard-trend-label { color: var(--on-surface-variant); }