:root{
    --primary:#0ea5e9;
    --secondary:#06b6d4;
    --success:#10b981;
    --dark:#0f172a;
    --muted:#64748b;
    --bg:#f8fafc;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:'Prompt',sans-serif;
    background:var(--bg);
    color:var(--dark);
    overflow-x: hidden;
}

a{
    text-decoration:none;
}

.navbar{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(226, 232, 240, 0.8);
}

.nav-inner{
    max-width:1180px;
    margin:auto;
    padding:16px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
/* จัดการแถบเมนูด้านบน */
.main-header {
    background-color: #ffffff; /* พื้นหลังสีขาว สะอาดตาเข้ากับโลโก้ */
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ควบคุมขนาดและมิติของโลโก้ */
.brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 40px; /* 💡 ปรับความสูงตรงนี้ตามใจชอบ ขนาด 35px - 45px กำลังพอดีคำ */
    width: auto;  /* ปล่อยความกว้าง Auto เพื่อรักษาอัตราส่วนภาพไม่ให้บี้แบน */
    object-fit: contain;
    transition: transform 0.2s ease;
}

/* ลูกเล่นเวลาเอาเมาส์ไปชี้ที่โลโก้ */
.brand-logo:hover .logo-img {
    transform: scale(1.02); /* ขยายใหญ่ขึ้นนิดหน่อยให้พอดูมีมิติ */
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:700;
    color:#0f172a;
}

.logo-mark{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--primary),var(--success));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.nav-links{
    display:flex;
    gap:28px;
    align-items:center;
}

.nav-links a{
    color:#334155;
    font-size:15px;
    font-weight:500;
    cursor: pointer;
}

.btn-nav{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white !important;
    padding:12px 22px;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(14,165,233,.28);
}

.section{
    max-width:1180px;
    margin:auto;
    padding:100px 24px;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   🎯 PREMIUM BACKGROUNDS LAYER
   ========================================================================== */
.hero{
    position: relative;
    background-color: #ffffff;
    background-image: 
        radial-gradient(circle at 75% 40%, rgba(6, 182, 212, 0.18), transparent 45%),
        radial-gradient(circle at 20% 70%, rgba(16, 185, 129, 0.08), transparent 40%),
        linear-gradient(rgba(226, 232, 240, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 232, 240, 0.3) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 45px 45px, 45px 45px;
}

#features-wrapper {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 50%, #f8fafc 100%);
    position: relative;
}

#features-wrapper::before {
    content: ''; position: absolute; width: 600px; height: 600px;
    top: 15%; left: -15%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 75%);
    border-radius: 50%; pointer-events: none;
}

#features-wrapper::after {
    content: ''; position: absolute; width: 600px; height: 600px;
    bottom: 10%; right: -15%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.07) 0%, transparent 75%);
    border-radius: 50%; pointer-events: none;
}

.wave-divider {
    position: relative;
    width: 100%;
    line-height: 0;
    background: #f8fafc;
}
.wave-divider svg {
    position: relative; display: block;
    width: calc(100% + 1.3px); height: 80px;
}
.wave-divider .shape-fill {
    fill: #0f172a;
}

#bottom-wrapper {
    background: linear-gradient(180deg, #0f172a 0%, #090d16 100%);
    position: relative;
    padding-bottom: 60px;
}

#bottom-wrapper::before {
    content: ''; position: absolute; inset: 0;
    background-image: 
        radial-gradient(circle at 50% 30%, rgba(14, 165, 233, 0.15), transparent 60%),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 45px 45px, 45px 45px;
    pointer-events: none;
}

#bottom-wrapper .section-title h2 { color: #ffffff; }
#bottom-wrapper .section-title p { color: #94a3b8; }

/* ==========================================================================
   ANIMATIONS & REVEAL EFFECTS
   ========================================================================== */
