/* ============================================================
   RAHSIA FOUNDER — public/marketing/auth pages (site.css)
   black / gold / cream
   ============================================================ */
:root{
  --ink:#0F0F0F;--ink2:#1A1A1A;--charcoal:#242424;--graphite:#3A3A3A;--ink-soft:#2b2b2b;
  --white:#FFFFFF;--cream:#FBF7EC;--cream2:#F5EFDF;
  --gold:#C9A227;--gold-deep:#A8841A;--gold-soft:#E8D9A0;--gold-pale:#F7F0DC;--gold-glow:rgba(201,162,39,.18);
  --emerald:#1E6E4A;--emerald-soft:#E4F1E9;--crimson:#A11D22;--crimson-soft:#F8E6E6;
  --grey:#6B6B6B;--grey-line:rgba(0,0,0,.10);--grey-line2:#D8D2C2;
  --shadow-sm:0 2px 8px rgba(0,0,0,.08);--shadow-md:0 8px 28px rgba(0,0,0,.12);
  --shadow-lg:0 20px 60px rgba(0,0,0,.18);--shadow-gold:0 16px 50px rgba(201,162,39,.30);
  --serif:'Playfair Display',Georgia,serif;--display:'Cinzel','Playfair Display',serif;
  --sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --maxw:1180px;--radius:14px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.7;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.14;font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,8vw,100px) 0}
.section--dark{background:var(--ink);color:#fff}.section--cream{background:var(--cream)}
.kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.kicker--light{color:var(--gold)}
.shead{text-align:center;max-width:800px;margin:0 auto 48px}
.shead h2{font-size:clamp(27px,4vw,42px);margin-top:12px}.shead p{margin-top:14px;color:var(--graphite)}
.section--dark .shead h2{color:#fff}.section--dark .shead p{color:#bdb6a4}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:15px;padding:15px 30px;border-radius:50px;cursor:pointer;border:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease);text-align:center;line-height:1}
.btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--ink);box-shadow:var(--shadow-gold)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(201,162,39,.42)}
.btn--ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn--ghost:hover{background:var(--gold);color:var(--ink)}
.btn--dark{background:var(--ink);color:var(--gold)}
.btn--block{width:100%}.btn--lg{font-size:17px;padding:18px 40px}

