/* =========================================
   1. Core Setup & Light Mode Background
   ========================================= */
html {
    scroll-behavior: smooth;
    background-color: #f8fafc; /* Clean, trust-building light gray/white */
}

/* =========================================
   2. The Premium Technical Grid (Light Mode)
   ========================================= */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-size: 50px 50px;
    /* Very faint dark lines for the grid to keep it clean */
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    /* Fades the grid out towards the bottom for a polished look */
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

/* =========================================
   3. Ambient Mesh Glows
   ========================================= */
.ambient-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    pointer-events: none;
}
.glow-blue {
    top: -10%;
    left: -10%;
    background: rgba(2, 132, 199, 0.15); /* Soft Brand Blue */
}
.glow-green {
    bottom: -10%;
    right: -10%;
    background: rgba(34, 197, 94, 0.12); /* Soft WhatsApp Green */
}

/* =========================================
   4. Interactive Hover Reveal (Hero Section)
   ========================================= */
/* Base setup for the Interactive Reveal container */
.reveal-wrapper {
    /* Initialize center coordinates */
    --x: 50%;
    --y: 50%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Subtle lift effect when hovering over the container */
.reveal-wrapper:hover {
    transform: translateY(-10px) scale(1.02);
}

/* The Magic Mask Logic for the Overlay Image */
.layer-reveal {
    -webkit-mask-image: radial-gradient(circle 250px at var(--x) var(--y), rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle 250px at var(--x) var(--y), rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Show the overlay when hovering */
.reveal-wrapper:hover .layer-reveal {
    opacity: 1;
}

/* =========================================
   5. Upgraded Frosted Glass Cards (Bento Box)
   ========================================= */
.glass-card {
    /* Semi-transparent white background for the glass effect */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* Soft white border to define the edges */
    border: 1px solid rgba(255, 255, 255, 0.8);
    
    /* Subtle shadow to lift it off the background */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* =========================================
   6. WhatsApp Floating Pulse Animation
   ========================================= */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: #25D366; /* Official WhatsApp Green */
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}