/* ================== 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;
}

/* ================== I18N (BILINGUAL) ================== */
.nb-i18n-en{
  opacity:.85;
  font-size:.95em;
}
.nb-i18n-th{
  opacity:1;
}

/* ================== 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: 4px 4px 4px 4px; 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: #F5D07C;
border-radius: 4px 4px 4px 4px;
}

/* 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-image:url(../images/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-ui-card{
  border-radius:18px; padding:1.6rem 1.7rem;
  background-color:#0f2d7b;
  background-image: var(--qual-ui-bg, none);
  background-size: cover;
  background-position: center;
  box-shadow:0 18px 50px -30px rgba(2,6,23,.45);
  overflow:hidden;
}
.qual-ui-card--employee{ --qual-ui-bg: url("/static/picture/Frame11369@2x.png"); }
.qual-ui-card--freelance{ --qual-ui-bg: url("/static/picture/Frame11368@2x.png"); }
.qual-ui-title{ color:#fff; font-weight:800; font-size:1.5rem }
.qual-ui-list{ margin-top:1rem; display:grid; gap:12px }
.qual-ui-item{ display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.88); line-height:1.6; font-weight:500 }
.qual-ui-check{ width:22px; height:22px; margin-top:2px; flex:0 0 auto }
.qual-ui-item b{ color:#fff }
.qual-title{ color: #0D2D6F; 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 }
.nb-calc{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  max-width:980px;
  margin:0 auto;
  background:#f3f6fb;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 60px -46px rgba(2,6,23,.35);
}

.nb-calc-left{ padding:8px 10px; }
.nb-calc-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.nb-calc-label{ font-weight:800; color:#0b1739; font-size:13px; }
.nb-calc-value{ font-weight:900; color:#0D2D6F; font-size:18px; }
.nb-calc-range{
  width:100%;
  height:36px;
  --nb-range-dark:#142963;
  --nb-range-mid:#204CAD;
  --nb-range-bright:#2C71F9;
  accent-color:var(--nb-range-bright);
}
.nb-calc-term{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.nb-calc-term-btn{
  width:42px;
  height:42px;
  border-radius:10px;
  font-weight:900;
  border:2px solid rgba(13,45,111,.25);
  color:#0D2D6F;
  background:#ffffff;
  transition:.15s;
}
.nb-calc-term-btn.is-active{
  background:#0D2D6F;
  color:#fff;
  border-color:#0D2D6F;
}

.nb-calc-right{ display:flex; }
.nb-calc-result{
  flex:1;
  border-radius:24px;
  padding:22px;
  background:
    url('/static/picture/Maskgroup@2x.png') no-repeat right center / cover,
    linear-gradient(180deg, #142963 0%, #204CAD 49%, #2C71F9 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 60px -40px rgba(2,6,23,.35);
  color:rgba(255,255,255,.92);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:220px;
}
.nb-calc-total-value{
  font-weight:900;
  font-size:64px;
  line-height:1;
  letter-spacing:.3px;
  color:#ffffff;
}
.nb-calc-total-unit{ font-size:18px; font-weight:800; color:rgba(255,255,255,.92); }
.nb-calc-total-label{ margin-top:8px; color:rgba(224,242,255,.72); font-weight:800; font-size:16px; }
.nb-calc-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.nb-calc-metric{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:16px;
  backdrop-filter: blur(6px);
}
.nb-calc-metric-value{ font-weight:900; color:#ffffff; font-size:20px; line-height:1.1; }
.nb-calc-metric-unit{ font-weight:800; font-size:14px; color:rgba(255,255,255,.90); }
.nb-calc-metric-label{ margin-top:6px; font-size:16px; font-weight:800; color:rgba(224,242,255,.72); }

@media (min-width:1024px){
  .nb-calc{ grid-template-columns: 1.1fr .9fr; padding:22px; }
  .nb-calc-left{ padding:10px 16px; }
  .nb-calc-total-value{ font-size:72px; }
}
/* ================== 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; }
.nb-footer--ui{ background:linear-gradient(180deg, #0b1739 0%, #081536 50%, #071233 100%); }
.nb-footer-legal{ font-size:12px; line-height:1.65; color:rgba(255,255,255,.78); max-width:980px;  }
.nb-footer-legal p{ margin-top:.75rem; }
.nb-footer-legal b{ color:#fff; font-weight:800; }
.nb-footer-legal h4{ margin-top:1.25rem; font-weight:800; color:#fff; font-size:13px; }
.nb-footer-bottom{ display:flex; flex-direction:column; gap:.35rem; max-width:980px;  }
@media (min-width:1024px){
  .nb-footer-legal{ font-size:13px; }
  .nb-footer-legal, .nb-footer-bottom{ max-width:1040px; }
}
.footer-list a{
  display:block; padding:.35rem 0; font-weight:600; color:#bcd0ff; transition:.2s;
  text-decoration: underline;
  text-decoration-color: rgba(184,208,255,.7);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
.footer-list a:hover{ color:#fff; transform:translateX(2px); text-decoration-color: rgba(255,255,255,.95); }
.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; }

/* ===== Only for this hero block ===== */

/* prevent logo overlap */
.hero-panel--app{
  padding-right: 152px;
  padding-top: 40px;
  position: relative;
}

/* pinned logo */
.hero-logo{
  position:absolute;
  top:24px;
  right:24px;
  z-index:30;
}
.hero-logo img{
  width:88px;
  height:88px;
  border-radius:18px;
  display:block;
  object-fit:cover;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.22);
}

/* equal badges */
.badge-wrap{
  width:220px;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:14px;
}
.badge-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* compensate google-play internal padding */
.badge-gp img{
  transform: scale(1.14);
  transform-origin:center;
}

/* responsive */
@media (max-width:768px){
  .hero-panel--app{ padding-right:120px; padding-top:32px; }
  .hero-logo{ top:18px; right:18px; }
  .hero-logo img{ width:74px; height:74px; border-radius:16px; }

  .badge-wrap{ width:200px; height:60px; }
}
@media (max-width:480px){
  .hero-panel--app{ padding-right:96px; padding-top:28px; }
  .hero-logo{ top:14px; right:14px; }
  .hero-logo img{ width:64px; height:64px; border-radius:14px; }

  .badge-wrap{ width:100%; max-width:240px; height:60px; }
}

/* Gradient word for "Best Money" */
  .gradient-word{
    background: linear-gradient(90deg, #f6d365 0%, #fda085 45%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Equal size store badges (fix different image sizes) */
  .store-badge{
    width: 170px;           /* ปรับได้ */
    height: 54px;           /* ปรับได้ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    transition: .2s ease;
    overflow: hidden;
  }
  .store-badge:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }

  .store-badge img{
    width: 100%;
    height: 100%;
    object-fit: contain;     /* สำคัญ: ทำให้รูปไม่เพี้ยนและเท่ากัน */
    padding: 8px 10px;       /* ทำให้สมดุลทั้ง 2 รูป */
  }

  /* Make logo super prominent */
  .logo-frame{
    width: 220px;
    height: 220px;
    border-radius: 28px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .logo-img{
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
  }

  @media (max-width: 640px){
    .store-badge{ width: 160px; height: 52px; }
    .logo-frame{ width: 200px; height: 200px; }
  }



  /* ================== register.css ================== */
  .register-bg{  
    background: url('/static/picture/rest_bj@2x.png') no-repeat center center;
    background-size: cover;
  }