@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/dm_sans_latin_400_normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/dm_sans_latin_500_normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/dm_sans_latin_500_italic.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/dm_sans_latin_600_normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/dm_sans_latin_700_normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains_mono_latin_400_normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains_mono_latin_500_normal.woff2) format("woff2")}
:root{
  --brand:#4285F4; --brand-dark:#2942A7; --brand-deep:#1B4FD1;
  --brand-soft:#DFEAFB; --brand-tint:#EEF4FF; --brand-line:#B9D2FA;
  --ink:#101828; --ink-2:#475467; --ink-3:#667085; --line:#D0D5DD; --line-soft:#E4E7EC;
  --surface:#F2F4F7; --surface-2:#F8FAFC; --bg:#FFFFFF;
  --ok:#12805C; --ok-bg:#E6F6EE; --warn:#B54708; --warn-bg:#FFF4E5; --bad:#B42318; --bad-bg:#FEE4E2;
  --sans:"DM Sans", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.10);
  --shadow-lg:0 2px 4px rgba(16,24,40,.04), 0 24px 48px -16px rgba(41,66,167,.18);
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.02em;line-height:1.15}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:96px 0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:16px}
.h2{font-size:clamp(30px,3.6vw,44px)}
.h2 em,.h1 em{font-style:normal;color:var(--brand)}
.lead{font-size:19px;color:var(--ink-2);max-width:60ch}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px -8px rgba(66,133,244,.7)}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn svg{width:18px;height:18px}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-brand{background:var(--brand-tint);color:var(--brand-dark)}
.pill-neutral{background:var(--surface);color:var(--ink-2)}
.mono{font-family:var(--mono);font-size:13px}
.dashed{border:0;border-top:1px dashed var(--line);margin:0}


/* HERO v2 */
.hero{position:relative;padding:80px 0 96px;overflow:hidden;background:#fff}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(720px 420px at 78% 30%, rgba(66,133,244,.16), transparent 62%),
  radial-gradient(520px 320px at 18% 110%, rgba(41,66,167,.08), transparent 60%)}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(16,24,40,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,24,40,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(60% 70% at 70% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(60% 70% at 70% 40%,#000 30%,transparent 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-tag{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.st{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:center;padding:8px}
.st-doc{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(16,24,40,.35),0 0 0 1px rgba(16,24,40,.06);background:#fff;transform:rotate(-1.2deg)}
.st-doc img{width:100%;display:block}
.st-doc .scan{position:absolute;left:0;right:0;top:-14%;height:14%;background:linear-gradient(to bottom,rgba(66,133,244,0),rgba(66,133,244,.28) 70%,rgba(66,133,244,.85));border-bottom:2px solid var(--brand);opacity:0}
.st.play .scan{animation:scan 1.5s cubic-bezier(.4,0,.2,1) .3s 1 both}
.hl{position:absolute;border:2px solid var(--brand);border-radius:4px;box-shadow:0 0 0 4px rgba(66,133,244,.18);opacity:0;transform:scale(1.15)}
.st.play .hl{animation:hl .45s cubic-bezier(.2,.8,.2,1) forwards}
.st.play .hl1{animation-delay:1.7s}.st.play .hl2{animation-delay:2.3s}.st.play .hl3{animation-delay:2.9s}
@keyframes hl{to{opacity:1;transform:none}}
.hl1{left:42.1%;top:18.4%;width:15.3%;height:6%}
.hl2{left:42.1%;top:24.4%;width:11.3%;height:5.2%}
.hl3{left:42.1%;top:45.2%;width:9.5%;height:4.8%}
.st-file{position:absolute;left:22px;top:-14px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:6px 12px 6px 8px;font-size:12.5px;color:var(--ink-2);box-shadow:var(--shadow);z-index:2}
.st-file b{color:var(--ink);font-weight:600}
.st-file .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(66,133,244,.18)}
.st-fields{display:flex;flex-direction:column;gap:12px}
.fc{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(16,24,40,.07);border-radius:14px;box-shadow:0 12px 30px -12px rgba(16,24,40,.22);opacity:0;transform:translateX(18px)}
.fc::before{content:"";position:absolute;left:-22px;top:50%;width:22px;height:1.5px;background:linear-gradient(90deg,var(--brand),rgba(66,133,244,.15))}
.st.play .fc{animation:pop .5s cubic-bezier(.2,.8,.2,1) forwards}
.st.play .fc:nth-child(1){animation-delay:1.85s}.st.play .fc:nth-child(2){animation-delay:2.45s}.st.play .fc:nth-child(3){animation-delay:3.05s}
.fc .k{font-size:12px;color:var(--ink-3);margin-bottom:4px}
.fc .v{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink)}
.fc .conf{font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-bg);padding:5px 9px;border-radius:999px;white-space:nowrap}
.st-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 4px 0;font-size:12.5px;white-space:nowrap;color:var(--ink-2);opacity:0}
.st.play .st-status{animation:pop .5s ease 3.6s forwards}
.st-status b{color:var(--ink);font-weight:600}
.st.done .scan{display:none}.st.done .fc,.st.done .st-status,.st.done .hl{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:reduce){.st .scan{display:none}.st .fc,.st .st-status,.st .hl{opacity:1;transform:none;animation:none!important}}
/* PROOF v2 */
.proof{padding:0 0 72px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:56px 0 48px;border-top:1px solid var(--line-soft)}
.num{font-size:clamp(48px,5.4vw,72px);font-weight:500;letter-spacing:-0.045em;line-height:1;color:var(--ink);font-style:italic;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.num small{font-size:.46em;font-style:normal;letter-spacing:-.02em;color:var(--brand-dark);margin-left:5px}
.num-label{margin-top:12px;color:var(--ink-2);font-size:15px;max-width:26ch}
.trusted{padding-top:40px;border-top:1px dashed var(--line)}
.trusted .eyebrow{text-align:center;margin-bottom:22px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;padding:8px 0;animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:36px;width:auto;flex:none;opacity:.92}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:28px 40px}.marquee{mask-image:none;-webkit-mask-image:none}}
.certs-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.cert-chip{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line-soft);border-radius:999px;padding:7px 7px 7px 14px;font-size:14px;background:#fff}
.cert-chip b{font-weight:600}
@media (max-width:1024px){.hero .wrap{grid-template-columns:1fr;gap:48px}.st-doc{transform:none}}
@media (max-width:720px){.hero{padding:40px 0 64px}.st{grid-template-columns:1fr;gap:28px;padding:0}.st-file{left:12px}.fc::before{display:none}.proof-grid{grid-template-columns:1fr;gap:28px;padding:40px 0 32px}.num-label{max-width:none}.marquee-track{gap:40px}.marquee-track img{height:28px}}

