/* ==========================================================================
   AIVidLab — Bento Design System
   Prinsip: kemas, mesra mata, hierarki jelas, cerita mengalir
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* --- Surface: gelap lembut, bukan hitam pekat (kurangkan silau) --- */
  --bg:#0f1014;
  --surface:#171923;
  --surface-2:#1c1f2b;
  --surface-3:#232735;

  /* --- Garisan halus --- */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);

  /* --- Teks: putih tulang, bukan #fff (kurangkan ketegangan mata) --- */
  --tx:#e9ebf2;
  --tx2:#9ba1b2;
  --tx3:#6e7486;

  /* --- Aksen: guna berhemat, satu blok besar sahaja --- */
  --lime:#bce85a;
  --lime-soft:rgba(188,232,90,.12);
  --violet:#8b7cff;
  --cyan:#56cfe1;
  --rose:#ff7a8a;

  --r-sm:12px;
  --r:16px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --gap:12px;

  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:inherit}

.wrap{width:min(100% - 2rem,1200px);margin-inline:auto}
@media(min-width:640px){ .wrap{width:min(100% - 3rem,1200px)} }

/* ---------- Tipografi ---------- */
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(2rem,1.15rem + 3.9vw,3.6rem);font-weight:800;letter-spacing:-.045em;line-height:1.03}
h2{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.35rem);font-weight:800}
h3{font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
p{margin:0;text-wrap:pretty}
.lead{color:var(--tx2);font-size:clamp(.98rem,.94rem + .28vw,1.1rem);line-height:1.6}

/* ==========================================================================
   BENTO PRIMITIVES
   ========================================================================== */
.bento{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(6,1fr);
}
.cell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.15rem,1rem + .6vw,1.6rem);
  position:relative;overflow:hidden;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
/* hover halus sahaja — tiada lompatan mengejut */
.cell--i:hover{border-color:var(--line-2);background:var(--surface-2)}
a.cell{text-decoration:none;display:block}

/* varian kolum */
.bento--3{grid-template-columns:repeat(3,1fr)}
.bento--4{grid-template-columns:repeat(4,1fr)}
.bento--3>.cell,.bento--4>.cell{grid-column:span 1}

/* span helpers */
.s1{grid-column:span 1}.s2{grid-column:span 2}.s3{grid-column:span 3}
.s4{grid-column:span 4}.s6{grid-column:span 6}
.r2{grid-row:span 2}.r3{grid-row:span 3}

