/* ธีมระบบใหม่: ฟ้า · น้ำเงิน · ขาว + micro-interactions
   โหลดต่อจาก css/style.css (ไฟล์เดิมไม่แก้ ระบบ PHP เดิมไม่ได้รับผล)
   หลักการเคลื่อนไหว: สั้น (120–350ms), บอกสถานะ/ผลของการกระทำ, ปิดทั้งหมดเมื่อผู้ใช้ตั้ง reduce motion */

:root {
  --primary: #2563eb;
  --secondary: #0b1f3a;
  --light: #c7d4ea;

  --sb-navy-900: #0b1f3a;
  --sb-navy-800: #12305a;
  --sb-navy-700: #1b3f73;
  --sb-blue-600: #2563eb;
  --sb-blue-500: #3b82f6;
  --sb-blue-100: #e6efff;
  --sb-blue-50: #f2f7ff;
  --sb-sky-400: #38bdf8;
  --sb-bg: #f3f7fc;
  --sb-surface: #ffffff;
  --sb-ink: #0f1e36;
  --sb-muted: #5b6b84;
  --sb-border: #dbe5f2;
  --sb-shadow-sm: 0 1px 2px rgba(15, 30, 54, .06), 0 1px 3px rgba(15, 30, 54, .08);
  --sb-shadow-md: 0 6px 16px rgba(15, 30, 54, .10);
  --sb-shadow-lg: 0 14px 32px rgba(37, 99, 235, .18);
  --sb-ease: cubic-bezier(.2, .8, .2, 1);
  --sb-fast: 140ms;
  --sb-med: 240ms;
  --sb-slow: 380ms;
}

/* ---------- พื้นฐาน ---------- */
body {
  font-family: 'IBM Plex Sans Thai', 'Open Sans', system-ui, sans-serif;
  background: var(--sb-bg);
  color: var(--sb-ink);
}
h1, h2, h3, h4, h5, h6 { color: var(--sb-ink); }
a { color: var(--sb-blue-600); transition: color var(--sb-fast) var(--sb-ease); }
a:hover { color: var(--sb-navy-700); }
.text-primary { color: var(--sb-blue-600) !important; }
.bg-primary { background-color: var(--sb-blue-600) !important; }
::selection { background: var(--sb-blue-100); }

:focus-visible { outline: 3px solid rgba(56, 189, 248, .6); outline-offset: 2px; }

/* ---------- พื้นที่เนื้อหา / การ์ด ---------- */
.content { background: var(--sb-bg); }
.bg-secondary { background-color: var(--sb-surface) !important; color: var(--sb-ink); }
.content .bg-secondary.rounded,
.container-fluid > .row .bg-secondary.rounded {
  border: 1px solid var(--sb-border);
  border-radius: 14px !important;
  box-shadow: var(--sb-shadow-sm);
  transition: box-shadow var(--sb-med) var(--sb-ease), transform var(--sb-med) var(--sb-ease);
}
.content .bg-secondary.rounded:hover { box-shadow: var(--sb-shadow-md); }
/* ข้อความเน้นเดิมเป็น text-white บนพื้นดำ → เปลี่ยนเป็นหมึกน้ำเงินเข้มบนพื้นขาว */
.bg-secondary .text-white, .content .text-white { color: var(--sb-ink) !important; }
.content h6, .bg-secondary h6 { font-weight: 600; color: var(--sb-navy-800); }

/* การ์ดสถิติในแดชบอร์ด: ไอคอนลอยขึ้นเล็กน้อยเมื่อชี้ */
.content .bg-secondary.rounded.d-flex .fa-3x { transition: transform var(--sb-med) var(--sb-ease); }
.content .bg-secondary.rounded.d-flex:hover .fa-3x { transform: translateY(-3px) scale(1.04); }