/* SEMBUH LOGO */
footer .partof{display:inline-flex;align-items:center;gap:7px}
.sembuh-logo{height:17px;width:auto;display:block;position:relative;top:-1px}

/* CERT BADGES */
.certs-row{gap:14px}
.cert-chip{padding:8px 14px 8px 8px;gap:12px;border-radius:16px}
.cert-chip .badge{color:var(--brand-dark);flex:none}
.cert-chip .cert-txt{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.cert-chip .cert-txt b{font-size:14px;line-height:1.1}
.cert-chip.dim .badge{color:var(--ink-3);filter:grayscale(1);opacity:.7}
.cert-chip.dim b{color:var(--ink-2)}

/* TILES (Apple-style progressive disclosure) */
.tiles-sec{padding:16px 0 0;background:#fff}
.tiles{display:grid;gap:16px;margin-bottom:16px}
.tiles-1{grid-template-columns:1fr}
.tiles-2{grid-template-columns:1fr 1fr}
.tiles-3{grid-template-columns:repeat(3,1fr)}
.tile{position:relative;background:var(--surface);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;min-height:520px}
.tile-copy{padding:56px 40px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.tile-copy .eyebrow{margin-bottom:4px}
.tile-h{font-size:clamp(26px,2.6vw,36px);letter-spacing:-0.03em;line-height:1.1;max-width:22ch}
.tile-p{font-size:17px;color:var(--ink-2);max-width:46ch;line-height:1.45}
.tile-links{display:flex;gap:24px;margin-top:6px}
.more{appearance:none;background:none;border:0;font:inherit;font-size:16px;font-weight:500;color:var(--brand-deep);cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 0}
.more:hover{text-decoration:underline}
.more .chev{display:inline-block;transition:transform .2s}
.more[aria-expanded="true"] .chev{transform:rotate(90deg)}
.tile-visual{margin-top:auto;padding:0 32px 0;display:flex;justify-content:center;align-items:flex-end;flex:1;min-height:0}
.tile-wide{flex-direction:row;min-height:440px}
.tile-wide .tile-copy{flex:0 0 46%;text-align:left;align-items:flex-start;justify-content:center;padding:56px 48px}
.tile-wide .tile-visual{flex:1;margin-top:0;align-self:stretch;align-items:center;justify-content:center;padding:32px 40px 32px 0}
.tile-wide .tile-h{max-width:18ch}
.tile-stack{min-height:0}
.tile-stack .tile-visual{padding:16px 40px 56px;align-items:center}
.tiles-3 .tile{min-height:0}
.tiles-3 .tile-copy{padding:44px 28px 8px;gap:8px}
.tiles-3 .tile-h{font-size:27px}
.tiles-3 .tile-visual{height:296px;align-items:center;justify-content:center;padding:20px 36px 32px;overflow:hidden}
.tile-dark{background:var(--ink);color:#fff}
.tile-dark .tile-h{color:#fff}.tile-dark .tile-p{color:#CBD5E1}.tile-dark .eyebrow{color:#9FC5F6}.tile-dark .more{color:#9FC5F6}
/* tile visuals */
.tv-doc{width:min(100%,520px);filter:drop-shadow(0 20px 36px rgba(16,24,40,.18))}
.tv-ex{position:relative;width:min(100%,290px);margin:0 auto}
.tv-ex img{width:100%;border-radius:10px;box-shadow:var(--shadow-lg)}
.tv-ex .field{position:absolute;opacity:1;transform:none;width:172px;box-shadow:var(--shadow-lg);padding:9px 11px;gap:8px}
.tv-ex .field .k{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-ex .field .v{font-size:13px}
.tv-ex .f1{top:-16px;right:-28px}.tv-ex .f2{bottom:-16px;right:-28px}
.tv-vf{width:100%;max-width:400px}
.tv-vf .rs,.tv-vf .vrow .d{display:none}
.tv-vf .val-h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.tv-vf .vrow{padding:9px 12px;grid-template-columns:18px 1fr}
.tv-vf .vrow .code{display:none}
.tv-vf .vrow .t{font-size:12.5px;gap:6px}
.tv-vf .vrow .t .pill{height:20px;font-size:10.5px}
.tv-vf .val{box-shadow:var(--shadow-lg)}
.tv-vf .vrow{padding:9px 12px}
.tv-as{width:100%;max-width:400px;display:grid;gap:10px}
.tv-as .route-bar{justify-content:center}
.tv-as .crow{grid-template-columns:110px 1fr auto;padding:9px 12px}
.tv-as .crow .v{white-space:nowrap;font-size:12px}
.tv-as .crow .lc{display:none}
.tv-as .conf-t{box-shadow:var(--shadow-lg)}
.tv-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.tv-flow .node{background:#fff;color:var(--ink);border:1px solid var(--line-soft);border-radius:12px;padding:14px 20px;font-weight:600;font-size:15px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;white-space:nowrap}
.tv-flow .node.st{background:var(--brand-dark);color:#fff;border-color:transparent}
.tv-flow .node .n{font-family:var(--mono);font-size:11px;opacity:.7;font-weight:500}
.tv-flow .ar{color:#9FC5F6}
.tv-flow .ar svg{width:18px;height:18px;display:block}
.tiles-2 .tile{min-height:0}
.tv-case{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 0 52px;width:100%}
.tv-case img{height:56px;width:auto;max-width:260px;object-fit:contain}
.tv-case .results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,520px);margin:0}
.tv-case .res{background:#fff;border-top:0;border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.tv-case .res .n{font-size:26px}
.tv-case .res .n.txt{font-size:15px}
/* key benefits + security */
.kb-head{padding:56px 0 24px}
.kb-head .h2{font-size:clamp(28px,3.2vw,40px)}
.tiles-kb .tile{min-height:0}
.tiles-kb .tile-copy{padding:48px 32px 44px;gap:10px}
.tiles-kb .tile-h{font-size:27px;max-width:16ch}
.tiles-kb .tile-p{font-size:15.5px;max-width:none}
.tiles-kb .kpi-line{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(66,133,244,.35);font-size:12.5px;color:var(--ink-3);width:100%}
.tiles-kb .kpi-line b{color:var(--brand);font-weight:600;font-style:italic}
.sec-band{padding:80px 0 88px;background:#fff}
.sec-band .h2{font-size:clamp(28px,3.2vw,40px)}
.sec-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.sec-card{background:var(--brand-tint);border:0;border-radius:20px;padding:26px 24px}
.sec-card .ic{width:36px;height:36px;border-radius:10px;background:#fff;color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.sec-card .ic svg{width:18px;height:18px}
.sec-card b{display:block;font-weight:600;margin-bottom:6px;font-size:16px}
.sec-card p{color:var(--ink-2);font-size:14.5px;line-height:1.5}
@media (max-width:1024px){.sec-grid4{grid-template-columns:1fr 1fr}}
.sec-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,440px);padding-bottom:8px}
.sec-chip{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.sec-chip .ic{width:32px;height:32px;border-radius:9px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;flex:none}
.sec-chip .ic svg{width:16px;height:16px}
.sec-chip b{font-size:14px;font-weight:600;line-height:1.2}
@media (max-width:720px){.sec-grid4{grid-template-columns:1fr}.tiles-kb .tile-copy{padding:36px 24px 32px}}
/* security visual */
.sc-vis{display:flex;align-items:center;gap:0;width:min(100%,600px);padding:0}
.sc-node{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);flex:0 0 80px;text-align:center}
.sc-ni{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--brand);display:grid;place-items:center;box-shadow:var(--shadow)}
.sc-ni svg{width:20px;height:20px}
.sc-link{position:relative;flex:1;height:44px;display:flex;align-items:center;justify-content:center;min-width:72px}
.sc-line{position:absolute;left:0;right:0;top:50%;height:2px;background-image:linear-gradient(90deg,var(--brand-line) 0 8px,transparent 8px 14px);background-size:14px 2px}
.sc-vis.on .sc-line{background-image:linear-gradient(90deg,var(--brand) 0 8px,transparent 8px 14px);animation:dash 1s linear infinite}
@keyframes dash{from{background-position:0 0}to{background-position:14px 0}}
.sc-lock{position:relative;z-index:1;display:inline-flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:4px 8px;color:var(--brand);font-size:10.5px;font-weight:700;box-shadow:var(--shadow);opacity:0;transform:scale(.8);transition:opacity .4s ease,transform .4s ease}
.sc-lock svg{width:12px;height:12px}
.sc-lock i{font-style:normal;color:var(--ink-2)}
.sc-vis.on .sc-lock{opacity:1;transform:none}
.sc-vis.on .sc-link:nth-child(2) .sc-lock{transition-delay:.3s}.sc-vis.on .sc-link:nth-child(4) .sc-lock{transition-delay:.9s}
.sc-core{flex:0 0 196px;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:16px 12px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;position:relative}
.sc-core::before{content:"";position:absolute;inset:-6px;border-radius:24px;border:2px solid rgba(66,133,244,.25);opacity:0;transition:opacity .5s ease .6s}
.sc-vis.on .sc-core::before{opacity:1;animation:ring 3s ease-in-out 1.4s infinite}
@keyframes ring{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.035);opacity:.35}}
.sc-shield{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;margin-bottom:6px}
.sc-shield svg{width:22px;height:22px}
.sc-core b{font-size:14px;font-weight:600}
.sc-core>span{font-size:11.5px;color:var(--ink-3)}
.sc-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:10px}
.sc-pills em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--brand-deep);background:var(--brand-tint);padding:4px 8px;border-radius:999px}
@media (max-width:720px){.sc-vis{flex-direction:column;gap:6px}.sc-link{width:100%;height:44px;min-width:0}.sc-core{margin:8px 0}.sc-line{left:50%;right:auto;top:0;bottom:0;height:auto;width:2px;background-image:linear-gradient(180deg,var(--brand-line) 0 8px,transparent 8px 14px);background-size:2px 14px}.sc-vis.on .sc-line{background-image:linear-gradient(180deg,var(--brand) 0 8px,transparent 8px 14px)}.sc-node{flex:none}}
@media (prefers-reduced-motion:reduce){.sc-lock{opacity:1!important;transform:none!important}.sc-vis.on .sc-line,.sc-vis.on .sc-core::before{animation:none!important}}
/* key-benefit visual */
.kb-vis{width:min(100%,460px);display:flex;flex-direction:column;gap:14px;padding:0}
.kb-doc{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:6px 0 4px;overflow:hidden}
.kb-dh{display:flex;align-items:center;gap:8px;padding:10px 16px 12px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ink-3)}
.kb-dh b{color:var(--ink);font-weight:600}
.kb-ico{width:26px;height:26px;border-radius:7px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center}
.kb-ico svg{width:14px;height:14px}
.kb-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-soft);opacity:.35;transform:translateX(-6px);transition:opacity .45s ease,transform .45s ease}
.kb-row:last-child{border-bottom:0}
.kb-row b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.kb-row span{font-size:12.5px;color:var(--ink-3)}
.kb-chk{width:22px;height:22px;border-radius:50%;background:var(--line-soft);color:#fff;display:grid;place-items:center;flex:none;transition:background .45s ease}
.kb-chk svg{width:12px;height:12px}
.kb-vis.on .kb-row{opacity:1;transform:none}
.kb-vis.on .kb-row .kb-chk{background:var(--ok)}
.kb-vis.on .kb-row:nth-child(2){transition-delay:.15s}.kb-vis.on .kb-row:nth-child(3){transition-delay:.5s}.kb-vis.on .kb-row:nth-child(4){transition-delay:.85s}
.kb-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.kb-tag{background:var(--brand);color:#fff;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.kb-vis.on .kb-tag:nth-child(1){opacity:1;transform:none;transition-delay:1.2s}.kb-vis.on .kb-tag:nth-child(2){opacity:1;transform:none;transition-delay:1.4s}.kb-vis.on .kb-tag:nth-child(3){opacity:1;transform:none;transition-delay:1.6s}
@media (prefers-reduced-motion:reduce){.kb-row,.kb-tag{opacity:1!important;transform:none!important;transition:none!important}.kb-chk{background:var(--ok)!important}}
/* security page: orbit carousel */
.sec-home{padding:88px 0 40px;overflow:hidden}
.sec-home-head{text-align:center;margin-bottom:8px}
.sec-home-head .h2{font-size:clamp(28px,3.2vw,40px)}
.sec-deck{display:flex;flex-direction:column;align-items:center;gap:26px}
.sec-stack{position:relative;width:100%;max-width:1100px;height:280px;perspective:1600px}
.sec-slide{position:absolute;left:50%;top:50%;width:min(88%,480px);height:230px;margin:-115px 0 0 -240px;transition:transform .9s cubic-bezier(.3,.7,.3,1),opacity .6s ease,filter .9s ease;will-change:transform,opacity}
@media (max-width:720px){.sec-slide{width:88%;margin-left:-44%}}
.sec-slide[data-pos="0"]{transform:translateX(0) translateZ(0) scale(1);opacity:1;z-index:4;filter:none}
.sec-slide[data-pos="1"]{transform:translateX(52%) translateZ(-260px) rotateY(-28deg) scale(.86);opacity:.7;z-index:2;filter:brightness(.9)}
.sec-slide[data-pos="2"]{transform:translateX(0) translateZ(-520px) scale(.7);opacity:0;z-index:1}
.sec-slide[data-pos="3"]{transform:translateX(-52%) translateZ(-260px) rotateY(28deg) scale(.86);opacity:.7;z-index:2;filter:brightness(.9)}
.sec-card-blue{height:100%;background:linear-gradient(135deg,#4285F4 0%,#2F6FE0 100%);color:#fff;border-radius:24px;padding:30px 34px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 30px 60px -24px rgba(41,66,167,.55)}
.sec-card-blue .sic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;margin-bottom:20px}
.sec-card-blue .sic svg{width:20px;height:20px}
.sec-card-blue b{color:#fff;font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.sec-card-blue p{color:rgba(255,255,255,.88);font-size:15.5px;line-height:1.5;max-width:36ch}
.sec-ctl{display:flex;align-items:center;gap:20px}
.sec-dots{display:flex;gap:6px}
.sec-dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);padding:0;cursor:pointer;transition:transform .2s,background .2s}
.sec-dots button.on{background:var(--brand);transform:scale(1.25)}
.sec-btns{display:flex;gap:10px}
@media (prefers-reduced-motion:reduce){.sec-slide{transition:none}}
.car-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .15s}
.car-btn:hover{background:var(--surface)}
.car-btn svg{width:18px;height:18px}
/* compliance cards inside the orbit */
.sec-card-logo{flex-direction:row;align-items:center;gap:24px}
.sec-card-logo .slogo{flex:0 0 auto;width:104px;height:104px;border-radius:20px;background:#fff;display:grid;place-items:center;padding:12px;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.sec-card-logo .slogo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sec-card-logo b{display:block;margin-bottom:6px}
.sec-card-logo .spill{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.18);color:#fff;padding:4px 10px;border-radius:999px;margin-bottom:10px}
.sec-card-logo p{max-width:30ch}
@media (max-width:520px){.sec-card-logo{gap:16px;padding:24px 22px}.sec-card-logo .slogo{width:80px;height:80px;border-radius:16px}}
/* details */
.detail{display:none;margin:-4px 0 16px}
.detail.open{display:block;animation:dopen .35s cubic-bezier(.2,.8,.2,1)}
@keyframes dopen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.detail .panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:0}
.detail .dbox{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:36px}
.detail .cause{margin-top:0}
.detail .flow{margin-top:0}
.detail .case{box-shadow:none;border-radius:var(--r-xl)}
@media (max-width:1024px){
  .tiles-3{grid-template-columns:1fr}
  .tile-wide{flex-direction:column;min-height:0}
  .tile-wide .tile-copy{flex:none;text-align:center;align-items:center;padding:48px 32px 16px}
  .tile-wide .tile-visual{padding:16px 32px 32px;align-items:flex-end}
  .tile-wide .tile-h{max-width:22ch}
  .detail .panel{grid-template-columns:1fr}
}
@media (max-width:720px){
  .tiles-2{grid-template-columns:1fr}
  .tile{min-height:0;border-radius:20px}
  .tile-copy{padding:40px 24px 16px}
  .tile-visual{padding:16px 20px 0}
  .tv-ex .field{width:160px}
  .tv-flow .node{padding:10px 12px;font-size:13px}
  .detail .dbox{padding:22px}
}

/* LANG SWITCH */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:#fff}
.lang a{font-size:12.5px;font-weight:600;color:var(--ink-3);padding:5px 10px;border-radius:999px;letter-spacing:.04em;text-decoration:none}
.lang a[aria-current="true"]{background:var(--brand);color:#fff}
.nav-right{display:flex;align-items:center;gap:12px}
html[lang="id"] .h1{font-size:clamp(34px,3.8vw,50px)}
html[lang="id"] .subhero .h1{max-width:none}
/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line-soft)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand-logo{height:34px;width:auto}
.nav-links{display:flex;gap:32px;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{height:42px;padding:0 18px;font-size:14px}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;border-radius:2px}

/* HERO */
.hero{padding:72px 0 88px;background:
  radial-gradient(1200px 520px at 80% -10%, rgba(66,133,244,.14), transparent 60%),
  linear-gradient(#fff, #fff)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.h1{font-size:clamp(38px,4.4vw,58px);letter-spacing:-0.03em;line-height:1.06}
.hero .lead{margin-top:22px}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-tag{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}

/* DEMO STAGE */
.stage>*{min-width:0}
.stage{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:20px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;overflow:hidden}
.stage-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.stage-head .file{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.stage-head .file b{font-weight:600;color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dot.on{background:var(--brand);box-shadow:0 0 0 4px rgba(66,133,244,.18)}
.doc{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);border:1px solid var(--line-soft)}
.doc img{width:100%;height:auto}
.scan{position:absolute;left:0;right:0;top:-12%;height:12%;background:linear-gradient(to bottom, rgba(66,133,244,0), rgba(66,133,244,.35) 70%, rgba(66,133,244,.9));border-bottom:2px solid var(--brand);opacity:0;pointer-events:none}
.stage.play .scan{animation:scan 1.6s cubic-bezier(.4,0,.2,1) .35s 1 both}
@keyframes scan{0%{top:-12%;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.fields{display:flex;flex-direction:column;gap:10px;justify-content:center}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:#fff;opacity:0;transform:translateX(14px)}
.stage.play .field{animation:pop .5s cubic-bezier(.2,.8,.2,1) forwards}
.stage.play .field:nth-child(1){animation-delay:1.9s}
.stage.play .field:nth-child(2){animation-delay:2.35s}
.stage.play .field:nth-child(3){animation-delay:2.8s}
.stage.play .field:nth-child(4){animation-delay:3.25s}
@keyframes pop{to{opacity:1;transform:none}}
.field .k{font-size:12px;color:var(--ink-3);margin-bottom:3px}
.field .v{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink);padding:2px 6px;border:1.5px solid var(--brand);border-radius:4px;display:inline-block}
.field .conf{font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-bg);padding:5px 8px;border-radius:999px;white-space:nowrap}
.stage-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-2);opacity:0}
.stage.play .stage-foot{animation:pop .5s ease 3.8s forwards}
.stage-foot b{color:var(--ink);font-weight:600}
.stage-foot .route{display:flex;gap:8px;align-items:center}
.stage.done .scan{display:none}
.stage.done .field,.stage.done .stage-foot{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:reduce){.stage .scan{display:none}.stage .field,.stage .stage-foot{opacity:1;transform:none;animation:none!important}}

/* PROOF */
.proof{padding:0 0 88px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0;border-top:1px solid var(--line-soft);border-bottom:1px dashed var(--line)}
.num{font-size:clamp(44px,5vw,64px);font-weight:500;letter-spacing:-0.04em;line-height:1;color:var(--ink);font-style:italic}
.num small{font-size:.5em;font-style:normal;letter-spacing:-.02em;color:var(--brand-dark);margin-left:4px}
.num-label{margin-top:10px;color:var(--ink-2);font-size:15px;max-width:26ch}
.clients{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.2fr);gap:48px;padding-top:40px;align-items:start}
.clients h4{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:20px}
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px 24px;align-items:center}
.logo-grid img{height:34px;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.certs{display:flex;flex-direction:column;gap:0}
.cert{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.cert:last-child{border-bottom:0}
.cert b{font-weight:600}

/* PROBLEM */
.problem{background:var(--surface-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.problem .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.problem-visual{position:relative}
.problem-visual img{width:100%;filter:drop-shadow(0 24px 40px rgba(16,24,40,.18))}
.problem-visual .note{position:absolute;left:12px;bottom:12px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:8px 10px;font-size:12px;color:var(--ink-2);box-shadow:var(--shadow)}
.cause{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.cause-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px 20px 18px;display:flex;flex-direction:column;gap:10px;min-height:220px}
.cause-card .idx{font-size:28px;font-style:italic;font-weight:500;color:var(--brand);letter-spacing:-.04em;line-height:1}
.cause-card .tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cause-card p{font-size:16px;line-height:1.4}
.cause-card p b{font-weight:600}
.cause-card .sub{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-3)}
.impact{margin-top:20px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);background:var(--brand-tint);color:var(--brand-dark);font-weight:500;font-size:15px}
.impact .lbl{background:var(--brand-dark);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;letter-spacing:.04em}

/* MODULES */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.tab{appearance:none;border:1px solid var(--line-soft);background:#fff;border-radius:var(--r-lg);padding:18px 20px;text-align:left;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s;display:flex;gap:14px;align-items:flex-start}
.tab .n{font-size:13px;font-weight:600;color:var(--ink-3);font-family:var(--mono);padding-top:3px}
.tab .t{font-size:18px;font-weight:600;color:var(--ink);line-height:1.2}
.tab .s{font-size:14px;color:var(--ink-3);margin-top:3px}
.tab[aria-selected="true"]{border-color:var(--brand);box-shadow:0 0 0 3px rgba(66,133,244,.15)}
.tab[aria-selected="true"] .n{color:var(--brand)}
.panel{display:none;margin-top:28px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
.panel.active{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.panel-copy{padding:40px 36px;display:flex;flex-direction:column;gap:22px}
.panel-copy h3{font-size:26px}
.feat{display:grid;gap:16px}
.feat div{padding-left:14px;border-left:2px solid var(--brand-soft)}
.feat b{display:block;font-weight:600;font-size:16px;margin-bottom:2px}
.feat p{font-size:15px;color:var(--ink-2);line-height:1.45}
.kpi{margin-top:auto;padding-top:18px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-3)}
.kpi b{color:var(--brand-dark);font-weight:600;font-style:italic}
.panel-visual{background:var(--surface-2);border-left:1px solid var(--line-soft);padding:32px;display:flex;align-items:center;justify-content:center;min-height:460px}

/* Extract mock */
.mock-ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:18px;width:100%;align-items:center}
.mock-ex .doc{box-shadow:var(--shadow)}
.rec{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;font-size:13px}
.rec-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-soft);background:#fff}
.rec-h b{font-weight:600}
.rec-row{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line-soft)}
.rec-row:last-of-type{border-bottom:0}
.rec-row .k{color:var(--ink-3);font-size:12px}
.rec-row .v{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.rec-row .c{font-family:var(--mono);font-size:11px;font-weight:500;padding:3px 7px;border-radius:999px}
.c-ok{background:var(--ok-bg);color:var(--ok)}.c-warn{background:var(--warn-bg);color:var(--warn)}.c-bad{background:var(--bad-bg);color:var(--bad)}
.rec-json{background:#0F172A;color:#CBD5E1;font-family:var(--mono);font-size:11px;line-height:1.55;padding:12px 14px;white-space:pre-wrap;word-break:break-word}
.rec-json .kk{color:#93C5FD}.rec-json .vv{color:#86EFAC}

/* Verify mock */
.mock-vf{width:100%;display:grid;gap:12px}
.val{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.val-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ink-2)}
.val-h b{color:var(--ink);font-weight:600}
.val-h .rs{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--surface);padding:3px 7px;border-radius:4px}
.vrow{display:grid;grid-template-columns:20px 1fr auto;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);align-items:start;font-size:13px}
.vrow:last-child{border-bottom:0}
.vrow .ic{width:16px;height:16px;border-radius:50%;margin-top:2px;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff}
.ic-warn{background:#F79009}.ic-bad{background:#F04438}.ic-ok{background:#12B76A}
.vrow .t{font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vrow .d{color:var(--ink-3);font-size:12px;margin-top:2px}
.vrow .code{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.recon{display:grid;grid-template-columns:1fr auto auto;gap:8px 12px;padding:8px 14px;font-size:13px;border-bottom:1px solid var(--line-soft);align-items:center}
.recon:last-child{border-bottom:0}
.recon .amt{font-family:var(--mono);font-size:12.5px}
.val-f{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--brand-tint);color:var(--brand-dark);font-size:13px;font-weight:600}

/* Assure mock */
.mock-as{width:100%;display:grid;gap:12px}
.conf-t{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;font-size:13px}
.conf-t .rec-h .mono{color:var(--ink-3)}
.crow{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line-soft)}
.crow:last-child{border-bottom:0}
.crow .k{color:var(--ink-3);font-size:12px}
.crow .v{font-family:var(--mono);font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crow.low{background:var(--warn-bg)}
.crow .lc{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--warn);border:1px solid #F7B267;padding:2px 5px;border-radius:3px;letter-spacing:.04em}
.audit{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;font-family:var(--mono);font-size:11.5px}
.audit .rec-h{font-family:var(--sans);font-size:13px}
.arow{display:grid;grid-template-columns:150px 80px 150px 1fr;gap:10px;padding:7px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.arow:last-child{border-bottom:0}
.arow .a{color:var(--ink);font-weight:500}
.arow.hl{background:var(--brand-tint)}
.ahead{color:var(--ink-3);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--surface-2)}
.route-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}

/* FLOW */
.flow-sec{background:var(--surface-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.flow{display:grid;grid-template-columns:150px 28px 1fr 28px 1fr 28px 1fr 28px 150px;gap:0;align-items:stretch;margin-top:44px}
.flow .col{display:flex;flex-direction:column;gap:8px}
.flow .arrow{display:flex;align-items:center;justify-content:center;color:var(--brand)}
.flow .arrow svg{width:20px;height:20px}
.flow .in,.flow .out{justify-content:center}
.fbox{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;font-weight:500;display:flex;gap:8px;align-items:center}
.fbox svg{width:16px;height:16px;color:var(--brand);flex:none}
.fbox.stack{position:relative}
.fstage{background:#fff;border:1px solid var(--brand-line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
.fstage .fh{background:var(--brand-dark);color:#fff;border-radius:8px;padding:8px 12px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.fstage .fh span{font-size:11px;font-weight:500;opacity:.8;font-family:var(--mono)}
.fstage .fi{border:1px solid var(--line-soft);border-radius:8px;padding:9px 12px;font-size:13.5px;font-weight:500;background:#fff}
.fstage .fi.em{font-style:italic}
.fstage .fnote{font-size:12px;color:var(--ink-3);line-height:1.4;padding:6px 2px 0;border-top:1px dashed var(--line);margin-top:2px}
.fstage .fnote b{color:var(--ink-2);font-weight:600;display:block}
.flow .api{align-self:center;background:var(--brand-dark);color:#fff;font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:6px;text-align:center}
.gov{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gov .lbl{background:var(--brand-dark);color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:6px;letter-spacing:.04em}
.gov .chip{background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink-2)}

/* CASES */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.case{border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;gap:18px;background:#fff;box-shadow:var(--shadow)}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.case-top img{height:36px;width:auto}
.meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;padding:14px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.meta span{color:var(--ink-3)}
.meta b{font-weight:500}
.case p{font-size:15px;color:var(--ink-2);line-height:1.5}
.case p b{color:var(--ink);font-weight:600}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:auto}
.res{padding:14px 0 0;border-top:2px solid var(--brand-soft)}
.res .n{font-size:30px;font-style:italic;font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.res .n.txt{font-size:17px;font-style:normal;letter-spacing:-.01em;padding-top:6px}
.res .l{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.35}
.case .fn{font-size:12px;color:var(--ink-3)}

/* CONTACT */
.contact{background:var(--ink);color:#fff}
.contact .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.contact .eyebrow{color:#9FC5F6}
.contact .h2{color:#fff}
.contact .lead{color:#CBD5E1;margin-top:18px}
.contact-side{display:flex;flex-direction:column;gap:14px;margin-top:32px;font-size:15px;color:#CBD5E1}
.contact-side .row{display:flex;gap:12px;align-items:center}
.contact-side svg{width:18px;height:18px;color:#9FC5F6;flex:none}
.form{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-lg)}
.form h3{font-size:20px;margin-bottom:6px}
.form .hint{font-size:14px;color:var(--ink-3);margin-bottom:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fld label{font-size:13px;font-weight:600;color:var(--ink-2)}
.fld input,.fld textarea,.fld select{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(66,133,244,.18)}
.fld textarea{min-height:96px;resize:vertical}
.form .btn{width:100%;justify-content:center;height:50px}
.form .priv{font-size:12.5px;color:var(--ink-3);margin-top:12px;text-align:center}
.form-ok{display:none;text-align:center;padding:40px 12px}
.form-ok .ic{width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 16px}
.form.sent form{display:none}.form.sent .form-ok{display:block}

/* FOOTER */
footer{padding:40px 0;border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-3)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .left{display:flex;align-items:center;gap:16px}
footer .left .sep{width:1px;height:20px;background:var(--line)}
footer .right{display:flex;gap:20px;align-items:center;flex-wrap:wrap}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .problem .wrap{grid-template-columns:1fr}
  .panel.active{grid-template-columns:1fr}
  .panel-visual{border-left:0;border-top:1px solid var(--line-soft)}
  .flow{grid-template-columns:1fr;gap:8px}
  .flow .arrow{transform:rotate(90deg);height:28px}
  .flow .arrow .api{transform:rotate(-90deg)}
  .flow .in,.flow .out{flex-direction:row;flex-wrap:wrap}
  .flow .in .fbox,.flow .out .fbox{flex:1 1 120px}
  .contact .wrap{grid-template-columns:1fr;gap:40px}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .clients{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  body{font-size:16px}
  section{padding:64px 0}
  .nav-links,.nav .btn-primary{display:none}
  .nav-right{gap:4px}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:72px;background:#fff;padding:16px 24px 24px;border-bottom:1px solid var(--line-soft);gap:18px}
  .hero{padding:40px 0 64px}
  .stage{grid-template-columns:1fr;padding:14px}
  .stage-head{flex-wrap:wrap}
  .stage-head .file span:last-child{display:none}
  .stage-head .pill,.stage-foot .pill{white-space:normal;height:auto;padding:4px 9px;line-height:1.3}
  .stage-foot{flex-wrap:wrap}
  .proof-grid{grid-template-columns:1fr;gap:28px}
  .num-label{max-width:none}
  .logo-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .cause{grid-template-columns:1fr}
  .cause-card{min-height:0}
  .tabs{grid-template-columns:1fr}
  .panel-copy{padding:28px 22px}
  .panel-visual{padding:18px;min-height:0}
  .mock-ex{grid-template-columns:1fr}
  .arow{grid-template-columns:1fr 1fr;font-size:11px}
  .arow .d{grid-column:1/-1}
  .cases{grid-template-columns:1fr}
  .results{grid-template-columns:1fr;gap:8px}
  .grid2{grid-template-columns:1fr}
  .form{padding:22px}
  .impact{align-items:flex-start;flex-direction:column}
}

/* BRAND EMPHASIS (#4285F4) */
.eyebrow{color:var(--brand)}
.more,.more:hover{color:var(--brand)}
.num small{color:var(--brand)}
.kpi b,.mod-meta b{color:var(--brand)}
.prin .sub{color:var(--brand)}
.cert-chip .badge{color:var(--brand)}
.impact{background:var(--brand-tint);color:var(--brand-deep)}
.impact .lbl,.gov .lbl,.fstage .fh,.flow .api,.tv-flow .node.st{background:var(--brand)}
.subnav a.on{background:var(--brand);color:#fff}
.lang button[aria-pressed="true"]{background:var(--brand)}
.dots button.on{background:var(--brand)}
.nav-links a.active{color:var(--brand)}
.fc .v,.field .v{border-color:var(--brand);color:var(--brand-deep)}
.chain-arrow{color:var(--brand)}
.flag{background:var(--brand);color:#fff}
.val-f{background:var(--brand);color:#fff}
.pill-brand{background:var(--brand-tint);color:var(--brand-deep)}
/* blue bands */
.contact{background:linear-gradient(135deg,#4285F4 0%,#2F6FE0 100%)}
.contact .eyebrow{color:#fff;opacity:.85}
.contact .form .eyebrow{color:var(--brand);opacity:1}
.contact .lead{color:rgba(255,255,255,.88)}
.contact-side,.contact-side svg{color:rgba(255,255,255,.9)}
.contact .form .btn-primary{background:var(--brand)}
.closing,.cta-band{background:linear-gradient(135deg,#4285F4 0%,#2F6FE0 100%);border-top:0}
.closing .h2,.cta-band .h2{color:#fff}
.closing .lead,.cta-band .lead{color:rgba(255,255,255,.88)}
.closing .btn-primary,.cta-band .btn-primary{background:#fff;color:var(--brand);box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.closing .btn-primary:hover,.cta-band .btn-primary:hover{background:#F2F6FF}
.closing .btn-ghost,.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.closing .btn-ghost:hover,.cta-band .btn-ghost:hover{border-color:#fff}

/* BLUE PICK (v19) */
.tile{background:var(--brand-tint)}
.prin{background:var(--brand-tint)}
.num{color:var(--brand)}
.num small{color:var(--brand-deep)}
::selection{background:rgba(66,133,244,.25)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* solid-blue tiles */
.tile-blue{background:linear-gradient(135deg,#4285F4 0%,#2F6FE0 100%);color:#fff}
.tile-blue .tile-h{color:#fff}
.tile-blue .tile-p{color:rgba(255,255,255,.88)}
.tile-blue .eyebrow{color:rgba(255,255,255,.8)}
.tile-blue .more,.tile-blue .more:hover{color:#fff}
.tile-blue .tv-doc{filter:drop-shadow(0 24px 40px rgba(0,0,0,.28))}

/* FOOTER v2 */
footer.ft{padding:72px 0 40px;border-top:1px solid var(--line-soft);font-size:15px;color:var(--ink-2)}
footer.ft .wrap{display:block}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px 32px}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ft-brand .brand-logo{height:30px}
.ft-brand p{font-size:15px;color:var(--ink-2);max-width:28ch}
.ft-li{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;font-size:14px}
.ft-li svg{width:16px;height:16px;color:var(--brand)}
.ft-li:hover{color:var(--brand)}
.ft-col{display:flex;flex-direction:column;gap:12px}
.ft-col b{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:4px}
.ft-col a,.ft-col span{color:var(--ink-2);font-size:15px}
.ft-col a:hover{color:var(--brand)}
.ft-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-3)}
.ft-legal{display:flex;gap:24px;margin-top:16px;font-size:14px}
.ft-legal a{color:var(--ink-2)}
.ft-legal a:hover{color:var(--brand)}
@media (max-width:1024px){.ft-grid{grid-template-columns:1fr 1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:720px){.ft-grid{grid-template-columns:1fr 1fr;gap:28px 20px}footer.ft{padding:56px 0 32px}}

/* MOBILE POLISH */
.nav-cta-m{display:none}
@media (max-width:860px){.nav.open .nav-cta-m{display:inline-flex;justify-content:center;margin-top:6px;color:#fff}}
@media (max-width:720px){
  .subnav .wrap{padding:0 8px;gap:2px;justify-content:flex-start}.subnav a{font-size:12.5px;padding:6px 8px;letter-spacing:-.01em}
  .tv-vf .val-h{white-space:normal;line-height:1.35}
  .tv-as .crow{grid-template-columns:84px 1fr auto;gap:8px}.tv-as .crow .v{white-space:normal;overflow-wrap:anywhere;font-size:11.5px}.tv-as .crow .k{font-size:11.5px}
  .btn{min-height:44px}
}

html[lang="id"] .h1{font-size:clamp(34px,3.8vw,50px);line-height:1.08}