/* ============================================================
nakhibah.com.my — Stylesheet utama
Tukar warna jenama dalam LAPISAN 1 sahaja.
============================================================ */
/* ============ LAPISAN 1 — TOKEN JENAMA. TUKAR DI SINI SAHAJA ============ */
:root{
--brand-deep:#0F4C4A;
--brand-deeper:#0C3B3A; /* pentas gelap utama */
--brand-deep-2:#0D413F; /* ton berselang. Beza luminan sengaja kecil,
ikut kadar hibahku.my supaya sempadan seksyen
tidak kelihatan sebagai jalur. */
--brand:#177E76;
--brand-soft:#2E9C93;
--brand-tint:#E8F2F0;
--brand-tint-2:#F4F9F8;
--gold:#F0B429;
--gold-dark:#D89A12;
--ink:#12211F;
--alert:#C1121F;
--alert-tint:#FDEDEE;
--bad:#FF9B9B; /* status merah atas latar gelap */
--ok:#6FE3C4; /* status hijau atas latar gelap */
/* ============ LAPISAN 2 — STRUKTUR. JANGAN SENTUH ============ */
--body:#3A4C4A;
--muted:#68807D;
--line:#DCE7E5;
--line-strong:#C3D6D3;
--white:#fff;
--r:14px;
--r-lg:22px;
--r-pill:999px;
--sh-sm:0 2px 10px rgba(15,76,74,.06);
--sh:0 10px 34px rgba(15,76,74,.10);
--sh-lg:0 24px 60px rgba(15,76,74,.16);
--ease:cubic-bezier(.25,.46,.45,.94);
--maxw:1280px;
/* Skala jarak menegak. Bekas kini sampai 1600px, jadi jarak lama
(28-42px) terlalu ketat. Jarak mesti membesar seiring lebar,
kalau tidak halaman nampak sesak walaupun ada banyak ruang. */
--gap-blok:clamp(38px,4.6vw,76px); /* antara blok besar dlm seksyen */
--gap-dlm:clamp(22px,2.6vw,38px); /* dalam satu blok */ /* bekas seksyen. Teks ada had sendiri
(660-820px), jadi melebar hanya beri
ruang kepada grid, kad dan jadual. */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px;-webkit-text-size-adjust:100%}
body{font-family:'Poppins',system-ui,-apple-system,sans-serif;background:var(--white);color:var(--body);line-height:1.72;font-size:16.5px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--ink);line-height:1.24;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5.2vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin-bottom:1rem}
strong{color:var(--ink);font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* Latar lalai WAJIB. Tanpa ini seksyen jadi lut sinar dan foto hero
yang statik akan menembus dari belakang. */
.sec{padding:clamp(64px,7.5vw,132px) 0;background:var(--white)}
.sec--tint{background:var(--brand-tint)}
.sec--tint2{background:var(--brand-tint-2)}
.sec--deep{background:var(--brand-deep);color:rgba(255,255,255,.86)}
.sec--deep h2,.sec--deep h3{color:#fff}
.center{text-align:center}
.lede{font-size:clamp(1rem,1.6vw,1.14rem);max-width:660px}
.center .lede{margin-left:auto;margin-right:auto}
/* label */
.label{display:inline-flex;align-items:center;gap:8px;background:rgba(23,126,118,.1);color:var(--brand);
border:1px solid rgba(23,126,118,.22);padding:7px 16px;border-radius:var(--r-pill);
font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px}
.sec--deep .label{background:rgba(255,255,255,.1);color:#9FE0D8;border-color:rgba(255,255,255,.2)}
.label--alert{background:var(--alert-tint);color:var(--alert);border-color:rgba(193,18,31,.22)}
/* butang — EMAS HANYA UNTUK TINDAKAN */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
background:var(--gold);color:var(--ink);font-weight:700;font-size:1rem;
padding:16px 34px;border-radius:var(--r-pill);text-decoration:none;border:none;cursor:pointer;
box-shadow:0 8px 24px rgba(240,180,41,.34);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
font-family:inherit;text-align:center}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(240,180,41,.44);background:var(--gold-dark)}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42);box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;box-shadow:none}
/* Butang penuh lebar kad 1320px terlalu panjang. Sasaran klik yang
melebihi lebar bacaan selesa terasa seperti bar, bukan butang. */
.btn--wide{width:100%;max-width:620px;margin-left:auto;margin-right:auto;display:flex}
/* ============ NAV — satu bar, gaya landing page ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:13px 0;
transition:background .32s var(--ease),box-shadow .32s var(--ease),
padding .32s var(--ease),transform .34s var(--ease)}
.nav.stuck{background:rgba(15,76,74,.94);backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 6px 26px rgba(0,0,0,.20);padding:8px 0}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;
display:flex;align-items:center;gap:14px}
/* logo */
/* Jarak mark ke teks guna margin pada .logo-mark, BUKAN gap pada .logo.
gap merenggangkan SETIAP pasangan item flex bersebelahan, dan teks
bogel yang bukan dalam elemen akan jadi item flex tanpa nama. Logo
footer ditulis .logo-mark + "nakhibah" + .com.my, jadi
ia 3 item flex, bukan 2, dan gap:10px terpakai sekali lagi di antara
"nakhibah" dengan ".com.my". Diukur: jurang 10.0px dalam footer,
0.0px dalam nav (nav ada pembalut .logo-txt, jadi 2 item sahaja).
margin-right pada mark menyatakan niat sebenar, iaitu jarak mark ke
teks, dan ia kebal terhadap bilangan nod teks yang mengikutinya. */
.logo{display:flex;align-items:center;text-decoration:none;font-weight:800;
font-size:1.16rem;color:#fff;letter-spacing:-.02em;flex:none}
.logo-mark{width:38px;height:38px;flex:none;display:grid;place-items:center;margin-right:10px;
color:var(--gold);transition:transform .3s var(--ease)} /* SVG guna fill:currentColor */
.logo-mark img{width:100%;height:100%;display:block}
.logo:hover .logo-mark{transform:scale(1.08) rotate(-4deg)}
.logo-txt{white-space:nowrap;transition:opacity .28s var(--ease),max-width .32s var(--ease)}
/* Sasar .com.my TERUS, jangan guna `.logo span`.
`.logo span` ialah pemilih keturunan, jadi ia kena SEMUA span dalam
logo, termasuk pembalut .logo-txt dalam nav index. Kesannya nav
kuning sepenuhnya (diukur: .logo-txt computed color rgb(240,180,41))
sedangkan footer putih + kuning, sebab footer tiada pembalut itu.
Dua struktur markup, satu pemilih, dua rupa berbeza.
.logo-mark tidak perlu disebut di sini. Ia sudah ada
color:var(--gold) dalam rulenya sendiri di atas. */
.logo-dot{color:var(--gold)}
/* dua laluan — muncul lepas kad fork */
.nav-paths{display:flex;gap:7px;margin:0 auto;
opacity:0;visibility:hidden;transform:translateY(-7px);
transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s}
.nav.dalam .nav-paths{opacity:1;visibility:visible;transform:none}
.nav-paths a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
text-decoration:none;font-size:.83rem;font-weight:600;color:rgba(255,255,255,.72);
padding:7px 15px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.16);
transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)}
/* Hanya emoji, bukan label. Pil kini ada span label untuk versi
panjang dan pendek, dan .9em pada label akan mengecilkannya. */
.nav-paths a span[aria-hidden]{font-size:.9em;line-height:1}
.nav-paths a:hover{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.nav-paths a.on{color:var(--brand-deep);background:#fff;border-color:#fff}
/* CTA + titik hidup */
.nav-cta{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--ink);
padding:10px 22px;border-radius:var(--r-pill);text-decoration:none;font-weight:700;
font-size:.88rem;white-space:nowrap;flex:none;margin-left:auto;
box-shadow:0 4px 16px rgba(240,180,41,.3);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.nav-cta:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 8px 22px rgba(240,180,41,.42)}
.nav-cta-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-deep);flex:none;position:relative}
.nav-cta-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
background:var(--brand-deep);animation:denyut 2.4s var(--ease) infinite}
@keyframes denyut{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.9);opacity:0}}
.t-pendek{display:none}
/* garis kemajuan bacaan */
.nav-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;
background:var(--gold);transform:scaleX(0);transform-origin:left;
opacity:0;transition:opacity .3s var(--ease)}
.nav.stuck .nav-prog{opacity:1}
/* ============ HERO ============ */
.hero{position:relative;background:var(--brand-deep);color:rgba(255,255,255,.8);
padding:clamp(132px,15vw,168px) 0 clamp(84px,10vw,120px);overflow:hidden;isolation:isolate}
/* ---- Latar hero berlapis ----
Susunan dari bawah ke atas:
1. foto (.hero-photo)
2. wash teal rata 62% <- buang nada panas, jadikan foto milik jenama
3. cahaya jenama
4. vignet 18% dari tengah <- teks di tengah, tarik mata ke dalam
5. pepejal ke --brand-deeper 230px terakhir <- jahitan fork
Nilai wash dan vignet BUKAN agakan. Ia disimulasi piksel demi piksel
pada foto sebenar, zon teks tengah. Terburuk 5.22:1, purata 10.72:1.
Kalau foto ditukar, kira semula sebelum turunkan nilai ini. */
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;z-index:0;
object-fit:cover;object-position:center 38%}
/* ialah inline secara lalai, jadi ia menjana kotak baris kosong
dalam .hero-bg. Jadikan block supaya tiada baris hantu. di dalamnya
kekal absolute terhadap .hero-bg, bukan terhadap . */
.hero-bg picture{display:block}
/* z-index WAJIB. ::before ialah anak pertama, jadi yang datang
selepasnya akan melukis DI ATAS wash tanpa ini. */
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;
background:
linear-gradient(to bottom,transparent calc(100% - 230px),var(--brand-deeper) 100%),
radial-gradient(140% 100% at 50% 50%,transparent 34%,rgba(12,59,58,.18) 100%),
radial-gradient(760px 520px at 78% 6%,rgba(46,156,147,.24),transparent 58%),
linear-gradient(rgba(12,59,58,.68),rgba(12,59,58,.68))}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:2;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-wrap{display:block;text-align:center}
.hero-copy{max-width:100%;margin:0 auto}
/* tajuk: sans tegas + serif kontra */
.hero h1{color:#fff;margin-bottom:22px;letter-spacing:-.038em;line-height:1.04;
font-size:clamp(2.4rem,7.2vw,5.5rem);font-weight:700}
.hero h1 em{display:block;font-family:'Instrument Serif',Georgia,serif;
font-style:italic;font-weight:400;color:var(--gold);
font-size:clamp(2.55rem,7.6vw,5.8rem);line-height:1.02;letter-spacing:-.02em;margin-top:.1em;
text-shadow:0 0 30px rgba(240,180,41,.18)}
/* ---- Huruf naik ke tempatnya, satu demi satu ----
PERKATAAN dibalut span berasingan daripada HURUF. Sebabnya:
1. transform TIDAK berkesan pada elemen inline. Setiap huruf perlu
inline-block untuk boleh dianjak.
2. Tetapi kalau RUANG antara perkataan turut jadi inline-block,
pembalutan baris jadi pelik. Jadi ruang dibiarkan sebagai nod
teks biasa, dan setiap perkataan dibalut inline-block sendiri
supaya ia membalut sebagai satu unit yang utuh.
Huruf bermula .58em di bawah, condong sedikit, dan telus. Ia tiba
dengan easing yang menghabiskan lajunya di hujung, jadi ia terasa
mendarat, bukan berhenti mendadak.
Selang 26ms. Baris ini 52 huruf, jadi seluruh baris selesai dalam
lebih kurang 2.0 saat. Lebih perlahan dan pengguna mula membaca
sebelum ia siap.
transform dan opacity sahaja, jadi tiada anjakan susun atur. */
.hero h1 em .kata{display:inline-block}
.hero h1 em .hrf{display:inline-block;
animation:huruf-naik .72s cubic-bezier(.16,.84,.28,1) both;
animation-delay:calc(var(--i) * 26ms)}
@keyframes huruf-naik{
from{opacity:0;transform:translateY(.58em) rotate(5deg) scale(.94)}
to {opacity:1;transform:none}
}
.hero-lede{font-size:clamp(1rem,1.55vw,1.16rem);color:rgba(255,255,255,.68);
margin:0 auto 36px;max-width:760px;line-height:1.62;letter-spacing:.005em}
.hero-lede b{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
color:#fff;font-size:1.22em;letter-spacing:-.01em}
.hero-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
/* ============================================================
GAYA PREMIUM — .pcard
Kad asas untuk SEMUA seksyen seterusnya. Formula tetap:
nombor hantu > ikon stroke > tajuk > satu baris serif > sub kecil
> meta > pautan
Jangan tambah perenggan panjang dalam .pcard. Kalau perlu terangkan
lebih, guna .pcard-sub satu ayat sahaja.
============================================================ */
.pcard{position:relative;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(28px,3.4vw,38px) clamp(26px,3vw,34px) clamp(24px,3vw,30px);
box-shadow:0 18px 44px rgba(15,76,74,.09);
transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease)}
.pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--brand),var(--gold));
transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.pcard:hover{transform:translateY(-8px);box-shadow:0 34px 72px rgba(15,76,74,.16);border-color:transparent}
.pcard:hover::before{transform:scaleX(1)}
/* nombor hantu */
.pcard-num{position:absolute;top:14px;right:22px;font-size:4.6rem;font-weight:800;
line-height:1;letter-spacing:-.05em;color:var(--brand);opacity:.055;pointer-events:none}
/* ikon stroke, bukan emoji */
.pcard-ico{width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;
background:var(--brand-tint);color:var(--brand);margin-bottom:22px;
transition:background .38s var(--ease),color .38s var(--ease)}
.pcard-ico svg{width:26px;height:26px;display:block}
.pcard:hover .pcard-ico{background:var(--brand);color:#fff}
.pcard h3{font-size:clamp(1.22rem,1.9vw,1.5rem);letter-spacing:-.025em;margin-bottom:9px}
/* satu baris tajam, penekanan guna serif kontra */
.pcard-line{font-size:clamp(1.16rem,1.9vw,1.42rem);color:var(--ink);font-weight:600;
letter-spacing:-.02em;line-height:1.28;margin-bottom:12px}
.pcard-line em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
color:var(--brand);font-size:1.12em;letter-spacing:-.01em}
/* 500, bukan 600. Poppins 400/500/600 semuanya dimuat, jadi tiada faux
bold pada mana-mana pilihan. 500 diukur menambah liputan dakwat 17%
berbanding 400, sementara 600 hanya menambah 20%, iaitu 3 mata lagi
untuk berat yang jauh lebih ketara. 600 juga sama dengan berat
.pcard-line, dan baris itu sepatutnya menonjol lebih daripada sub. */
.pcard-sub{font-size:.93rem;font-weight:500;color:var(--muted);line-height:1.6;margin-bottom:20px;flex:1}
/* Pembalut bila ada lebih satu pil, cth Rumah / Tanah / Saham */
.pcard-metas{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;margin-bottom:22px}
.pcard-metas .pcard-meta{margin-bottom:0}
.pcard-meta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
font-size:.78rem;font-weight:600;color:var(--brand);letter-spacing:.01em;
background:var(--brand-tint);border-radius:var(--r-pill);padding:7px 15px;margin-bottom:22px}
.pcard-meta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}
.pcard-go{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:700;
color:var(--ink);padding-top:18px;border-top:1px solid var(--line);margin-top:auto}
.pcard-go svg{width:17px;height:17px;transition:transform .34s var(--ease)}
.pcard:hover .pcard-go{color:var(--brand)}
.pcard:hover .pcard-go svg{transform:translateX(5px)}
/* ============ FORK CARDS ============ */
/* Kad kaca. Meluncur atas foto hero yang statik, jadi ia perlu
backdrop-filter supaya foto di belakang kelihatan kabur, bukan
terpotong. Garis inset di atas memberi tepi cahaya pada kaca. */
/* Imej latar disimpan dalam --kad-img, bukan ditulis terus dalam rule
ini. Sebabnya :hover di bawah menukar lapisan kilau, dan setiap kali
background-image ditulis semula ia mesti menyenaraikan SEMUA lapisan.
Tanpa pembolehubah, URL kena diulang dalam setiap keadaan hover dan
satu hari nanti salah satu akan terlupa dikemas kini.
Susunan lapisan: kilau kaca DI ATAS, imej DI BAWAH. Dalam
background-image lapisan pertama ialah yang paling hadapan.
background ditukar kepada background-image. Shorthand `background`
menetapkan semula background-size dan background-position kepada
nilai awal, jadi ia akan memadam `cover` yang ditetapkan di sini. */
.fork .pcard{
background-image:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035)),var(--kad-img,none);
background-size:cover;background-position:center;background-repeat:no-repeat;
border:1px solid rgba(255,255,255,.13);
box-shadow:0 30px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.15);
backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.fork .pcard:hover{
background-image:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05)),var(--kad-img,none);
border-color:rgba(255,255,255,.24);
box-shadow:0 44px 92px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.2)}
/* Subjek dalam kedua-dua imej duduk di kanan, lebih kurang 53% hingga
98% lebar. Ruang teal kosong di kiri sengaja, itu tempat teks. */
.pcard--takaful{--kad-img:url(/assets/img/card-takaful.webp)}
.pcard--hibah{--kad-img:url(/assets/img/card-hibah.webp)}
.fork .pcard-num{color:#fff;opacity:.06}
.fork .pcard-ico{background:rgba(255,255,255,.08);color:var(--ok)}
.fork .pcard:hover .pcard-ico{background:var(--ok);color:var(--brand-deeper)}
.fork .pcard h3{color:#fff}
.fork .pcard-line{color:#fff}
.fork .pcard-line em{color:var(--gold)}
/* .82, naik daripada .6. Diukur atas imej latar sebenar dengan imbasan
1px: pada .6 median kontras dalam zon teal kosong ialah 3.39 (kad1)
dan 3.28 (kad2), kedua-duanya bawah ambang 4.5 untuk teks badan.
Pada .82 ia jadi 4.85 dan 4.65, kedua-dua lepas.
Titik TERBURUK tetap tidak bergerak (1.21 naik ke 1.29 sahaja).
Titik itu jatuh betul-betul atas kilauan cerah buku, dan putih atas
benda cerah tidak boleh dibaiki dengan menambah putih. Itu kena
dibetulkan dalam imej, bukan di sini. */
.fork .pcard-sub{color:rgba(255,255,255,.82)}
.fork .pcard-meta{background:rgba(111,227,196,.12);color:var(--ok)}
.fork .pcard-meta::before{background:var(--ok)}
.fork .pcard-go{color:#fff;border-top-color:rgba(255,255,255,.13)}
.fork .pcard:hover .pcard-go{color:var(--ok)}
/* padding-top ditambah supaya kad tidak melekat pada tepi atas helaian.
Helaian ini ada sudut bulat dan garis cahaya .fork::before di puncak,
dan tanpa ruang atas, kad bermula betul-betul pada garis itu.
Lebih kecil daripada padding-bawah (56 lawan 88) dengan sengaja.
Bahagian bawah perlu lebih sebab ia memisahkan seksyen ini daripada
seksyen berikutnya, sementara bahagian atas cuma perlu memberi kad
ruang bernafas daripada tepi helaian.
.fork::before tidak terjejas. Ia position:absolute top:0, jadi ia
kekal pada tepi helaian, bukan teranjak bersama padding. */
.fork{background:var(--brand-deeper);
padding-top:clamp(36px,4.5vw,56px);
padding-bottom:clamp(56px,7vw,88px)}
.fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;
max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* ============ TUDUNG TEAL — guna semula ============
Letak .veil-top pada mana-mana seksyen TERANG yang datang tepat
selepas seksyen GELAP. Ia sambungkan warna, bukan potong.
==================================================== */
.veil-top{position:relative}
.veil-top::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;
pointer-events:none;
background:linear-gradient(to bottom,
rgba(12,59,58,.13),rgba(12,59,58,.045) 46%,rgba(12,59,58,0))}
.veil-top>*{position:relative}
/* ============ STATLINE — angka bukti, tiada kotak ============ */
.statline-sec{background:var(--brand-deep-2);
padding-top:clamp(46px,5vw,66px);padding-bottom:clamp(46px,5vw,66px)}
.statline{display:grid;grid-template-columns:repeat(4,1fr)}
.statline-item{padding:4px 32px;border-left:1px solid rgba(255,255,255,.12)}
.statline-item:first-child{border-left:none;padding-left:0}
.statline .sv{display:block;font-size:clamp(2.1rem,3.6vw,3rem);font-weight:800;color:#fff;
letter-spacing:-.045em;line-height:1;margin-bottom:8px}
.statline .sv i{font-style:normal;color:var(--gold)}
.statline .sl{font-size:.83rem;color:rgba(255,255,255,.55);line-height:1.5;display:block}
/* ============ PAUSE ============ */
.pause{background:var(--brand-deeper);position:relative;overflow:hidden}
.pause::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 50% 0%,rgba(46,156,147,.34),transparent 65%)}
.pause-in{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center}
.pause-q{font-size:clamp(1.3rem,2.9vw,1.95rem);color:#fff;font-weight:700;line-height:1.42;margin-bottom:20px;letter-spacing:-.02em}
.pause-q em{display:block;margin-top:.24em;font-family:'Instrument Serif',Georgia,serif;
font-style:italic;font-weight:400;color:var(--gold);font-size:1.16em;letter-spacing:-.015em}
.pause-in p{color:rgba(255,255,255,.7);font-size:1.02rem;max-width:640px;margin-left:auto;margin-right:auto}
/* Blok penutup: rumusan dua laluan. Garis rambut di atas memisahkannya
daripada perenggan penerangan tanpa perlu kotak. */
.pause-close{margin-top:clamp(30px,4vw,42px);padding-top:clamp(26px,3.4vw,34px);
position:relative;color:#fff!important;max-width:none!important;
font-size:clamp(1.12rem,1.9vw,1.42rem);font-weight:600;letter-spacing:-.02em;line-height:1.4}
.pause-close::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
width:min(280px,60%);height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)}
.pause-close .plus{display:inline-block;color:var(--gold);font-weight:700;
margin:0 .18em;transform:translateY(-.04em)}
.pause-close em{display:block;margin-top:.3em;font-family:'Instrument Serif',Georgia,serif;
font-style:italic;font-weight:400;color:var(--gold);
font-size:1.28em;letter-spacing:-.015em;line-height:1.16}
/* ============ STORY ============ */
/* Kad Story isi penuh bekas supaya grid gambar sejajar dengan
tepinya. Sebelum ini kad 800px sedangkan grid 1236px, jadi gambar
tersembul keluar dan tepi kad terpotong di belakangnya.
Teks di dalamnya dihadkan berasingan, lihat .story-teks. */
.story{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(30px,3.2vw,44px);box-shadow:0 18px 44px rgba(15,76,74,.08);
max-width:100%;margin:0 auto}
/* Lajur teks sempit di tengah kad lebar. Baris teks yang merentang
1150px tidak boleh dibaca dengan selesa. */
.story .label,
.story .quote,
.story .story-turn,
.story .story-end{max-width:840px;margin-left:auto;margin-right:auto}
/* .label ialah inline-flex, jadi margin:auto di atas tidak menengahkannya.
Margin auto hanya berkesan pada kotak peringkat blok. Ditukar kepada
flex dengan lebar mengikut kandungan supaya ia jadi blok yang boleh
ditengahkan, tanpa merentang penuh 840px. */
.story .label{display:flex;width:max-content;max-width:100%}
/* petikan premium — serif besar, tiada tanda petik grafik */
.quote{margin:8px 0 26px;padding-left:22px;border-left:2px solid var(--gold)}
.quote p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
font-size:clamp(1.4rem,2.9vw,2rem);line-height:1.26;color:var(--ink);letter-spacing:-.015em;margin-bottom:12px}
.quote cite{font-style:normal;font-size:.85rem;color:var(--muted);letter-spacing:.02em}
.story-turn{font-size:clamp(1.1rem,1.9vw,1.32rem);font-weight:600;color:var(--ink);
letter-spacing:-.02em;margin-bottom:24px}
.story-turn em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
color:var(--brand);font-size:1.14em}
/* ============================================================
GRID GAMBAR MASALAH
Port dari .problem-grid hibahku.my. Kad mula bertaburan
(skala + putar + anjak), kemudian meletup masuk ke kedudukan
bila grid masuk viewport. Berulang setiap kali masuk.
NOTA: hibahku.my terlepas position:relative pada kad, jadi
kapsyen absolute di sana bergantung pada keadaan :hover.
Di sini ia ditetapkan betul dari awal.
============================================================ */
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
align-items:start; /* jangan regangkan kad ikut tinggi baris */
overflow:visible;margin-bottom:var(--gap-blok)}
/* Nisbah 1:1 diletak pada KAD, bukan pada .
Kalau nisbah diletak pada , tinggi kad bergantung pada saiz
intrinsik anak dan boleh diregangkan oleh grid. Dengan nisbah pada
kad dan mengisi secara absolute, kad dijamin sentiasa segi empat
sama tanpa mengira kelakuan grid atau keadaan muat turun gambar. */
.problem-img-card{position:relative;aspect-ratio:1/1;
border-radius:var(--r);overflow:hidden;cursor:pointer;
opacity:0;will-change:transform,opacity;
transition:opacity .7s cubic-bezier(.34,1.56,.64,1),
transform .7s cubic-bezier(.34,1.56,.64,1)}
.problem-img-card img{position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;display:block}
/* kedudukan mula: bertaburan */
.prob-1{transform:scale(1) translateX(-80px) rotate(-5deg)}
.prob-2{transform:scale(.6) translateY(80px) rotate(3deg)}
.prob-3{transform:scale(.6) translateY(80px) rotate(-3deg)}
.prob-4{transform:scale(.6) translateX(80px) rotate(5deg)}
.problem-img-card.explode-in{opacity:1;transform:scale(1) translate(0,0) rotate(0deg)}
.problem-img-card.explode-in:hover{transform:scale(1.06)!important;
transition:transform .28s ease-out!important;z-index:10}
.problem-caption{position:absolute;left:0;right:0;bottom:0;
background:linear-gradient(to top,rgba(6,32,31,.94) 0%,rgba(6,32,31,.62) 58%,transparent 100%);
padding:26px 15px 15px;display:flex;flex-direction:column;gap:6px;
transform:translateY(100%);opacity:0;
transition:transform .35s var(--ease),opacity .35s var(--ease)}
.problem-img-card:hover .problem-caption{transform:translateY(0);opacity:1}
.problem-caption strong{font-size:.95rem;font-weight:700;color:#fff;line-height:1.3;letter-spacing:-.015em}
.problem-caption span{font-size:.79rem;color:rgba(255,255,255,.84);line-height:1.55}
/* ---- Story jadi full-bleed pada desktop ----
Kad putih di atas seksyen putih memang tidak kelihatan pun, jadi
sempadan, bayang dan sudut bulatnya dibuang terus. Yang tinggal
ialah kandungan yang merentang seluruh lebar skrin.
Teks kekal 840px di tengah. Grid gambar dihadkan 1600px supaya
pada monitor sangat lebar ia tidak jadi terlalu besar. */
@media(min-width:901px){
.story{
/* Full-bleed guna MARGIN sahaja, bukan transform.
.story ada kelas .rv, dan .rv.in menetapkan transform:none.
Itu akan membatalkan translateX(-50%) dan menolak kandungan
50% ke kanan sehingga melimpah keluar skrin. */
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
max-width:none;background:transparent;border:none;
border-radius:0;box-shadow:none;
padding:0 clamp(20px,1.8vw,34px)} /* gutter halaman ialah 22px,
jadi ini tidak boleh lebih
sempit daripada sebelumnya */
.story .problem-grid{
margin-top:clamp(30px,3.4vw,42px);
max-width:1600px;margin-left:auto;margin-right:auto}
}
.story-end{font-size:1rem;color:var(--body);margin-bottom:0;line-height:1.65}
/* ============ PAIN ============ */
.sec-head{margin-bottom:clamp(30px,4vw,44px)}
.sec-head h2{letter-spacing:-.03em}
/* ============ TRACK ============ */
.track-head{display:flex;align-items:flex-start;gap:22px;margin-bottom:var(--gap-blok);flex-wrap:wrap}
.track-num{width:58px;height:58px;border-radius:17px;flex:none;display:grid;place-items:center;
font-size:1.2rem;font-weight:800;letter-spacing:-.03em;
background:var(--brand);color:#fff;box-shadow:0 12px 28px rgba(23,126,118,.3)}
.track-head-txt{flex:1;min-width:270px}
.track-head-txt h2{margin-bottom:10px;letter-spacing:-.035em}
.track-line{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:600;color:var(--ink);
letter-spacing:-.025em;line-height:1.3;margin-bottom:14px}
.track-line em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
color:var(--brand);font-size:1.13em;letter-spacing:-.01em}
/* ---- Tanda rakan berdaftar ----
Logo SVG guna fill:currentColor, jadi warnanya datang dari CSS.
Fail asal putih #FDFDFD, direka untuk latar gelap. Kalau dibiar
begitu ia langsung tak kelihatan atas latar tint cerah di sini. */
/* display:flex + width:max-content menjadikannya kotak peringkat blok
yang mengecil ikut kandungan, jadi margin:auto boleh menengahkannya.
Sebagai inline-flex, margin:auto diabaikan terus. */
.lic-partner{display:flex;width:max-content;max-width:100%;
align-items:center;gap:clamp(14px,1.6vw,20px);
margin:6px auto 0;padding:12px clamp(16px,1.8vw,22px) 12px clamp(14px,1.6vw,18px);
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 4px 14px rgba(15,76,74,.06)}
.lic-partner-logo{height:34px;width:auto;flex:none;color:var(--brand-deep)}
.lic-partner-txt{display:flex;flex-direction:column;gap:2px;text-align:left;
padding-left:clamp(14px,1.6vw,20px);border-left:1px solid var(--line)}
.lic-partner-txt strong{font-size:.88rem;font-weight:700;color:var(--ink);
letter-spacing:-.015em;line-height:1.3}
.lic-partner-txt span{font-size:.78rem;color:var(--muted);line-height:1.45}
@media(max-width:560px){
/* Bila ia bertindan, pembahagi bertukar dari menegak ke mendatar dan
kad jadi selebar bekas. Rata kiri dalam kotak selebar itu nampak
tersasar, jadi logo dan teks ditengahkan sekali.
text-align:center perlu ditulis di sini sebab .lic-partner-txt
menetapkan text-align:left secara terus di luar media query. */
.lic-partner{flex-direction:column;align-items:center;gap:12px}
.lic-partner-txt{padding-left:0;border-left:none;text-align:center;
padding-top:12px;border-top:1px solid var(--line);width:100%}
}
.lic-badge{display:inline-flex;align-items:center;gap:9px;background:transparent;
border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:7px 16px;
font-size:.78rem;color:var(--muted);font-weight:500}
.lic-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}
/* brandwall */
.brandwall{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(26px,2.6vw,40px);box-shadow:0 14px 36px rgba(15,76,74,.07);margin-bottom:var(--gap-blok)}
.brandwall-top{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,3.4vw,44px);
align-items:start;margin-bottom:var(--gap-dlm)}
.brandwall-copy h3{font-size:clamp(1.24rem,2.1vw,1.62rem);letter-spacing:-.03em;
line-height:1.24;margin-bottom:14px}
.brandwall-copy p{font-size:.95rem;color:var(--body);margin:0 0 12px;line-height:1.66;max-width:52ch}
.brandwall-kicker{font-size:1.02rem!important;font-weight:600;color:var(--ink)!important;
letter-spacing:-.02em;line-height:1.35;margin-top:18px!important;margin-bottom:0!important;
padding-top:16px;border-top:1px solid var(--line)}
.brandwall-kicker em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
font-weight:400;color:var(--brand);font-size:1.2em;letter-spacing:-.015em}
/* Blok nombor. Dipisah dengan garis rambut, bukan kotak, supaya ia
dibaca sebagai nota sokongan dan bukan bersaing dengan tajuk. */
.brandwall-num{padding-left:clamp(20px,2.6vw,32px);border-left:1px solid var(--line)}
.brandwall-num .cnt{display:block;font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:800;
color:var(--brand);letter-spacing:-.05em;line-height:1}
.cnt-lbl{display:block;font-size:.94rem;font-weight:600;color:var(--ink);
letter-spacing:-.01em;margin-top:6px}
.cnt-note{display:block;font-size:.78rem;color:var(--muted);line-height:1.55;margin-top:12px}
/* marquee operator — corak sama dgn ProIndemnity, token nakhibah */
.mq{overflow:hidden;margin-top:4px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;align-items:center;width:max-content;animation:mq-scroll 46s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-item{flex:none;height:52px;display:flex;align-items:center;justify-content:center;gap:9px;
margin-right:clamp(14px,2vw,26px);padding:0 22px;white-space:nowrap;
background:var(--brand-tint-2);border:1px solid var(--line);border-radius:12px;
font-size:.86rem;font-weight:600;color:var(--muted);letter-spacing:-.01em;
transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.mq-item:hover{color:var(--brand);border-color:var(--line-strong);background:#fff}
/* Semua 10 slot kini guna logo sebenar. Plat teks sandaran dibuang. */
.mq-item img{height:30px;width:auto;max-width:140px;object-fit:contain;
filter:grayscale(1);opacity:.6;transition:filter .25s var(--ease),opacity .25s var(--ease)}
/* ---- Saiz optik setiap logo ----
Tinggi seragam BUKAN saiz seragam. Logo susunan menegak seperti
Hong Leong MSIG (0.74:1) dan wordmark lebar seperti Sun Life (4.13:1)
berbeza 5.6 kali luasnya pada height:30px yang sama.
Ketinggian di bawah dinormalkan ikut LUAS terlihat, bukan tinggi.
Formula: tinggi = akar(1650 / nisbah), dikekang 22px hingga 40px
supaya muat dalam plat 52px. Beza luas turun ke 1.7 kali.
Kalau logo baharu ditambah, kira ketinggiannya dengan formula sama. */
/* Hong Leong ditukar daripada logo bertindan (0.74:1) kepada lockup
melintang (6.71:1). Formula luas beri 22px, bukan 40px. max-width
dinaikkan ke 150px khusus untuk logo ini, sebab pada 22px ia perlukan
148px lebar dan had 140px lalai akan memampatkannya jadi 20.9px. */
.mq-item img[src*="logo-hlmt"] {height:22px;max-width:150px}
.mq-item img[src*="logo-ti"] {height:40px}
.mq-item img[src*="logo-ztmb"] {height:37px}
.mq-item img[src*="logo-etfb"] {height:32px}
.mq-item img[src*="logo-fwd"] {height:29px}
.mq-item img[src*="logo-stmb"] {height:26px}
.mq-item img[src*="logo-getb"] {height:26px}
.mq-item img[src*="logo-aia"] {height:25px}
.mq-item img[src*="logo-pbtb"] {height:22px}
.mq-item img[src*="logo-sunlife"]{height:22px}
.mq-item:hover img{filter:none;opacity:1}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* belief rows */
/* ============ BORANG ============ */
/* Borang TIDAK ikut lebar bekas. Medan input yang terlalu lebar
memanjangkan jarak mata dari label ke kotak, dan itu menurunkan
kadar isi. Dihadkan 880px dan ditengahkan. */
/* Kad borang melebar sampai 1320px, tapi elemen INTERAKTIF di dalamnya
dihadkan berasingan. Medan dan butang yang terlalu lebar memanjangkan
jarak mata dari label ke kotak, dan itu menurunkan kadar isi.
Jadi kad lapang, kandungan kekal terkawal. */
/* Kandungan kepala ditengahkan. Medan dan pilihan pula dikembalikan
ke rata kiri, sebab label yang ditengahkan atas kotak input susah
diimbas dan nampak janggal. */
.form-card{text-align:center;max-width:1320px;margin-left:auto;margin-right:auto;
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,3.6vw,56px);box-shadow:var(--sh)}
.form-card.on-deep{border-color:rgba(255,255,255,.14)}
/* ---- Pentas latar borang A ----
Dua imej ini ada tengah terang yang kosong dan hiasan di kedua-dua
tepi. Itu komposisi untuk kad duduk di tengah, bukan untuk teks duduk
atas imej. Jadi imej diletak pada BEKAS dan kad terapung di atasnya.
Kesannya penting: setiap label, input dan kad pilihan kekal atas putih
pepejal, jadi kontras borang langsung tidak berubah. Yang pengguna
nampak hanyalah bingkai hiasan sekeliling kad.
Padding = lebar bingkai yang kelihatan, dan ia satu tukar ganti.
Padding lebih besar memberi bingkai lebih lebar, tapi ia juga
meninggikan pentas, dan pentas yang lebih tinggi memotong lebih
banyak sisi imej landskap. Nilai di bawah dipilih selepas mengira
nisbah pentas pada setiap breakpoint guna tinggi kad yang diukur.
Suis imej pada 901px, titik yang sama dengan .bleed dan hero. Di
bawah itu pentas jadi lebih tinggi daripada lebar, dan imej landskap
akan kehilangan lebih 28% setiap sisi. Potret menang di situ. */
.form-stage{position:relative;padding:26px;overflow:hidden;
border-radius:calc(var(--r-lg) + 8px);
background:var(--brand-tint) url("/assets/img/cta-respo-941.webp") center/cover no-repeat;
box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(255,255,255,.3)}
/* ---- Pad cahaya bertepi lembut ----
Kad putih dibuang, jadi teks borang kini duduk terus atas imej.
Tanpa apa-apa, 18.5% zon kandungan gagal AA sebab kawasan teal gelap
masuk ke dalamnya.
Ini segi empat putih yang dikaburkan, bukan kad. Tiada tepi, jadi ia
tidak dibaca sebagai kotak. Ia cuma menaikkan kecerahan di tengah dan
lesap sebelum sampai ke bingkai.
blur() dalam CSS mengambil sisihan piawai, bukan jejari, jadi 34px di
sini sepadan dengan sigma 34 dalam simulasi. Nilai disahkan pada imej
sebenar: ink 12.31:1, perenggan 5.75:1, dan bingkai masih mengekalkan
89% artwork (alpha cuma 0.11 di tepi).
Tukar imej atau inset, kira semula. */
.form-stage::before{content:"";position:absolute;inset:20px 12px;
background:#fff;opacity:.88;filter:blur(16px);pointer-events:none;z-index:0}
/* Pentas SENTIASA terang, walaupun seksyen induknya gelap.
#borang-utama duduk dalam .sec--deep, yang menetapkan
color:rgba(255,255,255,.86) dan .sec--deep h3{color:#fff}. Warna itu
diwarisi masuk ke dalam kad, jadi tajuk h3 sebenarnya PUTIH ATAS PUTIH
dan langsung tak kelihatan. Nisbah 1.00:1. Ia begitu sebelum pentas
ditambah lagi. Diikat semula di sini supaya pentas tidak bergantung
pada warna seksyen yang membungkusnya. */
.form-stage{color:var(--body)}
.form-stage h2,.form-stage h3,.form-stage h4{color:var(--ink)}
/* Dua token ditindih dalam skop ini sahaja.
--muted #68807D beri 3.13:1 atas pad, dan sebenarnya cuma 4.22:1
atas kad putih asal, iaitu sudah gagal AA sebelum ini lagi.
--brand #177E76 beri 3.63:1. Diganti dengan --brand-deep, 7.22:1. */
.form-stage{--muted:#3F5754;--brand:#0F4C4A}
.form-stage>.form-card{position:relative;z-index:1;
margin-left:auto;margin-right:auto;
background:transparent;border:0;box-shadow:none}
/* Tanpa kad putih di belakangnya, medan kehilangan sempadan konteks dan
mula nampak terapung. Sempadan dikuatkan supaya ia masih terbaca
sebagai kawasan boleh taip. Baris checked ditulis semula dengan awalan
.form-stage supaya ia pasti menang ke atas baris di atasnya. */
.form-stage .f-field input,.form-stage .f-field select,
.form-stage .f-field textarea,.form-stage .pick-opt{border-color:var(--line-strong)}
.form-stage .pick-opt:has(input:checked){border-color:var(--brand)}
@media(min-width:901px){
.form-stage{padding:clamp(40px,4.6vw,84px);
background-image:url("/assets/img/cta-desk-1672.webp")}
/* Inset dan blur MESTI berskala dengan lebar. Nilai tetap 60/48/34
diuji lulus pada 1440 tetapi jatuh ke 3.99:1 pada 1024, sebab pentas
mengecil sementara pad kekal, jadi liputannya menyusut. Dengan skala
vw, teks perenggan kekal 5.68 sampai 6.08 merentas 960 hingga 1440. */
.form-stage::before{inset:clamp(24px,3.4vw,48px) clamp(30px,4.2vw,60px);
filter:blur(clamp(20px,2.4vw,34px))}
}
/* Pada telefon bingkai 26px terlalu nipis untuk bermakna, dan ia
mencuri lebar daripada medan borang. Jadi pentas dibawa ke tepi
skrin: kad kekal selebar asal, bingkai jadi hiasan tepi.
Margin sahaja, bukan transform. Kad di dalamnya ada .rv. */
@media(max-width:640px){
.form-stage{width:100vw;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
border-radius:0;padding:clamp(14px,4.4vw,20px);
box-shadow:var(--sh-lg)}
}
.form-card h3{margin-bottom:6px}
.form-card>p{font-size:.95rem;margin-bottom:22px}
/* Sejajar dengan .pick-list supaya dua blok itu berkongsi tepi
kiri dan kanan yang sama. Tanpa ini medan merentang 1208px
sementara pilihan hanya 1100px, dan jajarannya terlihat. */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;
max-width:1100px;margin:0 auto var(--gap-dlm)}
.f-field{display:flex;flex-direction:column;gap:6px;text-align:left}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:.85rem;font-weight:600;color:var(--ink)}
.f-field label .req{color:var(--alert)}
.f-field input,.f-field select,.f-field textarea{font-family:inherit;font-size:.98rem;color:var(--ink);
background:var(--brand-tint-2);border:1.5px solid var(--line);border-radius:12px;padding:15px 17px;
transition:border-color .2s var(--ease),background .2s var(--ease);width:100%}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--brand);background:#fff}
.f-field textarea{resize:vertical;min-height:88px}
.f-note{font-size:.82rem;color:var(--muted);text-align:center;margin-top:18px;margin-bottom:0;line-height:1.6}
.f-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.f-trust span{font-size:.81rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.f-trust b{color:var(--brand)}
/* ============ AUTHORITY ============ */
.auth-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:44px;align-items:start}
/* Label merentang kedua-dua lajur, ditengahkan pada keseluruhan grid.
.label ialah inline-flex, dan margin:auto diabaikan pada kotak
peringkat inline. Jadi ia ditengahkan oleh bekas flex ini, bukan
oleh margin. Lihat nota sama pada .lic-partner dan .form-eyebrow. */
.auth-eyebrow{grid-column:1 / -1;display:flex;justify-content:center}
.auth-eyebrow .label{margin-bottom:4px}
/* ---- Potongan tanpa latar, tiada bekas ----
Tiada kotak, sempadan, latar atau nisbah tetap. Gambar itu sendiri
yang jadi bentuknya, terus atas pentas teal.
Guna drop-shadow, BUKAN box-shadow. box-shadow melukis segi empat
di sekeliling kotak elemen. drop-shadow mengikut siluet alpha, jadi
bayangnya ikut bentuk orang. Itu yang membezakan potongan yang
nampak berdiri dengan yang nampak ditampal. */
/* ---- Kemasukan potongan foto ----
Foto ini potongan tanpa latar yang berdiri atas pentas gelap, jadi
ia patut naik dari bawah, bukan meluncur seperti kad biasa.
transform-origin bawah menjadikan skala membesar dari kaki, seolah
dia melangkah masuk ke dalam bingkai.
Menindih .rv lalai. .rv.in{transform:none} sedia ada yang menamatkan
animasi, jadi tiada JS baharu diperlukan. */
.auth-photo.rv{opacity:0;transform:translateY(54px) scale(.93);
transform-origin:50% 100%;
transition:opacity .85s var(--ease),transform .9s cubic-bezier(.22,1,.36,1)}
.auth-photo{display:block;align-self:end}
/* ---- Taip masuk ----
Semua aksara wujud dari mula, cuma opacity berubah. Susun atur
tidak pernah berubah, jadi halaman di bawah tidak melompat.
Kursor guna box-shadow kerana ia TIDAK mengambil ruang. border-right
atau ::after berlebar akan menolak aksara terakhir setiap kali. */
.tw-sedia .tw{opacity:0;transition:opacity .12s linear}
.tw-sedia .tw.on{opacity:1}
.tw-sedia .tw.kursor{box-shadow:2px 0 0 0 var(--gold)}
.auth-photo img{display:block;width:100%;height:auto;
filter:drop-shadow(0 26px 44px rgba(0,0,0,.42))}
.auth-name{font-size:clamp(1.16rem,1.9vw,1.36rem);font-weight:700;color:#fff;margin-bottom:5px;letter-spacing:-.025em}
.auth-role{color:var(--gold);font-weight:600;font-size:.92rem;margin-bottom:24px;letter-spacing:.01em}
.auth-line{font-size:clamp(1.34rem,2.5vw,1.92rem);color:#fff;font-weight:700;
letter-spacing:-.032em;line-height:1.24;margin-bottom:14px}
.auth-line em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
color:var(--gold);font-size:1.1em;letter-spacing:-.015em}
.auth-sub{font-size:1rem;color:rgba(255,255,255,.68);line-height:1.68;
margin-bottom:var(--gap-dlm);max-width:60ch}
/* ---- Identiti + statistik penasihat ----
Garis masa 9 item digantikan 4 blok angka. Garis masa itu meminta
pembaca membaca sembilan baris untuk sampai ke kesimpulan yang
sama. Empat angka menyampaikannya dalam satu pandangan. */
.auth-id{padding:clamp(18px,2vw,22px) 0;margin-bottom:var(--gap-dlm);
border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.auth-name{font-size:clamp(1.12rem,1.8vw,1.32rem);font-weight:700;color:#fff;
margin-bottom:5px;letter-spacing:-.025em}
.auth-role{color:var(--gold);font-weight:600;font-size:.9rem;letter-spacing:.01em}
.auth-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
margin-bottom:var(--gap-dlm)}
.auth-stat{padding-left:clamp(14px,1.6vw,20px);border-left:2px solid rgba(240,180,41,.45)}
.asv{display:block;font-size:clamp(1.16rem,1.9vw,1.44rem);font-weight:800;color:#fff;
letter-spacing:-.03em;line-height:1.15;margin-bottom:5px}
.asl{display:block;font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.5}
/* Petikan penasihat. Serif kontra, sama peranan dengan tujuh lagi
dalam halaman: ayat yang membalikkan keadaan. */
.auth-quote{margin:0 0 var(--gap-dlm);padding-left:22px;
border-left:2px solid var(--gold)}
.auth-quote p{margin:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;
font-weight:400;color:#fff;letter-spacing:-.015em;
font-size:clamp(1.16rem,2.1vw,1.56rem);line-height:1.34}
.auth-cta{margin-top:var(--gap-dlm)}
/* verify box */
.verify{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:22px 24px;margin-top:26px}
.verify h4{color:#fff;font-size:1rem;margin-bottom:10px}
.verify p{font-size:.9rem;color:rgba(255,255,255,.74);margin-bottom:14px}
.verify-row{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.86rem}
.verify-row div{color:rgba(255,255,255,.62)}
.verify-row b{color:#fff;font-weight:600}
.verify a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
/* ============ CLOSE ============ */
.close-head{max-width:720px;margin:0 auto clamp(32px,4vw,44px)}
.close-head h2{letter-spacing:-.035em;line-height:1.14}
.close-head h2 em{display:block;margin-top:.14em;font-family:'Instrument Serif',Georgia,serif;
font-style:italic;font-weight:400;color:var(--gold);font-size:1.06em;letter-spacing:-.02em}
/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;box-shadow:var(--sh-sm)}
.faq-q{width:100%;background:none;border:none;font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);
text-align:left;padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;line-height:1.5}
.faq-q:hover{color:var(--brand)}
.faq-ar{width:26px;height:26px;border-radius:50%;background:var(--brand-tint);color:var(--brand);
display:grid;place-items:center;font-size:1.1rem;font-weight:700;flex:none;transition:transform .3s var(--ease)}
.faq-item.open .faq-ar{transform:rotate(45deg);background:var(--brand);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.faq-a p{padding:0 24px 22px;font-size:.95rem;margin:0}
.faq-item.open .faq-a{max-height:420px}
/* ============ FOOTER ============ */
.ft{background:var(--brand-deep);color:rgba(255,255,255,.6);padding:56px 0 30px;font-size:.88rem}
.ft-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-brand{max-width:330px}
.ft-brand p{margin-top:12px;font-size:.86rem;line-height:1.65}
.ft-links{display:flex;gap:44px;flex-wrap:wrap}
.ft-col h5{color:#fff;font-size:.88rem;margin-bottom:12px;font-weight:600}
.ft-col a{display:block;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:8px;font-size:.86rem}
.ft-col a:hover{color:var(--gold)}
.disc{margin-top:24px;padding:18px 20px;background:rgba(0,0,0,.18);border-radius:var(--r);font-size:.79rem;line-height:1.72;color:rgba(255,255,255,.55)}
.disc b{color:rgba(255,255,255,.82);font-weight:600}
.ft-copy{margin-top:22px;text-align:center;font-size:.8rem;color:rgba(255,255,255,.42)}
/* ============ WA FLOAT ============ */
/* ---- Butang terapung: robot sahaja, tiada bekas ----
WebP BERANIMASI, bukan MP4. MP4 tiada saluran alpha, jadi latar
putih video akan jadi kotak putih di sekeliling robot. WebP
beranimasi menyokong telus dan disokong setiap pelayar moden
termasuk Safari iOS, tidak seperti WebM VP9 dengan alpha.
Sumber asal 8 saat, tetapi bingkai pada 4.00s padan dengan bingkai
0 pada beza 0.167. Ia sebenarnya gelung 4 saat yang diulang dua
kali, jadi separuh video itu data berulang. Hanya separuh pertama
digunakan: 32 bingkai pada 8fps.
889,662 bait turun ke 90,426. */
.wa{position:fixed;right:14px;bottom:14px;z-index:95;
width:78px;display:block;line-height:0;text-decoration:none;
/* translateZ(0) mengunci butang ini pada lapisan compositor sendiri.
Tanpa ia, pelayar melukis semula kawasan butang setiap kali laman
bergerak. WebP beranimasi 8fps di dalamnya pula memaksa penapis
drop-shadow dikira semula atas piksel latar yang baru pada setiap
bingkai skrol. Itu puncanya nampak tersekat. Dengan lapisan
sendiri, robot dikomposit sekali dan skrol tidak menyentuhnya. */
transform:translateZ(0);backface-visibility:hidden;
transition:transform .25s var(--ease)}
/* Hover hanya untuk peranti bertetikus. Pada skrin sentuh :hover
tersangkut selepas jari tersentuh semasa skrol, dan butang kekal
membesar sampai pengguna tap tempat lain. */
@media(hover:hover){
.wa:hover{transform:translateZ(0) scale(1.08)}
}
/* drop-shadow, BUKAN box-shadow. box-shadow melukis segi empat di
sekeliling kotak elemen dan robot ini tiada kotak. drop-shadow
mengikut siluet alpha. Nota sama seperti .auth-photo.
Dulu satu lapisan hitam pekat: 0 8px 18px rgba(0,0,0,.42). Atas
pentas gelap ia tidak kelihatan, tetapi atas seksyen cerah (akhbar,
borang) ia menggelapkan latar sehingga 14 aras dan terbaca sebagai
petak kelabu di belakang robot. Diukur dalam Chrome: latar
rgb(246,250,248) jatuh ke rgb(232,237,234) di sebelah kanan robot.
Ganti dengan dua lapisan nipis berwarna jenama, bukan hitam. Lapisan
rapat (2px/4px) memberi ketajaman tepi, lapisan jauh (10px/20px)
memberi rasa terapung. Kejatuhan latar turun ke 5 aras, iaitu bawah
ambang yang mata perasan atas latar cerah. */
.wa-bot{display:block;width:100%;height:auto;
filter:drop-shadow(0 2px 4px rgba(15,76,74,.18))
drop-shadow(0 10px 20px rgba(15,76,74,.14))}
/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}
/* ============ RESPONSIF ============ */
@media(max-width:900px){
.nav-paths a{font-size:.79rem;padding:6px 12px}
.hero-copy{max-width:100%}
.fork-grid{grid-template-columns:1fr}
.pcard-num{font-size:3.6rem;top:10px;right:18px}
.statline{grid-template-columns:1fr 1fr;gap:26px 0}
.statline-item:nth-child(3){border-left:none;padding-left:0}
.problem-grid{grid-template-columns:1fr;gap:12px}
/* Taburan (scale .6 + putar + anjak) dimatikan pada mobile.
Ia direka untuk grid 4 lajur. Pada satu lajur ia cuma mengubah
kotak setiap kad, dan itu punca pemerhati kapsyen menyala tanpa
sebab. Tanpa transform, geometri stabil dan kapsyen tak berkelip. */
.prob-1,.prob-2,.prob-3,.prob-4{transform:none}
.problem-img-card{transition:opacity .55s var(--ease)}
/* ---- Hero skrin penuh pada mobile ----
Sebelum ini hero mobile setinggi kandungannya sahaja, jadi seksyen
fork mencelah sampai 312px pada iPhone 16 Pro Max. Sepertiga skrin
pertama diberikan kepada seksyen kedua.
100svh, BUKAN 100vh. Pada pelayar mudah alih, 100vh bermaksud
tinggi ketika bar alamat TERSEMBUNYI. Pada muatan pertama bar itu
kelihatan, jadi 100vh menjadikan hero lebih tinggi daripada ruang
yang ada dan butang di bawah terpotong.
svh ialah tinggi ketika bar alamat kelihatan, iaitu keadaan
sebenar semasa pelawat mula-mula sampai. Baris 100vh dikekalkan
di atasnya sebagai sandaran untuk pelayar lama.
Kandungan ditengahkan menegak, jadi ia kekal seimbang pada skrin
pendek mahupun panjang tanpa nilai tetap. */
.hero{
min-height:100vh;
min-height:100svh;
display:flex;align-items:center;
/* overflow:visible dan z-index:0 diperlukan supaya helaian .fork
boleh meluncur ATAS hero, sama seperti desktop. Asasnya
overflow:hidden, dan itu boleh mengerat latar position:fixed
pada sesetengah pelayar. */
position:relative;z-index:0;overflow:visible;
padding-top:clamp(84px,13vw,108px);
padding-bottom:clamp(38px,7vw,60px)}
.hero>.wrap{width:100%}
.auth-grid{grid-template-columns:1fr;gap:30px}
/* Satu lajur: pulangkan susunan asal, iaitu foto dahulu barulah
label. Tanpa order, label akan melompat ke atas foto dan itu
bukan yang diminta. Jarak grid 30px sudah memisahkannya, jadi
margin bawah label digugurkan.
justify-content:center diwarisi daripada peraturan asas, jadi
label kekal di tengah pada mobile juga. Hanya SUSUNAN yang
dipulangkan di sini, bukan penjajaran. */
.auth-eyebrow{order:2}
.auth-eyebrow .label{margin-bottom:0}
.auth-photo{order:1;max-width:340px;margin:0 auto}
.auth-body{order:3}
.auth-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
html{scroll-padding-top:64px}
/* ---- Navbar mesti muat pada telefon ----
Dalam keadaan .dalam, bar perlukan 487px sedangkan telefon ada
360 hingga 440. CTA sentiasa berakhir pada x=471, jadi ia dipotong
31px pada 440 dan 111px pada 360. overflow-x:hidden pada body
mengeratnya, jadi butang itu langsung tak boleh ditekan.
Tiga jimatan: wordmark undur, label pil dipendekkan kepada
"Takaful" dan "Harta" melalui .t-pendek, dan padding serta gap
dirapatkan. */
.nav.dalam .logo-txt{opacity:0;max-width:0;overflow:hidden}
.nav-in{gap:9px;padding:0 14px}
.nav-paths{gap:6px;margin-left:6px;margin-right:0}
.nav-paths a{font-size:.75rem;padding:6px 11px;gap:5px}
/* Jaring keselamatan. Kalau kandungan tetap tak muat pada peranti
yang lebih sempit atau saiz fon lebih besar, yang mengalah ialah
pil laluan, BUKAN CTA. Pil boleh dicapai semula dengan skrol,
CTA yang terkerat langsung hilang. */
.nav-paths{flex:0 1 auto;min-width:0;overflow:hidden}
.nav-cta{flex:none}
.t-full{display:none}
.t-pendek{display:inline}
.nav-cta{padding:9px 17px;font-size:.82rem;gap:7px}
body{font-size:16px}
.nav-cta{padding:9px 16px;font-size:.8rem}
.logo{font-size:1rem}
.hero{padding-top:100px;text-align:center}
/* Teks di tengah pada mobile, jadi scrim kiri tak melindungi lagi.
Diganti dengan wash lebih tebal + scrim menegak. Disimulasi pada
krop mobile sebenar: terburuk 5.72:1, purata 10.16:1. */
.hero-bg::before{background:
linear-gradient(to bottom,transparent calc(100% - 180px),var(--brand-deeper) 100%),
linear-gradient(to bottom,rgba(12,59,58,.20),rgba(12,59,58,0) 75%),
radial-gradient(520px 380px at 70% 6%,rgba(46,156,147,.22),transparent 60%),
linear-gradient(rgba(12,59,58,.70),rgba(12,59,58,.70))}
.hero-photo{object-position:center 42%}
.hero-copy{max-width:100%}
.hero h1{font-size:clamp(2.15rem,9vw,3rem)}
.hero h1 em{font-size:clamp(2.25rem,9.6vw,3.2rem)}
.hero-lede{margin-left:auto;margin-right:auto}
.hero-btns{justify-content:center}
.hero-btns .btn{width:100%}
.fork{background:var(--brand-deeper)}
.pcard{text-align:left}
.pcard-ico{margin-left:0}
.f-grid{grid-template-columns:1fr}
/* Lencana nombor memegang tepi kiri, jadi lajur teks di sebelahnya
teranjak ke kanan sebanyak lebar lencana + gap. Apa-apa yang
ditengahkan DALAM lajur itu tetap nampak tersasar pada halaman.
Susun menegak dahulu, barulah tengah bermakna tengah.
.track-head-txt perlu flex:none + width:100%, sebab flex:1 dan
min-width:270px direka untuk paksi mendatar. */
.track-head{gap:14px;flex-direction:column;align-items:center;text-align:center}
.track-head-txt{flex:none;width:100%;min-width:0}
.track-num{width:48px;height:48px;font-size:1.02rem}
.brandwall-top{grid-template-columns:1fr;gap:22px}
.brandwall-num{padding-left:0;padding-top:20px;border-left:none;border-top:1px solid var(--line)}
.ft-top{flex-direction:column}
.center-m{text-align:center}
.sec{padding:52px 0}
}
/* Telefon 389px ke bawah masih kekurangan lebih kurang 29px, jadi pil
laluan dikerat. Emoji digugurkan di sini SAHAJA. Ia hiasan dan sudah
aria-hidden, jadi tiada makna hilang, dan ia menjimatkan 38px.
Telefon 390px ke atas kekal dengan emoji sebab ia memang sudah muat.
Blok ini MESTI berada selepas blok 640 ditutup sepenuhnya. Ada DUA
blok max-width:640px dalam fail ini. Membuka blok baharu di tengah
blok nav akan memerangkap semua peraturan selebihnya, termasuk
.t-pendek dan seluruh hero mobile. */
@media(max-width:389px){
.nav-paths a span[aria-hidden]{display:none}
.nav-paths a{padding:6px 10px;gap:0}
}
/* Peranti sentuh: tiada hover, jadi kapsyen dedah sendiri bila kad
berada di tengah viewport. Kelas .active dikendalikan oleh script.js. */
@media(hover:none){
/* ---- Matikan skala :hover pada peranti sentuh ----
Pelayar mobile mengekalkan keadaan :hover selepas sentuhan. Sekali
jari tersentuh kad semasa skrol, kad itu kekal pada scale(1.06)
dengan z-index:10, jadi ia menaiki kad jiran dan memakan jarak
antara mereka. Ia hanya pulih bila pengguna menyentuh tempat lain.
Kesan itu direka untuk tetikus, di mana kursor meninggalkan kad
dengan sendirinya. Pada skrin sentuh ia tiada jalan keluar.
Kapsyen juga dilepaskan daripada :hover, supaya ia dikawal
sepenuhnya oleh .active daripada pemerhati jalur tengah. */
.problem-img-card.explode-in:hover{transform:none!important;z-index:auto!important}
.problem-img-card:hover .problem-caption{transform:none;opacity:0}
.problem-img-card.active .problem-caption{opacity:1}
.problem-img-card img{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.problem-img-card.active img{transform:scale(1.04)}
.problem-caption{top:0;bottom:0;padding:14px;justify-content:flex-end;
transform:none;opacity:0;overflow:hidden;transition:opacity .45s var(--ease)}
.problem-img-card.active .problem-caption{opacity:1}
.problem-caption strong{font-size:.92rem}
.problem-caption span{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.rv{opacity:1;transform:none}
.problem-img-card{opacity:1!important;transform:none!important}
.auth-photo.rv{opacity:1!important;transform:none!important}
.hero h1 em .hrf{animation:none;opacity:1;transform:none}
/* Video tidak boleh dihentikan oleh CSS. JS dalam script.js yang
menjedanya, dan poster kekal kelihatan. */
.tw-sedia .tw{opacity:1!important}
.tw-sedia .tw.kursor{box-shadow:none}
/* marquee jadi grid statik, set gandaan disorok */
.mq{-webkit-mask-image:none;mask-image:none}
.mq-track{width:100%;flex-wrap:wrap;justify-content:center;gap:12px}
.mq-item{margin-right:0}
.mq-item[aria-hidden="true"]{display:none}
}
/* ============ HONEYPOT (perangkap bot) ============ */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* ============ MESEJ BORANG ============ */
.f-msg{border-radius:11px;padding:14px 17px;font-size:.92rem;margin-bottom:16px;line-height:1.6;display:none}
.f-msg.show{display:block}
.f-msg--ok{background:rgba(23,126,118,.1);border:1px solid rgba(23,126,118,.28);color:var(--brand)}
.f-msg--err{background:var(--alert-tint);border:1px solid rgba(193,18,31,.28);color:var(--alert)}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important}
/* ============ HALAMAN TEKS (terma / privasi / terima kasih) ============ */
.doc{padding:clamp(110px,14vw,150px) 0 clamp(56px,8vw,90px);background:var(--brand-tint-2);min-height:70vh}
.doc-in{max-width:800px;margin:0 auto;background:#fff;border:1px solid var(--line);
border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);box-shadow:var(--sh)}
.doc-in h1{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:8px}
.doc-in .upd{font-size:.85rem;color:var(--muted);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.doc-in h2{font-size:1.2rem;margin:32px 0 10px}
.doc-in h2:first-of-type{margin-top:0}
.doc-in ul,.doc-in ol{margin:0 0 16px 22px}
.doc-in li{margin-bottom:7px;font-size:.96rem}
.doc-in a{color:var(--brand);font-weight:600}
.doc-back{display:inline-flex;align-items:center;gap:8px;margin-top:30px;color:var(--brand);
font-weight:600;text-decoration:none;font-size:.94rem}
/* ============ TERIMA KASIH ============ */
.ty{min-height:100vh;display:grid;place-items:center;background:var(--brand-deep);padding:100px 22px 60px;text-align:center}
.ty-in{max-width:560px}
.ty-tick{width:78px;height:78px;border-radius:50%;background:var(--gold);color:var(--brand-deep);
display:grid;place-items:center;font-size:2.3rem;margin:0 auto 26px;box-shadow:0 12px 34px rgba(240,180,41,.36)}
.ty h1{color:#fff;font-size:clamp(1.7rem,4.4vw,2.6rem);margin-bottom:16px}
.ty p{color:rgba(255,255,255,.82);font-size:1.03rem;margin-bottom:12px}
.ty .ref{display:inline-block;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
border-radius:var(--r-pill);padding:9px 22px;font-size:.9rem;color:#fff;margin:14px 0 26px}
.ty .ref b{color:var(--gold);letter-spacing:.06em}
.ty-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:10px}
/* ============================================================
HERO SKRIN PENUH + HELAIAN MELUNCUR
Hanya LATAR yang position:fixed. Hero sendiri tidak sticky,
sebab kalau sticky kandungannya ikut terpaku sekali. Foto kekal
statik manakala kandungan skrol naik seperti biasa, dan seksyen
selepasnya diberi z-index lebih tinggi supaya ia meluncur NAIK
menutupi foto.
Dahulu desktop sahaja, kerana 100vh bergaduh dengan bar alamat
mudah alih. Itu sudah diselesaikan: hero guna svh, dan latar
tetap guna lvh. Lihat nota pada .hero-bg di bawah.
============================================================ */
/* Latar tetap: lvh, BUKAN vh mahupun svh.
Ia mesti menutup viewport PALING TINGGI yang mungkin. Kalau guna
svh, bar alamat yang mengecut akan mendedahkan jalur kosong di
bawah foto. lvh ialah tinggi ketika bar tersembunyi, jadi ia
sentiasa cukup. Ia melebihi skrin ketika bar kelihatan, tetapi itu
tidak menjadi masalah untuk sesuatu yang berada di belakang.
translateZ(0) menaikkan foto ke lapisan compositor sendiri. Tanpa
itu, setiap bingkai skrol mengecat semula foto skrin penuh di
bawah kandungan yang bergerak, dan telefon murah tersekat. */
.hero-bg{position:fixed;inset:0;height:100vh;height:100lvh;z-index:-1;
transform:translateZ(0)}
/* Hanya dan