body {
    background: radial-gradient(circle at top, #1e293b 0, #020617 45%, #000 100%);
}

/* Allow light pages to override the default dark gradient */
body.bg-gray-50 {
    background: #f8fafc !important;
}

.glass {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.hero-orbit {
    background: radial-gradient(circle at top, rgba(56, 189, 248, 0.4), transparent 55%),
                radial-gradient(circle at bottom, rgba(236, 72, 153, 0.45), transparent 60%);
}

.gradient-text {
    background: linear-gradient(115deg, #22d3ee, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pill-gradient {
    background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(139,92,246,0.15));
    border: 1px solid rgba(148,163,184,0.4);
}

.ring-gradient {
    border-radius: 9999px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34,211,238,0.8), rgba(139,92,246,0.9));
}

.btn-primary {
    background: linear-gradient(135deg, #22d3ee, #8b5cf6);
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-ghost {
    border: 1px solid rgba(148,163,184,0.5);
}

.fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 18px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}