@media(max-width:900px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento--3,.bento--4{grid-template-columns:repeat(2,1fr)}
  .s6{grid-column:span 4}.s4{grid-column:span 4}.s3{grid-column:span 2}
}
@media(max-width:600px){
  :root{--gap:10px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento--3,.bento--4{grid-template-columns:1fr}
  .bento--3>.cell,.bento--4>.cell{grid-column:span 1}
  .s6,.s4,.s3{grid-column:span 2}
  .s2{grid-column:span 2}
  .r2,.r3{grid-row:auto}
  .cell{border-radius:var(--r)}
}

/* ---------- Label kecil ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:.7rem;
}
.eyebrow::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--lime)}

/* ---------- Butang ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.94rem;text-decoration:none;cursor:pointer;
  padding:.82em 1.5em;border-radius:12px;border:1px solid transparent;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--lime);color:#14170c}
.btn--primary:hover{background:#c9f06d}
.btn--ghost{background:transparent;color:var(--tx);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface-3);border-color:var(--tx3)}
.btn--lg{padding:.95em 1.8em;font-size:1rem}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap}
.btn-row--center{justify-content:center}
@media(max-width:520px){ .btn-row .btn{flex:1 1 100%} }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:1rem;height:64px;position:relative}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;
  font-size:1.05rem;letter-spacing:-.035em;text-decoration:none}
.brand img{width:28px;height:28px;border-radius:8px}
.brand em{font-style:normal;color:var(--lime)}
.nav{margin-left:auto;display:flex;gap:1.6rem}
.nav a{color:var(--tx2);text-decoration:none;font-size:.88rem;font-weight:600;
  transition:color .2s var(--ease)}
.nav a:hover{color:var(--tx)}

.hdr__cta{display:flex;align-items:center;gap:.55rem;margin-left:1.2rem}
.lang-btn{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 .55rem;
  border:1px solid var(--line-2);border-radius:10px;
  color:var(--tx2);text-decoration:none;font-size:.78rem;font-weight:800;
  letter-spacing:.04em;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.lang-btn:hover{color:var(--tx);border-color:var(--tx3)}

/* --- burger --- */
.burger{
  display:none;margin-left:auto;order:3;
  width:42px;height:42px;padding:0;background:transparent;
  border:1px solid var(--line-2);border-radius:11px;cursor:pointer;
  place-items:center;gap:5px;
}
.burger span{
  display:block;width:17px;height:2px;border-radius:2px;background:var(--tx);
  transition:transform .28s var(--ease),opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .burger{display:flex}
  .hdr__cta{margin-left:.5rem;order:2}
  .hdr__cta .btn{padding:.62em 1em;font-size:.85rem}
  .nav{
    order:4;position:absolute;left:0;right:0;top:100%;
    margin:0;display:flex;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:0 1rem;
    max-height:0;overflow:hidden;
    opacity:0;visibility:hidden;
    transition:max-height .32s var(--ease),padding .32s var(--ease),opacity .25s var(--ease),visibility .32s;
  }
  .hdr.open .nav{max-height:26rem;padding:.35rem 1rem 1rem;opacity:1;visibility:visible}
  .nav a{
    display:block;padding:.95rem .3rem;line-height:1.6;
    font-size:.98rem;color:var(--tx);
    border-bottom:1px solid var(--line);
  }
  .nav a:last-child{border-bottom:0}
}
@media(max-width:400px){
  .hdr__cta .btn{padding:.6em .8em;font-size:.8rem}
  .lang-btn{min-width:44px;min-height:44px}
}

/* ==========================================================================
   SEKSYEN
   ========================================================================== */
.section{padding-block:clamp(2.6rem,2rem + 2.6vw,4.5rem)}
.section--top{padding-top:clamp(1.5rem,1rem + 2vw,2.6rem)}
.sec-head{max-width:60ch;margin-bottom:clamp(1.4rem,1.1rem + 1.2vw,2.1rem)}
.sec-head p{color:var(--tx2);margin-top:.6rem;font-size:clamp(.95rem,.92rem + .22vw,1.05rem)}

/* ==========================================================================
   HERO
   ========================================================================== */
/* Grid hero eksplisit — elak baris tak selari & sel meregang */
.bento--hero{grid-template-columns:repeat(6,1fr);grid-template-rows:auto 1fr}
.bento--hero .c-hero {grid-column:1/5; grid-row:1/3}
.bento--hero .c-price{grid-column:5/7; grid-row:1/2}
.bento--hero .c-media{grid-column:5/7; grid-row:2/3}

.c-hero{
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(139,124,255,.10), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(86,207,225,.07), transparent 60%),
    var(--surface);
  min-height:clamp(300px,20rem + 8vw,410px);
}
.c-hero h1{margin-bottom:.7rem}
.c-hero h1 em{font-style:normal;color:var(--lime)}
.c-hero .lead{max-width:48ch;margin-bottom:1.5rem}
.pill{
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  background:var(--lime-soft);color:var(--lime);
  border:1px solid rgba(188,232,90,.22);
  padding:.35em .85em;border-radius:99px;
  font-size:.76rem;font-weight:700;letter-spacing:.04em;margin-bottom:1rem;
}

/* blok harga — satu-satunya blok terang besar */
.c-price{
  background:var(--lime);color:#14170c;
  display:flex;flex-direction:column;justify-content:center;
}
.c-price .num{font-size:clamp(2.3rem,1.6rem + 2.8vw,3.2rem);font-weight:900;
  letter-spacing:-.05em;line-height:.95}
