/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

/* ===== NAV ===== */
.nav-logo-text { color: #4c2214; }
#navbar.scrolled .nav-logo-text { color: #4c2214; }

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

.geo-circle-1 {
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,90,58,0.08) 0%, transparent 70%);
    top: -80px; right: -100px;
}
.geo-circle-2 {
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,75,0.12) 0%, transparent 70%);
    bottom: 15%; left: 5%;
}
.geo-square-1 {
    width: 120px; height: 120px;
    background: rgba(192,90,58,0.07);
    border-radius: 24px;
    top: 20%; right: 8%;
    transform: rotate(45deg);
}
.geo-triangle-1 {
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid rgba(212,168,75,0.1);
    bottom: 25%; right: 15%;
}
.geo-dots {
    width: 100px; height: 100px;
    top: 35%; left: 3%;
    background-image: radial-gradient(circle, rgba(192,90,58,0.2) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}
.geo-stripe-1 {
    width: 200px; height: 60px;
    bottom: 10%; left: 12%;
    background: repeating-linear-gradient(
        -45deg,
        rgba(192,90,58,0.06),
        rgba(192,90,58,0.06) 8px,
        transparent 8px,
        transparent 16px
    );
    border-radius: 12px;
}

/* ===== FLOATING CARDS ===== */
.floating-card-1 {
    animation: float1 4s ease-in-out infinite;
}
.floating-card-2 {
    animation: float2 5s ease-in-out infinite;
}
.floating-card-3 {
    animation: float3 3.5s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% { transform: translateY(0px) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(0deg); }
}
@keyframes float2 {
    0%, 100% { transform: translateY(0px) rotate(2deg); }
    50% { transform: translateY(-16px) rotate(0deg); }
}
@keyframes float3 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .floating-card-1, .floating-card-2, .floating-card-3 { animation: none; }
    .reveal { transition: none; }
    html { scroll-behavior: auto; }
}

/* ===== SERVICE CARDS ===== */
.service-card { perspective: 800px; }

/* ===== MOBILE MENU ===== */
.mobile-link { display: block; }

/* ===== BACK TO TOP ===== */
#backToTop.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .geo-circle-1 { width: 250px; height: 250px; }
    .geo-circle-2 { width: 160px; height: 160px; }
    .geo-square-1 { width: 70px; height: 70px; }
    .geo-triangle-1 { border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 69px solid rgba(212,168,75,0.1); }
    .geo-dots { width: 60px; height: 60px; }
    .geo-stripe-1 { width: 120px; height: 40px; }
    .floating-card-1 { left: -4px; top: -2px; }
    .floating-card-2 { right: -4px; bottom: -2px; }
    .floating-card-3 { right: -4px; }
}