body {
    font-family: 'Inter', sans-serif;
}

/* Background grid effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 2rem 2rem;
    opacity: 0.3;
    z-index: -1;
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fix for stacking context issue with fixed header and transformed elements */
.force-layer {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ================================================= */
/* ==== FINAL MOCKUP STYLES FOR HERO SECTION ==== */
/* ================================================= */

/* This container is a simple relative anchor */
.mockup-container {
    position: relative;
    margin-top: 3rem; /* Reduced top margin for mobile */
}

/* --- MOBILE STYLES (Default) --- */

/* Hide laptop and tablet on mobile by default */
.laptop-mockup,
.tablet-mockup {
    display: none;
}

/* Center the phone mockup on mobile */
.phone-mockup {
    position: relative; /* Not absolute on mobile */
    z-index: 20;
    width: 280px; /* A good size for mobile */
    margin-left: auto;
    margin-right: auto;
    background: #111;
    border: 10px solid #000;
    border-radius: 30px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}

.phone-screen,
.laptop-screen,
.tablet-screen {
    overflow: hidden;
}

.phone-screen img,
.laptop-screen img,
.tablet-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Use cover to fill the screen nicely */
}

/* --- TABLET & DESKTOP STYLES (768px and wider) --- */

@media (min-width: 768px) {
    .mockup-container {
        margin-top: 5rem; /* Restore larger margin for desktop */
    }

    /* Show the laptop again */
    .laptop-mockup {
        display: block;
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 896px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Position the phone absolutely on the left */
    .phone-mockup {
        position: absolute;
        bottom: 0;
        left: 12%;
        width: 180px;
        z-index: 30;
    }

    /* The tablet is already handled by 'md:block' but we can be explicit */
    .tablet-mockup {
        display: block;
        position: absolute;
        bottom: 0;
        right: 12%;
        width: 320px;
        z-index: 20;
        background: #111;
        border: 10px solid #000;
        border-radius: 18px;
        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4);
        padding: 2px;
    }

    .laptop-screen {
        background: #111;
        padding: 1.5%;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
        aspect-ratio: 16 / 10;
    }
    
    .laptop-screen img {
        border-radius: 8px;
        object-fit: contain; /* Keep contain for the desktop dashboard view */
    }

    .laptop-base {
        width: 110%;
        height: 18px;
        background: #2a2a2a;
        margin: 0 auto;
        border-radius: 0 0 12px 12px;
        position: absolute;
        bottom: -18px;
        left: -5%;
        border-bottom: 2px solid #1e1e1e;
    }
    
    .laptop-notch {
        width: 20%;
        height: 4px;
        background: #111;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 4px;
    }

    .tablet-screen {
        border-radius: 8px;
        aspect-ratio: 10 / 16;
    }
    
    .phone-screen {
        border-radius: 20px;
    }
}