:root {
    /* New Color Palette */
    --primary-blue: #0d6efd;
    --accent-gold: #c5a059;
    --bg-white: #ffffff;
    --text-dark: #1f2937; /* สีเทาเข้มสำหรับตัวหนังสือ */
}

body {
    font-family: 'Prompt', 'Noto Sans SC', sans-serif;
    background-color: var(--bg-white);
    color: var(--text-dark);
}

/* ปรับพื้นหลังส่วน Hero ให้เป็นสีขาวสะอาดตา */
.tree-container {
    background: radial-gradient(ellipse at center, rgba(13, 110, 253, 0.05) 0%, transparent 70%);
}

/* ปรับการ์ดสาขาธุรกิจ */
.branch-card {
    transition: all 0.3s ease;
    background: #ffffff;
    border: 1px solid rgba(13, 110, 253, 0.1);
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.branch-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(13, 110, 253, 0.15);
    border-color: var(--accent-gold); /* เส้นขอบสีทองเมื่อ Hover */
}

/* Custom Utility Classes for Tailwind use */
.text-genesis-blue { color: var(--primary-blue); }
.bg-genesis-blue { background-color: var(--primary-blue); }
.text-genesis-gold { color: var(--accent-gold); }
.bg-genesis-gold { background-color: var(--accent-gold); }
.border-genesis-gold { border-color: var(--accent-gold); }

/* Animation Updates */
.fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-blob {
    animation: blob 7s infinite;
}

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Preloader Animations */
@keyframes spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.animate-spin-reverse {
    animation: spin-reverse 3s linear infinite;
}

.animate-pulse-fast {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.typing-effect::after {
    content: '...';
    animation: typing 1.5s infinite;
}

@keyframes typing {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}