/* ServiceHP.id — landing page.
   Memakai palet yang sama dengan aplikasi (resources/css/app.css): biru royal untuk header, putih/biru muda untuk permukaan,
   dan tema hitam (AMOLED) yang sama dengan halaman klien. Semua kelas berawalan .sx- agar tidak bentrok dengan gaya bersama (.sh-*, .lp-*). */

:root[data-landing-theme="light"]{
    color-scheme:light;
    --bg:#f3f7fc; --surface:#fff; --line:#e3e9f2; --line2:#cdd5e1; --hover:#eef2f8; --field:#f6f9fd;
    --ink:#0f1a2b; --soft:#364357; --muted:#5d6a7e;
    --accent:#2268e8; --press:#1a56c8; --accent-text:#1a56c8;
    --brand:#1b62d6; --hero1:#2a74ea; --hero2:#174fb8;
    --income:#0f7a56; --expense:#c4352d; --tint:#eef3ff; --tint-green:#e8f6f0; --tint-red:#fdecec;
    --shadow:0 28px 70px -28px rgb(15 26 43 / .38);
}
:root[data-landing-theme="dark"]{
    color-scheme:dark;
    --bg:#000; --surface:#0b0d10; --line:#1c2026; --line2:#2b3139; --hover:#14181d; --field:#12161b;
    --ink:#e8edf4; --soft:#c3cbd6; --muted:#98a3b3;
    --accent:#3f7ef0; --press:#2f6bdc; --accent-text:#8ab4ff;
    --brand:#123b8c; --hero1:#1f4fb5; --hero2:#12347a;
    --income:#34d399; --expense:#f87171; --tint:#0e1a33; --tint-green:#0c211a; --tint-red:#2a1214;
    --shadow:0 28px 70px -28px rgb(0 0 0 / .8);
}

