/* ============================================================
   Home Modern — ปรับสไตล์หน้าแรกให้ดูทันสมัย (override ทับของเดิม)
   ไม่แตะ HTML — โหลดหลัง main.css
   ============================================================ */

:root {
    --hm-indigo: #4f46e5;
    --hm-blue:   #2563eb;
    --hm-violet: #7c3aed;
    --hm-soft:   0 10px 30px rgba(15, 23, 42, .08);
    --hm-soft-h: 0 18px 40px rgba(79, 70, 229, .18);
}

/* ---- หัวข้อ section ให้คมและทันสมัย ---- */
.title h4,
.experience .title h3,
.testimonial .title h4,
.faq .title h4 {
    font-weight: 800 !important;
    letter-spacing: -.01em;
    color: #0f172a;
}
.title p { color: #64748b; }

/* ---- ปุ่มหลัก: gradient + เงา + hover ยก ---- */
.btn--base {
    background: linear-gradient(120deg, var(--hm-blue), var(--hm-indigo)) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn--base:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(79, 70, 229, .38);
    filter: brightness(1.05);
}

/* ---- Section ขั้นตอนซื้อ (why-choose): พื้นหลัง gradient อ่อนนุ่ม ---- */
.why-choose {
    background: linear-gradient(180deg, #f8faff 0%, #eef2ff 50%, #f5f3ff 100%);
    position: relative;
    overflow: hidden;
}
.why-choose::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(99,102,241,.10), transparent 40%),
        radial-gradient(circle at 88% 80%, rgba(168,85,247,.10), transparent 40%);
    z-index: 0;
}
.why-choose .container { position: relative; z-index: 1; }
.why-choose .shape img, .why-choose .shape2 img { opacity: .25; }

/* ---- การ์ดขั้นตอน: พื้นโปร่ง ไม่มีพื้นหลัง มุมมน hover ยก ---- */
.why-choose .card {
    border-radius: 20px !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none;
    padding: 30px 24px !important;
    transition: transform .25s ease;
    overflow: hidden;
    position: relative;
}
.why-choose .card:hover {
    transform: translateY(-6px);
}