.reveal {
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes bounceInDown {
    0% { opacity: 0; transform: translateY(-40px); }
    60% { transform: translateY(8px); }
    80% { transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}

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

.hero-content-bounce {
    animation: bounceInDown 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.hero-image-wrapper {
    display: flex; justify-content: center; align-items: center; width: 100%;
    animation: fadeInUpHero 1.1s ease-out forwards;
}

.hero-image {
    width: 100%; max-width: 380px; height: auto;
    border-radius: 40px; display: block;
    box-shadow: 0 30px 70px rgba(14, 165, 233, 0.2);
}

.hero-grid {
    max-width: 1180px; margin: auto; padding: 60px 24px;
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center;
}

.badge{
    display:inline-flex; align-items:center; gap:8px;
    background:#e0f2fe; color:#0369a1; padding:8px 16px;
    border-radius:999px; font-weight:600; font-size:14px; margin-bottom:22px;
}

.hero h1{ font-size:54px; line-height:1.18; margin-bottom:22px; }
.hero h1 span{ color:var(--primary); }
.hero p{ font-size:18px; color:#475569; line-height:1.8; margin-bottom:28px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
    border:0; cursor:pointer; font-family:'Prompt',sans-serif;
    padding:15px 24px; border-radius:14px; font-weight:600; font-size:16px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition: all 0.3s ease;
}

.btn:hover { transform: translateY(-3px); }
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; box-shadow:0 12px 28px rgba(14,165,233,.3); }
.btn-primary:hover { box-shadow:0 18px 34px rgba(14,165,233,.45); }
.btn-outline{ background:#fff; color:#0369a1; border:1px solid #bae6fd; }
.btn-outline:hover { background: #f0f9ff; }

.ad-image{ width:100%; border-radius:24px; box-shadow: 0 25px 55px rgba(15, 23, 42, 0.06); display:block; transition: transform 0.4s ease; }
.ad-image:hover { transform: scale(1.015); }

.section-title{ text-align:center; margin-bottom:50px; }
.section-title h2{ font-size:38px; margin-bottom:14px; font-weight: 700; letter-spacing: -0.5px; }
.section-title p{ color:var(--muted); font-size: 16px; }

.ads-grid{ display:grid; grid-template-columns:1fr; max-width: 960px; margin: 0 auto; gap:24px; }
.ad-card{ border-radius:24px; overflow:hidden; }
.ad-card img{ width:100%; display:block; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25); border-radius:24px; }

.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature{
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8); padding:32px 24px;
    border-radius:24px; text-align:center; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.02);
    position: relative; z-index: 1; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #0284c7, #06b6d4); z-index: -1; opacity: 0; transition: opacity 0.4s ease;
}
.feature-icon{
    width:58px; height:58px; margin:0 auto 20px; border-radius:18px;
    background:#e0f2fe; color:#0284c7; display:flex; align-items:center; justify-content:center; transition: all 0.4s ease;
}
.feature h3 { font-size:19px; margin-bottom:12px; transition: color 0.3s ease; }
.feature p { font-size:14px; color:var(--muted); line-height:1.6; transition: color 0.3s ease; }
.feature:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 20px 45px rgba(14, 165, 233, 0.25); }
.feature:hover::before { opacity: 1; }
.feature:hover .feature-icon { background: rgba(255, 255, 255, 0.2); color: #fff; transform: scale(1.05); }
.feature:hover h3 { color: #fff; }
.feature:hover p { color: rgba(255, 255, 255, 0.85); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom: 40px; }
.stat{ background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); padding:35px 24px; border-radius:24px; text-align:center; transition: all 0.3s ease; }
.stat:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.09); border-color: rgba(14, 165, 233, 0.3); }
.stat strong{ display:block; font-size:38px; color:#38bdf8; font-weight: 700; margin-bottom: 6px; }
.stat span{ color:#94a3b8; font-size: 15px; }

.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items: center; }
.price-card{ background:#ffffff; padding:45px 32px; border-radius:28px; border:1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); color: var(--dark); }
.price-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }
.price-card.popular{ border: 3px solid var(--primary); transform: translateY(-12px); box-shadow: 0 25px 55px rgba(14, 165, 233, 0.25); }
.price-card.popular:hover { transform: translateY(-16px); box-shadow: 0 35px 65px rgba(14, 165, 233, 0.35); }
.price-card h3{ font-size:26px; margin-bottom:12px; font-weight: 700; }
.price{ font-size:42px; font-weight:700; color:var(--primary); margin:22px 0; }
.price-card ul{ list-style:none; margin:25px 0; }
.price-card li{ padding:12px 0; color:#475569; font-size: 15px; border-bottom: 1px dashed #e2e8f0; }
.price-card li:last-child{ border-bottom: none; }

.footer{ background:#090d16; color:#64748b; text-align:center; padding:45px 24px; border-top: 1px solid rgba(255, 255, 255, 0.05); position: relative; z-index: 5; }

/* ==========================================================================
   🔒 MODAL SYSTEM (ระบบกล่องปอปอัปชุดใหม่)
   ========================================================================== */
.register-modal{
    position:fixed; inset:0;
    background:rgba(15,23,42,.6);
    backdrop-filter:blur(16px);
    z-index:9999;
    display:none;
    align-items:center; justify-content:center;
    padding:20px;
}
.register-modal.show{ display:flex; }

/* กล่องย่อยสำหรับ Login ฝังในไฟล์หลักเพื่อความเร็ว */
.login-popup-box {
    width: 100%; max-width: 420px;
    background: #ffffff; border-radius: 24px;
    padding: 40px 32px; position: relative;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.8);
}
.login-popup-box h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.login-popup-box p { color: var(--muted); font-size: 14px; text-align: center; margin-bottom: 28px; }

.form-group { margin-bottom: 20px; position: relative; }
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #334155; }
.form-control {
    width: 100%; padding: 14px 16px; border-radius: 12px;
    border: 1px solid #cbd5e1; font-family: 'Prompt', sans-serif;
    font-size: 15px; transition: all 0.3s ease; outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15); }

.btn-submit { width: 100%; margin-top: 10px; }

/* กล่องเดิมสำหรับดึงหน้า Register iframe */
.register-popup{
    width:100%; max-width:540px; height:90vh; max-height:740px;
    background:rgba(255,255,255,.1); border-radius:30px;
    overflow:hidden; position:relative; box-shadow:0 40px 100px rgba(0,0,0,.45);
}
.register-popup iframe{ width:100%; height:100%; border:0; }

.close-modal{
    position:absolute; top:18px; right:18px; z-index:5;
    width:36px; height:36px; border-radius:50%; border:0;
    background:rgba(15,23,42,0.06); color: #334155;
    cursor:pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.close-modal:hover { background: rgba(15,23,42,0.15); }
.close-modal-white { background: rgba(255,255,255,0.2); color: #fff; }
.close-modal-white:hover { background: rgba(255,255,255,0.3); }

@media(max-width:900px){
    .hero-grid, .ads-grid, .pricing{ grid-template-columns:1fr; }
    .feature-grid, .stats{ grid-template-columns:repeat(2,1fr); }
    .hero h1{ font-size:38px; } .nav-links{ display:none; }
    .price-card.popular { transform: translateY(0); } .price-card.popular:hover { transform: translateY(-4px); }
}
@media(max-width:520px){
    .feature-grid, .stats{ grid-template-columns:1fr; }
    .hero-grid{ padding-top:50px; } .hero h1{ font-size:32px; }
}