/* =========================
   QuoXpress Sales Styles
   ========================= */

/* ---- Theme ---- */
:root{
  --bg:#0c1424;       /* latar biru gelap (diringankan ~20%) */
  --ink:#e9f1ff;      /* teks utama */
  --muted:#a9b6cc;    /* teks sekunder */
  --line:#1c2740;     /* garis/border */
  --card:#0f1629;     /* permukaan kad */
  --brand:#7c3aed;    /* ungu jenama */
  --brand-2:#3b82f6;  /* biru aksen */
  --ok:#10b981;       /* hijau (OK) */
  --danger:#ef4444;   /* merah (error) */
  --paper:#ffffff;

  /* container & UI */
  --wrap:1100px;      /* lebar konten */
  --radius:16px;      /* radius seragam */
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ---- Reset asas ---- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ---- Helpers ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:28px 16px}
.center{text-align:center}
.muted{color:var(--muted)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* =========================
   NAVBAR
   ========================= */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(8,12,22,.82);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line)
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800}
.brand__badge{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:12px
}
.nav__links{display:flex;gap:16px}
.nav__links a{color:var(--muted)}
.nav__links a:hover{color:#fff}

/* =========================
   BUTTONS
   ========================= */
.btn{
  border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:transform .15s ease,filter .15s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(124,58,237,.25)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--lg{padding:13px 18px;font-size:18px}

/* =========================
   HERO
   ========================= */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 10px}
.accent{color:#b79bff}
.lead{color:var(--muted);margin:0 0 16px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}

/* Billing toggle */
.bill-row{margin-top:14px}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.toggle button{padding:8px 12px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.toggle button.active{background:var(--brand-2);color:#fff}

/* =========================
   PROMO BAR
   ========================= */
.promo{margin:18px 0}
.promo-inner{
  background:linear-gradient(90deg,#162142,#10182e);
  border:1px solid var(--line);
  border-radius:14px; padding:12px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.promo .or{opacity:.7}
.coupon{display:flex; gap:8px}
.coupon input{
  padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#0c1422; color:var(--ink);
}

/* =========================
   CARDS & LISTS
   ========================= */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column
}
.card-pop{border-color:#2b3651;box-shadow:0 0 0 2px rgba(124,58,237,.25)}
.badge{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:#cfe0ff}
.badge-pop{background:#0f172a;border-color:#283245}
.list{margin:8px 0 16px;padding:0;list-style:none}
.list li{margin:8px 0;padding-left:22px;position:relative}
.list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:800}
.list .off{opacity:.55}
.list .off::before{content:"–";color:#94a3b8}

/* =========================
   PRICING (tiada scrollbar, auto-scale)
   ========================= */
#pricing{scroll-margin-top:80px}
.pricing{
  display:grid;gap:14px;margin:26px 0;
  grid-template-columns:repeat(4,1fr); /* 4 kad di desktop luas */
}
@media(max-width:1180px){.pricing{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.pricing{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pricing{grid-template-columns:1fr}}

.price{font-size:34px;font-weight:900;margin:10px 0 6px}
.sub{color:var(--muted);font-size:12px;margin-bottom:12px}
.card .foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}

/* micro-scale halus bila hampir tak muat 4 kolum (desktop sempit) */
@media(min-width:1181px) and (max-width:1240px){
  .pricing{transform:scale(.98);transform-origin:center}
}

/* =========================
   COMPARE TABLE (jika digunakan)
   ========================= */
table.compare{
  width:100%;border-collapse:collapse;margin:30px 0;background:var(--card);
  border:1px solid var(--line);border-radius:16px;overflow:hidden
}
.compare th,.compare td{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}
.compare thead th{background:#0f172a;font-size:14px}
.c-yes{color:var(--ok);font-weight:700}
.c-no{color:#94a3b8}

/* =========================
   FAQ (details ringkas)
   ========================= */
details{
  background:#0f1629;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin:10px 0
}
details>summary{cursor:pointer;font-weight:700}
details[open]{background:#0f192f}

/* =========================
   FOOTER
   ========================= */
.footer{color:#9aa9c4;font-size:14px;margin:28px 0}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* =========================
   STICKY CTA (muncul bila hero tidak kelihatan)
   ========================= */
.sticky-cta{
  position:fixed;inset:auto 0 0 0;z-index:40;
  display:none;background:rgba(10,15,27,.9);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
.sticky-cta.show{display:block}
.sticky-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.sticky-cta__copy{color:#d7e6ff}

/* =========================
   MEDIA SIZING (IMEJ “lebih kecil x2”)
   ========================= */
/* Gunakan class ini pada <img>:
   - .img-xl : poster utama/info besar
   - .img-lg : before-after / flow / ciri utama
   - .img-md : contoh invois / grafik sokongan
   - .img-sm : ikon/banner kecil
   - .img-xs : sangat kecil (opsyen tambahan)
*/
.media{display:block;width:100%;height:auto;margin:12px auto;border-radius:14px}
.img-xl{max-width:760px}  /* sebelum 980 → 860, kini 760 */
.img-lg{max-width:660px}  /* sebelum 880 → 760, kini 660 */
.img-md{max-width:540px}  /* sebelum 720 → 620, kini 540 */
.img-sm{max-width:400px}  /* sebelum 520 → 460, kini 400 */
.img-xs{max-width:340px}  /* tambahan jika mahu paling kecil */

/* Bingkai ringan untuk imej tertentu */
.card-lite{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.card-lite img.media{margin:0}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width:760px){
  .hero h1{font-size:32px}
  .btn--lg{font-size:16px}
  .sticky-cta__copy{font-size:14px}
}

/* =========================
   ACCESSIBILITY FOCUS
   ========================= */
:focus-visible{
  outline:3px solid rgba(59,130,246,.55);
  outline-offset:2px;border-radius:8px
}