@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
        
        * {
            font-family: 'Poppins', sans-serif;
        }
        
        body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('./back.jpg') center center / cover no-repeat;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(20, 20, 30, 0.65);
            z-index: 0;
            pointer-events: none;
        }
        .hero-section,
        .stats-section,
        .feature-card,
        .auth-section,
        .navbar-custom,
        footer {
            position: relative;
            z-index: 1;
        }
        
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .floating-paws {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
        
        .paw {
            position: absolute;
            font-size: 2rem;
            color: rgba(255, 255, 255, 0.1);
            animation: float 6s ease-in-out infinite;
        }
        
        .paw:nth-child(1) { left: 10%; animation-delay: 0s; }
        .paw:nth-child(2) { left: 20%; animation-delay: 1s; }
        .paw:nth-child(3) { left: 30%; animation-delay: 2s; }
        .paw:nth-child(4) { left: 40%; animation-delay: 3s; }
        .paw:nth-child(5) { left: 50%; animation-delay: 4s; }
        .paw:nth-child(6) { left: 60%; animation-delay: 5s; }
        .paw:nth-child(7) { left: 70%; animation-delay: 1.5s; }
        .paw:nth-child(8) { left: 80%; animation-delay: 2.5s; }
        
        @keyframes float {
            0%, 100% { transform: translateY(100vh) rotate(0deg); }
            50% { transform: translateY(-100px) rotate(180deg); }
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-title {
            font-size: 4rem;
            font-weight: 700;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: slideInDown 1s ease-out;
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            animation: slideInUp 1s ease-out 0.3s both;
        }
        
        .btn-primary-custom {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            border: none;
            padding: 15px 40px;
            font-size: 1.2rem;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50px;
            pointer-events: none;
            opacity: 0.7;
        }
        
        .btn-primary-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
            background: linear-gradient(45deg, #ff5252, #ffb74d);
        }
        
        .btn-primary-custom:hover::before {
            opacity: 0.8;
            animation: featherShimmer 2s ease-in-out infinite;
        }
        
        @keyframes featherShimmer {
            0%, 100% { 
                transform: translateX(0) translateY(0) scaleX(1);
                opacity: 0.7;
            }
            25% { 
                transform: translateX(1px) translateY(-0.5px) scaleX(1.02);
                opacity: 0.8;
            }
            50% { 
                transform: translateX(-1px) translateY(0.5px) scaleX(0.98);
                opacity: 0.6;
            }
            75% { 
                transform: translateX(0.5px) translateY(0.5px) scaleX(1.01);
                opacity: 0.75;
            }
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 2rem;
            margin: 1rem 0;
            transition: all 0.3s ease;
            animation: fadeInUp 1s ease-out;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 3rem;
            color: #feca57;
            margin-bottom: 1rem;
            animation: bounce 2s infinite;
        }
        
        .stats-section {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 4rem 0;
            margin: 4rem 0;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: #feca57;
            animation: countUp 2s ease-out;
        }
        
        .auth-section {
            animation: slideInRight 1s ease-out;
        }
        
        .auth-form {
            animation: slideDown 0.5s ease-out;
            transform-origin: top;
        }
        
        .form-container {
            background: rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(12px);
            border: 2.5px dashed #feca57;
            border-radius: 28px;
            padding: 2.2rem 2rem 2rem 2rem;
            box-shadow: 0 8px 32px 0 rgba(120, 80, 180, 0.25), 0 0 0 8px rgba(254,202,87,0.08);
            position: relative;
            overflow: hidden;
        }
        .form-container::before {
            content: "";
            position: absolute;
            left: -30px;
            top: -30px;
            width: 90px;
            height: 90px;
            background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f43e.png') no-repeat center/60px, rgba(255,255,255,0.04);
            opacity: 0.25;
            z-index: 0;
            pointer-events: none;
            border-radius: 50%;
        }
        .form-container::after {
            content: "";
            position: absolute;
            right: -25px;
            bottom: -25px;
            width: 70px;
            height: 70px;
            background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f43e.png') no-repeat center/45px, rgba(255,255,255,0.04);
            opacity: 0.18;
            z-index: 0;
            pointer-events: none;
            border-radius: 50%;
        }
        .auth-form h4, .auth-form label, .auth-form .form-check-label {
            font-family: 'Poppins', cursive, sans-serif;
            letter-spacing: 0.5px;
            color: #fff7e6;
            text-shadow: 1px 1px 2px #764ba2, 0 0 2px #feca57;
        }
        .form-control {
            background: rgba(255, 255, 255, 0.93);
            border: 2px solid #feca57;
            border-radius: 16px;
            padding: 14px 18px;
            font-size: 1.08rem;
            font-family: 'Poppins', cursive, sans-serif;
            color: #764ba2;
            box-shadow: 0 2px 8px rgba(254,202,87,0.08);
            transition: border-color 0.2s, box-shadow 0.2s;
            position: relative;
            z-index: 1;
        }
        .form-control:focus {
            border-color: #ff6b6b;
            box-shadow: 0 0 0 0.18rem rgba(255, 107, 107, 0.18);
            background: #fffbe9;
            color: #ff6b6b;
        }
        .form-check-input:checked {
            background-color: #feca57;
            border-color: #ff6b6b;
            box-shadow: 0 0 0 0.15rem #ff6b6b44;
        }
        .form-check-input {
            border-radius: 50%;
            border: 2px solid #feca57;
        }
        .btn-primary-custom, .btn-warning {
            box-shadow: 0 2px 12px 0 rgba(254,202,87,0.18), 0 0 0 2px #ff6b6b22;
        }
        .btn-primary-custom i, .btn-warning i {
            filter: drop-shadow(0 1px 2px #fff7e6);
        }
        .auth-form {
            border-radius: 28px;
            box-shadow: 0 4px 24px 0 rgba(120, 80, 180, 0.10);
        }
        .auth-form .alert-info {
            background: rgba(254,202,87,0.18);
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 0.98rem;
            box-shadow: 0 1px 4px 0 rgba(254,202,87,0.08);
        }
        
        @keyframes slideInDown {
            from { opacity: 0; transform: translateY(-50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        
        @keyframes slideDown {
            from { 
                opacity: 0; 
                transform: translateY(-20px) scaleY(0.8); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0) scaleY(1); 
            }
        }
        
        .navbar-custom {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            position: sticky;
            top: 0;
            z-index: 1030;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
        }
        
        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .nav-link:hover {
            color: #feca57 !important;
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .hero-title { font-size: 2.5rem; }
            .hero-subtitle { font-size: 1.2rem; }
            .feature-card { margin: 0.5rem 0; }
        }