/* Base styles and glassmorphism theme */
:root {
    --primary: #0f172a; /* slate-900 */
    --secondary: #e11d48; /* rose-600 */
    --accent: #22c55e; /* green-500 */
    --surface: rgba(255,255,255,0.08);
    --surface-strong: rgba(255,255,255,0.16);
    --backdrop: radial-gradient(1000px 600px at 10% 10%, rgba(225,29,72,0.18), transparent 40%),
                radial-gradient(800px 480px at 90% 20%, rgba(34,197,94,0.18), transparent 45%),
                radial-gradient(900px 520px at 50% 100%, rgba(56,189,248,0.18), transparent 50%),
                linear-gradient(180deg, #0b1020, #0b0f1a);
}

html, body {
    background: var(--backdrop);
    color: #e5e7eb;
}

.glass {
    background: var(--surface);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.glass-strong {
    background: var(--surface-strong);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Animated gradient ring for buttons */
.btn-gradient {
    position: relative;
    overflow: hidden;
}
.btn-gradient::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, #e11d48, #22c55e, #38bdf8, #e11d48);
    filter: blur(6px);
    animation: spin 6s linear infinite;
}
.btn-gradient > span {
    position: relative;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Subtle float/slide animations */
.aos-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms ease, transform 700ms ease;
}
.aos-fade.aos-in {
    opacity: 1;
    transform: translateY(0);
}

.card-tilt {
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.card-tilt:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.nav-underline {
    position: relative;
}
.nav-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: linear-gradient(90deg, #e11d48, #22c55e);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 280ms ease;
}
.nav-underline:hover::after {
    transform: scaleX(1);
}

.blur-border {
    position: relative;
}
.blur-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.06));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Utility helpers */
.backdrop-top-fade {
    background: linear-gradient(180deg, rgba(11,16,32,0.9), rgba(11,16,32,0));
}

/* Responsive helpers */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}