/* ================== THEME TOKENS ================== */
:root{
  --nb-blue:#1e40af; --nb-cyan:#06b6d4; --nb-violet:#7c3aed; --nb-pink:#ec4899; --nb-amber:#f59e0b;
}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,'Noto Sans Thai',sans-serif;
}

/* ================== GENERIC COMPONENTS ================== */
.nb-btn{
  background-image:linear-gradient(90deg,#1e40af,#2563eb,#06b6d4);
  color:#fff;border-radius:14px;box-shadow:0 16px 36px -14px rgba(30,64,175,.55);
  position:relative;overflow:hidden;
}
.nb-btn:after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.nb-btn:hover:after{transform:translateX(100%)}

.nb-outline{
  border-radius:14px;color:#111827;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(90deg,#ec4899,#7c3aed,#06b6d4) border-box;
  border:2px solid transparent;
}

.nb-card{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,rgba(124,58,237,.5),rgba(6,182,212,.5)) border-box;
  border:1px solid transparent;border-radius:18px;
}
.nb-card.soft{background:#fff;border:1px solid #e5e7eb}

.nb-title{
  background:linear-gradient(90deg,#f59e0b,#ec4899,#7c3aed,#06b6d4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ================== NAVBAR ================== */
.nb-header-colored{
  position:sticky; top:0; z-index:50;
  background:
    radial-gradient(900px 340px at -10% 0%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 420px at 110% 0%, rgba(6,182,212,.32), transparent 60%),
    linear-gradient(90deg, #131e34 0%, #142543 45%, #0e2b63 100%);
  box-shadow:0 12px 36px -22px rgba(2,6,23,.5);
}
.nb-header-colored::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa,#f59e0b); opacity:.75;
}

.brand{ display:flex; align-items:center; gap:.65rem; }
.brand-icon{
  height:42px; width:42px; border-radius:14px;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.15);
}
.brand-word{
  font-weight:900; letter-spacing:.5px; font-size:1.25rem; line-height:1;
  background:linear-gradient(90deg,#f5d07c,#ffe3a6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.brand-divider{
  width:1px; height:26px; background:linear-gradient(#ffffff66,#ffffff10);
  margin:0 .35rem;
}

.nb-nav{ gap:1.15rem }
.nb-nav .nb-link{
  color:#e5e7eb; font-weight:700; padding:.55rem .85rem; border-radius:999px; position:relative;
  transition:.22s ease;
}
.nb-nav .nb-link:hover{ color:#111827; background:rgba(255,255,255,.92) }
.nb-nav .nb-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-8px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa); transform:scaleX(0);
  transform-origin:left; transition:transform .25s ease;
}
.nb-nav .nb-link:hover::after{ transform:scaleX(1) }
.nb-nav .is-active{
  color:#0b1739; background:#ffffff; box-shadow:0 10px 30px -18px rgba(255,255,255,.9) inset;
}

/* CTA ปุ่มบน Navbar */
.nb-cta-outline{
  color:#e0e7ff; border:2px solid rgba(255,255,255,.65);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); 
  border-radius:14px; padding:.6rem 1rem; font-weight:800;
}
.nb-cta-outline:hover{ background:rgba(255,255,255,.16) }
.nb-cta-solid{
  border-radius:14px; padding:.75rem 1.1rem; font-weight:800; color:#0b1739;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa);
  box-shadow:0 16px 36px -16px rgba(96,165,250,.6)
}

/* Shrink on scroll */
.header-inner{ transition: padding .2s ease }
.header--shrink .header-inner{ padding-top:.35rem; padding-bottom:.35rem }
.header--shrink .brand-icon{ height:36px; width:36px }
.header--shrink .brand-word{ font-size:1.1rem }

/* ================== HERO ================== */
.nb-hero{ position:relative; isolation:isolate; min-height:680px; overflow:hidden; }
.nb-hero .nb-hero-inner{ position:relative; z-index:1 }

/* ใช้รูปพื้นหลัง + บดภาพให้อ่านง่าย */
.nb-hero.image-strong{
  background-image:url('<?= base_url('assets/image/hero-bg.jpg'); ?>');
  background-size:cover; background-position:center right; background-repeat:no-repeat;
  filter:saturate(1.15) contrast(1.05);
}
.nb-hero.image-strong::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(2,6,23,.85) 0%, rgba(2,6,23,.72) 35%, rgba(2,6,23,.35) 64%, rgba(2,6,23,.15) 100%);
}
.nb-hero.image-strong::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(800px 420px at 14% 28%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 520px at 92% 18%, rgba(6,182,212,.24), transparent 60%);
}

