body {
    background-color: #1A1A1D;
    color: #F8F9FA;
    font-family: 'Inter', 'Prompt', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', 'Prompt', sans-serif;
    letter-spacing: 0.03em;
}

/* 1. คุมข้อความทั่วไป เนื้อหา และคำอธิบายทั้งหมด (Body Text) */
body, p, span, a, li {
    /* ปรับจากความหนาปกติ (400) ลงมาให้บางเบา (300) เพื่อความพรีเมียม */
    font-weight: 300 !important;
}

/* 2. คุมหัวข้อทั้งหมด (Headings) และปุ่มเมนูต่างๆ */
h1, h2, h3, h4, h5, h6, button, .font-heading, .font-bold, .font-semibold {
    /* จากเดิมที่คลาส Tailwind มักจะตั้งไว้หนามาก (700 / Bold) 
       ภาษาไทยพอหนา 700 แล้วหัวอักษรจะทึบ แนะนำให้ดึงลงมาเหลือระดับปานกลาง (500) หรือ (600) ครับ */
    font-weight: 500 !important;
}

.glass-card {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(195, 166, 203, 0.15);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.interactive-step {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-step:hover {
    transform: translateY(-8px);
    border-top-color: #C3A6CB;
    box-shadow: 0 15px 30px -5px rgba(195, 166, 203, 0.15);
    background: rgba(40, 50, 70, 0.6);
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: 300px;
    max-height: 400px;
}

@media (min-width: 768px) {
    .chart-container { height: 350px; }
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out forwards;
}

.tab-content.active { display: block; }

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

/* Gradient Text Animation for Fun Vibe */
.gradient-text-fun {
    background: linear-gradient(135deg, #FF6F61, #C3A6CB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientMove 5s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========================================================
   PREMIUM ASYMMETRIC TRANSITION (FLOWBOX LOGO)
   ======================================================== */

/* 1. คุมการขยายขนาดของบล็อกโลโก้ภาพรวม */
.navbar-logo-hover {
    /* จังหวะตอนเมาส์เลื่อนออก (Hover Out): ให้ค่อยๆ หดกลับช้าๆ นุ่มๆ */
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.navbar-logo-hover:hover {
    /* จังหวะตอนเมาส์ชี้เข้า (Hover In): ให้ตื่นตัวขยายขึ้นเร็วกว่านิดหน่อย */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scale(1.03);
}

/* 2. คุมเอฟเฟกต์การเฟดสี Gradient ของตัวอักษร */
.logo-gradient-text {
    /* สั่งให้แอบมีพื้นหลังเฉดสีเตรียมไว้ล่วงหน้า */
    background: linear-gradient(135deg, #FF6F61, #C3A6CB);
    -webkit-background-clip: text;
    
    /* [จุดสำคัญ] สีเริ่มต้นของตัวอักษร (ปรับให้ตรงกับสีข้อความหลักของพี่ได้ครับ เช่น #FFFFFF) */
    -webkit-text-fill-color: #FFFFFF; 
    
    /* จังหวะตอนเมาส์เลื่อนออก (Hover Out): ให้เฉดสีค่อยๆ คืนร่างเดิมอย่างแช่มช้า */
    transition: -webkit-text-fill-color 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.navbar-logo-hover:hover .logo-gradient-text {
    /* เมื่อ Hover ให้เนื้อสีขาวกลายเป็นโปร่งใส เพื่อเปิดให้เห็น Gradient ด้านหลัง */
    -webkit-text-fill-color: transparent;
    
    /* จังหวะตอนเมาส์ชี้เข้า (Hover In): ให้เฉดสีคลี่คลายตัวเข้ามาใน 0.4 วินาที */
    transition: -webkit-text-fill-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}