.c-price .lbl{font-weight:700;font-size:.9rem;margin-top:.25rem}
.c-price .note{font-size:.76rem;line-height:1.45;margin-top:.7rem;color:#3b4420}

/* video diletak mutlak supaya saiz asalnya tidak menolak tinggi baris grid */
.c-media{padding:0;background:#0c0d12;min-height:190px}
.c-media img,.c-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.c-media__tag{
  position:absolute;left:.7rem;bottom:.7rem;
  background:rgba(15,16,20,.82);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:99px;
  padding:.3em .7em;font-size:.7rem;font-weight:600;color:var(--tx2);
}

/* mini stat */
.c-stat{display:flex;flex-direction:column;justify-content:center}
.c-stat .n{font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);font-weight:900;
  letter-spacing:-.04em;line-height:1}
.c-stat .t{color:var(--tx3);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.35rem}
.n--v{color:var(--violet)} .n--c{color:var(--cyan)} .n--l{color:var(--lime)}

/* jalur amanah */
.c-trust{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding-block:1rem;color:var(--tx2);font-size:.83rem;font-weight:600;
}
.c-trust span{display:inline-flex;align-items:center;gap:.4rem}
.c-trust b{color:var(--lime);font-weight:800}
@media(max-width:600px){ .c-trust{gap:.85rem;font-size:.78rem} }

/* ==========================================================================
   VS — cerita "kenapa tukar"
   ========================================================================== */
.c-vs h3{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.05rem}
.c-vs ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.c-vs li{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;
  line-height:1.5;color:var(--tx2)}
.c-vs li i{font-style:normal;flex:0 0 18px;height:18px;border-radius:50%;
  display:grid;place-items:center;font-size:.68rem;font-weight:800;margin-top:.15rem}
.c-vs--bad li i{background:rgba(255,122,138,.14);color:var(--rose)}
.c-vs--good li i{background:var(--lime-soft);color:var(--lime)}
.c-vs--good li{color:var(--tx)}
.c-vs--good b{color:var(--lime);font-weight:800}
.c-vs--bad{background:var(--surface-2)}
.c-vs--good{border-color:rgba(188,232,90,.25);
  background:linear-gradient(160deg,rgba(188,232,90,.06),transparent 60%),var(--surface)}

/* ==========================================================================
   MODEL
   ========================================================================== */
.model{display:flex;flex-direction:column;gap:.5rem;min-height:100%}
.model__top{display:flex;align-items:flex-start;gap:.5rem;justify-content:space-between}
.model__name{font-size:1rem}
.model__desc{color:var(--tx2);font-size:.87rem;line-height:1.5;flex:1}
.model__note{color:var(--tx3);font-size:.76rem;line-height:1.45}
.model__price{display:flex;align-items:baseline;gap:.4rem;margin-top:.5rem;
  padding-top:.75rem;border-top:1px solid var(--line)}
.model__price b{font-size:1.35rem;font-weight:900;letter-spacing:-.04em;color:var(--lime)}
.model__price span{font-size:.74rem;color:var(--tx3);font-weight:600}
.tags{display:flex;gap:.3rem;flex-wrap:wrap}
.tag{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.3em .55em;border-radius:6px;background:var(--surface-3);color:var(--tx2);
  border:1px solid var(--line)}
.tag--hot{background:rgba(255,122,138,.14);color:var(--rose);border-color:rgba(255,122,138,.22)}
.tag--new{background:rgba(86,207,225,.13);color:var(--cyan);border-color:rgba(86,207,225,.22)}
.tag--star{background:var(--lime-soft);color:var(--lime);border-color:rgba(188,232,90,.22)}
/* model unggulan — sedikit lebih terang, tak menjerit */
.model--feat{border-color:rgba(188,232,90,.28);
  background:linear-gradient(155deg,rgba(188,232,90,.07),transparent 55%),var(--surface)}

/* ==========================================================================
   IKON / KAD RINGKAS
   ========================================================================== */
.ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:1.15rem;background:var(--surface-3);border:1px solid var(--line);
  margin-bottom:.85rem}
.cell p.sm{color:var(--tx2);font-size:.87rem;line-height:1.5;margin-top:.35rem}

/* ==========================================================================
   LANGKAH
   ========================================================================== */
.step__n{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--lime);
  margin-bottom:.6rem;display:block}

/* ==========================================================================
   PAKEJ TOKEN
   ========================================================================== */
.pack{display:flex;flex-direction:column;justify-content:center;text-align:left}
.pack__name{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx3)}
.pack__price{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);font-weight:900;
  letter-spacing:-.045em;line-height:1.05;margin-top:.3rem}
.pack__tok{color:var(--tx2);font-size:.83rem;font-weight:600;margin-top:.15rem}
.pack__bonus{margin-top:.6rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  color:var(--lime);background:var(--lime-soft);border:1px solid rgba(188,232,90,.2);
  border-radius:7px;padding:.3em .55em;align-self:flex-start}
