/* BORANG.MY — penyesuaian di atas templat Velzon (SaaS landing).
   Semua ubahan jenama diletakkan di sini; fail templat asal tidak disentuh. */

/* ---------- Warna jenama (biru) ---------- */
[data-theme-colors=blue]{
  --vz-primary:#1d5fe0;--vz-primary-rgb:29,95,224;
  --vz-primary-bg-subtle:rgba(29,95,224,.11);--vz-primary-border-subtle:rgba(29,95,224,.28);--vz-primary-text-emphasis:#1745a3;
  --vz-link-color:#1d5fe0;--vz-link-color-rgb:29,95,224;--vz-link-hover-color:#1745a3;
  --bn-navy:#0A1B45;--bn-navy2:#10285F;--bn-sky:#38BDF8;--bn-wa:#25D366;
  --tn-h:40px;
}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
.btn-primary{--vz-btn-bg:var(--vz-primary);--vz-btn-border-color:var(--vz-primary);--vz-btn-hover-bg:#1745a3;--vz-btn-hover-border-color:#1745a3;--vz-btn-active-bg:#143f95;--vz-btn-active-border-color:#143f95}
.btn-primary,.btn-success,.btn-outline-primary{font-weight:600}
.btn-lg{padding:.8rem 1.6rem}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.tnc a{text-decoration:underline;text-underline-offset:2px;font-weight:500}

/* ---------- Bar atas & navigasi ---------- */
.topbar-note{position:fixed;top:0;left:0;right:0;z-index:1040;height:var(--tn-h);line-height:1.2;display:flex;align-items:center;justify-content:center;gap:.25rem;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;background:var(--bn-navy);color:#cfe0ff;transition:transform .3s}
.topbar-note .badge{font-size:.72rem}
html.scrolled .topbar-note{transform:translateY(-100%)}
.navbar-landing{top:var(--tn-h);transition:top .3s,background-color .3s,box-shadow .3s}
html.scrolled .navbar-landing{top:0}
.navbar-landing .card-logo{height:26px;width:auto}
.navbar-landing .navbar-nav .nav-item .nav-link:hover,.navbar-landing .navbar-nav .nav-item .nav-link.active{color:var(--vz-primary)!important}
.lang-switch .btn{min-width:42px;font-weight:700}
@media(max-width:991.98px){
  .navbar-landing{padding:8px 0}
  .navbar-landing .navbar-collapse{padding:10px 0 16px}
  .navbar-landing .navbar-nav .nav-item .nav-link{padding:12px 4px}
  .nav-actions{padding-top:12px;border-top:1px solid var(--vz-border-color);margin-top:8px}
  .nav-actions .btn-primary{flex:1 1 100%}
}
@media(max-width:575.98px){
  :root{--tn-h:44px}
  .topbar-note{font-size:.78rem}
  .topbar-note small{display:none}
}

/* ---------- Hero ---------- */
.hero-section{padding-top:calc(var(--tn-h) + 96px)}
.hero-section h1{letter-spacing:-.02em}
.hero-ticks{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;justify-content:center;font-size:.9rem}
.hero-ticks li{margin:0}
@media(min-width:992px){.hero-ticks{justify-content:flex-start}}
.app-mock{max-width:560px;margin-inline:auto}
.mock-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.mock-chip{border:1px dashed var(--vz-border-color);border-radius:8px;padding:6px 10px;font-size:.78rem;font-weight:500;background:var(--vz-secondary-bg);color:var(--vz-body-color)}
.mock-field{border:1.5px solid var(--vz-border-color);border-radius:10px;padding:8px 12px}
.mock-drop{border-color:var(--vz-primary);background:var(--vz-primary-bg-subtle);animation:dropin 4s infinite}
.mock-bar{height:9px;border-radius:5px;background:var(--vz-light)}
.mock-line{flex:1;min-width:10px;height:2px;background:linear-gradient(90deg,var(--vz-primary),var(--bn-sky));border-radius:2px}
@keyframes dropin{0%,18%{opacity:0;transform:translateY(-14px) scale(.97)}34%,90%{opacity:1;transform:none}100%{opacity:0}}
.float-card{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-radius:14px;background:var(--vz-secondary-bg);box-shadow:0 18px 40px -14px rgba(10,27,69,.35);animation:bob 6s ease-in-out infinite}
.fc-1{top:-18px;left:-22px}.fc-2{bottom:56px;right:-18px;animation-delay:-2s}.fc-3{bottom:-24px;left:34px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media(max-width:575.98px){.float-card{display:none}}
.client-name{font-weight:700;font-size:1.05rem;color:var(--vz-secondary-color);transition:.2s;padding:.4rem 0}
.client-name:hover{color:var(--vz-primary)}

/* ---------- Kad ciri ---------- */
.feature-card{border-radius:16px;transition:transform .3s,box-shadow .3s,background-color .3s;border:1px solid transparent}
.feature-card:hover{transform:translateY(-5px);background:var(--vz-secondary-bg);border-color:var(--vz-border-color);box-shadow:0 20px 40px -24px rgba(29,95,224,.45)}
.feature-card h5{display:inline}
.showcase-card .progress-sm{height:6px}
.share-tile{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.8rem .25rem;border:1px solid var(--vz-border-color);border-radius:12px;font-size:.78rem;font-weight:600;color:var(--vz-primary);background:var(--vz-light)}
.nav-pills .nav-link{font-weight:600;background:var(--vz-secondary-bg);border:1px solid var(--vz-border-color);color:var(--vz-body-color)}
.nav-pills .nav-link.active{background:var(--vz-primary);border-color:var(--vz-primary);color:#fff}
.process-card .icon-effect{transition:.3s}

/* ---------- Keselamatan (gelap) ---------- */
.section-navy{background:radial-gradient(800px 420px at 85% -10%,rgba(56,189,248,.22),transparent 60%),radial-gradient(600px 420px at 0 100%,rgba(99,102,241,.22),transparent 60%),linear-gradient(170deg,#081538,#0b1f55 60%,#0d2a72);color:#fff}
.section-navy .sec-card{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;transition:transform .3s,border-color .3s,box-shadow .3s}
.section-navy .sec-card:hover{transform:translateY(-6px);border-color:rgba(125,211,252,.55);box-shadow:0 26px 46px -26px rgba(0,0,0,.7)}
.section-navy .sec-card h5{color:#fff}
.section-navy .sec-card p{color:#bcd0f7!important}
.section-navy .sec-card .avatar-title{background:linear-gradient(145deg,rgba(125,211,252,.28),rgba(99,102,241,.28))!important;color:#fff!important;box-shadow:0 0 0 6px rgba(56,189,248,.08)}
.trust-strip .trust-item{padding:1.2rem .5rem;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.05)}

/* ---------- Jadual & pelan ---------- */
.compare-table th,.compare-table td{padding:.95rem 1rem}
.compare-table .table-primary-col{background:var(--vz-primary-bg-subtle)!important}
.plan-box{border:1px solid var(--vz-border-color);border-radius:18px;transition:transform .3s,box-shadow .3s}
.plan-box:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(29,95,224,.5)}
.plan-box .annual{display:none}

/* ---------- Footer ---------- */
.custom-footer{background:var(--bn-navy)!important;color:#b6c9f5}
.custom-footer .footer-list a{color:#9fb6e8}.custom-footer .footer-list a:hover{color:#fff}

/* ---------- Chatbot ---------- */
.chat-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:1050;display:flex;align-items:center;gap:.6rem;border:0;cursor:pointer;font-weight:700;font-size:.95rem;color:#fff;padding:.85rem 1.3rem .85rem 1.1rem;border-radius:99px;background:linear-gradient(135deg,#4F8BFF,#1D4ED8);box-shadow:0 16px 34px -10px rgba(29,78,216,.8);transition:transform .25s}
.chat-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(47,107,255,.6);animation:ring 2.6s infinite;pointer-events:none}
@keyframes ring{70%{box-shadow:0 0 0 16px rgba(47,107,255,0)}100%{box-shadow:0 0 0 0 rgba(47,107,255,0)}}
.chat-fab:hover{transform:translateY(-3px)}
.landing-back-top{bottom:calc(86px + env(safe-area-inset-bottom));right:24px;z-index:1049}
.chat{position:fixed;right:20px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:1060;width:min(390px,100vw - 28px);height:min(600px,100dvh - 120px);background:var(--vz-secondary-bg);border-radius:22px;box-shadow:0 40px 80px -20px rgba(10,27,69,.55);border:1px solid var(--vz-border-color);display:none;flex-direction:column;overflow:hidden}
.chat.open{display:flex;animation:pop .3s}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}}
.chat-h{background:linear-gradient(135deg,var(--bn-navy),var(--vz-primary));color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.chat-av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.chat-h b{display:block;font-size:.98rem}.chat-h small{opacity:.8;font-size:.76rem}
.chat-h button,.chat-wa{width:34px;height:34px;border-radius:10px;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.16);text-decoration:none}
.chat-wa{margin-left:auto;background:var(--bn-wa);color:#063a1a}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--vz-light)}
.m{max-width:88%;padding:10px 14px;border-radius:16px;font-size:.9rem;line-height:1.55;animation:fadein .3s;word-wrap:break-word}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
.m.bot{background:var(--vz-secondary-bg);border:1px solid var(--vz-border-color);border-bottom-left-radius:4px;align-self:flex-start;color:var(--vz-body-color)}
.m.me{background:var(--vz-primary);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.m a.wa-link{display:inline-flex;gap:8px;align-items:center;margin-top:10px;background:var(--bn-wa);color:#063a1a;font-weight:700;padding:9px 14px;border-radius:10px;text-decoration:none}
.m.typing{display:flex;gap:4px;padding:14px 16px}.m.typing i{width:7px;height:7px;border-radius:50%;background:#9db3de;animation:bounce 1s infinite}
.m.typing i:nth-child(2){animation-delay:.15s}.m.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{50%{transform:translateY(-5px);opacity:.5}}
.m ol{margin:8px 0 2px 18px;display:grid;gap:5px;padding:0}
.m small{display:inline-block;margin-top:6px;opacity:.75;font-size:.76rem}
.quick{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 0;background:var(--vz-light);max-height:92px;overflow-y:auto}
.quick button{font:inherit;font-size:.78rem;font-weight:600;border:1.5px solid var(--vz-border-color);background:var(--vz-secondary-bg);color:var(--vz-primary);padding:6px 12px;border-radius:99px;cursor:pointer;transition:.2s}
.quick button:hover{background:var(--vz-primary);color:#fff;border-color:var(--vz-primary)}
.wa-strip{display:flex;align-items:center;gap:10px;margin:10px 12px 0;padding:10px 14px;border-radius:12px;background:#E8FBEF;color:#0b5a2b;font-size:.8rem;font-weight:700;line-height:1.35;text-decoration:none}
.wa-strip i{color:#128C7E;flex:none}
.chat-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--vz-border-color);background:var(--vz-secondary-bg)}
.chat-f input{flex:1;font:inherit;border:1.5px solid var(--vz-border-color);border-radius:12px;padding:10px 14px;min-width:0;background:var(--vz-secondary-bg);color:var(--vz-body-color)}
.chat-f input:focus{outline:0;border-color:var(--vz-primary)}
.chat-f button{border:0;background:var(--vz-primary);color:#fff;width:46px;border-radius:12px;cursor:pointer}
@media(max-width:575.98px){
  .chat{right:0;left:0;bottom:0;width:100%;height:100dvh;border-radius:0}
  .chat-fab .t{display:none}.chat-fab{padding:.95rem}
}
@media(display-mode:standalone){.topbar-note{display:none}:root{--tn-h:0px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Pembetulan reka letak (navigasi, bar atas, lencana) ---------- */
@media(min-width:992px){
  .navbar-landing .navbar-nav .nav-item .nav-link{white-space:nowrap;padding:8px 11px}
  .nav-actions{flex-wrap:nowrap!important;white-space:nowrap}
}
@media(min-width:992px) and (max-width:1199.98px){.nav-actions .btn-link{display:none}}
.topbar-note{padding:0 12px}
@media(max-width:575.98px){
  :root{--tn-h:50px}
  .topbar-note{white-space:normal;text-align:center;font-size:.74rem;line-height:1.25;padding:4px 10px;flex-wrap:wrap;gap:2px 6px}
  .hero-section .badge{white-space:normal;line-height:1.45}
}
.hero-section .badge{white-space:normal;line-height:1.45}
@media(max-width:575.98px){
  :root{--tn-h:36px}
  .topbar-note{white-space:nowrap;flex-wrap:nowrap;font-size:.72rem;padding:0 8px;text-overflow:ellipsis}
  .topbar-note .badge,.topbar-note small{display:none}
  .hero-cta .btn{flex:1 1 100%}
}
.icon-effect::before{background-color:rgba(var(--vz-primary-rgb),.16)!important}
.plan-featured{border:2px solid var(--vz-primary);box-shadow:0 24px 50px -28px rgba(29,95,224,.55)}

/* =====================================================================
   v2 — palet biru bersih, latar halus, butang & komponen responsif
   Palet: Navy #0A1B45 · Royal #1D5FE0 · Langit #38BDF8 · Ais #F3F8FF / #EAF2FF · Garis #DCE7F8
   ===================================================================== */
[data-theme-colors=blue]{--bn-ice:#F3F8FF;--bn-ice2:#EAF2FF;--bn-line:#DCE7F8;--bn-royal:#1D5FE0}

body{background:#fff}
h1,h2,h3,h4{letter-spacing:-.015em}
.section{padding:96px 0}
@media(max-width:767.98px){.section{padding:64px 0}}

/* ---------- Latar: gradien & corak halus (bukan corak lama Velzon) ---------- */
.landing .bg-light{background:linear-gradient(180deg,#F6FAFF 0%,#EAF2FF 100%)!important}
.hero-section{background:
  radial-gradient(900px 520px at 88% -8%,rgba(56,189,248,.26),transparent 62%),
  radial-gradient(720px 520px at -6% 12%,rgba(29,95,224,.14),transparent 62%),
  linear-gradient(180deg,#F3F8FF 0%,#FFFFFF 100%)}
.hero-section .bg-overlay-pattern{display:none}
.hero-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(29,95,224,.5) 1px,transparent 1.4px);background-size:26px 26px;opacity:.10;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 25%,transparent 75%)}
.hero-section>.container{position:relative}
section.bg-primary{background:linear-gradient(120deg,#1D5FE0 0%,#1747B3 55%,#0A1B45 130%)!important}
section.bg-primary .bg-overlay-pattern{opacity:.12}
#plans .bg-overlay-pattern{opacity:.35}

/* ---------- Kad & bayang ---------- */
.landing .card{border:1px solid var(--bn-line);border-radius:18px;box-shadow:0 14px 34px -26px rgba(10,27,69,.45)}
.landing .card.border-0{border:0}
.landing .card:hover{box-shadow:0 22px 46px -28px rgba(29,95,224,.5)}
.landing .compare-card:hover,.landing .showcase-card:hover,.landing .app-mock .card:hover{box-shadow:0 14px 34px -26px rgba(10,27,69,.45)}
.badge.rounded-pill.bg-primary-subtle{letter-spacing:.08em}

/* ---------- Butang ---------- */
.btn{border-radius:12px;font-weight:600;letter-spacing:.005em;transition:transform .2s,box-shadow .25s,background-color .2s,border-color .2s,color .2s}
.btn:focus-visible{outline:3px solid rgba(56,189,248,.6);outline-offset:2px;box-shadow:none}
.btn:active{transform:translateY(0)!important}
.btn-lg{min-height:52px;padding:.8rem 1.7rem;font-size:1.02rem;border-radius:14px}
.btn-primary{border:0;background:linear-gradient(135deg,#3D7EFF 0%,#1D5FE0 55%,#1747B3 100%);box-shadow:0 12px 26px -12px rgba(29,95,224,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#3D7EFF 0%,#1D5FE0 55%,#1747B3 100%);transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(29,95,224,.9),0 0 0 4px rgba(29,95,224,.14),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-success{border:0;color:#fff;background:linear-gradient(135deg,#34E07A 0%,#18B05E 55%,#0E9249 100%);box-shadow:0 12px 26px -12px rgba(18,161,80,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-success:hover,.btn-success:focus{color:#fff;background:linear-gradient(135deg,#34E07A 0%,#18B05E 55%,#0E9249 100%);transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(18,161,80,.9),0 0 0 4px rgba(37,211,102,.18)}
.btn-outline-primary{border:1.5px solid #9DBBF5;background:#fff;color:var(--bn-royal)}
.btn-outline-primary:hover,.btn-outline-primary:focus{background:var(--bn-royal);border-color:var(--bn-royal);color:#fff;transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(29,95,224,.8)}
.btn-soft-primary{background:rgba(29,95,224,.1);color:var(--bn-royal);border:0}
.btn-soft-primary:hover{background:var(--bn-royal);color:#fff;transform:translateY(-2px)}
.btn-light{border:0;background:#fff;box-shadow:0 14px 28px -14px rgba(0,0,0,.45)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(0,0,0,.55),0 0 0 4px rgba(255,255,255,.22)}
.btn-outline-light{border-width:1.5px}
.btn-outline-light:hover{transform:translateY(-2px)}
.btn i.ri-arrow-right-line{transition:transform .2s}
.btn:hover i.ri-arrow-right-line{transform:translateX(4px)}
.lang-switch{border-radius:999px;overflow:hidden;box-shadow:0 6px 16px -10px rgba(10,27,69,.5);background:#fff}
.lang-switch .btn{min-width:46px;border-radius:0!important;border-width:1.5px;box-shadow:none!important;transform:none!important}
.lang-switch .btn.btn-primary{background:linear-gradient(135deg,#3D7EFF,#1D5FE0)}
.lang-switch .btn-outline-primary{border-color:#C7D9F8;background:#fff}
.lang-switch .btn-outline-primary:hover{background:var(--bn-ice2);color:var(--bn-royal)}

/* ---------- Navigasi ---------- */
.navbar-landing.is-sticky{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 8px 30px -18px rgba(10,27,69,.5)}
@media(max-width:991.98px){.navbar-landing{background:#fff}.navbar-toggler{border:1.5px solid var(--bn-line);border-radius:12px;padding:.35rem .65rem!important}}

/* ---------- Banner atas: teks dipotong dengan elipsis, pautan sentiasa kelihatan ---------- */
.topbar-note{gap:.65rem;padding:0 14px}
.tn-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.tn-link{flex:none;display:inline-flex;align-items:center;gap:.25rem;background:#fff;color:var(--vz-primary);font-weight:700;font-size:.72rem;padding:3px 11px;border-radius:99px;text-decoration:none;white-space:nowrap}
.tn-link:hover{color:#fff;background:var(--vz-primary)}
.tn-note{flex:none;opacity:.7;font-size:.72rem;white-space:nowrap}
@media(max-width:767.98px){.tn-note{display:none}}
@media(max-width:575.98px){.tn-text{font-size:.74rem}}

/* ---------- Mock hero: tiada teks terlindung ---------- */
.app-mock{margin-bottom:54px}
.mock-canvas{padding-bottom:2.8rem!important}
.mock-chip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.74rem}
.float-card{z-index:2;white-space:nowrap}
.fc-1{top:-22px;right:-12px;left:auto}
.fc-2{bottom:-30px;right:22px}
.fc-3{bottom:-30px;left:22px}
@media(max-width:1199.98px){.fc-1{right:0}.fc-2{right:8px}.fc-3{left:8px}}
@media(max-width:767.98px){.app-mock{margin-bottom:24px}.float-card{display:none}}
.hero-section h1{font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.2}
.hero-section .lead{font-size:1.08rem}

/* ---------- Kad ciri / pelan / langkah ---------- */
.feature-card{border:1px solid transparent;border-radius:18px}
.feature-card:hover{background:#fff;border-color:var(--bn-line)}
.plan-box{border-radius:20px}
.plan-featured{border:2px solid var(--bn-royal)!important;box-shadow:0 26px 56px -30px rgba(29,95,224,.6)!important}
.process-card .avatar-title{box-shadow:0 0 0 8px rgba(29,95,224,.06)}

/* ---------- Jadual perbandingan (responsif) ---------- */
.compare-card{overflow:hidden}
.compare-table{min-width:660px;margin:0}
.compare-table thead th{background:var(--bn-ice)!important;border-bottom:2px solid var(--bn-line);font-weight:700;white-space:nowrap}
.compare-table th,.compare-table td{border-color:var(--bn-line)}
.compare-table tbody tr:hover td:not(.table-primary-col){background:#FAFCFF}
.compare-table .table-primary-col{background:rgba(29,95,224,.07)!important}
.compare-table th:first-child,.compare-table td:first-child{position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 var(--bn-line);min-width:210px}
.compare-table thead th:first-child{background:var(--bn-ice)!important}
.compare-scroll{background:
  linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,
  linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,
  radial-gradient(farthest-side at 100% 50%,rgba(10,27,69,.2),transparent) right center/14px 100% no-repeat scroll}
@media(max-width:575.98px){
  .compare-table th,.compare-table td{padding:.7rem .75rem;font-size:.84rem}
  .compare-table th:first-child,.compare-table td:first-child{min-width:158px}
}

/* ---------- Tab kegunaan boleh dilayar di telefon ---------- */
@media(max-width:575.98px){
  #usecases .nav-pills{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start!important;padding:2px 2px 10px;margin-inline:-12px;padding-inline:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #usecases .nav-pills::-webkit-scrollbar{display:none}
  #usecases .nav-pills .nav-link{white-space:nowrap}
  .hero-ticks{flex-direction:column;align-items:flex-start;gap:.35rem}
  .hero-ticks li{display:block}
}

/* ---------- Butang chat: padat, tidak menutup kandungan ---------- */
.chat-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));padding:.95rem;gap:0}
.chat-fab .t{max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;transition:max-width .35s,margin .35s}
.chat-fab.expanded .t,.chat-fab:hover .t,.chat-fab:focus-visible .t{max-width:170px;margin-left:.6rem}
.landing-back-top{right:20px;bottom:calc(82px + env(safe-area-inset-bottom))}
.chat{right:16px;bottom:calc(84px + env(safe-area-inset-bottom))}
@media(max-width:575.98px){.chat-fab .t{display:none}.landing-back-top{right:16px}}

/* ---------- Pembetulan: banner pendek di telefon, jarak hero, butang hero ---------- */
.tn-text-short{display:none}
@media(max-width:575.98px){
  .tn-text{display:none}
  .tn-text-short{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:500}
  .hero-section{padding-top:calc(var(--tn-h) + 118px)}
}
@media(max-width:1199.98px){.hero-cta .btn-lg{padding:.75rem 1.25rem;font-size:.97rem;min-height:48px}}

/* ---------- Versi BM: tajuk & menu yang lebih panjang ---------- */
html[lang=ms] .hero-section h1{font-size:clamp(1.85rem,3.5vw,2.65rem);line-height:1.25}
@media(min-width:992px){
  .nav-actions{margin-left:.75rem}
  html[lang=ms] .navbar-landing .navbar-nav .nav-item .nav-link{padding:8px 8px;font-size:.84rem}
}

/* =====================================================================
   Banner hero gaya versi 1: navy bergradien, grid halus, tetingkap condong
   ===================================================================== */
.navbar-landing{background:#fff!important;box-shadow:0 6px 26px -18px rgba(10,27,69,.45)}
.hero-section{background:
  radial-gradient(1200px 600px at 85% -10%,rgba(56,189,248,.35),transparent 60%),
  radial-gradient(900px 600px at -10% 20%,rgba(47,107,255,.45),transparent 60%),
  linear-gradient(160deg,#0A1B45 0%,#0d2766 55%,#12338a 100%);color:#fff;overflow:hidden}
.hero-section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.hero-section h1{color:#fff}
.hero-section h1 .text-primary{background:linear-gradient(90deg,#7dd3fc,#a5b4fc 60%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hero-section .lead{color:#c8d8fb!important}
.hero-section .lead b{color:#fff}
.hero-pill{display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff!important;font-weight:600;letter-spacing:.02em;text-transform:none}
.hero-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.btn-hero-ghost{color:#fff;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-hero-ghost i{color:#4ade80}
.btn-hero-ghost:hover,.btn-hero-ghost:focus{color:#fff;background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-2px)}
.hero-ticks,.hero-ticks li{color:#b6c9f5!important}
.hero-ticks i{color:#4ade80!important}
.hero-section .tnc{color:#9fb6e8!important}
.hero-section .tnc a{color:#cfe0ff;text-decoration:underline}
.hero-section .btn-primary{box-shadow:0 18px 40px -12px rgba(56,139,255,.8),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.35)}
/* tetingkap produk condong (3D) — rata semula di tablet/telefon */
.app-mock{perspective:1200px}
.app-mock>.card{transform:rotateY(-8deg) rotateX(4deg);transition:transform .6s;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)!important}
.app-mock:hover>.card{transform:none}
@media(max-width:991.98px){.app-mock>.card{transform:none}}
.float-card{box-shadow:0 24px 50px -16px rgba(0,0,0,.5)}
.hero-section .hero-shape-svg svg path{fill:#fff}
.float-card{color:#0F1B3D}
.float-card .text-muted{color:#6b7a99!important}

/* =====================================================================
   LAPISAN TEMA — semua warna jenama dikawal oleh token di sini.
   Tema dikunci: Sapphire (hampir hitam + biru elektrik, aksen cyan).
   ===================================================================== */
html[data-theme-colors=blue]{ /* Sapphire (dikunci) */
  --vz-primary:#2B59FF;--vz-primary-rgb:43,89,255;--vz-primary-bg-subtle:rgba(43,89,255,.11);--vz-primary-border-subtle:rgba(43,89,255,.28);--vz-primary-text-emphasis:#1A3FD6;
  --vz-link-color:#2B59FF;--vz-link-color-rgb:43,89,255;--vz-link-hover-color:#1A3FD6;
  --t-dark:#060A18;--t-dark2:#0B1640;--t-glow1:rgba(0,209,255,.30);--t-glow2:rgba(43,89,255,.5);
  --t-ga:#5B82FF;--t-gb:#2B59FF;--t-gc:#1A3FD6;--t-text1:#5AE0FF;--t-text2:#9DB4FF;--t-dot:#00D1FF;
  --t-ice:#F5F8FF;--t-ice2:#E9EFFF;--t-line:#DCE4FA;--bn-navy:#060A18;--bn-ice:#F5F8FF;--bn-ice2:#E9EFFF;--bn-line:#DCE4FA;--bn-royal:#2B59FF;--bn-sky:#5AE0FF;
}

/* ---------- Peraturan yang membaca token ---------- */
.topbar-note{background:var(--t-dark)}
.hero-section{background:
  radial-gradient(1200px 600px at 85% -10%,var(--t-glow1),transparent 60%),
  radial-gradient(900px 600px at -10% 20%,var(--t-glow2),transparent 60%),
  linear-gradient(160deg,var(--t-dark) 0%,var(--t-dark2) 100%)}
.hero-section h1 .text-primary{background:linear-gradient(90deg,var(--t-text1),var(--t-text2) 60%,#fff);-webkit-background-clip:text;background-clip:text}
.hero-pill::before{background:var(--t-dot);box-shadow:0 0 0 0 var(--t-dot)}
.mock-line{background:linear-gradient(90deg,var(--vz-primary),var(--t-text1))}
.section-navy{background:
  radial-gradient(800px 420px at 85% -10%,var(--t-glow1),transparent 60%),
  radial-gradient(600px 420px at 0 100%,var(--t-glow2),transparent 60%),
  linear-gradient(170deg,var(--t-dark),var(--t-dark2))}
section.bg-primary{background:linear-gradient(120deg,var(--t-gb) 0%,var(--t-gc) 55%,var(--t-dark) 135%)!important}
.landing .bg-light{background:linear-gradient(180deg,var(--t-ice) 0%,var(--t-ice2) 100%)!important}
.custom-footer{background:var(--t-dark)!important}
.landing .card,.plan-box,.compare-table th,.compare-table td{border-color:var(--t-line)}
.compare-table thead th,.compare-table thead th:first-child{background:var(--t-ice)!important;border-bottom-color:var(--t-line)}
.compare-table .table-primary-col{background:rgba(var(--vz-primary-rgb),.07)!important}
.plan-featured{border-color:var(--vz-primary)!important;box-shadow:0 26px 56px -30px rgba(var(--vz-primary-rgb),.6)!important}

.btn-primary,.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,var(--t-ga) 0%,var(--t-gb) 55%,var(--t-gc) 100%)}
.btn-primary{box-shadow:0 12px 26px -12px rgba(var(--vz-primary-rgb),.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover,.btn-primary:focus{box-shadow:0 20px 34px -14px rgba(var(--vz-primary-rgb),.9),0 0 0 4px rgba(var(--vz-primary-rgb),.14),inset 0 1px 0 rgba(255,255,255,.35)}
.hero-section .btn-primary{box-shadow:0 18px 40px -12px rgba(var(--vz-primary-rgb),.85),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-outline-primary{border-color:rgba(var(--vz-primary-rgb),.4);color:var(--vz-primary)}
.btn-outline-primary:hover,.btn-outline-primary:focus{background:var(--vz-primary);border-color:var(--vz-primary);color:#fff;box-shadow:0 16px 28px -14px rgba(var(--vz-primary-rgb),.8)}
.btn-soft-primary{background:rgba(var(--vz-primary-rgb),.1);color:var(--vz-primary)}
.btn-soft-primary:hover{background:var(--vz-primary);color:#fff}
.lang-switch .btn.btn-primary{background:linear-gradient(135deg,var(--t-ga),var(--t-gb))}
.lang-switch .btn-outline-primary{border-color:rgba(var(--vz-primary-rgb),.25)}
.lang-switch .btn-outline-primary:hover{background:var(--t-ice2);color:var(--vz-primary)}
.chat-fab{background:linear-gradient(135deg,var(--t-ga),var(--t-gc));box-shadow:0 16px 34px -10px rgba(var(--vz-primary-rgb),.8)}
.chat-h{background:linear-gradient(135deg,var(--t-dark),var(--vz-primary))}
.tn-link{color:var(--vz-primary)}
.process-card .avatar-title{box-shadow:0 0 0 8px rgba(var(--vz-primary-rgb),.07)}

/* =====================================================================
   v3 — ikon & butang lebih moden, pautan langkau, akordion
   ===================================================================== */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:3000;background:#fff;color:var(--vz-primary);font-weight:700;padding:.6rem 1rem;border-radius:10px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);text-decoration:none}
.skip-link:focus{left:12px}
main{display:block}

/* ---------- Jubin ikon (menggantikan blob Velzon) ---------- */
.icon-effect{width:3.6rem;height:3.6rem}
.icon-effect::before{display:none!important}
.icon-effect .avatar-title{border-radius:18px!important;color:var(--vz-primary)!important;
  background:linear-gradient(145deg,rgba(var(--vz-primary-rgb),.16),rgba(var(--vz-primary-rgb),.04))!important;
  background:linear-gradient(145deg,rgba(var(--vz-primary-rgb),.16),color-mix(in srgb,var(--t-text1) 14%,transparent))!important;
  border:1px solid rgba(var(--vz-primary-rgb),.18);
  box-shadow:0 12px 24px -14px rgba(var(--vz-primary-rgb),.7),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .3s,background .3s,color .3s,box-shadow .3s}
.icon-effect .avatar-title i{font-size:1.7rem!important;line-height:1}
.feature-card:hover .icon-effect .avatar-title,.process-card:hover .icon-effect .avatar-title{
  background:linear-gradient(145deg,var(--t-ga),var(--t-gc))!important;color:#fff!important;border-color:transparent;transform:translateY(-3px) rotate(-5deg);
  box-shadow:0 18px 30px -14px rgba(var(--vz-primary-rgb),.95)}
.plan-box .avatar-title,.contact-card .avatar-title{border-radius:14px!important;color:var(--vz-primary)!important;
  background:linear-gradient(145deg,rgba(var(--vz-primary-rgb),.15),rgba(var(--vz-primary-rgb),.04))!important;border:1px solid rgba(var(--vz-primary-rgb),.16)}
.contact-card .avatar-title.bg-success-subtle{color:#128C4A!important;background:linear-gradient(145deg,rgba(37,211,102,.2),rgba(37,211,102,.06))!important;border-color:rgba(37,211,102,.25)}
.contact-card{transition:transform .25s,box-shadow .25s}
.contact-card:hover{transform:translateY(-3px)}
.section-navy .sec-card .avatar-title{border-radius:16px!important}
.share-tile{transition:.25s}
.share-tile:hover{background:#fff;transform:translateY(-3px);box-shadow:0 14px 26px -16px rgba(var(--vz-primary-rgb),.7)}

/* ---------- Tanda semak / senarai ---------- */
.hero-ticks i{display:inline-grid!important;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;font-size:.85rem;vertical-align:middle;
  color:var(--t-text1)!important;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.plan-box li .text-success{color:var(--vz-primary)!important}
.plan-box li .text-success i{font-size:1.1rem!important}
#usecases li .text-success{color:var(--vz-primary)!important}
.showcase-card .avatar-title{box-shadow:0 0 0 5px rgba(var(--vz-primary-rgb),.08)}

/* ---------- Butang: kilauan, ikon anak panah bulat, fokus ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.btn-primary::after,.btn-success::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.36) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn-primary:hover::after,.btn-success:hover::after{transform:translateX(120%)}
.btn i.ri-arrow-right-line{display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-left:.5rem!important;border-radius:50%;
  background:rgba(255,255,255,.2);font-size:.95em;line-height:1;vertical-align:middle;transition:transform .25s,background .25s}
.btn:hover i.ri-arrow-right-line{transform:translateX(4px);background:rgba(255,255,255,.32)}
.btn-outline-primary i.ri-arrow-right-line,.btn-soft-primary i.ri-arrow-right-line{background:rgba(var(--vz-primary-rgb),.12)}
.btn-outline-primary:hover i.ri-arrow-right-line{background:rgba(255,255,255,.25)}
.btn i.ri-whatsapp-line{font-size:1.25em;vertical-align:-.12em}
.btn-light i.ri-arrow-right-line{background:rgba(var(--vz-primary-rgb),.12)}
.btn-hero-ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.btn-hero-ghost:hover i{transform:scale(1.12)}
.btn-hero-ghost i{transition:transform .2s}
.btn-sm{border-radius:11px}
#installNav i,#installBtn{vertical-align:middle}
.landing-back-top{width:46px;height:46px;border-radius:50%!important;border:0;display:none;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--t-ga),var(--t-gc))!important;box-shadow:0 14px 28px -10px rgba(var(--vz-primary-rgb),.85),0 0 0 4px rgba(var(--vz-primary-rgb),.12)}
.landing-back-top[style*="block"]{display:grid!important}
.landing-back-top:hover{transform:translateY(-3px)}
.chat-fab{box-shadow:0 18px 36px -12px rgba(var(--vz-primary-rgb),.85),0 0 0 1px rgba(255,255,255,.18) inset}
.quick button{box-shadow:0 4px 10px -8px rgba(var(--vz-primary-rgb),.6)}
.chat-f button{border-radius:12px;background:linear-gradient(135deg,var(--t-ga),var(--t-gc))}

/* ---------- Navigasi: garis bawah bergerak ---------- */
@media(min-width:992px){
  .navbar-landing .navbar-nav .nav-link{position:relative}
  .navbar-landing .navbar-nav .nav-link::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--vz-primary),var(--t-text1));transform:scaleX(0);transform-origin:left;transition:transform .3s}
  .navbar-landing .navbar-nav .nav-link:hover::after,.navbar-landing .navbar-nav .nav-link.active::after{transform:scaleX(1)}
}

/* ---------- Akordion FAQ ---------- */
#faq .accordion-item{border:1px solid var(--t-line)!important;border-radius:14px!important;margin-bottom:10px;overflow:hidden;background:#fff;
  box-shadow:0 10px 24px -22px rgba(10,27,69,.5);transition:border-color .25s,box-shadow .25s}
#faq .accordion-item:hover{border-color:rgba(var(--vz-primary-rgb),.35)}
#faq .accordion-item:has(.accordion-button:not(.collapsed)){border-color:var(--vz-primary)!important;box-shadow:0 20px 40px -26px rgba(var(--vz-primary-rgb),.6)}
#faq .accordion-button{padding:1rem 1.15rem;background:transparent;box-shadow:none;border-radius:0}
#faq .accordion-button:not(.collapsed){color:var(--vz-primary);background:rgba(var(--vz-primary-rgb),.05)}
#faq .accordion-body{padding:1rem 1.15rem 1.2rem;line-height:1.7}

/* ---------- Lencana / eyebrow ---------- */
.badge.bg-primary-subtle.text-uppercase{border:1px solid rgba(var(--vz-primary-rgb),.18)}

/* ---------- Chevron akordion FAQ guna Remix Icon (elak muat fon Material Design 397 KB) ---------- */
.custom-accordionwithicon .accordion-button::after{font-family:remixicon!important;content:"\ea4e";font-size:1.25rem;line-height:1;margin-right:0;vertical-align:middle;transform:none;transition:transform .25s}
.custom-accordionwithicon .accordion-button:not(.collapsed)::after{font-family:remixicon!important;content:"\ea4e";margin-right:0;transform:rotate(180deg)}

/* Logo footer: tinggi tetap, lebar mengikut nisbah (tidak meregang) */
.custom-footer .footer-logo{height:30px;width:auto;max-width:100%}
/* Ruang bawah footer supaya butang chat tidak menutup pautan terma & privasi */
.custom-footer{padding-bottom:5.5rem!important}

/* ---------- Lencana pelan: "Recommended for ..." ---------- */
.plan-badge{padding:.5rem 1rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.02em;text-transform:none;white-space:nowrap;z-index:2}
.plan-badge-main{color:#fff;background:linear-gradient(135deg,var(--t-ga),var(--t-gc));box-shadow:0 10px 22px -10px rgba(var(--vz-primary-rgb),.9)}
.plan-badge-soft{color:var(--vz-primary);background:#fff;border:1.5px solid rgba(var(--vz-primary-rgb),.35);box-shadow:0 8px 18px -12px rgba(var(--vz-primary-rgb),.6)}
@media(max-width:380px){.plan-badge{font-size:.68rem;padding:.45rem .8rem}}

/* =====================================================================
   Halaman undang-undang (/terma/, /privasi/) — dwibahasa melalui [data-l]
   ===================================================================== */
html[lang=ms] [data-l=en]{display:none!important}
html:not([lang=ms]) [data-l=ms]{display:none!important}
.legal-page{background:#fff;-webkit-font-smoothing:antialiased}
.legal-nav{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--t-line);padding:.7rem 0}
.legal-nav img{height:26px;width:auto}
.legal-hero{padding:64px 0 52px;color:#fff;background:
  radial-gradient(900px 480px at 85% -20%,var(--t-glow1),transparent 60%),
  radial-gradient(700px 480px at -10% 30%,var(--t-glow2),transparent 60%),
  linear-gradient(160deg,var(--t-dark) 0%,var(--t-dark2) 100%)}
.legal-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:.6rem}
.legal-hero p{color:#c8d8fb}
.legal-wrap{padding-top:2.5rem;padding-bottom:4rem}
.legal-toc{position:sticky;top:84px;border:1px solid var(--t-line);border-radius:16px;padding:1.1rem;background:var(--t-ice)}
.legal-toc-title{font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vz-primary);margin-bottom:.6rem}
.legal-toc-list{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.legal-toc-list a{display:block;padding:.35rem .55rem;border-radius:8px;color:var(--vz-body-color);font-size:.88rem;text-decoration:none;line-height:1.35}
.legal-toc-list a:hover{background:#fff;color:var(--vz-primary)}
.legal-other{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--t-line);font-size:.9rem}
.legal-other a{font-weight:600;text-decoration:none}
.legal-intro{font-size:1.05rem;line-height:1.8;color:#2f3d5c;margin-bottom:.5rem}
.legal-sec{margin-top:2.2rem;scroll-margin-top:92px}
.legal-sec h2{font-size:1.3rem;display:flex;gap:.75rem;align-items:center;margin-bottom:.9rem}
.legal-sec h2 .num{display:inline-grid;place-items:center;flex:none;min-width:2rem;height:2rem;padding:0 .4rem;border-radius:10px;background:var(--vz-primary-bg-subtle);color:var(--vz-primary);font-size:.92rem;font-weight:700}
.legal-sec p,.legal-sec li{line-height:1.8;color:#3b4a6b}
.legal-sec ul{padding-left:1.2rem;display:grid;gap:.55rem;margin-bottom:.8rem}
.legal-sec a{color:var(--vz-primary);text-decoration:underline;text-underline-offset:2px}
.legal-sec table{font-size:.9rem}
.legal-sec code{color:var(--vz-primary);background:var(--vz-primary-bg-subtle);padding:.1rem .35rem;border-radius:5px}
.ph{background:#fff3b0;color:#6b4a00;padding:.05rem .35rem;border-radius:5px;font-weight:600;border:1px dashed #e0b800;font-size:.92em}
.legal-draft{border-radius:14px;margin-bottom:1.5rem}
.legal-footer{background:var(--t-dark);color:#9fb6e8;padding:1.4rem 0;font-size:.9rem}
.legal-footer a{color:#cfe0ff;text-decoration:none}
.legal-footer a:hover{color:#fff}
@media(max-width:991.98px){.legal-toc{position:static}.legal-hero{padding:48px 0 40px}}
@media print{
  .legal-nav,.legal-toc,.legal-footer,.legal-hero button,.skip-link,.legal-draft{display:none!important}
  .legal-hero{background:none!important;color:#000;padding:0 0 1rem}.legal-hero h1,.legal-hero p,.legal-hero .hero-pill{color:#000!important}
  .legal-hero .hero-pill{background:none;border:0;padding:0}
  .ph{background:none;border:0;color:#000}
}
.legal-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.legal-details summary::-webkit-details-marker{display:none}
.legal-details[open] summary{margin-bottom:.6rem}
@media(min-width:992px){.legal-details summary{cursor:default}}
@media(max-width:991.98px){.legal-details summary{cursor:pointer}.legal-details summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--vz-primary)}.legal-details[open] summary::after{content:"\2212"}}

/* ---------- Pembetulan paparan laptop: ruang bawah hero & penukar bahasa ---------- */
/* Gelombang SVG setinggi 8.33vw (viewBox 1440x120) menutup kandungan; beri ruang yang sepadan */
.hero-section{padding-bottom:calc(8.4vw + 3.2rem)!important}
.hero-ticks{margin-bottom:.5rem}
/* Elemen tindakan navigasi tidak boleh dimampatkan */
.lang-switch,.nav-actions>*{flex-shrink:0}
.lang-switch .btn{white-space:nowrap}
@media(min-width:992px) and (max-width:1399.98px){
  html[lang=ms] .navbar-landing .navbar-nav .nav-item .nav-link{padding:8px 6px;font-size:.82rem}
  html[lang=ms] .nav-actions{margin-left:.25rem;gap:.35rem!important}
  html[lang=ms] .nav-actions .btn-link{padding-left:.4rem;padding-right:.4rem}
}
.lang-switch .btn{transition:none!important}
@media(min-width:992px) and (max-width:1199.98px){.nav-actions .btn-link{display:none}}
@media(min-width:992px) and (max-width:1199.98px){
  .navbar-landing .navbar-nav .nav-item .nav-link{padding:8px 5px!important;font-size:.8rem!important}
  .navbar-landing .navbar-brand img{height:22px}
  .nav-actions .btn-primary{padding:.5rem .8rem;font-size:.82rem}
  .nav-actions .btn-primary i.ri-arrow-right-line{display:none}
}

/* Bahagian AI (Enterprise) */
.ai-card{position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.ai-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--t-ga),var(--t-text1))}
.ai-card:hover{transform:translateY(-5px)}

/* =====================================================================
   Borang hubungi (embed iframe)
   ===================================================================== */
.contact-embed{overflow:hidden;border-radius:20px;border:1px solid var(--t-line);box-shadow:0 24px 50px -32px rgba(var(--vz-primary-rgb),.45)!important}
.contact-embed-head{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:linear-gradient(135deg,var(--t-ice),#fff);border-bottom:1px solid var(--t-line)}
.contact-embed-body{position:relative;min-height:560px;background:#fff}
.contact-embed-body iframe{display:block;width:100%;min-width:100%;border:0;min-height:560px;opacity:0;transition:opacity .4s}
.contact-embed-body.loaded iframe{opacity:1}
.embed-skeleton{position:absolute;inset:0;padding:1.75rem 1.5rem;display:grid;align-content:start;gap:1.1rem;pointer-events:none;transition:opacity .3s}
.contact-embed-body.loaded .embed-skeleton{opacity:0;visibility:hidden}
.embed-skeleton span{display:block;height:48px;border-radius:12px;background:linear-gradient(90deg,#eef3fd 25%,#f8faff 37%,#eef3fd 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
.embed-skeleton span.short{width:42%;height:44px;border-radius:12px}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.contact-embed-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;justify-content:center;padding:.9rem 1.25rem;border-top:1px solid var(--t-line);background:var(--t-ice);font-size:.85rem;color:var(--vz-secondary-color)}
.contact-embed-foot a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:575.98px){
  .contact-embed{border-radius:16px}
  .contact-embed-head{padding:1rem 1.1rem}
  .contact-embed-body,.contact-embed-body iframe{min-height:520px}
}

/* =====================================================================
   Rangka borang hubungi v2 (menggantikan gaya .contact-embed-head / -foot)
   ===================================================================== */
.contact-embed{border:0!important;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -34px rgba(var(--vz-primary-rgb),.55),0 0 0 1px var(--t-line)!important}
.ce-head{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem 1.1rem;align-items:center;padding:1.6rem 1.75rem 1.4rem;color:#fff;
  background:radial-gradient(520px 220px at 100% -30%,var(--t-glow1),transparent 65%),radial-gradient(420px 220px at -10% 120%,var(--t-glow2),transparent 65%),linear-gradient(150deg,var(--t-dark),var(--t-dark2))}
.ce-head::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 85%);mask-image:linear-gradient(90deg,transparent,#000 85%)}
.ce-head>*{position:relative}
.ce-orb{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;font-size:1.7rem;color:#fff;background:linear-gradient(145deg,var(--t-ga),var(--t-gc));box-shadow:0 14px 28px -12px rgba(var(--vz-primary-rgb),.9),inset 0 1px 0 rgba(255,255,255,.35)}
.ce-eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t-text1)}
.ce-title{color:#fff;font-size:1.4rem;margin:.1rem 0 .25rem;letter-spacing:-.01em}
.ce-sub{margin:0;color:#c8d8fb;font-size:.92rem;line-height:1.55}
.ce-topics{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:.2rem 0 0;padding:0}
.ce-topics li{padding:.3rem .8rem;border-radius:999px;font-size:.76rem;font-weight:600;color:#e6efff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.contact-embed-body{padding:.5rem .5rem 0}
.embed-skeleton{padding:1.5rem 1.4rem}
.ce-foot{display:grid;gap:.45rem;text-align:center;padding:1rem 1.5rem 1.25rem;border-top:1px solid var(--t-line);background:var(--t-ice)}
.ce-note{margin:0;font-size:.82rem;line-height:1.55;color:var(--vz-secondary-color)}
.ce-note a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ce-lock{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;margin-right:.4rem;border-radius:50%;font-size:.8rem;color:var(--vz-primary);background:var(--vz-primary-bg-subtle);vertical-align:middle}
.ce-alt{margin:0;font-size:.8rem;color:var(--vz-secondary-color)}
.ce-alt a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:575.98px){
  .contact-embed{border-radius:18px}
  .ce-head{grid-template-columns:1fr;padding:1.25rem 1.1rem 1.1rem}
  .ce-orb{width:48px;height:48px;font-size:1.4rem;border-radius:14px}
  .ce-title{font-size:1.2rem}
  .contact-embed-body{padding:.25rem 0 0}
}

/* ---------- Rangka hubungi: pasukan dalam bingkai yang sama ---------- */
.ce-direct{padding:1.4rem 1.5rem 1.2rem;background:linear-gradient(180deg,#fff,var(--t-ice));border-top:1px solid var(--t-line)}
.ce-divider{position:relative;text-align:center;margin-bottom:1.1rem}
.ce-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--t-line)}
.ce-divider span{position:relative;display:inline-block;padding:0 .9rem;background:linear-gradient(180deg,#fff,#fbfdff);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vz-secondary-color)}
.ce-people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.ce-person{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"a i" "p p";gap:.7rem .8rem;align-items:center;padding:1rem;border:1px solid var(--t-line);border-radius:16px;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
.ce-person:hover{transform:translateY(-3px);border-color:rgba(var(--vz-primary-rgb),.35);box-shadow:0 18px 34px -24px rgba(var(--vz-primary-rgb),.6)}
.ce-avatar{grid-area:a;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-weight:700;color:var(--vz-primary);background:linear-gradient(145deg,rgba(var(--vz-primary-rgb),.16),rgba(var(--vz-primary-rgb),.05));border:1px solid rgba(var(--vz-primary-rgb),.16)}
.ce-pinfo{grid-area:i;min-width:0}
.ce-pname{font-weight:600;line-height:1.25}
.ce-pnum{font-size:.84rem;color:var(--vz-secondary-color);white-space:nowrap}
.ce-pact{grid-area:p;display:flex;gap:.5rem}
.ce-pact .btn-success{flex:1}
@media(max-width:991.98px){.ce-people{grid-template-columns:1fr}.ce-person{grid-template-columns:auto 1fr auto;grid-template-areas:"a i p"}.ce-pact{grid-area:p}.ce-pact .btn-success span{display:none}.ce-pact .btn-success{flex:none}}
@media(max-width:575.98px){.ce-direct{padding:1.1rem 1rem}.ce-person{padding:.85rem}}
.contact-embed-body{overflow:hidden}
.ce-jump{display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;padding:.45rem .5rem .45rem 1rem;border-radius:999px;font-size:.84rem;font-weight:600;color:#fff;text-decoration:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.ce-jump i{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(255,255,255,.2);font-size:1rem;transition:transform .25s}
.ce-jump:hover{color:#fff;background:rgba(255,255,255,.22);transform:translateY(-2px)}
.ce-jump:hover i{transform:translateY(3px)}
.ce-direct{scroll-margin-top:96px}

/* ---------- Rangka hubungi: dua lajur pada skrin lebar (borang kiri, pasukan kanan) ---------- */
.ce-people{grid-template-columns:1fr}
@media(min-width:992px){
  .ce-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:stretch}
  .ce-grid .contact-embed-body{min-width:0}
  .ce-grid .ce-direct{display:flex;flex-direction:column;justify-content:flex-start;padding:1.6rem 1.4rem;border-top:0;border-left:1px solid var(--t-line);background:linear-gradient(180deg,var(--t-ice),#fff)}
  .ce-grid .ce-divider{text-align:left;margin-bottom:1rem}
  .ce-grid .ce-divider::before{display:none}
  .ce-grid .ce-divider span{padding:0;background:none;font-size:.78rem}
  .ce-grid .ce-people{gap:.8rem}
  .ce-jump{display:none}
}
@media(max-width:991.98px){.ce-grid .ce-direct{border-top:1px solid var(--t-line)}}


/* =====================================================================
   Logo pelanggan: dua baris bergerak (arah berlawanan), kotak seragam
   ===================================================================== */
.clients{padding:3.5rem 0 1.5rem;overflow:hidden}
.clients-title{margin:0 0 1.6rem;font-size:1.15rem;font-weight:600;color:var(--vz-body-color)}
.marquee{display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{display:flex;overflow:hidden}
.marquee-track{display:flex;flex:none;width:max-content;gap:14px;margin:0;padding:0;list-style:none;animation:marquee 70s linear infinite;will-change:transform}
.marquee-row.rev .marquee-track{animation-direction:reverse;animation-duration:80s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.client-tile{flex:none;display:grid;place-items:center;width:176px;height:88px;padding:12px 18px;border-radius:18px;background:#fff;border:1px solid var(--t-line);box-shadow:0 10px 24px -20px rgba(var(--vz-primary-rgb),.5);transition:transform .3s,box-shadow .3s,border-color .3s}
.client-tile img{display:block;width:auto;height:auto;max-width:132px;max-height:52px;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.88;transition:filter .3s,opacity .3s}
.client-tile:hover{transform:translateY(-3px);border-color:rgba(var(--vz-primary-rgb),.35);box-shadow:0 18px 32px -20px rgba(var(--vz-primary-rgb),.6)}
.client-tile:hover img{filter:none;opacity:1}
@media(max-width:575.98px){
  .clients{padding:2.5rem 0 1rem}
  .client-tile{width:136px;height:72px;padding:10px 14px;border-radius:14px}
  .client-tile img{max-width:100px;max-height:42px}
  .marquee-track{animation-duration:55s}.marquee-row.rev .marquee-track{animation-duration:62s}
}
/* Gerakan dikurangkan: grid statik, tanpa pendua */
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-row{display:block}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;padding:0 12px}
  .client-tile[aria-hidden=true]{display:none}
}