/* ===== BASE & RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { min-height: 100vh; }
img { max-width: 100%; display: block; }

/* ===== NAVBAR ===== */
#navbar { background: transparent; }
#navbar.scrolled { background: rgba(11, 29, 58, 0.95); backdrop-blur-xl; box-shadow: 0 4px 30px rgba(0,0,0,0.2); }

/* ===== MOBILE MENU ===== */
#mobileMenu.open { opacity: 1; pointer-events: all; }

/* ===== HERO GEOMETRIC SHAPES ===== */
.geo-shape { position: absolute; pointer-events: none; }

.shape-circle-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    top: -100px; left: -100px;
    animation: float-slow 20s ease-in-out infinite;
}
.shape-circle-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    bottom: 10%; right: 5%;
    animation: float-slow 15s ease-in-out infinite reverse;
}
.shape-circle-3 {
    width: 150px; height: 150px;
    border: 2px solid rgba(52, 211, 153, 0.2);
    border-radius: 50%;
    top: 30%; left: 45%;
    animation: spin-slow 30s linear infinite;
}
.shape-rect-1 {
    width: 120px; height: 120px;
    background: rgba(52, 211, 153, 0.06);
    border: 1px solid rgba(52, 211, 153, 0.15);
    top: 20%; right: 15%;
    transform: rotate(45deg);
    animation: float-slow 12s ease-in-out infinite;
}
.shape-triangle-1 {
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid rgba(52, 211, 153, 0.07);
    bottom: 25%; left: 8%;
    animation: float-slow 18s ease-in-out infinite reverse;
}
.shape-dots {
    width: 200px; height: 200px;
    background-image: radial-gradient(circle, rgba(52, 211, 153, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    top: 50%; right: 30%;
    opacity: 0.5;
}

/* ===== WHY US SHAPES ===== */
.shape-circle-4 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -200px; left: -200px;
    animation: float-slow 25s ease-in-out infinite;
}
.shape-rect-2 {
    width: 200px; height: 200px;
    background: rgba(52, 211, 153, 0.04);
    border: 1px solid rgba(52, 211, 153, 0.1);
    top: 10%; right: 5%;
    transform: rotate(30deg);
    animation: spin-slow 40s linear infinite;
}

/* ===== ANIMATIONS ===== */
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(5deg); }
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

/* ===== SERVICE CARDS ===== */
.service-card { transform: translateY(0); transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
.service-card:hover { transform: translateY(-6px); }

/* ===== SCROLL REVEAL ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== BACK TO TOP ===== */
#backToTop.visible { opacity: 1; translate: 0 0; }

/* ===== FORM ===== */
input:focus, select:focus, textarea:focus { outline: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .shape-circle-1 { width: 300px; height: 300px; }
    .shape-circle-2 { width: 180px; height: 180px; }
    .shape-rect-1 { width: 70px; height: 70px; }
    .shape-triangle-1 { border-left-width: 35px; border-right-width: 35px; border-bottom-width: 60px; }
}