/* ---------- แถบด้านข้าง (น้ำเงินเข้ม) ---------- */
.sidebar, .sidebar .navbar.bg-secondary { background: linear-gradient(180deg, var(--sb-navy-900), var(--sb-navy-800)) !important; }
.sidebar h3.text-primary, .sidebar .navbar-brand .text-primary { color: #fff !important; }
.sidebar .navbar-brand i { color: var(--sb-sky-400); }
.sidebar h6, .sidebar span { color: #dbe7fb; }
.sidebar .navbar .navbar-nav .nav-link {
  color: var(--light);
  border-left: 3px solid transparent;
  border-radius: 0 30px 30px 0;
  transition: background var(--sb-fast) var(--sb-ease), color var(--sb-fast) var(--sb-ease), border-color var(--sb-fast) var(--sb-ease), padding-left var(--sb-med) var(--sb-ease);
}
.sidebar .navbar .navbar-nav .nav-link i { background: rgba(255, 255, 255, .08); transition: background var(--sb-fast), transform var(--sb-med) var(--sb-ease); }
.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border-color: var(--sb-sky-400);
}
.sidebar .navbar .navbar-nav .nav-link:hover { padding-left: 1.65rem; }
.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i { background: var(--sb-blue-600); transform: scale(1.06); }
.sidebar .navbar .dropdown-item { color: var(--light); border-radius: 0 20px 20px 0; transition: background var(--sb-fast), color var(--sb-fast), padding-left var(--sb-med) var(--sb-ease); }
.sidebar .navbar .dropdown-item:hover,
.sidebar .navbar .dropdown-item.active { color: #fff; background: rgba(255, 255, 255, .07); padding-left: 3.4rem; }
.sidebar .dropdown-menu.show { animation: sb-fade-down var(--sb-med) var(--sb-ease); }

/* ---------- แถบบน (ขาว) ---------- */
.content .navbar.bg-secondary { background: rgba(255, 255, 255, .92) !important; backdrop-filter: blur(8px); border-bottom: 1px solid var(--sb-border); box-shadow: var(--sb-shadow-sm); }
.content .navbar .navbar-nav .nav-link { color: var(--sb-ink); }
.content .navbar .navbar-nav .nav-link:hover { color: var(--sb-blue-600); }
.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i { background: var(--sb-blue-50); color: var(--sb-blue-600); transition: background var(--sb-fast), transform var(--sb-fast); }
.content .navbar .sidebar-toggler:hover { background: var(--sb-blue-100); transform: scale(1.06); }
.content .navbar .dropdown-menu { background: #fff !important; border: 1px solid var(--sb-border) !important; border-radius: 12px !important; box-shadow: var(--sb-shadow-md); overflow: hidden; }
.content .navbar .dropdown-menu.show { animation: sb-fade-down var(--sb-med) var(--sb-ease); }
.content .navbar .dropdown-item { color: var(--sb-ink); transition: background var(--sb-fast); }
.content .navbar .dropdown-item:hover { background: var(--sb-blue-50); color: var(--sb-blue-600); }

/* ---------- ปุ่ม: ชี้ = ยกขึ้นเล็กน้อย, กด = ยุบลง ---------- */
.btn {
  border-radius: 10px;
  font-weight: 500;
  transition: transform var(--sb-fast) var(--sb-ease), box-shadow var(--sb-med) var(--sb-ease), background-color var(--sb-fast), border-color var(--sb-fast), color var(--sb-fast);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: 60ms; }
.btn:disabled { cursor: not-allowed; }
.btn-primary { background: var(--sb-blue-600); border-color: var(--sb-blue-600); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: #1d4fd8; border-color: #1d4fd8; color: #fff; box-shadow: 0 6px 14px rgba(37, 99, 235, .28); }
.btn-outline-primary { color: var(--sb-blue-600); border-color: var(--sb-blue-600); }
.btn-outline-primary:hover { background: var(--sb-blue-600); border-color: var(--sb-blue-600); color: #fff; }
.btn-success:hover { box-shadow: 0 6px 14px rgba(25, 135, 84, .25); }
.btn-danger:hover, .btn-outline-danger:hover { box-shadow: 0 6px 14px rgba(220, 53, 69, .22); }
/* ปุ่มรองเดิม (outline-light บนพื้นดำ) → ปุ่มขอบน้ำเงินบนพื้นขาว */
.content .btn-outline-light, .bg-secondary .btn-outline-light {
  color: var(--sb-navy-700); border-color: var(--sb-border); background: #fff;
}
.content .btn-outline-light:hover, .bg-secondary .btn-outline-light:hover { color: var(--sb-blue-600); border-color: var(--sb-blue-500); background: var(--sb-blue-50); }

/* สถานะกำลังส่ง (ui.js ใส่ให้ตอนส่งฟอร์ม): บอกว่าระบบรับคำสั่งแล้ว + กันกดซ้ำ */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 1.05em; height: 1.05em;
  border: 2px solid rgba(255, 255, 255, .55); border-top-color: #fff; border-radius: 50%;
  animation: sb-spin .7s linear infinite;
}
.btn-outline-light.is-loading::after, .btn-outline-primary.is-loading::after, .btn-outline-danger.is-loading::after {
  border-color: rgba(37, 99, 235, .25); border-top-color: var(--sb-blue-600);
}

/* ---------- ฟอร์ม: ขอบเรืองฟ้าเมื่อโฟกัส ---------- */
.form-control, .form-select {
  background-color: #fff; color: var(--sb-ink); border: 1px solid var(--sb-border); border-radius: 10px;
  transition: border-color var(--sb-fast) var(--sb-ease), box-shadow var(--sb-med) var(--sb-ease), background-color var(--sb-fast);
}
.form-control:focus, .form-select:focus { background-color: #fff; color: var(--sb-ink); border-color: var(--sb-blue-500); box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15); }
.form-control::placeholder { color: #9aa8bd; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #eef2f8; color: var(--sb-muted); }
.form-floating > label, .form-label { color: var(--sb-muted); }
.form-check-input:checked { background-color: var(--sb-blue-600); border-color: var(--sb-blue-600); }
.form-check-input { transition: background-color var(--sb-fast), box-shadow var(--sb-fast); }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(37, 99, 235, .15); border-color: var(--sb-blue-500); }

/* ---------- ตาราง ---------- */
.table { color: var(--sb-ink); border-color: var(--sb-border); --bs-table-hover-bg: var(--sb-blue-50); --bs-table-hover-color: var(--sb-ink); }
.table thead th { color: var(--sb-muted); font-weight: 600; font-size: .85rem; border-bottom-color: var(--sb-border); }
.table > tbody > tr > * { transition: background-color var(--sb-fast); }
/* แถวปุ่มจัดการใต้แต่ละบอท (หน้าบอททั้งหมดของแอดมิน) ให้ติดกับแถวของบอท */
.table > tbody > tr:has(+ .admin-bot-actions) > * { border-bottom-width: 0; }
.table > tbody > tr.admin-bot-actions > * { --bs-table-accent-bg: transparent; }

/* ---------- ข้อความแจ้งเตือน: เลื่อนเข้ามาเบาๆ ดึงสายตาไปที่ผลลัพธ์ ---------- */
.alert { border-radius: 12px; border: 0; border-left: 4px solid; animation: sb-slide-in var(--sb-slow) var(--sb-ease) both; }
.alert-success { background: #e9f9f0; color: #0f5132; border-left-color: #22a06b; }
.alert-danger { background: #fdecee; color: #842029; border-left-color: #dc3545; }
.alert-warning { background: #fff6e0; color: #6b4b00; border-left-color: #f5a524; }
.alert-info { background: var(--sb-blue-50); color: var(--sb-navy-700); border-left-color: var(--sb-blue-500); }

/* ---------- ป้ายสถานะ ---------- */
.badge { border-radius: 999px; font-weight: 500; padding: .38em .75em; }
.badge.bg-info { background-color: var(--sb-sky-400) !important; color: var(--sb-navy-900); }
/* บอทออนไลน์: จุดเต้นเบาๆ = "กำลังทำงานอยู่" */
.badge.is-live { position: relative; padding-left: 1.6em; }
.badge.is-live::before {
  content: ''; position: absolute; left: .6em; top: 50%; width: .5em; height: .5em; margin-top: -.25em;
  border-radius: 50%; background: #fff; animation: sb-pulse 1.8s ease-out infinite;
}

/* การ์ดสถิติบนจอมือถือ: 2 ใบต่อแถว ไอคอนเล็กลง */
@media (max-width: 575.98px) {
  .content .bg-secondary.rounded.d-flex { padding: .9rem !important; flex-direction: column; align-items: flex-start !important; gap: .4rem; }
  .content .bg-secondary.rounded.d-flex .fa-3x { font-size: 1.6em; }
  .content .bg-secondary.rounded.d-flex .ms-3 { margin-left: 0 !important; text-align: left !important; }
  .content .bg-secondary.rounded.d-flex p { font-size: .8rem; margin-bottom: .2rem !important; }
}

/* ข่าวในแดชบอร์ด */
.news-item { padding: 1rem 1.1rem; border: 1px solid var(--sb-border); border-left: 4px solid var(--sb-blue-500); border-radius: 12px; background: var(--sb-blue-50); margin-bottom: .75rem; transition: box-shadow var(--sb-med) var(--sb-ease), transform var(--sb-med) var(--sb-ease); }
.news-item:hover { box-shadow: var(--sb-shadow-sm); transform: translateX(2px); }

/* โลโก้ข้างชื่อเว็บ (เมนูข้าง, หน้าแรก, หน้าล็อกอิน) */
.brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; margin-right: .6rem; flex-shrink: 0; box-shadow: 0 2px 8px rgba(11, 31, 58, .25); transition: transform var(--sb-med) var(--sb-ease); }
a:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.topbar-brand { font-weight: 700; font-size: 1.1rem; color: var(--sb-navy-900); text-decoration: none; }
.topbar-brand:hover { color: var(--sb-blue-600); }
.topbar-brand .brand-logo { width: 32px; height: 32px; }

/* รูปโปรไฟล์ */
.avatar { border-radius: 50%; object-fit: cover; background: var(--sb-blue-100); }
.avatar-lg { width: 120px; height: 120px; box-shadow: var(--sb-shadow-md); border: 4px solid #fff; transition: transform var(--sb-med) var(--sb-ease); }
.avatar-lg.is-preview { transform: scale(1.04); outline: 3px dashed var(--sb-sky-400); outline-offset: 3px; }

/* ตัวเลขแจ้งเตือนบนเมนู: เด้งเข้ามาครั้งเดียวตอนโหลดหน้า */
.count-badge { font-size: .7rem; padding: .3em .55em; margin-left: .35rem; vertical-align: middle; animation: sb-pop var(--sb-slow) var(--sb-ease) both; }
@keyframes sb-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* สถานะบอทเปลี่ยนระหว่างดูหน้า (ui.js): กระพริบให้เห็นว่าเพิ่งอัปเดต */
.badge.is-updated { animation: sb-flash 900ms var(--sb-ease); }
@keyframes sb-flash { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .9); transform: scale(1.12); } 100% { box-shadow: 0 0 0 .6em rgba(56, 189, 248, 0); transform: scale(1); } }

/* การ์ดตั๋ว / หน้าอื่นๆ */
.card { border: 1px solid var(--sb-border); border-radius: 12px; box-shadow: var(--sb-shadow-sm); animation: sb-rise var(--sb-slow) var(--sb-ease) both; }
.card-header { background: var(--sb-blue-50); color: var(--sb-navy-700); border-bottom-color: var(--sb-border); font-size: .9rem; }

/* ---------- เข้าหน้าใหม่: บล็อกเนื้อหาค่อยๆ ขึ้นมาทีละส่วน ---------- */
.content > .container-fluid { animation: sb-rise var(--sb-slow) var(--sb-ease) both; }
.content > .container-fluid:nth-child(3) { animation-delay: 40ms; }
.content > .container-fluid:nth-child(4) { animation-delay: 80ms; }
.content > .container-fluid:nth-child(5) { animation-delay: 120ms; }
.content > .container-fluid:nth-child(n+6) { animation-delay: 160ms; }
/* การ์ดหน้า login / สมัคร */
body > .container-fluid .col-xl-4 > .bg-secondary.rounded {
  border: 1px solid var(--sb-border); border-radius: 18px !important; box-shadow: var(--sb-shadow-lg);
  animation: sb-rise var(--sb-slow) var(--sb-ease) both;
}
body:has(> .container-fluid .col-xl-4) { background: radial-gradient(1200px 600px at 10% -10%, #dbeafe 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #e0f2fe 0%, transparent 55%), var(--sb-bg); }
body > .container-fluid .col-xl-4 > .bg-secondary h3 { font-size: 1.35rem; white-space: nowrap; }
.auth-home { font-size: .85rem; color: var(--sb-muted); }
.auth-home:hover { color: var(--sb-blue-600); }

/* ---------- keyframes ---------- */
@keyframes sb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sb-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sb-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sb-spin { to { transform: rotate(360deg); } }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 70% { box-shadow: 0 0 0 .45em rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes sb-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* =================================================================
   หน้าแรก (landing)
   ================================================================= */
.landing { background: var(--sb-bg); color: var(--sb-ink); overflow-x: hidden; }
.landing-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sb-border); }
.landing-nav .brand { font-weight: 700; font-size: 1.35rem; color: var(--sb-navy-900); text-decoration: none; }
.landing-nav .brand i { color: var(--sb-blue-600); }
.landing-nav .nav-a { color: var(--sb-muted); text-decoration: none; position: relative; padding: .25rem 0; }
.landing-nav .nav-a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sb-blue-600); transform: scaleX(0); transform-origin: left; transition: transform var(--sb-med) var(--sb-ease); }
.landing-nav .nav-a:hover { color: var(--sb-ink); }
.landing-nav .nav-a:hover::after { transform: scaleX(1); }

.hero { position: relative; color: #fff; background: radial-gradient(900px 500px at 85% 20%, rgba(56, 189, 248, .35), transparent 60%), linear-gradient(135deg, var(--sb-navy-900) 0%, var(--sb-navy-700) 55%, var(--sb-blue-600) 100%); padding: 5.5rem 0 6.5rem; }
.hero h1 { color: #fff; font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.2; }
.hero .lead { color: #d6e4fb; font-size: 1.15rem; }
.hero .hero-chip { display: inline-flex; gap: .5rem; align-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #e6f0ff; border-radius: 999px; padding: .35rem .9rem; font-size: .9rem; }
.landing .btn-light { background: #fff; border-color: #fff; color: var(--sb-navy-900); font-weight: 600; }
.landing .btn-light:hover, .landing .btn-light:focus { background: #fff; border-color: #fff; color: var(--sb-blue-600); }
.landing .btn-light:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; background: var(--sb-bg); clip-path: ellipse(75% 100% at 50% 100%); }

/* การ์ดจำลอง "กำลังเล่น" ใน hero */
.np-card { background: rgba(255, 255, 255, .96); color: var(--sb-ink); border-radius: 18px; padding: 1.25rem 1.4rem; box-shadow: 0 20px 50px rgba(3, 12, 30, .35); max-width: 360px; margin-left: auto; transform: rotate(-1.5deg); transition: transform var(--sb-slow) var(--sb-ease); }
.np-card:hover { transform: rotate(0deg) translateY(-4px); }
.np-card .np-title { font-weight: 600; }
.np-card .np-bar { height: 6px; border-radius: 6px; background: var(--sb-blue-100); overflow: hidden; }
.np-card .np-bar > span { display: block; height: 100%; width: 38%; background: linear-gradient(90deg, var(--sb-blue-600), var(--sb-sky-400)); border-radius: 6px; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq span { width: 4px; height: 100%; background: var(--sb-blue-600); border-radius: 2px; transform-origin: bottom; animation: sb-eq 1s ease-in-out infinite; }
.eq span:nth-child(2) { animation-delay: .15s; } .eq span:nth-child(3) { animation-delay: .3s; } .eq span:nth-child(4) { animation-delay: .45s; }

.section { padding: 4.5rem 0; }
.section-title { font-weight: 700; color: var(--sb-navy-900); }
.section-sub { color: var(--sb-muted); }

.feature { background: #fff; border: 1px solid var(--sb-border); border-radius: 16px; padding: 1.6rem; height: 100%; transition: transform var(--sb-med) var(--sb-ease), box-shadow var(--sb-med) var(--sb-ease), border-color var(--sb-med); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-md); border-color: #bfd3f5; }
.feature .ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--sb-blue-50); color: var(--sb-blue-600); font-size: 1.25rem; transition: background var(--sb-med), color var(--sb-med), transform var(--sb-med) var(--sb-ease); }
.feature:hover .ico { background: var(--sb-blue-600); color: #fff; transform: rotate(-6deg) scale(1.05); }
.feature h5 { margin-top: 1rem; font-weight: 600; }
.feature p { color: var(--sb-muted); margin: 0; }

.price-card { background: #fff; border: 1px solid var(--sb-border); border-radius: 18px; padding: 2rem 1.6rem; height: 100%; text-align: center; position: relative; transition: transform var(--sb-med) var(--sb-ease), box-shadow var(--sb-med) var(--sb-ease), border-color var(--sb-med); }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--sb-shadow-lg); border-color: var(--sb-blue-500); }
.price-card.featured { border: 2px solid var(--sb-blue-600); }
.price-card .tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.price-card .amount { font-size: 2.6rem; font-weight: 700; color: var(--sb-navy-900); line-height: 1; }
.price-card .amount small { font-size: 1rem; color: var(--sb-muted); font-weight: 500; }
.price-card .old { color: var(--sb-muted); text-decoration: line-through; }
.price-card ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; color: var(--sb-muted); }
.price-card li { padding: .3rem 0; }
.price-card li i { color: var(--sb-blue-600); margin-right: .4rem; }

.step { text-align: center; padding: 1rem; }
.step .num { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--sb-blue-600), var(--sb-sky-400)); box-shadow: 0 8px 18px rgba(37, 99, 235, .3); }
.step h5 { margin-top: 1rem; font-weight: 600; }
.step p { color: var(--sb-muted); }

.cta-band { background: linear-gradient(135deg, var(--sb-navy-800), var(--sb-blue-600)); color: #fff; border-radius: 22px; padding: 3rem 2rem; }
.cta-band h2 { color: #fff; }
.landing-footer { color: var(--sb-muted); border-top: 1px solid var(--sb-border); }

/* ปรากฏเมื่อเลื่อนมาถึง (ui.js) · ไม่มี JS = แสดงตามปกติ */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--sb-ease), transform 600ms var(--sb-ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal-delay="1"] { transition-delay: 80ms; }
.js [data-reveal-delay="2"] { transition-delay: 160ms; }
.js [data-reveal-delay="3"] { transition-delay: 240ms; }

/* ---------- ผู้ใช้ตั้ง "ลดการเคลื่อนไหว" → ปิดทั้งหมด ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .np-card { transform: none; }
}