/* announce + nav */
.announce{background:linear-gradient(90deg,var(--ink),var(--charcoal));color:var(--gold-soft);text-align:center;font-size:13px;padding:9px 16px}
.announce b{color:var(--gold)}
.nav{position:sticky;top:0;z-index:90;background:rgba(15,15,15,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,162,39,.22)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav__brand{display:flex;align-items:center;gap:11px;color:#fff;font-family:var(--serif);font-weight:700;font-size:18px}
.nav__brand svg{width:28px;height:28px}
.nav__brand small{display:block;font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.nav__links{display:flex;gap:24px;align-items:center}
.nav__links a{color:#cdc6b3;font-size:14px;font-weight:500}.nav__links a:hover{color:var(--gold)}
.nav__actions{display:flex;gap:12px;align-items:center}
.nav__login{color:#cdc6b3;font-size:14px;font-weight:600}.nav__login:hover{color:var(--gold)}
.nav__cta{font-size:14px;padding:11px 22px}
@media(max-width:880px){.nav__links{display:none}.nav__login{display:none}}
/* Laman utama membawa enam item nav (satu daripadanya menuju ke halaman Marketing Tools).
   Antara 881px dan 1080px, jarak 24px menolak brand dan CTA sampai berhimpit — jadi jarak
   dan saiz teks dikecilkan dalam julat itu sahaja. Di bawah 880px nav__links memang
   disembunyikan, jadi julat ini satu-satunya tempat masalahnya berlaku. */
@media(min-width:881px) and (max-width:1080px){.nav__links{gap:15px}.nav__links a{font-size:13px}}

/* hero */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:clamp(54px,7vw,92px) 0}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 22%,var(--gold-glow),transparent 42%),radial-gradient(circle at 85% 82%,rgba(201,162,39,.12),transparent 48%)}
.hero__in{position:relative;z-index:2;max-width:860px;margin:0 auto;text-align:center}
.hero__pill{display:inline-flex;align-items:center;gap:9px;background:rgba(201,162,39,.13);border:1px solid rgba(201,162,39,.42);color:var(--gold);padding:8px 16px;border-radius:50px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:800;margin:22px 0 0}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero__sub{font-size:clamp(16px,1.8vw,19px);color:#cfc8b6;margin:22px auto 0;max-width:620px}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero__stats{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero__stats .n{font-family:var(--serif);font-weight:800;font-size:30px;color:var(--gold)}
.hero__stats .l{font-size:12px;color:#a59e8b;letter-spacing:.08em;text-transform:uppercase;margin-top:5px}

/* grids/cards */
.grid{display:grid;gap:22px}.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.g-3{grid-template-columns:1fr}}
@media(max-width:640px){.g-2,.g-4{grid-template-columns:1fr}}
.pillar{background:var(--ink);color:#fff;border-radius:var(--radius);padding:32px 28px;border:1px solid rgba(201,162,39,.25);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-soft),var(--gold))}
.pillar h3{color:#fff;font-size:21px;margin-bottom:9px}.pillar p{color:#bdb6a4;font-size:14px}
.pillar .tag{display:inline-block;margin-top:14px;background:rgba(201,162,39,.14);color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:20px}
.modc{background:var(--white);border:1px solid var(--gold-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex;flex-direction:column}
.modc:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.modc__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.modc__no{font-family:var(--display);font-weight:700;font-size:11px;color:var(--gold-deep);letter-spacing:.1em}
.modc__cat{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-pale);padding:4px 9px;border-radius:12px}
.modc h3{font-size:17px;margin-bottom:5px}.modc p{font-size:12.5px;color:var(--graphite);flex:1}
.modc__meta{margin-top:12px;padding-top:11px;border-top:1px solid var(--grey-line);font-size:11.5px;color:var(--grey);font-family:var(--display);letter-spacing:.05em}

/* pricing */
/* Lapisan cahaya hiasan di bawah ini `inset:0`, jadi ia menutupi SELURUH seksyen dan
   memakan klik pada mana-mana anak yang tidak menaikkan dirinya dengan `z-index`.
   `pointer-events:none` wajib pada setiap lapisan hiasan penuh-bleed di fail ini —
   `PointerEventsOverlayTest` menguatkuasakannya. */
.pricing{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.pricing::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0%,var(--gold-glow),transparent 55%)}
.freebar{position:relative;z-index:2;max-width:760px;margin:0 auto 36px;background:linear-gradient(135deg,rgba(201,162,39,.16),rgba(201,162,39,.05));border:1px solid rgba(201,162,39,.4);border-radius:16px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.freebar h4{color:#fff;font-size:19px;margin-bottom:3px}.freebar p{color:#bdb6a4;font-size:13.5px}
.plan-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media(max-width:940px){.plan-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.plan-grid{grid-template-columns:1fr}}
.plan{background:var(--white);color:var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--grey-line2);display:flex;flex-direction:column;position:relative}
.plan--feat{border:2px solid var(--gold);box-shadow:var(--shadow-gold)}
.plan__flag{background:linear-gradient(90deg,var(--gold),var(--gold-deep));color:var(--ink);text-align:center;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:8px}
.plan__flag--pop{background:linear-gradient(90deg,var(--crimson),#7a1518);color:#fff}
.plan__body{padding:26px 22px 26px;display:flex;flex-direction:column;flex:1;text-align:center}
.plan__name{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:800}
.plan__old{font-family:var(--serif);font-size:16px;color:var(--grey);text-decoration:line-through;opacity:.75;margin-top:8px}
.plan__price{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:2px}
.plan__price .cur{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--gold-deep)}
.plan__price .amt{font-family:var(--serif);font-weight:800;font-size:44px;line-height:1}
.plan__per{font-size:12.5px;color:var(--grey);margin-top:6px}
.plan__save{display:inline-block;margin:12px auto 0;background:var(--emerald-soft);color:var(--emerald);font-size:11px;font-weight:800;padding:5px 11px;border-radius:14px}
.plan__save--neutral{background:#ece7d8;color:var(--grey)}
.plan__btn{margin-top:18px}
.pricing__feats{position:relative;z-index:2;max-width:820px;margin:40px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
@media(max-width:640px){.pricing__feats{grid-template-columns:1fr}}
.pricing__feats li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#e8e2d2;list-style:none}
.pricing__feats .ck{color:var(--gold);flex:0 0 auto}

/* faq */
.faq{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--grey-line)}
.faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--serif);font-weight:700;font-size:17px;position:relative}
.faq-q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--gold-deep);transition:transform .3s}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 40px 20px 0;color:var(--graphite);font-size:14.5px}

/* footer */
.foot{background:#0a0a0a;color:#8a8475;padding:40px 0;text-align:center;font-size:13px}
.foot b{color:#fff;font-family:var(--serif)}

/* ---------- AUTH / GUEST CARD ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--ink);position:relative;overflow:hidden}
.auth::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,var(--gold-glow),transparent 45%),radial-gradient(circle at 85% 85%,rgba(201,162,39,.1),transparent 50%)}
.auth__card{position:relative;z-index:2;width:100%;max-width:440px;background:var(--white);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.auth__head{text-align:center;padding:32px 32px 8px}
.auth__brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;font-size:20px}
.auth__brand svg{width:28px;height:28px}
.auth__head h1{font-size:24px;margin-top:16px}.auth__head p{color:var(--grey);font-size:14px;margin-top:6px}
.auth__body{padding:22px 32px 32px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--graphite);margin-bottom:7px}
.field input{width:100%;border:1px solid var(--grey-line2);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:14px;outline:none;transition:border .2s,box-shadow .2s}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.field .err{color:var(--crimson);font-size:12px;margin-top:5px}
.auth__foot{text-align:center;font-size:13.5px;color:var(--grey);margin-top:18px}
.auth__foot a{color:var(--gold-deep);font-weight:600}

/* ---------- Google Sign-In ---------- */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  background:#fff;border:1.5px solid #dadce0;border-radius:12px;
  padding:14px 18px;min-height:52px;
  font-family:var(--sans);font-size:15px;font-weight:700;color:#3c4043;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(60,64,67,.10);
  transition:background .16s,box-shadow .16s,border-color .16s,transform .16s;
}
.btn-google:hover{background:#f8f9fa;border-color:#b9bcc0;box-shadow:0 4px 12px rgba(60,64,67,.16);transform:translateY(-1px)}
.btn-google:active{background:#f1f3f4;transform:translateY(0);box-shadow:0 1px 2px rgba(60,64,67,.12)}
.btn-google:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.btn-google svg{flex:0 0 auto;width:20px;height:20px}
/* nota kecil di bawah butang */
.btn-google-note{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--grey2,#8A8578);margin:9px 0 0;text-align:center;
}
.btn-google-note b{color:var(--emerald,#1E6E4A);font-weight:700}

/* pemisah "atau guna emel" */
.auth__or{
  display:flex;align-items:center;gap:14px;margin:20px 0;
  color:var(--grey2,#8A8578);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.auth__or::before,.auth__or::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2,#E4DECD));
}
.auth__or::after{background:linear-gradient(90deg,var(--line2,#E4DECD),transparent)}
.auth__or span{white-space:nowrap}

/* alerts */
.alert{max-width:var(--maxw);margin:0 auto;border-radius:12px;padding:14px 18px;font-size:14px;font-weight:500}
.alert--ok{background:var(--emerald-soft);color:var(--emerald);border:1px solid rgba(30,110,74,.25)}
.alert--warn{background:#fdf3e3;color:#8a5b12;border:1px solid rgba(201,162,39,.35)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   LAMAN UTAMA — komponen penukaran (welcome.blade.php)
   Ditambah, bukan menulis ganti: setiap kelas lama di atas kekal
   sama supaya halaman auth/harga tidak berubah.
   ============================================================ */

/* Baris kepercayaan dalam hero */
.hero__trust{list-style:none;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;padding:0}
.hero__trust li{font-size:13px;color:#cfc8b6;font-weight:600}
.hero__trust b{color:var(--gold)}

/* Blok masalah → penyelesaian */
.band__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media(max-width:860px){.band__grid{grid-template-columns:1fr;gap:34px}}
.band__col h2{font-size:clamp(23px,2.6vw,31px);margin:10px 0 14px}
.band__col p{color:var(--graphite);font-size:15px}
.band__list{margin:0;padding-left:20px;display:grid;gap:9px}
.band__list li{font-size:14.5px;color:var(--graphite)}
.band__list b{color:var(--ink)}

/* Dua laluan beli */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
@media(max-width:860px){.ways{grid-template-columns:1fr}}
.way{background:var(--white);border:1px solid var(--grey-line2);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative}
.way--gold{border:2px solid var(--gold);box-shadow:var(--shadow-gold)}
.way__flag{position:absolute;top:-13px;left:26px;background:linear-gradient(90deg,var(--gold),var(--gold-deep));color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:20px}
.way__flag--plain{background:var(--ink);color:var(--gold)}
.way h3{font-size:24px;margin:8px 0 4px}
.way__price{font-family:var(--serif);font-weight:800;font-size:29px;color:var(--gold-deep);margin-bottom:16px}
.way__price span{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.way__list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;flex:1}
.way__list li{font-size:14px;color:var(--graphite);line-height:1.6}
.way__list b{color:var(--ink)}

/* Tiga langkah selepas bayaran */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);border:1px solid var(--gold-soft);border-radius:14px;padding:22px 20px}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold);font-family:var(--serif);font-weight:800;font-size:15px;margin-bottom:11px}
.step h4{font-size:17px;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--graphite)}

/* Tab tapisan tonggak (versi laman awam) */
.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 30px}
.tab{background:var(--white);border:1px solid var(--grey-line2);color:var(--graphite);font-family:var(--sans);font-weight:700;font-size:13px;padding:10px 18px;border-radius:50px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tab:hover{border-color:var(--gold);color:var(--gold-deep)}
.tab.active{background:var(--ink);border-color:var(--ink);color:var(--gold)}

/* Kad modul — tambahan pada `.modc` yang sudah ada */
.modc--pilot{border:2px solid var(--gold);box-shadow:var(--shadow-gold)}
.modc__chapters{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:5px}
.modc__chapters li{font-size:11.5px;color:var(--graphite);padding-left:13px;position:relative;line-height:1.5}
.modc__chapters li::before{content:"›";position:absolute;left:0;color:var(--gold-deep);font-weight:700}
.modc__chapters .modc__more{color:var(--gold-deep);font-weight:700}
.modc__chapters .modc__more::before{content:"+";}
.modc__meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.modc__price{font-family:var(--serif);font-weight:800;font-size:16px;color:var(--ink);letter-spacing:0}
.modc__price small{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--grey)}
.modc__cta{margin-top:12px;font-size:13px;padding:11px 16px}
.modc__badge{margin-top:7px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}

/* Kuota Slot dalam kad pakej */
.plan__slots{margin-top:14px;padding:11px 12px;background:var(--gold-pale);border-radius:12px}
.plan__slots b{display:block;font-family:var(--serif);font-size:19px;color:var(--gold-deep)}
.plan__slots span{display:block;font-size:11.5px;color:var(--graphite);margin-top:2px;line-height:1.45}

/* Terma tiada pemulangan pada seksyen harga (latar gelap) */
.terms{position:relative;z-index:2;max-width:820px;margin:40px auto 0;background:rgba(255,255,255,.05);border:1px solid rgba(201,162,39,.32);border-radius:16px;padding:24px 26px}
.terms h4{color:var(--gold);font-size:16px;margin-bottom:12px}
.terms ul{margin:0;padding-left:20px;display:grid;gap:8px}
.terms li{font-size:13.5px;color:#ded8c8;line-height:1.6}
.terms p{margin-top:14px;font-size:13px;color:#b3ac9a}
.terms a{color:var(--gold);font-weight:700;text-decoration:underline}

/* Bar tindakan melekat (telefon sahaja) */
.stickycta{display:none}
@media(max-width:720px){
  .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;align-items:center;justify-content:space-between;gap:14px;
    padding:11px 16px;background:rgba(15,15,15,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(201,162,39,.32)}
  .stickycta__txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
  .stickycta__txt b{color:#fff;font-size:13.5px;font-family:var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stickycta__txt span{color:var(--gold);font-size:11.5px;font-weight:600}
  .stickycta .btn{flex:0 0 auto;font-size:13px;padding:11px 20px}
  body{padding-bottom:68px}
}

/* ============================================================
   HALAMAN JUALAN SATU MODUL (landing/module.blade.php)
   ============================================================ */

/* Senarai isi kandungan — tajuk bab sahaja */
.toc{max-width:820px;margin:0 auto;padding:0;list-style:none;counter-reset:bab}
.toc li{display:flex;gap:16px;align-items:baseline;background:var(--white);border:1px solid var(--gold-soft);
  border-radius:12px;padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.toc__n{flex:0 0 62px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep)}
.toc__t{font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.35}
@media(max-width:520px){.toc li{flex-direction:column;gap:4px}.toc__n{flex:none}}

/* Kotak beli */
.buybox{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;
  background:var(--white);color:var(--ink);border:2px solid var(--gold);border-radius:20px;
  padding:32px;box-shadow:var(--shadow-gold);max-width:940px;margin:0 auto}
@media(max-width:820px){.buybox{grid-template-columns:1fr;gap:22px;padding:26px 22px}}
.buybox__price{font-family:var(--serif);font-weight:800;font-size:52px;line-height:1}
.buybox__price .cur{font-size:22px;vertical-align:top;margin-right:5px;color:var(--gold-deep)}
.buybox__meta{font-size:13px;color:var(--grey);margin-top:6px}
.buybox__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.buybox__list li{font-size:14px;color:var(--graphite);line-height:1.6}
.buybox__list b{color:var(--ink)}
.buybox__right{display:flex;flex-direction:column;justify-content:center}
.buybox__note{font-size:12.5px;color:var(--grey);line-height:1.65;margin-top:14px}

/* Kotak pengakuan terma — dikongsi oleh borang beli */
.lp-ack{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.6;
  margin:0 0 14px;text-align:left;color:var(--graphite)}
.lp-ack input{width:auto;margin-top:3px;flex:0 0 auto}
.lp-ack b{color:var(--ink)}

/* ============================================================
   LAMAN UTAMA — komponen reka bentuk ASAL (welcome.blade.php)
   ============================================================ */

.announce .dot{color:var(--gold);opacity:.6;margin:0 4px}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
@keyframes pulseGold{0%,100%{box-shadow:0 16px 50px rgba(201,162,39,.30)}50%{box-shadow:0 16px 60px rgba(201,162,39,.55)}}
.btn--pulse{animation:pulseGold 2.4s ease-in-out infinite}
.reveal--d1{transition-delay:.1s}.reveal--d2{transition-delay:.2s}
.reveal--d3{transition-delay:.3s}.reveal--d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn--pulse{animation:none}html{scroll-behavior:auto}}

/* Hero dua lajur + latar bergrid */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 22%,var(--gold-glow),transparent 42%),radial-gradient(circle at 85% 82%,rgba(201,162,39,.13),transparent 48%)}
.hero__bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:linear-gradient(rgba(201,162,39,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,39,.5) 1px,transparent 1px);background-size:48px 48px}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:960px){.hero__inner{grid-template-columns:1fr;text-align:center}.hero__inner .hero__sub{margin-left:auto;margin-right:auto}}
.hero__pill .ping{width:8px;height:8px;background:var(--gold);border-radius:50%;position:relative}
.hero__pill .ping::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gold);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.2);opacity:0}}
.hero__inner .hero__sub{max-width:580px;margin-top:22px}
.hero__inner .hero__stats{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap;justify-content:flex-start}
@media(max-width:960px){.hero__inner .hero__stats,.hero__cta-row,.hero__inner .hero__trust{justify-content:center}}
.hero__stat .n{font-family:var(--serif);font-weight:800;font-size:30px;color:var(--gold);line-height:1}
.hero__stat .l{font-size:12px;color:#a59e8b;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.hero__cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;align-items:center}
.hero__inner .hero__trust{margin-top:26px;justify-content:flex-start}

/* Mock dashboard dalam hero */
.pmock{position:relative;perspective:1600px}
.pmock__frame{background:linear-gradient(160deg,#181818,#0c0c0c);border:1px solid rgba(201,162,39,.3);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;transform:rotateY(-11deg) rotateX(5deg);transform-style:preserve-3d;transition:transform .6s var(--ease)}
.pmock:hover .pmock__frame{transform:rotateY(-6deg) rotateX(2deg)}
.pmock__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#151515;border-bottom:1px solid rgba(201,162,39,.16)}
.pmock__bar i{width:10px;height:10px;border-radius:50%;background:#333;display:block}
.pmock__bar i:nth-child(1){background:#c0453f}.pmock__bar i:nth-child(2){background:#c9a227}.pmock__bar i:nth-child(3){background:#3f8a5c}
.pmock__bar span{margin-left:10px;font-size:10px;color:#7a7466;letter-spacing:.1em}
.pmock__body{padding:16px;display:grid;grid-template-columns:auto 1fr;gap:14px}
.pmock__side{display:flex;flex-direction:column;gap:8px;min-width:74px}
.pmock__side b{font-size:8px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.pmock__side i{height:8px;border-radius:4px;background:rgba(255,255,255,.08);display:block}
.pmock__side i.act{background:linear-gradient(90deg,var(--gold),var(--gold-deep));width:90%}
.pmock__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pmock__card{background:rgba(255,255,255,.04);border:1px solid rgba(201,162,39,.16);border-radius:8px;padding:10px;aspect-ratio:3/2;display:flex;flex-direction:column;justify-content:space-between}
.pmock__card .thumb{height:20px;border-radius:5px;background:linear-gradient(135deg,rgba(201,162,39,.55),rgba(168,132,26,.25))}
.pmock__card b{font-size:8.5px;color:#e8e2d2;font-weight:600;line-height:1.3}
.pmock__card .pg{height:4px;border-radius:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.pmock__card .pg::after{content:"";position:absolute;left:0;top:0;bottom:0;width:60%;background:var(--gold)}
.pmock__card:nth-child(2) .pg::after{width:35%}.pmock__card:nth-child(3) .pg::after{width:80%}.pmock__card:nth-child(4) .pg::after{width:20%}
.pmock__badge{position:absolute;top:-16px;right:-10px;z-index:5;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--ink);padding:10px 15px;border-radius:12px;font-family:var(--display);font-weight:700;text-align:center;line-height:1.1;box-shadow:0 12px 30px rgba(201,162,39,.45);transform:rotate(5deg)}
.pmock__badge .big{font-size:19px;display:block}
.pmock__badge .small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);font-weight:700;margin-top:2px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pmock__float{animation:float 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pmock__float{animation:none}.hero__pill .ping::after{animation:none}}
@media(max-width:960px){.pmock{max-width:520px;margin:8px auto 0}.pmock__frame{transform:none}}

/* Bar bidang */
.seen{background:var(--ink2);padding:24px 0;border-top:1px solid rgba(201,162,39,.14);border-bottom:1px solid rgba(201,162,39,.14)}
.seen__inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,28px);flex-wrap:wrap}
.seen__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a7466;font-weight:600}
.seen__chip{font-size:13px;color:#bdb6a4;border:1px solid rgba(201,162,39,.25);padding:6px 14px;border-radius:30px;display:inline-flex;align-items:center;gap:7px}
.seen__chip .ic{color:var(--gold)}

/* Realiti Pahit */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.pain-grid{grid-template-columns:1fr}}
.pain{background:var(--white);border-radius:var(--radius);padding:30px 26px;border:1px solid var(--grey-line);border-top:3px solid var(--crimson);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pain:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pain__ic{width:52px;height:52px;border-radius:14px;background:var(--crimson-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pain__ic svg{width:26px;height:26px;color:var(--crimson)}
.pain h3{font-size:19px;margin-bottom:10px}
.pain p{font-size:14.5px;color:var(--graphite)}

/* Tonggak + ikon */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.pillar-grid{grid-template-columns:1fr}}
.pillar__ic{width:58px;height:58px;border-radius:15px;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.35);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.pillar__ic svg{width:30px;height:30px;color:var(--gold)}

/* Lebih dari sekadar eBook */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:14px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--white);border-radius:var(--radius);padding:26px 22px;border:1px solid var(--gold-soft);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.feat__ic{width:50px;height:50px;border-radius:13px;background:var(--gold-pale);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat__ic svg{width:26px;height:26px;color:var(--gold-deep)}
.feat h4{font-size:17px;margin-bottom:8px}
.feat p{font-size:13.5px;color:var(--graphite);line-height:1.6}

/* Ilmu sahih / amalan sebenar */
.real-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:940px;margin:0 auto}
@media(max-width:760px){.real-grid{grid-template-columns:1fr}}
.real{background:var(--white);border-left:3px solid var(--gold);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.real h4{font-size:18px;margin-bottom:8px}
.real p{font-size:14px;color:var(--graphite);line-height:1.65}

/* Cara belajar (latar gelap) */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.steps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps-grid{grid-template-columns:1fr}}
.stepc{background:rgba(255,255,255,.03);border:1px solid rgba(201,162,39,.22);border-radius:var(--radius);padding:28px 24px}
.stepc__n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);background:var(--gold);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.stepc h4{color:#fff;font-size:18px;margin-bottom:8px}
.stepc p{color:#bdb6a4;font-size:14px;line-height:1.6}

/* Grid modul laman utama */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:920px){.mod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mod-grid{grid-template-columns:1fr}}
.mod-grid .modc__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mod-grid .modc__meta b{color:var(--gold-deep);font-family:var(--display);letter-spacing:.05em;font-size:14px}
.mod-note{text-align:center;margin-top:36px;color:var(--graphite);font-size:15px}
.mod-note b{color:var(--gold-deep)}

/* CTA akhir */
.final{background:var(--ink);color:#fff;position:relative;overflow:hidden;text-align:center}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0%,var(--gold-glow),transparent 60%)}
.final__in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.final h2{font-size:clamp(28px,4vw,44px);color:#fff;margin-top:14px}
.final h2 em{font-style:italic;color:var(--gold)}
.final p{color:#bdb6a4;margin-top:16px}
.final__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ============================================================
   LAMAN UTAMA — reka bentuk asal dipulihkan (welcome.blade.php)
   Hero dua lajur + mock dashboard, bar bidang, Realiti Pahit,
   tonggak berikon, ciri, langkah, grid modul, CTA akhir.
   ============================================================ */

.announce .dot{color:var(--gold);opacity:.6;margin:0 4px}

/* Butang: kilauan + denyut, seperti reka bentuk asal */
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
@keyframes pulseGold{0%,100%{box-shadow:0 16px 50px rgba(201,162,39,.30)}50%{box-shadow:0 16px 60px rgba(201,162,39,.55)}}
.btn--pulse{animation:pulseGold 2.4s ease-in-out infinite}

/* Lengah reveal berturutan */
.reveal--d1{transition-delay:.1s}.reveal--d2{transition-delay:.2s}
.reveal--d3{transition-delay:.3s}.reveal--d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn--pulse,.pmock__float{animation:none}
  html{scroll-behavior:auto}
}

/* Hero dua lajur */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:linear-gradient(rgba(201,162,39,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,39,.5) 1px,transparent 1px);
  background-size:48px 48px}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:960px){.hero__inner{grid-template-columns:1fr;text-align:center}}
.hero__pill .ping{width:8px;height:8px;background:var(--gold);border-radius:50%;position:relative}
.hero__pill .ping::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--gold);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.2);opacity:0}}
.hero__inner .hero__sub{max-width:580px}
@media(max-width:960px){.hero__inner .hero__sub{margin-left:auto;margin-right:auto}}
.hero__inner .hero__stats{justify-content:flex-start;gap:30px}
@media(max-width:960px){.hero__inner .hero__stats{justify-content:center}}
.hero__cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;align-items:center}
@media(max-width:960px){.hero__cta-row{justify-content:center}}
.hero__inner .hero__trust{justify-content:flex-start}
@media(max-width:960px){.hero__inner .hero__trust{justify-content:center}}

/* Mock dashboard dalam hero */
.pmock{position:relative;perspective:1600px}
.pmock__frame{background:linear-gradient(160deg,#181818,#0c0c0c);border:1px solid rgba(201,162,39,.3);
  border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;
  transform:rotateY(-11deg) rotateX(5deg);transform-style:preserve-3d;transition:transform .6s var(--ease)}
.pmock:hover .pmock__frame{transform:rotateY(-6deg) rotateX(2deg)}
.pmock__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#151515;
  border-bottom:1px solid rgba(201,162,39,.16)}
.pmock__bar i{width:10px;height:10px;border-radius:50%;background:#333;display:block}
.pmock__bar i:nth-child(1){background:#c0453f}.pmock__bar i:nth-child(2){background:#c9a227}.pmock__bar i:nth-child(3){background:#3f8a5c}
.pmock__bar span{margin-left:10px;font-size:10px;color:#7a7466;letter-spacing:.1em}
.pmock__body{padding:16px;display:grid;grid-template-columns:auto 1fr;gap:14px}
.pmock__side{display:flex;flex-direction:column;gap:8px;min-width:74px}
.pmock__side b{font-size:8px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.pmock__side i{height:8px;border-radius:4px;background:rgba(255,255,255,.08);display:block}
.pmock__side i.act{background:linear-gradient(90deg,var(--gold),var(--gold-deep));width:90%}
.pmock__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pmock__card{background:rgba(255,255,255,.04);border:1px solid rgba(201,162,39,.16);border-radius:8px;
  padding:10px;aspect-ratio:3/2;display:flex;flex-direction:column;justify-content:space-between}
.pmock__card .thumb{height:20px;border-radius:5px;background:linear-gradient(135deg,rgba(201,162,39,.55),rgba(168,132,26,.25))}
.pmock__card b{font-size:8.5px;color:#e8e2d2;font-weight:600;line-height:1.3}
.pmock__card .pg{height:4px;border-radius:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.pmock__card .pg::after{content:"";position:absolute;left:0;top:0;bottom:0;width:60%;background:var(--gold)}
.pmock__card:nth-child(2) .pg::after{width:35%}
.pmock__card:nth-child(3) .pg::after{width:80%}
.pmock__card:nth-child(4) .pg::after{width:20%}
.pmock__badge{position:absolute;top:-16px;right:-10px;z-index:5;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--ink);
  padding:10px 15px;border-radius:12px;font-family:var(--display);font-weight:700;text-align:center;
  line-height:1.1;box-shadow:0 12px 30px rgba(201,162,39,.45);transform:rotate(5deg)}
.pmock__badge .big{font-size:19px;display:block}
.pmock__badge .small{font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--sans);font-weight:700;margin-top:2px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pmock__float{animation:float 6s ease-in-out infinite}

/* Bar bidang */
.seen{background:var(--ink2);padding:24px 0;border-top:1px solid rgba(201,162,39,.14);
  border-bottom:1px solid rgba(201,162,39,.14)}
.seen__inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;
  justify-content:center;gap:clamp(14px,3vw,32px);flex-wrap:wrap}
.seen__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a7466;font-weight:600}
.seen__chip{font-size:13px;color:#bdb6a4;border:1px solid rgba(201,162,39,.25);padding:6px 14px;
  border-radius:30px;display:inline-flex;align-items:center;gap:7px}
.seen__chip .ic{color:var(--gold)}

/* Realiti Pahit */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.pain-grid{grid-template-columns:1fr}}
.pain{background:var(--white);border-radius:var(--radius);padding:30px 26px;border:1px solid var(--grey-line);
  border-top:3px solid var(--crimson);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pain:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pain__ic{width:52px;height:52px;border-radius:14px;background:var(--crimson-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pain__ic svg{width:26px;height:26px;color:var(--crimson)}
.pain h3{font-size:19px;margin-bottom:10px}
.pain p{font-size:14.5px;color:var(--graphite);line-height:1.7}

/* Tonggak berikon */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.pillar-grid{grid-template-columns:1fr}}
.pillar__ic{width:58px;height:58px;border-radius:15px;background:rgba(201,162,39,.14);
  border:1px solid rgba(201,162,39,.35);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.pillar__ic svg{width:30px;height:30px;color:var(--gold)}

/* Ciri (AI Guru + tools) */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:14px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--white);border-radius:var(--radius);padding:26px 22px;border:1px solid var(--gold-soft);
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.feat__ic{width:50px;height:50px;border-radius:13px;background:var(--gold-pale);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat__ic svg{width:26px;height:26px;color:var(--gold-deep)}
.feat h4{font-size:17px;margin-bottom:8px}
.feat p{font-size:13.5px;color:var(--graphite);line-height:1.6}

/* Ilmu sahih, bukan teori */
.real-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.real-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.real-grid{grid-template-columns:1fr}}
.real{background:var(--white);border-radius:var(--radius);padding:24px 22px;
  border:1px solid var(--gold-soft);border-left:3px solid var(--gold);box-shadow:var(--shadow-sm)}
.real h4{font-size:16.5px;margin-bottom:8px}
.real p{font-size:13.5px;color:var(--graphite);line-height:1.65}

/* Langkah cara belajar (latar gelap) */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.steps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps-grid{grid-template-columns:1fr}}
.stepc{background:rgba(255,255,255,.03);border:1px solid rgba(201,162,39,.22);
  border-radius:var(--radius);padding:28px 24px}
.stepc__n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);background:var(--gold);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.stepc h4{color:#fff;font-size:18px;margin-bottom:8px}
.stepc p{color:#bdb6a4;font-size:14px;line-height:1.6}

/* Grid modul laman utama */
.mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1000px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mod-grid{grid-template-columns:1fr}}
.mod-note{text-align:center;margin-top:36px;color:var(--graphite);font-size:15px}
.mod-note b{color:var(--gold-deep)}

/* CTA akhir */
.final{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 30%,var(--gold-glow),transparent 60%)}
.final__in{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto}
.final__in h2{font-size:clamp(28px,4vw,44px);margin:14px 0 0;color:#fff}
.final__in h2 em{font-style:italic;color:var(--gold)}
.final__in p{color:#bdb6a4;margin:18px auto 30px;font-size:16px}

/* ============================================================
   LAPISAN TELEFON — ditambah di penghujung fail, jadi ia menang
   tanpa perlu menyunting mana-mana rule di atas.

   Sebab ia ada: breakpoint terkecil dalam fail ini ialah 520px,
   jadi telefon 360–412px tiada satu pun pas yang mengecilkan
   teks besar. Akibatnya hero__pill (huruf besar + letter-spacing
   .12em), h1, hero__stats (baris flex, gap 30px), baris butang
   dan mock dashboard (badge pada right:-10px) melimpah ke kanan
   dan dipotong oleh body{overflow-x:hidden} — kelihatan seperti
   halaman "terpotong", bukan seperti overflow.

   Susunan: pengadang global → 640px → 380px.
   ============================================================ */

/* ---------- Pengadang global (semua saiz) ---------- */
html,body{max-width:100%}
img,svg,video,iframe,table,pre{max-width:100%}

/* Anak flex/grid enggan mengecil di bawah kandungannya melainkan
   diberitahu; inilah punca sebenar baris yang melimpah.

   Bagi GRID ini bukan sekadar kosmetik: saiz minimum automatik anak
   grid ialah lebar min-content-nya, dan minimum itu menolak TREK
   melebihi bekasnya. Diukur pada 360px sebelum baris ini ditambah:
   `.hero__inner` clientWidth 360 tetapi scrollWidth 393, trek 377px —
   ditolak oleh min-content mock dashboard. h1, butang dan statistik
   kemudian mengikut trek itu, jadi seluruh hero terpotong serentak.
   `min-width:0` mematikan minimum automatik itu. */
.hero__inner>*,.pmock,.pmock__frame,.pmock__body>*,.pmock__grid>*,
.buybox>*,.band__grid>*,.ways>*,.plan-grid>*,.mod-grid>*,.pain-grid>*,
.pillar-grid>*,.feat-grid>*,.real-grid>*,.steps-grid>*,.steps>*,
.pricing__feats>*,.hero__stats>*,.hero__trust>li,.hero__cta>*,
.hero__cta-row>*,.final__cta>*,.seen__inner>*,.freebar>*,
.stickycta__txt,.modc__meta>*,.plan__price>*,.toc li>*{min-width:0}

/* Alamat dalam bar mock ialah satu token tanpa ruang: ia tidak boleh
   membalut, jadi ia dipendekkan dengan elipsis dan bukan menolak lebar. */
.pmock__bar span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Pil hero: teks huruf besar berjarak — mesti dibenarkan membalut. */
.hero__pill{max-width:100%;white-space:normal;text-align:center;justify-content:center;line-height:1.45}

/* Tajuk panjang tanpa ruang (URL, nama modul) tidak boleh menolak lebar. */
h1,h2,h3,h4,p,li,.toc__t,.stickycta__txt b{overflow-wrap:break-word}

/* ---------- Telefon (≤640px) ---------- */
@media(max-width:640px){
  .wrap{padding:0 18px}
  .nav__in{padding:12px 18px}
  .nav__brand{font-size:16px;gap:9px}
  .nav__brand svg{width:24px;height:24px}
  .nav__brand small{font-size:7.5px;letter-spacing:.18em}
  .nav__cta{font-size:12.5px;padding:10px 15px}
  .announce{font-size:11.5px;padding:9px 14px;line-height:1.55}

  .section{padding:46px 0}
  .shead{margin-bottom:30px}
  .shead h2{font-size:clamp(22px,6.2vw,28px)}
  .shead p{font-size:14px}
  .kicker{font-size:10.5px;letter-spacing:.2em}

  .btn{font-size:14.5px;padding:14px 20px}
  .btn--lg{font-size:15.5px;padding:16px 22px}

  /* Hero */
  .hero{padding:38px 0 44px}
  .hero__inner{gap:26px}
  .hero__pill{font-size:10.5px;letter-spacing:.06em;padding:7px 13px;gap:7px}
  /* Hook utama digandakan pada telefon: pada 25–26px ia hilang dalam
     susunan menegak dan mata tidak berhenti padanya. Kekal dalam skrin
     kerana `overflow-wrap:break-word` sudah dikenakan pada h1 dan
     perkataan terpanjang diukur pada 320–412px. */
  .hero h1{font-size:clamp(40px,13vw,50px);line-height:1.06;letter-spacing:-.015em}
  .hero__sub{font-size:15px;margin-top:18px}

  /* Baris statistik → grid yang boleh membalut, bukan baris flex tetap. */
  .hero__stats,.hero__inner .hero__stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
    gap:14px 10px;margin-top:26px;justify-content:center;text-align:center}
  .hero__stats .n,.hero__stat .n{font-size:24px}
  .hero__stats .l,.hero__stat .l{font-size:10px;letter-spacing:.06em;margin-top:4px}

  /* Butang hero bertindan penuh lebar — sasaran sentuh lebih besar. */
  .hero__cta,.hero__cta-row{flex-direction:column;align-items:stretch;gap:11px;margin-top:26px}
  .hero__cta .btn,.hero__cta-row .btn{width:100%}

  .hero__trust,.hero__inner .hero__trust{flex-direction:column;align-items:center;gap:7px;margin-top:20px}
  .hero__trust li{font-size:12.5px;text-align:center}

  /* Mock dashboard: badge dibawa masuk ke dalam kotak. */
  .pmock{max-width:100%;margin-top:24px}
  .pmock__badge{top:-12px;right:4px;padding:8px 12px}
  .pmock__badge .big{font-size:16px}
  .pmock__body{padding:12px;gap:10px}
  .pmock__side{min-width:54px}
  .pmock__card b{font-size:8px}

  /* Bar bidang */
  .seen{padding:18px 0}
  .seen__inner{padding:0 18px;gap:8px}
  .seen__label{width:100%;text-align:center;font-size:10px;letter-spacing:.16em}
  .seen__chip{font-size:11.5px;padding:5px 11px;gap:6px}

  /* Kad */
  .pain{padding:24px 20px}
  .pain h3{font-size:17.5px}
  .pain p{font-size:14px}
  .pillar{padding:26px 22px}
  .pillar h3{font-size:19px}
  .feat{padding:22px 18px}
  .stepc{padding:22px 18px}
  .real{padding:20px 18px}
  .step{padding:20px 17px}
  .way{padding:26px 20px}
  .way h3{font-size:21px}
  .way__price{font-size:25px}

  /* Tab + kad modul */
  .tabs{gap:7px;margin-bottom:22px}
  .tab{font-size:12px;padding:8px 13px}
  .modc{padding:17px}
  .modc h3{font-size:16px}
  .modc__meta{flex-wrap:wrap;gap:4px 10px;font-size:11px}
  .mod-note{font-size:14px}

  /* Harga */
  .plan__body{padding:22px 18px}
  .plan__price .amt{font-size:38px}
  .plan__slots b{font-size:17.5px}
  .pricing__feats{margin-top:28px}
  .pricing__feats li{font-size:13px}
  .freebar{flex-direction:column;align-items:stretch;text-align:center;padding:20px 18px;gap:14px}
  .freebar .btn{width:100%}
  .terms{padding:20px 18px;margin-top:28px}
  .terms li{font-size:12.5px}
  .terms p{font-size:12.5px}

  /* FAQ + CTA akhir + kaki */
  .faq-q{font-size:15.5px;padding:16px 34px 16px 0}
  .faq-q::after{font-size:23px}
  .faq-a p{padding:0 34px 16px 0;font-size:13.5px}
  .final__cta{flex-direction:column;align-items:stretch}
  .final__cta .btn{width:100%}
  .foot{font-size:12.5px;padding:32px 0}

  /* Halaman jualan satu modul */
  .band__col h2{font-size:clamp(21px,5.8vw,26px)}
  .band__list li{font-size:14px}
  .buybox{padding:22px 18px;gap:20px}
  .buybox__price{font-size:40px}
  .buybox__price .cur{font-size:18px}
  .buybox__list li{font-size:13.5px}
  .toc li{padding:12px 14px}
  .toc__t{font-size:15.5px}
  .lp-ack{font-size:12px}

  /* Kad auth */
  .auth{padding:26px 14px}
  .auth__head{padding:26px 22px 6px}
  .auth__head h1{font-size:21px}
  .auth__body{padding:18px 22px 26px}

  /* Bar melekat */
  .stickycta{padding:10px 14px;gap:10px}
  .stickycta .btn{padding:11px 16px;font-size:12.5px}
}

/* ---------- Telefon kecil (≤380px) ---------- */
@media(max-width:380px){
  .wrap{padding:0 14px}
  .nav__in{padding:11px 14px}
  .seen__inner{padding:0 14px}
  .announce{font-size:11px}

  .hero__pill{font-size:9.5px;letter-spacing:.04em;padding:6px 11px}
  /* `.hero h1` sengaja TIDAK ditulis semula di sini: satu peraturan `clamp`
     dalam pas 640px sudah melengkung dari 320px hingga 412px tanpa lompatan.
     Menambah nilai kedua di sini pernah menyebabkan 360px = 47px tetapi
     390px = 56px, kerana pas ini berhenti terpakai di 381px. */
  .hero__sub{font-size:14.5px}
  .hero__stats,.hero__inner .hero__stats{grid-template-columns:1fr 1fr;gap:12px 8px}
  .hero__stats .n,.hero__stat .n{font-size:22px}

  .shead h2{font-size:21px}
  .plan__price .amt{font-size:33px}
  .buybox__price{font-size:34px}
  .modc h3{font-size:15px}
  .seen__chip{font-size:10.5px;padding:5px 9px}
  .btn,.btn--lg{font-size:14px;padding:14px 16px}
  .stickycta__txt b{font-size:12.5px}
  .stickycta .btn{padding:10px 13px;font-size:12px}
  .toc__t{font-size:15px}
}

/* ============================================================
   KAD PUTIH DI DALAM SEKSYEN GELAP

   `.section--dark` menetapkan `color:#fff` pada seluruh seksyen,
   dan tajuk kad tidak pernah menyatakan warnanya sendiri — jadi
   kad berlatar putih di dalam seksyen gelap memapar tajuk putih
   atas putih. Ia berlaku pada seksyen "Kos Sampai Pintu": teks
   perenggan kelihatan (ia ada warna sendiri), tajuk hilang.

   Warna dinyatakan pada tajuk kad yang latarnya SELALU putih.
   `.pillar h3` dan `.stepc h4` sengaja ditinggalkan — kad itu
   memang gelap dan tajuk putihnya betul.
   ============================================================ */
.real h4,.feat h4,.pain h3,.modc h3,.step h4,.way h3,.plan h3,.toc__t{color:var(--ink)}
.real p,.feat p,.pain p,.step p{color:var(--graphite)}
.section--dark .real h4,.section--dark .feat h4,.section--dark .pain h3,
.section--dark .step h4,.section--dark .toc li{color:var(--ink)}
.section--dark .real p,.section--dark .feat p,.section--dark .pain p,
.section--dark .step p{color:var(--graphite)}

/* Seksyen `.pricing` gelap tetapi BUKAN `.section--dark`, jadi ia tidak
   menerima `.section--dark .shead p{color:#bdb6a4}`. Perenggan shead di
   situ mewarisi `--graphite` — kelabu gelap atas hitam, kontras 1.69.
   Ia sudah begitu sebelum ini; ayat harga yang lebih panjang cuma
   menjadikannya kelihatan. */
.pricing .shead p{color:#bdb6a4}
.pricing .shead p b{color:var(--gold)}

/* ============================================================
   HALAMAN UNDANG-UNDANG + KAKI AWAM BERSAMA
   Terma, Privasi, Dasar Pemulangan — dokumen yang penyemak
   iklan dan pelanggan sama-sama baca, jadi ia perlu senang
   dibaca dan bukan cantik sahaja.
   ============================================================ */
.legal__head{padding:clamp(34px,5vw,58px) 0 clamp(26px,4vw,40px)}
.legal__head h1{font-size:clamp(28px,4.4vw,42px);color:#fff;margin-top:12px}
.legal__date{margin-top:14px;font-size:13.5px;color:#bdb6a4}
.legal__date b{color:var(--gold)}
.legal__intro{margin-top:16px;max-width:760px;font-size:15.5px;color:#ded8c8;line-height:1.75}
.legal__intro b{color:#fff}

.legal{padding:clamp(34px,5vw,64px) 0}
.legal__body{max-width:820px}
.legal__sec{margin-bottom:34px}
.legal__sec h2{font-size:clamp(20px,2.6vw,25px);margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px solid var(--grey-line)}
.legal__sec h3{font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep);margin:20px 0 8px}
.legal__sec p{font-size:15px;color:var(--graphite);line-height:1.8;margin-bottom:12px}
.legal__sec ul,.legal__sec ol{margin:0 0 14px;padding-left:22px;display:grid;gap:9px}
.legal__sec li{font-size:14.5px;color:var(--graphite);line-height:1.75}
.legal__sec b{color:var(--ink)}
.legal__sec a{color:var(--gold-deep);font-weight:700;text-decoration:underline}
.legal__note{background:var(--gold-pale);border-left:3px solid var(--gold);border-radius:10px;
  padding:14px 16px;font-size:14px;line-height:1.75}
.legal__nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:26px;
  border-top:1px solid var(--grey-line)}
.legal__nav .btn{color:var(--gold-deep);border-color:var(--gold-deep)}
.legal__nav .btn:hover{background:var(--gold-deep);color:#fff}

/* Kaki awam bersama */
.foot__links{display:flex;gap:8px 18px;flex-wrap:wrap;justify-content:center;margin:10px 0 14px}
.foot__links a{color:var(--gold);font-weight:600}
.foot__links a:hover{text-decoration:underline}
.foot__meta{font-size:12.5px;color:#8a8475;line-height:1.7;max-width:720px;margin:0 auto 8px}
.foot__meta b{color:#c9c2ae;font-family:var(--sans);font-weight:700}

@media(max-width:640px){
  .legal__head h1{font-size:clamp(24px,7vw,30px)}
  .legal__intro{font-size:14.5px}
  .legal__sec{margin-bottom:28px}
  .legal__sec h2{font-size:20px}
  .legal__sec p{font-size:14.5px}
  .legal__sec li{font-size:14px}
  .legal__sec ul,.legal__sec ol{padding-left:18px}
  .legal__nav{flex-direction:column;align-items:stretch}
  .legal__nav .btn{width:100%}
  .foot__links{gap:6px 14px;font-size:13px}
  .foot__meta{font-size:12px}
}


/* ===== Dropdown Bank FPX (landing asal) ===== */
.lp-bank{margin:0 0 12px}
.lp-bank label{display:block;font-size:12px;font-weight:600;color:#ddd;margin-bottom:6px;letter-spacing:.02em}
.lp-bank select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;font-size:14px;font-family:inherit;background:#141414;color:#fff;min-height:44px}
.lp-bank select:focus{outline:2px solid #C9A227;outline-offset:1px}


/* ===== Nama & Emel + Bank (landing asal) ===== */
.lp-fields{display:grid;gap:8px;margin:0 0 12px}
.lp-fields input{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;font-size:14px;font-family:inherit;background:#141414;color:#fff;min-height:44px}