/* Global text glow effect */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, label, th, td, button, .btn {
  text-shadow: 0 2px 8px rgba(255,255,255,0.20);
}


/* Utility for brand radial gradient using --brand-rgba */
.bg-brand-radial {
  background: radial-gradient(80% 60% at 50% 10%, var(--brand-rgba), transparent);
}
/* Sticky, transparent, blurred header */
header.sticky {
  box-shadow: 0 2px 24px 0 rgba(0,0,0,0.08);
  background: rgba(15,23,42,0.72); /* fallback for bg-surface/70 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s, box-shadow 0.3s;
}

@media (min-width: 1536px) {
  header .max-w-\[120rem\] { max-width: 120rem; }
}
:root{
  /* Brand color in HEX for easy change. Update this only. */
  --brand: #7f37d6;
  /* Will be populated at runtime as RGB for Tailwind's primary color */
  --color-primary: 0 119 255;
  --brand-rgba: rgba(240, 10, 240, 0.089);
}

/* Light/Dark theme base (dark by default) */
html{ color-scheme: light; }

/* Reusable component classes without Tailwind @apply (CDN friendly) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:0.5rem; /* rounded-lg */
  padding:0.625rem 1rem; /* py-2.5 px-4 */
  font-size:0.875rem; /* text-sm */
  font-weight:600; /* font-medium-ish */
  line-height:1.1;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.92);
  transition:all .2s ease;
}
.btn:focus{ outline: none; box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0.35); }
.btn:hover{ background: rgba(255,255,255,0.08); }

.btn-primary{
  background: rgb(var(--color-primary));
  color: #fff;
  border-color: rgb(var(--color-primary) / 0.4);
  box-shadow: 0 10px 30px -10px rgb(var(--color-primary) / 0.45);
}
.btn-primary:hover{ filter: brightness(1.05); }

.btn-ghost{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.12);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.10); }

.feature-card{
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid rgba(255,255,255,0.10);
  background: #0f172a; /* surface */
  padding: 1.5rem; /* p-6 */
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover{
  border-color: rgb(var(--color-primary) / 0.4);
  box-shadow: 0 10px 30px -10px rgb(var(--color-primary) / 0.45);
}
.feature-card i{ font-size:1.25rem; color: rgb(var(--color-primary)); }
.feature-card h3{ margin-top:0.75rem; font-size:1.125rem; font-weight:600; }
.feature-card p{ margin-top:0.25rem; color:rgba(255,255,255,0.7); font-size:0.9rem; }

.metric-card{
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(17,26,46,0.6));
  padding: 1.25rem; /* p-5 */
  text-align:center;
}
.metric-card .metric{ font-size:1.875rem; font-weight:800; color:#fff; letter-spacing:-0.01em; }
.metric-card .label{ margin-top:0.25rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.6); }

/* Small utility overrides */
summary::-webkit-details-marker{ display:none; }