.elementor-41583 .elementor-element.elementor-element-b2998cc{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-495bb8b */@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Kanit:wght@300;400;500;600;800&display=swap');

    /* ================== BASE & LAYOUT ================== */
    #intro { 
        position: fixed; inset: 0; z-index: 999999;
        height: 100vh; height: 100svh; 
        display: flex; flex-direction: column; 
        justify-content: center; align-items: center; 
        background-color: #030108; 
        cursor: crosshair; 
        font-family: 'Kanit', sans-serif; color: white; 
        perspective: 1200px; 
    }

    body.intro-active { overflow: hidden !important; }

    #glscreen {
        position: absolute; top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover; z-index: 1; 
        filter: brightness(0.8) contrast(1.2); 
    }

    /* Ambient dark & Cinematic noise */
    #intro::before {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(circle at center, rgba(15, 10, 30, 0.2) 0%, rgba(3, 1, 10, 0.9) 80%, #000000 100%);
        z-index: 1; pointer-events: none;
    }
    
    /* Scanner Line Effect */
    #intro::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(to bottom, transparent 50%, rgba(192, 132, 252, 0.03) 51%, transparent 51%);
        background-size: 100% 4px;
        z-index: 1; pointer-events: none;
        animation: scanline 10s linear infinite;
    }

    /* ================== GALAXY SPACE POD CARD ================== */
    #kdc-production {
        position: relative; z-index: 2; 
        width: 90%; max-width: 800px;
        text-align: center; pointer-events: none; 
        
        /* Sci-Fi Space Glass */
        background: linear-gradient(135deg, rgba(20, 15, 40, 0.5) 0%, rgba(5, 15, 35, 0.7) 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(192, 132, 252, 0.2);
        border-radius: 30px; 
        padding: 4rem 3rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(56, 189, 248, 0.1);
        
        transform-style: preserve-3d;
        transform: translateZ(0);
        transition: transform 0.1s ease-out, opacity 0.6s ease;
        opacity: 0;
    }

    /* เส้นตกแต่งขอบบนล่างของบอร์ด */
    #kdc-production::before, #kdc-production::after {
        content: ""; position: absolute; left: 50%; transform: translateX(-50%);
        width: 150px; height: 3px; border-radius: 10px;
        background: linear-gradient(90deg, transparent, #c084fc, #38bdf8, transparent);
    }
    #kdc-production::before { top: 0; }
    #kdc-production::after { bottom: 0; }

    /* ================== TYPOGRAPHY ================== */
    .gx { 
        font-family: 'Chakra Petch', sans-serif; 
        font-size: 5rem; font-weight: 700; letter-spacing: 8px; line-height: 1.1;
        margin: 0 0 0.5rem 0; 
        color: #fff;
        text-shadow: 0 0 15px rgba(192, 132, 252, 0.6), 0 0 30px rgba(56, 189, 248, 0.4), -2px 0 0 #0f172a, 2px 0 0 #0f172a;
        transform: translateZ(40px); 
    }

    .gx-title {
        font-size: 1.6rem; font-weight: 500; letter-spacing: 2px;
        margin: 0 0 2rem 0; color: #e0e7ff; 
        text-shadow: 0 0 10px rgba(192, 132, 252, 0.5);
        transform: translateZ(30px);
    }

    .gx-sub { 
        font-size: 1.15rem; font-weight: 400; color: #e2e8f0; 
        line-height: 1.7; margin: 0 0 1.5rem 0; 
        transform: translateZ(20px);
    }

    #kdc-p { 
        font-size: 1rem; font-weight: 300; color: #cbd5e1; 
        line-height: 1.8; margin: 0; 
        transform: translateZ(10px);
    }

    /* ================== CALL TO ACTION (CAPSULE BUTTON) ================== */
    #intro-text {
        position: absolute; bottom: 8%; z-index: 2;
        font-family: 'Chakra Petch', sans-serif;
        font-size: 1rem; font-weight: 700; letter-spacing: 10px;
        color: #e0e7ff; text-transform: uppercase;
        pointer-events: none; opacity: 0;
        padding: 15px 40px; 
        
        border-radius: 50px;
        border: 1px solid rgba(192, 132, 252, 0.4);
        background: rgba(20, 15, 40, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 0 15px rgba(192, 132, 252, 0.3), inset 0 0 10px rgba(56, 189, 248, 0.2);
    }

    .x-btn { display: none; }

    /* ================== RESPONSIVE ================== */
    @media (max-width: 767px) {
        #kdc-production { padding: 3rem 1.5rem; width: 88%; border-radius: 20px; transform: none !important; } 
        .gx { font-size: 3rem; letter-spacing: 4px; transform: translateZ(0); }
        .gx-title { font-size: 1.2rem; transform: translateZ(0); }
        .gx-sub { font-size: 0.95rem; margin-bottom: 1rem; transform: translateZ(0); }
        #kdc-p { font-size: 0.85rem; transform: translateZ(0); }
        #intro-text { font-size: 0.8rem; letter-spacing: 6px; bottom: 6%; padding: 12px 25px; }
    }

    /* ================== KEYFRAMES ================== */
    @keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 100vh; } }/* End custom CSS */