/* Custom Styles for Tema Djarum Landing Page */

:root {
    /* Emerald/Forest Green Palette in OKLCH */
    --color-primary: oklch(50% 0.15 150); /* Forest Green */
    --color-primary-light: oklch(65% 0.12 150);
    --color-primary-dark: oklch(35% 0.18 150);
    --color-secondary: oklch(98% 0.01 150); /* White/Light Gray */
    --color-accent: oklch(75% 0.2 80); /* Gold/Accent if needed */
    
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
}

@layer base {
    body {
        @apply font-sans text-gray-900 bg-slate-100;
    }
    
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: 
            linear-gradient(oklch(50% 0.15 150 / 0.08) 1px, transparent 1px),
            linear-gradient(90deg, oklch(50% 0.15 150 / 0.08) 1px, transparent 1px),
            radial-gradient(at 0% 0%, oklch(50% 0.15 150 / 0.05) 0px, transparent 50%),
            radial-gradient(at 100% 100%, oklch(50% 0.15 150 / 0.05) 0px, transparent 50%);
        background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
        background-attachment: fixed;
        pointer-events: none;
        z-index: -1;
    }
}

/* Glassmorphism utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

/* Modern Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom AOS Tweaks */
[data-aos] {
    pointer-events: none;
}
[data-aos].aos-animate {
    pointer-events: auto;
}

/* Section Transitions */
section {
    position: relative;
    overflow: hidden;
}

/* Pricing Card Glow */
.pricing-card:hover {
    box-shadow: 0 20px 40px -10px oklch(50% 0.15 150 / 0.2);
}

/* Accordion Customization */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.accordion-item.active .accordion-content {
    max-height: 500px;
}
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}