.sx{ background:var(--bg); color:var(--ink); min-height:100vh; font-size:15px; line-height:1.5; overflow-x:clip }
.sx *,.sx *::before,.sx *::after{ box-sizing:border-box }
.sx :where(h1,h2,h3,p,ul,ol){ margin:0 }
.sx :where(ul,ol){ padding:0; list-style:none }
:where(.sx) a{ color:inherit; text-decoration:none }
.sx svg{ flex:none }
.sx-wrap{ width:min(1152px,100% - clamp(32px,6vw,64px)); margin-inline:auto }
.sx-skip{ position:absolute; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:10px; background:#fff; color:#0f1a2b; font-weight:600 }
.sx-skip:focus{ top:12px }
.sx a:focus-visible,.sx button:focus-visible,.sx summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:10px }
.sx-header a:focus-visible,.sx-header button:focus-visible,.sx-hero a:focus-visible,.sx-cta a:focus-visible{ outline-color:#fff }
.sx-ico-sm{ width:16px; height:16px }

/* ───────── Header (biru, seperti header aplikasi) ───────── */
.sx-header{ position:sticky; top:0; z-index:40; background:var(--brand); color:#fff; box-shadow:0 1px 0 rgb(255 255 255 / .08) inset, 0 6px 20px -12px rgb(8 20 50 / .6) }
.sx-bar{ min-height:60px; display:flex; align-items:center; gap:16px }
.sx-brand{ font-size:20px; font-weight:750; letter-spacing:-.04em; white-space:nowrap }
.sx-brand b{ font-weight:750; color:#a9c8ff }
.sx-links{ display:flex; align-items:center; gap:2px; margin-left:28px; font-size:14px; font-weight:500 }
.sx-links a{ padding:8px 12px; border-radius:8px; color:rgb(255 255 255 / .86); transition:background-color .15s,color .15s }
.sx-links a:hover{ background:rgb(255 255 255 / .12); color:#fff }
.sx-links-login{ display:none }
.sx-actions{ margin-left:auto; display:flex; align-items:center; gap:8px }
.sx-icon{ width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px; background:rgb(255 255 255 / .12); color:#fff; cursor:pointer; transition:background-color .15s }
.sx-icon:hover{ background:rgb(255 255 255 / .2) }
.sx-icon svg{ width:20px; height:20px }
.sx-menu{ display:none }
.sx-sun,:root[data-landing-theme="dark"] .sx-moon{ display:none }
:root[data-landing-theme="dark"] .sx-sun{ display:block }
.sx-login{ padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600; color:#fff }
.sx-login:hover{ background:rgb(255 255 255 / .12) }

/* ───────── Tombol ───────── */
.sx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 20px; border:1px solid transparent; border-radius:10px; font:inherit; font-size:14px; font-weight:650; letter-spacing:-.005em; cursor:pointer; transition:background-color .15s,transform .15s,box-shadow .15s }
.sx-btn-white{ background:#fff; color:#1a56c8 }
.sx-btn-white:hover{ background:#eaf1ff }
.sx-btn-line{ border-color:rgb(255 255 255 / .45); color:#fff; background:rgb(255 255 255 / .06) }
.sx-btn-line:hover{ background:rgb(255 255 255 / .16) }
.sx-btn-primary{ background:var(--accent); color:#fff }
.sx-btn-primary:hover{ background:var(--press) }
.sx-demo-btn{ min-height:40px; padding:0 16px }

/* ───────── Hero ───────── */
.sx-hero{ background:linear-gradient(160deg,var(--hero1) 0%,var(--hero2) 100%); color:#fff; padding:56px 0 150px; position:relative; isolation:isolate; overflow:hidden }
.sx-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:
    radial-gradient(60% 80% at 85% 0%,rgb(255 255 255 / .14),transparent 60%),
    radial-gradient(40% 60% at 0% 100%,rgb(8 30 90 / .35),transparent 70%) }
.sx-hero-in{ text-align:center; display:flex; flex-direction:column; align-items:center }
.sx-chip{ display:inline-flex; padding:5px 12px; border:1px solid rgb(255 255 255 / .28); border-radius:999px; background:rgb(255 255 255 / .12); font-size:11.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase }
.sx-hero h1{ margin-top:18px; max-width:18ch; font-size:clamp(34px,5.6vw,58px); line-height:1.06; font-weight:760; letter-spacing:-.035em; text-wrap:balance }
.sx-hero h1 span{ color:#bcd5ff; display:inline-block }
.sx-hero-copy{ margin-top:22px; max-width:60ch; font-size:clamp(15px,1.5vw,17px); line-height:1.6; color:rgb(255 255 255 / .86) }
.sx-hero-cta{ margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.sx-points{ margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; font-size:13px; color:rgb(255 255 255 / .88) }
.sx-points li{ padding:5px 12px; border-radius:999px; background:rgb(255 255 255 / .1); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16) }

/* ───────── Preview dashboard ───────── */
.sx-demo{ position:relative; z-index:2; margin-top:-96px }
.sx-app{ display:grid; grid-template-columns:208px minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden }
.sx-side{ padding:14px 12px; border-right:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:4px; font-size:13px }
.sx-side-brand{ padding:2px 8px 12px; font-size:16px; font-weight:750; letter-spacing:-.04em }
.sx-side-brand b{ color:var(--accent-text) }
.sx-side-brand small{ display:block; margin-top:1px; font-size:11.5px; font-weight:500; letter-spacing:0; color:var(--muted) }
.sx-side-add{ display:flex; align-items:center; justify-content:center; gap:6px; height:38px; margin-bottom:8px; border-radius:10px; background:var(--accent); color:#fff; font-weight:650 }
.sx-side-item{ display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:10px; color:var(--soft); font-weight:550 }
.sx-side-item svg{ width:18px; height:18px }
.sx-side-item span{ margin-left:auto; padding:1px 7px; border-radius:99px; background:var(--tint); color:var(--accent-text); font-size:11px; font-weight:650 }
.sx-side-item.is-on{ background:var(--tint); color:var(--accent-text) }
.sx-side-head{ margin-top:10px; padding:0 10px; font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.sx-app-main{ min-width:0; background:var(--bg) }
.sx-app-top{ padding:14px 18px 16px; background:var(--brand); color:#fff }
.sx-app-bar{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.sx-app-bar strong{ font-size:14px }
.sx-app-bar small{ font-size:12px; color:rgb(255 255 255 / .75) }
.sx-avatar{ margin-left:auto; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#1a56c8; font-size:13px; font-weight:700 }
.sx-app-top h2{ font-size:19px; font-weight:650; letter-spacing:-.02em }
.sx-app-top p{ margin-top:1px; font-size:12.5px; color:rgb(255 255 255 / .8) }
.sx-period-row{ margin-top:12px; display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.sx-periods{ display:inline-flex; padding:3px; gap:2px; border-radius:10px; background:rgb(255 255 255 / .16) }
.sx-periods button{ height:32px; padding:0 14px; border:0; border-radius:8px; background:transparent; color:#fff; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer }
.sx-periods button[aria-pressed="true"]{ background:#fff; color:#1a56c8 }
#demo-period-label{ font-size:12.5px; color:rgb(255 255 255 / .85) }
.sx-app-body{ padding:14px 16px 16px; display:grid; gap:12px }
.sx-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.sx-kpi,.sx-held article,.sx-panel{ background:var(--surface); border:1px solid var(--line); border-radius:12px }
.sx-kpi{ padding:12px 14px 6px; overflow:hidden }
.sx-kpi p{ font-size:12px; color:var(--muted) }
.sx-kpi strong{ display:block; margin-top:3px; font-size:18px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap }
.sx-kpi svg{ display:block; width:100%; height:30px; margin-top:4px }
.sx-kpi path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.sx-t-blue svg{ color:var(--accent) } .sx-t-green strong,.sx-t-green svg{ color:var(--income) } .sx-t-red strong,.sx-t-red svg{ color:var(--expense) }
.sx-held{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.sx-held article{ padding:11px 14px }
.sx-held article:first-child{ background:#fff8e8; border-color:#f3dca3 }
:root[data-landing-theme="dark"] .sx-held article:first-child{ background:#261c08; border-color:#5a4213 }
.sx-held span{ display:block; font-size:12px; color:var(--muted) }
.sx-held strong{ display:block; margin-top:2px; font-size:17px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.sx-held small{ font-size:11.5px; color:var(--muted) }
.sx-charts{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:10px }
.sx-panel{ padding:14px; min-width:0 }
.sx-panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.sx-panel-head h3{ font-size:13.5px; font-weight:650 }
.sx-panel-head span{ font-size:11.5px; color:var(--muted) }
.sx-legend{ display:flex; gap:14px; margin-top:6px; font-size:11.5px; color:var(--muted) }
.sx-legend span::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--income) }
.sx-legend .out::before{ background:var(--expense) }
.sx-chart{ display:block; width:100%; height:auto; margin-top:6px; color:var(--income) }
.sx-grid path{ stroke:var(--line); stroke-width:1 }
.sx-axis text{ fill:var(--muted); font-size:11px }
.sx-line-in,.sx-line-out{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.sx-line-in{ stroke:var(--income) } .sx-line-out{ stroke:var(--expense) }
.sx-in-fill{ color:var(--income) }
.sx-status{ display:flex; align-items:center; gap:16px; margin-top:12px }
.sx-charts .sx-panel:last-child{ display:flex; flex-direction:column }   /* panel status mengisi tinggi yang sama dengan grafik */
.sx-charts .sx-panel:last-child .sx-status{ flex:1 }
.sx-donut{ position:relative; flex:none; width:112px; height:112px; border-radius:50%; background:conic-gradient(#f5a524 0 10%,#2268e8 10% 53%,#16a34a 53% 58%,#8b5cf6 58% 91%,#ef4444 91% 100%); display:grid; place-items:center }
.sx-donut::before{ content:""; position:absolute; inset:15px; border-radius:50%; background:var(--surface) }
.sx-donut div{ position:relative; text-align:center; line-height:1.15 }
.sx-donut strong{ display:block; font-size:22px; font-weight:750 }
.sx-donut span{ font-size:10.5px; color:var(--muted) }
.sx-status ul{ flex:1; display:grid; gap:5px; font-size:12.5px; color:var(--soft) }
.sx-status li{ display:flex; align-items:center; gap:7px }
.sx-status li b{ margin-left:auto; font-variant-numeric:tabular-nums }
.sx-status i{ width:9px; height:9px; border-radius:50% }
.sx-status .wait{ background:#f5a524 } .sx-status .proc{ background:#2268e8 } .sx-status .done{ background:#16a34a } .sx-status .take{ background:#8b5cf6 } .sx-status .cancel{ background:#ef4444 }
.sx-demo-note{ margin-top:12px; text-align:center; font-size:12.5px; color:var(--muted) }

/* ───────── Seksi umum ───────── */
.sx-section{ padding:76px 0 }
.sx-band{ background:var(--surface); border-block:1px solid var(--line) }
.sx-band .sx-section{ padding:68px 0 }
.sx-head{ max-width:820px; margin:0 auto 38px; text-align:center }
.sx-head-left{ margin:0; text-align:left }
.sx-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text) }
.sx-head h2{ margin-top:8px; font-size:clamp(28px,1.6vw + 18px,38px); line-height:1.15; font-weight:740; letter-spacing:-.03em; text-wrap:balance }
.sx-head p:not(.sx-eyebrow){ margin-top:12px; max-width:640px; margin-inline:auto; font-size:16px; line-height:1.6; color:var(--muted) }
.sx-head-left p:not(.sx-eyebrow){ margin-inline:0 }

/* ───────── Fitur ───────── */
.sx-modules{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }   /* 9 modul = 3 x 3, tanpa kartu tersisa */
.sx-module{ display:flex; flex-direction:column; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px; transition:border-color .2s,box-shadow .2s,transform .2s }
@media (hover:hover){ .sx-module:hover{ border-color:var(--line2); box-shadow:0 14px 34px -22px rgb(15 26 43 / .5); transform:translateY(-2px) } }
.sx-module-ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:var(--tint); color:var(--accent-text) }
.sx-module-ico svg{ width:22px; height:22px }
.sx-module h3{ margin-top:14px; font-size:17px; font-weight:680; letter-spacing:-.02em }
.sx-module-lead{ margin-top:3px; font-size:13.5px; line-height:1.5; color:var(--muted) }
.sx-module ul{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:9px }
.sx-module li{ display:flex; gap:9px; font-size:13.5px; line-height:1.45; color:var(--soft) }
.sx-tick{ width:16px; height:16px; margin-top:2px; color:var(--income) }

/* ───────── Peran ───────── */
.sx-roles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.sx-role{ padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px; border-top:3px solid var(--accent) }
.sx-role h3{ font-size:17px; font-weight:700; letter-spacing:-.02em }
.sx-role>p{ margin-top:4px; font-size:14px; color:var(--muted) }
.sx-role ul{ margin-top:14px; display:grid; gap:8px; font-size:13.5px; color:var(--soft) }
.sx-role li{ position:relative; padding-left:16px }
.sx-role li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--accent) }

/* ───────── Alur ───────── */
.sx-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; counter-reset:s }
.sx-steps li{ position:relative; padding:22px; background:var(--bg); border:1px solid var(--line); border-radius:14px }
.sx-steps li:not(:last-child)::after{ content:""; position:absolute; top:42px; right:-15px; width:16px; height:2px; background:var(--line2); z-index:1 }
.sx-step-no{ position:absolute; top:16px; right:16px; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--tint); color:var(--accent-text); font-size:12px; font-weight:700 }
.sx-step-ico{ width:30px; height:30px; color:var(--accent-text) }
.sx-steps h3{ margin-top:14px; font-size:16px; font-weight:680; letter-spacing:-.015em }
.sx-steps p{ margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--muted) }

/* ───────── Aplikasi ───────── */
.sx-apps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.sx-app-card{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px }
.sx-tag{ padding:3px 10px; border-radius:99px; background:var(--tint); color:var(--accent-text); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.sx-app-card h3{ font-size:17px; font-weight:690; letter-spacing:-.02em }
.sx-app-card>p{ font-size:14px; line-height:1.55; color:var(--muted) }
/* Tiga kartu berbagi baris (subgrid): judul, keterangan, dan tombol Web/Android sejajar */
@media (min-width:700px){
    .sx-app-card{ display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:10px; justify-items:start }
    .sx-app-card .sx-note{ grid-row:span 3 }
}
.sx-meta{ font-size:12.5px; color:var(--muted) }
.sx-note{ display:flex; gap:8px; padding:10px 12px; border-radius:10px; background:var(--tint); color:var(--soft); font-size:13px; line-height:1.45 }
.sx-note svg{ margin-top:2px; color:var(--accent-text) }
.sx-app-card details{ width:100%; font-size:13px; color:var(--muted) }
.sx-app-card summary{ cursor:pointer; font-weight:600; color:var(--accent-text) }
.sx-app-card details p{ margin-top:8px; line-height:1.5 }
.sx-app-card code{ display:block; margin-top:8px; padding:8px 10px; border-radius:8px; background:var(--field); border:1px solid var(--line); font-size:11px; word-break:break-all; color:var(--soft) }

/* ───────── FAQ ───────── */
.sx-faq{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:start }
.sx-faq .sx-head{ position:sticky; top:84px }
.sx-link{ display:inline-flex; align-items:center; gap:4px; margin-top:16px; font-size:14px; font-weight:650; color:var(--accent-text) }
.sx-faq-links{ display:flex; flex-wrap:wrap; column-gap:22px }
.sx-faq-list{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden }
.sx-faq-list details{ border-top:1px solid var(--line) }
.sx-faq-list details:first-child{ border-top:0 }
.sx-faq-list summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; font-size:15px; font-weight:620; cursor:pointer; list-style:none }
.sx-faq-list summary::-webkit-details-marker{ display:none }
.sx-faq-list summary:hover{ background:var(--hover) }
.sx-plus{ width:18px; height:18px; color:var(--accent-text); transition:transform .2s }
.sx-faq-list details[open] .sx-plus{ transform:rotate(45deg) }
.sx-faq-list details p{ padding:0 18px 18px; max-width:72ch; font-size:14px; line-height:1.6; color:var(--muted) }

/* ───────── Penutup & footer ───────── */
.sx-cta-wrap{ padding-block:64px }   /* jarak sama di atas (dari FAQ) dan di bawah (ke footer) */
.sx-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 36px; border-radius:18px; color:#fff; background:linear-gradient(135deg,var(--hero1),var(--hero2)); box-shadow:var(--shadow) }
.sx-cta h2{ font-size:clamp(22px,2.8vw,30px); line-height:1.2; font-weight:740; letter-spacing:-.03em; max-width:22ch; text-wrap:balance }
.sx-cta p{ margin-top:8px; color:rgb(255 255 255 / .85); font-size:15px }
.sx-cta .sx-btn{ flex:none }
.sx-footer{ border-top:1px solid var(--line); background:var(--surface) }
.sx-footer-in{ display:flex; align-items:center; gap:28px; padding:26px 0; flex-wrap:wrap }
.sx-footer .sx-brand b{ color:var(--accent-text) }
.sx-footer-in div p{ margin-top:2px; font-size:12.5px; color:var(--muted) }
.sx-footer nav{ margin-left:auto; display:flex; gap:20px; font-size:13.5px; color:var(--soft) }
.sx-footer nav a:hover{ color:var(--accent-text) }
.sx-footer-in>p{ font-size:12.5px; color:var(--muted) }

/* ───────── Responsif ───────── */
@media (max-width:1100px){
    .sx-steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
    .sx-steps li:nth-child(2)::after{ display:none }
}
@media (max-width:960px){
    .sx-side{ display:none }
    .sx-app{ grid-template-columns:minmax(0,1fr) }
    .sx-apps,.sx-roles{ grid-template-columns:minmax(0,1fr) }
    .sx-faq{ grid-template-columns:minmax(0,1fr); gap:22px }
    .sx-faq .sx-head{ position:static; margin:0 auto; text-align:center }
    .sx-faq-links{ justify-content:center }
    .sx-menu{ display:grid }
    .sx-login{ display:none }
    .sx-links{ position:absolute; top:100%; left:16px; right:16px; margin:8px 0 0; padding:8px; flex-direction:column; align-items:stretch; gap:0; display:none; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 40px -16px rgb(8 20 50 / .5) }
    .sx-links.is-open{ display:flex }
    .sx-links a{ min-height:44px; display:flex; align-items:center; padding:0 12px; color:var(--soft) }
    .sx-links a:hover{ background:var(--hover); color:var(--ink) }
    .sx-links-login{ display:flex; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); color:var(--accent-text)!important; font-weight:650 }
    .sx-bar{ position:relative }
}
@media (max-width:760px){
    .sx-hero{ padding:40px 0 120px }
    .sx-demo{ margin-top:-80px }
    .sx-section{ padding:56px 0 }
    .sx-band .sx-section{ padding:52px 0 }
    .sx-head{ margin-bottom:28px }
    .sx-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
    .sx-held,.sx-charts{ grid-template-columns:minmax(0,1fr) }
    .sx-cta{ flex-direction:column; align-items:flex-start; padding:26px 22px }
    .sx-cta .sx-btn{ width:100% }
    .sx-footer nav{ margin-left:0; width:100% }
    .sx-demo-btn{ display:none }
    .sx-cta-wrap{ padding-block:48px }
}
@media (min-width:561px) and (max-width:760px){ .sx-status ul{ max-width:260px } }
@media (max-width:560px){
    .sx-steps,.sx-modules{ grid-template-columns:minmax(0,1fr) }
    .sx-steps li::after{ display:none!important }
    .sx-hero-cta .sx-btn{ flex:1 1 100% }
    .sx-points{ font-size:12.5px }
    .sx-app-top{ padding:12px 14px 14px }
    .sx-app-body{ padding:12px }
    .sx-periods button{ padding:0 10px }
    .sx-status{ flex-direction:column; align-items:flex-start }
    .sx-faq-list summary{ font-size:14.5px; padding:14px }
    .sx-faq-list details p{ padding:0 14px 16px }
}
@media (max-width:360px){
    .sx-brand{ font-size:18px }
    .sx-hero h1{ font-size:31px }
    .sx-kpi strong{ font-size:16px }
}
@media (prefers-reduced-motion:reduce){
    .sx *{ transition:none!important; animation:none!important }
}


/* ───────── Bahasa, masalah, fitur utama, semua fitur ───────── */
.sx-lang{ display:grid; place-items:center; min-width:40px; height:40px; padding:0 10px; border-radius:10px; background:rgb(255 255 255 / .12); color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em; transition:background-color .15s }
.sx-lang:hover{ background:rgb(255 255 255 / .22) }
.sx-problem-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.sx-problem{ padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px }
.sx-problem-ico{ width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:var(--tint-red); color:var(--expense) }
.sx-problem-ico svg{ width:21px; height:21px }
.sx-problem h3{ margin-top:14px; font-size:17px; font-weight:680; letter-spacing:-.02em }
.sx-problem p{ margin-top:6px; padding-top:10px; border-top:1px dashed var(--line2); font-size:14px; line-height:1.55; color:var(--muted) }
.sx-benefits{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.sx-benefit{ padding:22px; background:var(--bg); border:1px solid var(--line); border-radius:14px; transition:border-color .2s,box-shadow .2s,transform .2s }
@media (hover:hover){ .sx-benefit:hover{ border-color:var(--line2); box-shadow:0 14px 34px -22px rgb(15 26 43 / .5); transform:translateY(-2px) } }
.sx-benefit h3{ margin-top:14px; font-size:17px; font-weight:690; letter-spacing:-.02em }
.sx-benefit p{ margin-top:6px; font-size:14px; line-height:1.55; color:var(--muted) }
.sx-all{ margin-top:22px }
.sx-all>summary{ display:flex; align-items:center; justify-content:center; gap:8px; width:fit-content; margin:0 auto; min-height:44px; padding:0 22px; border:1px solid var(--line2); border-radius:10px; background:var(--surface); color:var(--accent-text); font-size:14px; font-weight:650; cursor:pointer; list-style:none }
.sx-all>summary::-webkit-details-marker{ display:none }
.sx-all>summary:hover{ background:var(--hover) }
.sx-all[open]>summary .sx-plus{ transform:rotate(45deg) }
.sx-all .sx-modules{ margin-top:22px }
.sx-all .sx-module{ background:var(--bg) }
@media (max-width:960px){ .sx-problem-list,.sx-benefits{ grid-template-columns:minmax(0,1fr) } }
@media (min-width:600px) and (max-width:699px){ .sx-benefits{ grid-template-columns:repeat(2,minmax(0,1fr)) } .sx-benefits .sx-benefit:last-child:nth-child(odd){ grid-column:1/-1 } }
@media (max-width:760px){ .sx-lang{ min-width:36px; height:40px } }
/* ───────── Jenis servis (HP, laptop, elektronik) ───────── */
.sx-types{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.sx-type{ padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px; transition:border-color .2s,box-shadow .2s,transform .2s }
@media (hover:hover){ .sx-type:hover{ border-color:var(--line2); box-shadow:0 14px 34px -22px rgb(15 26 43 / .5); transform:translateY(-2px) } }
.sx-type h3{ margin-top:14px; font-size:17px; font-weight:700; letter-spacing:-.02em }
/* Tiga kartu jenis servis berbagi baris (subgrid): garis dan daftar centang sejajar walau keterangannya beda panjang */
@media (min-width:700px){ .sx-type{ display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0 } }
.sx-type>p{ margin-top:4px; font-size:14px; line-height:1.55; color:var(--muted) }
.sx-type ul{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:9px }
.sx-type li{ display:flex; gap:9px; font-size:13.5px; line-height:1.45; color:var(--soft) }
@media (max-width:960px){ .sx-types{ grid-template-columns:minmax(0,1fr) } }

/* ───────── Penyesuaian proporsi HP / tablet / PC ───────── */
.sx-steps{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:1100px){
    .sx-steps{ grid-template-columns:repeat(3,minmax(0,1fr)) }
    .sx-steps li:nth-child(2)::after{ display:block }
}
@media (max-width:700px){
    .sx-steps,.sx-modules{ grid-template-columns:minmax(0,1fr) }
    .sx-steps li::after{ display:none!important }
}
/* Tablet: kartu tiga kolom (bukan satu kolom yang melebar) */
@media (min-width:700px) and (max-width:960px){
    .sx-problem-list,.sx-types,.sx-roles,.sx-apps,.sx-benefits{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }   /* 9 fitur = 3 x 3 */
    .sx-problem,.sx-type,.sx-role,.sx-app-card,.sx-benefit{ padding:18px }
    .sx-section{ padding:64px 0 }
    .sx-band .sx-section{ padding:58px 0 }   /* bagian berlatar putih sedikit lebih rapat dari bagian polos, seperti di PC */
}
/* Ritme antar bagian: dua bagian polos berurutan tidak digandakan jaraknya */
.sx-wrap.sx-section+.sx-wrap.sx-section{ padding-top:8px }
.sx-hero-copy{ text-wrap:balance }
.sx-head p:not(.sx-eyebrow){ text-wrap:pretty }
/* Layar sangat lebar: ruang baca sedikit lebih lega */
@media (min-width:1500px){
    .sx-wrap{ width:min(1240px,100% - 64px) }
    .sx-hero{ padding:72px 0 170px }
}

/* HP: lebih rapat supaya halaman tidak terlalu panjang */
@media (max-width:560px){
    .sx-section{ padding:44px 0 }
    .sx-band .sx-section{ padding:40px 0 }
    .sx-head{ margin-bottom:22px }
    .sx-head h2{ font-size:25px }
    .sx-cta-wrap{ padding-block:40px }
    .sx-problem,.sx-type,.sx-benefit,.sx-role,.sx-app-card,.sx-steps li{ padding:16px }
    .sx-problem-list,.sx-types,.sx-benefits,.sx-roles,.sx-apps,.sx-steps{ gap:10px }
    .sx-problem h3,.sx-type h3,.sx-benefit h3{ margin-top:10px }
    .sx-wrap.sx-section+.sx-wrap.sx-section{ padding-top:4px }
}

/* HP (17 Okt 2026): kartu bertumpuk dibuat ringkas — ikon di kiri, judul + teks di kanan — supaya halaman tidak memanjang
   (sebelumnya ±9.200px di 375px). Isi tidak dikurangi, hanya susunannya. */
@media (max-width:560px){
    .sx-benefit,.sx-problem,.sx-type,.sx-steps li{ display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:12px; align-items:start }
    .sx-benefit>*,.sx-problem>*,.sx-type>*,.sx-steps li>*{ grid-column:2 }
    .sx-benefit .sx-module-ico,.sx-type .sx-module-ico,.sx-problem-ico,.sx-steps .sx-step-ico{ grid-column:1; grid-row:1 / span 2; width:40px; height:40px }
    .sx-benefit .sx-module-ico svg,.sx-type .sx-module-ico svg,.sx-problem-ico svg{ width:20px; height:20px }
    .sx-benefit h3,.sx-problem h3,.sx-type h3,.sx-steps h3{ margin-top:0; font-size:16px; line-height:1.3 }
    .sx-benefit p,.sx-type>p,.sx-steps p{ margin-top:3px; font-size:13.5px; line-height:1.5 }
    .sx-problem p{ margin-top:6px; padding-top:8px; font-size:13.5px }
    .sx-type ul{ grid-column:1 / -1; margin-top:12px; padding-top:12px }
    .sx-steps .sx-step-ico{ width:32px; height:32px; margin-top:4px }
    .sx-steps li{ padding-right:48px }
    .sx-steps .sx-step-no{ top:14px; right:14px }
}