/* กล่อง half-glass ให้ข้อความชัด */
.hero-panel{
  border-radius:24px; padding:18px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) padding-box,
             linear-gradient(135deg, rgba(124,58,237,.5), rgba(6,182,212,.5)) border-box;
  border:1px solid transparent; backdrop-filter: blur(10px) saturate(130%);
  box-shadow:0 36px 120px -50px rgba(0,0,0,.55);
}
/* เงาให้อ่านง่าย */
.drop-title{ text-shadow:0 10px 30px rgba(0,0,0,.35) }
.drop-copy{  text-shadow:0 6px 24px rgba(0,0,0,.35) }
/* ไฮไลต์คำว่า NEXTBIT */
.gradient-word{
  background:linear-gradient(90deg,#f7c66b,#ffe6b3,#ffffff);
  -webkit-background-clip:text; background-clip:text; color:transparent; position:relative;
}
.gradient-word::after{
  content:""; position:absolute; inset:-10px -4px; z-index:-1; filter:blur(18px);
  background:radial-gradient(120px 70px at 50% 50%, rgba(250,204,21,.35), transparent 60%);
}
/* ปุ่มใน Hero */
.btn-hero-primary{
  background:linear-gradient(90deg,#2563eb,#22d3ee);
  color:#0b1739; font-weight:800; border-radius:14px;
  box-shadow:0 16px 40px -18px rgba(34,211,238,.55);
}
.btn-hero-primary:hover{ filter:brightness(1.06) }
.btn-hero-ghost{
  border-radius:14px; font-weight:700; color:#fff; padding:1rem 1.25rem;
  background:linear-gradient(#0000,#0000) padding-box,
             linear-gradient(90deg,#22d3ee,#60a5fa,#8b5cf6) border-box;
  border:2px solid transparent; transition:.2s;
}
.btn-hero-ghost:hover{
  background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.06)) padding-box,
             linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa) border-box;
}

/* ================== HIGHLIGHTS ================== */
.hi-card{
  position:relative; border-radius:18px; padding:18px;
  background:#ffffff; border:1px solid rgba(15,23,42,.06);
  box-shadow:0 16px 40px -22px rgba(2,6,23,.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hi-card:hover{ transform:translateY(-3px); box-shadow:0 22px 70px -28px rgba(2,6,23,.22); }
.hi-icon{
  width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06); margin-bottom:.75rem;
}
.hi-title{ font-weight:700; color:#0b1739; }
.hi-text{ color:#475569; margin-top:.25rem; }
.hi-accent{
  height:4px; border-radius:999px; margin-top:.5rem;
  background:linear-gradient(90deg,#f59e0b,#ec4899,#7c3aed,#06b6d4); opacity:.85;
}

/* ================== STEPS (พื้นหลังรูป) ================== */
.steps-bg{ position:relative; isolation:isolate; overflow:hidden; }
.steps-bg .steps-bg-img{
  position:absolute; inset:0; z-index:0;
  background-image:url('<?= base_url('assets/image/steps-bg.jpg'); ?>');
  background-size:cover; background-position:center 35%; background-repeat:no-repeat;
  filter:saturate(108%) contrast(1.03);
}
.steps-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(2,6,23,.58) 0%, rgba(2,6,23,.48) 40%, rgba(2,6,23,.40) 100%),
    radial-gradient(900px 600px at 10% 10%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(6,182,212,.18), transparent 55%);
}
.steps-bg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='white'/%3E%3C/svg%3E");
}
.steps-inner{ position:relative; z-index:2; }
@media (min-width:1024px){ .steps-bg .steps-bg-img{ background-attachment: fixed; } }
@media (max-width:640px){
  .steps-bg .steps-bg-img{
    background-image:url('<?= base_url("assets/image/steps-bg-mobile.jpg"); ?>'); background-position:center;
  }
}

/* การ์ดขั้นตอน + หมายเลข */
.step-card{
  border-radius:18px;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, rgba(124,58,237,.55), rgba(6,182,212,.55)) border-box;
  border:1px solid transparent; box-shadow:0 18px 40px -28px rgba(2,6,23,.6);
  transition:transform .18s ease, box-shadow .18s ease;
}
.step-card:hover{ transform:translateY(-3px); box-shadow:0 26px 60px -34px rgba(2,6,23,.75); }
.step-badge{
  width:38px;height:38px;border-radius:999px; display:flex;align-items:center;justify-content:center;
  font-weight:800; background:linear-gradient(180deg,#e9efff,#ecfeff);
  box-shadow:inset 0 0 0 2px rgba(99,102,241,.25);
}
.step-2 .step-badge{ background:linear-gradient(180deg,#efe9ff,#e9fdff)}
.step-3 .step-badge{ background:linear-gradient(180deg,#e9fff4,#e9fdff)}
.step-4 .step-badge{ background:linear-gradient(180deg,#ffe9f5,#fff3e0)}

/* ================== QUALIFICATIONS (พื้นหลังรูป) ================== */
.qual-bg{ position:relative; isolation:isolate; background:#0f2d67; }
.qual-bg .qual-bg-img{
  position:absolute; inset:0; z-index:0;
  background-image:url('<?= base_url('assets/image/qual-bg.jpg'); ?>');
  background-size:cover; background-position:center 35%; background-repeat:no-repeat;
  filter:saturate(110%) contrast(1.05);
}
.qual-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(2,6,23,.72) 0%, rgba(2,6,23,.70) 30%, rgba(2,6,23,.56) 60%, rgba(2,6,23,.42) 100%),
    radial-gradient(900px 600px at 12% 20%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 600px at 88% 18%, rgba(6,182,212,.22), transparent 62%),
    radial-gradient(1200px 900px at 50% 100%, rgba(0,0,0,.45), transparent 60%);
}
.qual-bg::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='white'/%3E%3C/svg%3E");
}
.qual-inner{ position:relative; z-index:3; }

.qual-panel{
  position:relative; z-index:3; border-radius:22px; padding:1.25rem 1.5rem;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06)) padding-box,
             linear-gradient(135deg, rgba(124,58,237,.55), rgba(6,182,212,.55)) border-box;
  border:1px solid transparent; backdrop-filter: blur(6px) saturate(120%);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.6);
}
.qual-title{ color:#fff; text-align:center; font-weight:800; text-shadow:0 4px 16px rgba(0,0,0,.35); }
.qual-titlebar{ width:120px; height:4px; margin:.6rem auto 0;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa); border-radius:999px }
.qual-group-title{ color:#fff; font-weight:800; font-size:1.5rem }
.qual-list{ margin-top:1rem; display:grid; gap:14px }
.qual-item{ display:flex; gap:12px; align-items:flex-start; color:#e9eef9; line-height:1.6 }
.qual-icon{
  width:28px;height:28px;border-radius:999px; display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#10b981,#34d399); box-shadow:0 8px 18px -10px rgba(16,185,129,.9)
}
.qual-item b{ color:#fff }
@media (min-width:1024px){ .qual-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px } }

/* ================== SOFT SECTION BACKGROUND ================== */
.nb-section-soft{ position:relative; isolation:isolate; }
.nb-section-soft::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(6,182,212,.16), transparent 55%),
    linear-gradient(180deg, #f3f6ff 0%, #f6fbff 60%, #eef7ff 100%);
}
.nb-section-soft::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23000'/%3E%3C/svg%3E");
}
.nb-section-inner{ position:relative; z-index:1 }

/* การ์ดผลิตภัณฑ์พื้นขาว */
.product-card--white{
  border-radius:18px; background:#ffffff; color:#0f172a;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 40px -22px rgba(2,6,23,.15);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card--white:hover{
  transform:translateY(-3px); border-color: rgba(99,102,241,.28);
  box-shadow: 0 18px 60px -28px rgba(2,6,23,.2);
}
.product-card--white h3{ color:#0b1739; }
.product-card--white p{ color:#475569; }
.product-icon--soft{
  width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center;
  color:#1e293b; background:linear-gradient(180deg,#f8fbff,#eef2ff);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
.product-card--white .nb-btn{ box-shadow:0 10px 24px -14px rgba(34,197,239,.45); }

/* ================== REPAYMENT TABLE ================== */
.nb-table{
  border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:0 20px 60px -35px rgba(2,6,23,.15); border:1px solid rgba(15,23,42,.08);
}
.nb-table thead th{
  background:linear-gradient(90deg,#0e2a6b,#274cba,#22d3ee);
  color:#fff; font-weight:800; letter-spacing:.2px;
}
.nb-table tbody tr:nth-child(odd){ background:rgba(99,102,241,.06) }
.nb-table tbody tr:nth-child(even){ background:rgba(6,182,212,.06) }
.nb-table td, .nb-table th{ border-right:1px solid rgba(15,23,42,.06) }
.nb-table tr > *:last-child{ border-right:none }
.nb-table tbody tr:hover{
  background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 9999px rgba(255,255,255,.15);
}
.nb-table thead th:first-child{ border-top-left-radius:20px }
.nb-table thead th:last-child{ border-top-right-radius:20px }

/* ================== FOOTER ================== */
.nb-footer{
  position: relative; isolation:isolate; color:#e6eeff;
  background:
    radial-gradient(800px 420px at 95% 10%, rgba(6,182,212,.22), transparent 55%),
    radial-gradient(700px 380px at 10% -10%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, #0c1730 0%, #0b1530 30%, #0b1530 100%);
}
.nb-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:1;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#8b5cf6); opacity:.7;
}
.nb-footer a{ color:#cfe2ff }
.nb-footer a:hover{ color:#ffffff }
.footer-title{ font-weight:800; color:#ffffff; letter-spacing:.3px; }
.footer-list a{
  display:block; padding:.35rem 0; font-weight:600; color:#bcd0ff; transition:.2s;
}
.footer-list a:hover{ color:#fff; transform:translateX(2px); }
.footer-social a{
  width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#13213d,#0e1a34); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:.2s;
}
.footer-social a:hover{ background:linear-gradient(180deg,#1b2d55,#13213d); transform:translateY(-2px) }
.footer-divider{ border-top:1px solid rgba(255,255,255,.12) }
.disclaimer{ color:#b1c5ff; font-size:.9rem; }