:root {
    --navy-900: #0a0e14;
    --navy-800: #0d121b;
    --gold-500: #D4AF37;
    --gold-400: #e5c158;
    --blue-500: #3B82F6;
    --orange-500: #FF8C00;
}

body {
    background-color: var(--navy-900);
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

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

.nav-link {
    @apply text-[10px] uppercase tracking-widest text-slate-400 font-bold hover:text-white transition-colors relative;
}

.nav-link::after {
    content: '';
    @apply absolute -bottom-1 left-0 w-0 h-[1px] bg-gold-500 transition-all duration-300;
}

.nav-link:hover::after, .nav-link.active::after {
    @apply w-full;
}

.nav-link.active {
    @apply text-white;
}

.pillar-card {
    @apply p-8 border border-white/5 bg-navy-800 transition-all duration-500 hover:border-white/20;
}

input[type="checkbox"] {
    @apply appearance-none h-4 w-4 border border-white/20 rounded bg-transparent cursor-pointer relative checked:bg-gold-500 checked:border-gold-500 transition-all;
}

input[type="checkbox"]:checked::after {
    content: '✓';
    @apply absolute inset-0 flex items-center justify-center text-[10px] text-navy-900 font-bold;
}

/* Cosmic Elements */
.bg-cosmic-glow {
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(212, 175, 55, 0.05), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(59, 130, 246, 0.05), transparent 40%);
}

.bg-gradient-radial {
    background: radial-gradient(circle, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--navy-900);
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-500);
}

/* Bento Grid */
.bento-item {
    @apply transition-all duration-500 hover:border-white/20;
}

.subsidiary-card {
    @apply transition-all duration-700;
}

/* Animation Initial States */
.hero-content, .about-hero-content, .portfolio-hero, .subsidiaries-hero,
.reveal-left, .reveal-right, .leadership-header, .leadership-content, 
.reveal-pillar-a, .reveal-pillar-b, .bento-item, .subsidiary-card {
    opacity: 0;
}