/* =========================================================
   TEMA SEEDO — lapisan desain di atas site.css
   Halaman disusun sebagai panel-panel bingkai (framed) di atas latar abu-biru,
   judul bagian rata kiri, kartu bento, dan aksen biru.
   ========================================================= */
:root{
  --page:#EEF2F8; --panel:#fff; --panel-2:#F6F9FE;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --ring:0 0 0 1px var(--line);
  --lift:0 1px 2px rgba(15,30,61,.04),0 12px 32px -18px rgba(15,30,61,.18);
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--page);font-size:16px}
h1,h2,h3,h4,.logo,.stat b,.price b,.hd-stat b{font-family:'Plus Jakarta Sans','Inter',sans-serif}
h1{font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:800;letter-spacing:-.04em;line-height:1.1}
::selection{background:var(--coral);color:#fff}

/* ---------- Kicker = pill bertitik */
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;letter-spacing:.08em;font-weight:700;color:var(--coral);background:#fff;padding:.4rem .8rem .4rem .65rem;border-radius:999px;box-shadow:var(--ring);margin-bottom:1.1rem}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px var(--coral-l)}

/* ---------- Navigasi melayang */
.topbar{background:var(--coral)}
.nav,.page-home .nav:not(.scrolled),.nav.scrolled{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:14px}
.nav-inner{height:76px;padding:0 12px 0 24px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;box-shadow:var(--ring),0 10px 30px -20px rgba(15,30,61,.35);transition:.3s}
.nav.scrolled .nav-inner{background:rgba(255,255,255,.95);box-shadow:var(--ring),0 18px 40px -22px rgba(15,30,61,.4)}
.nav-links{gap:.35rem;font-size:.92rem}
.nav-links a{padding:.5rem .95rem;border-radius:10px;transition:.2s}
.nav-links a::after{display:none}
.nav-links a:hover,.nav-links a.active{background:var(--panel-2);color:var(--coral)}
.nav-cta .btn{padding:.7rem 1.2rem;border-radius:11px}
.lang-sw{display:flex;padding:3px;gap:2px;background:var(--panel-2);border-radius:11px;box-shadow:var(--ring)}
.lang-sw a{padding:.38rem .6rem;border-radius:8px;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted);transition:.2s}
.lang-sw a:hover{color:var(--ink)}
.lang-sw a.on{background:#fff;color:var(--coral);box-shadow:0 2px 6px -2px rgba(15,30,61,.25)}
.logo{font-size:1.55rem}
.logo .logo-img{display:block;height:52px;width:auto;max-width:280px;object-fit:contain}
footer .logo .logo-img{height:64px;max-width:320px}

/* ---------- Tombol */
.btn{border-radius:12px;font-weight:600}
.btn-primary{background:linear-gradient(180deg,#3B76F6,var(--coral));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 22px -10px var(--coral)}
.btn-primary:hover{background:var(--coral-d)}
.btn-line{border:0;box-shadow:var(--ring);background:#fff;padding:.9rem 1.6rem}
.btn-line:hover{background:var(--ink);color:#fff;box-shadow:none}

/* ---------- Hero dalam bingkai */
.hero{padding:1.5rem 0 1rem;overflow:visible}
.hero-bg{display:none}
.hero>.container{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;padding:4.5rem 3.5rem 4rem;background:linear-gradient(160deg,#fff 0%,#F3F7FF 45%,#E6EFFF 100%);box-shadow:var(--ring),0 30px 70px -45px rgba(37,99,235,.45)}
.hero>.container::before{content:"";position:absolute;z-index:-1;inset:0;background:
  radial-gradient(ellipse 45% 55% at 82% 35%,rgba(37,99,235,.22),transparent 70%),
  radial-gradient(ellipse 30% 40% at 95% 90%,rgba(56,189,248,.22),transparent 70%),
  radial-gradient(ellipse 30% 35% at 55% 0%,rgba(99,102,241,.14),transparent 70%)}
.hero>.container::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 78% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 78% 40%,#000,transparent 75%)}
.slide{grid-template-columns:.9fr 1.1fr;gap:3.5rem}
.slide:has(.v-dashboard){grid-template-columns:.8fr 1.2fr;gap:3rem}
.eyebrow{box-shadow:var(--ring),0 8px 20px -14px rgba(37,99,235,.5);border:0;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);font-size:.8rem;color:var(--ink-2)}
.eyebrow+h1{margin-top:1.5rem}
.lead{font-size:1.2rem;color:var(--ink-2)}

/* Hero premium: kata bergradasi, poin dalam kartu, tombol ganda, bukti sosial */
.hero h1 .hl{background:linear-gradient(100deg,#1D4ED8 0%,#3B82F6 45%,#38BDF8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.hero-checks{grid-template-columns:1fr 1fr;gap:.55rem;margin-top:2rem;max-width:460px}
.hero-checks li{background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border-radius:12px;padding:.65rem .75rem;box-shadow:var(--ring);font-size:.88rem;color:var(--ink);gap:.6rem;white-space:nowrap;transition:.25s}
.hero-checks li:hover{transform:translateY(-2px);box-shadow:var(--ring),0 12px 24px -16px rgba(37,99,235,.55)}
.hero-checks li::before{width:20px;height:20px;border-radius:6px;background-size:12px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.hero-actions .btn{padding:1rem 1.9rem}
.hero-actions .btn-line{gap:.6rem}
.hero-actions .btn-line::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 7l8 5-8 5z'/%3E%3C/svg%3E") center/14px no-repeat;transition:.25s}
.hero-actions .btn-line:hover::before{background-color:#fff}
.hero-proof{display:flex;align-items:center;gap:.9rem;margin-top:2rem}
.hp-avs{display:flex}
.hp-avs .av{width:34px;height:34px;font-size:.6rem;letter-spacing:-.02em;border:2.5px solid #fff;margin-left:-9px;box-shadow:0 4px 10px -4px rgba(15,30,61,.35)}
.hp-avs .av:first-child{margin-left:0}
.hp-txt{font-size:.88rem;color:var(--ink-2);line-height:1.35}
.hp-stars{display:block;color:#F5B83D;letter-spacing:2px;font-size:.85rem}

/* Visual dashboard: cahaya, bingkai kaca, kartu kaca */
.v-dashboard::before{content:"";position:absolute;inset:8% 4% 12%;border-radius:50%;background:radial-gradient(ellipse,rgba(37,99,235,.35),transparent 70%);filter:blur(40px);z-index:0}
.v-dashboard .hd{z-index:1}
.v-dashboard .hd-scale::before{content:"";position:absolute;inset:-10px;border-radius:30px;background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 40px 80px -40px rgba(15,30,61,.5);backdrop-filter:blur(10px)}
.v-dashboard .hd-win{box-shadow:0 0 0 1px rgba(15,30,61,.06),0 20px 40px -24px rgba(15,30,61,.35)}
.v-dashboard .hd-stats{margin-top:4px}
.v-dashboard .hd-stat{background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 48px -26px rgba(15,30,61,.45)}
.v-dashboard .fc{z-index:5;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.95);box-shadow:0 20px 40px -20px rgba(15,30,61,.45);padding:.7rem .95rem;border-radius:14px}
.v-dashboard .fc b{font-size:.88rem}
.v-dashboard .fc small{font-size:.74rem}
.v-dashboard .fc-ic{width:36px;height:36px;border-radius:11px}
.v-dashboard .fc-ic .ic{width:19px;height:19px}
.v-dashboard .fc.pos-tr{right:-22px;top:4%}
.v-dashboard .fc.pos-tl{left:-40px;top:66%;animation-delay:-2.5s}
.slider-tabs{border-top-color:rgba(15,30,61,.08)}

/* ---------- Logo pelanggan: strip panel */
.logos{padding:1rem 0 0}
.logos-in{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2rem;background:#fff;border-radius:var(--r-md);box-shadow:var(--ring);padding:1.1rem 1.6rem}
.logos p{margin:0;text-align:left;font-size:.85rem;font-weight:600;color:var(--muted);max-width:180px;line-height:1.35;padding-right:2rem;border-right:1px solid var(--line)}
.track{gap:3.5rem}
.brand{font-size:1.1rem;color:#9AA7BD}
.brand i{width:22px;height:22px;background:#D5DEEB}

/* ---------- Bagian umum */
.section{padding:6rem 0}
.sec-head{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:end;text-align:left;max-width:none;margin:0 0 3rem}
.sec-head.no-lead{grid-template-columns:1fr;max-width:720px}
.sec-head h2{max-width:640px}
.sec-head p{margin:0;font-size:1.05rem;color:var(--ink-2);padding-bottom:.35rem}
.content-sec .sec-head{grid-template-columns:1fr;text-align:center;max-width:760px;margin-inline:auto}
.card{border:0;box-shadow:var(--ring),var(--lift)}

/* ---------- Statistik: kartu bento */
.stats{background:none;color:var(--ink);padding:0;border-radius:0;gap:1rem;overflow:visible;margin-top:1rem}
.stats::before,.stats::after{display:none}
.stat{position:relative;background:#fff;border-radius:var(--r-md);box-shadow:var(--ring);padding:1.7rem 1.6rem 1.6rem;transition:.3s}
.stat:hover{transform:translateY(-4px);box-shadow:var(--ring),var(--lift)}
.stat:first-child{background:linear-gradient(150deg,#2F6FF0,#1D4ED8);color:#fff;box-shadow:0 20px 40px -22px var(--coral)}
.stat b{font-size:clamp(2rem,3.4vw,2.7rem);color:inherit}
.stat b span{color:inherit}
.stat b em{color:var(--coral)}
.stat:first-child b em{color:#BFD6FF}
.stat>span{color:var(--muted);font-size:.92rem;font-weight:500}
.stat:first-child>span{color:#D5E3FF}

/* ---------- Tab fitur: kontrol segmen */
.ftabs{display:flex;width:max-content;max-width:100%;margin:0 0 1.5rem;padding:5px;gap:4px;background:#fff;border-radius:14px;box-shadow:var(--ring);flex-wrap:wrap;justify-content:flex-start}
.ftab{border:0;background:none;border-radius:10px;padding:.65rem 1.1rem;font-weight:600;font-size:.92rem}
.ftab:hover{background:var(--panel-2);border:0}
.ftab.active{background:var(--ink);color:#fff;box-shadow:0 8px 18px -10px rgba(15,30,61,.6)}
.fpanel{border:0;border-radius:var(--r-lg);box-shadow:var(--ring);padding:2.5rem;grid-template-columns:.85fr 1.15fr}
.fpanel h3{font-size:clamp(1.5rem,2.3vw,1.95rem)}
.stage{border-radius:var(--r-md);background-image:radial-gradient(rgba(37,99,235,.13) 1px,transparent 1px);background-size:18px 18px}
.st-sand,.st-lilac,.st-mint,.st-sky{background-color:var(--panel-2)}
.checks li::before{border-radius:7px}

/* ---------- Blok solusi */
.split-visual{border-radius:var(--r-lg);box-shadow:var(--ring);background-image:radial-gradient(rgba(37,99,235,.12) 1px,transparent 1px);background-size:18px 18px}
.platforms span{border:0;box-shadow:var(--ring)}

/* ---------- Aplikasi chat */
.appshow::before{display:none}
.app-stage{background:#fff;border-radius:32px;box-shadow:var(--ring);padding:2.5rem;gap:3rem}
.am-tab{border-radius:16px}
.am-tab:hover{background:var(--panel-2);border-color:transparent}
.am-tab.active{background:var(--panel-2);box-shadow:none;border-color:transparent}
.am-tab.active::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--app)}
.am-ic{border:0;box-shadow:var(--ring)}
.app-phone-wrap{background:linear-gradient(160deg,#EAF1FF,#F6F9FF);border-radius:24px;padding:2.5rem 0}
.ap-glow{opacity:.18}
.step{border:0;box-shadow:var(--ring);border-radius:var(--r-md)}
.step-no{color:var(--coral-l)}
.step-ic{border-radius:12px}
.app-steps{text-align:left}

/* ---------- Integrasi: panel navy dalam bingkai */
.integ{padding:2rem 0}
.integ-panel{border-radius:32px;padding:4rem;gap:3rem;background:radial-gradient(ellipse at 85% 10%,rgba(59,118,246,.45),transparent 55%),linear-gradient(160deg,#13264D,#0B1733)}
.integ-panel::before{width:auto;height:auto;inset:0;border-radius:0;filter: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 75% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 75% 50%,#000,transparent 70%)}
.dark .kicker{background:rgba(255,255,255,.08);color:#9CC2FF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.dark .kicker::before{background:#9CC2FF;box-shadow:0 0 0 3px rgba(156,194,255,.2)}
.orb-ring{border-color:rgba(156,194,255,.22)}
.orb-core{border-radius:26px}

/* ---------- Testimoni: teks berjalan dua arah (selebar layar) */
.tq{width:100vw;margin-left:calc(50% - 50vw);display:grid;gap:1.4rem;padding:.5rem 0}
.tq-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tq-track{display:flex;width:max-content;animation:tqScroll var(--dur,60s) linear infinite}
.tq-row:hover .tq-track{animation-play-state:paused}
.tq-set{display:flex;align-items:center;flex:none}
@keyframes tqScroll{to{transform:translateX(-50%)}}

/* Baris angka: teks besar bergaris tepi, bergerak ke kanan */
.tq-metrics .tq-track{--dur:45s;animation-direction:reverse}
.tq-metric{display:flex;align-items:baseline;gap:.9rem;padding:0 2.2rem;white-space:nowrap;font:700 clamp(1.1rem,1.8vw,1.4rem)/1 'Plus Jakarta Sans',sans-serif;color:var(--muted)}
.tq-metric b{font-size:clamp(2.8rem,6vw,4.6rem);font-weight:800;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--coral);transition:color .3s}
.tq-metric:hover b{color:var(--coral)}
.tq-metric::after{content:"✦";margin-left:2.2rem;font-size:1.4rem;color:var(--coral);align-self:center}

/* Baris kutipan: tanpa kotak, dipisah garis tipis */
.tq-quotes .tq-set{align-items:stretch}
.tq-quote{width:min(440px,80vw);margin:0;padding:.4rem 2.4rem;border-left:1px solid var(--line);display:grid;gap:.9rem;align-content:start}
.tq-quote blockquote{font:600 1.12rem/1.5 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;color:var(--ink);white-space:normal}
.tq-quote figcaption{display:flex;align-items:center;gap:.7rem}
.tq-quote figcaption .av{width:38px;height:38px}
.tq-quote figcaption b{display:block;font-size:.92rem}
.tq-quote figcaption small{display:block;color:var(--muted);font-size:.8rem}
.stars{color:#F5B83D;letter-spacing:2px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){
  .tq-track{animation:none}
  .tq-row{overflow-x:auto}
  .tq-set[aria-hidden]{display:none}
}

/* ---------- Harga */
.bill{justify-content:flex-start}
.bill-seg{border:0;box-shadow:var(--ring);border-radius:14px}
.bill-seg button{border-radius:10px}
.bill-seg button.on{background:var(--ink)}
.save{background:var(--coral-l);color:var(--coral-d)}
.plans{gap:1rem}
.plan{border:0;box-shadow:var(--ring);border-radius:var(--r-lg);padding:2rem}
.plan.pop{background:linear-gradient(165deg,#2F6FF0,#1D4ED8 60%,#1E3A8A);border:0;transform:none;box-shadow:0 30px 60px -30px var(--coral)}
.plan.pop .muted,.plan.pop .checks li{color:#DCE7FF}
.plan.pop .price span{color:#BFD3FF}
.plan.pop .btn-primary{background:#fff;color:var(--coral-d);box-shadow:none}
.plan.pop .checks li::before{background-color:rgba(255,255,255,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E")}
.badge{left:auto;right:1.5rem;transform:none;top:1.6rem;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.plan .btn{margin:1.4rem 0}
.enterprise{background:#fff;box-shadow:var(--ring);border-radius:var(--r-md)}

/* ---------- FAQ: dua kolom */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side .sec-head{grid-template-columns:1fr;margin:0}
.faq{max-width:none;margin:0;gap:0;background:#fff;border-radius:var(--r-lg);box-shadow:var(--ring);padding:.5rem 1.8rem}
.faq details{background:none;border:0;border-radius:0;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq details[open]{box-shadow:none}
.faq summary{font-size:1rem;font-weight:600}
.faq summary::after{content:"";width:28px;height:28px;border-radius:9px;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat}
.faq details[open] summary::after{transform:rotate(180deg);background-color:var(--coral-l)}
.faq details p{font-size:.95rem}

/* ---------- CTA: panel terbagi */
.cta{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;text-align:left;border-radius:32px;padding:4rem;
  background:radial-gradient(ellipse at 100% 0%,rgba(124,196,255,.45),transparent 50%),linear-gradient(150deg,#2F6FF0,#1D4ED8 55%,#1E3A8A)}
.cta::before{background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse at 80% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 80% 50%,#000,transparent 70%)}
.cta h2{margin:0;max-width:none}
.cta p{margin:1rem 0 0;max-width:none}
.cta-act{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:1.5rem;backdrop-filter:blur(8px)}
.cta .signup{margin:0;max-width:none;border-radius:14px;padding:.4rem;box-shadow:none}
.cta .signup .btn{border-radius:10px}
.cta .note{justify-content:flex-start;margin-top:1rem}
.cta-act>.btn{width:100%}
.bub{display:none}

/* ---------- Footer terang */
footer{background:transparent;color:var(--ink-2);padding:0 0 1.5rem;margin-top:5rem}
footer>.container{position:relative;overflow:hidden;background:#fff;border-radius:32px;box-shadow:var(--ring);padding:3.5rem 3rem 1.5rem}
footer .logo{color:var(--ink)}
footer h4{color:var(--ink);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
footer a:hover{color:var(--coral)}
.social a{background:var(--panel-2);color:var(--ink);border-radius:10px}
.social a:hover{background:var(--coral)}
.f-bottom{border-top-color:var(--line);margin-top:3rem;color:var(--muted)}
.f-mark{font:800 clamp(5rem,17vw,14rem)/.8 'Plus Jakarta Sans',sans-serif;letter-spacing:-.07em;text-align:center;margin:2rem 0 -1.6rem;background:linear-gradient(180deg,var(--coral-l),rgba(224,234,255,0));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;pointer-events:none}

/* ---------- Live chat */
.lc-launch{border-radius:18px;background:linear-gradient(180deg,#3B76F6,var(--coral))}
.lc-badge{border-color:var(--page)}
.lc-panel{border-radius:22px}
.lc-head{background:linear-gradient(150deg,#2F6FF0,#1D4ED8)}
.lc-head::after{background:#7CC4FF}

/* ---------- Responsif */
@media (max-width:1024px){
  .hero>.container{padding:3rem 2rem}
  .slide,.slide:has(.v-dashboard),.fpanel{grid-template-columns:1fr}
  .v-dashboard{margin-top:1rem}
  .sec-head{grid-template-columns:1fr;gap:1rem}
  .faq-grid{grid-template-columns:1fr;gap:2rem}
  .faq-side{position:static}
  .cta{grid-template-columns:1fr;gap:2rem;padding:3rem 2rem}
  .integ-panel{padding:3rem 2rem}
  .app-stage{padding:1.5rem}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-links{top:90px;left:20px;right:20px;border:0;border-radius:16px;background:#fff;box-shadow:var(--ring),var(--lift);padding:.5rem}
  .nav-links a{border-bottom:0}
}
@media (max-width:640px){
  .nav-inner{padding:0 8px 0 16px;height:64px;gap:.6rem}
  .logo .logo-img{height:38px;max-width:150px}
  .nav-cta{gap:.5rem}
  .lang-sw a{padding:.32rem .45rem;font-size:.72rem}
  .hero{padding-top:1rem}
  .hero>.container{padding:2.2rem 1.25rem 2rem;border-radius:24px}
  .v-dashboard .fc{display:none}
  .hero-checks li{font-size:.85rem;padding:.6rem .7rem}
  .logos-in{grid-template-columns:1fr;gap:.8rem;padding:1rem}
  .logos p{border-right:0;padding:0;max-width:none;text-align:center}
  .section{padding:4rem 0}
  .stats{padding:0;gap:.7rem}
  .stat{padding:1.4rem 1.1rem}
  .fpanel{padding:1.4rem}
  .ftabs{width:100%}
  .cta{padding:2.2rem 1.25rem;border-radius:24px}
  .cta-act{padding:1rem}
  .integ-panel{padding:2.2rem 1.25rem;border-radius:24px}
  .faq{padding:.25rem 1.1rem}
  footer>.container{padding:2.5rem 1.25rem 1.2rem;border-radius:24px}
  .f-mark{margin-bottom:-1rem}
}
@media (max-width:420px){
  .logo .logo-img{height:30px;max-width:116px}
  .nav-cta .btn{padding:.55rem .8rem;font-size:.85rem}
}

/* =========================================================
   MOBILE — kolom hero boleh menyempit, teks boleh turun baris
   ========================================================= */
.slide>*{min-width:0}
.hero-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){
  .eyebrow{max-width:100%;white-space:normal;line-height:1.35;font-size:.74rem;padding:.4rem .8rem;align-items:flex-start}
  .eyebrow .pulse{margin-top:.3em}
  .eyebrow+h1{margin-top:1.1rem}
  .hero h1{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .lead{font-size:1.05rem}
  .hero-checks{gap:.45rem;margin-top:1.5rem}
  .hero-checks li{white-space:normal;line-height:1.25;font-size:.82rem;padding:.6rem .65rem;gap:.5rem}
  .hero-checks li::before{width:18px;height:18px;background-size:11px}
  .hero-actions{gap:.55rem;margin-top:1.6rem}
  .hero-actions .btn{flex:1 1 140px;padding:.9rem 1rem;font-size:.95rem}
  .hero-proof{gap:.7rem;margin-top:1.5rem}
  .hp-avs .av{width:30px;height:30px;font-size:.55rem}
  .hp-txt{font-size:.82rem;min-width:0}
  .v-dashboard .hd-stats{margin:4px 4px 0}
}
@media (max-width:480px){
  /* Header: tombol CTA disembunyikan (sudah ada di hero) agar logo, bahasa & menu muat */
  .nav-cta>.btn{display:none}
  .nav-inner{padding:0 6px 0 14px}
}
@media (max-width:360px){
  .hero-checks{grid-template-columns:1fr}
}
@media (max-width:1024px){
  /* Tinggi visual dashboard mengikuti isinya (tanpa ruang kosong) */
  .visual.v-dashboard{height:auto;margin-top:1.5rem}
  .v-dashboard .hd{position:relative;inset:auto}
}
/* FAQ: ikon panah tetap tampil saat terbuka (aturan site.css memakai "background" singkat yang menghapus gambar) */
.faq details[open] summary::after{background:var(--coral-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat;color:inherit}

/* Orbit integrasi: jari-jari mengikuti lebar orbit (bukan lebar layar) agar tidak keluar panel */
.orbit{container-type:inline-size;width:min(480px,100%)}
.r1 .it{--rad:calc(50cqw - 30px)}
.r2 .it{--rad:calc(28cqw)}
@media (max-width:640px){
  .orb-ring .it{width:44px;height:44px;margin:-22px}
  .orb-ring .it>span{border-radius:13px;font-size:.72rem}
  .r1 .it{--rad:calc(50cqw - 24px)}
}
@media (max-width:640px){footer .logo .logo-img{height:46px;max-width:200px}}
/* Watermark footer berbentuk logo: gambar tak terlihat menentukan ukuran, warnanya dari gradasi yang di-mask bentuk logo */
.f-mark-logo{line-height:0;text-align:center;margin:2.5rem 0 -1.3rem;background:none;-webkit-text-fill-color:initial}
.f-mark-logo span{display:inline-block;width:min(820px,86%);background:linear-gradient(180deg,#D3E1FF 0%,#E4ECFF 45%,rgba(228,236,255,0) 92%);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.f-mark-logo img{display:block;width:100%;height:auto;visibility:hidden}
@media (max-width:640px){.f-mark-logo{margin:2rem 0 -.8rem}.f-mark-logo span{width:92%}}

/* =========================================================
   EFEK DI MOBILE & LAYAR SENTUH
   ========================================================= */
/* Efek kaca (blur) di iPhone/Safari butuh prefix -webkit- */
.eyebrow{-webkit-backdrop-filter:blur(8px)}
.hero-checks li{-webkit-backdrop-filter:blur(6px)}
.v-dashboard .hd-scale::before{-webkit-backdrop-filter:blur(10px)}
.badge{-webkit-backdrop-filter:blur(6px)}
.cta-act{-webkit-backdrop-filter:blur(8px)}

@media (max-width:640px){
  /* Kartu melayang tetap tampil (versi ringkas) */
  .v-dashboard .fc,.app-phone-wrap .fc,.v-app .fc,.v-browser .fc{display:flex}
  .visual .fc,.app-phone-wrap .fc{padding:.45rem .6rem;gap:.45rem;border-radius:11px;max-width:64%}
  .visual .fc b,.app-phone-wrap .fc b{font-size:.7rem}
  .visual .fc small,.app-phone-wrap .fc small{font-size:.6rem;line-height:1.3}
  .visual .fc .fc-ic,.app-phone-wrap .fc .fc-ic{width:26px;height:26px;border-radius:8px;font-size:.8rem}
  .visual .fc .fc-ic .ic,.app-phone-wrap .fc .fc-ic .ic{width:14px;height:14px}
  .v-dashboard .fc.pos-tr{top:-20px;right:-6px}
  .v-dashboard .fc.pos-tl{top:22%;bottom:auto;left:-8px}
  .app-phone-wrap .fc.pos-bl{left:-4px;bottom:22%}
  .app-phone-wrap .fc.pos-br{right:-4px;bottom:6%}
  .app-phone-wrap .fc.pos-tl{left:-4px;top:30%}
  .app-phone-wrap .fc.pos-tr{right:-4px;top:30%}
  /* Kartu statistik dashboard tetap mengambang */
  .hd-stat{animation:floaty 6s ease-in-out infinite}
  .hd-stat+.hd-stat{animation-delay:-3s}
  /* Aplikasi Chat: menu 1 kolom; tab aktif membuka deskripsi & poin seperti di desktop */
  .app-menu{grid-template-columns:1fr;gap:.4rem}
  .am-tab{flex-direction:row;gap:.85rem;padding:.85rem 1rem}
  .am-ic{width:42px;height:42px;border-radius:13px}
  .app-menu .am-tab.active .am-txt p{display:block!important;font-size:.88rem}
  .app-menu .am-tab.active .am-txt .checks{display:grid!important;font-size:.86rem}
}

/* Layar sentuh: pengganti efek hover */
@keyframes tqFill{0%,30%{color:transparent}45%,80%{color:var(--coral)}100%{color:transparent}}
@media (hover:none){
  /* Angka testimoni terisi warna bergantian otomatis */
  .tq-metric b{animation:tqFill 7s ease-in-out infinite}
  .tq-metric:nth-child(3n+2) b{animation-delay:-2.3s}
  .tq-metric:nth-child(3n) b{animation-delay:-4.6s}
  /* Teks/logo berjalan: ketuk untuk jeda (hover "lengket" di HP tidak dipakai) */
  .tq-row:hover .tq-track,.marquee:hover .track{animation-play-state:running}
  .tq-row.is-paused .tq-track,.marquee.is-paused .track{animation-play-state:paused}
  /* Hover lengket setelah tap dinetralkan, diganti efek saat ditekan */
  .btn-primary:hover,.btn-dark:hover,.btn-white:hover{transform:none}
  .btn-line:hover{background:#fff;color:var(--ink);box-shadow:var(--ring)}
  .hero-actions .btn-line:hover::before{background-color:var(--coral)}
  .stat:hover,.step:hover,.hero-checks li:hover{transform:none}
  .btn{transition:transform .12s,background .2s,box-shadow .2s}
  .btn:active{transform:scale(.96)}
  .btn-line:active{background:var(--ink);color:#fff}
  .hero-actions .btn-line:active::before{background-color:#fff}
  .stat:active,.step:active,.hero-checks li:active,.plan:active,.am-tab:active,.ftab:active{transform:translateY(-3px) scale(.99);box-shadow:var(--ring),var(--lift)}
  .link-arrow:active .ic{transform:translateX(4px)}
  .lc-launch:active{transform:scale(.92)}
  .faq summary:active,.lang-sw a:active,.nav-links a:active{opacity:.7}
}
/* Watermark footer (SVG inline): tampil di semua browser termasuk Safari iOS */
.f-mark-svg{display:block;width:min(820px,86%);height:auto;margin:0 auto;overflow:visible}
@media (max-width:640px){.f-mark-svg{width:92%}}
@media (max-width:640px){
  /* Watermark lebih jelas di layar kecil */
  .f-mark-logo{margin:1.8rem 0 -.2rem}
  .f-mark-svg{width:100%}
  .f-mark-svg stop:nth-child(1){stop-color:#BCD0FF}
  .f-mark-svg stop:nth-child(2){stop-color:#D2E0FF}
  .f-mark-svg stop:nth-child(3){stop-color:#DCE7FF;stop-opacity:.15}
}

/* =========================================================
   CEGAH GESER KIRI-KANAN DI HP
   ========================================================= */
/* "clip" memotong konten yang keluar layar tanpa membuat area scroll baru
   (header sticky & deteksi scroll tetap berfungsi). Didukung Safari iOS 16+, Chrome 90+. */
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
/* Testimoni selebar layar: dihitung dari lebar halaman (bukan 100vw yang bisa ikut menghitung scrollbar) */
.tq{width:auto;margin-left:calc(50% - 50cqw);margin-right:calc(50% - 50cqw)}
body{container-type:inline-size}
img,svg,video,iframe{max-width:100%}

/* Header lentur: bahasa & menu tidak pernah menyusut; logo yang mengecil bila ruang sempit,
   sehingga tombol menu tidak bisa terdorong keluar di lebar layar mana pun */
.nav-inner{min-width:0}
.nav-cta{flex-shrink:0}
.nav-inner>.logo{flex:0 1 auto;min-width:0}
.nav-inner>.logo .logo-img{max-width:100%;object-fit:contain;object-position:left center}
/* =========================================================
   ISI HALAMAN (tipe bagian "page") — halaman menu footer dll.
   ========================================================= */
.pg-hero{padding:5.5rem 0 2.5rem;text-align:center;position:relative}
.pg-hero::before{content:"";position:absolute;inset:0 0 auto;height:420px;z-index:-1;background:radial-gradient(60% 70% at 50% 0%,var(--coral-l),transparent 70%)}
.pg-hero-in{max-width:820px;margin-inline:auto}
.pg-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08}
.pg-lead{font-size:1.15rem;color:var(--ink-2);margin:1.3rem auto 0;max-width:680px}
.pg-btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.pg-block{padding:1.6rem 0}
.pg-panel{padding:0}
.pg-bg-white .pg-panel,.pg-bg-sand .pg-panel,.pg-bg-dark .pg-panel{border-radius:var(--r-lg);padding:3.2rem 3rem}
.pg-bg-white .pg-panel{background:#fff;box-shadow:var(--ring)}
.pg-bg-sand .pg-panel{background:var(--sand);box-shadow:var(--ring)}
.pg-bg-dark .pg-panel{background:var(--ink);color:#fff}
.pg-bg-dark .pg-head p,.pg-bg-dark .pg-text p{color:#B8C4DA}
.pg-bg-dark .pg-item{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff}
.pg-bg-dark .pg-item p,.pg-bg-dark .pg-item span,.pg-bg-dark .pg-item small{color:#B8C4DA}
.pg-head{max-width:720px;margin-bottom:2rem}
.pg-head h2,.pg-text h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.pg-head p,.pg-text p{color:var(--ink-2);font-size:1.05rem;margin-top:.9rem}
.pg-items{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:1rem}
.pg-item{position:relative;display:block;background:#fff;border-radius:var(--r-md);padding:1.6rem;box-shadow:var(--ring);transition:.25s}
a.pg-item:hover{transform:translateY(-3px);box-shadow:var(--ring),var(--lift)}
.pg-bg-white .pg-item,.pg-bg-sand .pg-item{background:var(--panel-2)}
.pg-bg-sand .pg-item{background:#fff}
.pg-item h3{font-size:1.08rem;margin-top:.2rem}
.pg-item p{color:var(--ink-2);font-size:.95rem;margin-top:.5rem}
.pg-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--coral-l);color:var(--coral);margin-bottom:1rem;font-weight:800}
.pg-ic .ic{width:22px;height:22px}
.pg-step{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--coral);color:#fff;font-weight:800;margin-bottom:1rem}
.pg-badge{position:absolute;top:1.2rem;right:1.2rem;font-size:.72rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;background:#E3F8EF;color:#0B7A55}
.pg-more{position:absolute;right:1.2rem;bottom:1.1rem;color:var(--coral)}
.pg-stats .pg-item{text-align:center;padding:2rem 1.2rem}
.pg-num{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.04em;color:var(--coral);line-height:1.1}
.pg-stats .pg-item span{display:block;color:var(--ink-2);font-size:.92rem;margin-top:.4rem}
.pg-list .pg-items{gap:.6rem}
.pg-list .pg-item{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem}
.pg-list .pg-ic{margin:0;flex:none;width:42px;height:42px}
.pg-it-main{flex:1;min-width:0}
.pg-it-main b{display:block}
.pg-it-main small{display:block;color:var(--muted);font-size:.88rem}
.pg-list .pg-badge{position:static;flex:none}
.pg-split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.pg-split.pg-solo{grid-template-columns:1fr;max-width:760px}
.pg-text p+p{margin-top:1rem}
.pg-checks{list-style:none;display:grid;gap:.8rem}
.pg-checks li{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border-radius:var(--r-sm);padding:1rem 1.1rem;box-shadow:var(--ring)}
.pg-bg-white .pg-checks li{background:var(--panel-2)}
.pg-bg-dark .pg-checks li{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pg-checks b{display:block}
.pg-checks small{display:block;color:var(--ink-2);font-size:.9rem;margin-top:.15rem}
.pg-bg-dark .pg-checks small{color:#B8C4DA}
.pg-tick{width:26px;height:26px;border-radius:8px;background:var(--coral);color:#fff;display:grid;place-items:center;flex:none;margin-top:1px}
.pg-tick .ic{width:15px;height:15px;stroke-width:3}
.pg-hero+.cta,.pg-block+section.container{margin-top:3rem}
@media (max-width:980px){
  .pg-items{grid-template-columns:repeat(2,1fr)}
  .pg-list .pg-items{grid-template-columns:1fr}
  .pg-split{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:640px){
  .pg-hero{padding:3.5rem 0 1.5rem}
  .pg-items{grid-template-columns:1fr}
  .pg-bg-white .pg-panel,.pg-bg-sand .pg-panel,.pg-bg-dark .pg-panel{padding:2rem 1.3rem;border-radius:var(--r-md)}
  .pg-list .pg-item{flex-wrap:wrap}
}

/* Blok "Dokumen / pasal": blok berurutan menyatu menjadi satu lembar dokumen */
.pg-doc{padding:0}
.pg-doc .pg-panel{max-width:880px;margin-inline:auto;background:#fff;padding:1.3rem 3.2rem;box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line)}
:not(.pg-doc)+.pg-doc .pg-panel{border-radius:var(--r-lg) var(--r-lg) 0 0;padding-top:3rem;box-shadow:var(--ring)}
.pg-doc:not(:has(+.pg-doc)) .pg-panel{border-radius:0 0 var(--r-lg) var(--r-lg);padding-bottom:3rem;box-shadow:var(--ring);margin-bottom:2rem}
:not(.pg-doc)+.pg-doc:not(:has(+.pg-doc)) .pg-panel{border-radius:var(--r-lg)}
.pg-doc-body h2{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:.7rem;padding-top:.4rem}
.pg-doc-body p,.pg-doc-body li{color:var(--ink-2);font-size:.98rem;line-height:1.75}
.pg-doc-body p+p,.pg-doc-body ul+p,.pg-doc-body p+ul{margin-top:.75rem}
.pg-ul{padding-left:1.3rem;display:grid;gap:.35rem}
.pg-ul li::marker{color:var(--coral)}
.pg-doc-body b{color:var(--ink)}
@media (max-width:640px){
  .pg-doc .pg-panel{padding:1rem 1.3rem}
  :not(.pg-doc)+.pg-doc .pg-panel{padding-top:2rem}
  .pg-doc:not(:has(+.pg-doc)) .pg-panel{padding-bottom:2rem}
}

/* =========================================================
   BLOG — daftar artikel & halaman artikel
   ========================================================= */
.bl-list{padding:1rem 0 3rem}
.bl-cats{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.bl-cats a{padding:.5rem 1rem;border-radius:999px;background:#fff;box-shadow:var(--ring);font-size:.88rem;font-weight:600;color:var(--ink-2);transition:.2s}
.bl-cats a:hover{color:var(--coral)}
.bl-cats a.on{background:var(--ink);color:#fff;box-shadow:none}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.bl-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-md);box-shadow:var(--ring);overflow:hidden;transition:.25s}
.bl-card:hover{transform:translateY(-4px);box-shadow:var(--ring),var(--lift)}
.bl-cover{display:block;aspect-ratio:16/9;background:var(--sand);overflow:hidden}
.bl-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.bl-card:hover .bl-cover img{transform:scale(1.04)}
.bl-cover-empty{display:grid;place-items:center;background:linear-gradient(135deg,var(--coral-l),#fff 60%,var(--sand))}
.bl-cover-empty b{font-family:'Plus Jakarta Sans',sans-serif;font-size:3rem;font-weight:800;color:var(--coral);opacity:.35}
.bl-meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--muted);padding:1.2rem 1.4rem 0}
.bl-cat{color:var(--coral);font-weight:700;background:var(--coral-l);padding:.15rem .55rem;border-radius:999px}
.bl-card h3{font-size:1.12rem;line-height:1.35;padding:.6rem 1.4rem 0}
.bl-card p{color:var(--ink-2);font-size:.93rem;padding:.5rem 1.4rem 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-more{margin-top:auto;padding:1rem 1.4rem 1.3rem;display:flex;align-items:center;gap:.35rem;font-weight:700;font-size:.88rem;color:var(--coral)}
.bl-more .ic{width:16px;height:16px;transition:transform .2s}
.bl-card:hover .bl-more .ic{transform:translateX(4px)}
.bl-empty{text-align:center;color:var(--muted);padding:3rem;background:#fff;border-radius:var(--r-md);box-shadow:var(--ring)}
.bl-pager{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:2.2rem;font-size:.9rem;color:var(--muted)}
.bl-pager a{padding:.55rem 1rem;border-radius:11px;background:#fff;box-shadow:var(--ring);font-weight:700;color:var(--ink)}
.bl-pager a:hover{color:var(--coral)}
.post{padding:3.5rem 0 1rem}
.post-wrap{max-width:820px}
.post-back{display:inline-block;font-size:.9rem;font-weight:600;color:var(--muted);margin-bottom:2rem}
.post-back:hover{color:var(--coral)}
.post-head h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.12}
.post-lead{font-size:1.15rem;color:var(--ink-2);margin-top:1rem}
.post-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin-top:1.4rem;font-size:.88rem;color:var(--muted)}
.post-author{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--ink)}
.post-author .av{width:30px;height:30px;font-size:.78rem}
.post-cover{display:block;width:100%;border-radius:var(--r-lg);margin-top:2.2rem;box-shadow:var(--ring)}
.post-body{background:#fff;border-radius:var(--r-lg);box-shadow:var(--ring);padding:3rem 3.2rem;margin-top:2.2rem;font-size:1.05rem;line-height:1.8;color:var(--ink-2)}
.post-body>*+*{margin-top:1.1rem}
.post-body h2{font-size:1.55rem;color:var(--ink);margin-top:2.2rem;line-height:1.25}
.post-body h3{font-size:1.2rem;color:var(--ink);margin-top:1.8rem}
.post-body b{color:var(--ink)}
.post-body a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{padding-left:1.4rem;display:grid;gap:.4rem}
.post-body li::marker{color:var(--coral);font-weight:700}
.post-body blockquote{border-left:4px solid var(--coral);background:var(--panel-2);padding:1rem 1.3rem;border-radius:0 14px 14px 0;color:var(--ink);font-style:italic}
.post-body figure img{display:block;width:100%;border-radius:16px}
.post-body figcaption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:.5rem}
.post-body>:first-child{margin-top:0}
.bl-related{padding-bottom:1rem}
@media (max-width:980px){.bl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr}
  .post{padding-top:2rem}
  .post-body{padding:1.6rem 1.3rem;font-size:1rem}
}

/* Video di layar ponsel mockup App Chat */
.phone-screen.ph-video{display:block;background:#0D0A1A}
.ph-video .vid{display:block;width:100%;height:100%;object-fit:cover}
.vid.vid-contain{object-fit:contain}
video.ap-shot{background:#0D0A1A}

/* Video mendatar (presentasi 16:9): bingkai layar lebar menggantikan ponsel */
.vid-frame{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px -28px rgba(15,30,61,.45)}
.vid-frame .vid{display:block;width:100%;height:100%;object-fit:cover}
.app-stage.has-wide{grid-template-columns:minmax(260px,.72fr) 1.6fr;gap:2.2rem;align-items:center}
.app-phone-wrap.is-wide{padding:1.6rem 1.6rem 2.6rem;display:block}
.app-phone-wrap.is-wide .fc.pos-bl{left:-.6rem;bottom:-2.2rem}
.app-phone-wrap.is-wide .fc.pos-br{right:-.6rem;bottom:-2.2rem}
.app-phone-wrap.is-wide .fc.pos-tl{left:-.6rem;top:-1rem}
.app-phone-wrap.is-wide .fc.pos-tr{right:-.6rem;top:-1rem}
.has-wide .am-tab p,.has-wide .am-tab .checks{font-size:.9rem}
.app-duo.wide{display:flex;align-items:center;justify-content:center}
.stage .app-duo.wide{max-width:none;height:auto;min-height:300px}
.app-duo.wide .vid-frame{width:100%}
@media (max-width:1024px){
  .app-stage.has-wide{grid-template-columns:1fr}
  .app-phone-wrap.is-wide{padding:1rem}
}
@media (max-width:640px){
  .vid-frame{border-radius:12px}
  .app-phone-wrap.is-wide{padding:.6rem}
}

/* =========================================================
   RESPONSIF MENYELURUH (semua ukuran HP, termasuk layar 280px
   dan pengaturan ukuran huruf besar di HP)
   ========================================================= */
/* Kolom grid/flex boleh menyusut lebih kecil dari isinya — tanpa ini isi lebar
   (mis. kotak KPI analitik) mendorong seluruh panel keluar layar */
.fpanel>*,.split>*,.slide>*,.app-stage>*,.cta>*,.faq-grid>*,.pg-split>*,.plans>*,.f-grid>*,.sec-head>*,
.steps-grid>*,.kpis>*,.pg-items>*,.bl-grid>*,.help-cards>*,.stat-grid>*,.dash-grid>*,.branches>*{min-width:0}
.stage,.analytics,.dash,.tickets,.flow,.app-duo,.vid-frame{max-width:100%;min-width:0}
.kpis{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
h1,h2,h3,h4,p,li,blockquote,figcaption,.kicker,.btn{overflow-wrap:break-word}
@media (max-width:640px){
  .hl{white-space:normal}
  .fpanel{grid-template-columns:minmax(0,1fr)}
  .fpanel h3{font-size:clamp(1.3rem,6.2vw,1.7rem)}
  .stage{padding:1rem .75rem;min-height:0}
  .analytics{padding:.9rem}
  .kpis{gap:.4rem}
  .kpis div{padding:.6rem .55rem}
  .kpis b{display:block;font-size:clamp(.95rem,4.4vw,1.2rem);line-height:1.2}
  .kpis em{display:block;margin:.15rem 0 0}
  .bars{gap:.3rem;height:130px}
  .days{gap:.3rem}
  .days span{font-size:.6rem}
  .plan .btn,.cta .btn,.pg-btns .btn,.enterprise .btn,.app-cta .btn,.content-sec .btn{white-space:normal;text-align:center}
  .price{flex-wrap:wrap}
  .price b{font-size:clamp(1.8rem,9vw,2.6rem)}
  .plan{padding:1.6rem 1.25rem}
  .enterprise{padding:1.4rem 1.2rem}
  .cta{padding:2.2rem 1.25rem}
  .ftabs{flex-wrap:wrap}
}
@media (max-width:360px){
  .container{width:calc(100% - 24px)}
  h1{font-size:clamp(1.8rem,9vw,2.3rem)}
  h2{font-size:clamp(1.5rem,7.5vw,1.9rem)}
  .fpanel,.plan,.pg-bg-white .pg-panel,.pg-bg-sand .pg-panel,.pg-bg-dark .pg-panel,.post-body{padding-left:1rem;padding-right:1rem}
  .kpis{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
  .kpis small{font-size:.62rem}
  .kpis em{font-size:.62rem}
  .nav-cta .btn{padding:.6rem .8rem;font-size:.82rem}
}

/* Catatan fitur paket harga: popup saat hover (desktop), fokus keyboard, atau disentuh (HP) */
.checks li.has-tip{position:relative;cursor:help;outline:0}
.tip-txt{border-bottom:1px dashed currentColor;border-bottom-color:color-mix(in srgb,currentColor 45%,transparent);padding-bottom:1px}
.tip-ic{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:.4rem;border-radius:50%;font:700 10px/1 Georgia,serif;font-style:italic;vertical-align:1px;background:var(--coral-l,#E5EEFF);color:var(--coral,#2563EB)}
.plan.pop .tip-ic{background:rgba(255,255,255,.22);color:#fff}
.tip{position:absolute;left:30px;bottom:calc(100% + 10px);z-index:30;width:max-content;max-width:min(270px,calc(100% - 30px));padding:.6rem .8rem;border-radius:10px;background:#0F1E3D;color:#fff;font-size:.82rem;font-weight:500;line-height:1.45;text-align:left;box-shadow:0 14px 34px -12px rgba(15,30,61,.55);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none}
.tip::after{content:"";position:absolute;left:14px;top:100%;border:6px solid transparent;border-top-color:#0F1E3D}
.plan.pop .tip{background:#fff;color:#0F1E3D}
.plan.pop .tip::after{border-top-color:#fff}
.checks li.has-tip:focus .tip,.checks li.has-tip:focus-within .tip{opacity:1;visibility:visible;transform:none}
.checks li.has-tip:focus-visible .tip-txt{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}
@media (hover:hover){.checks li.has-tip:hover .tip{opacity:1;visibility:visible;transform:none}}
@media (prefers-reduced-motion:reduce){.tip{transition:none}}