/* ============================================
   CUSTOM STYLES & ANIMATIONS FOR BEASMAR
   ============================================ */

/* =====================================
   KEYFRAME ANIMATIONS
   ===================================== */

/* Blob Animation */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    34% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

@keyframes blobReverse {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    34% {
        transform: translate(-30px, 50px) scale(0.9);
    }
    66% {
        transform: translate(20px, -20px) scale(1.1);
    }
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-30px);
    }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(3, 148, 96, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(3, 148, 96, 0.6);
    }
}

/* Gradient Shift */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale Up */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* =====================================
   UTILITY CLASSES
   ===================================== */

:root {
    --brand-50: #ecfdf6;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-400: #34d399;
    --brand-500: #12b57a;
    --brand-600: #039460;
    --brand-700: #027a4f;
    --brand-900: #004d33;
    --ink-900: #0f172a;
    --ink-700: #334155;
    --muted-500: #64748b;
    --canvas: #f6f7fb;
    --glass: rgba(255,255,255,0.78);
    --border-soft: rgba(148,163,184,0.25);
    --shadow-soft: 0 18px 40px rgba(15,23,42,0.12);
    --shadow-card: 0 12px 30px rgba(15,23,42,0.1);
    --radius-card: 18px;
    --radius-button: 14px;
}

body {
    font-family: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
    background: radial-gradient(circle at top, #f8fafc 0%, #e8fbf2 35%, #f6f7fb 100%);
}

.page-shell {
    background:
        radial-gradient(circle at top, rgba(236,253,246,0.95) 0%, rgba(246,247,251,0.8) 55%, rgba(246,247,251,1) 100%);
}

.section-shell {
    position: relative;
    overflow: hidden;
}

.section-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(2, 122, 79, 0.08) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.45;
    pointer-events: none;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 55%, transparent 78%);
}

.nav-glass {
    background: rgba(255,255,255,0.88);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}

.nav-link {
    color: var(--ink-700);
    font-weight: 500;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-link:hover {
    color: var(--brand-600);
}

.surface-card {
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px);
}

.surface-card:hover {
    box-shadow: var(--shadow-soft);
}

.section-title {
    letter-spacing: -0.02em;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(3,148,96,0.12);
}

.hero-shell {
    background: radial-gradient(circle at top, #ffffff 0%, #ecfdf6 40%, #f6f7fb 100%);
    isolation: isolate;
}

.stat-card {
    border-radius: 20px;
    padding: 1.5rem;
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2s {
    animation-delay: 2s;
}

.animation-delay-4s {
    animation-delay: 4s;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

.animate-gradient-shift {
    animation: gradientShift 6s ease infinite;
    background-size: 200% 200%;
}

/* =====================================
   GLASS MORPHISM EFFECT
   ===================================== */

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* =====================================
   GRADIENT BACKGROUNDS
   ===================================== */

.gradient-blue-white {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf6 50%, #d1fae5 100%);
}

.gradient-blue-light {
    background: linear-gradient(135deg, #ecfdf6 0%, #d1fae5 100%);
}

/* =====================================
   GLOW EFFECTS
   ===================================== */

.glow-blue {
    box-shadow: 0 0 30px rgba(3, 148, 96, 0.3);
    transition: box-shadow 0.3s ease;
}

.glow-blue:hover {
    box-shadow: 0 0 50px rgba(3, 148, 96, 0.5);
}

.glow-button {
    transition: all 0.3s ease;
    position: relative;
}

.glow-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: inherit;
    opacity: 0;
    filter: blur(20px);
    z-index: -1;
    transition: opacity 0.3s ease;
}

.glow-button:hover::before {
    opacity: 1;
}

/* =====================================
   CARD HOVER EFFECTS
   ===================================== */

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(3, 148, 96, 0.15);
}

/* =====================================
   TEXT & TYPOGRAPHY EFFECTS
   ===================================== */

.text-gradient {
    background: linear-gradient(135deg, #039460 0%, #12b57a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-glow {
    color: #039460;
    text-shadow: 0 0 20px rgba(3, 148, 96, 0.3);
    transition: text-shadow 0.3s ease;
}

.text-glow:hover {
    text-shadow: 0 0 40px rgba(3, 148, 96, 0.6);
}

/* =====================================
   BUTTON STYLES
   ===================================== */

.btn-primary {
    background: linear-gradient(135deg, #039460 0%, #027a4f 100%);
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-button);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    box-shadow: 0 10px 40px rgba(3, 148, 96, 0.4);
    transform: translateY(-2px);
}

.btn-secondary {
    color: #039460;
    border: 2px solid #039460;
    background: white;
    transition: all 0.3s ease;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-button);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-secondary:hover {
    background: #ecfdf6;
    box-shadow: 0 10px 30px rgba(3, 148, 96, 0.2);
}

.btn-sm {
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 16px;
}

/* =====================================
   INPUT STYLES
   ===================================== */

input, select, textarea {
    transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(3, 148, 96, 0.1), 0 0 0 1px #039460;
}

/* =====================================
   BORDER ANIMATIONS
   ===================================== */

.border-gradient {
    border: 2px solid transparent;
    background-clip: padding-box;
}

.border-gradient-blue {
    border-image: linear-gradient(135deg, #039460, #12b57a) 1;
}

/* =====================================
   SCROLL ANIMATIONS
   ===================================== */

.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.scroll-fade-in.active {
    animation: fadeInUp 0.8s ease forwards;
}

/* =====================================
   RESPONSIVE ADJUSTMENTS
   ===================================== */

@media (max-width: 768px) {
    .animate-blob {
        animation: blob 10s infinite;
    }

    .btn-lg {
        padding: 0.9rem 1.4rem;
        font-size: 0.95rem;
        border-radius: 14px;
    }

    .section-kicker {
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
    }

    .section-shell::before {
        opacity: 0.28;
        background-size: 22px 22px;
    }
}

/* =====================================
   SMOOTH SCROLLING
   ===================================== */

html {
    scroll-behavior: smooth;
}

/* =====================================
   SELECTION STYLES
   ===================================== */

::selection {
    background: #039460;
    color: white;
}

::-moz-selection {
    background: #039460;
    color: white;
}

/* =====================================
   SCROLLBAR STYLES (Webkit browsers)
   ===================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background: #039460;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #027a4f;
}

/* =====================================
   PERFORMANCE OPTIMIZATIONS
   ===================================== */

.will-change-transform {
    will-change: transform;
}

.gpu-accelerated {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* =====================================
   BACKDROP FILTER SUPPORT
   ===================================== */

@supports (backdrop-filter: blur(10px)) {
    .backdrop-blur-xl {
        backdrop-filter: blur(20px) !important;
    }
}

@supports (-webkit-backdrop-filter: blur(10px)) {
    .backdrop-blur-xl {
        -webkit-backdrop-filter: blur(20px) !important;
    }
}