.pack--pop{border-color:rgba(188,232,90,.3);
  background:linear-gradient(155deg,rgba(188,232,90,.08),transparent 60%),var(--surface)}

/* Kad pakej kini <a> (dulu <div> mati — klik tiada apa berlaku).
   Reset gaya pautan supaya rupa kekal SAMA, cuma boleh diklik. */
a.pack{text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease}
a.pack:hover{transform:translateY(-3px)}
a.pack:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.pack__cta{margin-top:.7rem;font-size:.78rem;font-weight:800;color:var(--lime);
  display:flex;align-items:center;gap:.3em}
a.pack:hover .pack__cta{gap:.55em}
@media (prefers-reduced-motion:reduce){
  a.pack,a.pack:hover,.pack__cta{transition:none;transform:none}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;position:relative;
  font-weight:600;font-size:.96rem;line-height:1.45;color:var(--tx);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.35rem;
  width:9px;height:9px;border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 1.5rem 1.15rem 0;color:var(--tx2);font-size:.9rem;line-height:1.65}
.faq__a b{color:var(--lime);font-weight:700}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.c-cta{
  text-align:center;padding-block:clamp(2.2rem,1.8rem + 2vw,3.4rem);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(188,232,90,.10), transparent 60%),
    var(--surface);
  border-color:rgba(188,232,90,.2);
}
.c-cta p{color:var(--tx2);margin:.7rem auto 1.5rem;max-width:44ch}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{border-top:1px solid var(--line);padding-block:2.5rem 2rem;margin-top:1rem}
.ftr__grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){ .ftr__grid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.ftr h4{font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 .9rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.ftr a{color:var(--tx2);text-decoration:none;font-size:.88rem;
  transition:color .2s var(--ease);display:inline-block;padding:.45rem 0}
.ftr a:hover{color:var(--lime)}
.ftr__btm{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;
  color:var(--tx3);font-size:.8rem}
.muted{color:var(--tx2)}
.small{font-size:.86rem}

/* ==========================================================================
   REVEAL — lembut, tidak mengganggu
   ========================================================================== */
.rv{opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}
/* STAGGER 2026: kad masuk berturutan — delay ikut data-d="1..6" (60ms langkah).
   Kos CSS sahaja, GPU (transform/opacity), hormat reduced-motion. */
.rv[data-d="1"].in{transition-delay:.06s}
.rv[data-d="2"].in{transition-delay:.12s}
.rv[data-d="3"].in{transition-delay:.18s}
.rv[data-d="4"].in{transition-delay:.24s}
.rv[data-d="5"].in{transition-delay:.30s}
.rv[data-d="6"].in{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .rv[data-d].in{transition-delay:0s}
}

/* MODEL MARQUEE 2026: strip nama model bergerak perlahan bawah hero.
   Guna semula keyframes llm-scroll sedia ada — tiada JS, pause on hover. */
.model-strip{overflow:hidden;white-space:nowrap;
  border-block:1px solid var(--line);padding:.7rem 0;margin-top:1.2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.model-strip__track{display:inline-flex;align-items:center;gap:0;
  animation:llm-scroll 36s linear infinite;will-change:transform}
.model-strip:hover .model-strip__track{animation-play-state:paused}
.model-strip__item{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:700;color:var(--tx2);padding:0 1.4rem;
  border-right:1px solid var(--line)}
.model-strip__item b{color:var(--lime);font-weight:800}
.model-strip__item .tag{font-size:.62rem;font-weight:800;letter-spacing:.06em;
  color:#0b0e07;background:var(--lime);border-radius:99px;padding:.1rem .45rem}
@media(prefers-reduced-motion:reduce){ .model-strip__track{animation:none} }

/* fokus jelas untuk kebolehcapaian */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--lime);outline-offset:3px;border-radius:6px;
}

/* ==========================================================================
   RESPONSIF HERO — letak di akhir supaya mengatasi grid eksplisit
   ========================================================================== */
@media(max-width:900px){
  .bento--hero{grid-template-columns:repeat(4,1fr)}
  .bento--hero .c-hero {grid-column:1/5; grid-row:auto}
  .bento--hero .c-price{grid-column:1/3; grid-row:auto}
  .bento--hero .c-media{grid-column:3/5; grid-row:auto; min-height:210px}
}
@media(max-width:600px){
  .bento--hero{grid-template-columns:repeat(2,1fr)}
  .bento--hero .c-hero,
  .bento--hero .c-price,
  .bento--hero .c-media{grid-column:1/3; grid-row:auto}
  .bento--hero .c-media{min-height:200px}
  .bento--hero .c-hero{min-height:0}
}



/* ---------- kad model ---------- */
.model{display:flex;flex-direction:column;gap:.55rem;text-decoration:none;height:100%}
.bento--3{align-items:stretch}
.bento--3 > .model{align-self:stretch}
.model__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.model__name{font-size:1.05rem;margin:0;letter-spacing:-.01em}
.model__desc{font-size:.87rem;color:var(--tx2);line-height:1.6;margin:0}
.model__note{margin-bottom:.1rem}
.model__note{font-size:.76rem;color:var(--tx3);margin:0;font-style:italic}
.model__price{margin-top:auto;padding-top:.7rem;display:flex;align-items:baseline;gap:.4rem;
  border-top:1px solid var(--line)}
.model__price{flex-wrap:wrap}
.model__price b{font-family:var(--font-d);font-size:1.35rem;color:var(--lime);
  letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.model__price span{font-size:.75rem;color:var(--tx3);white-space:nowrap}
.model--feat{background:linear-gradient(150deg,rgba(188,232,90,.07),transparent 55%),var(--surface)}
.tags{display:flex;gap:.3rem;flex-wrap:wrap}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--tx3);white-space:nowrap}
.tag--hot{background:rgba(255,107,74,.14);border-color:rgba(255,107,74,.32);color:#ff9576}
.tag--new{background:rgba(188,232,90,.12);border-color:rgba(188,232,90,.3);color:var(--lime)}
.tag--star{background:rgba(139,124,255,.14);border-color:rgba(139,124,255,.3);color:#a99cff}

/* ---------- butang main video (jimat data mobile) ---------- */
.c-media{position:relative}
.c-media__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(12,13,18,.62);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .2s var(--ease),background .2s}
.c-media__play span{width:0;height:0;margin-left:4px;
  border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.c-media__play:hover,.c-media__play:focus-visible{transform:scale(1.07);background:rgba(12,13,18,.78)}
.c-media__play:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.c-media__play{transition:none}}

/* ---------- sasaran sentuh mesra jari (min 44px) ---------- */
@media (max-width:860px){
  .ftr ul a{display:inline-flex;align-items:center;min-height:44px}
  .hdr__cta .btn{min-height:44px}
  .brand{min-height:44px;display:inline-flex;align-items:center}
  .burger{width:44px;height:44px}
}
/* label kecil — naik sedikit supaya senang baca */
.eyebrow{font-size:.76rem}
.tag{font-size:.7rem}
.c-media__cap{font-size:.75rem}


/* ==========================================================================
   HERO CAROUSEL — auto-scroll kiri->kanan, gaya bento
   Ditambah 2026-09-09. Setiap slaid = SATU produk sahaja.
   ========================================================================== */
.hcar{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:var(--gap);
}
.hcar__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hcar__track::-webkit-scrollbar{display:none}

.hcar__slide{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:center;
  aspect-ratio:16/9;          /* gambar sentiasa PENUH, tak terpotong */
  min-width:0;
}
.hcar__slide img,
.hcar__slide video{
  width:100%;height:100%;
  object-fit:cover;           /* isi penuh frame, tiada jalur hitam */
  display:block;
}
/* lapisan gelap supaya teks senang baca */
.hcar__slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(15,16,20,.92) 0%,
    rgba(15,16,20,.72) 38%,
    rgba(15,16,20,.15) 72%,
    rgba(15,16,20,.35) 100%);
  pointer-events:none;
}
.hcar__slide--r::after{
  background:linear-gradient(270deg,
    rgba(15,16,20,.92) 0%,
    rgba(15,16,20,.72) 38%,
    rgba(15,16,20,.15) 72%,
    rgba(15,16,20,.35) 100%);
}