/* ไอคอนในกล่อง: พื้น gradient นุ่ม วงกลมมน */
.why-choose .card .icon {
    background: linear-gradient(135deg, #eef2ff, #ede9fe) !important;
    color: var(--hm-indigo) !important;
    border-radius: 16px !important;
    width: 70px !important; height: 70px !important;
    display: flex !important; align-items: center; justify-content: center;
    margin: 0 auto 18px !important;
    box-shadow: 0 6px 16px rgba(99,102,241,.18);
    transition: transform .25s ease, box-shadow .25s ease;
}
.why-choose .card:hover .icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 22px rgba(99,102,241,.28);
}
.why-choose .card .icon i { color: var(--hm-indigo) !important; font-size: 26px; }
.why-choose .card .info h5 { font-weight: 700; color: #0f172a; }
.why-choose .card .info p { color: #64748b; }

/* ---- Section About: พื้นหลัง gradient อ่อน modern + รูปขอบมน ---- */
.about {
    background: linear-gradient(160deg, #ffffff 0%, #f5f7ff 55%, #faf5ff 100%);
    position: relative;
    overflow: hidden;
}
.about::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(99,102,241,.08), transparent 40%),
        radial-gradient(circle at 5% 90%, rgba(168,85,247,.07), transparent 40%);
    z-index: 0;
}
.about .container { position: relative; z-index: 1; }
.about .title h4 { font-weight: 800; color: #0f172a; }
.about .thumb img,
.about img { border-radius: 16px; box-shadow: 0 14px 36px rgba(15,23,42,.10); }

/* ---- About details: ไอคอนกล่อง gradient ---- */
.about .details .icon {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
    color: var(--hm-indigo) !important;
    border-radius: 12px !important;
}
.about .details .icon i { color: var(--hm-indigo) !important; }
.about .details .content h5 { font-weight: 700; color: #0f172a; }

/* ---- Hero: ปรับขนาดหัวข้อให้พอดี + responsive (รองรับภาษาไทยที่ยาว) ---- */
.banner-section .content h5 {
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: .04em;
    margin-bottom: 14px;
    opacity: .92;
}
.banner-section .content h3 {
    font-size: clamp(30px, 4.2vw, 54px) !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    margin-bottom: 18px;
    padding-top: 0.12em;
    word-break: break-word;
    max-width: 14ch;
}
.banner-section .content p {
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.7;
    max-width: 52ch;
    opacity: .9;
}
@media (max-width: 575px) {
    .banner-section .content h3 { font-size: 28px !important; max-width: none; }
}

/* ---- Hero: ลด overlay ดำให้เห็น gradient + เหรียญ USDT ชัด ---- */
.banner-section .banner-thumb.bg-overlay::before {
    background: linear-gradient(120deg, rgba(30,58,138,0.55), rgba(109,40,217,0.45)) !important;
    opacity: 1 !important;
}

/* ---- Hero banner form: การ์ดลอย มุมมน เงานุ่ม ---- */
.banner-form .main,
.banner-form {
    border-radius: 18px !important;
}
.banner-form .main {
    box-shadow: 0 20px 50px rgba(15, 23, 42, .18) !important;
    backdrop-filter: blur(4px);
}

/* ---- Experience / สถิติ ---- */
.experience .counter,
.experience [class*="col-"] {
    transition: transform .2s ease;
}
.experience .odometer,
.experience h3 { font-weight: 800; color: var(--hm-indigo); }

/* ---- Section ตารางเรท (plan / live-rates): พื้นหลัง gradient เข้ม ---- */
.plan {
    background: linear-gradient(160deg, #1e3a8a 0%, #3730a3 50%, #6d28d9 100%);
    position: relative;
    overflow: hidden;
}
.plan::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(59,130,246,.30), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(168,85,247,.28), transparent 42%);
    z-index: 0;
}
/* ภาพโลกจางๆ เป็นพื้นหลัง (สว่างขึ้นให้เห็นบนพื้นเข้ม) */
.plan::after {
    content: "";
    position: absolute; inset: 0;
    background: url('../images/element/world-dots.svg') center center no-repeat;
    background-size: 70% auto;
    opacity: .55;
    filter: brightness(2.2) saturate(.4);
    z-index: 0;
    pointer-events: none;
}
.plan .container { position: relative; z-index: 1; }
.plan .title h4 { font-weight: 800; color: #ffffff !important; }
.plan .title p { color: rgba(255,255,255,.8) !important; }
.plan #rate-updated-time, .plan .text-center span { color: rgba(255,255,255,.75) !important; }

/* ตาราง: มุมมน เงานุ่ม */
.plan .table,
.plan table {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(79, 70, 229, .12) !important;
    background: #fff;
}
.plan tbody tr { transition: background .15s ease; }
.plan #rate-table-body tr:hover td { background: #eef2ff !important; }

/* badge code (USDT/USD/EUR...) ให้เป็นโทน indigo เข้าชุด */
.plan #rate-table-body .badge,
.plan #rate-table-body span[class*="badge"] {
    background: linear-gradient(120deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    border-radius: 9999px !important;
    font-weight: 600;
    padding: 4px 12px !important;
}
/* แถว USDT (แถวแรก) ไฮไลต์พิเศษ */
.plan #rate-table-body tr:first-child td {
    background: #f5f3ff !important;
    font-weight: 600;
}

/* ---- Section FAQ: พื้นหลัง gradient อ่อน modern (โทน indigo) ---- */
.faq {
    background: linear-gradient(160deg, #f0f9ff 0%, #eef2ff 55%, #faf5ff 100%);
    position: relative;
    overflow: hidden;
}
.faq::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 12% 80%, rgba(99,102,241,.10), transparent 42%),
        radial-gradient(circle at 88% 15%, rgba(168,85,247,.08), transparent 42%);
    z-index: 0;
}
.faq .container { position: relative; z-index: 1; }

/* ---- FAQ accordion: มุมมน เงา ปุ่มสะอาด ---- */
.faq .accordion-item {
    border: 1px solid #eef2f7 !important;
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
    transition: box-shadow .2s ease;
}
.faq .accordion-item:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
.faq .accordion-button { font-weight: 700; color: #0f172a; }
.faq .accordion-button:not(.collapsed) { color: var(--hm-indigo); background: #f5f7ff; }

/* ---- รีวิว (testimonial) การ์ดมุมมน เงานุ่ม hover ---- */
.testimonial .card {
    border-radius: 18px !important;
    box-shadow: var(--hm-soft) !important;
    border: 1px solid #f1f5f9 !important;
    transition: transform .22s ease, box-shadow .22s ease;
}
.testimonial .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hm-soft-h) !important;
}
.testimonial .card .star i { color: #f59e0b; }
.testimonial .card .info h5 { font-weight: 700; color: #0f172a; }

/* ---- Footer: ลิงก์ hover นุ่ม ---- */
.footer-menu__link { transition: color .15s ease, padding-left .15s ease; }
.footer-menu__link:hover { color: #818cf8 !important; padding-left: 4px; }

/* ---- Section info: พื้นหลังโมเดิร์น + ภาพจางๆ ---- */
.info {
    background: linear-gradient(160deg, #faf5ff 0%, #eef2ff 55%, #f0f9ff 100%);
    position: relative;
    overflow: hidden;
}
.info::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(99,102,241,.10), transparent 42%),
        radial-gradient(circle at 10% 85%, rgba(168,85,247,.08), transparent 42%);
    z-index: 0;
}
/* ภาพโลกจางๆ */
.info::after {
    content: "";
    position: absolute; top: 50%; right: -10%; transform: translateY(-50%);
    width: 720px; height: 720px;
    background: url('../images/element/world-dots.svg') center center no-repeat;
    background-size: contain;
    opacity: .35;
    z-index: 0;
    pointer-events: none;
}
.info .container { position: relative; z-index: 1; }
.info .title h4 { font-weight: 800; color: #0f172a; }
.info .thumb img,
.info img { border-radius: 16px; box-shadow: 0 14px 36px rgba(15,23,42,.12); }
/* จุด list (โอน USDT รวดเร็ว ฯลฯ) ให้เป็นโทน indigo */
.info ul li::marker,
.info .list-item i,
.info p .fa-circle { color: #6366f1 !important; }

/* ---- Experience / สถิติ: พื้น gradient เข้มโทนเดียวกับ Hero ---- */
.experience {
    background: linear-gradient(120deg, #1e3a8a 0%, #3730a3 50%, #6d28d9 100%);
    position: relative;
    overflow: hidden;
}
.experience::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 18% 25%, rgba(59,130,246,.35), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(168,85,247,.3), transparent 45%);
    z-index: 0;
}
.experience .container { position: relative; z-index: 1; }
.experience .title h3,
.experience .title h4,
.experience .title p,
.experience .odometer,
.experience h3,
.experience h4,
.experience h5,
.experience p,
.experience span { color: #ffffff !important; }
.experience .odometer,
.experience h3 { color: #ffffff !important; }
/* ไอคอน/วงสถิติให้โปร่งบนพื้นเข้ม */
.experience .icon,
.experience [class*="counter"] .icon {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}

/* ---- การ์ดสถิติ: gradient สวย + เงา + hover ยก ---- */
.experience .highlight-card {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(79, 70, 229, .35) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    padding: 30px 20px !important;
    transition: transform .22s ease, box-shadow .22s ease;
    overflow: hidden;
    position: relative;
}
.experience .highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(124, 58, 237, .5) !important;
}
.experience .highlight-card h3,
.experience .highlight-card .odometer { color: #ffffff !important; font-weight: 800; }
.experience .highlight-card p { color: rgba(255,255,255,.82) !important; }
/* ตัวเลข USDT แสดงเป็นสีเขียว */
.experience .highlight-card h3:has(#stat-usdt),
#stat-usdt { color: #22c55e !important; }

/* แต่ละใบ gradient เฉดต่างกันเล็กน้อย */
.experience .row > div:nth-child(1) .highlight-card { background: linear-gradient(135deg, #3b82f6, #6366f1) !important; }
.experience .row > div:nth-child(2) .highlight-card { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
.experience .row > div:nth-child(3) .highlight-card { background: linear-gradient(135deg, #8b5cf6, #a855f7) !important; }
.experience .row > div:nth-child(4) .highlight-card { background: linear-gradient(135deg, #0ea5e9, #6366f1) !important; }

/* shape ในการ์ดให้จางลง ไม่รบกวน */
.experience .highlight-card .shape img { opacity: .12; }

/* ---- Footer: overlay โทนม่วง-น้ำเงิน (แทนดำ) ให้เข้าชุด Hero ---- */
.footer-area.bg-overlay-two::before {
    background: linear-gradient(120deg, rgba(30,58,138,0.92), rgba(109,40,217,0.88)) !important;
    opacity: 1 !important;
}

/* ---- ส่วนหัวเว็บ (header) เงาเบาๆ เวลาสกอลล์ ---- */
.header { transition: box-shadow .2s ease, background .2s ease; }

/* ---- เลื่อน fade-in ตอนปรากฏ (เสริมจาก WOW) ---- */
@media (prefers-reduced-motion: no-preference) {
    .why-choose .card,
    .testimonial .card { will-change: transform; }
}