/* ===== SRMS Goodlife - Global Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #1a56db;
    --primary-600: #1e40af;
    --primary-700: #1a3a8f;
    --primary-800: #153075;
    --primary-900: #0f2557;
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: #1f2937; overflow-x: hidden; }
.font-heading { font-family: 'Playfair Display', Georgia, serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--primary-500); border-radius: 4px; }

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #1a56db 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero overlay */
.hero-gradient { background: linear-gradient(135deg, rgba(15,37,87,0.85) 0%, rgba(13,148,136,0.6) 100%); }

/* Card hover */
.card-hover { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(26,86,219,0.15); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Pulse ring */
.pulse-ring { animation: pulseRing 2s ease-out infinite; }
@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(26,86,219,0.4); }
    70% { box-shadow: 0 0 0 15px rgba(26,86,219,0); }
    100% { box-shadow: 0 0 0 0 rgba(26,86,219,0); }
}

/* Float animation */
@keyframes floatWidget {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* Ribbon */
.ribbon {
    position: absolute; top: 16px; right: -8px;
    background: linear-gradient(135deg, #1a56db, #14b8a6);
    color: white; padding: 4px 16px; font-size: 12px;
    font-weight: 600; border-radius: 4px 0 0 4px;
}
.ribbon::after {
    content: ''; position: absolute; right: 0; bottom: -8px;
    border: 4px solid transparent; border-top-color: #0f2557; border-left-color: #0f2557;
}

/* Mobile menu */
.mobile-menu { transform: translateX(100%); transition: transform 0.3s ease-in-out; }
.mobile-menu.open { transform: translateX(0); }

/* FAQ Accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-answer.open { max-height: 500px; }
.faq-icon { transition: transform 0.3s ease; }
.faq-icon.open { transform: rotate(180deg); }

/* Page banner */
.page-banner {
    position: relative; min-height: 320px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 50%, var(--teal-600) 100%);
    overflow: hidden;
}
.page-banner::after {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Breadcrumb */
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--teal-300); }

/* Swiper custom */
.swiper-pagination-bullet-active { background: #1a56db !important; }

/* Wave divider */
.wave-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; }
.wave-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; }