.hcar__body{
  position:absolute;z-index:2;
  top:50%;transform:translateY(-50%);
  left:clamp(1.1rem,1rem + 2.2vw,3rem);
  max-width:min(52%,30rem);
  display:flex;flex-direction:column;gap:.6rem;
  align-items:flex-start;
}
.hcar__slide--r .hcar__body{
  left:auto;right:clamp(1.1rem,1rem + 2.2vw,3rem);
  align-items:flex-start;text-align:left;
}
.hcar__tag{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.32em .8em;border-radius:99px;
  background:var(--lime-soft);color:var(--lime);
  border:1px solid rgba(188,232,90,.28);
}
.hcar__tag--v{background:rgba(139,124,255,.13);color:var(--violet);border-color:rgba(139,124,255,.3)}
.hcar__tag--c{background:rgba(86,207,225,.13);color:var(--cyan);border-color:rgba(86,207,225,.3)}
/* "Akan datang" — amber, bezakan dari model yang dah live */
.hcar__tag--soon{
  background:rgba(245,197,66,.13);color:#f5c542;border-color:rgba(245,197,66,.32);
}
.hcar__h{
  font-size:clamp(1.3rem,1rem + 2.1vw,2.4rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0;
  color:#fff;text-wrap:balance;
}
.hcar__h em{font-style:normal;color:var(--lime)}
.hcar__slide--v .hcar__h em{color:var(--violet)}
.hcar__slide--c .hcar__h em{color:var(--cyan)}
.hcar__slide--soon .hcar__h em{color:#f5c542}
.hcar__p{
  font-size:clamp(.84rem,.8rem + .28vw,1rem);
  color:var(--tx2);line-height:1.5;margin:0;
}
.hcar__price{
  font-size:clamp(1.05rem,.9rem + .7vw,1.5rem);
  font-weight:800;color:#fff;letter-spacing:-.03em;
}
.hcar__price span{font-size:.72em;font-weight:600;color:var(--tx2)}

/* kawalan */
.hcar__dots{
  position:absolute;z-index:3;left:50%;bottom:.85rem;transform:translateX(-50%);
  display:flex;gap:.42rem;
  background:rgba(15,16,20,.55);
  padding:.4rem .6rem;border-radius:99px;
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
}
.hcar__dot{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  border:none;background:rgba(255,255,255,.3);
  transition:background .3s var(--ease), width .3s var(--ease);
}
.hcar__dot[aria-selected="true"]{background:var(--lime);width:20px;border-radius:99px}
.hcar__dot:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.hcar__pause{
  position:absolute;z-index:3;right:.85rem;bottom:.85rem;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(15,16,20,.55);border:1px solid var(--line-2);
  color:var(--tx);font-size:.7rem;line-height:1;
  backdrop-filter:blur(8px);
  transition:background .25s var(--ease);
}
.hcar__pause:hover{background:rgba(15,16,20,.8)}
.hcar__pause:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* Butang panah kiri/kanan — kawalan manual untuk pengguna PC.
   Sebelum ni hanya ada butang jeda, jadi pelawat terpaksa tunggu
   auto-scroll 5 saat atau teka-teka klik dots. */
.hcar__nav{
  position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(15,16,20,.55);border:1px solid var(--line-2);
  color:var(--tx);font-size:1.05rem;line-height:1;
  backdrop-filter:blur(8px);
  transition:background .25s var(--ease),opacity .25s var(--ease);
  opacity:0;
}
.hcar__nav--prev{left:.85rem}
.hcar__nav--next{right:.85rem}
.hcar:hover .hcar__nav,
.hcar:focus-within .hcar__nav{opacity:1}
.hcar__nav:hover{background:rgba(15,16,20,.85)}
.hcar__nav:focus-visible{opacity:1;outline:2px solid var(--lime);outline-offset:2px}
/* Peranti sentuh: sentiasa nampak (tiada hover) */
@media(hover:none){
  .hcar__nav{opacity:1}
}

/* mobile: teks penuh lebar, gambar kekal 16:9 */
@media(max-width:780px){
  .hcar__slide::after,
  .hcar__slide--r::after{
    background:linear-gradient(180deg,
      rgba(15,16,20,.35) 0%,
      rgba(15,16,20,.72) 45%,
      rgba(15,16,20,.94) 100%);
  }
  .hcar__body{
    top:auto;bottom:2.6rem;transform:none;
    left:1.05rem;right:1.05rem;max-width:none;
  }
  .hcar__slide--r .hcar__body{left:1.05rem;right:1.05rem}
  .hcar__p{display:none}
  .hcar__dots{bottom:.6rem}
  .hcar__pause{bottom:.6rem;right:.6rem}
}

@media(prefers-reduced-motion:reduce){
  .hcar__track{scroll-behavior:auto}
}

/* ==========================================================================
   LLM MARQUEE — logo provider bergerak kiri→kanan, gaya bento
   Dua salinan trek diletak sebelah-menyebelah; animasi geser -50% lalu
   ulang. Sebab salinan kedua identik, gelung nampak tiada sambungan.
   ========================================================================== */
.llm-marquee{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  padding:1.15rem 0;
}
/* lengkung lembut di tepi — logo lesap, bukan terpotong */
.llm-marquee::before,.llm-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.llm-marquee::before{left:0;background:linear-gradient(90deg,var(--surface) 10%,transparent)}
.llm-marquee::after{right:0;background:linear-gradient(270deg,var(--surface) 10%,transparent)}

.llm-marquee__track{
  display:flex;align-items:center;width:max-content;
  animation:llm-scroll 32s linear infinite;
  will-change:transform;
}
/* Dua kumpulan identik bersebelahan. Setiap logo bawa margin-right sendiri
   (BUKAN `gap` pada trek) supaya lebar kumpulan-1 = tepat 50% scrollWidth.
   Kalau guna `gap`, jurang antara kumpulan buat translate -50% tersasar
   separuh gap dan gelung tersentak setiap pusingan. */
.llm-marquee__group{display:flex;align-items:center}
.llm-marquee__group > .llm-logo{margin-right:2.6rem}
/* jeda bila hover atau bila mana-mana logo difokus papan kekunci */
.llm-marquee:hover .llm-marquee__track,
.llm-marquee__track:focus-within{animation-play-state:paused}

@keyframes llm-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.llm-logo{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--tx2);font-weight:650;font-size:.95rem;white-space:nowrap;
  text-decoration:none;flex:0 0 auto;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.llm-logo:hover{color:var(--tx);border-color:var(--line-2);background:rgba(255,255,255,.045)}
.llm-logo:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.llm-logo svg{width:20px;height:20px;flex:0 0 auto;opacity:.85}
.llm-logo:hover svg{opacity:1}

@media(max-width:600px){
  .llm-marquee__track{animation-duration:24s}
  .llm-marquee__group > .llm-logo{margin-right:1.7rem}
  .llm-logo{font-size:.88rem;padding:.45rem .8rem}
  .llm-marquee::before,.llm-marquee::after{width:48px}
}

/* Hormat pengguna yang matikan animasi: berhenti, jangan gerak langsung.
   Kumpulan ke-2 disembunyikan supaya logo tak berulang dua kali. */
@media(prefers-reduced-motion:reduce){
  .llm-marquee__track{animation:none;width:auto;justify-content:center}
  .llm-marquee__group{flex-wrap:wrap;justify-content:center;gap:.7rem}
  .llm-marquee__group > .llm-logo{margin-right:0}
  .llm-marquee__group[aria-hidden="true"]{display:none}
  .llm-marquee::before,.llm-marquee::after{display:none}
}

/* ==========================================================================
   POLISH — hero entrance + CTA shine
   CSS sahaja, GPU (transform/opacity), hormat prefers-reduced-motion.
   ========================================================================== */
@keyframes hero-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.c-hero .pill,
.c-hero h1,
.c-hero .lead,
.c-hero .btn-row{
  animation:hero-in .55s var(--ease) both;
}
.c-hero .pill{animation-delay:.05s}
.c-hero h1{animation-delay:.15s}
.c-hero .lead{animation-delay:.28s}
.c-hero .btn-row{animation-delay:.4s}

.btn--primary{
  position:relative;overflow:hidden;
  transition:transform .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),box-shadow .25s var(--ease);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-115%);transition:transform .7s var(--ease);
}
.btn--primary:hover{box-shadow:0 6px 24px rgba(188,232,90,.28)}
.btn--primary:hover::after{transform:translateX(115%)}

@media(prefers-reduced-motion:reduce){
  .c-hero .pill,.c-hero h1,.c-hero .lead,.c-hero .btn-row{animation:none}
  .btn--primary::after{display:none}
}